Merge branch 'master' into 20827-getting-started-update-new-group-view

3664 files changed, 57163 insertions, 30373 deletions

diff --git a/app/assets/fonts/OFL.txt b/app/assets/fonts/OFL.txt
deleted file mode 100644
index df187637e18..00000000000
--- a/app/assets/fonts/OFL.txt
+++ /dev/null
@@ -1,93 +0,0 @@
-Copyright 2010, 2012, 2014 Adobe Systems Incorporated (http://www.adobe.com/), with Reserved Font Name 'Source'. All Rights Reserved. Source is a trademark of Adobe Systems Incorporated in the United States and/or other countries.
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-
-This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
-
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded, 
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/app/assets/fonts/SourceSansPro-Black.ttf.woff b/app/assets/fonts/SourceSansPro-Black.ttf.woff
deleted file mode 100644
index b7e86200927..00000000000
--- a/app/assets/fonts/SourceSansPro-Black.ttf.woff
+++ /dev/null
diff --git a/app/assets/fonts/SourceSansPro-Black.ttf.woff2 b/app/assets/fonts/SourceSansPro-Black.ttf.woff2
deleted file mode 100644
index c90d078406c..00000000000
--- a/app/assets/fonts/SourceSansPro-Black.ttf.woff2
+++ /dev/null
diff --git a/app/assets/fonts/SourceSansPro-BlackIt.ttf.woff b/app/assets/fonts/SourceSansPro-BlackIt.ttf.woff
deleted file mode 100644
index c3314b1ef06..00000000000
--- a/app/assets/fonts/SourceSansPro-BlackIt.ttf.woff
+++ /dev/null
diff --git a/app/assets/fonts/SourceSansPro-BlackIt.ttf.woff2 b/app/assets/fonts/SourceSansPro-BlackIt.ttf.woff2
deleted file mode 100644
index b87e22c41b5..00000000000
--- a/app/assets/fonts/SourceSansPro-BlackIt.ttf.woff2
+++ /dev/null
diff --git a/app/assets/fonts/SourceSansPro-Bold.ttf.woff b/app/assets/fonts/SourceSansPro-Bold.ttf.woff
deleted file mode 100644
index d1d40f840f8..00000000000
--- a/app/assets/fonts/SourceSansPro-Bold.ttf.woff
+++ /dev/null
diff --git a/app/assets/fonts/SourceSansPro-Bold.ttf.woff2 b/app/assets/fonts/SourceSansPro-Bold.ttf.woff2
deleted file mode 100644
index 0f46f3e833a..00000000000
--- a/app/assets/fonts/SourceSansPro-Bold.ttf.woff2
+++ /dev/null
diff --git a/app/assets/fonts/SourceSansPro-BoldIt.ttf.woff b/app/assets/fonts/SourceSansPro-BoldIt.ttf.woff
deleted file mode 100644
index ef6ff514d3a..00000000000
--- a/app/assets/fonts/SourceSansPro-BoldIt.ttf.woff
+++ /dev/null
diff --git a/app/assets/fonts/SourceSansPro-BoldIt.ttf.woff2 b/app/assets/fonts/SourceSansPro-BoldIt.ttf.woff2
deleted file mode 100644
index 8007df6df32..00000000000
--- a/app/assets/fonts/SourceSansPro-BoldIt.ttf.woff2
+++ /dev/null
diff --git a/app/assets/fonts/SourceSansPro-ExtraLight.ttf.woff b/app/assets/fonts/SourceSansPro-ExtraLight.ttf.woff
deleted file mode 100644
index 1e6c94d9eb3..00000000000
--- a/app/assets/fonts/SourceSansPro-ExtraLight.ttf.woff
+++ /dev/null
diff --git a/app/assets/fonts/SourceSansPro-ExtraLight.ttf.woff2 b/app/assets/fonts/SourceSansPro-ExtraLight.ttf.woff2
deleted file mode 100644
index b715f274082..00000000000
--- a/app/assets/fonts/SourceSansPro-ExtraLight.ttf.woff2
+++ /dev/null
diff --git a/app/assets/fonts/SourceSansPro-ExtraLightIt.ttf.woff b/app/assets/fonts/SourceSansPro-ExtraLightIt.ttf.woff
deleted file mode 100644
index 7a408b1ec73..00000000000
--- a/app/assets/fonts/SourceSansPro-ExtraLightIt.ttf.woff
+++ /dev/null
diff --git a/app/assets/fonts/SourceSansPro-ExtraLightIt.ttf.woff2 b/app/assets/fonts/SourceSansPro-ExtraLightIt.ttf.woff2
deleted file mode 100644
index d8f9d29d4aa..00000000000
--- a/app/assets/fonts/SourceSansPro-ExtraLightIt.ttf.woff2
+++ /dev/null
diff --git a/app/assets/fonts/SourceSansPro-It.ttf.woff b/app/assets/fonts/SourceSansPro-It.ttf.woff
deleted file mode 100644
index 4d54bc95718..00000000000
--- a/app/assets/fonts/SourceSansPro-It.ttf.woff
+++ /dev/null
diff --git a/app/assets/fonts/SourceSansPro-It.ttf.woff2 b/app/assets/fonts/SourceSansPro-It.ttf.woff2
deleted file mode 100644
index a00852641f8..00000000000
--- a/app/assets/fonts/SourceSansPro-It.ttf.woff2
+++ /dev/null
diff --git a/app/assets/fonts/SourceSansPro-Light.ttf.woff b/app/assets/fonts/SourceSansPro-Light.ttf.woff
deleted file mode 100644
index 1706d57d3c5..00000000000
--- a/app/assets/fonts/SourceSansPro-Light.ttf.woff
+++ /dev/null
diff --git a/app/assets/fonts/SourceSansPro-Light.ttf.woff2 b/app/assets/fonts/SourceSansPro-Light.ttf.woff2
deleted file mode 100644
index d8b610ad76e..00000000000
--- a/app/assets/fonts/SourceSansPro-Light.ttf.woff2
+++ /dev/null
diff --git a/app/assets/fonts/SourceSansPro-LightIt.ttf.woff b/app/assets/fonts/SourceSansPro-LightIt.ttf.woff
deleted file mode 100644
index 87378d6c609..00000000000
--- a/app/assets/fonts/SourceSansPro-LightIt.ttf.woff
+++ /dev/null
diff --git a/app/assets/fonts/SourceSansPro-LightIt.ttf.woff2 b/app/assets/fonts/SourceSansPro-LightIt.ttf.woff2
deleted file mode 100644
index e0eebac8273..00000000000
--- a/app/assets/fonts/SourceSansPro-LightIt.ttf.woff2
+++ /dev/null
diff --git a/app/assets/fonts/SourceSansPro-Regular.ttf.woff b/app/assets/fonts/SourceSansPro-Regular.ttf.woff
deleted file mode 100644
index 460ab12a638..00000000000
--- a/app/assets/fonts/SourceSansPro-Regular.ttf.woff
+++ /dev/null
diff --git a/app/assets/fonts/SourceSansPro-Regular.ttf.woff2 b/app/assets/fonts/SourceSansPro-Regular.ttf.woff2
deleted file mode 100644
index 0dd3464c74b..00000000000
--- a/app/assets/fonts/SourceSansPro-Regular.ttf.woff2
+++ /dev/null
diff --git a/app/assets/fonts/SourceSansPro-Semibold.ttf.woff b/app/assets/fonts/SourceSansPro-Semibold.ttf.woff
deleted file mode 100644
index 43379631b2d..00000000000
--- a/app/assets/fonts/SourceSansPro-Semibold.ttf.woff
+++ /dev/null
diff --git a/app/assets/fonts/SourceSansPro-Semibold.ttf.woff2 b/app/assets/fonts/SourceSansPro-Semibold.ttf.woff2
deleted file mode 100644
index 2526d2e1b60..00000000000
--- a/app/assets/fonts/SourceSansPro-Semibold.ttf.woff2
+++ /dev/null
diff --git a/app/assets/fonts/SourceSansPro-SemiboldIt.ttf.woff b/app/assets/fonts/SourceSansPro-SemiboldIt.ttf.woff
deleted file mode 100644
index 232c2048ae7..00000000000
--- a/app/assets/fonts/SourceSansPro-SemiboldIt.ttf.woff
+++ /dev/null
diff --git a/app/assets/fonts/SourceSansPro-SemiboldIt.ttf.woff2 b/app/assets/fonts/SourceSansPro-SemiboldIt.ttf.woff2
deleted file mode 100644
index 606935af089..00000000000
--- a/app/assets/fonts/SourceSansPro-SemiboldIt.ttf.woff2
+++ /dev/null
diff --git a/app/assets/images/auth_buttons/authentiq_64.png b/app/assets/images/auth_buttons/authentiq_64.png
new file mode 100644
index 00000000000..81767bbcc54
--- /dev/null
+++ b/app/assets/images/auth_buttons/authentiq_64.png
diff --git a/app/assets/images/emoji.png b/app/assets/images/emoji.png
index 6f1a34a5591..5dcd9c09b70 100644
--- a/app/assets/images/emoji.png
+++ b/app/assets/images/emoji.png
diff --git a/app/assets/images/emoji/100.png b/app/assets/images/emoji/100.png
new file mode 100644
index 00000000000..6903ff0304a
--- /dev/null
+++ b/app/assets/images/emoji/100.png
diff --git a/app/assets/images/emoji/1234.png b/app/assets/images/emoji/1234.png
new file mode 100644
index 00000000000..248dc7e55b6
--- /dev/null
+++ b/app/assets/images/emoji/1234.png
diff --git a/app/assets/images/emoji/1F627.png b/app/assets/images/emoji/1F627.png
new file mode 100644
index 00000000000..f99026a3bc7
--- /dev/null
+++ b/app/assets/images/emoji/1F627.png
diff --git a/app/assets/images/emoji/8ball.png b/app/assets/images/emoji/8ball.png
new file mode 100644
index 00000000000..38ca662eded
--- /dev/null
+++ b/app/assets/images/emoji/8ball.png
diff --git a/app/assets/images/emoji/a.png b/app/assets/images/emoji/a.png
new file mode 100644
index 00000000000..8603ff05a17
--- /dev/null
+++ b/app/assets/images/emoji/a.png
diff --git a/app/assets/images/emoji/ab.png b/app/assets/images/emoji/ab.png
new file mode 100644
index 00000000000..d9f2d17dea0
--- /dev/null
+++ b/app/assets/images/emoji/ab.png
diff --git a/app/assets/images/emoji/abc.png b/app/assets/images/emoji/abc.png
new file mode 100644
index 00000000000..7688de692a9
--- /dev/null
+++ b/app/assets/images/emoji/abc.png
diff --git a/app/assets/images/emoji/abcd.png b/app/assets/images/emoji/abcd.png
new file mode 100644
index 00000000000..0996a870570
--- /dev/null
+++ b/app/assets/images/emoji/abcd.png
diff --git a/app/assets/images/emoji/accept.png b/app/assets/images/emoji/accept.png
new file mode 100644
index 00000000000..8afd7ce99cf
--- /dev/null
+++ b/app/assets/images/emoji/accept.png
diff --git a/app/assets/images/emoji/aerial_tramway.png b/app/assets/images/emoji/aerial_tramway.png
new file mode 100644
index 00000000000..3eb4b61bf1d
--- /dev/null
+++ b/app/assets/images/emoji/aerial_tramway.png
diff --git a/app/assets/images/emoji/airplane.png b/app/assets/images/emoji/airplane.png
new file mode 100644
index 00000000000..268d2ac3c8e
--- /dev/null
+++ b/app/assets/images/emoji/airplane.png
diff --git a/app/assets/images/emoji/airplane_arriving.png b/app/assets/images/emoji/airplane_arriving.png
new file mode 100644
index 00000000000..d66841962f2
--- /dev/null
+++ b/app/assets/images/emoji/airplane_arriving.png
diff --git a/app/assets/images/emoji/airplane_departure.png b/app/assets/images/emoji/airplane_departure.png
new file mode 100644
index 00000000000..a5766f9f4ae
--- /dev/null
+++ b/app/assets/images/emoji/airplane_departure.png
diff --git a/app/assets/images/emoji/airplane_small.png b/app/assets/images/emoji/airplane_small.png
new file mode 100644
index 00000000000..b731b15e3a8
--- /dev/null
+++ b/app/assets/images/emoji/airplane_small.png
diff --git a/app/assets/images/emoji/alarm_clock.png b/app/assets/images/emoji/alarm_clock.png
new file mode 100644
index 00000000000..cdbc2fbb950
--- /dev/null
+++ b/app/assets/images/emoji/alarm_clock.png
diff --git a/app/assets/images/emoji/alembic.png b/app/assets/images/emoji/alembic.png
new file mode 100644
index 00000000000..307a7324249
--- /dev/null
+++ b/app/assets/images/emoji/alembic.png
diff --git a/app/assets/images/emoji/alien.png b/app/assets/images/emoji/alien.png
new file mode 100644
index 00000000000..3b90e97433b
--- /dev/null
+++ b/app/assets/images/emoji/alien.png
diff --git a/app/assets/images/emoji/ambulance.png b/app/assets/images/emoji/ambulance.png
new file mode 100644
index 00000000000..6fb8076d766
--- /dev/null
+++ b/app/assets/images/emoji/ambulance.png
diff --git a/app/assets/images/emoji/amphora.png b/app/assets/images/emoji/amphora.png
new file mode 100644
index 00000000000..96de5056059
--- /dev/null
+++ b/app/assets/images/emoji/amphora.png
diff --git a/app/assets/images/emoji/anchor.png b/app/assets/images/emoji/anchor.png
new file mode 100644
index 00000000000..b036f70a00b
--- /dev/null
+++ b/app/assets/images/emoji/anchor.png
diff --git a/app/assets/images/emoji/angel.png b/app/assets/images/emoji/angel.png
new file mode 100644
index 00000000000..66ea97a3b99
--- /dev/null
+++ b/app/assets/images/emoji/angel.png
diff --git a/app/assets/images/emoji/angel_tone1.png b/app/assets/images/emoji/angel_tone1.png
new file mode 100644
index 00000000000..391694dc07e
--- /dev/null
+++ b/app/assets/images/emoji/angel_tone1.png
diff --git a/app/assets/images/emoji/angel_tone2.png b/app/assets/images/emoji/angel_tone2.png
new file mode 100644
index 00000000000..700cbe6ed2c
--- /dev/null
+++ b/app/assets/images/emoji/angel_tone2.png
diff --git a/app/assets/images/emoji/angel_tone3.png b/app/assets/images/emoji/angel_tone3.png
new file mode 100644
index 00000000000..be597437d25
--- /dev/null
+++ b/app/assets/images/emoji/angel_tone3.png
diff --git a/app/assets/images/emoji/angel_tone4.png b/app/assets/images/emoji/angel_tone4.png
new file mode 100644
index 00000000000..b06d3c853ef
--- /dev/null
+++ b/app/assets/images/emoji/angel_tone4.png
diff --git a/app/assets/images/emoji/angel_tone5.png b/app/assets/images/emoji/angel_tone5.png
new file mode 100644
index 00000000000..17bd677e334
--- /dev/null
+++ b/app/assets/images/emoji/angel_tone5.png
diff --git a/app/assets/images/emoji/anger.png b/app/assets/images/emoji/anger.png
new file mode 100644
index 00000000000..d63c2e000e4
--- /dev/null
+++ b/app/assets/images/emoji/anger.png
diff --git a/app/assets/images/emoji/anger_right.png b/app/assets/images/emoji/anger_right.png
new file mode 100644
index 00000000000..f5c97c4d297
--- /dev/null
+++ b/app/assets/images/emoji/anger_right.png
diff --git a/app/assets/images/emoji/angry.png b/app/assets/images/emoji/angry.png
new file mode 100644
index 00000000000..cfc4a6ecde5
--- /dev/null
+++ b/app/assets/images/emoji/angry.png
diff --git a/app/assets/images/emoji/ant.png b/app/assets/images/emoji/ant.png
new file mode 100644
index 00000000000..994127ed6b3
--- /dev/null
+++ b/app/assets/images/emoji/ant.png
diff --git a/app/assets/images/emoji/apple.png b/app/assets/images/emoji/apple.png
new file mode 100644
index 00000000000..da650c60f62
--- /dev/null
+++ b/app/assets/images/emoji/apple.png
diff --git a/app/assets/images/emoji/aquarius.png b/app/assets/images/emoji/aquarius.png
new file mode 100644
index 00000000000..641a4f68889
--- /dev/null
+++ b/app/assets/images/emoji/aquarius.png
diff --git a/app/assets/images/emoji/aries.png b/app/assets/images/emoji/aries.png
new file mode 100644
index 00000000000..21a189d0ede
--- /dev/null
+++ b/app/assets/images/emoji/aries.png
diff --git a/app/assets/images/emoji/arrow_backward.png b/app/assets/images/emoji/arrow_backward.png
new file mode 100644
index 00000000000..ee38e3b038e
--- /dev/null
+++ b/app/assets/images/emoji/arrow_backward.png
diff --git a/app/assets/images/emoji/arrow_double_down.png b/app/assets/images/emoji/arrow_double_down.png
new file mode 100644
index 00000000000..90193bfcb40
--- /dev/null
+++ b/app/assets/images/emoji/arrow_double_down.png
diff --git a/app/assets/images/emoji/arrow_double_up.png b/app/assets/images/emoji/arrow_double_up.png
new file mode 100644
index 00000000000..13543d5eef2
--- /dev/null
+++ b/app/assets/images/emoji/arrow_double_up.png
diff --git a/app/assets/images/emoji/arrow_down.png b/app/assets/images/emoji/arrow_down.png
new file mode 100644
index 00000000000..b8eefd0b19f
--- /dev/null
+++ b/app/assets/images/emoji/arrow_down.png
diff --git a/app/assets/images/emoji/arrow_down_small.png b/app/assets/images/emoji/arrow_down_small.png
new file mode 100644
index 00000000000..5870b9a2241
--- /dev/null
+++ b/app/assets/images/emoji/arrow_down_small.png
diff --git a/app/assets/images/emoji/arrow_forward.png b/app/assets/images/emoji/arrow_forward.png
new file mode 100644
index 00000000000..4e2b682857c
--- /dev/null
+++ b/app/assets/images/emoji/arrow_forward.png
diff --git a/app/assets/images/emoji/arrow_heading_down.png b/app/assets/images/emoji/arrow_heading_down.png
new file mode 100644
index 00000000000..2d9d24bca80
--- /dev/null
+++ b/app/assets/images/emoji/arrow_heading_down.png
diff --git a/app/assets/images/emoji/arrow_heading_up.png b/app/assets/images/emoji/arrow_heading_up.png
new file mode 100644
index 00000000000..f29bfcfc0de
--- /dev/null
+++ b/app/assets/images/emoji/arrow_heading_up.png
diff --git a/app/assets/images/emoji/arrow_left.png b/app/assets/images/emoji/arrow_left.png
new file mode 100644
index 00000000000..8c685e0a81b
--- /dev/null
+++ b/app/assets/images/emoji/arrow_left.png
diff --git a/app/assets/images/emoji/arrow_lower_left.png b/app/assets/images/emoji/arrow_lower_left.png
new file mode 100644
index 00000000000..88b37716078
--- /dev/null
+++ b/app/assets/images/emoji/arrow_lower_left.png
diff --git a/app/assets/images/emoji/arrow_lower_right.png b/app/assets/images/emoji/arrow_lower_right.png
new file mode 100644
index 00000000000..7e807da7392
--- /dev/null
+++ b/app/assets/images/emoji/arrow_lower_right.png
diff --git a/app/assets/images/emoji/arrow_right.png b/app/assets/images/emoji/arrow_right.png
new file mode 100644
index 00000000000..4755670b5cc
--- /dev/null
+++ b/app/assets/images/emoji/arrow_right.png
diff --git a/app/assets/images/emoji/arrow_right_hook.png b/app/assets/images/emoji/arrow_right_hook.png
new file mode 100644
index 00000000000..e7258ad3268
--- /dev/null
+++ b/app/assets/images/emoji/arrow_right_hook.png
diff --git a/app/assets/images/emoji/arrow_up.png b/app/assets/images/emoji/arrow_up.png
new file mode 100644
index 00000000000..af8218a87f7
--- /dev/null
+++ b/app/assets/images/emoji/arrow_up.png
diff --git a/app/assets/images/emoji/arrow_up_down.png b/app/assets/images/emoji/arrow_up_down.png
new file mode 100644
index 00000000000..dfa32b97186
--- /dev/null
+++ b/app/assets/images/emoji/arrow_up_down.png
diff --git a/app/assets/images/emoji/arrow_up_small.png b/app/assets/images/emoji/arrow_up_small.png
new file mode 100644
index 00000000000..20a13dcd5cd
--- /dev/null
+++ b/app/assets/images/emoji/arrow_up_small.png
diff --git a/app/assets/images/emoji/arrow_upper_left.png b/app/assets/images/emoji/arrow_upper_left.png
new file mode 100644
index 00000000000..f38718fbe34
--- /dev/null
+++ b/app/assets/images/emoji/arrow_upper_left.png
diff --git a/app/assets/images/emoji/arrow_upper_right.png b/app/assets/images/emoji/arrow_upper_right.png
new file mode 100644
index 00000000000..c43e12d0f64
--- /dev/null
+++ b/app/assets/images/emoji/arrow_upper_right.png
diff --git a/app/assets/images/emoji/arrows_clockwise.png b/app/assets/images/emoji/arrows_clockwise.png
new file mode 100644
index 00000000000..26e49c38388
--- /dev/null
+++ b/app/assets/images/emoji/arrows_clockwise.png
diff --git a/app/assets/images/emoji/arrows_counterclockwise.png b/app/assets/images/emoji/arrows_counterclockwise.png
new file mode 100644
index 00000000000..8d06d8e0912
--- /dev/null
+++ b/app/assets/images/emoji/arrows_counterclockwise.png
diff --git a/app/assets/images/emoji/art.png b/app/assets/images/emoji/art.png
new file mode 100644
index 00000000000..bd6afe9ff06
--- /dev/null
+++ b/app/assets/images/emoji/art.png
diff --git a/app/assets/images/emoji/articulated_lorry.png b/app/assets/images/emoji/articulated_lorry.png
new file mode 100644
index 00000000000..c8217317132
--- /dev/null
+++ b/app/assets/images/emoji/articulated_lorry.png
diff --git a/app/assets/images/emoji/asterisk.png b/app/assets/images/emoji/asterisk.png
new file mode 100644
index 00000000000..2f8e5113803
--- /dev/null
+++ b/app/assets/images/emoji/asterisk.png
diff --git a/app/assets/images/emoji/astonished.png b/app/assets/images/emoji/astonished.png
new file mode 100644
index 00000000000..bd0ac55ec8e
--- /dev/null
+++ b/app/assets/images/emoji/astonished.png
diff --git a/app/assets/images/emoji/athletic_shoe.png b/app/assets/images/emoji/athletic_shoe.png
new file mode 100644
index 00000000000..423fa07dd5d
--- /dev/null
+++ b/app/assets/images/emoji/athletic_shoe.png
diff --git a/app/assets/images/emoji/atm.png b/app/assets/images/emoji/atm.png
new file mode 100644
index 00000000000..4d935307b94
--- /dev/null
+++ b/app/assets/images/emoji/atm.png
diff --git a/app/assets/images/emoji/atom.png b/app/assets/images/emoji/atom.png
new file mode 100644
index 00000000000..5f4567aa093
--- /dev/null
+++ b/app/assets/images/emoji/atom.png
diff --git a/app/assets/images/emoji/avocado.png b/app/assets/images/emoji/avocado.png
new file mode 100644
index 00000000000..06f0d124aed
--- /dev/null
+++ b/app/assets/images/emoji/avocado.png
diff --git a/app/assets/images/emoji/b.png b/app/assets/images/emoji/b.png
new file mode 100644
index 00000000000..25875bc6a14
--- /dev/null
+++ b/app/assets/images/emoji/b.png
diff --git a/app/assets/images/emoji/baby.png b/app/assets/images/emoji/baby.png
new file mode 100644
index 00000000000..a4af92c63c7
--- /dev/null
+++ b/app/assets/images/emoji/baby.png
diff --git a/app/assets/images/emoji/baby_bottle.png b/app/assets/images/emoji/baby_bottle.png
new file mode 100644
index 00000000000..2bd10524180
--- /dev/null
+++ b/app/assets/images/emoji/baby_bottle.png
diff --git a/app/assets/images/emoji/baby_chick.png b/app/assets/images/emoji/baby_chick.png
new file mode 100644
index 00000000000..dccd96576ea
--- /dev/null
+++ b/app/assets/images/emoji/baby_chick.png
diff --git a/app/assets/images/emoji/baby_symbol.png b/app/assets/images/emoji/baby_symbol.png
new file mode 100644
index 00000000000..64a10b71710
--- /dev/null
+++ b/app/assets/images/emoji/baby_symbol.png
diff --git a/app/assets/images/emoji/baby_tone1.png b/app/assets/images/emoji/baby_tone1.png
new file mode 100644
index 00000000000..d20911d40db
--- /dev/null
+++ b/app/assets/images/emoji/baby_tone1.png
diff --git a/app/assets/images/emoji/baby_tone2.png b/app/assets/images/emoji/baby_tone2.png
new file mode 100644
index 00000000000..b0a9b30ed17
--- /dev/null
+++ b/app/assets/images/emoji/baby_tone2.png
diff --git a/app/assets/images/emoji/baby_tone3.png b/app/assets/images/emoji/baby_tone3.png
new file mode 100644
index 00000000000..7de5286fac1
--- /dev/null
+++ b/app/assets/images/emoji/baby_tone3.png
diff --git a/app/assets/images/emoji/baby_tone4.png b/app/assets/images/emoji/baby_tone4.png
new file mode 100644
index 00000000000..9b7a86ac615
--- /dev/null
+++ b/app/assets/images/emoji/baby_tone4.png
diff --git a/app/assets/images/emoji/baby_tone5.png b/app/assets/images/emoji/baby_tone5.png
new file mode 100644
index 00000000000..fe1be34cb88
--- /dev/null
+++ b/app/assets/images/emoji/baby_tone5.png
diff --git a/app/assets/images/emoji/back.png b/app/assets/images/emoji/back.png
new file mode 100644
index 00000000000..d32c5d4f17f
--- /dev/null
+++ b/app/assets/images/emoji/back.png
diff --git a/app/assets/images/emoji/bacon.png b/app/assets/images/emoji/bacon.png
new file mode 100644
index 00000000000..f38a485fbe4
--- /dev/null
+++ b/app/assets/images/emoji/bacon.png
diff --git a/app/assets/images/emoji/badminton.png b/app/assets/images/emoji/badminton.png
new file mode 100644
index 00000000000..7ba15708990
--- /dev/null
+++ b/app/assets/images/emoji/badminton.png
diff --git a/app/assets/images/emoji/baggage_claim.png b/app/assets/images/emoji/baggage_claim.png
new file mode 100644
index 00000000000..409b593e78a
--- /dev/null
+++ b/app/assets/images/emoji/baggage_claim.png
diff --git a/app/assets/images/emoji/balloon.png b/app/assets/images/emoji/balloon.png
new file mode 100644
index 00000000000..07916fe6df1
--- /dev/null
+++ b/app/assets/images/emoji/balloon.png
diff --git a/app/assets/images/emoji/ballot_box.png b/app/assets/images/emoji/ballot_box.png
new file mode 100644
index 00000000000..9b6767aea9e
--- /dev/null
+++ b/app/assets/images/emoji/ballot_box.png
diff --git a/app/assets/images/emoji/ballot_box_with_check.png b/app/assets/images/emoji/ballot_box_with_check.png
new file mode 100644
index 00000000000..284d9573847
--- /dev/null
+++ b/app/assets/images/emoji/ballot_box_with_check.png
diff --git a/app/assets/images/emoji/bamboo.png b/app/assets/images/emoji/bamboo.png
new file mode 100644
index 00000000000..5d5e0e728a0
--- /dev/null
+++ b/app/assets/images/emoji/bamboo.png
diff --git a/app/assets/images/emoji/banana.png b/app/assets/images/emoji/banana.png
new file mode 100644
index 00000000000..f4987279580
--- /dev/null
+++ b/app/assets/images/emoji/banana.png
diff --git a/app/assets/images/emoji/bangbang.png b/app/assets/images/emoji/bangbang.png
new file mode 100644
index 00000000000..58a9c528fca
--- /dev/null
+++ b/app/assets/images/emoji/bangbang.png
diff --git a/app/assets/images/emoji/bank.png b/app/assets/images/emoji/bank.png
new file mode 100644
index 00000000000..dffdcef36a1
--- /dev/null
+++ b/app/assets/images/emoji/bank.png
diff --git a/app/assets/images/emoji/bar_chart.png b/app/assets/images/emoji/bar_chart.png
new file mode 100644
index 00000000000..53c89455008
--- /dev/null
+++ b/app/assets/images/emoji/bar_chart.png
diff --git a/app/assets/images/emoji/barber.png b/app/assets/images/emoji/barber.png
new file mode 100644
index 00000000000..896f4d716cf
--- /dev/null
+++ b/app/assets/images/emoji/barber.png
diff --git a/app/assets/images/emoji/baseball.png b/app/assets/images/emoji/baseball.png
new file mode 100644
index 00000000000..f8463f1538b
--- /dev/null
+++ b/app/assets/images/emoji/baseball.png
diff --git a/app/assets/images/emoji/basketball.png b/app/assets/images/emoji/basketball.png
new file mode 100644
index 00000000000..64c76b79c6d
--- /dev/null
+++ b/app/assets/images/emoji/basketball.png
diff --git a/app/assets/images/emoji/basketball_player.png b/app/assets/images/emoji/basketball_player.png
new file mode 100644
index 00000000000..8ce90c5cad6
--- /dev/null
+++ b/app/assets/images/emoji/basketball_player.png
diff --git a/app/assets/images/emoji/basketball_player_tone1.png b/app/assets/images/emoji/basketball_player_tone1.png
new file mode 100644
index 00000000000..cd12c7ab9bf
--- /dev/null
+++ b/app/assets/images/emoji/basketball_player_tone1.png
diff --git a/app/assets/images/emoji/basketball_player_tone2.png b/app/assets/images/emoji/basketball_player_tone2.png
new file mode 100644
index 00000000000..f892fd596da
--- /dev/null
+++ b/app/assets/images/emoji/basketball_player_tone2.png
diff --git a/app/assets/images/emoji/basketball_player_tone3.png b/app/assets/images/emoji/basketball_player_tone3.png
new file mode 100644
index 00000000000..e109997a91a
--- /dev/null
+++ b/app/assets/images/emoji/basketball_player_tone3.png
diff --git a/app/assets/images/emoji/basketball_player_tone4.png b/app/assets/images/emoji/basketball_player_tone4.png
new file mode 100644
index 00000000000..3b90b946af4
--- /dev/null
+++ b/app/assets/images/emoji/basketball_player_tone4.png
diff --git a/app/assets/images/emoji/basketball_player_tone5.png b/app/assets/images/emoji/basketball_player_tone5.png
new file mode 100644
index 00000000000..bafed7828a7
--- /dev/null
+++ b/app/assets/images/emoji/basketball_player_tone5.png
diff --git a/app/assets/images/emoji/bat.png b/app/assets/images/emoji/bat.png
new file mode 100644
index 00000000000..3152c047e00
--- /dev/null
+++ b/app/assets/images/emoji/bat.png
diff --git a/app/assets/images/emoji/bath.png b/app/assets/images/emoji/bath.png
new file mode 100644
index 00000000000..43fba5c8a28
--- /dev/null
+++ b/app/assets/images/emoji/bath.png
diff --git a/app/assets/images/emoji/bath_tone1.png b/app/assets/images/emoji/bath_tone1.png
new file mode 100644
index 00000000000..2152eabf2f5
--- /dev/null
+++ b/app/assets/images/emoji/bath_tone1.png
diff --git a/app/assets/images/emoji/bath_tone2.png b/app/assets/images/emoji/bath_tone2.png
new file mode 100644
index 00000000000..2102e6133e3
--- /dev/null
+++ b/app/assets/images/emoji/bath_tone2.png
diff --git a/app/assets/images/emoji/bath_tone3.png b/app/assets/images/emoji/bath_tone3.png
new file mode 100644
index 00000000000..fae66181e9f
--- /dev/null
+++ b/app/assets/images/emoji/bath_tone3.png
diff --git a/app/assets/images/emoji/bath_tone4.png b/app/assets/images/emoji/bath_tone4.png
new file mode 100644
index 00000000000..1f8959d0d99
--- /dev/null
+++ b/app/assets/images/emoji/bath_tone4.png
diff --git a/app/assets/images/emoji/bath_tone5.png b/app/assets/images/emoji/bath_tone5.png
new file mode 100644
index 00000000000..c8a08e84f25
--- /dev/null
+++ b/app/assets/images/emoji/bath_tone5.png
diff --git a/app/assets/images/emoji/bathtub.png b/app/assets/images/emoji/bathtub.png
new file mode 100644
index 00000000000..9a5f09361eb
--- /dev/null
+++ b/app/assets/images/emoji/bathtub.png
diff --git a/app/assets/images/emoji/battery.png b/app/assets/images/emoji/battery.png
new file mode 100644
index 00000000000..f593e2bdb65
--- /dev/null
+++ b/app/assets/images/emoji/battery.png
diff --git a/app/assets/images/emoji/beach.png b/app/assets/images/emoji/beach.png
new file mode 100644
index 00000000000..69108c8ea10
--- /dev/null
+++ b/app/assets/images/emoji/beach.png
diff --git a/app/assets/images/emoji/beach_umbrella.png b/app/assets/images/emoji/beach_umbrella.png
new file mode 100644
index 00000000000..220a74f8132
--- /dev/null
+++ b/app/assets/images/emoji/beach_umbrella.png
diff --git a/app/assets/images/emoji/bear.png b/app/assets/images/emoji/bear.png
new file mode 100644
index 00000000000..272d56bbbcc
--- /dev/null
+++ b/app/assets/images/emoji/bear.png
diff --git a/app/assets/images/emoji/bed.png b/app/assets/images/emoji/bed.png
new file mode 100644
index 00000000000..86f964e245d
--- /dev/null
+++ b/app/assets/images/emoji/bed.png
diff --git a/app/assets/images/emoji/bee.png b/app/assets/images/emoji/bee.png
new file mode 100644
index 00000000000..46156060096
--- /dev/null
+++ b/app/assets/images/emoji/bee.png
diff --git a/app/assets/images/emoji/beer.png b/app/assets/images/emoji/beer.png
new file mode 100644
index 00000000000..b6d73dc0b7a
--- /dev/null
+++ b/app/assets/images/emoji/beer.png
diff --git a/app/assets/images/emoji/beers.png b/app/assets/images/emoji/beers.png
new file mode 100644
index 00000000000..b55deb66b41
--- /dev/null
+++ b/app/assets/images/emoji/beers.png
diff --git a/app/assets/images/emoji/beetle.png b/app/assets/images/emoji/beetle.png
new file mode 100644
index 00000000000..3d93174d7fc
--- /dev/null
+++ b/app/assets/images/emoji/beetle.png
diff --git a/app/assets/images/emoji/beginner.png b/app/assets/images/emoji/beginner.png
new file mode 100644
index 00000000000..bc434fb7cb5
--- /dev/null
+++ b/app/assets/images/emoji/beginner.png
diff --git a/app/assets/images/emoji/bell.png b/app/assets/images/emoji/bell.png
new file mode 100644
index 00000000000..5b3b0461999
--- /dev/null
+++ b/app/assets/images/emoji/bell.png
diff --git a/app/assets/images/emoji/bellhop.png b/app/assets/images/emoji/bellhop.png
new file mode 100644
index 00000000000..6b3297ceaf7
--- /dev/null
+++ b/app/assets/images/emoji/bellhop.png
diff --git a/app/assets/images/emoji/bento.png b/app/assets/images/emoji/bento.png
new file mode 100644
index 00000000000..83d41ca7eb9
--- /dev/null
+++ b/app/assets/images/emoji/bento.png
diff --git a/app/assets/images/emoji/bicyclist.png b/app/assets/images/emoji/bicyclist.png
new file mode 100644
index 00000000000..9274da11048
--- /dev/null
+++ b/app/assets/images/emoji/bicyclist.png
diff --git a/app/assets/images/emoji/bicyclist_tone1.png b/app/assets/images/emoji/bicyclist_tone1.png
new file mode 100644
index 00000000000..decc2f728fe
--- /dev/null
+++ b/app/assets/images/emoji/bicyclist_tone1.png
diff --git a/app/assets/images/emoji/bicyclist_tone2.png b/app/assets/images/emoji/bicyclist_tone2.png
new file mode 100644
index 00000000000..0067717b80a
--- /dev/null
+++ b/app/assets/images/emoji/bicyclist_tone2.png
diff --git a/app/assets/images/emoji/bicyclist_tone3.png b/app/assets/images/emoji/bicyclist_tone3.png
new file mode 100644
index 00000000000..a4f7b5e2776
--- /dev/null
+++ b/app/assets/images/emoji/bicyclist_tone3.png
diff --git a/app/assets/images/emoji/bicyclist_tone4.png b/app/assets/images/emoji/bicyclist_tone4.png
new file mode 100644
index 00000000000..a3c8a797db4
--- /dev/null
+++ b/app/assets/images/emoji/bicyclist_tone4.png
diff --git a/app/assets/images/emoji/bicyclist_tone5.png b/app/assets/images/emoji/bicyclist_tone5.png
new file mode 100644
index 00000000000..1606a874051
--- /dev/null
+++ b/app/assets/images/emoji/bicyclist_tone5.png
diff --git a/app/assets/images/emoji/bike.png b/app/assets/images/emoji/bike.png
new file mode 100644
index 00000000000..556ed70f1a7
--- /dev/null
+++ b/app/assets/images/emoji/bike.png
diff --git a/app/assets/images/emoji/bikini.png b/app/assets/images/emoji/bikini.png
new file mode 100644
index 00000000000..77a8a0aae5b
--- /dev/null
+++ b/app/assets/images/emoji/bikini.png
diff --git a/app/assets/images/emoji/biohazard.png b/app/assets/images/emoji/biohazard.png
new file mode 100644
index 00000000000..007b4fc2d85
--- /dev/null
+++ b/app/assets/images/emoji/biohazard.png
diff --git a/app/assets/images/emoji/bird.png b/app/assets/images/emoji/bird.png
new file mode 100644
index 00000000000..e201c22be33
--- /dev/null
+++ b/app/assets/images/emoji/bird.png
diff --git a/app/assets/images/emoji/birthday.png b/app/assets/images/emoji/birthday.png
new file mode 100644
index 00000000000..317e9a41949
--- /dev/null
+++ b/app/assets/images/emoji/birthday.png
diff --git a/app/assets/images/emoji/black_circle.png b/app/assets/images/emoji/black_circle.png
new file mode 100644
index 00000000000..b62b87170e8
--- /dev/null
+++ b/app/assets/images/emoji/black_circle.png
diff --git a/app/assets/images/emoji/black_heart.png b/app/assets/images/emoji/black_heart.png
new file mode 100644
index 00000000000..b4068c3e6e8
--- /dev/null
+++ b/app/assets/images/emoji/black_heart.png
diff --git a/app/assets/images/emoji/black_joker.png b/app/assets/images/emoji/black_joker.png
new file mode 100644
index 00000000000..3d0924b68aa
--- /dev/null
+++ b/app/assets/images/emoji/black_joker.png
diff --git a/app/assets/images/emoji/black_large_square.png b/app/assets/images/emoji/black_large_square.png
new file mode 100644
index 00000000000..162f2bb4290
--- /dev/null
+++ b/app/assets/images/emoji/black_large_square.png
diff --git a/app/assets/images/emoji/black_medium_small_square.png b/app/assets/images/emoji/black_medium_small_square.png
new file mode 100644
index 00000000000..39765bba610
--- /dev/null
+++ b/app/assets/images/emoji/black_medium_small_square.png
diff --git a/app/assets/images/emoji/black_medium_square.png b/app/assets/images/emoji/black_medium_square.png
new file mode 100644
index 00000000000..05a30a6aa2d
--- /dev/null
+++ b/app/assets/images/emoji/black_medium_square.png
diff --git a/app/assets/images/emoji/black_nib.png b/app/assets/images/emoji/black_nib.png
new file mode 100644
index 00000000000..872d0ae1598
--- /dev/null
+++ b/app/assets/images/emoji/black_nib.png
diff --git a/app/assets/images/emoji/black_small_square.png b/app/assets/images/emoji/black_small_square.png
new file mode 100644
index 00000000000..48595d3e1a9
--- /dev/null
+++ b/app/assets/images/emoji/black_small_square.png
diff --git a/app/assets/images/emoji/black_square_button.png b/app/assets/images/emoji/black_square_button.png
new file mode 100644
index 00000000000..a78fc2f6b63
--- /dev/null
+++ b/app/assets/images/emoji/black_square_button.png
diff --git a/app/assets/images/emoji/blossom.png b/app/assets/images/emoji/blossom.png
new file mode 100644
index 00000000000..4083026c157
--- /dev/null
+++ b/app/assets/images/emoji/blossom.png
diff --git a/app/assets/images/emoji/blowfish.png b/app/assets/images/emoji/blowfish.png
new file mode 100644
index 00000000000..a10f4f84e35
--- /dev/null
+++ b/app/assets/images/emoji/blowfish.png
diff --git a/app/assets/images/emoji/blue_book.png b/app/assets/images/emoji/blue_book.png
new file mode 100644
index 00000000000..e1e455401cc
--- /dev/null
+++ b/app/assets/images/emoji/blue_book.png
diff --git a/app/assets/images/emoji/blue_car.png b/app/assets/images/emoji/blue_car.png
new file mode 100644
index 00000000000..e8ba817d393
--- /dev/null
+++ b/app/assets/images/emoji/blue_car.png
diff --git a/app/assets/images/emoji/blue_heart.png b/app/assets/images/emoji/blue_heart.png
new file mode 100644
index 00000000000..bdf1287e55e
--- /dev/null
+++ b/app/assets/images/emoji/blue_heart.png
diff --git a/app/assets/images/emoji/blush.png b/app/assets/images/emoji/blush.png
new file mode 100644
index 00000000000..aac1a424ad4
--- /dev/null
+++ b/app/assets/images/emoji/blush.png
diff --git a/app/assets/images/emoji/boar.png b/app/assets/images/emoji/boar.png
new file mode 100644
index 00000000000..fead972633c
--- /dev/null
+++ b/app/assets/images/emoji/boar.png
diff --git a/app/assets/images/emoji/bomb.png b/app/assets/images/emoji/bomb.png
new file mode 100644
index 00000000000..c7f8f81c939
--- /dev/null
+++ b/app/assets/images/emoji/bomb.png
diff --git a/app/assets/images/emoji/book.png b/app/assets/images/emoji/book.png
new file mode 100644
index 00000000000..0f4447ed396
--- /dev/null
+++ b/app/assets/images/emoji/book.png
diff --git a/app/assets/images/emoji/bookmark.png b/app/assets/images/emoji/bookmark.png
new file mode 100644
index 00000000000..bbb444611f0
--- /dev/null
+++ b/app/assets/images/emoji/bookmark.png
diff --git a/app/assets/images/emoji/bookmark_tabs.png b/app/assets/images/emoji/bookmark_tabs.png
new file mode 100644
index 00000000000..f8d9e01b428
--- /dev/null
+++ b/app/assets/images/emoji/bookmark_tabs.png
diff --git a/app/assets/images/emoji/books.png b/app/assets/images/emoji/books.png
new file mode 100644
index 00000000000..59a8bafeb0d
--- /dev/null
+++ b/app/assets/images/emoji/books.png
diff --git a/app/assets/images/emoji/boom.png b/app/assets/images/emoji/boom.png
new file mode 100644
index 00000000000..9b0f027b1a8
--- /dev/null
+++ b/app/assets/images/emoji/boom.png
diff --git a/app/assets/images/emoji/boot.png b/app/assets/images/emoji/boot.png
new file mode 100644
index 00000000000..11f1065ed07
--- /dev/null
+++ b/app/assets/images/emoji/boot.png
diff --git a/app/assets/images/emoji/bouquet.png b/app/assets/images/emoji/bouquet.png
new file mode 100644
index 00000000000..11455af6df4
--- /dev/null
+++ b/app/assets/images/emoji/bouquet.png
diff --git a/app/assets/images/emoji/bow.png b/app/assets/images/emoji/bow.png
new file mode 100644
index 00000000000..d8f793088dc
--- /dev/null
+++ b/app/assets/images/emoji/bow.png
diff --git a/app/assets/images/emoji/bow_and_arrow.png b/app/assets/images/emoji/bow_and_arrow.png
new file mode 100644
index 00000000000..6a538bf475f
--- /dev/null
+++ b/app/assets/images/emoji/bow_and_arrow.png
diff --git a/app/assets/images/emoji/bow_tone1.png b/app/assets/images/emoji/bow_tone1.png
new file mode 100644
index 00000000000..87afb7b54cf
--- /dev/null
+++ b/app/assets/images/emoji/bow_tone1.png
diff --git a/app/assets/images/emoji/bow_tone2.png b/app/assets/images/emoji/bow_tone2.png
new file mode 100644
index 00000000000..3ccf7dc0850
--- /dev/null
+++ b/app/assets/images/emoji/bow_tone2.png
diff --git a/app/assets/images/emoji/bow_tone3.png b/app/assets/images/emoji/bow_tone3.png
new file mode 100644
index 00000000000..8b9eb64f926
--- /dev/null
+++ b/app/assets/images/emoji/bow_tone3.png
diff --git a/app/assets/images/emoji/bow_tone4.png b/app/assets/images/emoji/bow_tone4.png
new file mode 100644
index 00000000000..683795ff40d
--- /dev/null
+++ b/app/assets/images/emoji/bow_tone4.png
diff --git a/app/assets/images/emoji/bow_tone5.png b/app/assets/images/emoji/bow_tone5.png
new file mode 100644
index 00000000000..7969d971752
--- /dev/null
+++ b/app/assets/images/emoji/bow_tone5.png
diff --git a/app/assets/images/emoji/bowling.png b/app/assets/images/emoji/bowling.png
new file mode 100644
index 00000000000..63add89e53b
--- /dev/null
+++ b/app/assets/images/emoji/bowling.png
diff --git a/app/assets/images/emoji/boxing_glove.png b/app/assets/images/emoji/boxing_glove.png
new file mode 100644
index 00000000000..9838f24e51a
--- /dev/null
+++ b/app/assets/images/emoji/boxing_glove.png
diff --git a/app/assets/images/emoji/boy.png b/app/assets/images/emoji/boy.png
new file mode 100644
index 00000000000..8ecfb0a4e92
--- /dev/null
+++ b/app/assets/images/emoji/boy.png
diff --git a/app/assets/images/emoji/boy_tone1.png b/app/assets/images/emoji/boy_tone1.png
new file mode 100644
index 00000000000..2fc436ea512
--- /dev/null
+++ b/app/assets/images/emoji/boy_tone1.png
diff --git a/app/assets/images/emoji/boy_tone2.png b/app/assets/images/emoji/boy_tone2.png
new file mode 100644
index 00000000000..09a5f18d360
--- /dev/null
+++ b/app/assets/images/emoji/boy_tone2.png
diff --git a/app/assets/images/emoji/boy_tone3.png b/app/assets/images/emoji/boy_tone3.png
new file mode 100644
index 00000000000..3cfe675dd3a
--- /dev/null
+++ b/app/assets/images/emoji/boy_tone3.png
diff --git a/app/assets/images/emoji/boy_tone4.png b/app/assets/images/emoji/boy_tone4.png
new file mode 100644
index 00000000000..780be0ace36
--- /dev/null
+++ b/app/assets/images/emoji/boy_tone4.png
diff --git a/app/assets/images/emoji/boy_tone5.png b/app/assets/images/emoji/boy_tone5.png
new file mode 100644
index 00000000000..f32fe22e35c
--- /dev/null
+++ b/app/assets/images/emoji/boy_tone5.png
diff --git a/app/assets/images/emoji/bread.png b/app/assets/images/emoji/bread.png
new file mode 100644
index 00000000000..6676510aaa5
--- /dev/null
+++ b/app/assets/images/emoji/bread.png
diff --git a/app/assets/images/emoji/bride_with_veil.png b/app/assets/images/emoji/bride_with_veil.png
new file mode 100644
index 00000000000..eaf4bd97890
--- /dev/null
+++ b/app/assets/images/emoji/bride_with_veil.png
diff --git a/app/assets/images/emoji/bride_with_veil_tone1.png b/app/assets/images/emoji/bride_with_veil_tone1.png
new file mode 100644
index 00000000000..c4fb141ae8f
--- /dev/null
+++ b/app/assets/images/emoji/bride_with_veil_tone1.png
diff --git a/app/assets/images/emoji/bride_with_veil_tone2.png b/app/assets/images/emoji/bride_with_veil_tone2.png
new file mode 100644
index 00000000000..c248769fc06
--- /dev/null
+++ b/app/assets/images/emoji/bride_with_veil_tone2.png
diff --git a/app/assets/images/emoji/bride_with_veil_tone3.png b/app/assets/images/emoji/bride_with_veil_tone3.png
new file mode 100644
index 00000000000..962c0a6eedb
--- /dev/null
+++ b/app/assets/images/emoji/bride_with_veil_tone3.png
diff --git a/app/assets/images/emoji/bride_with_veil_tone4.png b/app/assets/images/emoji/bride_with_veil_tone4.png
new file mode 100644
index 00000000000..740ca208cd4
--- /dev/null
+++ b/app/assets/images/emoji/bride_with_veil_tone4.png
diff --git a/app/assets/images/emoji/bride_with_veil_tone5.png b/app/assets/images/emoji/bride_with_veil_tone5.png
new file mode 100644
index 00000000000..5cc5598587d
--- /dev/null
+++ b/app/assets/images/emoji/bride_with_veil_tone5.png
diff --git a/app/assets/images/emoji/bridge_at_night.png b/app/assets/images/emoji/bridge_at_night.png
new file mode 100644
index 00000000000..1d444e0be65
--- /dev/null
+++ b/app/assets/images/emoji/bridge_at_night.png
diff --git a/app/assets/images/emoji/briefcase.png b/app/assets/images/emoji/briefcase.png
new file mode 100644
index 00000000000..b9912ba2148
--- /dev/null
+++ b/app/assets/images/emoji/briefcase.png
diff --git a/app/assets/images/emoji/broken_heart.png b/app/assets/images/emoji/broken_heart.png
new file mode 100644
index 00000000000..718e26ee122
--- /dev/null
+++ b/app/assets/images/emoji/broken_heart.png
diff --git a/app/assets/images/emoji/bug.png b/app/assets/images/emoji/bug.png
new file mode 100644
index 00000000000..e64e72f259a
--- /dev/null
+++ b/app/assets/images/emoji/bug.png
diff --git a/app/assets/images/emoji/bulb.png b/app/assets/images/emoji/bulb.png
new file mode 100644
index 00000000000..38e32e02d9f
--- /dev/null
+++ b/app/assets/images/emoji/bulb.png
diff --git a/app/assets/images/emoji/bullettrain_front.png b/app/assets/images/emoji/bullettrain_front.png
new file mode 100644
index 00000000000..4f698e056fa
--- /dev/null
+++ b/app/assets/images/emoji/bullettrain_front.png
diff --git a/app/assets/images/emoji/bullettrain_side.png b/app/assets/images/emoji/bullettrain_side.png
new file mode 100644
index 00000000000..ed61c67bf07
--- /dev/null
+++ b/app/assets/images/emoji/bullettrain_side.png
diff --git a/app/assets/images/emoji/burrito.png b/app/assets/images/emoji/burrito.png
new file mode 100644
index 00000000000..02bd5601df7
--- /dev/null
+++ b/app/assets/images/emoji/burrito.png
diff --git a/app/assets/images/emoji/bus.png b/app/assets/images/emoji/bus.png
new file mode 100644
index 00000000000..641ddc56ca7
--- /dev/null
+++ b/app/assets/images/emoji/bus.png
diff --git a/app/assets/images/emoji/busstop.png b/app/assets/images/emoji/busstop.png
new file mode 100644
index 00000000000..b2b62208bfd
--- /dev/null
+++ b/app/assets/images/emoji/busstop.png
diff --git a/app/assets/images/emoji/bust_in_silhouette.png b/app/assets/images/emoji/bust_in_silhouette.png
new file mode 100644
index 00000000000..123b2cbe1fb
--- /dev/null
+++ b/app/assets/images/emoji/bust_in_silhouette.png
diff --git a/app/assets/images/emoji/busts_in_silhouette.png b/app/assets/images/emoji/busts_in_silhouette.png
new file mode 100644
index 00000000000..d7656860a1c
--- /dev/null
+++ b/app/assets/images/emoji/busts_in_silhouette.png
diff --git a/app/assets/images/emoji/butterfly.png b/app/assets/images/emoji/butterfly.png
new file mode 100644
index 00000000000..5631fe99226
--- /dev/null
+++ b/app/assets/images/emoji/butterfly.png
diff --git a/app/assets/images/emoji/cactus.png b/app/assets/images/emoji/cactus.png
new file mode 100644
index 00000000000..9b48ccf3d0c
--- /dev/null
+++ b/app/assets/images/emoji/cactus.png
diff --git a/app/assets/images/emoji/cake.png b/app/assets/images/emoji/cake.png
new file mode 100644
index 00000000000..4368177be9a
--- /dev/null
+++ b/app/assets/images/emoji/cake.png
diff --git a/app/assets/images/emoji/calendar.png b/app/assets/images/emoji/calendar.png
new file mode 100644
index 00000000000..47353b74447
--- /dev/null
+++ b/app/assets/images/emoji/calendar.png
diff --git a/app/assets/images/emoji/calendar_spiral.png b/app/assets/images/emoji/calendar_spiral.png
new file mode 100644
index 00000000000..dec8d49bfa8
--- /dev/null
+++ b/app/assets/images/emoji/calendar_spiral.png
diff --git a/app/assets/images/emoji/call_me.png b/app/assets/images/emoji/call_me.png
new file mode 100644
index 00000000000..a10c59ba711
--- /dev/null
+++ b/app/assets/images/emoji/call_me.png
diff --git a/app/assets/images/emoji/call_me_tone1.png b/app/assets/images/emoji/call_me_tone1.png
new file mode 100644
index 00000000000..2c93201181a
--- /dev/null
+++ b/app/assets/images/emoji/call_me_tone1.png
diff --git a/app/assets/images/emoji/call_me_tone2.png b/app/assets/images/emoji/call_me_tone2.png
new file mode 100644
index 00000000000..c39f45a41ed
--- /dev/null
+++ b/app/assets/images/emoji/call_me_tone2.png
diff --git a/app/assets/images/emoji/call_me_tone3.png b/app/assets/images/emoji/call_me_tone3.png
new file mode 100644
index 00000000000..83a57f63c29
--- /dev/null
+++ b/app/assets/images/emoji/call_me_tone3.png
diff --git a/app/assets/images/emoji/call_me_tone4.png b/app/assets/images/emoji/call_me_tone4.png
new file mode 100644
index 00000000000..65b3468fe44
--- /dev/null
+++ b/app/assets/images/emoji/call_me_tone4.png
diff --git a/app/assets/images/emoji/call_me_tone5.png b/app/assets/images/emoji/call_me_tone5.png
new file mode 100644
index 00000000000..94ef68ff3b3
--- /dev/null
+++ b/app/assets/images/emoji/call_me_tone5.png
diff --git a/app/assets/images/emoji/calling.png b/app/assets/images/emoji/calling.png
new file mode 100644
index 00000000000..e2f308f8e46
--- /dev/null
+++ b/app/assets/images/emoji/calling.png
diff --git a/app/assets/images/emoji/camel.png b/app/assets/images/emoji/camel.png
new file mode 100644
index 00000000000..b421d07a805
--- /dev/null
+++ b/app/assets/images/emoji/camel.png
diff --git a/app/assets/images/emoji/camera.png b/app/assets/images/emoji/camera.png
new file mode 100644
index 00000000000..0a3429f72ef
--- /dev/null
+++ b/app/assets/images/emoji/camera.png
diff --git a/app/assets/images/emoji/camera_with_flash.png b/app/assets/images/emoji/camera_with_flash.png
new file mode 100644
index 00000000000..27471da2029
--- /dev/null
+++ b/app/assets/images/emoji/camera_with_flash.png
diff --git a/app/assets/images/emoji/camping.png b/app/assets/images/emoji/camping.png
new file mode 100644
index 00000000000..d589cc1f44b
--- /dev/null
+++ b/app/assets/images/emoji/camping.png
diff --git a/app/assets/images/emoji/cancer.png b/app/assets/images/emoji/cancer.png
new file mode 100644
index 00000000000..a64af07cb5f
--- /dev/null
+++ b/app/assets/images/emoji/cancer.png
diff --git a/app/assets/images/emoji/candle.png b/app/assets/images/emoji/candle.png
new file mode 100644
index 00000000000..0b56444e355
--- /dev/null
+++ b/app/assets/images/emoji/candle.png
diff --git a/app/assets/images/emoji/candy.png b/app/assets/images/emoji/candy.png
new file mode 100644
index 00000000000..8c67ace3a35
--- /dev/null
+++ b/app/assets/images/emoji/candy.png
diff --git a/app/assets/images/emoji/canoe.png b/app/assets/images/emoji/canoe.png
new file mode 100644
index 00000000000..e26cdb9da69
--- /dev/null
+++ b/app/assets/images/emoji/canoe.png
diff --git a/app/assets/images/emoji/capital_abcd.png b/app/assets/images/emoji/capital_abcd.png
new file mode 100644
index 00000000000..fe9482d2d8a
--- /dev/null
+++ b/app/assets/images/emoji/capital_abcd.png
diff --git a/app/assets/images/emoji/capricorn.png b/app/assets/images/emoji/capricorn.png
new file mode 100644
index 00000000000..6293d31d4b1
--- /dev/null
+++ b/app/assets/images/emoji/capricorn.png
diff --git a/app/assets/images/emoji/card_box.png b/app/assets/images/emoji/card_box.png
new file mode 100644
index 00000000000..f2e764ce59d
--- /dev/null
+++ b/app/assets/images/emoji/card_box.png
diff --git a/app/assets/images/emoji/card_index.png b/app/assets/images/emoji/card_index.png
new file mode 100644
index 00000000000..151e11cb3b4
--- /dev/null
+++ b/app/assets/images/emoji/card_index.png
diff --git a/app/assets/images/emoji/carousel_horse.png b/app/assets/images/emoji/carousel_horse.png
new file mode 100644
index 00000000000..a17074edf05
--- /dev/null
+++ b/app/assets/images/emoji/carousel_horse.png
diff --git a/app/assets/images/emoji/carrot.png b/app/assets/images/emoji/carrot.png
new file mode 100644
index 00000000000..c68829b58e7
--- /dev/null
+++ b/app/assets/images/emoji/carrot.png
diff --git a/app/assets/images/emoji/cartwheel.png b/app/assets/images/emoji/cartwheel.png
new file mode 100644
index 00000000000..cbcaa578253
--- /dev/null
+++ b/app/assets/images/emoji/cartwheel.png
diff --git a/app/assets/images/emoji/cartwheel_tone1.png b/app/assets/images/emoji/cartwheel_tone1.png
new file mode 100644
index 00000000000..db6d65895fb
--- /dev/null
+++ b/app/assets/images/emoji/cartwheel_tone1.png
diff --git a/app/assets/images/emoji/cartwheel_tone2.png b/app/assets/images/emoji/cartwheel_tone2.png
new file mode 100644
index 00000000000..e00ffbc27a8
--- /dev/null
+++ b/app/assets/images/emoji/cartwheel_tone2.png
diff --git a/app/assets/images/emoji/cartwheel_tone3.png b/app/assets/images/emoji/cartwheel_tone3.png
new file mode 100644
index 00000000000..49321be391f
--- /dev/null
+++ b/app/assets/images/emoji/cartwheel_tone3.png
diff --git a/app/assets/images/emoji/cartwheel_tone4.png b/app/assets/images/emoji/cartwheel_tone4.png
new file mode 100644
index 00000000000..d4562b5e3dd
--- /dev/null
+++ b/app/assets/images/emoji/cartwheel_tone4.png
diff --git a/app/assets/images/emoji/cartwheel_tone5.png b/app/assets/images/emoji/cartwheel_tone5.png
new file mode 100644
index 00000000000..6e09a870767
--- /dev/null
+++ b/app/assets/images/emoji/cartwheel_tone5.png
diff --git a/app/assets/images/emoji/cat.png b/app/assets/images/emoji/cat.png
new file mode 100644
index 00000000000..efd82c2abf3
--- /dev/null
+++ b/app/assets/images/emoji/cat.png
diff --git a/app/assets/images/emoji/cat2.png b/app/assets/images/emoji/cat2.png
new file mode 100644
index 00000000000..46abe8cbc14
--- /dev/null
+++ b/app/assets/images/emoji/cat2.png
diff --git a/app/assets/images/emoji/cd.png b/app/assets/images/emoji/cd.png
new file mode 100644
index 00000000000..e6b01449cd9
--- /dev/null
+++ b/app/assets/images/emoji/cd.png
diff --git a/app/assets/images/emoji/chains.png b/app/assets/images/emoji/chains.png
new file mode 100644
index 00000000000..57f46139a06
--- /dev/null
+++ b/app/assets/images/emoji/chains.png
diff --git a/app/assets/images/emoji/champagne.png b/app/assets/images/emoji/champagne.png
new file mode 100644
index 00000000000..285a79a93d0
--- /dev/null
+++ b/app/assets/images/emoji/champagne.png
diff --git a/app/assets/images/emoji/champagne_glass.png b/app/assets/images/emoji/champagne_glass.png
new file mode 100644
index 00000000000..31937ae9392
--- /dev/null
+++ b/app/assets/images/emoji/champagne_glass.png
diff --git a/app/assets/images/emoji/chart.png b/app/assets/images/emoji/chart.png
new file mode 100644
index 00000000000..9773f03be22
--- /dev/null
+++ b/app/assets/images/emoji/chart.png
diff --git a/app/assets/images/emoji/chart_with_downwards_trend.png b/app/assets/images/emoji/chart_with_downwards_trend.png
new file mode 100644
index 00000000000..5222ec72d85
--- /dev/null
+++ b/app/assets/images/emoji/chart_with_downwards_trend.png
diff --git a/app/assets/images/emoji/chart_with_upwards_trend.png b/app/assets/images/emoji/chart_with_upwards_trend.png
new file mode 100644
index 00000000000..f13cfcf9956
--- /dev/null
+++ b/app/assets/images/emoji/chart_with_upwards_trend.png
diff --git a/app/assets/images/emoji/checkered_flag.png b/app/assets/images/emoji/checkered_flag.png
new file mode 100644
index 00000000000..5a71eecb89b
--- /dev/null
+++ b/app/assets/images/emoji/checkered_flag.png
diff --git a/app/assets/images/emoji/cheese.png b/app/assets/images/emoji/cheese.png
new file mode 100644
index 00000000000..00e99762286
--- /dev/null
+++ b/app/assets/images/emoji/cheese.png
diff --git a/app/assets/images/emoji/cherries.png b/app/assets/images/emoji/cherries.png
new file mode 100644
index 00000000000..9b10cbaac5e
--- /dev/null
+++ b/app/assets/images/emoji/cherries.png
diff --git a/app/assets/images/emoji/cherry_blossom.png b/app/assets/images/emoji/cherry_blossom.png
new file mode 100644
index 00000000000..282f3e7bc81
--- /dev/null
+++ b/app/assets/images/emoji/cherry_blossom.png
diff --git a/app/assets/images/emoji/chestnut.png b/app/assets/images/emoji/chestnut.png
new file mode 100644
index 00000000000..e9fb40468ed
--- /dev/null
+++ b/app/assets/images/emoji/chestnut.png
diff --git a/app/assets/images/emoji/chicken.png b/app/assets/images/emoji/chicken.png
new file mode 100644
index 00000000000..9a6992e55ba
--- /dev/null
+++ b/app/assets/images/emoji/chicken.png
diff --git a/app/assets/images/emoji/children_crossing.png b/app/assets/images/emoji/children_crossing.png
new file mode 100644
index 00000000000..fa4c091c7c3
--- /dev/null
+++ b/app/assets/images/emoji/children_crossing.png
diff --git a/app/assets/images/emoji/chipmunk.png b/app/assets/images/emoji/chipmunk.png
new file mode 100644
index 00000000000..2aac560cb22
--- /dev/null
+++ b/app/assets/images/emoji/chipmunk.png
diff --git a/app/assets/images/emoji/chocolate_bar.png b/app/assets/images/emoji/chocolate_bar.png
new file mode 100644
index 00000000000..318bbd40ef9
--- /dev/null
+++ b/app/assets/images/emoji/chocolate_bar.png
diff --git a/app/assets/images/emoji/christmas_tree.png b/app/assets/images/emoji/christmas_tree.png
new file mode 100644
index 00000000000..4197d37a52b
--- /dev/null
+++ b/app/assets/images/emoji/christmas_tree.png
diff --git a/app/assets/images/emoji/church.png b/app/assets/images/emoji/church.png
new file mode 100644
index 00000000000..8242fd272b3
--- /dev/null
+++ b/app/assets/images/emoji/church.png
diff --git a/app/assets/images/emoji/cinema.png b/app/assets/images/emoji/cinema.png
new file mode 100644
index 00000000000..65f27b386f2
--- /dev/null
+++ b/app/assets/images/emoji/cinema.png
diff --git a/app/assets/images/emoji/circus_tent.png b/app/assets/images/emoji/circus_tent.png
new file mode 100644
index 00000000000..b0379775b12
--- /dev/null
+++ b/app/assets/images/emoji/circus_tent.png
diff --git a/app/assets/images/emoji/city_dusk.png b/app/assets/images/emoji/city_dusk.png
new file mode 100644
index 00000000000..80cdff7cf5d
--- /dev/null
+++ b/app/assets/images/emoji/city_dusk.png
diff --git a/app/assets/images/emoji/city_sunset.png b/app/assets/images/emoji/city_sunset.png
new file mode 100644
index 00000000000..7cded0ba55b
--- /dev/null
+++ b/app/assets/images/emoji/city_sunset.png
diff --git a/app/assets/images/emoji/cityscape.png b/app/assets/images/emoji/cityscape.png
new file mode 100644
index 00000000000..d7b9844a0b4
--- /dev/null
+++ b/app/assets/images/emoji/cityscape.png
diff --git a/app/assets/images/emoji/cl.png b/app/assets/images/emoji/cl.png
new file mode 100644
index 00000000000..8b01b4343e2
--- /dev/null
+++ b/app/assets/images/emoji/cl.png
diff --git a/app/assets/images/emoji/clap.png b/app/assets/images/emoji/clap.png
new file mode 100644
index 00000000000..b0ffe928920
--- /dev/null
+++ b/app/assets/images/emoji/clap.png
diff --git a/app/assets/images/emoji/clap_tone1.png b/app/assets/images/emoji/clap_tone1.png
new file mode 100644
index 00000000000..de4bc837b96
--- /dev/null
+++ b/app/assets/images/emoji/clap_tone1.png
diff --git a/app/assets/images/emoji/clap_tone2.png b/app/assets/images/emoji/clap_tone2.png
new file mode 100644
index 00000000000..1323de775ba
--- /dev/null
+++ b/app/assets/images/emoji/clap_tone2.png
diff --git a/app/assets/images/emoji/clap_tone3.png b/app/assets/images/emoji/clap_tone3.png
new file mode 100644
index 00000000000..d448ca19dde
--- /dev/null
+++ b/app/assets/images/emoji/clap_tone3.png
diff --git a/app/assets/images/emoji/clap_tone4.png b/app/assets/images/emoji/clap_tone4.png
new file mode 100644
index 00000000000..c49f44ee91d
--- /dev/null
+++ b/app/assets/images/emoji/clap_tone4.png
diff --git a/app/assets/images/emoji/clap_tone5.png b/app/assets/images/emoji/clap_tone5.png
new file mode 100644
index 00000000000..29ee9bdf37c
--- /dev/null
+++ b/app/assets/images/emoji/clap_tone5.png
diff --git a/app/assets/images/emoji/clapper.png b/app/assets/images/emoji/clapper.png
new file mode 100644
index 00000000000..81390883111
--- /dev/null
+++ b/app/assets/images/emoji/clapper.png
diff --git a/app/assets/images/emoji/classical_building.png b/app/assets/images/emoji/classical_building.png
new file mode 100644
index 00000000000..de7b559daaf
--- /dev/null
+++ b/app/assets/images/emoji/classical_building.png
diff --git a/app/assets/images/emoji/clipboard.png b/app/assets/images/emoji/clipboard.png
new file mode 100644
index 00000000000..7edcfc52509
--- /dev/null
+++ b/app/assets/images/emoji/clipboard.png
diff --git a/app/assets/images/emoji/clock.png b/app/assets/images/emoji/clock.png
new file mode 100644
index 00000000000..ffdb451e3a8
--- /dev/null
+++ b/app/assets/images/emoji/clock.png
diff --git a/app/assets/images/emoji/clock1.png b/app/assets/images/emoji/clock1.png
new file mode 100644
index 00000000000..d6e34941f23
--- /dev/null
+++ b/app/assets/images/emoji/clock1.png
diff --git a/app/assets/images/emoji/clock10.png b/app/assets/images/emoji/clock10.png
new file mode 100644
index 00000000000..e62b245cdbe
--- /dev/null
+++ b/app/assets/images/emoji/clock10.png
diff --git a/app/assets/images/emoji/clock1030.png b/app/assets/images/emoji/clock1030.png
new file mode 100644
index 00000000000..0802b3c65b9
--- /dev/null
+++ b/app/assets/images/emoji/clock1030.png
diff --git a/app/assets/images/emoji/clock11.png b/app/assets/images/emoji/clock11.png
new file mode 100644
index 00000000000..0983345273b
--- /dev/null
+++ b/app/assets/images/emoji/clock11.png
diff --git a/app/assets/images/emoji/clock1130.png b/app/assets/images/emoji/clock1130.png
new file mode 100644
index 00000000000..d970d03b809
--- /dev/null
+++ b/app/assets/images/emoji/clock1130.png
diff --git a/app/assets/images/emoji/clock12.png b/app/assets/images/emoji/clock12.png
new file mode 100644
index 00000000000..e61caa4b3e2
--- /dev/null
+++ b/app/assets/images/emoji/clock12.png
diff --git a/app/assets/images/emoji/clock1230.png b/app/assets/images/emoji/clock1230.png
new file mode 100644
index 00000000000..f2b1d261721
--- /dev/null
+++ b/app/assets/images/emoji/clock1230.png
diff --git a/app/assets/images/emoji/clock130.png b/app/assets/images/emoji/clock130.png
new file mode 100644
index 00000000000..86b7689b84e
--- /dev/null
+++ b/app/assets/images/emoji/clock130.png
diff --git a/app/assets/images/emoji/clock2.png b/app/assets/images/emoji/clock2.png
new file mode 100644
index 00000000000..a54253d7d57
--- /dev/null
+++ b/app/assets/images/emoji/clock2.png
diff --git a/app/assets/images/emoji/clock230.png b/app/assets/images/emoji/clock230.png
new file mode 100644
index 00000000000..7a787e018e6
--- /dev/null
+++ b/app/assets/images/emoji/clock230.png
diff --git a/app/assets/images/emoji/clock3.png b/app/assets/images/emoji/clock3.png
new file mode 100644
index 00000000000..27ec4b1f514
--- /dev/null
+++ b/app/assets/images/emoji/clock3.png
diff --git a/app/assets/images/emoji/clock330.png b/app/assets/images/emoji/clock330.png
new file mode 100644
index 00000000000..c6860395cec
--- /dev/null
+++ b/app/assets/images/emoji/clock330.png
diff --git a/app/assets/images/emoji/clock4.png b/app/assets/images/emoji/clock4.png
new file mode 100644
index 00000000000..60a1ef4cc13
--- /dev/null
+++ b/app/assets/images/emoji/clock4.png
diff --git a/app/assets/images/emoji/clock430.png b/app/assets/images/emoji/clock430.png
new file mode 100644
index 00000000000..3c05b362122
--- /dev/null
+++ b/app/assets/images/emoji/clock430.png
diff --git a/app/assets/images/emoji/clock5.png b/app/assets/images/emoji/clock5.png
new file mode 100644
index 00000000000..c9382d1e094
--- /dev/null
+++ b/app/assets/images/emoji/clock5.png
diff --git a/app/assets/images/emoji/clock530.png b/app/assets/images/emoji/clock530.png
new file mode 100644
index 00000000000..c21fa926db2
--- /dev/null
+++ b/app/assets/images/emoji/clock530.png
diff --git a/app/assets/images/emoji/clock6.png b/app/assets/images/emoji/clock6.png
new file mode 100644
index 00000000000..8fd5d3f5bd7
--- /dev/null
+++ b/app/assets/images/emoji/clock6.png
diff --git a/app/assets/images/emoji/clock630.png b/app/assets/images/emoji/clock630.png
new file mode 100644
index 00000000000..2aec87fefcf
--- /dev/null
+++ b/app/assets/images/emoji/clock630.png
diff --git a/app/assets/images/emoji/clock7.png b/app/assets/images/emoji/clock7.png
new file mode 100644
index 00000000000..8c7084036f2
--- /dev/null
+++ b/app/assets/images/emoji/clock7.png
diff --git a/app/assets/images/emoji/clock730.png b/app/assets/images/emoji/clock730.png
new file mode 100644
index 00000000000..f7a1135e03f
--- /dev/null
+++ b/app/assets/images/emoji/clock730.png
diff --git a/app/assets/images/emoji/clock8.png b/app/assets/images/emoji/clock8.png
new file mode 100644
index 00000000000..fcddf722e95
--- /dev/null
+++ b/app/assets/images/emoji/clock8.png
diff --git a/app/assets/images/emoji/clock830.png b/app/assets/images/emoji/clock830.png
new file mode 100644
index 00000000000..799b4aebc08
--- /dev/null
+++ b/app/assets/images/emoji/clock830.png
diff --git a/app/assets/images/emoji/clock9.png b/app/assets/images/emoji/clock9.png
new file mode 100644
index 00000000000..dfbe0117981
--- /dev/null
+++ b/app/assets/images/emoji/clock9.png
diff --git a/app/assets/images/emoji/clock930.png b/app/assets/images/emoji/clock930.png
new file mode 100644
index 00000000000..4a2092ee6f0
--- /dev/null
+++ b/app/assets/images/emoji/clock930.png
diff --git a/app/assets/images/emoji/closed_book.png b/app/assets/images/emoji/closed_book.png
new file mode 100644
index 00000000000..6395cf2151e
--- /dev/null
+++ b/app/assets/images/emoji/closed_book.png
diff --git a/app/assets/images/emoji/closed_lock_with_key.png b/app/assets/images/emoji/closed_lock_with_key.png
new file mode 100644
index 00000000000..1c1cd5d0741
--- /dev/null
+++ b/app/assets/images/emoji/closed_lock_with_key.png
diff --git a/app/assets/images/emoji/closed_umbrella.png b/app/assets/images/emoji/closed_umbrella.png
new file mode 100644
index 00000000000..ecefba9e446
--- /dev/null
+++ b/app/assets/images/emoji/closed_umbrella.png
diff --git a/app/assets/images/emoji/cloud.png b/app/assets/images/emoji/cloud.png
new file mode 100644
index 00000000000..5b4f57f77ba
--- /dev/null
+++ b/app/assets/images/emoji/cloud.png
diff --git a/app/assets/images/emoji/cloud_lightning.png b/app/assets/images/emoji/cloud_lightning.png
new file mode 100644
index 00000000000..0831e88aa31
--- /dev/null
+++ b/app/assets/images/emoji/cloud_lightning.png
diff --git a/app/assets/images/emoji/cloud_rain.png b/app/assets/images/emoji/cloud_rain.png
new file mode 100644
index 00000000000..385685e0512
--- /dev/null
+++ b/app/assets/images/emoji/cloud_rain.png
diff --git a/app/assets/images/emoji/cloud_snow.png b/app/assets/images/emoji/cloud_snow.png
new file mode 100644
index 00000000000..9720384eb99
--- /dev/null
+++ b/app/assets/images/emoji/cloud_snow.png
diff --git a/app/assets/images/emoji/cloud_tornado.png b/app/assets/images/emoji/cloud_tornado.png
new file mode 100644
index 00000000000..4821c89da1e
--- /dev/null
+++ b/app/assets/images/emoji/cloud_tornado.png
diff --git a/app/assets/images/emoji/clown.png b/app/assets/images/emoji/clown.png
new file mode 100644
index 00000000000..02b7ff70049
--- /dev/null
+++ b/app/assets/images/emoji/clown.png
diff --git a/app/assets/images/emoji/clubs.png b/app/assets/images/emoji/clubs.png
new file mode 100644
index 00000000000..4f2abf791ca
--- /dev/null
+++ b/app/assets/images/emoji/clubs.png
diff --git a/app/assets/images/emoji/cocktail.png b/app/assets/images/emoji/cocktail.png
new file mode 100644
index 00000000000..2e50c57e98d
--- /dev/null
+++ b/app/assets/images/emoji/cocktail.png
diff --git a/app/assets/images/emoji/coffee.png b/app/assets/images/emoji/coffee.png
new file mode 100644
index 00000000000..553061471b1
--- /dev/null
+++ b/app/assets/images/emoji/coffee.png
diff --git a/app/assets/images/emoji/coffin.png b/app/assets/images/emoji/coffin.png
new file mode 100644
index 00000000000..fb2932aa5f6
--- /dev/null
+++ b/app/assets/images/emoji/coffin.png
diff --git a/app/assets/images/emoji/cold_sweat.png b/app/assets/images/emoji/cold_sweat.png
new file mode 100644
index 00000000000..85b2231bbf6
--- /dev/null
+++ b/app/assets/images/emoji/cold_sweat.png
diff --git a/app/assets/images/emoji/comet.png b/app/assets/images/emoji/comet.png
new file mode 100644
index 00000000000..a99751f79be
--- /dev/null
+++ b/app/assets/images/emoji/comet.png
diff --git a/app/assets/images/emoji/compression.png b/app/assets/images/emoji/compression.png
new file mode 100644
index 00000000000..d7eda7f362a
--- /dev/null
+++ b/app/assets/images/emoji/compression.png
diff --git a/app/assets/images/emoji/computer.png b/app/assets/images/emoji/computer.png
new file mode 100644
index 00000000000..c1fee27e3a9
--- /dev/null
+++ b/app/assets/images/emoji/computer.png
diff --git a/app/assets/images/emoji/confetti_ball.png b/app/assets/images/emoji/confetti_ball.png
new file mode 100644
index 00000000000..ba4fd9b12be
--- /dev/null
+++ b/app/assets/images/emoji/confetti_ball.png
diff --git a/app/assets/images/emoji/confounded.png b/app/assets/images/emoji/confounded.png
new file mode 100644
index 00000000000..aa4b29e9375
--- /dev/null
+++ b/app/assets/images/emoji/confounded.png
diff --git a/app/assets/images/emoji/confused.png b/app/assets/images/emoji/confused.png
new file mode 100644
index 00000000000..502b6bf0e0b
--- /dev/null
+++ b/app/assets/images/emoji/confused.png
diff --git a/app/assets/images/emoji/congratulations.png b/app/assets/images/emoji/congratulations.png
new file mode 100644
index 00000000000..ba8c89d95ee
--- /dev/null
+++ b/app/assets/images/emoji/congratulations.png
diff --git a/app/assets/images/emoji/construction.png b/app/assets/images/emoji/construction.png
new file mode 100644
index 00000000000..ef8db5f471c
--- /dev/null
+++ b/app/assets/images/emoji/construction.png
diff --git a/app/assets/images/emoji/construction_site.png b/app/assets/images/emoji/construction_site.png
new file mode 100644
index 00000000000..8206a20f63f
--- /dev/null
+++ b/app/assets/images/emoji/construction_site.png
diff --git a/app/assets/images/emoji/construction_worker.png b/app/assets/images/emoji/construction_worker.png
new file mode 100644
index 00000000000..a9970a89005
--- /dev/null
+++ b/app/assets/images/emoji/construction_worker.png
diff --git a/app/assets/images/emoji/construction_worker_tone1.png b/app/assets/images/emoji/construction_worker_tone1.png
new file mode 100644
index 00000000000..2f24a2bab24
--- /dev/null
+++ b/app/assets/images/emoji/construction_worker_tone1.png
diff --git a/app/assets/images/emoji/construction_worker_tone2.png b/app/assets/images/emoji/construction_worker_tone2.png
new file mode 100644
index 00000000000..93c8fec5a75
--- /dev/null
+++ b/app/assets/images/emoji/construction_worker_tone2.png
diff --git a/app/assets/images/emoji/construction_worker_tone3.png b/app/assets/images/emoji/construction_worker_tone3.png
new file mode 100644
index 00000000000..abc1f2af2e0
--- /dev/null
+++ b/app/assets/images/emoji/construction_worker_tone3.png
diff --git a/app/assets/images/emoji/construction_worker_tone4.png b/app/assets/images/emoji/construction_worker_tone4.png
new file mode 100644
index 00000000000..eed83289aeb
--- /dev/null
+++ b/app/assets/images/emoji/construction_worker_tone4.png
diff --git a/app/assets/images/emoji/construction_worker_tone5.png b/app/assets/images/emoji/construction_worker_tone5.png
new file mode 100644
index 00000000000..acbb220b8bb
--- /dev/null
+++ b/app/assets/images/emoji/construction_worker_tone5.png
diff --git a/app/assets/images/emoji/control_knobs.png b/app/assets/images/emoji/control_knobs.png
new file mode 100644
index 00000000000..6635ac93b50
--- /dev/null
+++ b/app/assets/images/emoji/control_knobs.png
diff --git a/app/assets/images/emoji/convenience_store.png b/app/assets/images/emoji/convenience_store.png
new file mode 100644
index 00000000000..26b53b5669e
--- /dev/null
+++ b/app/assets/images/emoji/convenience_store.png
diff --git a/app/assets/images/emoji/cookie.png b/app/assets/images/emoji/cookie.png
new file mode 100644
index 00000000000..1b6bcb1554f
--- /dev/null
+++ b/app/assets/images/emoji/cookie.png
diff --git a/app/assets/images/emoji/cooking.png b/app/assets/images/emoji/cooking.png
new file mode 100644
index 00000000000..918c980577a
--- /dev/null
+++ b/app/assets/images/emoji/cooking.png
diff --git a/app/assets/images/emoji/cool.png b/app/assets/images/emoji/cool.png
new file mode 100644
index 00000000000..74674978d00
--- /dev/null
+++ b/app/assets/images/emoji/cool.png
diff --git a/app/assets/images/emoji/cop.png b/app/assets/images/emoji/cop.png
new file mode 100644
index 00000000000..0b16d7c17b7
--- /dev/null
+++ b/app/assets/images/emoji/cop.png
diff --git a/app/assets/images/emoji/cop_tone1.png b/app/assets/images/emoji/cop_tone1.png
new file mode 100644
index 00000000000..6ccba3879dc
--- /dev/null
+++ b/app/assets/images/emoji/cop_tone1.png
diff --git a/app/assets/images/emoji/cop_tone2.png b/app/assets/images/emoji/cop_tone2.png
new file mode 100644
index 00000000000..7814ea9f52d
--- /dev/null
+++ b/app/assets/images/emoji/cop_tone2.png
diff --git a/app/assets/images/emoji/cop_tone3.png b/app/assets/images/emoji/cop_tone3.png
new file mode 100644
index 00000000000..d78e88ec872
--- /dev/null
+++ b/app/assets/images/emoji/cop_tone3.png
diff --git a/app/assets/images/emoji/cop_tone4.png b/app/assets/images/emoji/cop_tone4.png
new file mode 100644
index 00000000000..2e13c508315
--- /dev/null
+++ b/app/assets/images/emoji/cop_tone4.png
diff --git a/app/assets/images/emoji/cop_tone5.png b/app/assets/images/emoji/cop_tone5.png
new file mode 100644
index 00000000000..2980d61cc2e
--- /dev/null
+++ b/app/assets/images/emoji/cop_tone5.png
diff --git a/app/assets/images/emoji/copyright.png b/app/assets/images/emoji/copyright.png
new file mode 100644
index 00000000000..6b9a6adbfd2
--- /dev/null
+++ b/app/assets/images/emoji/copyright.png
diff --git a/app/assets/images/emoji/corn.png b/app/assets/images/emoji/corn.png
new file mode 100644
index 00000000000..36e20127931
--- /dev/null
+++ b/app/assets/images/emoji/corn.png
diff --git a/app/assets/images/emoji/couch.png b/app/assets/images/emoji/couch.png
new file mode 100644
index 00000000000..27b19b13bb0
--- /dev/null
+++ b/app/assets/images/emoji/couch.png
diff --git a/app/assets/images/emoji/couple.png b/app/assets/images/emoji/couple.png
new file mode 100644
index 00000000000..960323f3c16
--- /dev/null
+++ b/app/assets/images/emoji/couple.png
diff --git a/app/assets/images/emoji/couple_mm.png b/app/assets/images/emoji/couple_mm.png
new file mode 100644
index 00000000000..8759fa5db87
--- /dev/null
+++ b/app/assets/images/emoji/couple_mm.png
diff --git a/app/assets/images/emoji/couple_with_heart.png b/app/assets/images/emoji/couple_with_heart.png
new file mode 100644
index 00000000000..62111601b36
--- /dev/null
+++ b/app/assets/images/emoji/couple_with_heart.png
diff --git a/app/assets/images/emoji/couple_ww.png b/app/assets/images/emoji/couple_ww.png
new file mode 100644
index 00000000000..08fdabcdc5c
--- /dev/null
+++ b/app/assets/images/emoji/couple_ww.png
diff --git a/app/assets/images/emoji/couplekiss.png b/app/assets/images/emoji/couplekiss.png
new file mode 100644
index 00000000000..9aa519da9e8
--- /dev/null
+++ b/app/assets/images/emoji/couplekiss.png
diff --git a/app/assets/images/emoji/cow.png b/app/assets/images/emoji/cow.png
new file mode 100644
index 00000000000..718a3986d64
--- /dev/null
+++ b/app/assets/images/emoji/cow.png
diff --git a/app/assets/images/emoji/cow2.png b/app/assets/images/emoji/cow2.png
new file mode 100644
index 00000000000..4d0ca534ff1
--- /dev/null
+++ b/app/assets/images/emoji/cow2.png
diff --git a/app/assets/images/emoji/cowboy.png b/app/assets/images/emoji/cowboy.png
new file mode 100644
index 00000000000..70dd5d0d9d1
--- /dev/null
+++ b/app/assets/images/emoji/cowboy.png
diff --git a/app/assets/images/emoji/crab.png b/app/assets/images/emoji/crab.png
new file mode 100644
index 00000000000..19f3047ab61
--- /dev/null
+++ b/app/assets/images/emoji/crab.png
diff --git a/app/assets/images/emoji/crayon.png b/app/assets/images/emoji/crayon.png
new file mode 100644
index 00000000000..8d7b427aaa3
--- /dev/null
+++ b/app/assets/images/emoji/crayon.png
diff --git a/app/assets/images/emoji/credit_card.png b/app/assets/images/emoji/credit_card.png
new file mode 100644
index 00000000000..372777d5c61
--- /dev/null
+++ b/app/assets/images/emoji/credit_card.png
diff --git a/app/assets/images/emoji/crescent_moon.png b/app/assets/images/emoji/crescent_moon.png
new file mode 100644
index 00000000000..765420ecec7
--- /dev/null
+++ b/app/assets/images/emoji/crescent_moon.png
diff --git a/app/assets/images/emoji/cricket.png b/app/assets/images/emoji/cricket.png
new file mode 100644
index 00000000000..d602294a2cd
--- /dev/null
+++ b/app/assets/images/emoji/cricket.png
diff --git a/app/assets/images/emoji/crocodile.png b/app/assets/images/emoji/crocodile.png
new file mode 100644
index 00000000000..3005c46f176
--- /dev/null
+++ b/app/assets/images/emoji/crocodile.png
diff --git a/app/assets/images/emoji/croissant.png b/app/assets/images/emoji/croissant.png
new file mode 100644
index 00000000000..fb33feb1a38
--- /dev/null
+++ b/app/assets/images/emoji/croissant.png
diff --git a/app/assets/images/emoji/cross.png b/app/assets/images/emoji/cross.png
new file mode 100644
index 00000000000..42b10e82257
--- /dev/null
+++ b/app/assets/images/emoji/cross.png
diff --git a/app/assets/images/emoji/crossed_flags.png b/app/assets/images/emoji/crossed_flags.png
new file mode 100644
index 00000000000..273bd0f0fe5
--- /dev/null
+++ b/app/assets/images/emoji/crossed_flags.png
diff --git a/app/assets/images/emoji/crossed_swords.png b/app/assets/images/emoji/crossed_swords.png
new file mode 100644
index 00000000000..907e9607134
--- /dev/null
+++ b/app/assets/images/emoji/crossed_swords.png
diff --git a/app/assets/images/emoji/crown.png b/app/assets/images/emoji/crown.png
new file mode 100644
index 00000000000..93b82d92f04
--- /dev/null
+++ b/app/assets/images/emoji/crown.png
diff --git a/app/assets/images/emoji/cruise_ship.png b/app/assets/images/emoji/cruise_ship.png
new file mode 100644
index 00000000000..19d4acbe40c
--- /dev/null
+++ b/app/assets/images/emoji/cruise_ship.png
diff --git a/app/assets/images/emoji/cry.png b/app/assets/images/emoji/cry.png
new file mode 100644
index 00000000000..b7877f8a173
--- /dev/null
+++ b/app/assets/images/emoji/cry.png
diff --git a/app/assets/images/emoji/crying_cat_face.png b/app/assets/images/emoji/crying_cat_face.png
new file mode 100644
index 00000000000..b4f49715e00
--- /dev/null
+++ b/app/assets/images/emoji/crying_cat_face.png
diff --git a/app/assets/images/emoji/crystal_ball.png b/app/assets/images/emoji/crystal_ball.png
new file mode 100644
index 00000000000..485d5c888f1
--- /dev/null
+++ b/app/assets/images/emoji/crystal_ball.png
diff --git a/app/assets/images/emoji/cucumber.png b/app/assets/images/emoji/cucumber.png
new file mode 100644
index 00000000000..500807059d2
--- /dev/null
+++ b/app/assets/images/emoji/cucumber.png
diff --git a/app/assets/images/emoji/cupid.png b/app/assets/images/emoji/cupid.png
new file mode 100644
index 00000000000..2df0078ddd1
--- /dev/null
+++ b/app/assets/images/emoji/cupid.png
diff --git a/app/assets/images/emoji/curly_loop.png b/app/assets/images/emoji/curly_loop.png
new file mode 100644
index 00000000000..440aa56d50e
--- /dev/null
+++ b/app/assets/images/emoji/curly_loop.png
diff --git a/app/assets/images/emoji/currency_exchange.png b/app/assets/images/emoji/currency_exchange.png
new file mode 100644
index 00000000000..4d46c6050e7
--- /dev/null
+++ b/app/assets/images/emoji/currency_exchange.png
diff --git a/app/assets/images/emoji/curry.png b/app/assets/images/emoji/curry.png
new file mode 100644
index 00000000000..69657ca8103
--- /dev/null
+++ b/app/assets/images/emoji/curry.png
diff --git a/app/assets/images/emoji/custard.png b/app/assets/images/emoji/custard.png
new file mode 100644
index 00000000000..fa3df67b8f6
--- /dev/null
+++ b/app/assets/images/emoji/custard.png
diff --git a/app/assets/images/emoji/customs.png b/app/assets/images/emoji/customs.png
new file mode 100644
index 00000000000..21b7ce2c69e
--- /dev/null
+++ b/app/assets/images/emoji/customs.png
diff --git a/app/assets/images/emoji/cyclone.png b/app/assets/images/emoji/cyclone.png
new file mode 100644
index 00000000000..ff00b1afe70
--- /dev/null
+++ b/app/assets/images/emoji/cyclone.png
diff --git a/app/assets/images/emoji/dagger.png b/app/assets/images/emoji/dagger.png
new file mode 100644
index 00000000000..66e97b0aa25
--- /dev/null
+++ b/app/assets/images/emoji/dagger.png
diff --git a/app/assets/images/emoji/dancer.png b/app/assets/images/emoji/dancer.png
new file mode 100644
index 00000000000..04b166991cb
--- /dev/null
+++ b/app/assets/images/emoji/dancer.png
diff --git a/app/assets/images/emoji/dancer_tone1.png b/app/assets/images/emoji/dancer_tone1.png
new file mode 100644
index 00000000000..2c7b11c3a6e
--- /dev/null
+++ b/app/assets/images/emoji/dancer_tone1.png
diff --git a/app/assets/images/emoji/dancer_tone2.png b/app/assets/images/emoji/dancer_tone2.png
new file mode 100644
index 00000000000..cb04b1f907e
--- /dev/null
+++ b/app/assets/images/emoji/dancer_tone2.png
diff --git a/app/assets/images/emoji/dancer_tone3.png b/app/assets/images/emoji/dancer_tone3.png
new file mode 100644
index 00000000000..98c5bca7b64
--- /dev/null
+++ b/app/assets/images/emoji/dancer_tone3.png
diff --git a/app/assets/images/emoji/dancer_tone4.png b/app/assets/images/emoji/dancer_tone4.png
new file mode 100644
index 00000000000..fdb1e00cbba
--- /dev/null
+++ b/app/assets/images/emoji/dancer_tone4.png
diff --git a/app/assets/images/emoji/dancer_tone5.png b/app/assets/images/emoji/dancer_tone5.png
new file mode 100644
index 00000000000..0e34e0e23f0
--- /dev/null
+++ b/app/assets/images/emoji/dancer_tone5.png
diff --git a/app/assets/images/emoji/dancers.png b/app/assets/images/emoji/dancers.png
new file mode 100644
index 00000000000..67e6ffacb76
--- /dev/null
+++ b/app/assets/images/emoji/dancers.png
diff --git a/app/assets/images/emoji/dango.png b/app/assets/images/emoji/dango.png
new file mode 100644
index 00000000000..f73f37b01c7
--- /dev/null
+++ b/app/assets/images/emoji/dango.png
diff --git a/app/assets/images/emoji/dark_sunglasses.png b/app/assets/images/emoji/dark_sunglasses.png
new file mode 100644
index 00000000000..b1b6db0acff
--- /dev/null
+++ b/app/assets/images/emoji/dark_sunglasses.png
diff --git a/app/assets/images/emoji/dart.png b/app/assets/images/emoji/dart.png
new file mode 100644
index 00000000000..f6704aeb8ba
--- /dev/null
+++ b/app/assets/images/emoji/dart.png
diff --git a/app/assets/images/emoji/dash.png b/app/assets/images/emoji/dash.png
new file mode 100644
index 00000000000..064b8525c12
--- /dev/null
+++ b/app/assets/images/emoji/dash.png
diff --git a/app/assets/images/emoji/date.png b/app/assets/images/emoji/date.png
new file mode 100644
index 00000000000..f05b3da97b8
--- /dev/null
+++ b/app/assets/images/emoji/date.png
diff --git a/app/assets/images/emoji/deciduous_tree.png b/app/assets/images/emoji/deciduous_tree.png
new file mode 100644
index 00000000000..785fc1c30ea
--- /dev/null
+++ b/app/assets/images/emoji/deciduous_tree.png
diff --git a/app/assets/images/emoji/deer.png b/app/assets/images/emoji/deer.png
new file mode 100644
index 00000000000..d8698195ff0
--- /dev/null
+++ b/app/assets/images/emoji/deer.png
diff --git a/app/assets/images/emoji/department_store.png b/app/assets/images/emoji/department_store.png
new file mode 100644
index 00000000000..58867c7a6e1
--- /dev/null
+++ b/app/assets/images/emoji/department_store.png
diff --git a/app/assets/images/emoji/desert.png b/app/assets/images/emoji/desert.png
new file mode 100644
index 00000000000..e9966ff8c65
--- /dev/null
+++ b/app/assets/images/emoji/desert.png
diff --git a/app/assets/images/emoji/desktop.png b/app/assets/images/emoji/desktop.png
new file mode 100644
index 00000000000..909bd42b5e1
--- /dev/null
+++ b/app/assets/images/emoji/desktop.png
diff --git a/app/assets/images/emoji/diamond_shape_with_a_dot_inside.png b/app/assets/images/emoji/diamond_shape_with_a_dot_inside.png
new file mode 100644
index 00000000000..2a22a26d1e2
--- /dev/null
+++ b/app/assets/images/emoji/diamond_shape_with_a_dot_inside.png
diff --git a/app/assets/images/emoji/diamonds.png b/app/assets/images/emoji/diamonds.png
new file mode 100644
index 00000000000..1f25f51f97a
--- /dev/null
+++ b/app/assets/images/emoji/diamonds.png
diff --git a/app/assets/images/emoji/disappointed.png b/app/assets/images/emoji/disappointed.png
new file mode 100644
index 00000000000..efe4e67e23c
--- /dev/null
+++ b/app/assets/images/emoji/disappointed.png
diff --git a/app/assets/images/emoji/disappointed_relieved.png b/app/assets/images/emoji/disappointed_relieved.png
new file mode 100644
index 00000000000..aef864d2b3d
--- /dev/null
+++ b/app/assets/images/emoji/disappointed_relieved.png
diff --git a/app/assets/images/emoji/dividers.png b/app/assets/images/emoji/dividers.png
new file mode 100644
index 00000000000..46a7e403f9d
--- /dev/null
+++ b/app/assets/images/emoji/dividers.png
diff --git a/app/assets/images/emoji/dizzy.png b/app/assets/images/emoji/dizzy.png
new file mode 100644
index 00000000000..85f52efad24
--- /dev/null
+++ b/app/assets/images/emoji/dizzy.png
diff --git a/app/assets/images/emoji/dizzy_face.png b/app/assets/images/emoji/dizzy_face.png
new file mode 100644
index 00000000000..3120316ab5e
--- /dev/null
+++ b/app/assets/images/emoji/dizzy_face.png
diff --git a/app/assets/images/emoji/do_not_litter.png b/app/assets/images/emoji/do_not_litter.png
new file mode 100644
index 00000000000..341d2575f4f
--- /dev/null
+++ b/app/assets/images/emoji/do_not_litter.png
diff --git a/app/assets/images/emoji/dog.png b/app/assets/images/emoji/dog.png
new file mode 100644
index 00000000000..281b81d58bd
--- /dev/null
+++ b/app/assets/images/emoji/dog.png
diff --git a/app/assets/images/emoji/dog2.png b/app/assets/images/emoji/dog2.png
new file mode 100644
index 00000000000..976143dbdbe
--- /dev/null
+++ b/app/assets/images/emoji/dog2.png
diff --git a/app/assets/images/emoji/dollar.png b/app/assets/images/emoji/dollar.png
new file mode 100644
index 00000000000..a9904c28293
--- /dev/null
+++ b/app/assets/images/emoji/dollar.png
diff --git a/app/assets/images/emoji/dolls.png b/app/assets/images/emoji/dolls.png
new file mode 100644
index 00000000000..10955615110
--- /dev/null
+++ b/app/assets/images/emoji/dolls.png
diff --git a/app/assets/images/emoji/dolphin.png b/app/assets/images/emoji/dolphin.png
new file mode 100644
index 00000000000..81434809003
--- /dev/null
+++ b/app/assets/images/emoji/dolphin.png
diff --git a/app/assets/images/emoji/door.png b/app/assets/images/emoji/door.png
new file mode 100644
index 00000000000..36ae3e27494
--- /dev/null
+++ b/app/assets/images/emoji/door.png
diff --git a/app/assets/images/emoji/doughnut.png b/app/assets/images/emoji/doughnut.png
new file mode 100644
index 00000000000..0ca4cd0bde8
--- /dev/null
+++ b/app/assets/images/emoji/doughnut.png
diff --git a/app/assets/images/emoji/dove.png b/app/assets/images/emoji/dove.png
new file mode 100644
index 00000000000..9580c4917d7
--- /dev/null
+++ b/app/assets/images/emoji/dove.png
diff --git a/app/assets/images/emoji/dragon.png b/app/assets/images/emoji/dragon.png
new file mode 100644
index 00000000000..d6311cf5429
--- /dev/null
+++ b/app/assets/images/emoji/dragon.png
diff --git a/app/assets/images/emoji/dragon_face.png b/app/assets/images/emoji/dragon_face.png
new file mode 100644
index 00000000000..3c2720446c6
--- /dev/null
+++ b/app/assets/images/emoji/dragon_face.png
diff --git a/app/assets/images/emoji/dress.png b/app/assets/images/emoji/dress.png
new file mode 100644
index 00000000000..a697ca5c57d
--- /dev/null
+++ b/app/assets/images/emoji/dress.png
diff --git a/app/assets/images/emoji/dromedary_camel.png b/app/assets/images/emoji/dromedary_camel.png
new file mode 100644
index 00000000000..5271637c7c4
--- /dev/null
+++ b/app/assets/images/emoji/dromedary_camel.png
diff --git a/app/assets/images/emoji/drooling_face.png b/app/assets/images/emoji/drooling_face.png
new file mode 100644
index 00000000000..a5460532597
--- /dev/null
+++ b/app/assets/images/emoji/drooling_face.png
diff --git a/app/assets/images/emoji/droplet.png b/app/assets/images/emoji/droplet.png
new file mode 100644
index 00000000000..71241ec3061
--- /dev/null
+++ b/app/assets/images/emoji/droplet.png
diff --git a/app/assets/images/emoji/drum.png b/app/assets/images/emoji/drum.png
new file mode 100644
index 00000000000..b038727cc99
--- /dev/null
+++ b/app/assets/images/emoji/drum.png
diff --git a/app/assets/images/emoji/duck.png b/app/assets/images/emoji/duck.png
new file mode 100644
index 00000000000..74330b77ca3
--- /dev/null
+++ b/app/assets/images/emoji/duck.png
diff --git a/app/assets/images/emoji/dvd.png b/app/assets/images/emoji/dvd.png
new file mode 100644
index 00000000000..045a6f7a08d
--- /dev/null
+++ b/app/assets/images/emoji/dvd.png
diff --git a/app/assets/images/emoji/e-mail.png b/app/assets/images/emoji/e-mail.png
new file mode 100644
index 00000000000..d22e654a20b
--- /dev/null
+++ b/app/assets/images/emoji/e-mail.png
diff --git a/app/assets/images/emoji/eagle.png b/app/assets/images/emoji/eagle.png
new file mode 100644
index 00000000000..4f277debeef
--- /dev/null
+++ b/app/assets/images/emoji/eagle.png
diff --git a/app/assets/images/emoji/ear.png b/app/assets/images/emoji/ear.png
new file mode 100644
index 00000000000..f84f9ff154a
--- /dev/null
+++ b/app/assets/images/emoji/ear.png
diff --git a/app/assets/images/emoji/ear_of_rice.png b/app/assets/images/emoji/ear_of_rice.png
new file mode 100644
index 00000000000..3564d9d643a
--- /dev/null
+++ b/app/assets/images/emoji/ear_of_rice.png
diff --git a/app/assets/images/emoji/ear_tone1.png b/app/assets/images/emoji/ear_tone1.png
new file mode 100644
index 00000000000..d09e1e41996
--- /dev/null
+++ b/app/assets/images/emoji/ear_tone1.png
diff --git a/app/assets/images/emoji/ear_tone2.png b/app/assets/images/emoji/ear_tone2.png
new file mode 100644
index 00000000000..300d60a9948
--- /dev/null
+++ b/app/assets/images/emoji/ear_tone2.png
diff --git a/app/assets/images/emoji/ear_tone3.png b/app/assets/images/emoji/ear_tone3.png
new file mode 100644
index 00000000000..2a56eebe445
--- /dev/null
+++ b/app/assets/images/emoji/ear_tone3.png
diff --git a/app/assets/images/emoji/ear_tone4.png b/app/assets/images/emoji/ear_tone4.png
new file mode 100644
index 00000000000..bd270f7763e
--- /dev/null
+++ b/app/assets/images/emoji/ear_tone4.png
diff --git a/app/assets/images/emoji/ear_tone5.png b/app/assets/images/emoji/ear_tone5.png
new file mode 100644
index 00000000000..b96bb441dff
--- /dev/null
+++ b/app/assets/images/emoji/ear_tone5.png
diff --git a/app/assets/images/emoji/earth_africa.png b/app/assets/images/emoji/earth_africa.png
new file mode 100644
index 00000000000..66c3348c23a
--- /dev/null
+++ b/app/assets/images/emoji/earth_africa.png
diff --git a/app/assets/images/emoji/earth_americas.png b/app/assets/images/emoji/earth_americas.png
new file mode 100644
index 00000000000..538c3cddd68
--- /dev/null
+++ b/app/assets/images/emoji/earth_americas.png
diff --git a/app/assets/images/emoji/earth_asia.png b/app/assets/images/emoji/earth_asia.png
new file mode 100644
index 00000000000..d8df97fec3c
--- /dev/null
+++ b/app/assets/images/emoji/earth_asia.png
diff --git a/app/assets/images/emoji/egg.png b/app/assets/images/emoji/egg.png
new file mode 100644
index 00000000000..c171974d993
--- /dev/null
+++ b/app/assets/images/emoji/egg.png
diff --git a/app/assets/images/emoji/eggplant.png b/app/assets/images/emoji/eggplant.png
new file mode 100644
index 00000000000..fafd7c1a14c
--- /dev/null
+++ b/app/assets/images/emoji/eggplant.png
diff --git a/app/assets/images/emoji/eight.png b/app/assets/images/emoji/eight.png
new file mode 100644
index 00000000000..8c95874d4c5
--- /dev/null
+++ b/app/assets/images/emoji/eight.png
diff --git a/app/assets/images/emoji/eight_pointed_black_star.png b/app/assets/images/emoji/eight_pointed_black_star.png
new file mode 100644
index 00000000000..820179bda50
--- /dev/null
+++ b/app/assets/images/emoji/eight_pointed_black_star.png
diff --git a/app/assets/images/emoji/eight_spoked_asterisk.png b/app/assets/images/emoji/eight_spoked_asterisk.png
new file mode 100644
index 00000000000..3307ffa62ee
--- /dev/null
+++ b/app/assets/images/emoji/eight_spoked_asterisk.png
diff --git a/app/assets/images/emoji/eject.png b/app/assets/images/emoji/eject.png
new file mode 100644
index 00000000000..ec5cfc48973
--- /dev/null
+++ b/app/assets/images/emoji/eject.png
diff --git a/app/assets/images/emoji/electric_plug.png b/app/assets/images/emoji/electric_plug.png
new file mode 100644
index 00000000000..31d1eb215b4
--- /dev/null
+++ b/app/assets/images/emoji/electric_plug.png
diff --git a/app/assets/images/emoji/elephant.png b/app/assets/images/emoji/elephant.png
new file mode 100644
index 00000000000..b8a6d140595
--- /dev/null
+++ b/app/assets/images/emoji/elephant.png
diff --git a/app/assets/images/emoji/end.png b/app/assets/images/emoji/end.png
new file mode 100644
index 00000000000..ef3ccd5f367
--- /dev/null
+++ b/app/assets/images/emoji/end.png
diff --git a/app/assets/images/emoji/envelope.png b/app/assets/images/emoji/envelope.png
new file mode 100644
index 00000000000..ec77ac375a4
--- /dev/null
+++ b/app/assets/images/emoji/envelope.png
diff --git a/app/assets/images/emoji/envelope_with_arrow.png b/app/assets/images/emoji/envelope_with_arrow.png
new file mode 100644
index 00000000000..7448a6b7673
--- /dev/null
+++ b/app/assets/images/emoji/envelope_with_arrow.png
diff --git a/app/assets/images/emoji/euro.png b/app/assets/images/emoji/euro.png
new file mode 100644
index 00000000000..a49020820e1
--- /dev/null
+++ b/app/assets/images/emoji/euro.png
diff --git a/app/assets/images/emoji/european_castle.png b/app/assets/images/emoji/european_castle.png
new file mode 100644
index 00000000000..888d11332ce
--- /dev/null
+++ b/app/assets/images/emoji/european_castle.png
diff --git a/app/assets/images/emoji/european_post_office.png b/app/assets/images/emoji/european_post_office.png
new file mode 100644
index 00000000000..3745aff8dd2
--- /dev/null
+++ b/app/assets/images/emoji/european_post_office.png
diff --git a/app/assets/images/emoji/evergreen_tree.png b/app/assets/images/emoji/evergreen_tree.png
new file mode 100644
index 00000000000..f679d8dd772
--- /dev/null
+++ b/app/assets/images/emoji/evergreen_tree.png
diff --git a/app/assets/images/emoji/exclamation.png b/app/assets/images/emoji/exclamation.png
new file mode 100644
index 00000000000..2c14406422f
--- /dev/null
+++ b/app/assets/images/emoji/exclamation.png
diff --git a/app/assets/images/emoji/expressionless.png b/app/assets/images/emoji/expressionless.png
new file mode 100644
index 00000000000..2954017f6c2
--- /dev/null
+++ b/app/assets/images/emoji/expressionless.png
diff --git a/app/assets/images/emoji/eye.png b/app/assets/images/emoji/eye.png
new file mode 100644
index 00000000000..9d989cdd375
--- /dev/null
+++ b/app/assets/images/emoji/eye.png
diff --git a/app/assets/images/emoji/eye_in_speech_bubble.png b/app/assets/images/emoji/eye_in_speech_bubble.png
new file mode 100644
index 00000000000..21bd22bbcce
--- /dev/null
+++ b/app/assets/images/emoji/eye_in_speech_bubble.png
diff --git a/app/assets/images/emoji/eyeglasses.png b/app/assets/images/emoji/eyeglasses.png
new file mode 100644
index 00000000000..865d8274acf
--- /dev/null
+++ b/app/assets/images/emoji/eyeglasses.png
diff --git a/app/assets/images/emoji/eyes.png b/app/assets/images/emoji/eyes.png
new file mode 100644
index 00000000000..2102ada7e09
--- /dev/null
+++ b/app/assets/images/emoji/eyes.png
diff --git a/app/assets/images/emoji/face_palm.png b/app/assets/images/emoji/face_palm.png
new file mode 100644
index 00000000000..defc796cf16
--- /dev/null
+++ b/app/assets/images/emoji/face_palm.png
diff --git a/app/assets/images/emoji/face_palm_tone1.png b/app/assets/images/emoji/face_palm_tone1.png
new file mode 100644
index 00000000000..2f4b010bb40
--- /dev/null
+++ b/app/assets/images/emoji/face_palm_tone1.png
diff --git a/app/assets/images/emoji/face_palm_tone2.png b/app/assets/images/emoji/face_palm_tone2.png
new file mode 100644
index 00000000000..97fb6831687
--- /dev/null
+++ b/app/assets/images/emoji/face_palm_tone2.png
diff --git a/app/assets/images/emoji/face_palm_tone3.png b/app/assets/images/emoji/face_palm_tone3.png
new file mode 100644
index 00000000000..b5b5c1e5306
--- /dev/null
+++ b/app/assets/images/emoji/face_palm_tone3.png
diff --git a/app/assets/images/emoji/face_palm_tone4.png b/app/assets/images/emoji/face_palm_tone4.png
new file mode 100644
index 00000000000..2840b113483
--- /dev/null
+++ b/app/assets/images/emoji/face_palm_tone4.png
diff --git a/app/assets/images/emoji/face_palm_tone5.png b/app/assets/images/emoji/face_palm_tone5.png
new file mode 100644
index 00000000000..6f070db98be
--- /dev/null
+++ b/app/assets/images/emoji/face_palm_tone5.png
diff --git a/app/assets/images/emoji/factory.png b/app/assets/images/emoji/factory.png
new file mode 100644
index 00000000000..e1d2ddf4a27
--- /dev/null
+++ b/app/assets/images/emoji/factory.png
diff --git a/app/assets/images/emoji/fallen_leaf.png b/app/assets/images/emoji/fallen_leaf.png
new file mode 100644
index 00000000000..0d60e7bdf2d
--- /dev/null
+++ b/app/assets/images/emoji/fallen_leaf.png
diff --git a/app/assets/images/emoji/family.png b/app/assets/images/emoji/family.png
new file mode 100644
index 00000000000..26421965791
--- /dev/null
+++ b/app/assets/images/emoji/family.png
diff --git a/app/assets/images/emoji/family_mmb.png b/app/assets/images/emoji/family_mmb.png
new file mode 100644
index 00000000000..7a2e4e2c491
--- /dev/null
+++ b/app/assets/images/emoji/family_mmb.png
diff --git a/app/assets/images/emoji/family_mmbb.png b/app/assets/images/emoji/family_mmbb.png
new file mode 100644
index 00000000000..81e6c0fc0ee
--- /dev/null
+++ b/app/assets/images/emoji/family_mmbb.png
diff --git a/app/assets/images/emoji/family_mmg.png b/app/assets/images/emoji/family_mmg.png
new file mode 100644
index 00000000000..932a85e1fe5
--- /dev/null
+++ b/app/assets/images/emoji/family_mmg.png
diff --git a/app/assets/images/emoji/family_mmgb.png b/app/assets/images/emoji/family_mmgb.png
new file mode 100644
index 00000000000..41e35166670
--- /dev/null
+++ b/app/assets/images/emoji/family_mmgb.png
diff --git a/app/assets/images/emoji/family_mmgg.png b/app/assets/images/emoji/family_mmgg.png
new file mode 100644
index 00000000000..8e8ccfe6c7f
--- /dev/null
+++ b/app/assets/images/emoji/family_mmgg.png
diff --git a/app/assets/images/emoji/family_mwbb.png b/app/assets/images/emoji/family_mwbb.png
new file mode 100644
index 00000000000..b544fbe573f
--- /dev/null
+++ b/app/assets/images/emoji/family_mwbb.png
diff --git a/app/assets/images/emoji/family_mwg.png b/app/assets/images/emoji/family_mwg.png
new file mode 100644
index 00000000000..71d2681c32a
--- /dev/null
+++ b/app/assets/images/emoji/family_mwg.png
diff --git a/app/assets/images/emoji/family_mwgb.png b/app/assets/images/emoji/family_mwgb.png
new file mode 100644
index 00000000000..40dbf1f7a18
--- /dev/null
+++ b/app/assets/images/emoji/family_mwgb.png
diff --git a/app/assets/images/emoji/family_mwgg.png b/app/assets/images/emoji/family_mwgg.png
new file mode 100644
index 00000000000..bfefa4879cb
--- /dev/null
+++ b/app/assets/images/emoji/family_mwgg.png
diff --git a/app/assets/images/emoji/family_wwb.png b/app/assets/images/emoji/family_wwb.png
new file mode 100644
index 00000000000..836feae7c78
--- /dev/null
+++ b/app/assets/images/emoji/family_wwb.png
diff --git a/app/assets/images/emoji/family_wwbb.png b/app/assets/images/emoji/family_wwbb.png
new file mode 100644
index 00000000000..6c6ba45e7bb
--- /dev/null
+++ b/app/assets/images/emoji/family_wwbb.png
diff --git a/app/assets/images/emoji/family_wwg.png b/app/assets/images/emoji/family_wwg.png
new file mode 100644
index 00000000000..41225c6fa5a
--- /dev/null
+++ b/app/assets/images/emoji/family_wwg.png
diff --git a/app/assets/images/emoji/family_wwgb.png b/app/assets/images/emoji/family_wwgb.png
new file mode 100644
index 00000000000..284d29ab5da
--- /dev/null
+++ b/app/assets/images/emoji/family_wwgb.png
diff --git a/app/assets/images/emoji/family_wwgg.png b/app/assets/images/emoji/family_wwgg.png
new file mode 100644
index 00000000000..d8d3f49b85f
--- /dev/null
+++ b/app/assets/images/emoji/family_wwgg.png
diff --git a/app/assets/images/emoji/fast_forward.png b/app/assets/images/emoji/fast_forward.png
new file mode 100644
index 00000000000..c406fedfdb1
--- /dev/null
+++ b/app/assets/images/emoji/fast_forward.png
diff --git a/app/assets/images/emoji/fax.png b/app/assets/images/emoji/fax.png
new file mode 100644
index 00000000000..6f929e294c2
--- /dev/null
+++ b/app/assets/images/emoji/fax.png
diff --git a/app/assets/images/emoji/fearful.png b/app/assets/images/emoji/fearful.png
new file mode 100644
index 00000000000..eb8b347cef9
--- /dev/null
+++ b/app/assets/images/emoji/fearful.png
diff --git a/app/assets/images/emoji/feet.png b/app/assets/images/emoji/feet.png
new file mode 100644
index 00000000000..5fe568cee93
--- /dev/null
+++ b/app/assets/images/emoji/feet.png
diff --git a/app/assets/images/emoji/fencer.png b/app/assets/images/emoji/fencer.png
new file mode 100644
index 00000000000..5288c920eb9
--- /dev/null
+++ b/app/assets/images/emoji/fencer.png
diff --git a/app/assets/images/emoji/ferris_wheel.png b/app/assets/images/emoji/ferris_wheel.png
new file mode 100644
index 00000000000..55c8ff0475b
--- /dev/null
+++ b/app/assets/images/emoji/ferris_wheel.png
diff --git a/app/assets/images/emoji/ferry.png b/app/assets/images/emoji/ferry.png
new file mode 100644
index 00000000000..41816b3ae34
--- /dev/null
+++ b/app/assets/images/emoji/ferry.png
diff --git a/app/assets/images/emoji/field_hockey.png b/app/assets/images/emoji/field_hockey.png
new file mode 100644
index 00000000000..839637716ee
--- /dev/null
+++ b/app/assets/images/emoji/field_hockey.png
diff --git a/app/assets/images/emoji/file_cabinet.png b/app/assets/images/emoji/file_cabinet.png
new file mode 100644
index 00000000000..fddc65dde96
--- /dev/null
+++ b/app/assets/images/emoji/file_cabinet.png
diff --git a/app/assets/images/emoji/file_folder.png b/app/assets/images/emoji/file_folder.png
new file mode 100644
index 00000000000..addedaf0870
--- /dev/null
+++ b/app/assets/images/emoji/file_folder.png
diff --git a/app/assets/images/emoji/film_frames.png b/app/assets/images/emoji/film_frames.png
new file mode 100644
index 00000000000..30143aedbe6
--- /dev/null
+++ b/app/assets/images/emoji/film_frames.png
diff --git a/app/assets/images/emoji/fingers_crossed.png b/app/assets/images/emoji/fingers_crossed.png
new file mode 100644
index 00000000000..4cd18514ea3
--- /dev/null
+++ b/app/assets/images/emoji/fingers_crossed.png
diff --git a/app/assets/images/emoji/fingers_crossed_tone1.png b/app/assets/images/emoji/fingers_crossed_tone1.png
new file mode 100644
index 00000000000..dd2384a6cd5
--- /dev/null
+++ b/app/assets/images/emoji/fingers_crossed_tone1.png
diff --git a/app/assets/images/emoji/fingers_crossed_tone2.png b/app/assets/images/emoji/fingers_crossed_tone2.png
new file mode 100644
index 00000000000..6228401befe
--- /dev/null
+++ b/app/assets/images/emoji/fingers_crossed_tone2.png
diff --git a/app/assets/images/emoji/fingers_crossed_tone3.png b/app/assets/images/emoji/fingers_crossed_tone3.png
new file mode 100644
index 00000000000..b1074da15f5
--- /dev/null
+++ b/app/assets/images/emoji/fingers_crossed_tone3.png
diff --git a/app/assets/images/emoji/fingers_crossed_tone4.png b/app/assets/images/emoji/fingers_crossed_tone4.png
new file mode 100644
index 00000000000..75e05e4d332
--- /dev/null
+++ b/app/assets/images/emoji/fingers_crossed_tone4.png
diff --git a/app/assets/images/emoji/fingers_crossed_tone5.png b/app/assets/images/emoji/fingers_crossed_tone5.png
new file mode 100644
index 00000000000..761aebdc30f
--- /dev/null
+++ b/app/assets/images/emoji/fingers_crossed_tone5.png
diff --git a/app/assets/images/emoji/fire.png b/app/assets/images/emoji/fire.png
new file mode 100644
index 00000000000..bd3775a460b
--- /dev/null
+++ b/app/assets/images/emoji/fire.png
diff --git a/app/assets/images/emoji/fire_engine.png b/app/assets/images/emoji/fire_engine.png
new file mode 100644
index 00000000000..2cd45b7cf7e
--- /dev/null
+++ b/app/assets/images/emoji/fire_engine.png
diff --git a/app/assets/images/emoji/fireworks.png b/app/assets/images/emoji/fireworks.png
new file mode 100644
index 00000000000..176c8b58265
--- /dev/null
+++ b/app/assets/images/emoji/fireworks.png
diff --git a/app/assets/images/emoji/first_place.png b/app/assets/images/emoji/first_place.png
new file mode 100644
index 00000000000..15612b66492
--- /dev/null
+++ b/app/assets/images/emoji/first_place.png
diff --git a/app/assets/images/emoji/first_quarter_moon.png b/app/assets/images/emoji/first_quarter_moon.png
new file mode 100644
index 00000000000..5dccaf72a4f
--- /dev/null
+++ b/app/assets/images/emoji/first_quarter_moon.png
diff --git a/app/assets/images/emoji/first_quarter_moon_with_face.png b/app/assets/images/emoji/first_quarter_moon_with_face.png
new file mode 100644
index 00000000000..cd8a3d7acd8
--- /dev/null
+++ b/app/assets/images/emoji/first_quarter_moon_with_face.png
diff --git a/app/assets/images/emoji/fish.png b/app/assets/images/emoji/fish.png
new file mode 100644
index 00000000000..c2d2faaacd4
--- /dev/null
+++ b/app/assets/images/emoji/fish.png
diff --git a/app/assets/images/emoji/fish_cake.png b/app/assets/images/emoji/fish_cake.png
new file mode 100644
index 00000000000..157bded65db
--- /dev/null
+++ b/app/assets/images/emoji/fish_cake.png
diff --git a/app/assets/images/emoji/fishing_pole_and_fish.png b/app/assets/images/emoji/fishing_pole_and_fish.png
new file mode 100644
index 00000000000..dfcdf07eb50
--- /dev/null
+++ b/app/assets/images/emoji/fishing_pole_and_fish.png
diff --git a/app/assets/images/emoji/fist.png b/app/assets/images/emoji/fist.png
new file mode 100644
index 00000000000..de33592bf98
--- /dev/null
+++ b/app/assets/images/emoji/fist.png
diff --git a/app/assets/images/emoji/fist_tone1.png b/app/assets/images/emoji/fist_tone1.png
new file mode 100644
index 00000000000..02809e2dd68
--- /dev/null
+++ b/app/assets/images/emoji/fist_tone1.png
diff --git a/app/assets/images/emoji/fist_tone2.png b/app/assets/images/emoji/fist_tone2.png
new file mode 100644
index 00000000000..5de34810383
--- /dev/null
+++ b/app/assets/images/emoji/fist_tone2.png
diff --git a/app/assets/images/emoji/fist_tone3.png b/app/assets/images/emoji/fist_tone3.png
new file mode 100644
index 00000000000..0d5240129b1
--- /dev/null
+++ b/app/assets/images/emoji/fist_tone3.png
diff --git a/app/assets/images/emoji/fist_tone4.png b/app/assets/images/emoji/fist_tone4.png
new file mode 100644
index 00000000000..a95c0dd634b
--- /dev/null
+++ b/app/assets/images/emoji/fist_tone4.png
diff --git a/app/assets/images/emoji/fist_tone5.png b/app/assets/images/emoji/fist_tone5.png
new file mode 100644
index 00000000000..a2f092fd8c7
--- /dev/null
+++ b/app/assets/images/emoji/fist_tone5.png
diff --git a/app/assets/images/emoji/five.png b/app/assets/images/emoji/five.png
new file mode 100644
index 00000000000..d14371f3f27
--- /dev/null
+++ b/app/assets/images/emoji/five.png
diff --git a/app/assets/images/emoji/flag_ac.png b/app/assets/images/emoji/flag_ac.png
new file mode 100644
index 00000000000..286239920c7
--- /dev/null
+++ b/app/assets/images/emoji/flag_ac.png
diff --git a/app/assets/images/emoji/flag_ad.png b/app/assets/images/emoji/flag_ad.png
new file mode 100644
index 00000000000..20f4b14e8ad
--- /dev/null
+++ b/app/assets/images/emoji/flag_ad.png
diff --git a/app/assets/images/emoji/flag_ae.png b/app/assets/images/emoji/flag_ae.png
new file mode 100644
index 00000000000..d16ffe4b862
--- /dev/null
+++ b/app/assets/images/emoji/flag_ae.png
diff --git a/app/assets/images/emoji/flag_af.png b/app/assets/images/emoji/flag_af.png
new file mode 100644
index 00000000000..a51533b554d
--- /dev/null
+++ b/app/assets/images/emoji/flag_af.png
diff --git a/app/assets/images/emoji/flag_ag.png b/app/assets/images/emoji/flag_ag.png
new file mode 100644
index 00000000000..07f2ce397d0
--- /dev/null
+++ b/app/assets/images/emoji/flag_ag.png
diff --git a/app/assets/images/emoji/flag_ai.png b/app/assets/images/emoji/flag_ai.png
new file mode 100644
index 00000000000..500b5ab09fb
--- /dev/null
+++ b/app/assets/images/emoji/flag_ai.png
diff --git a/app/assets/images/emoji/flag_al.png b/app/assets/images/emoji/flag_al.png
new file mode 100644
index 00000000000..03a20132cc6
--- /dev/null
+++ b/app/assets/images/emoji/flag_al.png
diff --git a/app/assets/images/emoji/flag_am.png b/app/assets/images/emoji/flag_am.png
new file mode 100644
index 00000000000..2ad60a273ec
--- /dev/null
+++ b/app/assets/images/emoji/flag_am.png
diff --git a/app/assets/images/emoji/flag_ao.png b/app/assets/images/emoji/flag_ao.png
new file mode 100644
index 00000000000..cb46c31f862
--- /dev/null
+++ b/app/assets/images/emoji/flag_ao.png
diff --git a/app/assets/images/emoji/flag_aq.png b/app/assets/images/emoji/flag_aq.png
new file mode 100644
index 00000000000..b272021d375
--- /dev/null
+++ b/app/assets/images/emoji/flag_aq.png
diff --git a/app/assets/images/emoji/flag_ar.png b/app/assets/images/emoji/flag_ar.png
new file mode 100644
index 00000000000..73136caf3b7
--- /dev/null
+++ b/app/assets/images/emoji/flag_ar.png
diff --git a/app/assets/images/emoji/flag_as.png b/app/assets/images/emoji/flag_as.png
new file mode 100644
index 00000000000..3db45a0d9f3
--- /dev/null
+++ b/app/assets/images/emoji/flag_as.png
diff --git a/app/assets/images/emoji/flag_at.png b/app/assets/images/emoji/flag_at.png
new file mode 100644
index 00000000000..c43769dcb19
--- /dev/null
+++ b/app/assets/images/emoji/flag_at.png
diff --git a/app/assets/images/emoji/flag_au.png b/app/assets/images/emoji/flag_au.png
new file mode 100644
index 00000000000..7794309c78c
--- /dev/null
+++ b/app/assets/images/emoji/flag_au.png
diff --git a/app/assets/images/emoji/flag_aw.png b/app/assets/images/emoji/flag_aw.png
new file mode 100644
index 00000000000..02c840d12c9
--- /dev/null
+++ b/app/assets/images/emoji/flag_aw.png
diff --git a/app/assets/images/emoji/flag_ax.png b/app/assets/images/emoji/flag_ax.png
new file mode 100644
index 00000000000..fc5466174bb
--- /dev/null
+++ b/app/assets/images/emoji/flag_ax.png
diff --git a/app/assets/images/emoji/flag_az.png b/app/assets/images/emoji/flag_az.png
new file mode 100644
index 00000000000..89d3d15fd9f
--- /dev/null
+++ b/app/assets/images/emoji/flag_az.png
diff --git a/app/assets/images/emoji/flag_ba.png b/app/assets/images/emoji/flag_ba.png
new file mode 100644
index 00000000000..25fe407e13c
--- /dev/null
+++ b/app/assets/images/emoji/flag_ba.png
diff --git a/app/assets/images/emoji/flag_bb.png b/app/assets/images/emoji/flag_bb.png
new file mode 100644
index 00000000000..bccd8c5c9b0
--- /dev/null
+++ b/app/assets/images/emoji/flag_bb.png
diff --git a/app/assets/images/emoji/flag_bd.png b/app/assets/images/emoji/flag_bd.png
new file mode 100644
index 00000000000..b0597a3149b
--- /dev/null
+++ b/app/assets/images/emoji/flag_bd.png
diff --git a/app/assets/images/emoji/flag_be.png b/app/assets/images/emoji/flag_be.png
new file mode 100644
index 00000000000..551f086e3c4
--- /dev/null
+++ b/app/assets/images/emoji/flag_be.png
diff --git a/app/assets/images/emoji/flag_bf.png b/app/assets/images/emoji/flag_bf.png
new file mode 100644
index 00000000000..444d4829f94
--- /dev/null
+++ b/app/assets/images/emoji/flag_bf.png
diff --git a/app/assets/images/emoji/flag_bg.png b/app/assets/images/emoji/flag_bg.png
new file mode 100644
index 00000000000..821eee5e170
--- /dev/null
+++ b/app/assets/images/emoji/flag_bg.png
diff --git a/app/assets/images/emoji/flag_bh.png b/app/assets/images/emoji/flag_bh.png
new file mode 100644
index 00000000000..f33724249f0
--- /dev/null
+++ b/app/assets/images/emoji/flag_bh.png
diff --git a/app/assets/images/emoji/flag_bi.png b/app/assets/images/emoji/flag_bi.png
new file mode 100644
index 00000000000..ea20ac93211
--- /dev/null
+++ b/app/assets/images/emoji/flag_bi.png
diff --git a/app/assets/images/emoji/flag_bj.png b/app/assets/images/emoji/flag_bj.png
new file mode 100644
index 00000000000..7cca4f80457
--- /dev/null
+++ b/app/assets/images/emoji/flag_bj.png
diff --git a/app/assets/images/emoji/flag_bl.png b/app/assets/images/emoji/flag_bl.png
new file mode 100644
index 00000000000..1082e78999f
--- /dev/null
+++ b/app/assets/images/emoji/flag_bl.png
diff --git a/app/assets/images/emoji/flag_black.png b/app/assets/images/emoji/flag_black.png
new file mode 100644
index 00000000000..0e28d05d5ac
--- /dev/null
+++ b/app/assets/images/emoji/flag_black.png
diff --git a/app/assets/images/emoji/flag_bm.png b/app/assets/images/emoji/flag_bm.png
new file mode 100644
index 00000000000..ab8cafdac63
--- /dev/null
+++ b/app/assets/images/emoji/flag_bm.png
diff --git a/app/assets/images/emoji/flag_bn.png b/app/assets/images/emoji/flag_bn.png
new file mode 100644
index 00000000000..caa9329a896
--- /dev/null
+++ b/app/assets/images/emoji/flag_bn.png
diff --git a/app/assets/images/emoji/flag_bo.png b/app/assets/images/emoji/flag_bo.png
new file mode 100644
index 00000000000..98af62b3da7
--- /dev/null
+++ b/app/assets/images/emoji/flag_bo.png
diff --git a/app/assets/images/emoji/flag_bq.png b/app/assets/images/emoji/flag_bq.png
new file mode 100644
index 00000000000..cb978ef9de9
--- /dev/null
+++ b/app/assets/images/emoji/flag_bq.png
diff --git a/app/assets/images/emoji/flag_br.png b/app/assets/images/emoji/flag_br.png
new file mode 100644
index 00000000000..b139366a42b
--- /dev/null
+++ b/app/assets/images/emoji/flag_br.png
diff --git a/app/assets/images/emoji/flag_bs.png b/app/assets/images/emoji/flag_bs.png
new file mode 100644
index 00000000000..d36bcd2fb52
--- /dev/null
+++ b/app/assets/images/emoji/flag_bs.png
diff --git a/app/assets/images/emoji/flag_bt.png b/app/assets/images/emoji/flag_bt.png
new file mode 100644
index 00000000000..ed57aa0360e
--- /dev/null
+++ b/app/assets/images/emoji/flag_bt.png
diff --git a/app/assets/images/emoji/flag_bv.png b/app/assets/images/emoji/flag_bv.png
new file mode 100644
index 00000000000..5884e648228
--- /dev/null
+++ b/app/assets/images/emoji/flag_bv.png
diff --git a/app/assets/images/emoji/flag_bw.png b/app/assets/images/emoji/flag_bw.png
new file mode 100644
index 00000000000..cb12f34739d
--- /dev/null
+++ b/app/assets/images/emoji/flag_bw.png
diff --git a/app/assets/images/emoji/flag_by.png b/app/assets/images/emoji/flag_by.png
new file mode 100644
index 00000000000..859c05beb13
--- /dev/null
+++ b/app/assets/images/emoji/flag_by.png
diff --git a/app/assets/images/emoji/flag_bz.png b/app/assets/images/emoji/flag_bz.png
new file mode 100644
index 00000000000..34761cd03d8
--- /dev/null
+++ b/app/assets/images/emoji/flag_bz.png
diff --git a/app/assets/images/emoji/flag_ca.png b/app/assets/images/emoji/flag_ca.png
new file mode 100644
index 00000000000..7c5b390e85b
--- /dev/null
+++ b/app/assets/images/emoji/flag_ca.png
diff --git a/app/assets/images/emoji/flag_cc.png b/app/assets/images/emoji/flag_cc.png
new file mode 100644
index 00000000000..b6555a23d83
--- /dev/null
+++ b/app/assets/images/emoji/flag_cc.png
diff --git a/app/assets/images/emoji/flag_cd.png b/app/assets/images/emoji/flag_cd.png
new file mode 100644
index 00000000000..fa92009771d
--- /dev/null
+++ b/app/assets/images/emoji/flag_cd.png
diff --git a/app/assets/images/emoji/flag_cf.png b/app/assets/images/emoji/flag_cf.png
new file mode 100644
index 00000000000..b969ae29ea9
--- /dev/null
+++ b/app/assets/images/emoji/flag_cf.png
diff --git a/app/assets/images/emoji/flag_cg.png b/app/assets/images/emoji/flag_cg.png
new file mode 100644
index 00000000000..3a38a40a95e
--- /dev/null
+++ b/app/assets/images/emoji/flag_cg.png
diff --git a/app/assets/images/emoji/flag_ch.png b/app/assets/images/emoji/flag_ch.png
new file mode 100644
index 00000000000..5ff86b8a3b7
--- /dev/null
+++ b/app/assets/images/emoji/flag_ch.png
diff --git a/app/assets/images/emoji/flag_ci.png b/app/assets/images/emoji/flag_ci.png
new file mode 100644
index 00000000000..e3b4d15c7f1
--- /dev/null
+++ b/app/assets/images/emoji/flag_ci.png
diff --git a/app/assets/images/emoji/flag_ck.png b/app/assets/images/emoji/flag_ck.png
new file mode 100644
index 00000000000..b6b53dbc1c4
--- /dev/null
+++ b/app/assets/images/emoji/flag_ck.png
diff --git a/app/assets/images/emoji/flag_cl.png b/app/assets/images/emoji/flag_cl.png
new file mode 100644
index 00000000000..c9390da5499
--- /dev/null
+++ b/app/assets/images/emoji/flag_cl.png
diff --git a/app/assets/images/emoji/flag_cm.png b/app/assets/images/emoji/flag_cm.png
new file mode 100644
index 00000000000..2d3f6ec4518
--- /dev/null
+++ b/app/assets/images/emoji/flag_cm.png
diff --git a/app/assets/images/emoji/flag_cn.png b/app/assets/images/emoji/flag_cn.png
new file mode 100644
index 00000000000..0a7f350a6d2
--- /dev/null
+++ b/app/assets/images/emoji/flag_cn.png
diff --git a/app/assets/images/emoji/flag_co.png b/app/assets/images/emoji/flag_co.png
new file mode 100644
index 00000000000..7e0f5e0dc3c
--- /dev/null
+++ b/app/assets/images/emoji/flag_co.png
diff --git a/app/assets/images/emoji/flag_cp.png b/app/assets/images/emoji/flag_cp.png
new file mode 100644
index 00000000000..70c761036bd
--- /dev/null
+++ b/app/assets/images/emoji/flag_cp.png
diff --git a/app/assets/images/emoji/flag_cr.png b/app/assets/images/emoji/flag_cr.png
new file mode 100644
index 00000000000..a5fce126515
--- /dev/null
+++ b/app/assets/images/emoji/flag_cr.png
diff --git a/app/assets/images/emoji/flag_cu.png b/app/assets/images/emoji/flag_cu.png
new file mode 100644
index 00000000000..447328f7dfd
--- /dev/null
+++ b/app/assets/images/emoji/flag_cu.png
diff --git a/app/assets/images/emoji/flag_cv.png b/app/assets/images/emoji/flag_cv.png
new file mode 100644
index 00000000000..43faf4d64d5
--- /dev/null
+++ b/app/assets/images/emoji/flag_cv.png
diff --git a/app/assets/images/emoji/flag_cw.png b/app/assets/images/emoji/flag_cw.png
new file mode 100644
index 00000000000..eb39e8d0078
--- /dev/null
+++ b/app/assets/images/emoji/flag_cw.png
diff --git a/app/assets/images/emoji/flag_cx.png b/app/assets/images/emoji/flag_cx.png
new file mode 100644
index 00000000000..09d21359f3a
--- /dev/null
+++ b/app/assets/images/emoji/flag_cx.png
diff --git a/app/assets/images/emoji/flag_cy.png b/app/assets/images/emoji/flag_cy.png
new file mode 100644
index 00000000000..154a7aa3176
--- /dev/null
+++ b/app/assets/images/emoji/flag_cy.png
diff --git a/app/assets/images/emoji/flag_cz.png b/app/assets/images/emoji/flag_cz.png
new file mode 100644
index 00000000000..9737ca223c7
--- /dev/null
+++ b/app/assets/images/emoji/flag_cz.png
diff --git a/app/assets/images/emoji/flag_de.png b/app/assets/images/emoji/flag_de.png
new file mode 100644
index 00000000000..98ed76b3bab
--- /dev/null
+++ b/app/assets/images/emoji/flag_de.png
diff --git a/app/assets/images/emoji/flag_dg.png b/app/assets/images/emoji/flag_dg.png
new file mode 100644
index 00000000000..aae927d14b8
--- /dev/null
+++ b/app/assets/images/emoji/flag_dg.png
diff --git a/app/assets/images/emoji/flag_dj.png b/app/assets/images/emoji/flag_dj.png
new file mode 100644
index 00000000000..73c2a2acbd9
--- /dev/null
+++ b/app/assets/images/emoji/flag_dj.png
diff --git a/app/assets/images/emoji/flag_dk.png b/app/assets/images/emoji/flag_dk.png
new file mode 100644
index 00000000000..e5a60b06256
--- /dev/null
+++ b/app/assets/images/emoji/flag_dk.png
diff --git a/app/assets/images/emoji/flag_dm.png b/app/assets/images/emoji/flag_dm.png
new file mode 100644
index 00000000000..50f8a53981d
--- /dev/null
+++ b/app/assets/images/emoji/flag_dm.png
diff --git a/app/assets/images/emoji/flag_do.png b/app/assets/images/emoji/flag_do.png
new file mode 100644
index 00000000000..037a45d7c26
--- /dev/null
+++ b/app/assets/images/emoji/flag_do.png
diff --git a/app/assets/images/emoji/flag_dz.png b/app/assets/images/emoji/flag_dz.png
new file mode 100644
index 00000000000..24945b10f2d
--- /dev/null
+++ b/app/assets/images/emoji/flag_dz.png
diff --git a/app/assets/images/emoji/flag_ea.png b/app/assets/images/emoji/flag_ea.png
new file mode 100644
index 00000000000..356ff347838
--- /dev/null
+++ b/app/assets/images/emoji/flag_ea.png
diff --git a/app/assets/images/emoji/flag_ec.png b/app/assets/images/emoji/flag_ec.png
new file mode 100644
index 00000000000..13814594619
--- /dev/null
+++ b/app/assets/images/emoji/flag_ec.png
diff --git a/app/assets/images/emoji/flag_ee.png b/app/assets/images/emoji/flag_ee.png
new file mode 100644
index 00000000000..84f317e7747
--- /dev/null
+++ b/app/assets/images/emoji/flag_ee.png
diff --git a/app/assets/images/emoji/flag_eg.png b/app/assets/images/emoji/flag_eg.png
new file mode 100644
index 00000000000..57786064a95
--- /dev/null
+++ b/app/assets/images/emoji/flag_eg.png
diff --git a/app/assets/images/emoji/flag_eh.png b/app/assets/images/emoji/flag_eh.png
new file mode 100644
index 00000000000..4d7a76687f6
--- /dev/null
+++ b/app/assets/images/emoji/flag_eh.png
diff --git a/app/assets/images/emoji/flag_er.png b/app/assets/images/emoji/flag_er.png
new file mode 100644
index 00000000000..0c3c724c1fb
--- /dev/null
+++ b/app/assets/images/emoji/flag_er.png
diff --git a/app/assets/images/emoji/flag_es.png b/app/assets/images/emoji/flag_es.png
new file mode 100644
index 00000000000..3e73597a225
--- /dev/null
+++ b/app/assets/images/emoji/flag_es.png
diff --git a/app/assets/images/emoji/flag_et.png b/app/assets/images/emoji/flag_et.png
new file mode 100644
index 00000000000..9560a134c97
--- /dev/null
+++ b/app/assets/images/emoji/flag_et.png
diff --git a/app/assets/images/emoji/flag_eu.png b/app/assets/images/emoji/flag_eu.png
new file mode 100644
index 00000000000..0b456cf3330
--- /dev/null
+++ b/app/assets/images/emoji/flag_eu.png
diff --git a/app/assets/images/emoji/flag_fi.png b/app/assets/images/emoji/flag_fi.png
new file mode 100644
index 00000000000..ebcf58abfc5
--- /dev/null
+++ b/app/assets/images/emoji/flag_fi.png
diff --git a/app/assets/images/emoji/flag_fj.png b/app/assets/images/emoji/flag_fj.png
new file mode 100644
index 00000000000..9cc8c37fe37
--- /dev/null
+++ b/app/assets/images/emoji/flag_fj.png
diff --git a/app/assets/images/emoji/flag_fk.png b/app/assets/images/emoji/flag_fk.png
new file mode 100644
index 00000000000..61372fd2549
--- /dev/null
+++ b/app/assets/images/emoji/flag_fk.png
diff --git a/app/assets/images/emoji/flag_fm.png b/app/assets/images/emoji/flag_fm.png
new file mode 100644
index 00000000000..0889825c8e1
--- /dev/null
+++ b/app/assets/images/emoji/flag_fm.png
diff --git a/app/assets/images/emoji/flag_fo.png b/app/assets/images/emoji/flag_fo.png
new file mode 100644
index 00000000000..9a4431b0831
--- /dev/null
+++ b/app/assets/images/emoji/flag_fo.png
diff --git a/app/assets/images/emoji/flag_fr.png b/app/assets/images/emoji/flag_fr.png
new file mode 100644
index 00000000000..62ca19c3fcf
--- /dev/null
+++ b/app/assets/images/emoji/flag_fr.png
diff --git a/app/assets/images/emoji/flag_ga.png b/app/assets/images/emoji/flag_ga.png
new file mode 100644
index 00000000000..2e68e527a3e
--- /dev/null
+++ b/app/assets/images/emoji/flag_ga.png
diff --git a/app/assets/images/emoji/flag_gb.png b/app/assets/images/emoji/flag_gb.png
new file mode 100644
index 00000000000..3ed10f62347
--- /dev/null
+++ b/app/assets/images/emoji/flag_gb.png
diff --git a/app/assets/images/emoji/flag_gd.png b/app/assets/images/emoji/flag_gd.png
new file mode 100644
index 00000000000..527aad33807
--- /dev/null
+++ b/app/assets/images/emoji/flag_gd.png
diff --git a/app/assets/images/emoji/flag_ge.png b/app/assets/images/emoji/flag_ge.png
new file mode 100644
index 00000000000..a75d142480d
--- /dev/null
+++ b/app/assets/images/emoji/flag_ge.png
diff --git a/app/assets/images/emoji/flag_gf.png b/app/assets/images/emoji/flag_gf.png
new file mode 100644
index 00000000000..0cf96f327c0
--- /dev/null
+++ b/app/assets/images/emoji/flag_gf.png
diff --git a/app/assets/images/emoji/flag_gg.png b/app/assets/images/emoji/flag_gg.png
new file mode 100644
index 00000000000..970002c7f76
--- /dev/null
+++ b/app/assets/images/emoji/flag_gg.png
diff --git a/app/assets/images/emoji/flag_gh.png b/app/assets/images/emoji/flag_gh.png
new file mode 100644
index 00000000000..f31b5eb7b45
--- /dev/null
+++ b/app/assets/images/emoji/flag_gh.png
diff --git a/app/assets/images/emoji/flag_gi.png b/app/assets/images/emoji/flag_gi.png
new file mode 100644
index 00000000000..e554a2a1d0c
--- /dev/null
+++ b/app/assets/images/emoji/flag_gi.png
diff --git a/app/assets/images/emoji/flag_gl.png b/app/assets/images/emoji/flag_gl.png
new file mode 100644
index 00000000000..2e795dd4e33
--- /dev/null
+++ b/app/assets/images/emoji/flag_gl.png
diff --git a/app/assets/images/emoji/flag_gm.png b/app/assets/images/emoji/flag_gm.png
new file mode 100644
index 00000000000..bb69c0975a3
--- /dev/null
+++ b/app/assets/images/emoji/flag_gm.png
diff --git a/app/assets/images/emoji/flag_gn.png b/app/assets/images/emoji/flag_gn.png
new file mode 100644
index 00000000000..1981f61dbf5
--- /dev/null
+++ b/app/assets/images/emoji/flag_gn.png
diff --git a/app/assets/images/emoji/flag_gp.png b/app/assets/images/emoji/flag_gp.png
new file mode 100644
index 00000000000..10e42e672bd
--- /dev/null
+++ b/app/assets/images/emoji/flag_gp.png
diff --git a/app/assets/images/emoji/flag_gq.png b/app/assets/images/emoji/flag_gq.png
new file mode 100644
index 00000000000..11475e61eeb
--- /dev/null
+++ b/app/assets/images/emoji/flag_gq.png
diff --git a/app/assets/images/emoji/flag_gr.png b/app/assets/images/emoji/flag_gr.png
new file mode 100644
index 00000000000..0f6bb1b6b94
--- /dev/null
+++ b/app/assets/images/emoji/flag_gr.png
diff --git a/app/assets/images/emoji/flag_gs.png b/app/assets/images/emoji/flag_gs.png
new file mode 100644
index 00000000000..6fc92780453
--- /dev/null
+++ b/app/assets/images/emoji/flag_gs.png
diff --git a/app/assets/images/emoji/flag_gt.png b/app/assets/images/emoji/flag_gt.png
new file mode 100644
index 00000000000..7213d4139ed
--- /dev/null
+++ b/app/assets/images/emoji/flag_gt.png
diff --git a/app/assets/images/emoji/flag_gu.png b/app/assets/images/emoji/flag_gu.png
new file mode 100644
index 00000000000..4027549ca3c
--- /dev/null
+++ b/app/assets/images/emoji/flag_gu.png
diff --git a/app/assets/images/emoji/flag_gw.png b/app/assets/images/emoji/flag_gw.png
new file mode 100644
index 00000000000..6357f6225f4
--- /dev/null
+++ b/app/assets/images/emoji/flag_gw.png
diff --git a/app/assets/images/emoji/flag_gy.png b/app/assets/images/emoji/flag_gy.png
new file mode 100644
index 00000000000..746e2fb7e44
--- /dev/null
+++ b/app/assets/images/emoji/flag_gy.png
diff --git a/app/assets/images/emoji/flag_hk.png b/app/assets/images/emoji/flag_hk.png
new file mode 100644
index 00000000000..cf0c7151b56
--- /dev/null
+++ b/app/assets/images/emoji/flag_hk.png
diff --git a/app/assets/images/emoji/flag_hm.png b/app/assets/images/emoji/flag_hm.png
new file mode 100644
index 00000000000..b613509e466
--- /dev/null
+++ b/app/assets/images/emoji/flag_hm.png
diff --git a/app/assets/images/emoji/flag_hn.png b/app/assets/images/emoji/flag_hn.png
new file mode 100644
index 00000000000..402cdcefdf8
--- /dev/null
+++ b/app/assets/images/emoji/flag_hn.png
diff --git a/app/assets/images/emoji/flag_hr.png b/app/assets/images/emoji/flag_hr.png
new file mode 100644
index 00000000000..46f4f06b4f2
--- /dev/null
+++ b/app/assets/images/emoji/flag_hr.png
diff --git a/app/assets/images/emoji/flag_ht.png b/app/assets/images/emoji/flag_ht.png
new file mode 100644
index 00000000000..d8d0c888498
--- /dev/null
+++ b/app/assets/images/emoji/flag_ht.png
diff --git a/app/assets/images/emoji/flag_hu.png b/app/assets/images/emoji/flag_hu.png
new file mode 100644
index 00000000000..a898de636a5
--- /dev/null
+++ b/app/assets/images/emoji/flag_hu.png
diff --git a/app/assets/images/emoji/flag_ic.png b/app/assets/images/emoji/flag_ic.png
new file mode 100644
index 00000000000..69fd990aa95
--- /dev/null
+++ b/app/assets/images/emoji/flag_ic.png
diff --git a/app/assets/images/emoji/flag_id.png b/app/assets/images/emoji/flag_id.png
new file mode 100644
index 00000000000..85b4c063a45
--- /dev/null
+++ b/app/assets/images/emoji/flag_id.png
diff --git a/app/assets/images/emoji/flag_ie.png b/app/assets/images/emoji/flag_ie.png
new file mode 100644
index 00000000000..a28295838cc
--- /dev/null
+++ b/app/assets/images/emoji/flag_ie.png
diff --git a/app/assets/images/emoji/flag_il.png b/app/assets/images/emoji/flag_il.png
new file mode 100644
index 00000000000..85c410d45fb
--- /dev/null
+++ b/app/assets/images/emoji/flag_il.png
diff --git a/app/assets/images/emoji/flag_im.png b/app/assets/images/emoji/flag_im.png
new file mode 100644
index 00000000000..60a2458e38e
--- /dev/null
+++ b/app/assets/images/emoji/flag_im.png
diff --git a/app/assets/images/emoji/flag_in.png b/app/assets/images/emoji/flag_in.png
new file mode 100644
index 00000000000..feccc8952ce
--- /dev/null
+++ b/app/assets/images/emoji/flag_in.png
diff --git a/app/assets/images/emoji/flag_io.png b/app/assets/images/emoji/flag_io.png
new file mode 100644
index 00000000000..aae927d14b8
--- /dev/null
+++ b/app/assets/images/emoji/flag_io.png
diff --git a/app/assets/images/emoji/flag_iq.png b/app/assets/images/emoji/flag_iq.png
new file mode 100644
index 00000000000..41fd1db6f86
--- /dev/null
+++ b/app/assets/images/emoji/flag_iq.png
diff --git a/app/assets/images/emoji/flag_ir.png b/app/assets/images/emoji/flag_ir.png
new file mode 100644
index 00000000000..ff7aaf62ba6
--- /dev/null
+++ b/app/assets/images/emoji/flag_ir.png
diff --git a/app/assets/images/emoji/flag_is.png b/app/assets/images/emoji/flag_is.png
new file mode 100644
index 00000000000..ad8d4131dd2
--- /dev/null
+++ b/app/assets/images/emoji/flag_is.png
diff --git a/app/assets/images/emoji/flag_it.png b/app/assets/images/emoji/flag_it.png
new file mode 100644
index 00000000000..f21563ec533
--- /dev/null
+++ b/app/assets/images/emoji/flag_it.png
diff --git a/app/assets/images/emoji/flag_je.png b/app/assets/images/emoji/flag_je.png
new file mode 100644
index 00000000000..198a918f6a4
--- /dev/null
+++ b/app/assets/images/emoji/flag_je.png
diff --git a/app/assets/images/emoji/flag_jm.png b/app/assets/images/emoji/flag_jm.png
new file mode 100644
index 00000000000..f84e4f9e8db
--- /dev/null
+++ b/app/assets/images/emoji/flag_jm.png
diff --git a/app/assets/images/emoji/flag_jo.png b/app/assets/images/emoji/flag_jo.png
new file mode 100644
index 00000000000..20bfa147e3e
--- /dev/null
+++ b/app/assets/images/emoji/flag_jo.png
diff --git a/app/assets/images/emoji/flag_jp.png b/app/assets/images/emoji/flag_jp.png
new file mode 100644
index 00000000000..8d8838e4708
--- /dev/null
+++ b/app/assets/images/emoji/flag_jp.png
diff --git a/app/assets/images/emoji/flag_ke.png b/app/assets/images/emoji/flag_ke.png
new file mode 100644
index 00000000000..9e417ab3009
--- /dev/null
+++ b/app/assets/images/emoji/flag_ke.png
diff --git a/app/assets/images/emoji/flag_kg.png b/app/assets/images/emoji/flag_kg.png
new file mode 100644
index 00000000000..2f2d848fe58
--- /dev/null
+++ b/app/assets/images/emoji/flag_kg.png
diff --git a/app/assets/images/emoji/flag_kh.png b/app/assets/images/emoji/flag_kh.png
new file mode 100644
index 00000000000..9a2877dd620
--- /dev/null
+++ b/app/assets/images/emoji/flag_kh.png
diff --git a/app/assets/images/emoji/flag_ki.png b/app/assets/images/emoji/flag_ki.png
new file mode 100644
index 00000000000..10e507e3245
--- /dev/null
+++ b/app/assets/images/emoji/flag_ki.png
diff --git a/app/assets/images/emoji/flag_km.png b/app/assets/images/emoji/flag_km.png
new file mode 100644
index 00000000000..bd5a0588e03
--- /dev/null
+++ b/app/assets/images/emoji/flag_km.png
diff --git a/app/assets/images/emoji/flag_kn.png b/app/assets/images/emoji/flag_kn.png
new file mode 100644
index 00000000000..776207c9605
--- /dev/null
+++ b/app/assets/images/emoji/flag_kn.png
diff --git a/app/assets/images/emoji/flag_kp.png b/app/assets/images/emoji/flag_kp.png
new file mode 100644
index 00000000000..6b3fd89eaaa
--- /dev/null
+++ b/app/assets/images/emoji/flag_kp.png
diff --git a/app/assets/images/emoji/flag_kr.png b/app/assets/images/emoji/flag_kr.png
new file mode 100644
index 00000000000..833a88116e1
--- /dev/null
+++ b/app/assets/images/emoji/flag_kr.png
diff --git a/app/assets/images/emoji/flag_kw.png b/app/assets/images/emoji/flag_kw.png
new file mode 100644
index 00000000000..4d19bfa6ca7
--- /dev/null
+++ b/app/assets/images/emoji/flag_kw.png
diff --git a/app/assets/images/emoji/flag_ky.png b/app/assets/images/emoji/flag_ky.png
new file mode 100644
index 00000000000..40daa4da597
--- /dev/null
+++ b/app/assets/images/emoji/flag_ky.png
diff --git a/app/assets/images/emoji/flag_kz.png b/app/assets/images/emoji/flag_kz.png
new file mode 100644
index 00000000000..2f97a8fd3c6
--- /dev/null
+++ b/app/assets/images/emoji/flag_kz.png
diff --git a/app/assets/images/emoji/flag_la.png b/app/assets/images/emoji/flag_la.png
new file mode 100644
index 00000000000..4d4179f34f6
--- /dev/null
+++ b/app/assets/images/emoji/flag_la.png
diff --git a/app/assets/images/emoji/flag_lb.png b/app/assets/images/emoji/flag_lb.png
new file mode 100644
index 00000000000..3d594467011
--- /dev/null
+++ b/app/assets/images/emoji/flag_lb.png
diff --git a/app/assets/images/emoji/flag_lc.png b/app/assets/images/emoji/flag_lc.png
new file mode 100644
index 00000000000..45547b1e439
--- /dev/null
+++ b/app/assets/images/emoji/flag_lc.png
diff --git a/app/assets/images/emoji/flag_li.png b/app/assets/images/emoji/flag_li.png
new file mode 100644
index 00000000000..0eafa6a2215
--- /dev/null
+++ b/app/assets/images/emoji/flag_li.png
diff --git a/app/assets/images/emoji/flag_lk.png b/app/assets/images/emoji/flag_lk.png
new file mode 100644
index 00000000000..ab4fe10c40c
--- /dev/null
+++ b/app/assets/images/emoji/flag_lk.png
diff --git a/app/assets/images/emoji/flag_lr.png b/app/assets/images/emoji/flag_lr.png
new file mode 100644
index 00000000000..f66f267fea2
--- /dev/null
+++ b/app/assets/images/emoji/flag_lr.png
diff --git a/app/assets/images/emoji/flag_ls.png b/app/assets/images/emoji/flag_ls.png
new file mode 100644
index 00000000000..24745631e3c
--- /dev/null
+++ b/app/assets/images/emoji/flag_ls.png
diff --git a/app/assets/images/emoji/flag_lt.png b/app/assets/images/emoji/flag_lt.png
new file mode 100644
index 00000000000..d644b56d62a
--- /dev/null
+++ b/app/assets/images/emoji/flag_lt.png
diff --git a/app/assets/images/emoji/flag_lu.png b/app/assets/images/emoji/flag_lu.png
new file mode 100644
index 00000000000..a2df9c92994
--- /dev/null
+++ b/app/assets/images/emoji/flag_lu.png
diff --git a/app/assets/images/emoji/flag_lv.png b/app/assets/images/emoji/flag_lv.png
new file mode 100644
index 00000000000..ae680d5f0e3
--- /dev/null
+++ b/app/assets/images/emoji/flag_lv.png
diff --git a/app/assets/images/emoji/flag_ly.png b/app/assets/images/emoji/flag_ly.png
new file mode 100644
index 00000000000..f6e77b0f3ba
--- /dev/null
+++ b/app/assets/images/emoji/flag_ly.png
diff --git a/app/assets/images/emoji/flag_ma.png b/app/assets/images/emoji/flag_ma.png
new file mode 100644
index 00000000000..c4a056722cd
--- /dev/null
+++ b/app/assets/images/emoji/flag_ma.png
diff --git a/app/assets/images/emoji/flag_mc.png b/app/assets/images/emoji/flag_mc.png
new file mode 100644
index 00000000000..d479eab98cb
--- /dev/null
+++ b/app/assets/images/emoji/flag_mc.png
diff --git a/app/assets/images/emoji/flag_md.png b/app/assets/images/emoji/flag_md.png
new file mode 100644
index 00000000000..a7a72539872
--- /dev/null
+++ b/app/assets/images/emoji/flag_md.png
diff --git a/app/assets/images/emoji/flag_me.png b/app/assets/images/emoji/flag_me.png
new file mode 100644
index 00000000000..7c771e7e120
--- /dev/null
+++ b/app/assets/images/emoji/flag_me.png
diff --git a/app/assets/images/emoji/flag_mf.png b/app/assets/images/emoji/flag_mf.png
new file mode 100644
index 00000000000..70c761036bd
--- /dev/null
+++ b/app/assets/images/emoji/flag_mf.png
diff --git a/app/assets/images/emoji/flag_mg.png b/app/assets/images/emoji/flag_mg.png
new file mode 100644
index 00000000000..2f3ccdda76f
--- /dev/null
+++ b/app/assets/images/emoji/flag_mg.png
diff --git a/app/assets/images/emoji/flag_mh.png b/app/assets/images/emoji/flag_mh.png
new file mode 100644
index 00000000000..598016481c1
--- /dev/null
+++ b/app/assets/images/emoji/flag_mh.png
diff --git a/app/assets/images/emoji/flag_mk.png b/app/assets/images/emoji/flag_mk.png
new file mode 100644
index 00000000000..7ba775ee75c
--- /dev/null
+++ b/app/assets/images/emoji/flag_mk.png
diff --git a/app/assets/images/emoji/flag_ml.png b/app/assets/images/emoji/flag_ml.png
new file mode 100644
index 00000000000..68343785468
--- /dev/null
+++ b/app/assets/images/emoji/flag_ml.png
diff --git a/app/assets/images/emoji/flag_mm.png b/app/assets/images/emoji/flag_mm.png
new file mode 100644
index 00000000000..37dc7d71591
--- /dev/null
+++ b/app/assets/images/emoji/flag_mm.png
diff --git a/app/assets/images/emoji/flag_mn.png b/app/assets/images/emoji/flag_mn.png
new file mode 100644
index 00000000000..1f146bbcd1a
--- /dev/null
+++ b/app/assets/images/emoji/flag_mn.png
diff --git a/app/assets/images/emoji/flag_mo.png b/app/assets/images/emoji/flag_mo.png
new file mode 100644
index 00000000000..7edde31f64b
--- /dev/null
+++ b/app/assets/images/emoji/flag_mo.png
diff --git a/app/assets/images/emoji/flag_mp.png b/app/assets/images/emoji/flag_mp.png
new file mode 100644
index 00000000000..17ec1c441ed
--- /dev/null
+++ b/app/assets/images/emoji/flag_mp.png
diff --git a/app/assets/images/emoji/flag_mq.png b/app/assets/images/emoji/flag_mq.png
new file mode 100644
index 00000000000..1e672dc9087
--- /dev/null
+++ b/app/assets/images/emoji/flag_mq.png
diff --git a/app/assets/images/emoji/flag_mr.png b/app/assets/images/emoji/flag_mr.png
new file mode 100644
index 00000000000..f87de46effe
--- /dev/null
+++ b/app/assets/images/emoji/flag_mr.png
diff --git a/app/assets/images/emoji/flag_ms.png b/app/assets/images/emoji/flag_ms.png
new file mode 100644
index 00000000000..480b0d4ebda
--- /dev/null
+++ b/app/assets/images/emoji/flag_ms.png
diff --git a/app/assets/images/emoji/flag_mt.png b/app/assets/images/emoji/flag_mt.png
new file mode 100644
index 00000000000..c9e1dbdce82
--- /dev/null
+++ b/app/assets/images/emoji/flag_mt.png
diff --git a/app/assets/images/emoji/flag_mu.png b/app/assets/images/emoji/flag_mu.png
new file mode 100644
index 00000000000..55b33cb7c33
--- /dev/null
+++ b/app/assets/images/emoji/flag_mu.png
diff --git a/app/assets/images/emoji/flag_mv.png b/app/assets/images/emoji/flag_mv.png
new file mode 100644
index 00000000000..ce5867126ae
--- /dev/null
+++ b/app/assets/images/emoji/flag_mv.png
diff --git a/app/assets/images/emoji/flag_mw.png b/app/assets/images/emoji/flag_mw.png
new file mode 100644
index 00000000000..003d8548401
--- /dev/null
+++ b/app/assets/images/emoji/flag_mw.png
diff --git a/app/assets/images/emoji/flag_mx.png b/app/assets/images/emoji/flag_mx.png
new file mode 100644
index 00000000000..42572bcd0ba
--- /dev/null
+++ b/app/assets/images/emoji/flag_mx.png
diff --git a/app/assets/images/emoji/flag_my.png b/app/assets/images/emoji/flag_my.png
new file mode 100644
index 00000000000..17526c26742
--- /dev/null
+++ b/app/assets/images/emoji/flag_my.png
diff --git a/app/assets/images/emoji/flag_mz.png b/app/assets/images/emoji/flag_mz.png
new file mode 100644
index 00000000000..2352a78e786
--- /dev/null
+++ b/app/assets/images/emoji/flag_mz.png
diff --git a/app/assets/images/emoji/flag_na.png b/app/assets/images/emoji/flag_na.png
new file mode 100644
index 00000000000..ed31c3df04d
--- /dev/null
+++ b/app/assets/images/emoji/flag_na.png
diff --git a/app/assets/images/emoji/flag_nc.png b/app/assets/images/emoji/flag_nc.png
new file mode 100644
index 00000000000..90b3afebfa3
--- /dev/null
+++ b/app/assets/images/emoji/flag_nc.png
diff --git a/app/assets/images/emoji/flag_ne.png b/app/assets/images/emoji/flag_ne.png
new file mode 100644
index 00000000000..f98a1173c2a
--- /dev/null
+++ b/app/assets/images/emoji/flag_ne.png
diff --git a/app/assets/images/emoji/flag_nf.png b/app/assets/images/emoji/flag_nf.png
new file mode 100644
index 00000000000..9099e767420
--- /dev/null
+++ b/app/assets/images/emoji/flag_nf.png
diff --git a/app/assets/images/emoji/flag_ng.png b/app/assets/images/emoji/flag_ng.png
new file mode 100644
index 00000000000..ea0abeff1a1
--- /dev/null
+++ b/app/assets/images/emoji/flag_ng.png
diff --git a/app/assets/images/emoji/flag_ni.png b/app/assets/images/emoji/flag_ni.png
new file mode 100644
index 00000000000..772920dfa10
--- /dev/null
+++ b/app/assets/images/emoji/flag_ni.png
diff --git a/app/assets/images/emoji/flag_nl.png b/app/assets/images/emoji/flag_nl.png
new file mode 100644
index 00000000000..83a0e817e41
--- /dev/null
+++ b/app/assets/images/emoji/flag_nl.png
diff --git a/app/assets/images/emoji/flag_no.png b/app/assets/images/emoji/flag_no.png
new file mode 100644
index 00000000000..99d3142eb7b
--- /dev/null
+++ b/app/assets/images/emoji/flag_no.png
diff --git a/app/assets/images/emoji/flag_np.png b/app/assets/images/emoji/flag_np.png
new file mode 100644
index 00000000000..87425a8dfef
--- /dev/null
+++ b/app/assets/images/emoji/flag_np.png
diff --git a/app/assets/images/emoji/flag_nr.png b/app/assets/images/emoji/flag_nr.png
new file mode 100644
index 00000000000..b3e3a5d5621
--- /dev/null
+++ b/app/assets/images/emoji/flag_nr.png
diff --git a/app/assets/images/emoji/flag_nu.png b/app/assets/images/emoji/flag_nu.png
new file mode 100644
index 00000000000..f03614443ee
--- /dev/null
+++ b/app/assets/images/emoji/flag_nu.png
diff --git a/app/assets/images/emoji/flag_nz.png b/app/assets/images/emoji/flag_nz.png
new file mode 100644
index 00000000000..a4eeeab9cd9
--- /dev/null
+++ b/app/assets/images/emoji/flag_nz.png
diff --git a/app/assets/images/emoji/flag_om.png b/app/assets/images/emoji/flag_om.png
new file mode 100644
index 00000000000..ea824ba31e7
--- /dev/null
+++ b/app/assets/images/emoji/flag_om.png
diff --git a/app/assets/images/emoji/flag_pa.png b/app/assets/images/emoji/flag_pa.png
new file mode 100644
index 00000000000..c3091d89889
--- /dev/null
+++ b/app/assets/images/emoji/flag_pa.png
diff --git a/app/assets/images/emoji/flag_pe.png b/app/assets/images/emoji/flag_pe.png
new file mode 100644
index 00000000000..39223aa9dbb
--- /dev/null
+++ b/app/assets/images/emoji/flag_pe.png
diff --git a/app/assets/images/emoji/flag_pf.png b/app/assets/images/emoji/flag_pf.png
new file mode 100644
index 00000000000..113445f8f6e
--- /dev/null
+++ b/app/assets/images/emoji/flag_pf.png
diff --git a/app/assets/images/emoji/flag_pg.png b/app/assets/images/emoji/flag_pg.png
new file mode 100644
index 00000000000..825e9dcb762
--- /dev/null
+++ b/app/assets/images/emoji/flag_pg.png
diff --git a/app/assets/images/emoji/flag_ph.png b/app/assets/images/emoji/flag_ph.png
new file mode 100644
index 00000000000..8260e15bd2c
--- /dev/null
+++ b/app/assets/images/emoji/flag_ph.png
diff --git a/app/assets/images/emoji/flag_pk.png b/app/assets/images/emoji/flag_pk.png
new file mode 100644
index 00000000000..a7b6a1c5074
--- /dev/null
+++ b/app/assets/images/emoji/flag_pk.png
diff --git a/app/assets/images/emoji/flag_pl.png b/app/assets/images/emoji/flag_pl.png
new file mode 100644
index 00000000000..19de2edec11
--- /dev/null
+++ b/app/assets/images/emoji/flag_pl.png
diff --git a/app/assets/images/emoji/flag_pm.png b/app/assets/images/emoji/flag_pm.png
new file mode 100644
index 00000000000..2ca60554193
--- /dev/null
+++ b/app/assets/images/emoji/flag_pm.png
diff --git a/app/assets/images/emoji/flag_pn.png b/app/assets/images/emoji/flag_pn.png
new file mode 100644
index 00000000000..f2263b154bc
--- /dev/null
+++ b/app/assets/images/emoji/flag_pn.png
diff --git a/app/assets/images/emoji/flag_pr.png b/app/assets/images/emoji/flag_pr.png
new file mode 100644
index 00000000000..d0209cddb79
--- /dev/null
+++ b/app/assets/images/emoji/flag_pr.png
diff --git a/app/assets/images/emoji/flag_ps.png b/app/assets/images/emoji/flag_ps.png
new file mode 100644
index 00000000000..7ccab09778b
--- /dev/null
+++ b/app/assets/images/emoji/flag_ps.png
diff --git a/app/assets/images/emoji/flag_pt.png b/app/assets/images/emoji/flag_pt.png
new file mode 100644
index 00000000000..cc93f27c64b
--- /dev/null
+++ b/app/assets/images/emoji/flag_pt.png
diff --git a/app/assets/images/emoji/flag_pw.png b/app/assets/images/emoji/flag_pw.png
new file mode 100644
index 00000000000..154b2f12d3c
--- /dev/null
+++ b/app/assets/images/emoji/flag_pw.png
diff --git a/app/assets/images/emoji/flag_py.png b/app/assets/images/emoji/flag_py.png
new file mode 100644
index 00000000000..662ad2f6ff1
--- /dev/null
+++ b/app/assets/images/emoji/flag_py.png
diff --git a/app/assets/images/emoji/flag_qa.png b/app/assets/images/emoji/flag_qa.png
new file mode 100644
index 00000000000..a01d8b05cc7
--- /dev/null
+++ b/app/assets/images/emoji/flag_qa.png
diff --git a/app/assets/images/emoji/flag_re.png b/app/assets/images/emoji/flag_re.png
new file mode 100644
index 00000000000..57f2bbe9df8
--- /dev/null
+++ b/app/assets/images/emoji/flag_re.png
diff --git a/app/assets/images/emoji/flag_ro.png b/app/assets/images/emoji/flag_ro.png
new file mode 100644
index 00000000000..3e48c447706
--- /dev/null
+++ b/app/assets/images/emoji/flag_ro.png
diff --git a/app/assets/images/emoji/flag_rs.png b/app/assets/images/emoji/flag_rs.png
new file mode 100644
index 00000000000..9df6c9a5235
--- /dev/null
+++ b/app/assets/images/emoji/flag_rs.png
diff --git a/app/assets/images/emoji/flag_ru.png b/app/assets/images/emoji/flag_ru.png
new file mode 100644
index 00000000000..e50c9db90e7
--- /dev/null
+++ b/app/assets/images/emoji/flag_ru.png
diff --git a/app/assets/images/emoji/flag_rw.png b/app/assets/images/emoji/flag_rw.png
new file mode 100644
index 00000000000..c238c874e1d
--- /dev/null
+++ b/app/assets/images/emoji/flag_rw.png
diff --git a/app/assets/images/emoji/flag_sa.png b/app/assets/images/emoji/flag_sa.png
new file mode 100644
index 00000000000..4941be7d198
--- /dev/null
+++ b/app/assets/images/emoji/flag_sa.png
diff --git a/app/assets/images/emoji/flag_sb.png b/app/assets/images/emoji/flag_sb.png
new file mode 100644
index 00000000000..7d8f1ac6130
--- /dev/null
+++ b/app/assets/images/emoji/flag_sb.png
diff --git a/app/assets/images/emoji/flag_sc.png b/app/assets/images/emoji/flag_sc.png
new file mode 100644
index 00000000000..6ae4d90765e
--- /dev/null
+++ b/app/assets/images/emoji/flag_sc.png
diff --git a/app/assets/images/emoji/flag_sd.png b/app/assets/images/emoji/flag_sd.png
new file mode 100644
index 00000000000..963be1b36fb
--- /dev/null
+++ b/app/assets/images/emoji/flag_sd.png
diff --git a/app/assets/images/emoji/flag_se.png b/app/assets/images/emoji/flag_se.png
new file mode 100644
index 00000000000..fc0d0e0ce89
--- /dev/null
+++ b/app/assets/images/emoji/flag_se.png
diff --git a/app/assets/images/emoji/flag_sg.png b/app/assets/images/emoji/flag_sg.png
new file mode 100644
index 00000000000..de3c7737c42
--- /dev/null
+++ b/app/assets/images/emoji/flag_sg.png
diff --git a/app/assets/images/emoji/flag_sh.png b/app/assets/images/emoji/flag_sh.png
new file mode 100644
index 00000000000..40cd9e44e96
--- /dev/null
+++ b/app/assets/images/emoji/flag_sh.png
diff --git a/app/assets/images/emoji/flag_si.png b/app/assets/images/emoji/flag_si.png
new file mode 100644
index 00000000000..e308999dba2
--- /dev/null
+++ b/app/assets/images/emoji/flag_si.png
diff --git a/app/assets/images/emoji/flag_sj.png b/app/assets/images/emoji/flag_sj.png
new file mode 100644
index 00000000000..5884e648228
--- /dev/null
+++ b/app/assets/images/emoji/flag_sj.png
diff --git a/app/assets/images/emoji/flag_sk.png b/app/assets/images/emoji/flag_sk.png
new file mode 100644
index 00000000000..4259d0e1418
--- /dev/null
+++ b/app/assets/images/emoji/flag_sk.png
diff --git a/app/assets/images/emoji/flag_sl.png b/app/assets/images/emoji/flag_sl.png
new file mode 100644
index 00000000000..d2cc68830ab
--- /dev/null
+++ b/app/assets/images/emoji/flag_sl.png
diff --git a/app/assets/images/emoji/flag_sm.png b/app/assets/images/emoji/flag_sm.png
new file mode 100644
index 00000000000..03b8708754e
--- /dev/null
+++ b/app/assets/images/emoji/flag_sm.png
diff --git a/app/assets/images/emoji/flag_sn.png b/app/assets/images/emoji/flag_sn.png
new file mode 100644
index 00000000000..5368bbe93df
--- /dev/null
+++ b/app/assets/images/emoji/flag_sn.png
diff --git a/app/assets/images/emoji/flag_so.png b/app/assets/images/emoji/flag_so.png
new file mode 100644
index 00000000000..68a0597365a
--- /dev/null
+++ b/app/assets/images/emoji/flag_so.png
diff --git a/app/assets/images/emoji/flag_sr.png b/app/assets/images/emoji/flag_sr.png
new file mode 100644
index 00000000000..d3251327035
--- /dev/null
+++ b/app/assets/images/emoji/flag_sr.png
diff --git a/app/assets/images/emoji/flag_ss.png b/app/assets/images/emoji/flag_ss.png
new file mode 100644
index 00000000000..122977e798f
--- /dev/null
+++ b/app/assets/images/emoji/flag_ss.png
diff --git a/app/assets/images/emoji/flag_st.png b/app/assets/images/emoji/flag_st.png
new file mode 100644
index 00000000000..f83a863d612
--- /dev/null
+++ b/app/assets/images/emoji/flag_st.png
diff --git a/app/assets/images/emoji/flag_sv.png b/app/assets/images/emoji/flag_sv.png
new file mode 100644
index 00000000000..efb83e2f253
--- /dev/null
+++ b/app/assets/images/emoji/flag_sv.png
diff --git a/app/assets/images/emoji/flag_sx.png b/app/assets/images/emoji/flag_sx.png
new file mode 100644
index 00000000000..94b760fbedf
--- /dev/null
+++ b/app/assets/images/emoji/flag_sx.png
diff --git a/app/assets/images/emoji/flag_sy.png b/app/assets/images/emoji/flag_sy.png
new file mode 100644
index 00000000000..09a8ee8f78c
--- /dev/null
+++ b/app/assets/images/emoji/flag_sy.png
diff --git a/app/assets/images/emoji/flag_sz.png b/app/assets/images/emoji/flag_sz.png
new file mode 100644
index 00000000000..f74e82ea1fd
--- /dev/null
+++ b/app/assets/images/emoji/flag_sz.png
diff --git a/app/assets/images/emoji/flag_ta.png b/app/assets/images/emoji/flag_ta.png
new file mode 100644
index 00000000000..b44283e90e2
--- /dev/null
+++ b/app/assets/images/emoji/flag_ta.png
diff --git a/app/assets/images/emoji/flag_tc.png b/app/assets/images/emoji/flag_tc.png
new file mode 100644
index 00000000000..156b33d1ba6
--- /dev/null
+++ b/app/assets/images/emoji/flag_tc.png
diff --git a/app/assets/images/emoji/flag_td.png b/app/assets/images/emoji/flag_td.png
new file mode 100644
index 00000000000..ebe7f592828
--- /dev/null
+++ b/app/assets/images/emoji/flag_td.png
diff --git a/app/assets/images/emoji/flag_tf.png b/app/assets/images/emoji/flag_tf.png
new file mode 100644
index 00000000000..a1a3ad68ee2
--- /dev/null
+++ b/app/assets/images/emoji/flag_tf.png
diff --git a/app/assets/images/emoji/flag_tg.png b/app/assets/images/emoji/flag_tg.png
new file mode 100644
index 00000000000..826b73c9ac5
--- /dev/null
+++ b/app/assets/images/emoji/flag_tg.png
diff --git a/app/assets/images/emoji/flag_th.png b/app/assets/images/emoji/flag_th.png
new file mode 100644
index 00000000000..93ff542c5a6
--- /dev/null
+++ b/app/assets/images/emoji/flag_th.png
diff --git a/app/assets/images/emoji/flag_tj.png b/app/assets/images/emoji/flag_tj.png
new file mode 100644
index 00000000000..7a8a0b6190a
--- /dev/null
+++ b/app/assets/images/emoji/flag_tj.png
diff --git a/app/assets/images/emoji/flag_tk.png b/app/assets/images/emoji/flag_tk.png
new file mode 100644
index 00000000000..2fa5a21b1bb
--- /dev/null
+++ b/app/assets/images/emoji/flag_tk.png
diff --git a/app/assets/images/emoji/flag_tl.png b/app/assets/images/emoji/flag_tl.png
new file mode 100644
index 00000000000..5b120eccc6f
--- /dev/null
+++ b/app/assets/images/emoji/flag_tl.png
diff --git a/app/assets/images/emoji/flag_tm.png b/app/assets/images/emoji/flag_tm.png
new file mode 100644
index 00000000000..c3c4f532302
--- /dev/null
+++ b/app/assets/images/emoji/flag_tm.png
diff --git a/app/assets/images/emoji/flag_tn.png b/app/assets/images/emoji/flag_tn.png
new file mode 100644
index 00000000000..58ef161229f
--- /dev/null
+++ b/app/assets/images/emoji/flag_tn.png
diff --git a/app/assets/images/emoji/flag_to.png b/app/assets/images/emoji/flag_to.png
new file mode 100644
index 00000000000..1ffa7bb9d19
--- /dev/null
+++ b/app/assets/images/emoji/flag_to.png
diff --git a/app/assets/images/emoji/flag_tr.png b/app/assets/images/emoji/flag_tr.png
new file mode 100644
index 00000000000..325251fae88
--- /dev/null
+++ b/app/assets/images/emoji/flag_tr.png
diff --git a/app/assets/images/emoji/flag_tt.png b/app/assets/images/emoji/flag_tt.png
new file mode 100644
index 00000000000..ed3bb39a300
--- /dev/null
+++ b/app/assets/images/emoji/flag_tt.png
diff --git a/app/assets/images/emoji/flag_tv.png b/app/assets/images/emoji/flag_tv.png
new file mode 100644
index 00000000000..e82c65c7bb9
--- /dev/null
+++ b/app/assets/images/emoji/flag_tv.png
diff --git a/app/assets/images/emoji/flag_tw.png b/app/assets/images/emoji/flag_tw.png
new file mode 100644
index 00000000000..3a8f00b5928
--- /dev/null
+++ b/app/assets/images/emoji/flag_tw.png
diff --git a/app/assets/images/emoji/flag_tz.png b/app/assets/images/emoji/flag_tz.png
new file mode 100644
index 00000000000..2a020853d4e
--- /dev/null
+++ b/app/assets/images/emoji/flag_tz.png
diff --git a/app/assets/images/emoji/flag_ua.png b/app/assets/images/emoji/flag_ua.png
new file mode 100644
index 00000000000..cd84d1bbd36
--- /dev/null
+++ b/app/assets/images/emoji/flag_ua.png
diff --git a/app/assets/images/emoji/flag_ug.png b/app/assets/images/emoji/flag_ug.png
new file mode 100644
index 00000000000..dc97690eb55
--- /dev/null
+++ b/app/assets/images/emoji/flag_ug.png
diff --git a/app/assets/images/emoji/flag_um.png b/app/assets/images/emoji/flag_um.png
new file mode 100644
index 00000000000..4a7ee3cdf13
--- /dev/null
+++ b/app/assets/images/emoji/flag_um.png
diff --git a/app/assets/images/emoji/flag_us.png b/app/assets/images/emoji/flag_us.png
new file mode 100644
index 00000000000..9f730305860
--- /dev/null
+++ b/app/assets/images/emoji/flag_us.png
diff --git a/app/assets/images/emoji/flag_uy.png b/app/assets/images/emoji/flag_uy.png
new file mode 100644
index 00000000000..b8002a697a6
--- /dev/null
+++ b/app/assets/images/emoji/flag_uy.png
diff --git a/app/assets/images/emoji/flag_uz.png b/app/assets/images/emoji/flag_uz.png
new file mode 100644
index 00000000000..d56ca9bc424
--- /dev/null
+++ b/app/assets/images/emoji/flag_uz.png
diff --git a/app/assets/images/emoji/flag_va.png b/app/assets/images/emoji/flag_va.png
new file mode 100644
index 00000000000..ddaf5e3141b
--- /dev/null
+++ b/app/assets/images/emoji/flag_va.png
diff --git a/app/assets/images/emoji/flag_vc.png b/app/assets/images/emoji/flag_vc.png
new file mode 100644
index 00000000000..43703c62a71
--- /dev/null
+++ b/app/assets/images/emoji/flag_vc.png
diff --git a/app/assets/images/emoji/flag_ve.png b/app/assets/images/emoji/flag_ve.png
new file mode 100644
index 00000000000..1b62796824e
--- /dev/null
+++ b/app/assets/images/emoji/flag_ve.png
diff --git a/app/assets/images/emoji/flag_vg.png b/app/assets/images/emoji/flag_vg.png
new file mode 100644
index 00000000000..536f780f1c0
--- /dev/null
+++ b/app/assets/images/emoji/flag_vg.png
diff --git a/app/assets/images/emoji/flag_vi.png b/app/assets/images/emoji/flag_vi.png
new file mode 100644
index 00000000000..64102012cfe
--- /dev/null
+++ b/app/assets/images/emoji/flag_vi.png
diff --git a/app/assets/images/emoji/flag_vn.png b/app/assets/images/emoji/flag_vn.png
new file mode 100644
index 00000000000..427036046b6
--- /dev/null
+++ b/app/assets/images/emoji/flag_vn.png
diff --git a/app/assets/images/emoji/flag_vu.png b/app/assets/images/emoji/flag_vu.png
new file mode 100644
index 00000000000..706eba44070
--- /dev/null
+++ b/app/assets/images/emoji/flag_vu.png
diff --git a/app/assets/images/emoji/flag_wf.png b/app/assets/images/emoji/flag_wf.png
new file mode 100644
index 00000000000..70c761036bd
--- /dev/null
+++ b/app/assets/images/emoji/flag_wf.png
diff --git a/app/assets/images/emoji/flag_white.png b/app/assets/images/emoji/flag_white.png
new file mode 100644
index 00000000000..86d6e96d5e9
--- /dev/null
+++ b/app/assets/images/emoji/flag_white.png
diff --git a/app/assets/images/emoji/flag_ws.png b/app/assets/images/emoji/flag_ws.png
new file mode 100644
index 00000000000..a1ea0703141
--- /dev/null
+++ b/app/assets/images/emoji/flag_ws.png
diff --git a/app/assets/images/emoji/flag_xk.png b/app/assets/images/emoji/flag_xk.png
new file mode 100644
index 00000000000..e587a446632
--- /dev/null
+++ b/app/assets/images/emoji/flag_xk.png
diff --git a/app/assets/images/emoji/flag_ye.png b/app/assets/images/emoji/flag_ye.png
new file mode 100644
index 00000000000..eadfebd5f67
--- /dev/null
+++ b/app/assets/images/emoji/flag_ye.png
diff --git a/app/assets/images/emoji/flag_yt.png b/app/assets/images/emoji/flag_yt.png
new file mode 100644
index 00000000000..c81fa6d886e
--- /dev/null
+++ b/app/assets/images/emoji/flag_yt.png
diff --git a/app/assets/images/emoji/flag_za.png b/app/assets/images/emoji/flag_za.png
new file mode 100644
index 00000000000..f397ef5072f
--- /dev/null
+++ b/app/assets/images/emoji/flag_za.png
diff --git a/app/assets/images/emoji/flag_zm.png b/app/assets/images/emoji/flag_zm.png
new file mode 100644
index 00000000000..2494a31f662
--- /dev/null
+++ b/app/assets/images/emoji/flag_zm.png
diff --git a/app/assets/images/emoji/flag_zw.png b/app/assets/images/emoji/flag_zw.png
new file mode 100644
index 00000000000..e09b9652be6
--- /dev/null
+++ b/app/assets/images/emoji/flag_zw.png
diff --git a/app/assets/images/emoji/flags.png b/app/assets/images/emoji/flags.png
new file mode 100644
index 00000000000..3b451035a3a
--- /dev/null
+++ b/app/assets/images/emoji/flags.png
diff --git a/app/assets/images/emoji/flashlight.png b/app/assets/images/emoji/flashlight.png
new file mode 100644
index 00000000000..eee36c25067
--- /dev/null
+++ b/app/assets/images/emoji/flashlight.png
diff --git a/app/assets/images/emoji/fleur-de-lis.png b/app/assets/images/emoji/fleur-de-lis.png
new file mode 100644
index 00000000000..c9250d27fa7
--- /dev/null
+++ b/app/assets/images/emoji/fleur-de-lis.png
diff --git a/app/assets/images/emoji/floppy_disk.png b/app/assets/images/emoji/floppy_disk.png
new file mode 100644
index 00000000000..072a76d3c13
--- /dev/null
+++ b/app/assets/images/emoji/floppy_disk.png
diff --git a/app/assets/images/emoji/flower_playing_cards.png b/app/assets/images/emoji/flower_playing_cards.png
new file mode 100644
index 00000000000..6766b044d95
--- /dev/null
+++ b/app/assets/images/emoji/flower_playing_cards.png
diff --git a/app/assets/images/emoji/flushed.png b/app/assets/images/emoji/flushed.png
new file mode 100644
index 00000000000..829220bc470
--- /dev/null
+++ b/app/assets/images/emoji/flushed.png
diff --git a/app/assets/images/emoji/fog.png b/app/assets/images/emoji/fog.png
new file mode 100644
index 00000000000..4e73c2de272
--- /dev/null
+++ b/app/assets/images/emoji/fog.png
diff --git a/app/assets/images/emoji/foggy.png b/app/assets/images/emoji/foggy.png
new file mode 100644
index 00000000000..57702d8d3ac
--- /dev/null
+++ b/app/assets/images/emoji/foggy.png
diff --git a/app/assets/images/emoji/football.png b/app/assets/images/emoji/football.png
new file mode 100644
index 00000000000..10366f41fce
--- /dev/null
+++ b/app/assets/images/emoji/football.png
diff --git a/app/assets/images/emoji/footprints.png b/app/assets/images/emoji/footprints.png
new file mode 100644
index 00000000000..b2673c5a1a8
--- /dev/null
+++ b/app/assets/images/emoji/footprints.png
diff --git a/app/assets/images/emoji/fork_and_knife.png b/app/assets/images/emoji/fork_and_knife.png
new file mode 100644
index 00000000000..09f1feaea1c
--- /dev/null
+++ b/app/assets/images/emoji/fork_and_knife.png
diff --git a/app/assets/images/emoji/fork_knife_plate.png b/app/assets/images/emoji/fork_knife_plate.png
new file mode 100644
index 00000000000..7411755f708
--- /dev/null
+++ b/app/assets/images/emoji/fork_knife_plate.png
diff --git a/app/assets/images/emoji/fountain.png b/app/assets/images/emoji/fountain.png
new file mode 100644
index 00000000000..293f5d91c0f
--- /dev/null
+++ b/app/assets/images/emoji/fountain.png
diff --git a/app/assets/images/emoji/four.png b/app/assets/images/emoji/four.png
new file mode 100644
index 00000000000..b0e914aac45
--- /dev/null
+++ b/app/assets/images/emoji/four.png
diff --git a/app/assets/images/emoji/four_leaf_clover.png b/app/assets/images/emoji/four_leaf_clover.png
new file mode 100644
index 00000000000..fdedfcc2b4e
--- /dev/null
+++ b/app/assets/images/emoji/four_leaf_clover.png
diff --git a/app/assets/images/emoji/fox.png b/app/assets/images/emoji/fox.png
new file mode 100644
index 00000000000..1ab339bf054
--- /dev/null
+++ b/app/assets/images/emoji/fox.png
diff --git a/app/assets/images/emoji/frame_photo.png b/app/assets/images/emoji/frame_photo.png
new file mode 100644
index 00000000000..9fe84607bfd
--- /dev/null
+++ b/app/assets/images/emoji/frame_photo.png
diff --git a/app/assets/images/emoji/free.png b/app/assets/images/emoji/free.png
new file mode 100644
index 00000000000..b71956eb48a
--- /dev/null
+++ b/app/assets/images/emoji/free.png
diff --git a/app/assets/images/emoji/french_bread.png b/app/assets/images/emoji/french_bread.png
new file mode 100644
index 00000000000..4c2c5639822
--- /dev/null
+++ b/app/assets/images/emoji/french_bread.png
diff --git a/app/assets/images/emoji/fried_shrimp.png b/app/assets/images/emoji/fried_shrimp.png
new file mode 100644
index 00000000000..752ba7f1398
--- /dev/null
+++ b/app/assets/images/emoji/fried_shrimp.png
diff --git a/app/assets/images/emoji/fries.png b/app/assets/images/emoji/fries.png
new file mode 100644
index 00000000000..4e2a4caacef
--- /dev/null
+++ b/app/assets/images/emoji/fries.png
diff --git a/app/assets/images/emoji/frog.png b/app/assets/images/emoji/frog.png
new file mode 100644
index 00000000000..8825d1ad577
--- /dev/null
+++ b/app/assets/images/emoji/frog.png
diff --git a/app/assets/images/emoji/frowning.png b/app/assets/images/emoji/frowning.png
new file mode 100644
index 00000000000..43ab6b0a1c1
--- /dev/null
+++ b/app/assets/images/emoji/frowning.png
diff --git a/app/assets/images/emoji/frowning2.png b/app/assets/images/emoji/frowning2.png
new file mode 100644
index 00000000000..6ae71f233b9
--- /dev/null
+++ b/app/assets/images/emoji/frowning2.png
diff --git a/app/assets/images/emoji/fuelpump.png b/app/assets/images/emoji/fuelpump.png
new file mode 100644
index 00000000000..05b18794474
--- /dev/null
+++ b/app/assets/images/emoji/fuelpump.png
diff --git a/app/assets/images/emoji/full_moon.png b/app/assets/images/emoji/full_moon.png
new file mode 100644
index 00000000000..c9a2d6aa7c9
--- /dev/null
+++ b/app/assets/images/emoji/full_moon.png
diff --git a/app/assets/images/emoji/full_moon_with_face.png b/app/assets/images/emoji/full_moon_with_face.png
new file mode 100644
index 00000000000..a5c25bbaf64
--- /dev/null
+++ b/app/assets/images/emoji/full_moon_with_face.png
diff --git a/app/assets/images/emoji/game_die.png b/app/assets/images/emoji/game_die.png
new file mode 100644
index 00000000000..ad3626fe5e5
--- /dev/null
+++ b/app/assets/images/emoji/game_die.png
diff --git a/app/assets/images/emoji/gear.png b/app/assets/images/emoji/gear.png
new file mode 100644
index 00000000000..2a1cc2c0ff4
--- /dev/null
+++ b/app/assets/images/emoji/gear.png
diff --git a/app/assets/images/emoji/gem.png b/app/assets/images/emoji/gem.png
new file mode 100644
index 00000000000..db122d26a19
--- /dev/null
+++ b/app/assets/images/emoji/gem.png
diff --git a/app/assets/images/emoji/gemini.png b/app/assets/images/emoji/gemini.png
new file mode 100644
index 00000000000..1a09698cf00
--- /dev/null
+++ b/app/assets/images/emoji/gemini.png
diff --git a/app/assets/images/emoji/ghost.png b/app/assets/images/emoji/ghost.png
new file mode 100644
index 00000000000..5650bc0ed18
--- /dev/null
+++ b/app/assets/images/emoji/ghost.png
diff --git a/app/assets/images/emoji/gift.png b/app/assets/images/emoji/gift.png
new file mode 100644
index 00000000000..844e2164560
--- /dev/null
+++ b/app/assets/images/emoji/gift.png
diff --git a/app/assets/images/emoji/gift_heart.png b/app/assets/images/emoji/gift_heart.png
new file mode 100644
index 00000000000..902ceafe4d1
--- /dev/null
+++ b/app/assets/images/emoji/gift_heart.png
diff --git a/app/assets/images/emoji/girl.png b/app/assets/images/emoji/girl.png
new file mode 100644
index 00000000000..dc1d4d08b39
--- /dev/null
+++ b/app/assets/images/emoji/girl.png
diff --git a/app/assets/images/emoji/girl_tone1.png b/app/assets/images/emoji/girl_tone1.png
new file mode 100644
index 00000000000..bb667e88651
--- /dev/null
+++ b/app/assets/images/emoji/girl_tone1.png
diff --git a/app/assets/images/emoji/girl_tone2.png b/app/assets/images/emoji/girl_tone2.png
new file mode 100644
index 00000000000..a59ed4a3f0d
--- /dev/null
+++ b/app/assets/images/emoji/girl_tone2.png
diff --git a/app/assets/images/emoji/girl_tone3.png b/app/assets/images/emoji/girl_tone3.png
new file mode 100644
index 00000000000..517e7f2a7b0
--- /dev/null
+++ b/app/assets/images/emoji/girl_tone3.png
diff --git a/app/assets/images/emoji/girl_tone4.png b/app/assets/images/emoji/girl_tone4.png
new file mode 100644
index 00000000000..542d96c8487
--- /dev/null
+++ b/app/assets/images/emoji/girl_tone4.png
diff --git a/app/assets/images/emoji/girl_tone5.png b/app/assets/images/emoji/girl_tone5.png
new file mode 100644
index 00000000000..66b7c28c2df
--- /dev/null
+++ b/app/assets/images/emoji/girl_tone5.png
diff --git a/app/assets/images/emoji/globe_with_meridians.png b/app/assets/images/emoji/globe_with_meridians.png
new file mode 100644
index 00000000000..82450c1a4ba
--- /dev/null
+++ b/app/assets/images/emoji/globe_with_meridians.png
diff --git a/app/assets/images/emoji/goal.png b/app/assets/images/emoji/goal.png
new file mode 100644
index 00000000000..df3a53da0fb
--- /dev/null
+++ b/app/assets/images/emoji/goal.png
diff --git a/app/assets/images/emoji/goat.png b/app/assets/images/emoji/goat.png
new file mode 100644
index 00000000000..f9d9e38a128
--- /dev/null
+++ b/app/assets/images/emoji/goat.png
diff --git a/app/assets/images/emoji/golf.png b/app/assets/images/emoji/golf.png
new file mode 100644
index 00000000000..f65a21d8a46
--- /dev/null
+++ b/app/assets/images/emoji/golf.png
diff --git a/app/assets/images/emoji/golfer.png b/app/assets/images/emoji/golfer.png
new file mode 100644
index 00000000000..39c552de86d
--- /dev/null
+++ b/app/assets/images/emoji/golfer.png
diff --git a/app/assets/images/emoji/gorilla.png b/app/assets/images/emoji/gorilla.png
new file mode 100644
index 00000000000..acc51e13622
--- /dev/null
+++ b/app/assets/images/emoji/gorilla.png
diff --git a/app/assets/images/emoji/grapes.png b/app/assets/images/emoji/grapes.png
new file mode 100644
index 00000000000..30d22218896
--- /dev/null
+++ b/app/assets/images/emoji/grapes.png
diff --git a/app/assets/images/emoji/green_apple.png b/app/assets/images/emoji/green_apple.png
new file mode 100644
index 00000000000..5fd51bd3915
--- /dev/null
+++ b/app/assets/images/emoji/green_apple.png
diff --git a/app/assets/images/emoji/green_book.png b/app/assets/images/emoji/green_book.png
new file mode 100644
index 00000000000..e5e411cf3b5
--- /dev/null
+++ b/app/assets/images/emoji/green_book.png
diff --git a/app/assets/images/emoji/green_heart.png b/app/assets/images/emoji/green_heart.png
new file mode 100644
index 00000000000..c52d60a58be
--- /dev/null
+++ b/app/assets/images/emoji/green_heart.png
diff --git a/app/assets/images/emoji/grey_exclamation.png b/app/assets/images/emoji/grey_exclamation.png
new file mode 100644
index 00000000000..9b64da8bf7f
--- /dev/null
+++ b/app/assets/images/emoji/grey_exclamation.png
diff --git a/app/assets/images/emoji/grey_question.png b/app/assets/images/emoji/grey_question.png
new file mode 100644
index 00000000000..6e7824c75f6
--- /dev/null
+++ b/app/assets/images/emoji/grey_question.png
diff --git a/app/assets/images/emoji/grimacing.png b/app/assets/images/emoji/grimacing.png
new file mode 100644
index 00000000000..871b2f071c9
--- /dev/null
+++ b/app/assets/images/emoji/grimacing.png
diff --git a/app/assets/images/emoji/grin.png b/app/assets/images/emoji/grin.png
new file mode 100644
index 00000000000..418d94c811b
--- /dev/null
+++ b/app/assets/images/emoji/grin.png
diff --git a/app/assets/images/emoji/grinning.png b/app/assets/images/emoji/grinning.png
new file mode 100644
index 00000000000..3e8e0dab78c
--- /dev/null
+++ b/app/assets/images/emoji/grinning.png
diff --git a/app/assets/images/emoji/guardsman.png b/app/assets/images/emoji/guardsman.png
new file mode 100644
index 00000000000..8d7ab3c473c
--- /dev/null
+++ b/app/assets/images/emoji/guardsman.png
diff --git a/app/assets/images/emoji/guardsman_tone1.png b/app/assets/images/emoji/guardsman_tone1.png
new file mode 100644
index 00000000000..cea9ba27468
--- /dev/null
+++ b/app/assets/images/emoji/guardsman_tone1.png
diff --git a/app/assets/images/emoji/guardsman_tone2.png b/app/assets/images/emoji/guardsman_tone2.png
new file mode 100644
index 00000000000..037464e4028
--- /dev/null
+++ b/app/assets/images/emoji/guardsman_tone2.png
diff --git a/app/assets/images/emoji/guardsman_tone3.png b/app/assets/images/emoji/guardsman_tone3.png
new file mode 100644
index 00000000000..0f6726fbe87
--- /dev/null
+++ b/app/assets/images/emoji/guardsman_tone3.png
diff --git a/app/assets/images/emoji/guardsman_tone4.png b/app/assets/images/emoji/guardsman_tone4.png
new file mode 100644
index 00000000000..85fcf9a3b97
--- /dev/null
+++ b/app/assets/images/emoji/guardsman_tone4.png
diff --git a/app/assets/images/emoji/guardsman_tone5.png b/app/assets/images/emoji/guardsman_tone5.png
new file mode 100644
index 00000000000..e5f9ca7d5a2
--- /dev/null
+++ b/app/assets/images/emoji/guardsman_tone5.png
diff --git a/app/assets/images/emoji/guitar.png b/app/assets/images/emoji/guitar.png
new file mode 100644
index 00000000000..43d752f1e3d
--- /dev/null
+++ b/app/assets/images/emoji/guitar.png
diff --git a/app/assets/images/emoji/gun.png b/app/assets/images/emoji/gun.png
new file mode 100644
index 00000000000..89c5c244c7b
--- /dev/null
+++ b/app/assets/images/emoji/gun.png
diff --git a/app/assets/images/emoji/haircut.png b/app/assets/images/emoji/haircut.png
new file mode 100644
index 00000000000..91266b12930
--- /dev/null
+++ b/app/assets/images/emoji/haircut.png
diff --git a/app/assets/images/emoji/haircut_tone1.png b/app/assets/images/emoji/haircut_tone1.png
new file mode 100644
index 00000000000..c743b74abeb
--- /dev/null
+++ b/app/assets/images/emoji/haircut_tone1.png
diff --git a/app/assets/images/emoji/haircut_tone2.png b/app/assets/images/emoji/haircut_tone2.png
new file mode 100644
index 00000000000..f144f8e55ce
--- /dev/null
+++ b/app/assets/images/emoji/haircut_tone2.png
diff --git a/app/assets/images/emoji/haircut_tone3.png b/app/assets/images/emoji/haircut_tone3.png
new file mode 100644
index 00000000000..d5ad19563ac
--- /dev/null
+++ b/app/assets/images/emoji/haircut_tone3.png
diff --git a/app/assets/images/emoji/haircut_tone4.png b/app/assets/images/emoji/haircut_tone4.png
new file mode 100644
index 00000000000..244fd3af008
--- /dev/null
+++ b/app/assets/images/emoji/haircut_tone4.png
diff --git a/app/assets/images/emoji/haircut_tone5.png b/app/assets/images/emoji/haircut_tone5.png
new file mode 100644
index 00000000000..20a94a88623
--- /dev/null
+++ b/app/assets/images/emoji/haircut_tone5.png
diff --git a/app/assets/images/emoji/hamburger.png b/app/assets/images/emoji/hamburger.png
new file mode 100644
index 00000000000..3573b28a1fd
--- /dev/null
+++ b/app/assets/images/emoji/hamburger.png
diff --git a/app/assets/images/emoji/hammer.png b/app/assets/images/emoji/hammer.png
new file mode 100644
index 00000000000..00736cce47d
--- /dev/null
+++ b/app/assets/images/emoji/hammer.png
diff --git a/app/assets/images/emoji/hammer_pick.png b/app/assets/images/emoji/hammer_pick.png
new file mode 100644
index 00000000000..3bee30ec588
--- /dev/null
+++ b/app/assets/images/emoji/hammer_pick.png
diff --git a/app/assets/images/emoji/hamster.png b/app/assets/images/emoji/hamster.png
new file mode 100644
index 00000000000..9a04388e4e7
--- /dev/null
+++ b/app/assets/images/emoji/hamster.png
diff --git a/app/assets/images/emoji/hand_splayed.png b/app/assets/images/emoji/hand_splayed.png
new file mode 100644
index 00000000000..fb5ae8ebb5a
--- /dev/null
+++ b/app/assets/images/emoji/hand_splayed.png
diff --git a/app/assets/images/emoji/hand_splayed_tone1.png b/app/assets/images/emoji/hand_splayed_tone1.png
new file mode 100644
index 00000000000..a7888e6bd23
--- /dev/null
+++ b/app/assets/images/emoji/hand_splayed_tone1.png
diff --git a/app/assets/images/emoji/hand_splayed_tone2.png b/app/assets/images/emoji/hand_splayed_tone2.png
new file mode 100644
index 00000000000..cc10fbc272d
--- /dev/null
+++ b/app/assets/images/emoji/hand_splayed_tone2.png
diff --git a/app/assets/images/emoji/hand_splayed_tone3.png b/app/assets/images/emoji/hand_splayed_tone3.png
new file mode 100644
index 00000000000..707236ae8a4
--- /dev/null
+++ b/app/assets/images/emoji/hand_splayed_tone3.png
diff --git a/app/assets/images/emoji/hand_splayed_tone4.png b/app/assets/images/emoji/hand_splayed_tone4.png
new file mode 100644
index 00000000000..1430df9c61f
--- /dev/null
+++ b/app/assets/images/emoji/hand_splayed_tone4.png
diff --git a/app/assets/images/emoji/hand_splayed_tone5.png b/app/assets/images/emoji/hand_splayed_tone5.png
new file mode 100644
index 00000000000..80bec971b6b
--- /dev/null
+++ b/app/assets/images/emoji/hand_splayed_tone5.png
diff --git a/app/assets/images/emoji/handbag.png b/app/assets/images/emoji/handbag.png
new file mode 100644
index 00000000000..cbf75c5d25e
--- /dev/null
+++ b/app/assets/images/emoji/handbag.png
diff --git a/app/assets/images/emoji/handball.png b/app/assets/images/emoji/handball.png
new file mode 100644
index 00000000000..1152f1344c7
--- /dev/null
+++ b/app/assets/images/emoji/handball.png
diff --git a/app/assets/images/emoji/handball_tone1.png b/app/assets/images/emoji/handball_tone1.png
new file mode 100644
index 00000000000..c26cac2df98
--- /dev/null
+++ b/app/assets/images/emoji/handball_tone1.png
diff --git a/app/assets/images/emoji/handball_tone2.png b/app/assets/images/emoji/handball_tone2.png
new file mode 100644
index 00000000000..7baaf95a9a2
--- /dev/null
+++ b/app/assets/images/emoji/handball_tone2.png
diff --git a/app/assets/images/emoji/handball_tone3.png b/app/assets/images/emoji/handball_tone3.png
new file mode 100644
index 00000000000..0e3a37c3d40
--- /dev/null
+++ b/app/assets/images/emoji/handball_tone3.png
diff --git a/app/assets/images/emoji/handball_tone4.png b/app/assets/images/emoji/handball_tone4.png
new file mode 100644
index 00000000000..e1233f38266
--- /dev/null
+++ b/app/assets/images/emoji/handball_tone4.png
diff --git a/app/assets/images/emoji/handball_tone5.png b/app/assets/images/emoji/handball_tone5.png
new file mode 100644
index 00000000000..6b1eb9b64b0
--- /dev/null
+++ b/app/assets/images/emoji/handball_tone5.png
diff --git a/app/assets/images/emoji/handshake.png b/app/assets/images/emoji/handshake.png
new file mode 100644
index 00000000000..c5d35fd8138
--- /dev/null
+++ b/app/assets/images/emoji/handshake.png
diff --git a/app/assets/images/emoji/handshake_tone1.png b/app/assets/images/emoji/handshake_tone1.png
new file mode 100644
index 00000000000..8f8fbb9bdca
--- /dev/null
+++ b/app/assets/images/emoji/handshake_tone1.png
diff --git a/app/assets/images/emoji/handshake_tone2.png b/app/assets/images/emoji/handshake_tone2.png
new file mode 100644
index 00000000000..336a77a6d78
--- /dev/null
+++ b/app/assets/images/emoji/handshake_tone2.png
diff --git a/app/assets/images/emoji/handshake_tone3.png b/app/assets/images/emoji/handshake_tone3.png
new file mode 100644
index 00000000000..95f62d4fecd
--- /dev/null
+++ b/app/assets/images/emoji/handshake_tone3.png
diff --git a/app/assets/images/emoji/handshake_tone4.png b/app/assets/images/emoji/handshake_tone4.png
new file mode 100644
index 00000000000..2b0a6433886
--- /dev/null
+++ b/app/assets/images/emoji/handshake_tone4.png
diff --git a/app/assets/images/emoji/handshake_tone5.png b/app/assets/images/emoji/handshake_tone5.png
new file mode 100644
index 00000000000..40189ee68e4
--- /dev/null
+++ b/app/assets/images/emoji/handshake_tone5.png
diff --git a/app/assets/images/emoji/hash.png b/app/assets/images/emoji/hash.png
new file mode 100644
index 00000000000..6e26f0070b0
--- /dev/null
+++ b/app/assets/images/emoji/hash.png
diff --git a/app/assets/images/emoji/hatched_chick.png b/app/assets/images/emoji/hatched_chick.png
new file mode 100644
index 00000000000..31dfb511e0e
--- /dev/null
+++ b/app/assets/images/emoji/hatched_chick.png
diff --git a/app/assets/images/emoji/hatching_chick.png b/app/assets/images/emoji/hatching_chick.png
new file mode 100644
index 00000000000..c5b0e8f3bcc
--- /dev/null
+++ b/app/assets/images/emoji/hatching_chick.png
diff --git a/app/assets/images/emoji/head_bandage.png b/app/assets/images/emoji/head_bandage.png
new file mode 100644
index 00000000000..0be723085e0
--- /dev/null
+++ b/app/assets/images/emoji/head_bandage.png
diff --git a/app/assets/images/emoji/headphones.png b/app/assets/images/emoji/headphones.png
new file mode 100644
index 00000000000..e9fd34041d8
--- /dev/null
+++ b/app/assets/images/emoji/headphones.png
diff --git a/app/assets/images/emoji/hear_no_evil.png b/app/assets/images/emoji/hear_no_evil.png
new file mode 100644
index 00000000000..74b6be0c6c5
--- /dev/null
+++ b/app/assets/images/emoji/hear_no_evil.png
diff --git a/app/assets/images/emoji/heart.png b/app/assets/images/emoji/heart.png
new file mode 100644
index 00000000000..638cb72dc4e
--- /dev/null
+++ b/app/assets/images/emoji/heart.png
diff --git a/app/assets/images/emoji/heart_decoration.png b/app/assets/images/emoji/heart_decoration.png
new file mode 100644
index 00000000000..5443f60bc63
--- /dev/null
+++ b/app/assets/images/emoji/heart_decoration.png
diff --git a/app/assets/images/emoji/heart_exclamation.png b/app/assets/images/emoji/heart_exclamation.png
new file mode 100644
index 00000000000..91b520be40b
--- /dev/null
+++ b/app/assets/images/emoji/heart_exclamation.png
diff --git a/app/assets/images/emoji/heart_eyes.png b/app/assets/images/emoji/heart_eyes.png
new file mode 100644
index 00000000000..73fbee29d4e
--- /dev/null
+++ b/app/assets/images/emoji/heart_eyes.png
diff --git a/app/assets/images/emoji/heart_eyes_cat.png b/app/assets/images/emoji/heart_eyes_cat.png
new file mode 100644
index 00000000000..bc5a833f9a1
--- /dev/null
+++ b/app/assets/images/emoji/heart_eyes_cat.png
diff --git a/app/assets/images/emoji/heartbeat.png b/app/assets/images/emoji/heartbeat.png
new file mode 100644
index 00000000000..0bcf2d1d567
--- /dev/null
+++ b/app/assets/images/emoji/heartbeat.png
diff --git a/app/assets/images/emoji/heartpulse.png b/app/assets/images/emoji/heartpulse.png
new file mode 100644
index 00000000000..d6e694e972f
--- /dev/null
+++ b/app/assets/images/emoji/heartpulse.png
diff --git a/app/assets/images/emoji/hearts.png b/app/assets/images/emoji/hearts.png
new file mode 100644
index 00000000000..393c3ed5267
--- /dev/null
+++ b/app/assets/images/emoji/hearts.png
diff --git a/app/assets/images/emoji/heavy_check_mark.png b/app/assets/images/emoji/heavy_check_mark.png
new file mode 100644
index 00000000000..03bd695377e
--- /dev/null
+++ b/app/assets/images/emoji/heavy_check_mark.png
diff --git a/app/assets/images/emoji/heavy_division_sign.png b/app/assets/images/emoji/heavy_division_sign.png
new file mode 100644
index 00000000000..df32ab21bea
--- /dev/null
+++ b/app/assets/images/emoji/heavy_division_sign.png
diff --git a/app/assets/images/emoji/heavy_dollar_sign.png b/app/assets/images/emoji/heavy_dollar_sign.png
new file mode 100644
index 00000000000..ef2c2e20590
--- /dev/null
+++ b/app/assets/images/emoji/heavy_dollar_sign.png
diff --git a/app/assets/images/emoji/heavy_minus_sign.png b/app/assets/images/emoji/heavy_minus_sign.png
new file mode 100644
index 00000000000..054211caf12
--- /dev/null
+++ b/app/assets/images/emoji/heavy_minus_sign.png
diff --git a/app/assets/images/emoji/heavy_multiplication_x.png b/app/assets/images/emoji/heavy_multiplication_x.png
new file mode 100644
index 00000000000..e47cc1b685d
--- /dev/null
+++ b/app/assets/images/emoji/heavy_multiplication_x.png
diff --git a/app/assets/images/emoji/heavy_plus_sign.png b/app/assets/images/emoji/heavy_plus_sign.png
new file mode 100644
index 00000000000..40799798aaf
--- /dev/null
+++ b/app/assets/images/emoji/heavy_plus_sign.png
diff --git a/app/assets/images/emoji/helicopter.png b/app/assets/images/emoji/helicopter.png
new file mode 100644
index 00000000000..7ec5f39a51a
--- /dev/null
+++ b/app/assets/images/emoji/helicopter.png
diff --git a/app/assets/images/emoji/helmet_with_cross.png b/app/assets/images/emoji/helmet_with_cross.png
new file mode 100644
index 00000000000..7140a676038
--- /dev/null
+++ b/app/assets/images/emoji/helmet_with_cross.png
diff --git a/app/assets/images/emoji/herb.png b/app/assets/images/emoji/herb.png
new file mode 100644
index 00000000000..d984d1562bb
--- /dev/null
+++ b/app/assets/images/emoji/herb.png
diff --git a/app/assets/images/emoji/hibiscus.png b/app/assets/images/emoji/hibiscus.png
new file mode 100644
index 00000000000..39dd3524233
--- /dev/null
+++ b/app/assets/images/emoji/hibiscus.png
diff --git a/app/assets/images/emoji/high_brightness.png b/app/assets/images/emoji/high_brightness.png
new file mode 100644
index 00000000000..c41f2d5fd50
--- /dev/null
+++ b/app/assets/images/emoji/high_brightness.png
diff --git a/app/assets/images/emoji/high_heel.png b/app/assets/images/emoji/high_heel.png
new file mode 100644
index 00000000000..b331cbccc9d
--- /dev/null
+++ b/app/assets/images/emoji/high_heel.png
diff --git a/app/assets/images/emoji/hockey.png b/app/assets/images/emoji/hockey.png
new file mode 100644
index 00000000000..be94e9cbf73
--- /dev/null
+++ b/app/assets/images/emoji/hockey.png
diff --git a/app/assets/images/emoji/hole.png b/app/assets/images/emoji/hole.png
new file mode 100644
index 00000000000..517d2ae0deb
--- /dev/null
+++ b/app/assets/images/emoji/hole.png
diff --git a/app/assets/images/emoji/homes.png b/app/assets/images/emoji/homes.png
new file mode 100644
index 00000000000..6ab4a2a2651
--- /dev/null
+++ b/app/assets/images/emoji/homes.png
diff --git a/app/assets/images/emoji/honey_pot.png b/app/assets/images/emoji/honey_pot.png
new file mode 100644
index 00000000000..9d8f592955e
--- /dev/null
+++ b/app/assets/images/emoji/honey_pot.png
diff --git a/app/assets/images/emoji/horse.png b/app/assets/images/emoji/horse.png
new file mode 100644
index 00000000000..7cb1172f4e4
--- /dev/null
+++ b/app/assets/images/emoji/horse.png
diff --git a/app/assets/images/emoji/horse_racing.png b/app/assets/images/emoji/horse_racing.png
new file mode 100644
index 00000000000..addf9edac56
--- /dev/null
+++ b/app/assets/images/emoji/horse_racing.png
diff --git a/app/assets/images/emoji/horse_racing_tone1.png b/app/assets/images/emoji/horse_racing_tone1.png
new file mode 100644
index 00000000000..e9bf4092e98
--- /dev/null
+++ b/app/assets/images/emoji/horse_racing_tone1.png
diff --git a/app/assets/images/emoji/horse_racing_tone2.png b/app/assets/images/emoji/horse_racing_tone2.png
new file mode 100644
index 00000000000..031bbc3d867
--- /dev/null
+++ b/app/assets/images/emoji/horse_racing_tone2.png
diff --git a/app/assets/images/emoji/horse_racing_tone3.png b/app/assets/images/emoji/horse_racing_tone3.png
new file mode 100644
index 00000000000..b40ef891f9b
--- /dev/null
+++ b/app/assets/images/emoji/horse_racing_tone3.png
diff --git a/app/assets/images/emoji/horse_racing_tone4.png b/app/assets/images/emoji/horse_racing_tone4.png
new file mode 100644
index 00000000000..e286cb85065
--- /dev/null
+++ b/app/assets/images/emoji/horse_racing_tone4.png
diff --git a/app/assets/images/emoji/horse_racing_tone5.png b/app/assets/images/emoji/horse_racing_tone5.png
new file mode 100644
index 00000000000..453c51c6007
--- /dev/null
+++ b/app/assets/images/emoji/horse_racing_tone5.png
diff --git a/app/assets/images/emoji/hospital.png b/app/assets/images/emoji/hospital.png
new file mode 100644
index 00000000000..1cbce4ae767
--- /dev/null
+++ b/app/assets/images/emoji/hospital.png
diff --git a/app/assets/images/emoji/hot_pepper.png b/app/assets/images/emoji/hot_pepper.png
new file mode 100644
index 00000000000..266675bd577
--- /dev/null
+++ b/app/assets/images/emoji/hot_pepper.png
diff --git a/app/assets/images/emoji/hotdog.png b/app/assets/images/emoji/hotdog.png
new file mode 100644
index 00000000000..3c3354d94cb
--- /dev/null
+++ b/app/assets/images/emoji/hotdog.png
diff --git a/app/assets/images/emoji/hotel.png b/app/assets/images/emoji/hotel.png
new file mode 100644
index 00000000000..ea8f4c4979a
--- /dev/null
+++ b/app/assets/images/emoji/hotel.png
diff --git a/app/assets/images/emoji/hotsprings.png b/app/assets/images/emoji/hotsprings.png
new file mode 100644
index 00000000000..3d9df2d9475
--- /dev/null
+++ b/app/assets/images/emoji/hotsprings.png
diff --git a/app/assets/images/emoji/hourglass.png b/app/assets/images/emoji/hourglass.png
new file mode 100644
index 00000000000..a5db2d1d3f4
--- /dev/null
+++ b/app/assets/images/emoji/hourglass.png
diff --git a/app/assets/images/emoji/hourglass_flowing_sand.png b/app/assets/images/emoji/hourglass_flowing_sand.png
new file mode 100644
index 00000000000..b93b15ed6d8
--- /dev/null
+++ b/app/assets/images/emoji/hourglass_flowing_sand.png
diff --git a/app/assets/images/emoji/house.png b/app/assets/images/emoji/house.png
new file mode 100644
index 00000000000..01c98a0ba92
--- /dev/null
+++ b/app/assets/images/emoji/house.png
diff --git a/app/assets/images/emoji/house_abandoned.png b/app/assets/images/emoji/house_abandoned.png
new file mode 100644
index 00000000000..c55e81de990
--- /dev/null
+++ b/app/assets/images/emoji/house_abandoned.png
diff --git a/app/assets/images/emoji/house_with_garden.png b/app/assets/images/emoji/house_with_garden.png
new file mode 100644
index 00000000000..0aae41598ef
--- /dev/null
+++ b/app/assets/images/emoji/house_with_garden.png
diff --git a/app/assets/images/emoji/hugging.png b/app/assets/images/emoji/hugging.png
new file mode 100644
index 00000000000..5bba6dc6d51
--- /dev/null
+++ b/app/assets/images/emoji/hugging.png
diff --git a/app/assets/images/emoji/hushed.png b/app/assets/images/emoji/hushed.png
new file mode 100644
index 00000000000..cad0e23132e
--- /dev/null
+++ b/app/assets/images/emoji/hushed.png
diff --git a/app/assets/images/emoji/ice_cream.png b/app/assets/images/emoji/ice_cream.png
new file mode 100644
index 00000000000..94267b9c434
--- /dev/null
+++ b/app/assets/images/emoji/ice_cream.png
diff --git a/app/assets/images/emoji/ice_skate.png b/app/assets/images/emoji/ice_skate.png
new file mode 100644
index 00000000000..8c449b0c039
--- /dev/null
+++ b/app/assets/images/emoji/ice_skate.png
diff --git a/app/assets/images/emoji/icecream.png b/app/assets/images/emoji/icecream.png
new file mode 100644
index 00000000000..8f6546e31a5
--- /dev/null
+++ b/app/assets/images/emoji/icecream.png
diff --git a/app/assets/images/emoji/id.png b/app/assets/images/emoji/id.png
new file mode 100644
index 00000000000..5bf69bf7ba8
--- /dev/null
+++ b/app/assets/images/emoji/id.png
diff --git a/app/assets/images/emoji/ideograph_advantage.png b/app/assets/images/emoji/ideograph_advantage.png
new file mode 100644
index 00000000000..0c0d589caf0
--- /dev/null
+++ b/app/assets/images/emoji/ideograph_advantage.png
diff --git a/app/assets/images/emoji/imp.png b/app/assets/images/emoji/imp.png
new file mode 100644
index 00000000000..9f9a9605539
--- /dev/null
+++ b/app/assets/images/emoji/imp.png
diff --git a/app/assets/images/emoji/inbox_tray.png b/app/assets/images/emoji/inbox_tray.png
new file mode 100644
index 00000000000..41a6be2b0ee
--- /dev/null
+++ b/app/assets/images/emoji/inbox_tray.png
diff --git a/app/assets/images/emoji/incoming_envelope.png b/app/assets/images/emoji/incoming_envelope.png
new file mode 100644
index 00000000000..fd22e88182e
--- /dev/null
+++ b/app/assets/images/emoji/incoming_envelope.png
diff --git a/app/assets/images/emoji/information_desk_person.png b/app/assets/images/emoji/information_desk_person.png
new file mode 100644
index 00000000000..55fc6294d25
--- /dev/null
+++ b/app/assets/images/emoji/information_desk_person.png
diff --git a/app/assets/images/emoji/information_desk_person_tone1.png b/app/assets/images/emoji/information_desk_person_tone1.png
new file mode 100644
index 00000000000..3d9e2247940
--- /dev/null
+++ b/app/assets/images/emoji/information_desk_person_tone1.png
diff --git a/app/assets/images/emoji/information_desk_person_tone2.png b/app/assets/images/emoji/information_desk_person_tone2.png
new file mode 100644
index 00000000000..879e8b7966d
--- /dev/null
+++ b/app/assets/images/emoji/information_desk_person_tone2.png
diff --git a/app/assets/images/emoji/information_desk_person_tone3.png b/app/assets/images/emoji/information_desk_person_tone3.png
new file mode 100644
index 00000000000..307514eab67
--- /dev/null
+++ b/app/assets/images/emoji/information_desk_person_tone3.png
diff --git a/app/assets/images/emoji/information_desk_person_tone4.png b/app/assets/images/emoji/information_desk_person_tone4.png
new file mode 100644
index 00000000000..297395dcb3f
--- /dev/null
+++ b/app/assets/images/emoji/information_desk_person_tone4.png
diff --git a/app/assets/images/emoji/information_desk_person_tone5.png b/app/assets/images/emoji/information_desk_person_tone5.png
new file mode 100644
index 00000000000..26f8f22b28b
--- /dev/null
+++ b/app/assets/images/emoji/information_desk_person_tone5.png
diff --git a/app/assets/images/emoji/information_source.png b/app/assets/images/emoji/information_source.png
new file mode 100644
index 00000000000..871f2db9314
--- /dev/null
+++ b/app/assets/images/emoji/information_source.png
diff --git a/app/assets/images/emoji/innocent.png b/app/assets/images/emoji/innocent.png
new file mode 100644
index 00000000000..57f5151124f
--- /dev/null
+++ b/app/assets/images/emoji/innocent.png
diff --git a/app/assets/images/emoji/interrobang.png b/app/assets/images/emoji/interrobang.png
new file mode 100644
index 00000000000..509813e9bb2
--- /dev/null
+++ b/app/assets/images/emoji/interrobang.png
diff --git a/app/assets/images/emoji/iphone.png b/app/assets/images/emoji/iphone.png
new file mode 100644
index 00000000000..fd377acf872
--- /dev/null
+++ b/app/assets/images/emoji/iphone.png
diff --git a/app/assets/images/emoji/island.png b/app/assets/images/emoji/island.png
new file mode 100644
index 00000000000..7fd834389b7
--- /dev/null
+++ b/app/assets/images/emoji/island.png
diff --git a/app/assets/images/emoji/izakaya_lantern.png b/app/assets/images/emoji/izakaya_lantern.png
new file mode 100644
index 00000000000..dfd933f6f36
--- /dev/null
+++ b/app/assets/images/emoji/izakaya_lantern.png
diff --git a/app/assets/images/emoji/jack_o_lantern.png b/app/assets/images/emoji/jack_o_lantern.png
new file mode 100644
index 00000000000..44c3fc0aec9
--- /dev/null
+++ b/app/assets/images/emoji/jack_o_lantern.png
diff --git a/app/assets/images/emoji/japan.png b/app/assets/images/emoji/japan.png
new file mode 100644
index 00000000000..d86d0a59e12
--- /dev/null
+++ b/app/assets/images/emoji/japan.png
diff --git a/app/assets/images/emoji/japanese_castle.png b/app/assets/images/emoji/japanese_castle.png
new file mode 100644
index 00000000000..64b4e33a1ae
--- /dev/null
+++ b/app/assets/images/emoji/japanese_castle.png
diff --git a/app/assets/images/emoji/japanese_goblin.png b/app/assets/images/emoji/japanese_goblin.png
new file mode 100644
index 00000000000..515c6a2250e
--- /dev/null
+++ b/app/assets/images/emoji/japanese_goblin.png
diff --git a/app/assets/images/emoji/japanese_ogre.png b/app/assets/images/emoji/japanese_ogre.png
new file mode 100644
index 00000000000..fe8670fdaf1
--- /dev/null
+++ b/app/assets/images/emoji/japanese_ogre.png
diff --git a/app/assets/images/emoji/jeans.png b/app/assets/images/emoji/jeans.png
new file mode 100644
index 00000000000..2a6869d674c
--- /dev/null
+++ b/app/assets/images/emoji/jeans.png
diff --git a/app/assets/images/emoji/joy.png b/app/assets/images/emoji/joy.png
new file mode 100644
index 00000000000..0ba3b1859d8
--- /dev/null
+++ b/app/assets/images/emoji/joy.png
diff --git a/app/assets/images/emoji/joy_cat.png b/app/assets/images/emoji/joy_cat.png
new file mode 100644
index 00000000000..aac353179aa
--- /dev/null
+++ b/app/assets/images/emoji/joy_cat.png
diff --git a/app/assets/images/emoji/joystick.png b/app/assets/images/emoji/joystick.png
new file mode 100644
index 00000000000..1ee1905434e
--- /dev/null
+++ b/app/assets/images/emoji/joystick.png
diff --git a/app/assets/images/emoji/juggling.png b/app/assets/images/emoji/juggling.png
new file mode 100644
index 00000000000..a37f6224a42
--- /dev/null
+++ b/app/assets/images/emoji/juggling.png
diff --git a/app/assets/images/emoji/juggling_tone1.png b/app/assets/images/emoji/juggling_tone1.png
new file mode 100644
index 00000000000..c18eda40031
--- /dev/null
+++ b/app/assets/images/emoji/juggling_tone1.png
diff --git a/app/assets/images/emoji/juggling_tone2.png b/app/assets/images/emoji/juggling_tone2.png
new file mode 100644
index 00000000000..de3b7a555b6
--- /dev/null
+++ b/app/assets/images/emoji/juggling_tone2.png
diff --git a/app/assets/images/emoji/juggling_tone3.png b/app/assets/images/emoji/juggling_tone3.png
new file mode 100644
index 00000000000..74ab6d85458
--- /dev/null
+++ b/app/assets/images/emoji/juggling_tone3.png
diff --git a/app/assets/images/emoji/juggling_tone4.png b/app/assets/images/emoji/juggling_tone4.png
new file mode 100644
index 00000000000..1c57823203f
--- /dev/null
+++ b/app/assets/images/emoji/juggling_tone4.png
diff --git a/app/assets/images/emoji/juggling_tone5.png b/app/assets/images/emoji/juggling_tone5.png
new file mode 100644
index 00000000000..c343d6ee98a
--- /dev/null
+++ b/app/assets/images/emoji/juggling_tone5.png
diff --git a/app/assets/images/emoji/kaaba.png b/app/assets/images/emoji/kaaba.png
new file mode 100644
index 00000000000..1778c1138e4
--- /dev/null
+++ b/app/assets/images/emoji/kaaba.png
diff --git a/app/assets/images/emoji/key.png b/app/assets/images/emoji/key.png
new file mode 100644
index 00000000000..319cd1b884c
--- /dev/null
+++ b/app/assets/images/emoji/key.png
diff --git a/app/assets/images/emoji/key2.png b/app/assets/images/emoji/key2.png
new file mode 100644
index 00000000000..e11d706c6c8
--- /dev/null
+++ b/app/assets/images/emoji/key2.png
diff --git a/app/assets/images/emoji/keyboard.png b/app/assets/images/emoji/keyboard.png
new file mode 100644
index 00000000000..75027cb9af7
--- /dev/null
+++ b/app/assets/images/emoji/keyboard.png
diff --git a/app/assets/images/emoji/kimono.png b/app/assets/images/emoji/kimono.png
new file mode 100644
index 00000000000..abe851115d1
--- /dev/null
+++ b/app/assets/images/emoji/kimono.png
diff --git a/app/assets/images/emoji/kiss.png b/app/assets/images/emoji/kiss.png
new file mode 100644
index 00000000000..85e6dcfc4e8
--- /dev/null
+++ b/app/assets/images/emoji/kiss.png
diff --git a/app/assets/images/emoji/kiss_mm.png b/app/assets/images/emoji/kiss_mm.png
new file mode 100644
index 00000000000..a9a0edae17c
--- /dev/null
+++ b/app/assets/images/emoji/kiss_mm.png
diff --git a/app/assets/images/emoji/kiss_ww.png b/app/assets/images/emoji/kiss_ww.png
new file mode 100644
index 00000000000..fdac73cbb1d
--- /dev/null
+++ b/app/assets/images/emoji/kiss_ww.png
diff --git a/app/assets/images/emoji/kissing.png b/app/assets/images/emoji/kissing.png
new file mode 100644
index 00000000000..39d325fd8e3
--- /dev/null
+++ b/app/assets/images/emoji/kissing.png
diff --git a/app/assets/images/emoji/kissing_cat.png b/app/assets/images/emoji/kissing_cat.png
new file mode 100644
index 00000000000..6e0bcc77540
--- /dev/null
+++ b/app/assets/images/emoji/kissing_cat.png
diff --git a/app/assets/images/emoji/kissing_closed_eyes.png b/app/assets/images/emoji/kissing_closed_eyes.png
new file mode 100644
index 00000000000..b684d7d4d6c
--- /dev/null
+++ b/app/assets/images/emoji/kissing_closed_eyes.png
diff --git a/app/assets/images/emoji/kissing_heart.png b/app/assets/images/emoji/kissing_heart.png
new file mode 100644
index 00000000000..0ff808fd614
--- /dev/null
+++ b/app/assets/images/emoji/kissing_heart.png
diff --git a/app/assets/images/emoji/kissing_smiling_eyes.png b/app/assets/images/emoji/kissing_smiling_eyes.png
new file mode 100644
index 00000000000..e181f17099d
--- /dev/null
+++ b/app/assets/images/emoji/kissing_smiling_eyes.png
diff --git a/app/assets/images/emoji/kiwi.png b/app/assets/images/emoji/kiwi.png
new file mode 100644
index 00000000000..dfbd8258074
--- /dev/null
+++ b/app/assets/images/emoji/kiwi.png
diff --git a/app/assets/images/emoji/knife.png b/app/assets/images/emoji/knife.png
new file mode 100644
index 00000000000..1acb9f3077b
--- /dev/null
+++ b/app/assets/images/emoji/knife.png
diff --git a/app/assets/images/emoji/koala.png b/app/assets/images/emoji/koala.png
new file mode 100644
index 00000000000..a0aa437a98c
--- /dev/null
+++ b/app/assets/images/emoji/koala.png
diff --git a/app/assets/images/emoji/koko.png b/app/assets/images/emoji/koko.png
new file mode 100644
index 00000000000..6450eb44d90
--- /dev/null
+++ b/app/assets/images/emoji/koko.png
diff --git a/app/assets/images/emoji/label.png b/app/assets/images/emoji/label.png
new file mode 100644
index 00000000000..d41c9b4f1e1
--- /dev/null
+++ b/app/assets/images/emoji/label.png
diff --git a/app/assets/images/emoji/large_blue_circle.png b/app/assets/images/emoji/large_blue_circle.png
new file mode 100644
index 00000000000..84078ef3127
--- /dev/null
+++ b/app/assets/images/emoji/large_blue_circle.png
diff --git a/app/assets/images/emoji/large_blue_diamond.png b/app/assets/images/emoji/large_blue_diamond.png
new file mode 100644
index 00000000000..416a58bd5a8
--- /dev/null
+++ b/app/assets/images/emoji/large_blue_diamond.png
diff --git a/app/assets/images/emoji/large_orange_diamond.png b/app/assets/images/emoji/large_orange_diamond.png
new file mode 100644
index 00000000000..73ff0ac36c8
--- /dev/null
+++ b/app/assets/images/emoji/large_orange_diamond.png
diff --git a/app/assets/images/emoji/last_quarter_moon.png b/app/assets/images/emoji/last_quarter_moon.png
new file mode 100644
index 00000000000..0842a0dd408
--- /dev/null
+++ b/app/assets/images/emoji/last_quarter_moon.png
diff --git a/app/assets/images/emoji/last_quarter_moon_with_face.png b/app/assets/images/emoji/last_quarter_moon_with_face.png
new file mode 100644
index 00000000000..94099343c5d
--- /dev/null
+++ b/app/assets/images/emoji/last_quarter_moon_with_face.png
diff --git a/app/assets/images/emoji/laughing.png b/app/assets/images/emoji/laughing.png
new file mode 100644
index 00000000000..d94e9505ba1
--- /dev/null
+++ b/app/assets/images/emoji/laughing.png
diff --git a/app/assets/images/emoji/leaves.png b/app/assets/images/emoji/leaves.png
new file mode 100644
index 00000000000..1e43e1af820
--- /dev/null
+++ b/app/assets/images/emoji/leaves.png
diff --git a/app/assets/images/emoji/ledger.png b/app/assets/images/emoji/ledger.png
new file mode 100644
index 00000000000..13e7561a4bd
--- /dev/null
+++ b/app/assets/images/emoji/ledger.png
diff --git a/app/assets/images/emoji/left_facing_fist.png b/app/assets/images/emoji/left_facing_fist.png
new file mode 100644
index 00000000000..a9d9fd8d59c
--- /dev/null
+++ b/app/assets/images/emoji/left_facing_fist.png
diff --git a/app/assets/images/emoji/left_facing_fist_tone1.png b/app/assets/images/emoji/left_facing_fist_tone1.png
new file mode 100644
index 00000000000..1262a6b4b69
--- /dev/null
+++ b/app/assets/images/emoji/left_facing_fist_tone1.png
diff --git a/app/assets/images/emoji/left_facing_fist_tone2.png b/app/assets/images/emoji/left_facing_fist_tone2.png
new file mode 100644
index 00000000000..40bf70b82b2
--- /dev/null
+++ b/app/assets/images/emoji/left_facing_fist_tone2.png
diff --git a/app/assets/images/emoji/left_facing_fist_tone3.png b/app/assets/images/emoji/left_facing_fist_tone3.png
new file mode 100644
index 00000000000..93f58145111
--- /dev/null
+++ b/app/assets/images/emoji/left_facing_fist_tone3.png
diff --git a/app/assets/images/emoji/left_facing_fist_tone4.png b/app/assets/images/emoji/left_facing_fist_tone4.png
new file mode 100644
index 00000000000..d82b5ec91f0
--- /dev/null
+++ b/app/assets/images/emoji/left_facing_fist_tone4.png
diff --git a/app/assets/images/emoji/left_facing_fist_tone5.png b/app/assets/images/emoji/left_facing_fist_tone5.png
new file mode 100644
index 00000000000..09ae4cd492b
--- /dev/null
+++ b/app/assets/images/emoji/left_facing_fist_tone5.png
diff --git a/app/assets/images/emoji/left_luggage.png b/app/assets/images/emoji/left_luggage.png
new file mode 100644
index 00000000000..887b23f3f25
--- /dev/null
+++ b/app/assets/images/emoji/left_luggage.png
diff --git a/app/assets/images/emoji/left_right_arrow.png b/app/assets/images/emoji/left_right_arrow.png
new file mode 100644
index 00000000000..7937f24f2ac
--- /dev/null
+++ b/app/assets/images/emoji/left_right_arrow.png
diff --git a/app/assets/images/emoji/leftwards_arrow_with_hook.png b/app/assets/images/emoji/leftwards_arrow_with_hook.png
new file mode 100644
index 00000000000..ba45c2ad9e9
--- /dev/null
+++ b/app/assets/images/emoji/leftwards_arrow_with_hook.png
diff --git a/app/assets/images/emoji/lemon.png b/app/assets/images/emoji/lemon.png
new file mode 100644
index 00000000000..9a7d95ca220
--- /dev/null
+++ b/app/assets/images/emoji/lemon.png
diff --git a/app/assets/images/emoji/leo.png b/app/assets/images/emoji/leo.png
new file mode 100644
index 00000000000..30158d34de9
--- /dev/null
+++ b/app/assets/images/emoji/leo.png
diff --git a/app/assets/images/emoji/leopard.png b/app/assets/images/emoji/leopard.png
new file mode 100644
index 00000000000..8aac3d49448
--- /dev/null
+++ b/app/assets/images/emoji/leopard.png
diff --git a/app/assets/images/emoji/level_slider.png b/app/assets/images/emoji/level_slider.png
new file mode 100644
index 00000000000..720a3b34119
--- /dev/null
+++ b/app/assets/images/emoji/level_slider.png
diff --git a/app/assets/images/emoji/levitate.png b/app/assets/images/emoji/levitate.png
new file mode 100644
index 00000000000..3dc315a3d91
--- /dev/null
+++ b/app/assets/images/emoji/levitate.png
diff --git a/app/assets/images/emoji/libra.png b/app/assets/images/emoji/libra.png
new file mode 100644
index 00000000000..8fd133a357c
--- /dev/null
+++ b/app/assets/images/emoji/libra.png
diff --git a/app/assets/images/emoji/lifter.png b/app/assets/images/emoji/lifter.png
new file mode 100644
index 00000000000..afdeaa476af
--- /dev/null
+++ b/app/assets/images/emoji/lifter.png
diff --git a/app/assets/images/emoji/lifter_tone1.png b/app/assets/images/emoji/lifter_tone1.png
new file mode 100644
index 00000000000..febaad123ec
--- /dev/null
+++ b/app/assets/images/emoji/lifter_tone1.png
diff --git a/app/assets/images/emoji/lifter_tone2.png b/app/assets/images/emoji/lifter_tone2.png
new file mode 100644
index 00000000000..27ae794a18e
--- /dev/null
+++ b/app/assets/images/emoji/lifter_tone2.png
diff --git a/app/assets/images/emoji/lifter_tone3.png b/app/assets/images/emoji/lifter_tone3.png
new file mode 100644
index 00000000000..45c4c22c709
--- /dev/null
+++ b/app/assets/images/emoji/lifter_tone3.png
diff --git a/app/assets/images/emoji/lifter_tone4.png b/app/assets/images/emoji/lifter_tone4.png
new file mode 100644
index 00000000000..67dd21d2464
--- /dev/null
+++ b/app/assets/images/emoji/lifter_tone4.png
diff --git a/app/assets/images/emoji/lifter_tone5.png b/app/assets/images/emoji/lifter_tone5.png
new file mode 100644
index 00000000000..fa0152038b6
--- /dev/null
+++ b/app/assets/images/emoji/lifter_tone5.png
diff --git a/app/assets/images/emoji/light_rail.png b/app/assets/images/emoji/light_rail.png
new file mode 100644
index 00000000000..a64829f5078
--- /dev/null
+++ b/app/assets/images/emoji/light_rail.png
diff --git a/app/assets/images/emoji/link.png b/app/assets/images/emoji/link.png
new file mode 100644
index 00000000000..ae20f0f8eec
--- /dev/null
+++ b/app/assets/images/emoji/link.png
diff --git a/app/assets/images/emoji/lion_face.png b/app/assets/images/emoji/lion_face.png
new file mode 100644
index 00000000000..5062ab47ecf
--- /dev/null
+++ b/app/assets/images/emoji/lion_face.png
diff --git a/app/assets/images/emoji/lips.png b/app/assets/images/emoji/lips.png
new file mode 100644
index 00000000000..35f3cc2006f
--- /dev/null
+++ b/app/assets/images/emoji/lips.png
diff --git a/app/assets/images/emoji/lipstick.png b/app/assets/images/emoji/lipstick.png
new file mode 100644
index 00000000000..61a0c084c99
--- /dev/null
+++ b/app/assets/images/emoji/lipstick.png
diff --git a/app/assets/images/emoji/lizard.png b/app/assets/images/emoji/lizard.png
new file mode 100644
index 00000000000..8363876050e
--- /dev/null
+++ b/app/assets/images/emoji/lizard.png
diff --git a/app/assets/images/emoji/lock.png b/app/assets/images/emoji/lock.png
new file mode 100644
index 00000000000..5a739c46644
--- /dev/null
+++ b/app/assets/images/emoji/lock.png
diff --git a/app/assets/images/emoji/lock_with_ink_pen.png b/app/assets/images/emoji/lock_with_ink_pen.png
new file mode 100644
index 00000000000..19a07d162fb
--- /dev/null
+++ b/app/assets/images/emoji/lock_with_ink_pen.png
diff --git a/app/assets/images/emoji/lollipop.png b/app/assets/images/emoji/lollipop.png
new file mode 100644
index 00000000000..ad76d7bf916
--- /dev/null
+++ b/app/assets/images/emoji/lollipop.png
diff --git a/app/assets/images/emoji/loop.png b/app/assets/images/emoji/loop.png
new file mode 100644
index 00000000000..0b82c8fe315
--- /dev/null
+++ b/app/assets/images/emoji/loop.png
diff --git a/app/assets/images/emoji/loud_sound.png b/app/assets/images/emoji/loud_sound.png
new file mode 100644
index 00000000000..8370033a539
--- /dev/null
+++ b/app/assets/images/emoji/loud_sound.png
diff --git a/app/assets/images/emoji/loudspeaker.png b/app/assets/images/emoji/loudspeaker.png
new file mode 100644
index 00000000000..5fd76a95b82
--- /dev/null
+++ b/app/assets/images/emoji/loudspeaker.png
diff --git a/app/assets/images/emoji/love_hotel.png b/app/assets/images/emoji/love_hotel.png
new file mode 100644
index 00000000000..5e136be6f8b
--- /dev/null
+++ b/app/assets/images/emoji/love_hotel.png
diff --git a/app/assets/images/emoji/love_letter.png b/app/assets/images/emoji/love_letter.png
new file mode 100644
index 00000000000..3c3c767e784
--- /dev/null
+++ b/app/assets/images/emoji/love_letter.png
diff --git a/app/assets/images/emoji/low_brightness.png b/app/assets/images/emoji/low_brightness.png
new file mode 100644
index 00000000000..543011d3961
--- /dev/null
+++ b/app/assets/images/emoji/low_brightness.png
diff --git a/app/assets/images/emoji/lying_face.png b/app/assets/images/emoji/lying_face.png
new file mode 100644
index 00000000000..02827e2628b
--- /dev/null
+++ b/app/assets/images/emoji/lying_face.png
diff --git a/app/assets/images/emoji/m.png b/app/assets/images/emoji/m.png
new file mode 100644
index 00000000000..8a3506fc1d7
--- /dev/null
+++ b/app/assets/images/emoji/m.png
diff --git a/app/assets/images/emoji/mag.png b/app/assets/images/emoji/mag.png
new file mode 100644
index 00000000000..55487156ac6
--- /dev/null
+++ b/app/assets/images/emoji/mag.png
diff --git a/app/assets/images/emoji/mag_right.png b/app/assets/images/emoji/mag_right.png
new file mode 100644
index 00000000000..0f4b1bca876
--- /dev/null
+++ b/app/assets/images/emoji/mag_right.png
diff --git a/app/assets/images/emoji/mahjong.png b/app/assets/images/emoji/mahjong.png
new file mode 100644
index 00000000000..66fd32025b2
--- /dev/null
+++ b/app/assets/images/emoji/mahjong.png
diff --git a/app/assets/images/emoji/mailbox.png b/app/assets/images/emoji/mailbox.png
new file mode 100644
index 00000000000..ef5174e40dd
--- /dev/null
+++ b/app/assets/images/emoji/mailbox.png
diff --git a/app/assets/images/emoji/mailbox_closed.png b/app/assets/images/emoji/mailbox_closed.png
new file mode 100644
index 00000000000..ddc705db0d8
--- /dev/null
+++ b/app/assets/images/emoji/mailbox_closed.png
diff --git a/app/assets/images/emoji/mailbox_with_mail.png b/app/assets/images/emoji/mailbox_with_mail.png
new file mode 100644
index 00000000000..5460616a5b1
--- /dev/null
+++ b/app/assets/images/emoji/mailbox_with_mail.png
diff --git a/app/assets/images/emoji/mailbox_with_no_mail.png b/app/assets/images/emoji/mailbox_with_no_mail.png
new file mode 100644
index 00000000000..f9aeee6b15a
--- /dev/null
+++ b/app/assets/images/emoji/mailbox_with_no_mail.png
diff --git a/app/assets/images/emoji/man.png b/app/assets/images/emoji/man.png
new file mode 100644
index 00000000000..857a02e5146
--- /dev/null
+++ b/app/assets/images/emoji/man.png
diff --git a/app/assets/images/emoji/man_dancing.png b/app/assets/images/emoji/man_dancing.png
new file mode 100644
index 00000000000..ccff3bede5a
--- /dev/null
+++ b/app/assets/images/emoji/man_dancing.png
diff --git a/app/assets/images/emoji/man_dancing_tone1.png b/app/assets/images/emoji/man_dancing_tone1.png
new file mode 100644
index 00000000000..e0b9f82d905
--- /dev/null
+++ b/app/assets/images/emoji/man_dancing_tone1.png
diff --git a/app/assets/images/emoji/man_dancing_tone2.png b/app/assets/images/emoji/man_dancing_tone2.png
new file mode 100644
index 00000000000..a5beed56e2e
--- /dev/null
+++ b/app/assets/images/emoji/man_dancing_tone2.png
diff --git a/app/assets/images/emoji/man_dancing_tone3.png b/app/assets/images/emoji/man_dancing_tone3.png
new file mode 100644
index 00000000000..2fa20180a6e
--- /dev/null
+++ b/app/assets/images/emoji/man_dancing_tone3.png
diff --git a/app/assets/images/emoji/man_dancing_tone4.png b/app/assets/images/emoji/man_dancing_tone4.png
new file mode 100644
index 00000000000..bd3528c83ba
--- /dev/null
+++ b/app/assets/images/emoji/man_dancing_tone4.png
diff --git a/app/assets/images/emoji/man_dancing_tone5.png b/app/assets/images/emoji/man_dancing_tone5.png
new file mode 100644
index 00000000000..41fd4f880c9
--- /dev/null
+++ b/app/assets/images/emoji/man_dancing_tone5.png
diff --git a/app/assets/images/emoji/man_in_tuxedo.png b/app/assets/images/emoji/man_in_tuxedo.png
new file mode 100644
index 00000000000..5f7e9303f89
--- /dev/null
+++ b/app/assets/images/emoji/man_in_tuxedo.png
diff --git a/app/assets/images/emoji/man_in_tuxedo_tone1.png b/app/assets/images/emoji/man_in_tuxedo_tone1.png
new file mode 100644
index 00000000000..7b6b3acd99b
--- /dev/null
+++ b/app/assets/images/emoji/man_in_tuxedo_tone1.png
diff --git a/app/assets/images/emoji/man_in_tuxedo_tone2.png b/app/assets/images/emoji/man_in_tuxedo_tone2.png
new file mode 100644
index 00000000000..7975191b360
--- /dev/null
+++ b/app/assets/images/emoji/man_in_tuxedo_tone2.png
diff --git a/app/assets/images/emoji/man_in_tuxedo_tone3.png b/app/assets/images/emoji/man_in_tuxedo_tone3.png
new file mode 100644
index 00000000000..a2816f600ae
--- /dev/null
+++ b/app/assets/images/emoji/man_in_tuxedo_tone3.png
diff --git a/app/assets/images/emoji/man_in_tuxedo_tone4.png b/app/assets/images/emoji/man_in_tuxedo_tone4.png
new file mode 100644
index 00000000000..ea8291760f9
--- /dev/null
+++ b/app/assets/images/emoji/man_in_tuxedo_tone4.png
diff --git a/app/assets/images/emoji/man_in_tuxedo_tone5.png b/app/assets/images/emoji/man_in_tuxedo_tone5.png
new file mode 100644
index 00000000000..c743e05fc5e
--- /dev/null
+++ b/app/assets/images/emoji/man_in_tuxedo_tone5.png
diff --git a/app/assets/images/emoji/man_tone1.png b/app/assets/images/emoji/man_tone1.png
new file mode 100644
index 00000000000..bb86e963a80
--- /dev/null
+++ b/app/assets/images/emoji/man_tone1.png
diff --git a/app/assets/images/emoji/man_tone2.png b/app/assets/images/emoji/man_tone2.png
new file mode 100644
index 00000000000..fdeeaff46f5
--- /dev/null
+++ b/app/assets/images/emoji/man_tone2.png
diff --git a/app/assets/images/emoji/man_tone3.png b/app/assets/images/emoji/man_tone3.png
new file mode 100644
index 00000000000..7ae0b5df9cf
--- /dev/null
+++ b/app/assets/images/emoji/man_tone3.png
diff --git a/app/assets/images/emoji/man_tone4.png b/app/assets/images/emoji/man_tone4.png
new file mode 100644
index 00000000000..db14cde99b8
--- /dev/null
+++ b/app/assets/images/emoji/man_tone4.png
diff --git a/app/assets/images/emoji/man_tone5.png b/app/assets/images/emoji/man_tone5.png
new file mode 100644
index 00000000000..7c67a70529c
--- /dev/null
+++ b/app/assets/images/emoji/man_tone5.png
diff --git a/app/assets/images/emoji/man_with_gua_pi_mao.png b/app/assets/images/emoji/man_with_gua_pi_mao.png
new file mode 100644
index 00000000000..7841e13608d
--- /dev/null
+++ b/app/assets/images/emoji/man_with_gua_pi_mao.png
diff --git a/app/assets/images/emoji/man_with_gua_pi_mao_tone1.png b/app/assets/images/emoji/man_with_gua_pi_mao_tone1.png
new file mode 100644
index 00000000000..5b7b3def19c
--- /dev/null
+++ b/app/assets/images/emoji/man_with_gua_pi_mao_tone1.png
diff --git a/app/assets/images/emoji/man_with_gua_pi_mao_tone2.png b/app/assets/images/emoji/man_with_gua_pi_mao_tone2.png
new file mode 100644
index 00000000000..c8b9cf87f4b
--- /dev/null
+++ b/app/assets/images/emoji/man_with_gua_pi_mao_tone2.png
diff --git a/app/assets/images/emoji/man_with_gua_pi_mao_tone3.png b/app/assets/images/emoji/man_with_gua_pi_mao_tone3.png
new file mode 100644
index 00000000000..effdd0c4c84
--- /dev/null
+++ b/app/assets/images/emoji/man_with_gua_pi_mao_tone3.png
diff --git a/app/assets/images/emoji/man_with_gua_pi_mao_tone4.png b/app/assets/images/emoji/man_with_gua_pi_mao_tone4.png
new file mode 100644
index 00000000000..f885ff46fa1
--- /dev/null
+++ b/app/assets/images/emoji/man_with_gua_pi_mao_tone4.png
diff --git a/app/assets/images/emoji/man_with_gua_pi_mao_tone5.png b/app/assets/images/emoji/man_with_gua_pi_mao_tone5.png
new file mode 100644
index 00000000000..a6d55ca1380
--- /dev/null
+++ b/app/assets/images/emoji/man_with_gua_pi_mao_tone5.png
diff --git a/app/assets/images/emoji/man_with_turban.png b/app/assets/images/emoji/man_with_turban.png
new file mode 100644
index 00000000000..51cf047f966
--- /dev/null
+++ b/app/assets/images/emoji/man_with_turban.png
diff --git a/app/assets/images/emoji/man_with_turban_tone1.png b/app/assets/images/emoji/man_with_turban_tone1.png
new file mode 100644
index 00000000000..1e12ee4b231
--- /dev/null
+++ b/app/assets/images/emoji/man_with_turban_tone1.png
diff --git a/app/assets/images/emoji/man_with_turban_tone2.png b/app/assets/images/emoji/man_with_turban_tone2.png
new file mode 100644
index 00000000000..37de4cceb23
--- /dev/null
+++ b/app/assets/images/emoji/man_with_turban_tone2.png
diff --git a/app/assets/images/emoji/man_with_turban_tone3.png b/app/assets/images/emoji/man_with_turban_tone3.png
new file mode 100644
index 00000000000..f607afd3450
--- /dev/null
+++ b/app/assets/images/emoji/man_with_turban_tone3.png
diff --git a/app/assets/images/emoji/man_with_turban_tone4.png b/app/assets/images/emoji/man_with_turban_tone4.png
new file mode 100644
index 00000000000..c05695888af
--- /dev/null
+++ b/app/assets/images/emoji/man_with_turban_tone4.png
diff --git a/app/assets/images/emoji/man_with_turban_tone5.png b/app/assets/images/emoji/man_with_turban_tone5.png
new file mode 100644
index 00000000000..4b4ff64720b
--- /dev/null
+++ b/app/assets/images/emoji/man_with_turban_tone5.png
diff --git a/app/assets/images/emoji/mans_shoe.png b/app/assets/images/emoji/mans_shoe.png
new file mode 100644
index 00000000000..4bf7541032c
--- /dev/null
+++ b/app/assets/images/emoji/mans_shoe.png
diff --git a/app/assets/images/emoji/map.png b/app/assets/images/emoji/map.png
new file mode 100644
index 00000000000..15efe32c798
--- /dev/null
+++ b/app/assets/images/emoji/map.png
diff --git a/app/assets/images/emoji/maple_leaf.png b/app/assets/images/emoji/maple_leaf.png
new file mode 100644
index 00000000000..c49acea67f7
--- /dev/null
+++ b/app/assets/images/emoji/maple_leaf.png
diff --git a/app/assets/images/emoji/martial_arts_uniform.png b/app/assets/images/emoji/martial_arts_uniform.png
new file mode 100644
index 00000000000..8d6114761f6
--- /dev/null
+++ b/app/assets/images/emoji/martial_arts_uniform.png
diff --git a/app/assets/images/emoji/mask.png b/app/assets/images/emoji/mask.png
new file mode 100644
index 00000000000..1e800acd1c0
--- /dev/null
+++ b/app/assets/images/emoji/mask.png
diff --git a/app/assets/images/emoji/massage.png b/app/assets/images/emoji/massage.png
new file mode 100644
index 00000000000..b91d845e374
--- /dev/null
+++ b/app/assets/images/emoji/massage.png
diff --git a/app/assets/images/emoji/massage_tone1.png b/app/assets/images/emoji/massage_tone1.png
new file mode 100644
index 00000000000..e0f415d3186
--- /dev/null
+++ b/app/assets/images/emoji/massage_tone1.png
diff --git a/app/assets/images/emoji/massage_tone2.png b/app/assets/images/emoji/massage_tone2.png
new file mode 100644
index 00000000000..0bb244a270b
--- /dev/null
+++ b/app/assets/images/emoji/massage_tone2.png
diff --git a/app/assets/images/emoji/massage_tone3.png b/app/assets/images/emoji/massage_tone3.png
new file mode 100644
index 00000000000..a117ee81a22
--- /dev/null
+++ b/app/assets/images/emoji/massage_tone3.png
diff --git a/app/assets/images/emoji/massage_tone4.png b/app/assets/images/emoji/massage_tone4.png
new file mode 100644
index 00000000000..6f42ab017f4
--- /dev/null
+++ b/app/assets/images/emoji/massage_tone4.png
diff --git a/app/assets/images/emoji/massage_tone5.png b/app/assets/images/emoji/massage_tone5.png
new file mode 100644
index 00000000000..6a388c0d0b5
--- /dev/null
+++ b/app/assets/images/emoji/massage_tone5.png
diff --git a/app/assets/images/emoji/meat_on_bone.png b/app/assets/images/emoji/meat_on_bone.png
new file mode 100644
index 00000000000..b20a59d1690
--- /dev/null
+++ b/app/assets/images/emoji/meat_on_bone.png
diff --git a/app/assets/images/emoji/medal.png b/app/assets/images/emoji/medal.png
new file mode 100644
index 00000000000..b85896b14da
--- /dev/null
+++ b/app/assets/images/emoji/medal.png
diff --git a/app/assets/images/emoji/mega.png b/app/assets/images/emoji/mega.png
new file mode 100644
index 00000000000..4e6735188e3
--- /dev/null
+++ b/app/assets/images/emoji/mega.png
diff --git a/app/assets/images/emoji/melon.png b/app/assets/images/emoji/melon.png
new file mode 100644
index 00000000000..c01232d419d
--- /dev/null
+++ b/app/assets/images/emoji/melon.png
diff --git a/app/assets/images/emoji/menorah.png b/app/assets/images/emoji/menorah.png
new file mode 100644
index 00000000000..b4297362869
--- /dev/null
+++ b/app/assets/images/emoji/menorah.png
diff --git a/app/assets/images/emoji/mens.png b/app/assets/images/emoji/mens.png
new file mode 100644
index 00000000000..f5a1e1ba0cd
--- /dev/null
+++ b/app/assets/images/emoji/mens.png
diff --git a/app/assets/images/emoji/metal.png b/app/assets/images/emoji/metal.png
new file mode 100644
index 00000000000..4aa6e7e0a44
--- /dev/null
+++ b/app/assets/images/emoji/metal.png
diff --git a/app/assets/images/emoji/metal_tone1.png b/app/assets/images/emoji/metal_tone1.png
new file mode 100644
index 00000000000..c080d2addbd
--- /dev/null
+++ b/app/assets/images/emoji/metal_tone1.png
diff --git a/app/assets/images/emoji/metal_tone2.png b/app/assets/images/emoji/metal_tone2.png
new file mode 100644
index 00000000000..12313529bcf
--- /dev/null
+++ b/app/assets/images/emoji/metal_tone2.png
diff --git a/app/assets/images/emoji/metal_tone3.png b/app/assets/images/emoji/metal_tone3.png
new file mode 100644
index 00000000000..ca9be6ae67b
--- /dev/null
+++ b/app/assets/images/emoji/metal_tone3.png
diff --git a/app/assets/images/emoji/metal_tone4.png b/app/assets/images/emoji/metal_tone4.png
new file mode 100644
index 00000000000..abe28cbf890
--- /dev/null
+++ b/app/assets/images/emoji/metal_tone4.png
diff --git a/app/assets/images/emoji/metal_tone5.png b/app/assets/images/emoji/metal_tone5.png
new file mode 100644
index 00000000000..0c6b5dd34ed
--- /dev/null
+++ b/app/assets/images/emoji/metal_tone5.png
diff --git a/app/assets/images/emoji/metro.png b/app/assets/images/emoji/metro.png
new file mode 100644
index 00000000000..1de8f0551f3
--- /dev/null
+++ b/app/assets/images/emoji/metro.png
diff --git a/app/assets/images/emoji/microphone.png b/app/assets/images/emoji/microphone.png
new file mode 100644
index 00000000000..d4e6b0def25
--- /dev/null
+++ b/app/assets/images/emoji/microphone.png
diff --git a/app/assets/images/emoji/microphone2.png b/app/assets/images/emoji/microphone2.png
new file mode 100644
index 00000000000..cd9167654ff
--- /dev/null
+++ b/app/assets/images/emoji/microphone2.png
diff --git a/app/assets/images/emoji/microscope.png b/app/assets/images/emoji/microscope.png
new file mode 100644
index 00000000000..90f5acf6a78
--- /dev/null
+++ b/app/assets/images/emoji/microscope.png
diff --git a/app/assets/images/emoji/middle_finger.png b/app/assets/images/emoji/middle_finger.png
new file mode 100644
index 00000000000..697f7a25eb2
--- /dev/null
+++ b/app/assets/images/emoji/middle_finger.png
diff --git a/app/assets/images/emoji/middle_finger_tone1.png b/app/assets/images/emoji/middle_finger_tone1.png
new file mode 100644
index 00000000000..61ef12a1548
--- /dev/null
+++ b/app/assets/images/emoji/middle_finger_tone1.png
diff --git a/app/assets/images/emoji/middle_finger_tone2.png b/app/assets/images/emoji/middle_finger_tone2.png
new file mode 100644
index 00000000000..c31a69be9af
--- /dev/null
+++ b/app/assets/images/emoji/middle_finger_tone2.png
diff --git a/app/assets/images/emoji/middle_finger_tone3.png b/app/assets/images/emoji/middle_finger_tone3.png
new file mode 100644
index 00000000000..73ac216ce63
--- /dev/null
+++ b/app/assets/images/emoji/middle_finger_tone3.png
diff --git a/app/assets/images/emoji/middle_finger_tone4.png b/app/assets/images/emoji/middle_finger_tone4.png
new file mode 100644
index 00000000000..80b8ab7706d
--- /dev/null
+++ b/app/assets/images/emoji/middle_finger_tone4.png
diff --git a/app/assets/images/emoji/middle_finger_tone5.png b/app/assets/images/emoji/middle_finger_tone5.png
new file mode 100644
index 00000000000..a8826b196e8
--- /dev/null
+++ b/app/assets/images/emoji/middle_finger_tone5.png
diff --git a/app/assets/images/emoji/military_medal.png b/app/assets/images/emoji/military_medal.png
new file mode 100644
index 00000000000..ecd3fb03584
--- /dev/null
+++ b/app/assets/images/emoji/military_medal.png
diff --git a/app/assets/images/emoji/milk.png b/app/assets/images/emoji/milk.png
new file mode 100644
index 00000000000..e4fcf2e64f3
--- /dev/null
+++ b/app/assets/images/emoji/milk.png
diff --git a/app/assets/images/emoji/milky_way.png b/app/assets/images/emoji/milky_way.png
new file mode 100644
index 00000000000..b2b8ac59c5e
--- /dev/null
+++ b/app/assets/images/emoji/milky_way.png
diff --git a/app/assets/images/emoji/minibus.png b/app/assets/images/emoji/minibus.png
new file mode 100644
index 00000000000..c60dd8f47ab
--- /dev/null
+++ b/app/assets/images/emoji/minibus.png
diff --git a/app/assets/images/emoji/minidisc.png b/app/assets/images/emoji/minidisc.png
new file mode 100644
index 00000000000..9fa94cfbe74
--- /dev/null
+++ b/app/assets/images/emoji/minidisc.png
diff --git a/app/assets/images/emoji/mobile_phone_off.png b/app/assets/images/emoji/mobile_phone_off.png
new file mode 100644
index 00000000000..8b661ec1c94
--- /dev/null
+++ b/app/assets/images/emoji/mobile_phone_off.png
diff --git a/app/assets/images/emoji/money_mouth.png b/app/assets/images/emoji/money_mouth.png
new file mode 100644
index 00000000000..75fd1e90cb0
--- /dev/null
+++ b/app/assets/images/emoji/money_mouth.png
diff --git a/app/assets/images/emoji/money_with_wings.png b/app/assets/images/emoji/money_with_wings.png
new file mode 100644
index 00000000000..f022b04b3c2
--- /dev/null
+++ b/app/assets/images/emoji/money_with_wings.png
diff --git a/app/assets/images/emoji/moneybag.png b/app/assets/images/emoji/moneybag.png
new file mode 100644
index 00000000000..b9296be0902
--- /dev/null
+++ b/app/assets/images/emoji/moneybag.png
diff --git a/app/assets/images/emoji/monkey.png b/app/assets/images/emoji/monkey.png
new file mode 100644
index 00000000000..9fae29448e3
--- /dev/null
+++ b/app/assets/images/emoji/monkey.png
diff --git a/app/assets/images/emoji/monkey_face.png b/app/assets/images/emoji/monkey_face.png
new file mode 100644
index 00000000000..7cab9b91a82
--- /dev/null
+++ b/app/assets/images/emoji/monkey_face.png
diff --git a/app/assets/images/emoji/monorail.png b/app/assets/images/emoji/monorail.png
new file mode 100644
index 00000000000..11eb1f574bf
--- /dev/null
+++ b/app/assets/images/emoji/monorail.png
diff --git a/app/assets/images/emoji/mortar_board.png b/app/assets/images/emoji/mortar_board.png
new file mode 100644
index 00000000000..8b17ddd9d00
--- /dev/null
+++ b/app/assets/images/emoji/mortar_board.png
diff --git a/app/assets/images/emoji/mosque.png b/app/assets/images/emoji/mosque.png
new file mode 100644
index 00000000000..ef770b26d96
--- /dev/null
+++ b/app/assets/images/emoji/mosque.png
diff --git a/app/assets/images/emoji/motor_scooter.png b/app/assets/images/emoji/motor_scooter.png
new file mode 100644
index 00000000000..c5afa72d807
--- /dev/null
+++ b/app/assets/images/emoji/motor_scooter.png
diff --git a/app/assets/images/emoji/motorboat.png b/app/assets/images/emoji/motorboat.png
new file mode 100644
index 00000000000..0506db1a40f
--- /dev/null
+++ b/app/assets/images/emoji/motorboat.png
diff --git a/app/assets/images/emoji/motorcycle.png b/app/assets/images/emoji/motorcycle.png
new file mode 100644
index 00000000000..3d1d567e8ec
--- /dev/null
+++ b/app/assets/images/emoji/motorcycle.png
diff --git a/app/assets/images/emoji/motorway.png b/app/assets/images/emoji/motorway.png
new file mode 100644
index 00000000000..8c3d3d03e3f
--- /dev/null
+++ b/app/assets/images/emoji/motorway.png
diff --git a/app/assets/images/emoji/mount_fuji.png b/app/assets/images/emoji/mount_fuji.png
new file mode 100644
index 00000000000..88a54752458
--- /dev/null
+++ b/app/assets/images/emoji/mount_fuji.png
diff --git a/app/assets/images/emoji/mountain.png b/app/assets/images/emoji/mountain.png
new file mode 100644
index 00000000000..6722ebdd294
--- /dev/null
+++ b/app/assets/images/emoji/mountain.png
diff --git a/app/assets/images/emoji/mountain_bicyclist.png b/app/assets/images/emoji/mountain_bicyclist.png
new file mode 100644
index 00000000000..41d3dc3ac6f
--- /dev/null
+++ b/app/assets/images/emoji/mountain_bicyclist.png
diff --git a/app/assets/images/emoji/mountain_bicyclist_tone1.png b/app/assets/images/emoji/mountain_bicyclist_tone1.png
new file mode 100644
index 00000000000..e9f1daf5e40
--- /dev/null
+++ b/app/assets/images/emoji/mountain_bicyclist_tone1.png
diff --git a/app/assets/images/emoji/mountain_bicyclist_tone2.png b/app/assets/images/emoji/mountain_bicyclist_tone2.png
new file mode 100644
index 00000000000..555b9e29d4d
--- /dev/null
+++ b/app/assets/images/emoji/mountain_bicyclist_tone2.png
diff --git a/app/assets/images/emoji/mountain_bicyclist_tone3.png b/app/assets/images/emoji/mountain_bicyclist_tone3.png
new file mode 100644
index 00000000000..7df5508ec8c
--- /dev/null
+++ b/app/assets/images/emoji/mountain_bicyclist_tone3.png
diff --git a/app/assets/images/emoji/mountain_bicyclist_tone4.png b/app/assets/images/emoji/mountain_bicyclist_tone4.png
new file mode 100644
index 00000000000..f94b3450697
--- /dev/null
+++ b/app/assets/images/emoji/mountain_bicyclist_tone4.png
diff --git a/app/assets/images/emoji/mountain_bicyclist_tone5.png b/app/assets/images/emoji/mountain_bicyclist_tone5.png
new file mode 100644
index 00000000000..16a45861e1f
--- /dev/null
+++ b/app/assets/images/emoji/mountain_bicyclist_tone5.png
diff --git a/app/assets/images/emoji/mountain_cableway.png b/app/assets/images/emoji/mountain_cableway.png
new file mode 100644
index 00000000000..1dea73ca53b
--- /dev/null
+++ b/app/assets/images/emoji/mountain_cableway.png
diff --git a/app/assets/images/emoji/mountain_railway.png b/app/assets/images/emoji/mountain_railway.png
new file mode 100644
index 00000000000..ade2218e469
--- /dev/null
+++ b/app/assets/images/emoji/mountain_railway.png
diff --git a/app/assets/images/emoji/mountain_snow.png b/app/assets/images/emoji/mountain_snow.png
new file mode 100644
index 00000000000..76e1cfd8313
--- /dev/null
+++ b/app/assets/images/emoji/mountain_snow.png
diff --git a/app/assets/images/emoji/mouse.png b/app/assets/images/emoji/mouse.png
new file mode 100644
index 00000000000..50afcd3262e
--- /dev/null
+++ b/app/assets/images/emoji/mouse.png
diff --git a/app/assets/images/emoji/mouse2.png b/app/assets/images/emoji/mouse2.png
new file mode 100644
index 00000000000..20fb041f09f
--- /dev/null
+++ b/app/assets/images/emoji/mouse2.png
diff --git a/app/assets/images/emoji/mouse_three_button.png b/app/assets/images/emoji/mouse_three_button.png
new file mode 100644
index 00000000000..e84e96ff6e8
--- /dev/null
+++ b/app/assets/images/emoji/mouse_three_button.png
diff --git a/app/assets/images/emoji/movie_camera.png b/app/assets/images/emoji/movie_camera.png
new file mode 100644
index 00000000000..4e73b130155
--- /dev/null
+++ b/app/assets/images/emoji/movie_camera.png
diff --git a/app/assets/images/emoji/moyai.png b/app/assets/images/emoji/moyai.png
new file mode 100644
index 00000000000..e6a7779c45b
--- /dev/null
+++ b/app/assets/images/emoji/moyai.png
diff --git a/app/assets/images/emoji/mrs_claus.png b/app/assets/images/emoji/mrs_claus.png
new file mode 100644
index 00000000000..078f0657f95
--- /dev/null
+++ b/app/assets/images/emoji/mrs_claus.png
diff --git a/app/assets/images/emoji/mrs_claus_tone1.png b/app/assets/images/emoji/mrs_claus_tone1.png
new file mode 100644
index 00000000000..d8a695d7035
--- /dev/null
+++ b/app/assets/images/emoji/mrs_claus_tone1.png
diff --git a/app/assets/images/emoji/mrs_claus_tone2.png b/app/assets/images/emoji/mrs_claus_tone2.png
new file mode 100644
index 00000000000..0e17e8c51f3
--- /dev/null
+++ b/app/assets/images/emoji/mrs_claus_tone2.png
diff --git a/app/assets/images/emoji/mrs_claus_tone3.png b/app/assets/images/emoji/mrs_claus_tone3.png
new file mode 100644
index 00000000000..c3ee4d1dfae
--- /dev/null
+++ b/app/assets/images/emoji/mrs_claus_tone3.png
diff --git a/app/assets/images/emoji/mrs_claus_tone4.png b/app/assets/images/emoji/mrs_claus_tone4.png
new file mode 100644
index 00000000000..68a556da2fe
--- /dev/null
+++ b/app/assets/images/emoji/mrs_claus_tone4.png
diff --git a/app/assets/images/emoji/mrs_claus_tone5.png b/app/assets/images/emoji/mrs_claus_tone5.png
new file mode 100644
index 00000000000..ccab3c40ff2
--- /dev/null
+++ b/app/assets/images/emoji/mrs_claus_tone5.png
diff --git a/app/assets/images/emoji/muscle.png b/app/assets/images/emoji/muscle.png
new file mode 100644
index 00000000000..7e67c1880f7
--- /dev/null
+++ b/app/assets/images/emoji/muscle.png
diff --git a/app/assets/images/emoji/muscle_tone1.png b/app/assets/images/emoji/muscle_tone1.png
new file mode 100644
index 00000000000..1522942ce51
--- /dev/null
+++ b/app/assets/images/emoji/muscle_tone1.png
diff --git a/app/assets/images/emoji/muscle_tone2.png b/app/assets/images/emoji/muscle_tone2.png
new file mode 100644
index 00000000000..569c6e832ca
--- /dev/null
+++ b/app/assets/images/emoji/muscle_tone2.png
diff --git a/app/assets/images/emoji/muscle_tone3.png b/app/assets/images/emoji/muscle_tone3.png
new file mode 100644
index 00000000000..0a76b00fa89
--- /dev/null
+++ b/app/assets/images/emoji/muscle_tone3.png
diff --git a/app/assets/images/emoji/muscle_tone4.png b/app/assets/images/emoji/muscle_tone4.png
new file mode 100644
index 00000000000..f0cf31328e0
--- /dev/null
+++ b/app/assets/images/emoji/muscle_tone4.png
diff --git a/app/assets/images/emoji/muscle_tone5.png b/app/assets/images/emoji/muscle_tone5.png
new file mode 100644
index 00000000000..4fda92460e8
--- /dev/null
+++ b/app/assets/images/emoji/muscle_tone5.png
diff --git a/app/assets/images/emoji/mushroom.png b/app/assets/images/emoji/mushroom.png
new file mode 100644
index 00000000000..dd85742ba2c
--- /dev/null
+++ b/app/assets/images/emoji/mushroom.png
diff --git a/app/assets/images/emoji/musical_keyboard.png b/app/assets/images/emoji/musical_keyboard.png
new file mode 100644
index 00000000000..442b7456842
--- /dev/null
+++ b/app/assets/images/emoji/musical_keyboard.png
diff --git a/app/assets/images/emoji/musical_note.png b/app/assets/images/emoji/musical_note.png
new file mode 100644
index 00000000000..06691ef61bb
--- /dev/null
+++ b/app/assets/images/emoji/musical_note.png
diff --git a/app/assets/images/emoji/musical_score.png b/app/assets/images/emoji/musical_score.png
new file mode 100644
index 00000000000..47dc05a8ef5
--- /dev/null
+++ b/app/assets/images/emoji/musical_score.png
diff --git a/app/assets/images/emoji/mute.png b/app/assets/images/emoji/mute.png
new file mode 100644
index 00000000000..7c1788e5075
--- /dev/null
+++ b/app/assets/images/emoji/mute.png
diff --git a/app/assets/images/emoji/nail_care.png b/app/assets/images/emoji/nail_care.png
new file mode 100644
index 00000000000..aa52af7050d
--- /dev/null
+++ b/app/assets/images/emoji/nail_care.png
diff --git a/app/assets/images/emoji/nail_care_tone1.png b/app/assets/images/emoji/nail_care_tone1.png
new file mode 100644
index 00000000000..26e883dd244
--- /dev/null
+++ b/app/assets/images/emoji/nail_care_tone1.png
diff --git a/app/assets/images/emoji/nail_care_tone2.png b/app/assets/images/emoji/nail_care_tone2.png
new file mode 100644
index 00000000000..61257b47ea3
--- /dev/null
+++ b/app/assets/images/emoji/nail_care_tone2.png
diff --git a/app/assets/images/emoji/nail_care_tone3.png b/app/assets/images/emoji/nail_care_tone3.png
new file mode 100644
index 00000000000..29871b05f62
--- /dev/null
+++ b/app/assets/images/emoji/nail_care_tone3.png
diff --git a/app/assets/images/emoji/nail_care_tone4.png b/app/assets/images/emoji/nail_care_tone4.png
new file mode 100644
index 00000000000..2881de0b17d
--- /dev/null
+++ b/app/assets/images/emoji/nail_care_tone4.png
diff --git a/app/assets/images/emoji/nail_care_tone5.png b/app/assets/images/emoji/nail_care_tone5.png
new file mode 100644
index 00000000000..a0b7c0a45a6
--- /dev/null
+++ b/app/assets/images/emoji/nail_care_tone5.png
diff --git a/app/assets/images/emoji/name_badge.png b/app/assets/images/emoji/name_badge.png
new file mode 100644
index 00000000000..ec5ee213e20
--- /dev/null
+++ b/app/assets/images/emoji/name_badge.png
diff --git a/app/assets/images/emoji/nauseated_face.png b/app/assets/images/emoji/nauseated_face.png
new file mode 100644
index 00000000000..a566c109c28
--- /dev/null
+++ b/app/assets/images/emoji/nauseated_face.png
diff --git a/app/assets/images/emoji/necktie.png b/app/assets/images/emoji/necktie.png
new file mode 100644
index 00000000000..1804e7f3ff3
--- /dev/null
+++ b/app/assets/images/emoji/necktie.png
diff --git a/app/assets/images/emoji/negative_squared_cross_mark.png b/app/assets/images/emoji/negative_squared_cross_mark.png
new file mode 100644
index 00000000000..dae487f1f98
--- /dev/null
+++ b/app/assets/images/emoji/negative_squared_cross_mark.png
diff --git a/app/assets/images/emoji/nerd.png b/app/assets/images/emoji/nerd.png
new file mode 100644
index 00000000000..7820bd581dc
--- /dev/null
+++ b/app/assets/images/emoji/nerd.png
diff --git a/app/assets/images/emoji/neutral_face.png b/app/assets/images/emoji/neutral_face.png
new file mode 100644
index 00000000000..065d193afe4
--- /dev/null
+++ b/app/assets/images/emoji/neutral_face.png
diff --git a/app/assets/images/emoji/new.png b/app/assets/images/emoji/new.png
new file mode 100644
index 00000000000..b4f85488d1a
--- /dev/null
+++ b/app/assets/images/emoji/new.png
diff --git a/app/assets/images/emoji/new_moon.png b/app/assets/images/emoji/new_moon.png
new file mode 100644
index 00000000000..ecff72caa42
--- /dev/null
+++ b/app/assets/images/emoji/new_moon.png
diff --git a/app/assets/images/emoji/new_moon_with_face.png b/app/assets/images/emoji/new_moon_with_face.png
new file mode 100644
index 00000000000..150dd12400c
--- /dev/null
+++ b/app/assets/images/emoji/new_moon_with_face.png
diff --git a/app/assets/images/emoji/newspaper.png b/app/assets/images/emoji/newspaper.png
new file mode 100644
index 00000000000..2aa8f060bde
--- /dev/null
+++ b/app/assets/images/emoji/newspaper.png
diff --git a/app/assets/images/emoji/newspaper2.png b/app/assets/images/emoji/newspaper2.png
new file mode 100644
index 00000000000..f64748df2b2
--- /dev/null
+++ b/app/assets/images/emoji/newspaper2.png
diff --git a/app/assets/images/emoji/ng.png b/app/assets/images/emoji/ng.png
new file mode 100644
index 00000000000..ee8d20f5ebc
--- /dev/null
+++ b/app/assets/images/emoji/ng.png
diff --git a/app/assets/images/emoji/night_with_stars.png b/app/assets/images/emoji/night_with_stars.png
new file mode 100644
index 00000000000..ca2018f456d
--- /dev/null
+++ b/app/assets/images/emoji/night_with_stars.png
diff --git a/app/assets/images/emoji/nine.png b/app/assets/images/emoji/nine.png
new file mode 100644
index 00000000000..9fce3d1eca9
--- /dev/null
+++ b/app/assets/images/emoji/nine.png
diff --git a/app/assets/images/emoji/no_bell.png b/app/assets/images/emoji/no_bell.png
new file mode 100644
index 00000000000..15cb38dd1e7
--- /dev/null
+++ b/app/assets/images/emoji/no_bell.png
diff --git a/app/assets/images/emoji/no_bicycles.png b/app/assets/images/emoji/no_bicycles.png
new file mode 100644
index 00000000000..19c85421ce9
--- /dev/null
+++ b/app/assets/images/emoji/no_bicycles.png
diff --git a/app/assets/images/emoji/no_entry.png b/app/assets/images/emoji/no_entry.png
new file mode 100644
index 00000000000..476800fc5c6
--- /dev/null
+++ b/app/assets/images/emoji/no_entry.png
diff --git a/app/assets/images/emoji/no_entry_sign.png b/app/assets/images/emoji/no_entry_sign.png
new file mode 100644
index 00000000000..d2efd65e74b
--- /dev/null
+++ b/app/assets/images/emoji/no_entry_sign.png
diff --git a/app/assets/images/emoji/no_good.png b/app/assets/images/emoji/no_good.png
new file mode 100644
index 00000000000..ed577100322
--- /dev/null
+++ b/app/assets/images/emoji/no_good.png
diff --git a/app/assets/images/emoji/no_good_tone1.png b/app/assets/images/emoji/no_good_tone1.png
new file mode 100644
index 00000000000..5c1a3cbb884
--- /dev/null
+++ b/app/assets/images/emoji/no_good_tone1.png
diff --git a/app/assets/images/emoji/no_good_tone2.png b/app/assets/images/emoji/no_good_tone2.png
new file mode 100644
index 00000000000..80d8021f8fe
--- /dev/null
+++ b/app/assets/images/emoji/no_good_tone2.png
diff --git a/app/assets/images/emoji/no_good_tone3.png b/app/assets/images/emoji/no_good_tone3.png
new file mode 100644
index 00000000000..635e6a00815
--- /dev/null
+++ b/app/assets/images/emoji/no_good_tone3.png
diff --git a/app/assets/images/emoji/no_good_tone4.png b/app/assets/images/emoji/no_good_tone4.png
new file mode 100644
index 00000000000..b96e412a374
--- /dev/null
+++ b/app/assets/images/emoji/no_good_tone4.png
diff --git a/app/assets/images/emoji/no_good_tone5.png b/app/assets/images/emoji/no_good_tone5.png
new file mode 100644
index 00000000000..9a7084afa0a
--- /dev/null
+++ b/app/assets/images/emoji/no_good_tone5.png
diff --git a/app/assets/images/emoji/no_mobile_phones.png b/app/assets/images/emoji/no_mobile_phones.png
new file mode 100644
index 00000000000..7b1ae6ea579
--- /dev/null
+++ b/app/assets/images/emoji/no_mobile_phones.png
diff --git a/app/assets/images/emoji/no_mouth.png b/app/assets/images/emoji/no_mouth.png
new file mode 100644
index 00000000000..b642f6c1172
--- /dev/null
+++ b/app/assets/images/emoji/no_mouth.png
diff --git a/app/assets/images/emoji/no_pedestrians.png b/app/assets/images/emoji/no_pedestrians.png
new file mode 100644
index 00000000000..286aa577a23
--- /dev/null
+++ b/app/assets/images/emoji/no_pedestrians.png
diff --git a/app/assets/images/emoji/no_smoking.png b/app/assets/images/emoji/no_smoking.png
new file mode 100644
index 00000000000..586b8d29d05
--- /dev/null
+++ b/app/assets/images/emoji/no_smoking.png
diff --git a/app/assets/images/emoji/non-potable_water.png b/app/assets/images/emoji/non-potable_water.png
new file mode 100644
index 00000000000..827d4193f4e
--- /dev/null
+++ b/app/assets/images/emoji/non-potable_water.png
diff --git a/app/assets/images/emoji/nose.png b/app/assets/images/emoji/nose.png
new file mode 100644
index 00000000000..2f04ac5f98f
--- /dev/null
+++ b/app/assets/images/emoji/nose.png
diff --git a/app/assets/images/emoji/nose_tone1.png b/app/assets/images/emoji/nose_tone1.png
new file mode 100644
index 00000000000..8008d17506e
--- /dev/null
+++ b/app/assets/images/emoji/nose_tone1.png
diff --git a/app/assets/images/emoji/nose_tone2.png b/app/assets/images/emoji/nose_tone2.png
new file mode 100644
index 00000000000..ac17f26e827
--- /dev/null
+++ b/app/assets/images/emoji/nose_tone2.png
diff --git a/app/assets/images/emoji/nose_tone3.png b/app/assets/images/emoji/nose_tone3.png
new file mode 100644
index 00000000000..d8b6cbe0f8e
--- /dev/null
+++ b/app/assets/images/emoji/nose_tone3.png
diff --git a/app/assets/images/emoji/nose_tone4.png b/app/assets/images/emoji/nose_tone4.png
new file mode 100644
index 00000000000..004b2631e2e
--- /dev/null
+++ b/app/assets/images/emoji/nose_tone4.png
diff --git a/app/assets/images/emoji/nose_tone5.png b/app/assets/images/emoji/nose_tone5.png
new file mode 100644
index 00000000000..7b33821f6c9
--- /dev/null
+++ b/app/assets/images/emoji/nose_tone5.png
diff --git a/app/assets/images/emoji/notebook.png b/app/assets/images/emoji/notebook.png
new file mode 100644
index 00000000000..f6c28b4915d
--- /dev/null
+++ b/app/assets/images/emoji/notebook.png
diff --git a/app/assets/images/emoji/notebook_with_decorative_cover.png b/app/assets/images/emoji/notebook_with_decorative_cover.png
new file mode 100644
index 00000000000..03f566b6d2c
--- /dev/null
+++ b/app/assets/images/emoji/notebook_with_decorative_cover.png
diff --git a/app/assets/images/emoji/notepad_spiral.png b/app/assets/images/emoji/notepad_spiral.png
new file mode 100644
index 00000000000..85faa10d8ea
--- /dev/null
+++ b/app/assets/images/emoji/notepad_spiral.png
diff --git a/app/assets/images/emoji/notes.png b/app/assets/images/emoji/notes.png
new file mode 100644
index 00000000000..57d499aa181
--- /dev/null
+++ b/app/assets/images/emoji/notes.png
diff --git a/app/assets/images/emoji/nut_and_bolt.png b/app/assets/images/emoji/nut_and_bolt.png
new file mode 100644
index 00000000000..4b9ae155319
--- /dev/null
+++ b/app/assets/images/emoji/nut_and_bolt.png
diff --git a/app/assets/images/emoji/o.png b/app/assets/images/emoji/o.png
new file mode 100644
index 00000000000..3fe75ce4675
--- /dev/null
+++ b/app/assets/images/emoji/o.png
diff --git a/app/assets/images/emoji/o2.png b/app/assets/images/emoji/o2.png
new file mode 100644
index 00000000000..73278ba194a
--- /dev/null
+++ b/app/assets/images/emoji/o2.png
diff --git a/app/assets/images/emoji/ocean.png b/app/assets/images/emoji/ocean.png
new file mode 100644
index 00000000000..45ff1e87703
--- /dev/null
+++ b/app/assets/images/emoji/ocean.png
diff --git a/app/assets/images/emoji/octagonal_sign.png b/app/assets/images/emoji/octagonal_sign.png
new file mode 100644
index 00000000000..5ed61004045
--- /dev/null
+++ b/app/assets/images/emoji/octagonal_sign.png
diff --git a/app/assets/images/emoji/octopus.png b/app/assets/images/emoji/octopus.png
new file mode 100644
index 00000000000..72c84074aac
--- /dev/null
+++ b/app/assets/images/emoji/octopus.png
diff --git a/app/assets/images/emoji/oden.png b/app/assets/images/emoji/oden.png
new file mode 100644
index 00000000000..d38a849fece
--- /dev/null
+++ b/app/assets/images/emoji/oden.png
diff --git a/app/assets/images/emoji/office.png b/app/assets/images/emoji/office.png
new file mode 100644
index 00000000000..7eee927d1b0
--- /dev/null
+++ b/app/assets/images/emoji/office.png
diff --git a/app/assets/images/emoji/oil.png b/app/assets/images/emoji/oil.png
new file mode 100644
index 00000000000..c4c4d42da8b
--- /dev/null
+++ b/app/assets/images/emoji/oil.png
diff --git a/app/assets/images/emoji/ok.png b/app/assets/images/emoji/ok.png
new file mode 100644
index 00000000000..d0d775532ff
--- /dev/null
+++ b/app/assets/images/emoji/ok.png
diff --git a/app/assets/images/emoji/ok_hand.png b/app/assets/images/emoji/ok_hand.png
new file mode 100644
index 00000000000..028d69b0de3
--- /dev/null
+++ b/app/assets/images/emoji/ok_hand.png
diff --git a/app/assets/images/emoji/ok_hand_tone1.png b/app/assets/images/emoji/ok_hand_tone1.png
new file mode 100644
index 00000000000..cecf7b2ab5a
--- /dev/null
+++ b/app/assets/images/emoji/ok_hand_tone1.png
diff --git a/app/assets/images/emoji/ok_hand_tone2.png b/app/assets/images/emoji/ok_hand_tone2.png
new file mode 100644
index 00000000000..c19239bcd3d
--- /dev/null
+++ b/app/assets/images/emoji/ok_hand_tone2.png
diff --git a/app/assets/images/emoji/ok_hand_tone3.png b/app/assets/images/emoji/ok_hand_tone3.png
new file mode 100644
index 00000000000..94b65b03ecd
--- /dev/null
+++ b/app/assets/images/emoji/ok_hand_tone3.png
diff --git a/app/assets/images/emoji/ok_hand_tone4.png b/app/assets/images/emoji/ok_hand_tone4.png
new file mode 100644
index 00000000000..03d26f08e6a
--- /dev/null
+++ b/app/assets/images/emoji/ok_hand_tone4.png
diff --git a/app/assets/images/emoji/ok_hand_tone5.png b/app/assets/images/emoji/ok_hand_tone5.png
new file mode 100644
index 00000000000..d4b24086364
--- /dev/null
+++ b/app/assets/images/emoji/ok_hand_tone5.png
diff --git a/app/assets/images/emoji/ok_woman.png b/app/assets/images/emoji/ok_woman.png
new file mode 100644
index 00000000000..90a2c7469c4
--- /dev/null
+++ b/app/assets/images/emoji/ok_woman.png
diff --git a/app/assets/images/emoji/ok_woman_tone1.png b/app/assets/images/emoji/ok_woman_tone1.png
new file mode 100644
index 00000000000..c99543e785b
--- /dev/null
+++ b/app/assets/images/emoji/ok_woman_tone1.png
diff --git a/app/assets/images/emoji/ok_woman_tone2.png b/app/assets/images/emoji/ok_woman_tone2.png
new file mode 100644
index 00000000000..ad5fae813db
--- /dev/null
+++ b/app/assets/images/emoji/ok_woman_tone2.png
diff --git a/app/assets/images/emoji/ok_woman_tone3.png b/app/assets/images/emoji/ok_woman_tone3.png
new file mode 100644
index 00000000000..51bf4fab406
--- /dev/null
+++ b/app/assets/images/emoji/ok_woman_tone3.png
diff --git a/app/assets/images/emoji/ok_woman_tone4.png b/app/assets/images/emoji/ok_woman_tone4.png
new file mode 100644
index 00000000000..ee3f9dc640a
--- /dev/null
+++ b/app/assets/images/emoji/ok_woman_tone4.png
diff --git a/app/assets/images/emoji/ok_woman_tone5.png b/app/assets/images/emoji/ok_woman_tone5.png
new file mode 100644
index 00000000000..62a9d9237f7
--- /dev/null
+++ b/app/assets/images/emoji/ok_woman_tone5.png
diff --git a/app/assets/images/emoji/older_man.png b/app/assets/images/emoji/older_man.png
new file mode 100644
index 00000000000..4ace4e6f308
--- /dev/null
+++ b/app/assets/images/emoji/older_man.png
diff --git a/app/assets/images/emoji/older_man_tone1.png b/app/assets/images/emoji/older_man_tone1.png
new file mode 100644
index 00000000000..ab459baace8
--- /dev/null
+++ b/app/assets/images/emoji/older_man_tone1.png
diff --git a/app/assets/images/emoji/older_man_tone2.png b/app/assets/images/emoji/older_man_tone2.png
new file mode 100644
index 00000000000..f4dfc7694ea
--- /dev/null
+++ b/app/assets/images/emoji/older_man_tone2.png
diff --git a/app/assets/images/emoji/older_man_tone3.png b/app/assets/images/emoji/older_man_tone3.png
new file mode 100644
index 00000000000..5ffd11792f4
--- /dev/null
+++ b/app/assets/images/emoji/older_man_tone3.png
diff --git a/app/assets/images/emoji/older_man_tone4.png b/app/assets/images/emoji/older_man_tone4.png
new file mode 100644
index 00000000000..b350a764bfd
--- /dev/null
+++ b/app/assets/images/emoji/older_man_tone4.png
diff --git a/app/assets/images/emoji/older_man_tone5.png b/app/assets/images/emoji/older_man_tone5.png
new file mode 100644
index 00000000000..05fe24a1708
--- /dev/null
+++ b/app/assets/images/emoji/older_man_tone5.png
diff --git a/app/assets/images/emoji/older_woman.png b/app/assets/images/emoji/older_woman.png
new file mode 100644
index 00000000000..52dc4987143
--- /dev/null
+++ b/app/assets/images/emoji/older_woman.png
diff --git a/app/assets/images/emoji/older_woman_tone1.png b/app/assets/images/emoji/older_woman_tone1.png
new file mode 100644
index 00000000000..b49e821402c
--- /dev/null
+++ b/app/assets/images/emoji/older_woman_tone1.png
diff --git a/app/assets/images/emoji/older_woman_tone2.png b/app/assets/images/emoji/older_woman_tone2.png
new file mode 100644
index 00000000000..e86bf5ab3b7
--- /dev/null
+++ b/app/assets/images/emoji/older_woman_tone2.png
diff --git a/app/assets/images/emoji/older_woman_tone3.png b/app/assets/images/emoji/older_woman_tone3.png
new file mode 100644
index 00000000000..83fc14b0874
--- /dev/null
+++ b/app/assets/images/emoji/older_woman_tone3.png
diff --git a/app/assets/images/emoji/older_woman_tone4.png b/app/assets/images/emoji/older_woman_tone4.png
new file mode 100644
index 00000000000..e4aa8a424d4
--- /dev/null
+++ b/app/assets/images/emoji/older_woman_tone4.png
diff --git a/app/assets/images/emoji/older_woman_tone5.png b/app/assets/images/emoji/older_woman_tone5.png
new file mode 100644
index 00000000000..4009012bb0a
--- /dev/null
+++ b/app/assets/images/emoji/older_woman_tone5.png
diff --git a/app/assets/images/emoji/om_symbol.png b/app/assets/images/emoji/om_symbol.png
new file mode 100644
index 00000000000..a35c63c459c
--- /dev/null
+++ b/app/assets/images/emoji/om_symbol.png
diff --git a/app/assets/images/emoji/on.png b/app/assets/images/emoji/on.png
new file mode 100644
index 00000000000..a0c371ae21e
--- /dev/null
+++ b/app/assets/images/emoji/on.png
diff --git a/app/assets/images/emoji/oncoming_automobile.png b/app/assets/images/emoji/oncoming_automobile.png
new file mode 100644
index 00000000000..3c7e1d52e63
--- /dev/null
+++ b/app/assets/images/emoji/oncoming_automobile.png
diff --git a/app/assets/images/emoji/oncoming_bus.png b/app/assets/images/emoji/oncoming_bus.png
new file mode 100644
index 00000000000..ad91e256c7f
--- /dev/null
+++ b/app/assets/images/emoji/oncoming_bus.png
diff --git a/app/assets/images/emoji/oncoming_police_car.png b/app/assets/images/emoji/oncoming_police_car.png
new file mode 100644
index 00000000000..c9109c85b5d
--- /dev/null
+++ b/app/assets/images/emoji/oncoming_police_car.png
diff --git a/app/assets/images/emoji/oncoming_taxi.png b/app/assets/images/emoji/oncoming_taxi.png
new file mode 100644
index 00000000000..fea14e45846
--- /dev/null
+++ b/app/assets/images/emoji/oncoming_taxi.png
diff --git a/app/assets/images/emoji/one.png b/app/assets/images/emoji/one.png
new file mode 100644
index 00000000000..e6d84b80128
--- /dev/null
+++ b/app/assets/images/emoji/one.png
diff --git a/app/assets/images/emoji/open_file_folder.png b/app/assets/images/emoji/open_file_folder.png
new file mode 100644
index 00000000000..3993b09222f
--- /dev/null
+++ b/app/assets/images/emoji/open_file_folder.png
diff --git a/app/assets/images/emoji/open_hands.png b/app/assets/images/emoji/open_hands.png
new file mode 100644
index 00000000000..1cf75c9101e
--- /dev/null
+++ b/app/assets/images/emoji/open_hands.png
diff --git a/app/assets/images/emoji/open_hands_tone1.png b/app/assets/images/emoji/open_hands_tone1.png
new file mode 100644
index 00000000000..352d2614f11
--- /dev/null
+++ b/app/assets/images/emoji/open_hands_tone1.png
diff --git a/app/assets/images/emoji/open_hands_tone2.png b/app/assets/images/emoji/open_hands_tone2.png
new file mode 100644
index 00000000000..70824a50c73
--- /dev/null
+++ b/app/assets/images/emoji/open_hands_tone2.png
diff --git a/app/assets/images/emoji/open_hands_tone3.png b/app/assets/images/emoji/open_hands_tone3.png
new file mode 100644
index 00000000000..d7d136bd3db
--- /dev/null
+++ b/app/assets/images/emoji/open_hands_tone3.png
diff --git a/app/assets/images/emoji/open_hands_tone4.png b/app/assets/images/emoji/open_hands_tone4.png
new file mode 100644
index 00000000000..df4eaa711e7
--- /dev/null
+++ b/app/assets/images/emoji/open_hands_tone4.png
diff --git a/app/assets/images/emoji/open_hands_tone5.png b/app/assets/images/emoji/open_hands_tone5.png
new file mode 100644
index 00000000000..7dc04eaebd8
--- /dev/null
+++ b/app/assets/images/emoji/open_hands_tone5.png
diff --git a/app/assets/images/emoji/open_mouth.png b/app/assets/images/emoji/open_mouth.png
new file mode 100644
index 00000000000..a62cd27e148
--- /dev/null
+++ b/app/assets/images/emoji/open_mouth.png
diff --git a/app/assets/images/emoji/ophiuchus.png b/app/assets/images/emoji/ophiuchus.png
new file mode 100644
index 00000000000..0a780a700da
--- /dev/null
+++ b/app/assets/images/emoji/ophiuchus.png
diff --git a/app/assets/images/emoji/orange_book.png b/app/assets/images/emoji/orange_book.png
new file mode 100644
index 00000000000..ab40e6ae6a2
--- /dev/null
+++ b/app/assets/images/emoji/orange_book.png
diff --git a/app/assets/images/emoji/orthodox_cross.png b/app/assets/images/emoji/orthodox_cross.png
new file mode 100644
index 00000000000..0530e33a4d4
--- /dev/null
+++ b/app/assets/images/emoji/orthodox_cross.png
diff --git a/app/assets/images/emoji/outbox_tray.png b/app/assets/images/emoji/outbox_tray.png
new file mode 100644
index 00000000000..46493ed5b2c
--- /dev/null
+++ b/app/assets/images/emoji/outbox_tray.png
diff --git a/app/assets/images/emoji/owl.png b/app/assets/images/emoji/owl.png
new file mode 100644
index 00000000000..fa6815480c3
--- /dev/null
+++ b/app/assets/images/emoji/owl.png
diff --git a/app/assets/images/emoji/ox.png b/app/assets/images/emoji/ox.png
new file mode 100644
index 00000000000..badf5708f2f
--- /dev/null
+++ b/app/assets/images/emoji/ox.png
diff --git a/app/assets/images/emoji/package.png b/app/assets/images/emoji/package.png
new file mode 100644
index 00000000000..85431756ad8
--- /dev/null
+++ b/app/assets/images/emoji/package.png
diff --git a/app/assets/images/emoji/page_facing_up.png b/app/assets/images/emoji/page_facing_up.png
new file mode 100644
index 00000000000..ba4ed757e01
--- /dev/null
+++ b/app/assets/images/emoji/page_facing_up.png
diff --git a/app/assets/images/emoji/page_with_curl.png b/app/assets/images/emoji/page_with_curl.png
new file mode 100644
index 00000000000..06355319c74
--- /dev/null
+++ b/app/assets/images/emoji/page_with_curl.png
diff --git a/app/assets/images/emoji/pager.png b/app/assets/images/emoji/pager.png
new file mode 100644
index 00000000000..b24b99306a2
--- /dev/null
+++ b/app/assets/images/emoji/pager.png
diff --git a/app/assets/images/emoji/paintbrush.png b/app/assets/images/emoji/paintbrush.png
new file mode 100644
index 00000000000..28bffbaa3c9
--- /dev/null
+++ b/app/assets/images/emoji/paintbrush.png
diff --git a/app/assets/images/emoji/palm_tree.png b/app/assets/images/emoji/palm_tree.png
new file mode 100644
index 00000000000..4bbb10f4f19
--- /dev/null
+++ b/app/assets/images/emoji/palm_tree.png
diff --git a/app/assets/images/emoji/pancakes.png b/app/assets/images/emoji/pancakes.png
new file mode 100644
index 00000000000..6223d1a28e9
--- /dev/null
+++ b/app/assets/images/emoji/pancakes.png
diff --git a/app/assets/images/emoji/panda_face.png b/app/assets/images/emoji/panda_face.png
new file mode 100644
index 00000000000..978382775ce
--- /dev/null
+++ b/app/assets/images/emoji/panda_face.png
diff --git a/app/assets/images/emoji/paperclip.png b/app/assets/images/emoji/paperclip.png
new file mode 100644
index 00000000000..8cd8d4f8750
--- /dev/null
+++ b/app/assets/images/emoji/paperclip.png
diff --git a/app/assets/images/emoji/paperclips.png b/app/assets/images/emoji/paperclips.png
new file mode 100644
index 00000000000..76021e8c705
--- /dev/null
+++ b/app/assets/images/emoji/paperclips.png
diff --git a/app/assets/images/emoji/park.png b/app/assets/images/emoji/park.png
new file mode 100644
index 00000000000..63ec7016301
--- /dev/null
+++ b/app/assets/images/emoji/park.png
diff --git a/app/assets/images/emoji/parking.png b/app/assets/images/emoji/parking.png
new file mode 100644
index 00000000000..7be7dac27e8
--- /dev/null
+++ b/app/assets/images/emoji/parking.png
diff --git a/app/assets/images/emoji/part_alternation_mark.png b/app/assets/images/emoji/part_alternation_mark.png
new file mode 100644
index 00000000000..70453d41528
--- /dev/null
+++ b/app/assets/images/emoji/part_alternation_mark.png
diff --git a/app/assets/images/emoji/partly_sunny.png b/app/assets/images/emoji/partly_sunny.png
new file mode 100644
index 00000000000..a55e59c344c
--- /dev/null
+++ b/app/assets/images/emoji/partly_sunny.png
diff --git a/app/assets/images/emoji/passport_control.png b/app/assets/images/emoji/passport_control.png
new file mode 100644
index 00000000000..079e34ee4d4
--- /dev/null
+++ b/app/assets/images/emoji/passport_control.png
diff --git a/app/assets/images/emoji/pause_button.png b/app/assets/images/emoji/pause_button.png
new file mode 100644
index 00000000000..4f07e7ebfd7
--- /dev/null
+++ b/app/assets/images/emoji/pause_button.png
diff --git a/app/assets/images/emoji/peace.png b/app/assets/images/emoji/peace.png
new file mode 100644
index 00000000000..86033faf477
--- /dev/null
+++ b/app/assets/images/emoji/peace.png
diff --git a/app/assets/images/emoji/peach.png b/app/assets/images/emoji/peach.png
new file mode 100644
index 00000000000..9ab57cbb758
--- /dev/null
+++ b/app/assets/images/emoji/peach.png
diff --git a/app/assets/images/emoji/peanuts.png b/app/assets/images/emoji/peanuts.png
new file mode 100644
index 00000000000..b64fadad010
--- /dev/null
+++ b/app/assets/images/emoji/peanuts.png
diff --git a/app/assets/images/emoji/pear.png b/app/assets/images/emoji/pear.png
new file mode 100644
index 00000000000..3869f718bcf
--- /dev/null
+++ b/app/assets/images/emoji/pear.png
diff --git a/app/assets/images/emoji/pen_ballpoint.png b/app/assets/images/emoji/pen_ballpoint.png
new file mode 100644
index 00000000000..6ef7a342433
--- /dev/null
+++ b/app/assets/images/emoji/pen_ballpoint.png
diff --git a/app/assets/images/emoji/pen_fountain.png b/app/assets/images/emoji/pen_fountain.png
new file mode 100644
index 00000000000..3ca4bd2c231
--- /dev/null
+++ b/app/assets/images/emoji/pen_fountain.png
diff --git a/app/assets/images/emoji/pencil.png b/app/assets/images/emoji/pencil.png
new file mode 100644
index 00000000000..edc6155e168
--- /dev/null
+++ b/app/assets/images/emoji/pencil.png
diff --git a/app/assets/images/emoji/pencil2.png b/app/assets/images/emoji/pencil2.png
new file mode 100644
index 00000000000..3833d590fa2
--- /dev/null
+++ b/app/assets/images/emoji/pencil2.png
diff --git a/app/assets/images/emoji/penguin.png b/app/assets/images/emoji/penguin.png
new file mode 100644
index 00000000000..c0064fb9734
--- /dev/null
+++ b/app/assets/images/emoji/penguin.png
diff --git a/app/assets/images/emoji/pensive.png b/app/assets/images/emoji/pensive.png
new file mode 100644
index 00000000000..490fb566954
--- /dev/null
+++ b/app/assets/images/emoji/pensive.png
diff --git a/app/assets/images/emoji/performing_arts.png b/app/assets/images/emoji/performing_arts.png
new file mode 100644
index 00000000000..685441fdaa1
--- /dev/null
+++ b/app/assets/images/emoji/performing_arts.png
diff --git a/app/assets/images/emoji/persevere.png b/app/assets/images/emoji/persevere.png
new file mode 100644
index 00000000000..646a05fe908
--- /dev/null
+++ b/app/assets/images/emoji/persevere.png
diff --git a/app/assets/images/emoji/person_frowning.png b/app/assets/images/emoji/person_frowning.png
new file mode 100644
index 00000000000..579324959a1
--- /dev/null
+++ b/app/assets/images/emoji/person_frowning.png
diff --git a/app/assets/images/emoji/person_frowning_tone1.png b/app/assets/images/emoji/person_frowning_tone1.png
new file mode 100644
index 00000000000..21d3bb43923
--- /dev/null
+++ b/app/assets/images/emoji/person_frowning_tone1.png
diff --git a/app/assets/images/emoji/person_frowning_tone2.png b/app/assets/images/emoji/person_frowning_tone2.png
new file mode 100644
index 00000000000..973f5fc8382
--- /dev/null
+++ b/app/assets/images/emoji/person_frowning_tone2.png
diff --git a/app/assets/images/emoji/person_frowning_tone3.png b/app/assets/images/emoji/person_frowning_tone3.png
new file mode 100644
index 00000000000..41fbcc78816
--- /dev/null
+++ b/app/assets/images/emoji/person_frowning_tone3.png
diff --git a/app/assets/images/emoji/person_frowning_tone4.png b/app/assets/images/emoji/person_frowning_tone4.png
new file mode 100644
index 00000000000..5a37c741030
--- /dev/null
+++ b/app/assets/images/emoji/person_frowning_tone4.png
diff --git a/app/assets/images/emoji/person_frowning_tone5.png b/app/assets/images/emoji/person_frowning_tone5.png
new file mode 100644
index 00000000000..e08141f3efe
--- /dev/null
+++ b/app/assets/images/emoji/person_frowning_tone5.png
diff --git a/app/assets/images/emoji/person_with_blond_hair.png b/app/assets/images/emoji/person_with_blond_hair.png
new file mode 100644
index 00000000000..ad6f01a7dda
--- /dev/null
+++ b/app/assets/images/emoji/person_with_blond_hair.png
diff --git a/app/assets/images/emoji/person_with_blond_hair_tone1.png b/app/assets/images/emoji/person_with_blond_hair_tone1.png
new file mode 100644
index 00000000000..7d18ef24445
--- /dev/null
+++ b/app/assets/images/emoji/person_with_blond_hair_tone1.png
diff --git a/app/assets/images/emoji/person_with_blond_hair_tone2.png b/app/assets/images/emoji/person_with_blond_hair_tone2.png
new file mode 100644
index 00000000000..dae1307315c
--- /dev/null
+++ b/app/assets/images/emoji/person_with_blond_hair_tone2.png
diff --git a/app/assets/images/emoji/person_with_blond_hair_tone3.png b/app/assets/images/emoji/person_with_blond_hair_tone3.png
new file mode 100644
index 00000000000..684677e8e5a
--- /dev/null
+++ b/app/assets/images/emoji/person_with_blond_hair_tone3.png
diff --git a/app/assets/images/emoji/person_with_blond_hair_tone4.png b/app/assets/images/emoji/person_with_blond_hair_tone4.png
new file mode 100644
index 00000000000..012be0b51f8
--- /dev/null
+++ b/app/assets/images/emoji/person_with_blond_hair_tone4.png
diff --git a/app/assets/images/emoji/person_with_blond_hair_tone5.png b/app/assets/images/emoji/person_with_blond_hair_tone5.png
new file mode 100644
index 00000000000..d4ecc4cf44b
--- /dev/null
+++ b/app/assets/images/emoji/person_with_blond_hair_tone5.png
diff --git a/app/assets/images/emoji/person_with_pouting_face.png b/app/assets/images/emoji/person_with_pouting_face.png
new file mode 100644
index 00000000000..10eb0571078
--- /dev/null
+++ b/app/assets/images/emoji/person_with_pouting_face.png
diff --git a/app/assets/images/emoji/person_with_pouting_face_tone1.png b/app/assets/images/emoji/person_with_pouting_face_tone1.png
new file mode 100644
index 00000000000..57e826b75a4
--- /dev/null
+++ b/app/assets/images/emoji/person_with_pouting_face_tone1.png
diff --git a/app/assets/images/emoji/person_with_pouting_face_tone2.png b/app/assets/images/emoji/person_with_pouting_face_tone2.png
new file mode 100644
index 00000000000..3f317c0c25f
--- /dev/null
+++ b/app/assets/images/emoji/person_with_pouting_face_tone2.png
diff --git a/app/assets/images/emoji/person_with_pouting_face_tone3.png b/app/assets/images/emoji/person_with_pouting_face_tone3.png
new file mode 100644
index 00000000000..d2fbb6c20bf
--- /dev/null
+++ b/app/assets/images/emoji/person_with_pouting_face_tone3.png
diff --git a/app/assets/images/emoji/person_with_pouting_face_tone4.png b/app/assets/images/emoji/person_with_pouting_face_tone4.png
new file mode 100644
index 00000000000..643ceb4a5c5
--- /dev/null
+++ b/app/assets/images/emoji/person_with_pouting_face_tone4.png
diff --git a/app/assets/images/emoji/person_with_pouting_face_tone5.png b/app/assets/images/emoji/person_with_pouting_face_tone5.png
new file mode 100644
index 00000000000..b2eb6859c32
--- /dev/null
+++ b/app/assets/images/emoji/person_with_pouting_face_tone5.png
diff --git a/app/assets/images/emoji/pick.png b/app/assets/images/emoji/pick.png
new file mode 100644
index 00000000000..6370fe6d791
--- /dev/null
+++ b/app/assets/images/emoji/pick.png
diff --git a/app/assets/images/emoji/pig.png b/app/assets/images/emoji/pig.png
new file mode 100644
index 00000000000..afe05ca1676
--- /dev/null
+++ b/app/assets/images/emoji/pig.png
diff --git a/app/assets/images/emoji/pig2.png b/app/assets/images/emoji/pig2.png
new file mode 100644
index 00000000000..5f31c1a2d75
--- /dev/null
+++ b/app/assets/images/emoji/pig2.png
diff --git a/app/assets/images/emoji/pig_nose.png b/app/assets/images/emoji/pig_nose.png
new file mode 100644
index 00000000000..3610ae4a910
--- /dev/null
+++ b/app/assets/images/emoji/pig_nose.png
diff --git a/app/assets/images/emoji/pill.png b/app/assets/images/emoji/pill.png
new file mode 100644
index 00000000000..1d4530e77a3
--- /dev/null
+++ b/app/assets/images/emoji/pill.png
diff --git a/app/assets/images/emoji/pineapple.png b/app/assets/images/emoji/pineapple.png
new file mode 100644
index 00000000000..c89a1606462
--- /dev/null
+++ b/app/assets/images/emoji/pineapple.png
diff --git a/app/assets/images/emoji/ping_pong.png b/app/assets/images/emoji/ping_pong.png
new file mode 100644
index 00000000000..ff3c51727d1
--- /dev/null
+++ b/app/assets/images/emoji/ping_pong.png
diff --git a/app/assets/images/emoji/pisces.png b/app/assets/images/emoji/pisces.png
new file mode 100644
index 00000000000..7f6f646a95c
--- /dev/null
+++ b/app/assets/images/emoji/pisces.png
diff --git a/app/assets/images/emoji/pizza.png b/app/assets/images/emoji/pizza.png
new file mode 100644
index 00000000000..e07365cb398
--- /dev/null
+++ b/app/assets/images/emoji/pizza.png
diff --git a/app/assets/images/emoji/place_of_worship.png b/app/assets/images/emoji/place_of_worship.png
new file mode 100644
index 00000000000..207d59cce85
--- /dev/null
+++ b/app/assets/images/emoji/place_of_worship.png
diff --git a/app/assets/images/emoji/play_pause.png b/app/assets/images/emoji/play_pause.png
new file mode 100644
index 00000000000..a9f857139ac
--- /dev/null
+++ b/app/assets/images/emoji/play_pause.png
diff --git a/app/assets/images/emoji/point_down.png b/app/assets/images/emoji/point_down.png
new file mode 100644
index 00000000000..00d3d13ab5c
--- /dev/null
+++ b/app/assets/images/emoji/point_down.png
diff --git a/app/assets/images/emoji/point_down_tone1.png b/app/assets/images/emoji/point_down_tone1.png
new file mode 100644
index 00000000000..140f157d8c7
--- /dev/null
+++ b/app/assets/images/emoji/point_down_tone1.png
diff --git a/app/assets/images/emoji/point_down_tone2.png b/app/assets/images/emoji/point_down_tone2.png
new file mode 100644
index 00000000000..d518544f7fa
--- /dev/null
+++ b/app/assets/images/emoji/point_down_tone2.png
diff --git a/app/assets/images/emoji/point_down_tone3.png b/app/assets/images/emoji/point_down_tone3.png
new file mode 100644
index 00000000000..018b688b8b7
--- /dev/null
+++ b/app/assets/images/emoji/point_down_tone3.png
diff --git a/app/assets/images/emoji/point_down_tone4.png b/app/assets/images/emoji/point_down_tone4.png
new file mode 100644
index 00000000000..98845bf6f72
--- /dev/null
+++ b/app/assets/images/emoji/point_down_tone4.png
diff --git a/app/assets/images/emoji/point_down_tone5.png b/app/assets/images/emoji/point_down_tone5.png
new file mode 100644
index 00000000000..9a9b039a9fc
--- /dev/null
+++ b/app/assets/images/emoji/point_down_tone5.png
diff --git a/app/assets/images/emoji/point_left.png b/app/assets/images/emoji/point_left.png
new file mode 100644
index 00000000000..599fa2e3cf1
--- /dev/null
+++ b/app/assets/images/emoji/point_left.png
diff --git a/app/assets/images/emoji/point_left_tone1.png b/app/assets/images/emoji/point_left_tone1.png
new file mode 100644
index 00000000000..88e2c306076
--- /dev/null
+++ b/app/assets/images/emoji/point_left_tone1.png
diff --git a/app/assets/images/emoji/point_left_tone2.png b/app/assets/images/emoji/point_left_tone2.png
new file mode 100644
index 00000000000..d3c89d87c5f
--- /dev/null
+++ b/app/assets/images/emoji/point_left_tone2.png
diff --git a/app/assets/images/emoji/point_left_tone3.png b/app/assets/images/emoji/point_left_tone3.png
new file mode 100644
index 00000000000..b23b9167358
--- /dev/null
+++ b/app/assets/images/emoji/point_left_tone3.png
diff --git a/app/assets/images/emoji/point_left_tone4.png b/app/assets/images/emoji/point_left_tone4.png
new file mode 100644
index 00000000000..3093f325c27
--- /dev/null
+++ b/app/assets/images/emoji/point_left_tone4.png
diff --git a/app/assets/images/emoji/point_left_tone5.png b/app/assets/images/emoji/point_left_tone5.png
new file mode 100644
index 00000000000..2b4cbfa120c
--- /dev/null
+++ b/app/assets/images/emoji/point_left_tone5.png
diff --git a/app/assets/images/emoji/point_right.png b/app/assets/images/emoji/point_right.png
new file mode 100644
index 00000000000..93a3cd34aa5
--- /dev/null
+++ b/app/assets/images/emoji/point_right.png
diff --git a/app/assets/images/emoji/point_right_tone1.png b/app/assets/images/emoji/point_right_tone1.png
new file mode 100644
index 00000000000..4a28c6bbc89
--- /dev/null
+++ b/app/assets/images/emoji/point_right_tone1.png
diff --git a/app/assets/images/emoji/point_right_tone2.png b/app/assets/images/emoji/point_right_tone2.png
new file mode 100644
index 00000000000..7cb13231733
--- /dev/null
+++ b/app/assets/images/emoji/point_right_tone2.png
diff --git a/app/assets/images/emoji/point_right_tone3.png b/app/assets/images/emoji/point_right_tone3.png
new file mode 100644
index 00000000000..5514807d71a
--- /dev/null
+++ b/app/assets/images/emoji/point_right_tone3.png
diff --git a/app/assets/images/emoji/point_right_tone4.png b/app/assets/images/emoji/point_right_tone4.png
new file mode 100644
index 00000000000..b8541d6440d
--- /dev/null
+++ b/app/assets/images/emoji/point_right_tone4.png
diff --git a/app/assets/images/emoji/point_right_tone5.png b/app/assets/images/emoji/point_right_tone5.png
new file mode 100644
index 00000000000..1b7aab07bb1
--- /dev/null
+++ b/app/assets/images/emoji/point_right_tone5.png
diff --git a/app/assets/images/emoji/point_up.png b/app/assets/images/emoji/point_up.png
new file mode 100644
index 00000000000..f4978ff0f00
--- /dev/null
+++ b/app/assets/images/emoji/point_up.png
diff --git a/app/assets/images/emoji/point_up_2.png b/app/assets/images/emoji/point_up_2.png
new file mode 100644
index 00000000000..bc496dfeae4
--- /dev/null
+++ b/app/assets/images/emoji/point_up_2.png
diff --git a/app/assets/images/emoji/point_up_2_tone1.png b/app/assets/images/emoji/point_up_2_tone1.png
new file mode 100644
index 00000000000..a12a7e78430
--- /dev/null
+++ b/app/assets/images/emoji/point_up_2_tone1.png
diff --git a/app/assets/images/emoji/point_up_2_tone2.png b/app/assets/images/emoji/point_up_2_tone2.png
new file mode 100644
index 00000000000..cdff40ceab0
--- /dev/null
+++ b/app/assets/images/emoji/point_up_2_tone2.png
diff --git a/app/assets/images/emoji/point_up_2_tone3.png b/app/assets/images/emoji/point_up_2_tone3.png
new file mode 100644
index 00000000000..a07ce9e5ae8
--- /dev/null
+++ b/app/assets/images/emoji/point_up_2_tone3.png
diff --git a/app/assets/images/emoji/point_up_2_tone4.png b/app/assets/images/emoji/point_up_2_tone4.png
new file mode 100644
index 00000000000..4f86c88ba42
--- /dev/null
+++ b/app/assets/images/emoji/point_up_2_tone4.png
diff --git a/app/assets/images/emoji/point_up_2_tone5.png b/app/assets/images/emoji/point_up_2_tone5.png
new file mode 100644
index 00000000000..ed1b26c35d3
--- /dev/null
+++ b/app/assets/images/emoji/point_up_2_tone5.png
diff --git a/app/assets/images/emoji/point_up_tone1.png b/app/assets/images/emoji/point_up_tone1.png
new file mode 100644
index 00000000000..6a9db21d64c
--- /dev/null
+++ b/app/assets/images/emoji/point_up_tone1.png
diff --git a/app/assets/images/emoji/point_up_tone2.png b/app/assets/images/emoji/point_up_tone2.png
new file mode 100644
index 00000000000..15aa9ea0e05
--- /dev/null
+++ b/app/assets/images/emoji/point_up_tone2.png
diff --git a/app/assets/images/emoji/point_up_tone3.png b/app/assets/images/emoji/point_up_tone3.png
new file mode 100644
index 00000000000..652b73a9c5d
--- /dev/null
+++ b/app/assets/images/emoji/point_up_tone3.png
diff --git a/app/assets/images/emoji/point_up_tone4.png b/app/assets/images/emoji/point_up_tone4.png
new file mode 100644
index 00000000000..692bad926e9
--- /dev/null
+++ b/app/assets/images/emoji/point_up_tone4.png
diff --git a/app/assets/images/emoji/point_up_tone5.png b/app/assets/images/emoji/point_up_tone5.png
new file mode 100644
index 00000000000..1e1b10fb71c
--- /dev/null
+++ b/app/assets/images/emoji/point_up_tone5.png
diff --git a/app/assets/images/emoji/police_car.png b/app/assets/images/emoji/police_car.png
new file mode 100644
index 00000000000..3da4253de7e
--- /dev/null
+++ b/app/assets/images/emoji/police_car.png
diff --git a/app/assets/images/emoji/poodle.png b/app/assets/images/emoji/poodle.png
new file mode 100644
index 00000000000..8ec39e396af
--- /dev/null
+++ b/app/assets/images/emoji/poodle.png
diff --git a/app/assets/images/emoji/poop.png b/app/assets/images/emoji/poop.png
new file mode 100644
index 00000000000..10b15e72d56
--- /dev/null
+++ b/app/assets/images/emoji/poop.png
diff --git a/app/assets/images/emoji/popcorn.png b/app/assets/images/emoji/popcorn.png
new file mode 100644
index 00000000000..36853e381d4
--- /dev/null
+++ b/app/assets/images/emoji/popcorn.png
diff --git a/app/assets/images/emoji/post_office.png b/app/assets/images/emoji/post_office.png
new file mode 100644
index 00000000000..a23848f9aa0
--- /dev/null
+++ b/app/assets/images/emoji/post_office.png
diff --git a/app/assets/images/emoji/postal_horn.png b/app/assets/images/emoji/postal_horn.png
new file mode 100644
index 00000000000..c173b8dbd67
--- /dev/null
+++ b/app/assets/images/emoji/postal_horn.png
diff --git a/app/assets/images/emoji/postbox.png b/app/assets/images/emoji/postbox.png
new file mode 100644
index 00000000000..07c9c4ab3d6
--- /dev/null
+++ b/app/assets/images/emoji/postbox.png
diff --git a/app/assets/images/emoji/potable_water.png b/app/assets/images/emoji/potable_water.png
new file mode 100644
index 00000000000..2c610049459
--- /dev/null
+++ b/app/assets/images/emoji/potable_water.png
diff --git a/app/assets/images/emoji/potato.png b/app/assets/images/emoji/potato.png
new file mode 100644
index 00000000000..70350ca2c0a
--- /dev/null
+++ b/app/assets/images/emoji/potato.png
diff --git a/app/assets/images/emoji/pouch.png b/app/assets/images/emoji/pouch.png
new file mode 100644
index 00000000000..8795c6c66ff
--- /dev/null
+++ b/app/assets/images/emoji/pouch.png
diff --git a/app/assets/images/emoji/poultry_leg.png b/app/assets/images/emoji/poultry_leg.png
new file mode 100644
index 00000000000..eea4a53a2f9
--- /dev/null
+++ b/app/assets/images/emoji/poultry_leg.png
diff --git a/app/assets/images/emoji/pound.png b/app/assets/images/emoji/pound.png
new file mode 100644
index 00000000000..a0d4c4099e9
--- /dev/null
+++ b/app/assets/images/emoji/pound.png
diff --git a/app/assets/images/emoji/pouting_cat.png b/app/assets/images/emoji/pouting_cat.png
new file mode 100644
index 00000000000..41ddfeab42b
--- /dev/null
+++ b/app/assets/images/emoji/pouting_cat.png
diff --git a/app/assets/images/emoji/pray.png b/app/assets/images/emoji/pray.png
new file mode 100644
index 00000000000..8347f2435be
--- /dev/null
+++ b/app/assets/images/emoji/pray.png
diff --git a/app/assets/images/emoji/pray_tone1.png b/app/assets/images/emoji/pray_tone1.png
new file mode 100644
index 00000000000..060ef257172
--- /dev/null
+++ b/app/assets/images/emoji/pray_tone1.png
diff --git a/app/assets/images/emoji/pray_tone2.png b/app/assets/images/emoji/pray_tone2.png
new file mode 100644
index 00000000000..56dc607c07a
--- /dev/null
+++ b/app/assets/images/emoji/pray_tone2.png
diff --git a/app/assets/images/emoji/pray_tone3.png b/app/assets/images/emoji/pray_tone3.png
new file mode 100644
index 00000000000..0f33b862008
--- /dev/null
+++ b/app/assets/images/emoji/pray_tone3.png
diff --git a/app/assets/images/emoji/pray_tone4.png b/app/assets/images/emoji/pray_tone4.png
new file mode 100644
index 00000000000..2ea8dc11657
--- /dev/null
+++ b/app/assets/images/emoji/pray_tone4.png
diff --git a/app/assets/images/emoji/pray_tone5.png b/app/assets/images/emoji/pray_tone5.png
new file mode 100644
index 00000000000..2128a6c4703
--- /dev/null
+++ b/app/assets/images/emoji/pray_tone5.png
diff --git a/app/assets/images/emoji/prayer_beads.png b/app/assets/images/emoji/prayer_beads.png
new file mode 100644
index 00000000000..a4b6dfcc62e
--- /dev/null
+++ b/app/assets/images/emoji/prayer_beads.png
diff --git a/app/assets/images/emoji/pregnant_woman.png b/app/assets/images/emoji/pregnant_woman.png
new file mode 100644
index 00000000000..084e83a414a
--- /dev/null
+++ b/app/assets/images/emoji/pregnant_woman.png
diff --git a/app/assets/images/emoji/pregnant_woman_tone1.png b/app/assets/images/emoji/pregnant_woman_tone1.png
new file mode 100644
index 00000000000..a78703b33aa
--- /dev/null
+++ b/app/assets/images/emoji/pregnant_woman_tone1.png
diff --git a/app/assets/images/emoji/pregnant_woman_tone2.png b/app/assets/images/emoji/pregnant_woman_tone2.png
new file mode 100644
index 00000000000..0068c6c4a77
--- /dev/null
+++ b/app/assets/images/emoji/pregnant_woman_tone2.png
diff --git a/app/assets/images/emoji/pregnant_woman_tone3.png b/app/assets/images/emoji/pregnant_woman_tone3.png
new file mode 100644
index 00000000000..3206296b684
--- /dev/null
+++ b/app/assets/images/emoji/pregnant_woman_tone3.png
diff --git a/app/assets/images/emoji/pregnant_woman_tone4.png b/app/assets/images/emoji/pregnant_woman_tone4.png
new file mode 100644
index 00000000000..120fda5cd8c
--- /dev/null
+++ b/app/assets/images/emoji/pregnant_woman_tone4.png
diff --git a/app/assets/images/emoji/pregnant_woman_tone5.png b/app/assets/images/emoji/pregnant_woman_tone5.png
new file mode 100644
index 00000000000..569bfdf05ce
--- /dev/null
+++ b/app/assets/images/emoji/pregnant_woman_tone5.png
diff --git a/app/assets/images/emoji/prince.png b/app/assets/images/emoji/prince.png
new file mode 100644
index 00000000000..38d69344c84
--- /dev/null
+++ b/app/assets/images/emoji/prince.png
diff --git a/app/assets/images/emoji/prince_tone1.png b/app/assets/images/emoji/prince_tone1.png
new file mode 100644
index 00000000000..849930c8887
--- /dev/null
+++ b/app/assets/images/emoji/prince_tone1.png
diff --git a/app/assets/images/emoji/prince_tone2.png b/app/assets/images/emoji/prince_tone2.png
new file mode 100644
index 00000000000..23d8b3b1285
--- /dev/null
+++ b/app/assets/images/emoji/prince_tone2.png
diff --git a/app/assets/images/emoji/prince_tone3.png b/app/assets/images/emoji/prince_tone3.png
new file mode 100644
index 00000000000..db6dfff0647
--- /dev/null
+++ b/app/assets/images/emoji/prince_tone3.png
diff --git a/app/assets/images/emoji/prince_tone4.png b/app/assets/images/emoji/prince_tone4.png
new file mode 100644
index 00000000000..8e10f8be6a8
--- /dev/null
+++ b/app/assets/images/emoji/prince_tone4.png
diff --git a/app/assets/images/emoji/prince_tone5.png b/app/assets/images/emoji/prince_tone5.png
new file mode 100644
index 00000000000..138d4ea7048
--- /dev/null
+++ b/app/assets/images/emoji/prince_tone5.png
diff --git a/app/assets/images/emoji/princess.png b/app/assets/images/emoji/princess.png
new file mode 100644
index 00000000000..879e9fa8c5d
--- /dev/null
+++ b/app/assets/images/emoji/princess.png
diff --git a/app/assets/images/emoji/princess_tone1.png b/app/assets/images/emoji/princess_tone1.png
new file mode 100644
index 00000000000..c28078cdc36
--- /dev/null
+++ b/app/assets/images/emoji/princess_tone1.png
diff --git a/app/assets/images/emoji/princess_tone2.png b/app/assets/images/emoji/princess_tone2.png
new file mode 100644
index 00000000000..dcd20e6ecd4
--- /dev/null
+++ b/app/assets/images/emoji/princess_tone2.png
diff --git a/app/assets/images/emoji/princess_tone3.png b/app/assets/images/emoji/princess_tone3.png
new file mode 100644
index 00000000000..cde6f315c56
--- /dev/null
+++ b/app/assets/images/emoji/princess_tone3.png
diff --git a/app/assets/images/emoji/princess_tone4.png b/app/assets/images/emoji/princess_tone4.png
new file mode 100644
index 00000000000..c71e69caaef
--- /dev/null
+++ b/app/assets/images/emoji/princess_tone4.png
diff --git a/app/assets/images/emoji/princess_tone5.png b/app/assets/images/emoji/princess_tone5.png
new file mode 100644
index 00000000000..063e2645910
--- /dev/null
+++ b/app/assets/images/emoji/princess_tone5.png
diff --git a/app/assets/images/emoji/printer.png b/app/assets/images/emoji/printer.png
new file mode 100644
index 00000000000..027c830f0fe
--- /dev/null
+++ b/app/assets/images/emoji/printer.png
diff --git a/app/assets/images/emoji/projector.png b/app/assets/images/emoji/projector.png
new file mode 100644
index 00000000000..ce9ab0daa28
--- /dev/null
+++ b/app/assets/images/emoji/projector.png
diff --git a/app/assets/images/emoji/punch.png b/app/assets/images/emoji/punch.png
new file mode 100644
index 00000000000..b14ca5f5211
--- /dev/null
+++ b/app/assets/images/emoji/punch.png
diff --git a/app/assets/images/emoji/punch_tone1.png b/app/assets/images/emoji/punch_tone1.png
new file mode 100644
index 00000000000..93c7d17fb47
--- /dev/null
+++ b/app/assets/images/emoji/punch_tone1.png
diff --git a/app/assets/images/emoji/punch_tone2.png b/app/assets/images/emoji/punch_tone2.png
new file mode 100644
index 00000000000..c0a1af6e10a
--- /dev/null
+++ b/app/assets/images/emoji/punch_tone2.png
diff --git a/app/assets/images/emoji/punch_tone3.png b/app/assets/images/emoji/punch_tone3.png
new file mode 100644
index 00000000000..1458b021201
--- /dev/null
+++ b/app/assets/images/emoji/punch_tone3.png
diff --git a/app/assets/images/emoji/punch_tone4.png b/app/assets/images/emoji/punch_tone4.png
new file mode 100644
index 00000000000..c1466bfcdef
--- /dev/null
+++ b/app/assets/images/emoji/punch_tone4.png
diff --git a/app/assets/images/emoji/punch_tone5.png b/app/assets/images/emoji/punch_tone5.png
new file mode 100644
index 00000000000..00b4ddb8953
--- /dev/null
+++ b/app/assets/images/emoji/punch_tone5.png
diff --git a/app/assets/images/emoji/purple_heart.png b/app/assets/images/emoji/purple_heart.png
new file mode 100644
index 00000000000..95c53a9ade6
--- /dev/null
+++ b/app/assets/images/emoji/purple_heart.png
diff --git a/app/assets/images/emoji/purse.png b/app/assets/images/emoji/purse.png
new file mode 100644
index 00000000000..981346193c5
--- /dev/null
+++ b/app/assets/images/emoji/purse.png
diff --git a/app/assets/images/emoji/pushpin.png b/app/assets/images/emoji/pushpin.png
new file mode 100644
index 00000000000..57e07d7f4cc
--- /dev/null
+++ b/app/assets/images/emoji/pushpin.png
diff --git a/app/assets/images/emoji/put_litter_in_its_place.png b/app/assets/images/emoji/put_litter_in_its_place.png
new file mode 100644
index 00000000000..82a84f9a375
--- /dev/null
+++ b/app/assets/images/emoji/put_litter_in_its_place.png
diff --git a/app/assets/images/emoji/question.png b/app/assets/images/emoji/question.png
new file mode 100644
index 00000000000..5a58f3458aa
--- /dev/null
+++ b/app/assets/images/emoji/question.png
diff --git a/app/assets/images/emoji/rabbit.png b/app/assets/images/emoji/rabbit.png
new file mode 100644
index 00000000000..ea75ab0426e
--- /dev/null
+++ b/app/assets/images/emoji/rabbit.png
diff --git a/app/assets/images/emoji/rabbit2.png b/app/assets/images/emoji/rabbit2.png
new file mode 100644
index 00000000000..2c8a29c642f
--- /dev/null
+++ b/app/assets/images/emoji/rabbit2.png
diff --git a/app/assets/images/emoji/race_car.png b/app/assets/images/emoji/race_car.png
new file mode 100644
index 00000000000..fe3f045f446
--- /dev/null
+++ b/app/assets/images/emoji/race_car.png
diff --git a/app/assets/images/emoji/racehorse.png b/app/assets/images/emoji/racehorse.png
new file mode 100644
index 00000000000..b3e73cc8903
--- /dev/null
+++ b/app/assets/images/emoji/racehorse.png
diff --git a/app/assets/images/emoji/radio.png b/app/assets/images/emoji/radio.png
new file mode 100644
index 00000000000..dec381fa242
--- /dev/null
+++ b/app/assets/images/emoji/radio.png
diff --git a/app/assets/images/emoji/radio_button.png b/app/assets/images/emoji/radio_button.png
new file mode 100644
index 00000000000..3a23449d917
--- /dev/null
+++ b/app/assets/images/emoji/radio_button.png
diff --git a/app/assets/images/emoji/radioactive.png b/app/assets/images/emoji/radioactive.png
new file mode 100644
index 00000000000..3b46199fe37
--- /dev/null
+++ b/app/assets/images/emoji/radioactive.png
diff --git a/app/assets/images/emoji/rage.png b/app/assets/images/emoji/rage.png
new file mode 100644
index 00000000000..9d739bd40ad
--- /dev/null
+++ b/app/assets/images/emoji/rage.png
diff --git a/app/assets/images/emoji/railway_car.png b/app/assets/images/emoji/railway_car.png
new file mode 100644
index 00000000000..a9acbf13008
--- /dev/null
+++ b/app/assets/images/emoji/railway_car.png
diff --git a/app/assets/images/emoji/railway_track.png b/app/assets/images/emoji/railway_track.png
new file mode 100644
index 00000000000..e1a7a0d1430
--- /dev/null
+++ b/app/assets/images/emoji/railway_track.png
diff --git a/app/assets/images/emoji/rainbow.png b/app/assets/images/emoji/rainbow.png
new file mode 100644
index 00000000000..154735d7147
--- /dev/null
+++ b/app/assets/images/emoji/rainbow.png
diff --git a/app/assets/images/emoji/raised_back_of_hand.png b/app/assets/images/emoji/raised_back_of_hand.png
new file mode 100644
index 00000000000..479234294b4
--- /dev/null
+++ b/app/assets/images/emoji/raised_back_of_hand.png
diff --git a/app/assets/images/emoji/raised_back_of_hand_tone1.png b/app/assets/images/emoji/raised_back_of_hand_tone1.png
new file mode 100644
index 00000000000..813d28499b5
--- /dev/null
+++ b/app/assets/images/emoji/raised_back_of_hand_tone1.png
diff --git a/app/assets/images/emoji/raised_back_of_hand_tone2.png b/app/assets/images/emoji/raised_back_of_hand_tone2.png
new file mode 100644
index 00000000000..192ff795e37
--- /dev/null
+++ b/app/assets/images/emoji/raised_back_of_hand_tone2.png
diff --git a/app/assets/images/emoji/raised_back_of_hand_tone3.png b/app/assets/images/emoji/raised_back_of_hand_tone3.png
new file mode 100644
index 00000000000..61a727abe6b
--- /dev/null
+++ b/app/assets/images/emoji/raised_back_of_hand_tone3.png
diff --git a/app/assets/images/emoji/raised_back_of_hand_tone4.png b/app/assets/images/emoji/raised_back_of_hand_tone4.png
new file mode 100644
index 00000000000..2e83da511f5
--- /dev/null
+++ b/app/assets/images/emoji/raised_back_of_hand_tone4.png
diff --git a/app/assets/images/emoji/raised_back_of_hand_tone5.png b/app/assets/images/emoji/raised_back_of_hand_tone5.png
new file mode 100644
index 00000000000..d7a5b95a02c
--- /dev/null
+++ b/app/assets/images/emoji/raised_back_of_hand_tone5.png
diff --git a/app/assets/images/emoji/raised_hand.png b/app/assets/images/emoji/raised_hand.png
new file mode 100644
index 00000000000..6b2954315d1
--- /dev/null
+++ b/app/assets/images/emoji/raised_hand.png
diff --git a/app/assets/images/emoji/raised_hand_tone1.png b/app/assets/images/emoji/raised_hand_tone1.png
new file mode 100644
index 00000000000..3b752902c07
--- /dev/null
+++ b/app/assets/images/emoji/raised_hand_tone1.png
diff --git a/app/assets/images/emoji/raised_hand_tone2.png b/app/assets/images/emoji/raised_hand_tone2.png
new file mode 100644
index 00000000000..44e2a514c60
--- /dev/null
+++ b/app/assets/images/emoji/raised_hand_tone2.png
diff --git a/app/assets/images/emoji/raised_hand_tone3.png b/app/assets/images/emoji/raised_hand_tone3.png
new file mode 100644
index 00000000000..5bb62a7528a
--- /dev/null
+++ b/app/assets/images/emoji/raised_hand_tone3.png
diff --git a/app/assets/images/emoji/raised_hand_tone4.png b/app/assets/images/emoji/raised_hand_tone4.png
new file mode 100644
index 00000000000..c7f8c9ec270
--- /dev/null
+++ b/app/assets/images/emoji/raised_hand_tone4.png
diff --git a/app/assets/images/emoji/raised_hand_tone5.png b/app/assets/images/emoji/raised_hand_tone5.png
new file mode 100644
index 00000000000..c601b58a73e
--- /dev/null
+++ b/app/assets/images/emoji/raised_hand_tone5.png
diff --git a/app/assets/images/emoji/raised_hands.png b/app/assets/images/emoji/raised_hands.png
new file mode 100644
index 00000000000..c0155f728e7
--- /dev/null
+++ b/app/assets/images/emoji/raised_hands.png
diff --git a/app/assets/images/emoji/raised_hands_tone1.png b/app/assets/images/emoji/raised_hands_tone1.png
new file mode 100644
index 00000000000..1168b8236b6
--- /dev/null
+++ b/app/assets/images/emoji/raised_hands_tone1.png
diff --git a/app/assets/images/emoji/raised_hands_tone2.png b/app/assets/images/emoji/raised_hands_tone2.png
new file mode 100644
index 00000000000..322de622903
--- /dev/null
+++ b/app/assets/images/emoji/raised_hands_tone2.png
diff --git a/app/assets/images/emoji/raised_hands_tone3.png b/app/assets/images/emoji/raised_hands_tone3.png
new file mode 100644
index 00000000000..2aa24e05ae1
--- /dev/null
+++ b/app/assets/images/emoji/raised_hands_tone3.png
diff --git a/app/assets/images/emoji/raised_hands_tone4.png b/app/assets/images/emoji/raised_hands_tone4.png
new file mode 100644
index 00000000000..f31bf0db992
--- /dev/null
+++ b/app/assets/images/emoji/raised_hands_tone4.png
diff --git a/app/assets/images/emoji/raised_hands_tone5.png b/app/assets/images/emoji/raised_hands_tone5.png
new file mode 100644
index 00000000000..5e95067f98b
--- /dev/null
+++ b/app/assets/images/emoji/raised_hands_tone5.png
diff --git a/app/assets/images/emoji/raising_hand.png b/app/assets/images/emoji/raising_hand.png
new file mode 100644
index 00000000000..2880708c0cc
--- /dev/null
+++ b/app/assets/images/emoji/raising_hand.png
diff --git a/app/assets/images/emoji/raising_hand_tone1.png b/app/assets/images/emoji/raising_hand_tone1.png
new file mode 100644
index 00000000000..1c90e3e2689
--- /dev/null
+++ b/app/assets/images/emoji/raising_hand_tone1.png
diff --git a/app/assets/images/emoji/raising_hand_tone2.png b/app/assets/images/emoji/raising_hand_tone2.png
new file mode 100644
index 00000000000..82c3ef2bfc5
--- /dev/null
+++ b/app/assets/images/emoji/raising_hand_tone2.png
diff --git a/app/assets/images/emoji/raising_hand_tone3.png b/app/assets/images/emoji/raising_hand_tone3.png
new file mode 100644
index 00000000000..1b1da2aa0ca
--- /dev/null
+++ b/app/assets/images/emoji/raising_hand_tone3.png
diff --git a/app/assets/images/emoji/raising_hand_tone4.png b/app/assets/images/emoji/raising_hand_tone4.png
new file mode 100644
index 00000000000..e453855c01f
--- /dev/null
+++ b/app/assets/images/emoji/raising_hand_tone4.png
diff --git a/app/assets/images/emoji/raising_hand_tone5.png b/app/assets/images/emoji/raising_hand_tone5.png
new file mode 100644
index 00000000000..b86200fd844
--- /dev/null
+++ b/app/assets/images/emoji/raising_hand_tone5.png
diff --git a/app/assets/images/emoji/ram.png b/app/assets/images/emoji/ram.png
new file mode 100644
index 00000000000..52a44464c9b
--- /dev/null
+++ b/app/assets/images/emoji/ram.png
diff --git a/app/assets/images/emoji/ramen.png b/app/assets/images/emoji/ramen.png
new file mode 100644
index 00000000000..c1cb7cd7384
--- /dev/null
+++ b/app/assets/images/emoji/ramen.png
diff --git a/app/assets/images/emoji/rat.png b/app/assets/images/emoji/rat.png
new file mode 100644
index 00000000000..86219144f10
--- /dev/null
+++ b/app/assets/images/emoji/rat.png
diff --git a/app/assets/images/emoji/record_button.png b/app/assets/images/emoji/record_button.png
new file mode 100644
index 00000000000..ada52830fce
--- /dev/null
+++ b/app/assets/images/emoji/record_button.png
diff --git a/app/assets/images/emoji/recycle.png b/app/assets/images/emoji/recycle.png
new file mode 100644
index 00000000000..9221f095c37
--- /dev/null
+++ b/app/assets/images/emoji/recycle.png
diff --git a/app/assets/images/emoji/red_car.png b/app/assets/images/emoji/red_car.png
new file mode 100644
index 00000000000..b3e6a774dea
--- /dev/null
+++ b/app/assets/images/emoji/red_car.png
diff --git a/app/assets/images/emoji/red_circle.png b/app/assets/images/emoji/red_circle.png
new file mode 100644
index 00000000000..4bef930d92f
--- /dev/null
+++ b/app/assets/images/emoji/red_circle.png
diff --git a/app/assets/images/emoji/registered.png b/app/assets/images/emoji/registered.png
new file mode 100644
index 00000000000..53ef9f2d4e6
--- /dev/null
+++ b/app/assets/images/emoji/registered.png
diff --git a/app/assets/images/emoji/relaxed.png b/app/assets/images/emoji/relaxed.png
new file mode 100644
index 00000000000..e9e53c03d45
--- /dev/null
+++ b/app/assets/images/emoji/relaxed.png
diff --git a/app/assets/images/emoji/relieved.png b/app/assets/images/emoji/relieved.png
new file mode 100644
index 00000000000..715ad0bf53f
--- /dev/null
+++ b/app/assets/images/emoji/relieved.png
diff --git a/app/assets/images/emoji/reminder_ribbon.png b/app/assets/images/emoji/reminder_ribbon.png
new file mode 100644
index 00000000000..3988bbd094c
--- /dev/null
+++ b/app/assets/images/emoji/reminder_ribbon.png
diff --git a/app/assets/images/emoji/repeat.png b/app/assets/images/emoji/repeat.png
new file mode 100644
index 00000000000..540ce4e0fba
--- /dev/null
+++ b/app/assets/images/emoji/repeat.png
diff --git a/app/assets/images/emoji/repeat_one.png b/app/assets/images/emoji/repeat_one.png
new file mode 100644
index 00000000000..9567e83337f
--- /dev/null
+++ b/app/assets/images/emoji/repeat_one.png
diff --git a/app/assets/images/emoji/restroom.png b/app/assets/images/emoji/restroom.png
new file mode 100644
index 00000000000..9588e0f0ef7
--- /dev/null
+++ b/app/assets/images/emoji/restroom.png
diff --git a/app/assets/images/emoji/revolving_hearts.png b/app/assets/images/emoji/revolving_hearts.png
new file mode 100644
index 00000000000..7b9d1948f73
--- /dev/null
+++ b/app/assets/images/emoji/revolving_hearts.png
diff --git a/app/assets/images/emoji/rewind.png b/app/assets/images/emoji/rewind.png
new file mode 100644
index 00000000000..e22e2bd3da5
--- /dev/null
+++ b/app/assets/images/emoji/rewind.png
diff --git a/app/assets/images/emoji/rhino.png b/app/assets/images/emoji/rhino.png
new file mode 100644
index 00000000000..12f4e0d9d9b
--- /dev/null
+++ b/app/assets/images/emoji/rhino.png
diff --git a/app/assets/images/emoji/ribbon.png b/app/assets/images/emoji/ribbon.png
new file mode 100644
index 00000000000..0f253c3d8c8
--- /dev/null
+++ b/app/assets/images/emoji/ribbon.png
diff --git a/app/assets/images/emoji/rice.png b/app/assets/images/emoji/rice.png
new file mode 100644
index 00000000000..6e3ac7956b1
--- /dev/null
+++ b/app/assets/images/emoji/rice.png
diff --git a/app/assets/images/emoji/rice_ball.png b/app/assets/images/emoji/rice_ball.png
new file mode 100644
index 00000000000..d3d8ee25cb8
--- /dev/null
+++ b/app/assets/images/emoji/rice_ball.png
diff --git a/app/assets/images/emoji/rice_cracker.png b/app/assets/images/emoji/rice_cracker.png
new file mode 100644
index 00000000000..7fbd08e4ff9
--- /dev/null
+++ b/app/assets/images/emoji/rice_cracker.png
diff --git a/app/assets/images/emoji/rice_scene.png b/app/assets/images/emoji/rice_scene.png
new file mode 100644
index 00000000000..1a28426592a
--- /dev/null
+++ b/app/assets/images/emoji/rice_scene.png
diff --git a/app/assets/images/emoji/right_facing_fist.png b/app/assets/images/emoji/right_facing_fist.png
new file mode 100644
index 00000000000..754ed066d2c
--- /dev/null
+++ b/app/assets/images/emoji/right_facing_fist.png
diff --git a/app/assets/images/emoji/right_facing_fist_tone1.png b/app/assets/images/emoji/right_facing_fist_tone1.png
new file mode 100644
index 00000000000..33ded2f61a6
--- /dev/null
+++ b/app/assets/images/emoji/right_facing_fist_tone1.png
diff --git a/app/assets/images/emoji/right_facing_fist_tone2.png b/app/assets/images/emoji/right_facing_fist_tone2.png
new file mode 100644
index 00000000000..88054e335c7
--- /dev/null
+++ b/app/assets/images/emoji/right_facing_fist_tone2.png
diff --git a/app/assets/images/emoji/right_facing_fist_tone3.png b/app/assets/images/emoji/right_facing_fist_tone3.png
new file mode 100644
index 00000000000..84b9f5da7f7
--- /dev/null
+++ b/app/assets/images/emoji/right_facing_fist_tone3.png
diff --git a/app/assets/images/emoji/right_facing_fist_tone4.png b/app/assets/images/emoji/right_facing_fist_tone4.png
new file mode 100644
index 00000000000..e741cfea68b
--- /dev/null
+++ b/app/assets/images/emoji/right_facing_fist_tone4.png
diff --git a/app/assets/images/emoji/right_facing_fist_tone5.png b/app/assets/images/emoji/right_facing_fist_tone5.png
new file mode 100644
index 00000000000..cf66d760c1f
--- /dev/null
+++ b/app/assets/images/emoji/right_facing_fist_tone5.png
diff --git a/app/assets/images/emoji/ring.png b/app/assets/images/emoji/ring.png
new file mode 100644
index 00000000000..87d227adb74
--- /dev/null
+++ b/app/assets/images/emoji/ring.png
diff --git a/app/assets/images/emoji/robot.png b/app/assets/images/emoji/robot.png
new file mode 100644
index 00000000000..7cc62612c6a
--- /dev/null
+++ b/app/assets/images/emoji/robot.png
diff --git a/app/assets/images/emoji/rocket.png b/app/assets/images/emoji/rocket.png
new file mode 100644
index 00000000000..0d8da089a37
--- /dev/null
+++ b/app/assets/images/emoji/rocket.png
diff --git a/app/assets/images/emoji/rofl.png b/app/assets/images/emoji/rofl.png
new file mode 100644
index 00000000000..b1736fedfeb
--- /dev/null
+++ b/app/assets/images/emoji/rofl.png
diff --git a/app/assets/images/emoji/roller_coaster.png b/app/assets/images/emoji/roller_coaster.png
new file mode 100644
index 00000000000..5b849e071e8
--- /dev/null
+++ b/app/assets/images/emoji/roller_coaster.png
diff --git a/app/assets/images/emoji/rolling_eyes.png b/app/assets/images/emoji/rolling_eyes.png
new file mode 100644
index 00000000000..2f77b9fc3b9
--- /dev/null
+++ b/app/assets/images/emoji/rolling_eyes.png
diff --git a/app/assets/images/emoji/rooster.png b/app/assets/images/emoji/rooster.png
new file mode 100644
index 00000000000..bbf2bbff97a
--- /dev/null
+++ b/app/assets/images/emoji/rooster.png
diff --git a/app/assets/images/emoji/rose.png b/app/assets/images/emoji/rose.png
new file mode 100644
index 00000000000..52c286d31ce
--- /dev/null
+++ b/app/assets/images/emoji/rose.png
diff --git a/app/assets/images/emoji/rosette.png b/app/assets/images/emoji/rosette.png
new file mode 100644
index 00000000000..8030e494bcf
--- /dev/null
+++ b/app/assets/images/emoji/rosette.png
diff --git a/app/assets/images/emoji/rotating_light.png b/app/assets/images/emoji/rotating_light.png
new file mode 100644
index 00000000000..cad66b0afef
--- /dev/null
+++ b/app/assets/images/emoji/rotating_light.png
diff --git a/app/assets/images/emoji/round_pushpin.png b/app/assets/images/emoji/round_pushpin.png
new file mode 100644
index 00000000000..28b9d72866e
--- /dev/null
+++ b/app/assets/images/emoji/round_pushpin.png
diff --git a/app/assets/images/emoji/rowboat.png b/app/assets/images/emoji/rowboat.png
new file mode 100644
index 00000000000..dd4dfc095d9
--- /dev/null
+++ b/app/assets/images/emoji/rowboat.png
diff --git a/app/assets/images/emoji/rowboat_tone1.png b/app/assets/images/emoji/rowboat_tone1.png
new file mode 100644
index 00000000000..5e5d18548cb
--- /dev/null
+++ b/app/assets/images/emoji/rowboat_tone1.png
diff --git a/app/assets/images/emoji/rowboat_tone2.png b/app/assets/images/emoji/rowboat_tone2.png
new file mode 100644
index 00000000000..9b123ef8871
--- /dev/null
+++ b/app/assets/images/emoji/rowboat_tone2.png
diff --git a/app/assets/images/emoji/rowboat_tone3.png b/app/assets/images/emoji/rowboat_tone3.png
new file mode 100644
index 00000000000..8ebd89a55f5
--- /dev/null
+++ b/app/assets/images/emoji/rowboat_tone3.png
diff --git a/app/assets/images/emoji/rowboat_tone4.png b/app/assets/images/emoji/rowboat_tone4.png
new file mode 100644
index 00000000000..2b0d04f8725
--- /dev/null
+++ b/app/assets/images/emoji/rowboat_tone4.png
diff --git a/app/assets/images/emoji/rowboat_tone5.png b/app/assets/images/emoji/rowboat_tone5.png
new file mode 100644
index 00000000000..b346f2dfc84
--- /dev/null
+++ b/app/assets/images/emoji/rowboat_tone5.png
diff --git a/app/assets/images/emoji/rugby_football.png b/app/assets/images/emoji/rugby_football.png
new file mode 100644
index 00000000000..b1872273436
--- /dev/null
+++ b/app/assets/images/emoji/rugby_football.png
diff --git a/app/assets/images/emoji/runner.png b/app/assets/images/emoji/runner.png
new file mode 100644
index 00000000000..e914915976a
--- /dev/null
+++ b/app/assets/images/emoji/runner.png
diff --git a/app/assets/images/emoji/runner_tone1.png b/app/assets/images/emoji/runner_tone1.png
new file mode 100644
index 00000000000..9355239a52d
--- /dev/null
+++ b/app/assets/images/emoji/runner_tone1.png
diff --git a/app/assets/images/emoji/runner_tone2.png b/app/assets/images/emoji/runner_tone2.png
new file mode 100644
index 00000000000..6112fd5c376
--- /dev/null
+++ b/app/assets/images/emoji/runner_tone2.png
diff --git a/app/assets/images/emoji/runner_tone3.png b/app/assets/images/emoji/runner_tone3.png
new file mode 100644
index 00000000000..625ec708f48
--- /dev/null
+++ b/app/assets/images/emoji/runner_tone3.png
diff --git a/app/assets/images/emoji/runner_tone4.png b/app/assets/images/emoji/runner_tone4.png
new file mode 100644
index 00000000000..242f1b56337
--- /dev/null
+++ b/app/assets/images/emoji/runner_tone4.png
diff --git a/app/assets/images/emoji/runner_tone5.png b/app/assets/images/emoji/runner_tone5.png
new file mode 100644
index 00000000000..2976c6f019f
--- /dev/null
+++ b/app/assets/images/emoji/runner_tone5.png
diff --git a/app/assets/images/emoji/running_shirt_with_sash.png b/app/assets/images/emoji/running_shirt_with_sash.png
new file mode 100644
index 00000000000..6d83c06b803
--- /dev/null
+++ b/app/assets/images/emoji/running_shirt_with_sash.png
diff --git a/app/assets/images/emoji/sa.png b/app/assets/images/emoji/sa.png
new file mode 100644
index 00000000000..900f9633247
--- /dev/null
+++ b/app/assets/images/emoji/sa.png
diff --git a/app/assets/images/emoji/sagittarius.png b/app/assets/images/emoji/sagittarius.png
new file mode 100644
index 00000000000..f8d94ff2923
--- /dev/null
+++ b/app/assets/images/emoji/sagittarius.png
diff --git a/app/assets/images/emoji/sailboat.png b/app/assets/images/emoji/sailboat.png
new file mode 100644
index 00000000000..772ef11da5d
--- /dev/null
+++ b/app/assets/images/emoji/sailboat.png
diff --git a/app/assets/images/emoji/sake.png b/app/assets/images/emoji/sake.png
new file mode 100644
index 00000000000..2933f5672c4
--- /dev/null
+++ b/app/assets/images/emoji/sake.png
diff --git a/app/assets/images/emoji/salad.png b/app/assets/images/emoji/salad.png
new file mode 100644
index 00000000000..c89f9341158
--- /dev/null
+++ b/app/assets/images/emoji/salad.png
diff --git a/app/assets/images/emoji/sandal.png b/app/assets/images/emoji/sandal.png
new file mode 100644
index 00000000000..9d9f5122b7a
--- /dev/null
+++ b/app/assets/images/emoji/sandal.png
diff --git a/app/assets/images/emoji/santa.png b/app/assets/images/emoji/santa.png
new file mode 100644
index 00000000000..bc83ab80d52
--- /dev/null
+++ b/app/assets/images/emoji/santa.png
diff --git a/app/assets/images/emoji/santa_tone1.png b/app/assets/images/emoji/santa_tone1.png
new file mode 100644
index 00000000000..5233ffb7174
--- /dev/null
+++ b/app/assets/images/emoji/santa_tone1.png
diff --git a/app/assets/images/emoji/santa_tone2.png b/app/assets/images/emoji/santa_tone2.png
new file mode 100644
index 00000000000..4e845438197
--- /dev/null
+++ b/app/assets/images/emoji/santa_tone2.png
diff --git a/app/assets/images/emoji/santa_tone3.png b/app/assets/images/emoji/santa_tone3.png
new file mode 100644
index 00000000000..7fc4f33b60f
--- /dev/null
+++ b/app/assets/images/emoji/santa_tone3.png
diff --git a/app/assets/images/emoji/santa_tone4.png b/app/assets/images/emoji/santa_tone4.png
new file mode 100644
index 00000000000..d1d5a15132d
--- /dev/null
+++ b/app/assets/images/emoji/santa_tone4.png
diff --git a/app/assets/images/emoji/santa_tone5.png b/app/assets/images/emoji/santa_tone5.png
new file mode 100644
index 00000000000..4d697a01f24
--- /dev/null
+++ b/app/assets/images/emoji/santa_tone5.png
diff --git a/app/assets/images/emoji/satellite.png b/app/assets/images/emoji/satellite.png
new file mode 100644
index 00000000000..db0372795f4
--- /dev/null
+++ b/app/assets/images/emoji/satellite.png
diff --git a/app/assets/images/emoji/satellite_orbital.png b/app/assets/images/emoji/satellite_orbital.png
new file mode 100644
index 00000000000..4ba55d6e297
--- /dev/null
+++ b/app/assets/images/emoji/satellite_orbital.png
diff --git a/app/assets/images/emoji/saxophone.png b/app/assets/images/emoji/saxophone.png
new file mode 100644
index 00000000000..a392faec291
--- /dev/null
+++ b/app/assets/images/emoji/saxophone.png
diff --git a/app/assets/images/emoji/scales.png b/app/assets/images/emoji/scales.png
new file mode 100644
index 00000000000..0757eda1684
--- /dev/null
+++ b/app/assets/images/emoji/scales.png
diff --git a/app/assets/images/emoji/school.png b/app/assets/images/emoji/school.png
new file mode 100644
index 00000000000..269759534f0
--- /dev/null
+++ b/app/assets/images/emoji/school.png
diff --git a/app/assets/images/emoji/school_satchel.png b/app/assets/images/emoji/school_satchel.png
new file mode 100644
index 00000000000..9997c86e7dc
--- /dev/null
+++ b/app/assets/images/emoji/school_satchel.png
diff --git a/app/assets/images/emoji/scissors.png b/app/assets/images/emoji/scissors.png
new file mode 100644
index 00000000000..270571c8cdd
--- /dev/null
+++ b/app/assets/images/emoji/scissors.png
diff --git a/app/assets/images/emoji/scooter.png b/app/assets/images/emoji/scooter.png
new file mode 100644
index 00000000000..4ab7ef59cd2
--- /dev/null
+++ b/app/assets/images/emoji/scooter.png
diff --git a/app/assets/images/emoji/scorpion.png b/app/assets/images/emoji/scorpion.png
new file mode 100644
index 00000000000..449a6b281c9
--- /dev/null
+++ b/app/assets/images/emoji/scorpion.png
diff --git a/app/assets/images/emoji/scorpius.png b/app/assets/images/emoji/scorpius.png
new file mode 100644
index 00000000000..c31a9920455
--- /dev/null
+++ b/app/assets/images/emoji/scorpius.png
diff --git a/app/assets/images/emoji/scream.png b/app/assets/images/emoji/scream.png
new file mode 100644
index 00000000000..c3bea9f2510
--- /dev/null
+++ b/app/assets/images/emoji/scream.png
diff --git a/app/assets/images/emoji/scream_cat.png b/app/assets/images/emoji/scream_cat.png
new file mode 100644
index 00000000000..15803ad8e6e
--- /dev/null
+++ b/app/assets/images/emoji/scream_cat.png
diff --git a/app/assets/images/emoji/scroll.png b/app/assets/images/emoji/scroll.png
new file mode 100644
index 00000000000..50ee5dcd4b9
--- /dev/null
+++ b/app/assets/images/emoji/scroll.png
diff --git a/app/assets/images/emoji/seat.png b/app/assets/images/emoji/seat.png
new file mode 100644
index 00000000000..a6d72d95adb
--- /dev/null
+++ b/app/assets/images/emoji/seat.png
diff --git a/app/assets/images/emoji/second_place.png b/app/assets/images/emoji/second_place.png
new file mode 100644
index 00000000000..17b011268b6
--- /dev/null
+++ b/app/assets/images/emoji/second_place.png
diff --git a/app/assets/images/emoji/secret.png b/app/assets/images/emoji/secret.png
new file mode 100644
index 00000000000..5fd72608e60
--- /dev/null
+++ b/app/assets/images/emoji/secret.png
diff --git a/app/assets/images/emoji/see_no_evil.png b/app/assets/images/emoji/see_no_evil.png
new file mode 100644
index 00000000000..5187e474531
--- /dev/null
+++ b/app/assets/images/emoji/see_no_evil.png
diff --git a/app/assets/images/emoji/seedling.png b/app/assets/images/emoji/seedling.png
new file mode 100644
index 00000000000..ae0948bcfd6
--- /dev/null
+++ b/app/assets/images/emoji/seedling.png
diff --git a/app/assets/images/emoji/selfie.png b/app/assets/images/emoji/selfie.png
new file mode 100644
index 00000000000..6a1ba75c7e3
--- /dev/null
+++ b/app/assets/images/emoji/selfie.png
diff --git a/app/assets/images/emoji/selfie_tone1.png b/app/assets/images/emoji/selfie_tone1.png
new file mode 100644
index 00000000000..290e075b56f
--- /dev/null
+++ b/app/assets/images/emoji/selfie_tone1.png
diff --git a/app/assets/images/emoji/selfie_tone2.png b/app/assets/images/emoji/selfie_tone2.png
new file mode 100644
index 00000000000..fcd9595b643
--- /dev/null
+++ b/app/assets/images/emoji/selfie_tone2.png
diff --git a/app/assets/images/emoji/selfie_tone3.png b/app/assets/images/emoji/selfie_tone3.png
new file mode 100644
index 00000000000..f3a22fdf435
--- /dev/null
+++ b/app/assets/images/emoji/selfie_tone3.png
diff --git a/app/assets/images/emoji/selfie_tone4.png b/app/assets/images/emoji/selfie_tone4.png
new file mode 100644
index 00000000000..cdecf6d9f4e
--- /dev/null
+++ b/app/assets/images/emoji/selfie_tone4.png
diff --git a/app/assets/images/emoji/selfie_tone5.png b/app/assets/images/emoji/selfie_tone5.png
new file mode 100644
index 00000000000..86acbb6c202
--- /dev/null
+++ b/app/assets/images/emoji/selfie_tone5.png
diff --git a/app/assets/images/emoji/seven.png b/app/assets/images/emoji/seven.png
new file mode 100644
index 00000000000..9b3476ae7c7
--- /dev/null
+++ b/app/assets/images/emoji/seven.png
diff --git a/app/assets/images/emoji/shallow_pan_of_food.png b/app/assets/images/emoji/shallow_pan_of_food.png
new file mode 100644
index 00000000000..663a1006acd
--- /dev/null
+++ b/app/assets/images/emoji/shallow_pan_of_food.png
diff --git a/app/assets/images/emoji/shamrock.png b/app/assets/images/emoji/shamrock.png
new file mode 100644
index 00000000000..f202aecfe6f
--- /dev/null
+++ b/app/assets/images/emoji/shamrock.png
diff --git a/app/assets/images/emoji/shark.png b/app/assets/images/emoji/shark.png
new file mode 100644
index 00000000000..c75076d57d8
--- /dev/null
+++ b/app/assets/images/emoji/shark.png
diff --git a/app/assets/images/emoji/shaved_ice.png b/app/assets/images/emoji/shaved_ice.png
new file mode 100644
index 00000000000..36dfb53ca93
--- /dev/null
+++ b/app/assets/images/emoji/shaved_ice.png
diff --git a/app/assets/images/emoji/sheep.png b/app/assets/images/emoji/sheep.png
new file mode 100644
index 00000000000..102b8a52b28
--- /dev/null
+++ b/app/assets/images/emoji/sheep.png
diff --git a/app/assets/images/emoji/shell.png b/app/assets/images/emoji/shell.png
new file mode 100644
index 00000000000..55721629f62
--- /dev/null
+++ b/app/assets/images/emoji/shell.png
diff --git a/app/assets/images/emoji/shield.png b/app/assets/images/emoji/shield.png
new file mode 100644
index 00000000000..610bf033ce0
--- /dev/null
+++ b/app/assets/images/emoji/shield.png
diff --git a/app/assets/images/emoji/shinto_shrine.png b/app/assets/images/emoji/shinto_shrine.png
new file mode 100644
index 00000000000..5a344975bf3
--- /dev/null
+++ b/app/assets/images/emoji/shinto_shrine.png
diff --git a/app/assets/images/emoji/ship.png b/app/assets/images/emoji/ship.png
new file mode 100644
index 00000000000..62d54f7d6c9
--- /dev/null
+++ b/app/assets/images/emoji/ship.png
diff --git a/app/assets/images/emoji/shirt.png b/app/assets/images/emoji/shirt.png
new file mode 100644
index 00000000000..af08dec8b59
--- /dev/null
+++ b/app/assets/images/emoji/shirt.png
diff --git a/app/assets/images/emoji/shopping_bags.png b/app/assets/images/emoji/shopping_bags.png
new file mode 100644
index 00000000000..99f2a2b13ac
--- /dev/null
+++ b/app/assets/images/emoji/shopping_bags.png
diff --git a/app/assets/images/emoji/shopping_cart.png b/app/assets/images/emoji/shopping_cart.png
new file mode 100644
index 00000000000..1086fe6e456
--- /dev/null
+++ b/app/assets/images/emoji/shopping_cart.png
diff --git a/app/assets/images/emoji/shower.png b/app/assets/images/emoji/shower.png
new file mode 100644
index 00000000000..156776a2e52
--- /dev/null
+++ b/app/assets/images/emoji/shower.png
diff --git a/app/assets/images/emoji/shrimp.png b/app/assets/images/emoji/shrimp.png
new file mode 100644
index 00000000000..49eff28a71e
--- /dev/null
+++ b/app/assets/images/emoji/shrimp.png
diff --git a/app/assets/images/emoji/shrug.png b/app/assets/images/emoji/shrug.png
new file mode 100644
index 00000000000..76e63bfac77
--- /dev/null
+++ b/app/assets/images/emoji/shrug.png
diff --git a/app/assets/images/emoji/shrug_tone1.png b/app/assets/images/emoji/shrug_tone1.png
new file mode 100644
index 00000000000..1c895e64468
--- /dev/null
+++ b/app/assets/images/emoji/shrug_tone1.png
diff --git a/app/assets/images/emoji/shrug_tone2.png b/app/assets/images/emoji/shrug_tone2.png
new file mode 100644
index 00000000000..4e3ca8f8bac
--- /dev/null
+++ b/app/assets/images/emoji/shrug_tone2.png
diff --git a/app/assets/images/emoji/shrug_tone3.png b/app/assets/images/emoji/shrug_tone3.png
new file mode 100644
index 00000000000..d1b16a19bb5
--- /dev/null
+++ b/app/assets/images/emoji/shrug_tone3.png
diff --git a/app/assets/images/emoji/shrug_tone4.png b/app/assets/images/emoji/shrug_tone4.png
new file mode 100644
index 00000000000..5fbef3f2255
--- /dev/null
+++ b/app/assets/images/emoji/shrug_tone4.png
diff --git a/app/assets/images/emoji/shrug_tone5.png b/app/assets/images/emoji/shrug_tone5.png
new file mode 100644
index 00000000000..4af2e28bc5c
--- /dev/null
+++ b/app/assets/images/emoji/shrug_tone5.png
diff --git a/app/assets/images/emoji/signal_strength.png b/app/assets/images/emoji/signal_strength.png
new file mode 100644
index 00000000000..ee2b5a4b519
--- /dev/null
+++ b/app/assets/images/emoji/signal_strength.png
diff --git a/app/assets/images/emoji/six.png b/app/assets/images/emoji/six.png
new file mode 100644
index 00000000000..371b3acef2c
--- /dev/null
+++ b/app/assets/images/emoji/six.png
diff --git a/app/assets/images/emoji/six_pointed_star.png b/app/assets/images/emoji/six_pointed_star.png
new file mode 100644
index 00000000000..2eb1707458b
--- /dev/null
+++ b/app/assets/images/emoji/six_pointed_star.png
diff --git a/app/assets/images/emoji/ski.png b/app/assets/images/emoji/ski.png
new file mode 100644
index 00000000000..4a2d2c12306
--- /dev/null
+++ b/app/assets/images/emoji/ski.png
diff --git a/app/assets/images/emoji/skier.png b/app/assets/images/emoji/skier.png
new file mode 100644
index 00000000000..2eb3bdce2af
--- /dev/null
+++ b/app/assets/images/emoji/skier.png
diff --git a/app/assets/images/emoji/skull.png b/app/assets/images/emoji/skull.png
new file mode 100644
index 00000000000..26abb17296a
--- /dev/null
+++ b/app/assets/images/emoji/skull.png
diff --git a/app/assets/images/emoji/skull_crossbones.png b/app/assets/images/emoji/skull_crossbones.png
new file mode 100644
index 00000000000..b459df9227a
--- /dev/null
+++ b/app/assets/images/emoji/skull_crossbones.png
diff --git a/app/assets/images/emoji/sleeping.png b/app/assets/images/emoji/sleeping.png
new file mode 100644
index 00000000000..9ecf600d6d8
--- /dev/null
+++ b/app/assets/images/emoji/sleeping.png
diff --git a/app/assets/images/emoji/sleeping_accommodation.png b/app/assets/images/emoji/sleeping_accommodation.png
new file mode 100644
index 00000000000..c739e7fb69b
--- /dev/null
+++ b/app/assets/images/emoji/sleeping_accommodation.png
diff --git a/app/assets/images/emoji/sleepy.png b/app/assets/images/emoji/sleepy.png
new file mode 100644
index 00000000000..836b4107717
--- /dev/null
+++ b/app/assets/images/emoji/sleepy.png
diff --git a/app/assets/images/emoji/slight_frown.png b/app/assets/images/emoji/slight_frown.png
new file mode 100644
index 00000000000..b2f1d983d36
--- /dev/null
+++ b/app/assets/images/emoji/slight_frown.png
diff --git a/app/assets/images/emoji/slight_smile.png b/app/assets/images/emoji/slight_smile.png
new file mode 100644
index 00000000000..ddd7d65dd3d
--- /dev/null
+++ b/app/assets/images/emoji/slight_smile.png
diff --git a/app/assets/images/emoji/slot_machine.png b/app/assets/images/emoji/slot_machine.png
new file mode 100644
index 00000000000..ee71b6c268c
--- /dev/null
+++ b/app/assets/images/emoji/slot_machine.png
diff --git a/app/assets/images/emoji/small_blue_diamond.png b/app/assets/images/emoji/small_blue_diamond.png
new file mode 100644
index 00000000000..b86b5bc4db3
--- /dev/null
+++ b/app/assets/images/emoji/small_blue_diamond.png
diff --git a/app/assets/images/emoji/small_orange_diamond.png b/app/assets/images/emoji/small_orange_diamond.png
new file mode 100644
index 00000000000..e1c6ed9b2f8
--- /dev/null
+++ b/app/assets/images/emoji/small_orange_diamond.png
diff --git a/app/assets/images/emoji/small_red_triangle.png b/app/assets/images/emoji/small_red_triangle.png
new file mode 100644
index 00000000000..785887c195a
--- /dev/null
+++ b/app/assets/images/emoji/small_red_triangle.png
diff --git a/app/assets/images/emoji/small_red_triangle_down.png b/app/assets/images/emoji/small_red_triangle_down.png
new file mode 100644
index 00000000000..a83beff1914
--- /dev/null
+++ b/app/assets/images/emoji/small_red_triangle_down.png
diff --git a/app/assets/images/emoji/smile.png b/app/assets/images/emoji/smile.png
new file mode 100644
index 00000000000..aa47ffe978c
--- /dev/null
+++ b/app/assets/images/emoji/smile.png
diff --git a/app/assets/images/emoji/smile_cat.png b/app/assets/images/emoji/smile_cat.png
new file mode 100644
index 00000000000..6f25f11dd3a
--- /dev/null
+++ b/app/assets/images/emoji/smile_cat.png
diff --git a/app/assets/images/emoji/smiley.png b/app/assets/images/emoji/smiley.png
new file mode 100644
index 00000000000..30957a65968
--- /dev/null
+++ b/app/assets/images/emoji/smiley.png
diff --git a/app/assets/images/emoji/smiley_cat.png b/app/assets/images/emoji/smiley_cat.png
new file mode 100644
index 00000000000..163b57a3427
--- /dev/null
+++ b/app/assets/images/emoji/smiley_cat.png
diff --git a/app/assets/images/emoji/smiling_imp.png b/app/assets/images/emoji/smiling_imp.png
new file mode 100644
index 00000000000..cc2c5f1ec72
--- /dev/null
+++ b/app/assets/images/emoji/smiling_imp.png
diff --git a/app/assets/images/emoji/smirk.png b/app/assets/images/emoji/smirk.png
new file mode 100644
index 00000000000..87852109988
--- /dev/null
+++ b/app/assets/images/emoji/smirk.png
diff --git a/app/assets/images/emoji/smirk_cat.png b/app/assets/images/emoji/smirk_cat.png
new file mode 100644
index 00000000000..9ac5954c199
--- /dev/null
+++ b/app/assets/images/emoji/smirk_cat.png
diff --git a/app/assets/images/emoji/smoking.png b/app/assets/images/emoji/smoking.png
new file mode 100644
index 00000000000..910f648c8f9
--- /dev/null
+++ b/app/assets/images/emoji/smoking.png
diff --git a/app/assets/images/emoji/snail.png b/app/assets/images/emoji/snail.png
new file mode 100644
index 00000000000..f4ea071e2d3
--- /dev/null
+++ b/app/assets/images/emoji/snail.png
diff --git a/app/assets/images/emoji/snake.png b/app/assets/images/emoji/snake.png
new file mode 100644
index 00000000000..d0278a28d8c
--- /dev/null
+++ b/app/assets/images/emoji/snake.png
diff --git a/app/assets/images/emoji/sneezing_face.png b/app/assets/images/emoji/sneezing_face.png
new file mode 100644
index 00000000000..ccf07d4b64d
--- /dev/null
+++ b/app/assets/images/emoji/sneezing_face.png
diff --git a/app/assets/images/emoji/snowboarder.png b/app/assets/images/emoji/snowboarder.png
new file mode 100644
index 00000000000..6361c0f2c9d
--- /dev/null
+++ b/app/assets/images/emoji/snowboarder.png
diff --git a/app/assets/images/emoji/snowflake.png b/app/assets/images/emoji/snowflake.png
new file mode 100644
index 00000000000..db319a77ec6
--- /dev/null
+++ b/app/assets/images/emoji/snowflake.png
diff --git a/app/assets/images/emoji/snowman.png b/app/assets/images/emoji/snowman.png
new file mode 100644
index 00000000000..20c177c2aff
--- /dev/null
+++ b/app/assets/images/emoji/snowman.png
diff --git a/app/assets/images/emoji/snowman2.png b/app/assets/images/emoji/snowman2.png
new file mode 100644
index 00000000000..896f28502af
--- /dev/null
+++ b/app/assets/images/emoji/snowman2.png
diff --git a/app/assets/images/emoji/sob.png b/app/assets/images/emoji/sob.png
new file mode 100644
index 00000000000..52e3517a1ee
--- /dev/null
+++ b/app/assets/images/emoji/sob.png
diff --git a/app/assets/images/emoji/soccer.png b/app/assets/images/emoji/soccer.png
new file mode 100644
index 00000000000..28cfa218d6d
--- /dev/null
+++ b/app/assets/images/emoji/soccer.png
diff --git a/app/assets/images/emoji/soon.png b/app/assets/images/emoji/soon.png
new file mode 100644
index 00000000000..8cdfd86690d
--- /dev/null
+++ b/app/assets/images/emoji/soon.png
diff --git a/app/assets/images/emoji/sos.png b/app/assets/images/emoji/sos.png
new file mode 100644
index 00000000000..d7d8c9953e4
--- /dev/null
+++ b/app/assets/images/emoji/sos.png
diff --git a/app/assets/images/emoji/sound.png b/app/assets/images/emoji/sound.png
new file mode 100644
index 00000000000..e75ddca53ba
--- /dev/null
+++ b/app/assets/images/emoji/sound.png
diff --git a/app/assets/images/emoji/space_invader.png b/app/assets/images/emoji/space_invader.png
new file mode 100644
index 00000000000..2e73f5f32e5
--- /dev/null
+++ b/app/assets/images/emoji/space_invader.png
diff --git a/app/assets/images/emoji/spades.png b/app/assets/images/emoji/spades.png
new file mode 100644
index 00000000000..f822f184cb0
--- /dev/null
+++ b/app/assets/images/emoji/spades.png
diff --git a/app/assets/images/emoji/spaghetti.png b/app/assets/images/emoji/spaghetti.png
new file mode 100644
index 00000000000..89c24a321f1
--- /dev/null
+++ b/app/assets/images/emoji/spaghetti.png
diff --git a/app/assets/images/emoji/sparkle.png b/app/assets/images/emoji/sparkle.png
new file mode 100644
index 00000000000..6aa7b6ec9cf
--- /dev/null
+++ b/app/assets/images/emoji/sparkle.png
diff --git a/app/assets/images/emoji/sparkler.png b/app/assets/images/emoji/sparkler.png
new file mode 100644
index 00000000000..30339cd6e09
--- /dev/null
+++ b/app/assets/images/emoji/sparkler.png
diff --git a/app/assets/images/emoji/sparkles.png b/app/assets/images/emoji/sparkles.png
new file mode 100644
index 00000000000..169bc10b023
--- /dev/null
+++ b/app/assets/images/emoji/sparkles.png
diff --git a/app/assets/images/emoji/sparkling_heart.png b/app/assets/images/emoji/sparkling_heart.png
new file mode 100644
index 00000000000..6709269454e
--- /dev/null
+++ b/app/assets/images/emoji/sparkling_heart.png
diff --git a/app/assets/images/emoji/speak_no_evil.png b/app/assets/images/emoji/speak_no_evil.png
new file mode 100644
index 00000000000..9d9e07c974b
--- /dev/null
+++ b/app/assets/images/emoji/speak_no_evil.png
diff --git a/app/assets/images/emoji/speaker.png b/app/assets/images/emoji/speaker.png
new file mode 100644
index 00000000000..7bcffb8fc43
--- /dev/null
+++ b/app/assets/images/emoji/speaker.png
diff --git a/app/assets/images/emoji/speaking_head.png b/app/assets/images/emoji/speaking_head.png
new file mode 100644
index 00000000000..2df93aaae09
--- /dev/null
+++ b/app/assets/images/emoji/speaking_head.png
diff --git a/app/assets/images/emoji/speech_balloon.png b/app/assets/images/emoji/speech_balloon.png
new file mode 100644
index 00000000000..a34ef741733
--- /dev/null
+++ b/app/assets/images/emoji/speech_balloon.png
diff --git a/app/assets/images/emoji/speedboat.png b/app/assets/images/emoji/speedboat.png
new file mode 100644
index 00000000000..74059d12de1
--- /dev/null
+++ b/app/assets/images/emoji/speedboat.png
diff --git a/app/assets/images/emoji/spider.png b/app/assets/images/emoji/spider.png
new file mode 100644
index 00000000000..3849fa90b94
--- /dev/null
+++ b/app/assets/images/emoji/spider.png
diff --git a/app/assets/images/emoji/spider_web.png b/app/assets/images/emoji/spider_web.png
new file mode 100644
index 00000000000..ba448ee7fba
--- /dev/null
+++ b/app/assets/images/emoji/spider_web.png
diff --git a/app/assets/images/emoji/spoon.png b/app/assets/images/emoji/spoon.png
new file mode 100644
index 00000000000..3c4da766aee
--- /dev/null
+++ b/app/assets/images/emoji/spoon.png
diff --git a/app/assets/images/emoji/spy.png b/app/assets/images/emoji/spy.png
new file mode 100644
index 00000000000..a729e9584d6
--- /dev/null
+++ b/app/assets/images/emoji/spy.png
diff --git a/app/assets/images/emoji/spy_tone1.png b/app/assets/images/emoji/spy_tone1.png
new file mode 100644
index 00000000000..2d1c022caee
--- /dev/null
+++ b/app/assets/images/emoji/spy_tone1.png
diff --git a/app/assets/images/emoji/spy_tone2.png b/app/assets/images/emoji/spy_tone2.png
new file mode 100644
index 00000000000..548b9c26f5d
--- /dev/null
+++ b/app/assets/images/emoji/spy_tone2.png
diff --git a/app/assets/images/emoji/spy_tone3.png b/app/assets/images/emoji/spy_tone3.png
new file mode 100644
index 00000000000..b023f4b18e1
--- /dev/null
+++ b/app/assets/images/emoji/spy_tone3.png
diff --git a/app/assets/images/emoji/spy_tone4.png b/app/assets/images/emoji/spy_tone4.png
new file mode 100644
index 00000000000..d8300af492d
--- /dev/null
+++ b/app/assets/images/emoji/spy_tone4.png
diff --git a/app/assets/images/emoji/spy_tone5.png b/app/assets/images/emoji/spy_tone5.png
new file mode 100644
index 00000000000..ca1462595fa
--- /dev/null
+++ b/app/assets/images/emoji/spy_tone5.png
diff --git a/app/assets/images/emoji/squid.png b/app/assets/images/emoji/squid.png
new file mode 100644
index 00000000000..d2af223f0cb
--- /dev/null
+++ b/app/assets/images/emoji/squid.png
diff --git a/app/assets/images/emoji/stadium.png b/app/assets/images/emoji/stadium.png
new file mode 100644
index 00000000000..00cd6db5e29
--- /dev/null
+++ b/app/assets/images/emoji/stadium.png
diff --git a/app/assets/images/emoji/star.png b/app/assets/images/emoji/star.png
new file mode 100644
index 00000000000..c930947076e
--- /dev/null
+++ b/app/assets/images/emoji/star.png
diff --git a/app/assets/images/emoji/star2.png b/app/assets/images/emoji/star2.png
new file mode 100644
index 00000000000..2f5cba592db
--- /dev/null
+++ b/app/assets/images/emoji/star2.png
diff --git a/app/assets/images/emoji/star_and_crescent.png b/app/assets/images/emoji/star_and_crescent.png
new file mode 100644
index 00000000000..e182636457d
--- /dev/null
+++ b/app/assets/images/emoji/star_and_crescent.png
diff --git a/app/assets/images/emoji/star_of_david.png b/app/assets/images/emoji/star_of_david.png
new file mode 100644
index 00000000000..fc59d0dde24
--- /dev/null
+++ b/app/assets/images/emoji/star_of_david.png
diff --git a/app/assets/images/emoji/stars.png b/app/assets/images/emoji/stars.png
new file mode 100644
index 00000000000..aa45384d1c6
--- /dev/null
+++ b/app/assets/images/emoji/stars.png
diff --git a/app/assets/images/emoji/station.png b/app/assets/images/emoji/station.png
new file mode 100644
index 00000000000..5c26fee529c
--- /dev/null
+++ b/app/assets/images/emoji/station.png
diff --git a/app/assets/images/emoji/statue_of_liberty.png b/app/assets/images/emoji/statue_of_liberty.png
new file mode 100644
index 00000000000..05df8289b59
--- /dev/null
+++ b/app/assets/images/emoji/statue_of_liberty.png
diff --git a/app/assets/images/emoji/steam_locomotive.png b/app/assets/images/emoji/steam_locomotive.png
new file mode 100644
index 00000000000..9ac0d999c4c
--- /dev/null
+++ b/app/assets/images/emoji/steam_locomotive.png
diff --git a/app/assets/images/emoji/stew.png b/app/assets/images/emoji/stew.png
new file mode 100644
index 00000000000..6b3f010c17a
--- /dev/null
+++ b/app/assets/images/emoji/stew.png
diff --git a/app/assets/images/emoji/stop_button.png b/app/assets/images/emoji/stop_button.png
new file mode 100644
index 00000000000..cfa99988ac2
--- /dev/null
+++ b/app/assets/images/emoji/stop_button.png
diff --git a/app/assets/images/emoji/stopwatch.png b/app/assets/images/emoji/stopwatch.png
new file mode 100644
index 00000000000..8fae1c9a898
--- /dev/null
+++ b/app/assets/images/emoji/stopwatch.png
diff --git a/app/assets/images/emoji/straight_ruler.png b/app/assets/images/emoji/straight_ruler.png
new file mode 100644
index 00000000000..1017b7433a1
--- /dev/null
+++ b/app/assets/images/emoji/straight_ruler.png
diff --git a/app/assets/images/emoji/strawberry.png b/app/assets/images/emoji/strawberry.png
new file mode 100644
index 00000000000..7bb86f0b29c
--- /dev/null
+++ b/app/assets/images/emoji/strawberry.png
diff --git a/app/assets/images/emoji/stuck_out_tongue.png b/app/assets/images/emoji/stuck_out_tongue.png
new file mode 100644
index 00000000000..25757341f96
--- /dev/null
+++ b/app/assets/images/emoji/stuck_out_tongue.png
diff --git a/app/assets/images/emoji/stuck_out_tongue_closed_eyes.png b/app/assets/images/emoji/stuck_out_tongue_closed_eyes.png
new file mode 100644
index 00000000000..5c0401e9b1d
--- /dev/null
+++ b/app/assets/images/emoji/stuck_out_tongue_closed_eyes.png
diff --git a/app/assets/images/emoji/stuck_out_tongue_winking_eye.png b/app/assets/images/emoji/stuck_out_tongue_winking_eye.png
new file mode 100644
index 00000000000..4817eaa3dc6
--- /dev/null
+++ b/app/assets/images/emoji/stuck_out_tongue_winking_eye.png
diff --git a/app/assets/images/emoji/stuffed_flatbread.png b/app/assets/images/emoji/stuffed_flatbread.png
new file mode 100644
index 00000000000..a2e10df40a5
--- /dev/null
+++ b/app/assets/images/emoji/stuffed_flatbread.png
diff --git a/app/assets/images/emoji/sun_with_face.png b/app/assets/images/emoji/sun_with_face.png
new file mode 100644
index 00000000000..14a4ea971db
--- /dev/null
+++ b/app/assets/images/emoji/sun_with_face.png
diff --git a/app/assets/images/emoji/sunflower.png b/app/assets/images/emoji/sunflower.png
new file mode 100644
index 00000000000..08cc07761ea
--- /dev/null
+++ b/app/assets/images/emoji/sunflower.png
diff --git a/app/assets/images/emoji/sunglasses.png b/app/assets/images/emoji/sunglasses.png
new file mode 100644
index 00000000000..20011735110
--- /dev/null
+++ b/app/assets/images/emoji/sunglasses.png
diff --git a/app/assets/images/emoji/sunny.png b/app/assets/images/emoji/sunny.png
new file mode 100644
index 00000000000..fd521ae31a7
--- /dev/null
+++ b/app/assets/images/emoji/sunny.png
diff --git a/app/assets/images/emoji/sunrise.png b/app/assets/images/emoji/sunrise.png
new file mode 100644
index 00000000000..4ad36003c20
--- /dev/null
+++ b/app/assets/images/emoji/sunrise.png
diff --git a/app/assets/images/emoji/sunrise_over_mountains.png b/app/assets/images/emoji/sunrise_over_mountains.png
new file mode 100644
index 00000000000..2b99307344d
--- /dev/null
+++ b/app/assets/images/emoji/sunrise_over_mountains.png
diff --git a/app/assets/images/emoji/surfer.png b/app/assets/images/emoji/surfer.png
new file mode 100644
index 00000000000..3ab017adf4b
--- /dev/null
+++ b/app/assets/images/emoji/surfer.png
diff --git a/app/assets/images/emoji/surfer_tone1.png b/app/assets/images/emoji/surfer_tone1.png
new file mode 100644
index 00000000000..b5faaa524cc
--- /dev/null
+++ b/app/assets/images/emoji/surfer_tone1.png
diff --git a/app/assets/images/emoji/surfer_tone2.png b/app/assets/images/emoji/surfer_tone2.png
new file mode 100644
index 00000000000..6d92e412ff1
--- /dev/null
+++ b/app/assets/images/emoji/surfer_tone2.png
diff --git a/app/assets/images/emoji/surfer_tone3.png b/app/assets/images/emoji/surfer_tone3.png
new file mode 100644
index 00000000000..f05ef59496e
--- /dev/null
+++ b/app/assets/images/emoji/surfer_tone3.png
diff --git a/app/assets/images/emoji/surfer_tone4.png b/app/assets/images/emoji/surfer_tone4.png
new file mode 100644
index 00000000000..35e143d19dc
--- /dev/null
+++ b/app/assets/images/emoji/surfer_tone4.png
diff --git a/app/assets/images/emoji/surfer_tone5.png b/app/assets/images/emoji/surfer_tone5.png
new file mode 100644
index 00000000000..38917658eac
--- /dev/null
+++ b/app/assets/images/emoji/surfer_tone5.png
diff --git a/app/assets/images/emoji/sushi.png b/app/assets/images/emoji/sushi.png
new file mode 100644
index 00000000000..f171fd2f7a1
--- /dev/null
+++ b/app/assets/images/emoji/sushi.png
diff --git a/app/assets/images/emoji/suspension_railway.png b/app/assets/images/emoji/suspension_railway.png
new file mode 100644
index 00000000000..a59d5f48c24
--- /dev/null
+++ b/app/assets/images/emoji/suspension_railway.png
diff --git a/app/assets/images/emoji/sweat.png b/app/assets/images/emoji/sweat.png
new file mode 100644
index 00000000000..f0dae7b7893
--- /dev/null
+++ b/app/assets/images/emoji/sweat.png
diff --git a/app/assets/images/emoji/sweat_drops.png b/app/assets/images/emoji/sweat_drops.png
new file mode 100644
index 00000000000..4106117ebc8
--- /dev/null
+++ b/app/assets/images/emoji/sweat_drops.png
diff --git a/app/assets/images/emoji/sweat_smile.png b/app/assets/images/emoji/sweat_smile.png
new file mode 100644
index 00000000000..cb18d9c899b
--- /dev/null
+++ b/app/assets/images/emoji/sweat_smile.png
diff --git a/app/assets/images/emoji/sweet_potato.png b/app/assets/images/emoji/sweet_potato.png
new file mode 100644
index 00000000000..92a425f2e20
--- /dev/null
+++ b/app/assets/images/emoji/sweet_potato.png
diff --git a/app/assets/images/emoji/swimmer.png b/app/assets/images/emoji/swimmer.png
new file mode 100644
index 00000000000..55b4d72f9a7
--- /dev/null
+++ b/app/assets/images/emoji/swimmer.png
diff --git a/app/assets/images/emoji/swimmer_tone1.png b/app/assets/images/emoji/swimmer_tone1.png
new file mode 100644
index 00000000000..38441c9ca9a
--- /dev/null
+++ b/app/assets/images/emoji/swimmer_tone1.png
diff --git a/app/assets/images/emoji/swimmer_tone2.png b/app/assets/images/emoji/swimmer_tone2.png
new file mode 100644
index 00000000000..b0d43112444
--- /dev/null
+++ b/app/assets/images/emoji/swimmer_tone2.png
diff --git a/app/assets/images/emoji/swimmer_tone3.png b/app/assets/images/emoji/swimmer_tone3.png
new file mode 100644
index 00000000000..211e77e2aa0
--- /dev/null
+++ b/app/assets/images/emoji/swimmer_tone3.png
diff --git a/app/assets/images/emoji/swimmer_tone4.png b/app/assets/images/emoji/swimmer_tone4.png
new file mode 100644
index 00000000000..f34c34db9d2
--- /dev/null
+++ b/app/assets/images/emoji/swimmer_tone4.png
diff --git a/app/assets/images/emoji/swimmer_tone5.png b/app/assets/images/emoji/swimmer_tone5.png
new file mode 100644
index 00000000000..3e9231ff868
--- /dev/null
+++ b/app/assets/images/emoji/swimmer_tone5.png
diff --git a/app/assets/images/emoji/symbols.png b/app/assets/images/emoji/symbols.png
new file mode 100644
index 00000000000..ac2fc1f358f
--- /dev/null
+++ b/app/assets/images/emoji/symbols.png
diff --git a/app/assets/images/emoji/synagogue.png b/app/assets/images/emoji/synagogue.png
new file mode 100644
index 00000000000..ee347904c80
--- /dev/null
+++ b/app/assets/images/emoji/synagogue.png
diff --git a/app/assets/images/emoji/syringe.png b/app/assets/images/emoji/syringe.png
new file mode 100644
index 00000000000..71c1a9528d5
--- /dev/null
+++ b/app/assets/images/emoji/syringe.png
diff --git a/app/assets/images/emoji/taco.png b/app/assets/images/emoji/taco.png
new file mode 100644
index 00000000000..10e847a4619
--- /dev/null
+++ b/app/assets/images/emoji/taco.png
diff --git a/app/assets/images/emoji/tada.png b/app/assets/images/emoji/tada.png
new file mode 100644
index 00000000000..0244d60f269
--- /dev/null
+++ b/app/assets/images/emoji/tada.png
diff --git a/app/assets/images/emoji/tanabata_tree.png b/app/assets/images/emoji/tanabata_tree.png
new file mode 100644
index 00000000000..46fcb3a1aac
--- /dev/null
+++ b/app/assets/images/emoji/tanabata_tree.png
diff --git a/app/assets/images/emoji/tangerine.png b/app/assets/images/emoji/tangerine.png
new file mode 100644
index 00000000000..ab14e5378db
--- /dev/null
+++ b/app/assets/images/emoji/tangerine.png
diff --git a/app/assets/images/emoji/taurus.png b/app/assets/images/emoji/taurus.png
new file mode 100644
index 00000000000..b2a370df42b
--- /dev/null
+++ b/app/assets/images/emoji/taurus.png
diff --git a/app/assets/images/emoji/taxi.png b/app/assets/images/emoji/taxi.png
new file mode 100644
index 00000000000..55f4cc84797
--- /dev/null
+++ b/app/assets/images/emoji/taxi.png
diff --git a/app/assets/images/emoji/tea.png b/app/assets/images/emoji/tea.png
new file mode 100644
index 00000000000..b53b98f0c45
--- /dev/null
+++ b/app/assets/images/emoji/tea.png
diff --git a/app/assets/images/emoji/telephone.png b/app/assets/images/emoji/telephone.png
new file mode 100644
index 00000000000..a1e69f566bc
--- /dev/null
+++ b/app/assets/images/emoji/telephone.png
diff --git a/app/assets/images/emoji/telephone_receiver.png b/app/assets/images/emoji/telephone_receiver.png
new file mode 100644
index 00000000000..69388316c35
--- /dev/null
+++ b/app/assets/images/emoji/telephone_receiver.png
diff --git a/app/assets/images/emoji/telescope.png b/app/assets/images/emoji/telescope.png
new file mode 100644
index 00000000000..d63154614b5
--- /dev/null
+++ b/app/assets/images/emoji/telescope.png
diff --git a/app/assets/images/emoji/ten.png b/app/assets/images/emoji/ten.png
new file mode 100644
index 00000000000..782d4004962
--- /dev/null
+++ b/app/assets/images/emoji/ten.png
diff --git a/app/assets/images/emoji/tennis.png b/app/assets/images/emoji/tennis.png
new file mode 100644
index 00000000000..7e68ba8f301
--- /dev/null
+++ b/app/assets/images/emoji/tennis.png
diff --git a/app/assets/images/emoji/tent.png b/app/assets/images/emoji/tent.png
new file mode 100644
index 00000000000..3fddcfc56eb
--- /dev/null
+++ b/app/assets/images/emoji/tent.png
diff --git a/app/assets/images/emoji/thermometer.png b/app/assets/images/emoji/thermometer.png
new file mode 100644
index 00000000000..b1147392426
--- /dev/null
+++ b/app/assets/images/emoji/thermometer.png
diff --git a/app/assets/images/emoji/thermometer_face.png b/app/assets/images/emoji/thermometer_face.png
new file mode 100644
index 00000000000..8fc57387563
--- /dev/null
+++ b/app/assets/images/emoji/thermometer_face.png
diff --git a/app/assets/images/emoji/thinking.png b/app/assets/images/emoji/thinking.png
new file mode 100644
index 00000000000..c18f6fd14ad
--- /dev/null
+++ b/app/assets/images/emoji/thinking.png
diff --git a/app/assets/images/emoji/third_place.png b/app/assets/images/emoji/third_place.png
new file mode 100644
index 00000000000..636e04a5950
--- /dev/null
+++ b/app/assets/images/emoji/third_place.png
diff --git a/app/assets/images/emoji/thought_balloon.png b/app/assets/images/emoji/thought_balloon.png
new file mode 100644
index 00000000000..72fe8fa7022
--- /dev/null
+++ b/app/assets/images/emoji/thought_balloon.png
diff --git a/app/assets/images/emoji/three.png b/app/assets/images/emoji/three.png
new file mode 100644
index 00000000000..dbaa6183e72
--- /dev/null
+++ b/app/assets/images/emoji/three.png
diff --git a/app/assets/images/emoji/thumbsdown.png b/app/assets/images/emoji/thumbsdown.png
new file mode 100644
index 00000000000..b63da2f20a8
--- /dev/null
+++ b/app/assets/images/emoji/thumbsdown.png
diff --git a/app/assets/images/emoji/thumbsdown_tone1.png b/app/assets/images/emoji/thumbsdown_tone1.png
new file mode 100644
index 00000000000..a1631af8e92
--- /dev/null
+++ b/app/assets/images/emoji/thumbsdown_tone1.png
diff --git a/app/assets/images/emoji/thumbsdown_tone2.png b/app/assets/images/emoji/thumbsdown_tone2.png
new file mode 100644
index 00000000000..85fff82d595
--- /dev/null
+++ b/app/assets/images/emoji/thumbsdown_tone2.png
diff --git a/app/assets/images/emoji/thumbsdown_tone3.png b/app/assets/images/emoji/thumbsdown_tone3.png
new file mode 100644
index 00000000000..eeba3be80fd
--- /dev/null
+++ b/app/assets/images/emoji/thumbsdown_tone3.png
diff --git a/app/assets/images/emoji/thumbsdown_tone4.png b/app/assets/images/emoji/thumbsdown_tone4.png
new file mode 100644
index 00000000000..1addafdaed0
--- /dev/null
+++ b/app/assets/images/emoji/thumbsdown_tone4.png
diff --git a/app/assets/images/emoji/thumbsdown_tone5.png b/app/assets/images/emoji/thumbsdown_tone5.png
new file mode 100644
index 00000000000..37ec07b5721
--- /dev/null
+++ b/app/assets/images/emoji/thumbsdown_tone5.png
diff --git a/app/assets/images/emoji/thumbsup.png b/app/assets/images/emoji/thumbsup.png
new file mode 100644
index 00000000000..f9e6f13a34f
--- /dev/null
+++ b/app/assets/images/emoji/thumbsup.png
diff --git a/app/assets/images/emoji/thumbsup_tone1.png b/app/assets/images/emoji/thumbsup_tone1.png
new file mode 100644
index 00000000000..39684cd5cc7
--- /dev/null
+++ b/app/assets/images/emoji/thumbsup_tone1.png
diff --git a/app/assets/images/emoji/thumbsup_tone2.png b/app/assets/images/emoji/thumbsup_tone2.png
new file mode 100644
index 00000000000..a9b59723573
--- /dev/null
+++ b/app/assets/images/emoji/thumbsup_tone2.png
diff --git a/app/assets/images/emoji/thumbsup_tone3.png b/app/assets/images/emoji/thumbsup_tone3.png
new file mode 100644
index 00000000000..c5e29167015
--- /dev/null
+++ b/app/assets/images/emoji/thumbsup_tone3.png
diff --git a/app/assets/images/emoji/thumbsup_tone4.png b/app/assets/images/emoji/thumbsup_tone4.png
new file mode 100644
index 00000000000..5bf4857a884
--- /dev/null
+++ b/app/assets/images/emoji/thumbsup_tone4.png
diff --git a/app/assets/images/emoji/thumbsup_tone5.png b/app/assets/images/emoji/thumbsup_tone5.png
new file mode 100644
index 00000000000..d829f787c61
--- /dev/null
+++ b/app/assets/images/emoji/thumbsup_tone5.png
diff --git a/app/assets/images/emoji/thunder_cloud_rain.png b/app/assets/images/emoji/thunder_cloud_rain.png
new file mode 100644
index 00000000000..31a26a1b6ee
--- /dev/null
+++ b/app/assets/images/emoji/thunder_cloud_rain.png
diff --git a/app/assets/images/emoji/ticket.png b/app/assets/images/emoji/ticket.png
new file mode 100644
index 00000000000..605936bb6b3
--- /dev/null
+++ b/app/assets/images/emoji/ticket.png
diff --git a/app/assets/images/emoji/tickets.png b/app/assets/images/emoji/tickets.png
new file mode 100644
index 00000000000..e510f4a7a50
--- /dev/null
+++ b/app/assets/images/emoji/tickets.png
diff --git a/app/assets/images/emoji/tiger.png b/app/assets/images/emoji/tiger.png
new file mode 100644
index 00000000000..a4d3ef086d4
--- /dev/null
+++ b/app/assets/images/emoji/tiger.png
diff --git a/app/assets/images/emoji/tiger2.png b/app/assets/images/emoji/tiger2.png
new file mode 100644
index 00000000000..871a8b74d56
--- /dev/null
+++ b/app/assets/images/emoji/tiger2.png
diff --git a/app/assets/images/emoji/timer.png b/app/assets/images/emoji/timer.png
new file mode 100644
index 00000000000..8a3be574c24
--- /dev/null
+++ b/app/assets/images/emoji/timer.png
diff --git a/app/assets/images/emoji/tired_face.png b/app/assets/images/emoji/tired_face.png
new file mode 100644
index 00000000000..4e01eff5b23
--- /dev/null
+++ b/app/assets/images/emoji/tired_face.png
diff --git a/app/assets/images/emoji/tm.png b/app/assets/images/emoji/tm.png
new file mode 100644
index 00000000000..7a0c44a2c2b
--- /dev/null
+++ b/app/assets/images/emoji/tm.png
diff --git a/app/assets/images/emoji/toilet.png b/app/assets/images/emoji/toilet.png
new file mode 100644
index 00000000000..1392f761835
--- /dev/null
+++ b/app/assets/images/emoji/toilet.png
diff --git a/app/assets/images/emoji/tokyo_tower.png b/app/assets/images/emoji/tokyo_tower.png
new file mode 100644
index 00000000000..37df7fc65b1
--- /dev/null
+++ b/app/assets/images/emoji/tokyo_tower.png
diff --git a/app/assets/images/emoji/tomato.png b/app/assets/images/emoji/tomato.png
new file mode 100644
index 00000000000..497da8f6b22
--- /dev/null
+++ b/app/assets/images/emoji/tomato.png
diff --git a/app/assets/images/emoji/tone1.png b/app/assets/images/emoji/tone1.png
new file mode 100644
index 00000000000..c395f3d0d68
--- /dev/null
+++ b/app/assets/images/emoji/tone1.png
diff --git a/app/assets/images/emoji/tone2.png b/app/assets/images/emoji/tone2.png
new file mode 100644
index 00000000000..080847431c1
--- /dev/null
+++ b/app/assets/images/emoji/tone2.png
diff --git a/app/assets/images/emoji/tone3.png b/app/assets/images/emoji/tone3.png
new file mode 100644
index 00000000000..482dd403475
--- /dev/null
+++ b/app/assets/images/emoji/tone3.png
diff --git a/app/assets/images/emoji/tone4.png b/app/assets/images/emoji/tone4.png
new file mode 100644
index 00000000000..5cae8bb20b0
--- /dev/null
+++ b/app/assets/images/emoji/tone4.png
diff --git a/app/assets/images/emoji/tone5.png b/app/assets/images/emoji/tone5.png
new file mode 100644
index 00000000000..49d1a8c3a64
--- /dev/null
+++ b/app/assets/images/emoji/tone5.png
diff --git a/app/assets/images/emoji/tongue.png b/app/assets/images/emoji/tongue.png
new file mode 100644
index 00000000000..70ce9c1225f
--- /dev/null
+++ b/app/assets/images/emoji/tongue.png
diff --git a/app/assets/images/emoji/tools.png b/app/assets/images/emoji/tools.png
new file mode 100644
index 00000000000..3c6049273a9
--- /dev/null
+++ b/app/assets/images/emoji/tools.png
diff --git a/app/assets/images/emoji/top.png b/app/assets/images/emoji/top.png
new file mode 100644
index 00000000000..49dea8c08b5
--- /dev/null
+++ b/app/assets/images/emoji/top.png
diff --git a/app/assets/images/emoji/tophat.png b/app/assets/images/emoji/tophat.png
new file mode 100644
index 00000000000..131b657b109
--- /dev/null
+++ b/app/assets/images/emoji/tophat.png
diff --git a/app/assets/images/emoji/track_next.png b/app/assets/images/emoji/track_next.png
new file mode 100644
index 00000000000..f8880d33bab
--- /dev/null
+++ b/app/assets/images/emoji/track_next.png
diff --git a/app/assets/images/emoji/track_previous.png b/app/assets/images/emoji/track_previous.png
new file mode 100644
index 00000000000..1ffd0566cfc
--- /dev/null
+++ b/app/assets/images/emoji/track_previous.png
diff --git a/app/assets/images/emoji/trackball.png b/app/assets/images/emoji/trackball.png
new file mode 100644
index 00000000000..3bea84ad7ce
--- /dev/null
+++ b/app/assets/images/emoji/trackball.png
diff --git a/app/assets/images/emoji/tractor.png b/app/assets/images/emoji/tractor.png
new file mode 100644
index 00000000000..c1bf8cae44f
--- /dev/null
+++ b/app/assets/images/emoji/tractor.png
diff --git a/app/assets/images/emoji/traffic_light.png b/app/assets/images/emoji/traffic_light.png
new file mode 100644
index 00000000000..6b312285b00
--- /dev/null
+++ b/app/assets/images/emoji/traffic_light.png
diff --git a/app/assets/images/emoji/train.png b/app/assets/images/emoji/train.png
new file mode 100644
index 00000000000..3c80321f7e8
--- /dev/null
+++ b/app/assets/images/emoji/train.png
diff --git a/app/assets/images/emoji/train2.png b/app/assets/images/emoji/train2.png
new file mode 100644
index 00000000000..367c7bc5d39
--- /dev/null
+++ b/app/assets/images/emoji/train2.png
diff --git a/app/assets/images/emoji/tram.png b/app/assets/images/emoji/tram.png
new file mode 100644
index 00000000000..b6f0e69038f
--- /dev/null
+++ b/app/assets/images/emoji/tram.png
diff --git a/app/assets/images/emoji/triangular_flag_on_post.png b/app/assets/images/emoji/triangular_flag_on_post.png
new file mode 100644
index 00000000000..c12d8b06886
--- /dev/null
+++ b/app/assets/images/emoji/triangular_flag_on_post.png
diff --git a/app/assets/images/emoji/triangular_ruler.png b/app/assets/images/emoji/triangular_ruler.png
new file mode 100644
index 00000000000..77dee9ee843
--- /dev/null
+++ b/app/assets/images/emoji/triangular_ruler.png
diff --git a/app/assets/images/emoji/trident.png b/app/assets/images/emoji/trident.png
new file mode 100644
index 00000000000..777a1dad121
--- /dev/null
+++ b/app/assets/images/emoji/trident.png
diff --git a/app/assets/images/emoji/triumph.png b/app/assets/images/emoji/triumph.png
new file mode 100644
index 00000000000..0be7a501969
--- /dev/null
+++ b/app/assets/images/emoji/triumph.png
diff --git a/app/assets/images/emoji/trolleybus.png b/app/assets/images/emoji/trolleybus.png
new file mode 100644
index 00000000000..139a9931b52
--- /dev/null
+++ b/app/assets/images/emoji/trolleybus.png
diff --git a/app/assets/images/emoji/trophy.png b/app/assets/images/emoji/trophy.png
new file mode 100644
index 00000000000..ac2895c1896
--- /dev/null
+++ b/app/assets/images/emoji/trophy.png
diff --git a/app/assets/images/emoji/tropical_drink.png b/app/assets/images/emoji/tropical_drink.png
new file mode 100644
index 00000000000..cd714f81b36
--- /dev/null
+++ b/app/assets/images/emoji/tropical_drink.png
diff --git a/app/assets/images/emoji/tropical_fish.png b/app/assets/images/emoji/tropical_fish.png
new file mode 100644
index 00000000000..252105235a6
--- /dev/null
+++ b/app/assets/images/emoji/tropical_fish.png
diff --git a/app/assets/images/emoji/truck.png b/app/assets/images/emoji/truck.png
new file mode 100644
index 00000000000..130de047f8b
--- /dev/null
+++ b/app/assets/images/emoji/truck.png
diff --git a/app/assets/images/emoji/trumpet.png b/app/assets/images/emoji/trumpet.png
new file mode 100644
index 00000000000..864ccbcd04a
--- /dev/null
+++ b/app/assets/images/emoji/trumpet.png
diff --git a/app/assets/images/emoji/tulip.png b/app/assets/images/emoji/tulip.png
new file mode 100644
index 00000000000..f799d75c182
--- /dev/null
+++ b/app/assets/images/emoji/tulip.png
diff --git a/app/assets/images/emoji/tumbler_glass.png b/app/assets/images/emoji/tumbler_glass.png
new file mode 100644
index 00000000000..7bf09229879
--- /dev/null
+++ b/app/assets/images/emoji/tumbler_glass.png
diff --git a/app/assets/images/emoji/turkey.png b/app/assets/images/emoji/turkey.png
new file mode 100644
index 00000000000..344af94c9ec
--- /dev/null
+++ b/app/assets/images/emoji/turkey.png
diff --git a/app/assets/images/emoji/turtle.png b/app/assets/images/emoji/turtle.png
new file mode 100644
index 00000000000..c22f7519fe8
--- /dev/null
+++ b/app/assets/images/emoji/turtle.png
diff --git a/app/assets/images/emoji/tv.png b/app/assets/images/emoji/tv.png
new file mode 100644
index 00000000000..999f1fb5c6d
--- /dev/null
+++ b/app/assets/images/emoji/tv.png
diff --git a/app/assets/images/emoji/twisted_rightwards_arrows.png b/app/assets/images/emoji/twisted_rightwards_arrows.png
new file mode 100644
index 00000000000..5904badde65
--- /dev/null
+++ b/app/assets/images/emoji/twisted_rightwards_arrows.png
diff --git a/app/assets/images/emoji/two.png b/app/assets/images/emoji/two.png
new file mode 100644
index 00000000000..927339c9bff
--- /dev/null
+++ b/app/assets/images/emoji/two.png
diff --git a/app/assets/images/emoji/two_hearts.png b/app/assets/images/emoji/two_hearts.png
new file mode 100644
index 00000000000..4d8c3386042
--- /dev/null
+++ b/app/assets/images/emoji/two_hearts.png
diff --git a/app/assets/images/emoji/two_men_holding_hands.png b/app/assets/images/emoji/two_men_holding_hands.png
new file mode 100644
index 00000000000..a511fda822a
--- /dev/null
+++ b/app/assets/images/emoji/two_men_holding_hands.png
diff --git a/app/assets/images/emoji/two_women_holding_hands.png b/app/assets/images/emoji/two_women_holding_hands.png
new file mode 100644
index 00000000000..b077cd3e40f
--- /dev/null
+++ b/app/assets/images/emoji/two_women_holding_hands.png
diff --git a/app/assets/images/emoji/u5272.png b/app/assets/images/emoji/u5272.png
new file mode 100644
index 00000000000..c4f837fe684
--- /dev/null
+++ b/app/assets/images/emoji/u5272.png
diff --git a/app/assets/images/emoji/u5408.png b/app/assets/images/emoji/u5408.png
new file mode 100644
index 00000000000..8375ad9d9af
--- /dev/null
+++ b/app/assets/images/emoji/u5408.png
diff --git a/app/assets/images/emoji/u55b6.png b/app/assets/images/emoji/u55b6.png
new file mode 100644
index 00000000000..d21cb30eaf3
--- /dev/null
+++ b/app/assets/images/emoji/u55b6.png
diff --git a/app/assets/images/emoji/u6307.png b/app/assets/images/emoji/u6307.png
new file mode 100644
index 00000000000..078e23e4ff3
--- /dev/null
+++ b/app/assets/images/emoji/u6307.png
diff --git a/app/assets/images/emoji/u6708.png b/app/assets/images/emoji/u6708.png
new file mode 100644
index 00000000000..c41bd36a26a
--- /dev/null
+++ b/app/assets/images/emoji/u6708.png
diff --git a/app/assets/images/emoji/u6709.png b/app/assets/images/emoji/u6709.png
new file mode 100644
index 00000000000..a4510de41c0
--- /dev/null
+++ b/app/assets/images/emoji/u6709.png
diff --git a/app/assets/images/emoji/u6e80.png b/app/assets/images/emoji/u6e80.png
new file mode 100644
index 00000000000..f9dea8b8833
--- /dev/null
+++ b/app/assets/images/emoji/u6e80.png
diff --git a/app/assets/images/emoji/u7121.png b/app/assets/images/emoji/u7121.png
new file mode 100644
index 00000000000..d3a19b420de
--- /dev/null
+++ b/app/assets/images/emoji/u7121.png
diff --git a/app/assets/images/emoji/u7533.png b/app/assets/images/emoji/u7533.png
new file mode 100644
index 00000000000..6b7af0ee222
--- /dev/null
+++ b/app/assets/images/emoji/u7533.png
diff --git a/app/assets/images/emoji/u7981.png b/app/assets/images/emoji/u7981.png
new file mode 100644
index 00000000000..4c704e03433
--- /dev/null
+++ b/app/assets/images/emoji/u7981.png
diff --git a/app/assets/images/emoji/u7a7a.png b/app/assets/images/emoji/u7a7a.png
new file mode 100644
index 00000000000..47966c1ea93
--- /dev/null
+++ b/app/assets/images/emoji/u7a7a.png
diff --git a/app/assets/images/emoji/umbrella.png b/app/assets/images/emoji/umbrella.png
new file mode 100644
index 00000000000..5b35b7ff6a4
--- /dev/null
+++ b/app/assets/images/emoji/umbrella.png
diff --git a/app/assets/images/emoji/umbrella2.png b/app/assets/images/emoji/umbrella2.png
new file mode 100644
index 00000000000..97fe859e74f
--- /dev/null
+++ b/app/assets/images/emoji/umbrella2.png
diff --git a/app/assets/images/emoji/unamused.png b/app/assets/images/emoji/unamused.png
new file mode 100644
index 00000000000..25e3677f2eb
--- /dev/null
+++ b/app/assets/images/emoji/unamused.png
diff --git a/app/assets/images/emoji/underage.png b/app/assets/images/emoji/underage.png
new file mode 100644
index 00000000000..6dfe6da51e2
--- /dev/null
+++ b/app/assets/images/emoji/underage.png
diff --git a/app/assets/images/emoji/unicorn.png b/app/assets/images/emoji/unicorn.png
new file mode 100644
index 00000000000..05a97969f7e
--- /dev/null
+++ b/app/assets/images/emoji/unicorn.png
diff --git a/app/assets/images/emoji/unlock.png b/app/assets/images/emoji/unlock.png
new file mode 100644
index 00000000000..4a74a693911
--- /dev/null
+++ b/app/assets/images/emoji/unlock.png
diff --git a/app/assets/images/emoji/up.png b/app/assets/images/emoji/up.png
new file mode 100644
index 00000000000..0d42142ba04
--- /dev/null
+++ b/app/assets/images/emoji/up.png
diff --git a/app/assets/images/emoji/upside_down.png b/app/assets/images/emoji/upside_down.png
new file mode 100644
index 00000000000..128f31c9828
--- /dev/null
+++ b/app/assets/images/emoji/upside_down.png
diff --git a/app/assets/images/emoji/urn.png b/app/assets/images/emoji/urn.png
new file mode 100644
index 00000000000..6b5b3503438
--- /dev/null
+++ b/app/assets/images/emoji/urn.png
diff --git a/app/assets/images/emoji/v.png b/app/assets/images/emoji/v.png
new file mode 100644
index 00000000000..70c5516ffee
--- /dev/null
+++ b/app/assets/images/emoji/v.png
diff --git a/app/assets/images/emoji/v_tone1.png b/app/assets/images/emoji/v_tone1.png
new file mode 100644
index 00000000000..6ac54a745f4
--- /dev/null
+++ b/app/assets/images/emoji/v_tone1.png
diff --git a/app/assets/images/emoji/v_tone2.png b/app/assets/images/emoji/v_tone2.png
new file mode 100644
index 00000000000..6dd9669866d
--- /dev/null
+++ b/app/assets/images/emoji/v_tone2.png
diff --git a/app/assets/images/emoji/v_tone3.png b/app/assets/images/emoji/v_tone3.png
new file mode 100644
index 00000000000..a615e53f02f
--- /dev/null
+++ b/app/assets/images/emoji/v_tone3.png
diff --git a/app/assets/images/emoji/v_tone4.png b/app/assets/images/emoji/v_tone4.png
new file mode 100644
index 00000000000..33a34bd5a78
--- /dev/null
+++ b/app/assets/images/emoji/v_tone4.png
diff --git a/app/assets/images/emoji/v_tone5.png b/app/assets/images/emoji/v_tone5.png
new file mode 100644
index 00000000000..45ad14b6c9c
--- /dev/null
+++ b/app/assets/images/emoji/v_tone5.png
diff --git a/app/assets/images/emoji/vertical_traffic_light.png b/app/assets/images/emoji/vertical_traffic_light.png
new file mode 100644
index 00000000000..8085973eecf
--- /dev/null
+++ b/app/assets/images/emoji/vertical_traffic_light.png
diff --git a/app/assets/images/emoji/vhs.png b/app/assets/images/emoji/vhs.png
new file mode 100644
index 00000000000..b9eb78ecd92
--- /dev/null
+++ b/app/assets/images/emoji/vhs.png
diff --git a/app/assets/images/emoji/vibration_mode.png b/app/assets/images/emoji/vibration_mode.png
new file mode 100644
index 00000000000..cc46510e48e
--- /dev/null
+++ b/app/assets/images/emoji/vibration_mode.png
diff --git a/app/assets/images/emoji/video_camera.png b/app/assets/images/emoji/video_camera.png
new file mode 100644
index 00000000000..85b300d425c
--- /dev/null
+++ b/app/assets/images/emoji/video_camera.png
diff --git a/app/assets/images/emoji/video_game.png b/app/assets/images/emoji/video_game.png
new file mode 100644
index 00000000000..316a9106a55
--- /dev/null
+++ b/app/assets/images/emoji/video_game.png
diff --git a/app/assets/images/emoji/violin.png b/app/assets/images/emoji/violin.png
new file mode 100644
index 00000000000..e1e76cce242
--- /dev/null
+++ b/app/assets/images/emoji/violin.png
diff --git a/app/assets/images/emoji/virgo.png b/app/assets/images/emoji/virgo.png
new file mode 100644
index 00000000000..a6b56c2cb5e
--- /dev/null
+++ b/app/assets/images/emoji/virgo.png
diff --git a/app/assets/images/emoji/volcano.png b/app/assets/images/emoji/volcano.png
new file mode 100644
index 00000000000..931d569294c
--- /dev/null
+++ b/app/assets/images/emoji/volcano.png
diff --git a/app/assets/images/emoji/volleyball.png b/app/assets/images/emoji/volleyball.png
new file mode 100644
index 00000000000..7a0e49d4b07
--- /dev/null
+++ b/app/assets/images/emoji/volleyball.png
diff --git a/app/assets/images/emoji/vs.png b/app/assets/images/emoji/vs.png
new file mode 100644
index 00000000000..e1180f4a464
--- /dev/null
+++ b/app/assets/images/emoji/vs.png
diff --git a/app/assets/images/emoji/vulcan.png b/app/assets/images/emoji/vulcan.png
new file mode 100644
index 00000000000..54728bcaf5c
--- /dev/null
+++ b/app/assets/images/emoji/vulcan.png
diff --git a/app/assets/images/emoji/vulcan_tone1.png b/app/assets/images/emoji/vulcan_tone1.png
new file mode 100644
index 00000000000..8aff5d8fa16
--- /dev/null
+++ b/app/assets/images/emoji/vulcan_tone1.png
diff --git a/app/assets/images/emoji/vulcan_tone2.png b/app/assets/images/emoji/vulcan_tone2.png
new file mode 100644
index 00000000000..82b7ad519b4
--- /dev/null
+++ b/app/assets/images/emoji/vulcan_tone2.png
diff --git a/app/assets/images/emoji/vulcan_tone3.png b/app/assets/images/emoji/vulcan_tone3.png
new file mode 100644
index 00000000000..d1400e1dd28
--- /dev/null
+++ b/app/assets/images/emoji/vulcan_tone3.png
diff --git a/app/assets/images/emoji/vulcan_tone4.png b/app/assets/images/emoji/vulcan_tone4.png
new file mode 100644
index 00000000000..47e2b280148
--- /dev/null
+++ b/app/assets/images/emoji/vulcan_tone4.png
diff --git a/app/assets/images/emoji/vulcan_tone5.png b/app/assets/images/emoji/vulcan_tone5.png
new file mode 100644
index 00000000000..60b5c6077be
--- /dev/null
+++ b/app/assets/images/emoji/vulcan_tone5.png
diff --git a/app/assets/images/emoji/walking.png b/app/assets/images/emoji/walking.png
new file mode 100644
index 00000000000..06dc169a3fd
--- /dev/null
+++ b/app/assets/images/emoji/walking.png
diff --git a/app/assets/images/emoji/walking_tone1.png b/app/assets/images/emoji/walking_tone1.png
new file mode 100644
index 00000000000..4e391b45a0b
--- /dev/null
+++ b/app/assets/images/emoji/walking_tone1.png
diff --git a/app/assets/images/emoji/walking_tone2.png b/app/assets/images/emoji/walking_tone2.png
new file mode 100644
index 00000000000..31f94a1bce1
--- /dev/null
+++ b/app/assets/images/emoji/walking_tone2.png
diff --git a/app/assets/images/emoji/walking_tone3.png b/app/assets/images/emoji/walking_tone3.png
new file mode 100644
index 00000000000..f7ed8e39c2e
--- /dev/null
+++ b/app/assets/images/emoji/walking_tone3.png
diff --git a/app/assets/images/emoji/walking_tone4.png b/app/assets/images/emoji/walking_tone4.png
new file mode 100644
index 00000000000..e58dc04c7b2
--- /dev/null
+++ b/app/assets/images/emoji/walking_tone4.png
diff --git a/app/assets/images/emoji/walking_tone5.png b/app/assets/images/emoji/walking_tone5.png
new file mode 100644
index 00000000000..ba4e1b58fcb
--- /dev/null
+++ b/app/assets/images/emoji/walking_tone5.png
diff --git a/app/assets/images/emoji/waning_crescent_moon.png b/app/assets/images/emoji/waning_crescent_moon.png
new file mode 100644
index 00000000000..cf68706b871
--- /dev/null
+++ b/app/assets/images/emoji/waning_crescent_moon.png
diff --git a/app/assets/images/emoji/waning_gibbous_moon.png b/app/assets/images/emoji/waning_gibbous_moon.png
new file mode 100644
index 00000000000..24e16266119
--- /dev/null
+++ b/app/assets/images/emoji/waning_gibbous_moon.png
diff --git a/app/assets/images/emoji/warning.png b/app/assets/images/emoji/warning.png
new file mode 100644
index 00000000000..35691c2ed97
--- /dev/null
+++ b/app/assets/images/emoji/warning.png
diff --git a/app/assets/images/emoji/wastebasket.png b/app/assets/images/emoji/wastebasket.png
new file mode 100644
index 00000000000..2b3c484b498
--- /dev/null
+++ b/app/assets/images/emoji/wastebasket.png
diff --git a/app/assets/images/emoji/watch.png b/app/assets/images/emoji/watch.png
new file mode 100644
index 00000000000..64819bc6e21
--- /dev/null
+++ b/app/assets/images/emoji/watch.png
diff --git a/app/assets/images/emoji/water_buffalo.png b/app/assets/images/emoji/water_buffalo.png
new file mode 100644
index 00000000000..80446615caf
--- /dev/null
+++ b/app/assets/images/emoji/water_buffalo.png
diff --git a/app/assets/images/emoji/water_polo.png b/app/assets/images/emoji/water_polo.png
new file mode 100644
index 00000000000..cb44576780d
--- /dev/null
+++ b/app/assets/images/emoji/water_polo.png
diff --git a/app/assets/images/emoji/water_polo_tone1.png b/app/assets/images/emoji/water_polo_tone1.png
new file mode 100644
index 00000000000..bed1a908d6a
--- /dev/null
+++ b/app/assets/images/emoji/water_polo_tone1.png
diff --git a/app/assets/images/emoji/water_polo_tone2.png b/app/assets/images/emoji/water_polo_tone2.png
new file mode 100644
index 00000000000..ec5a43b4d4a
--- /dev/null
+++ b/app/assets/images/emoji/water_polo_tone2.png
diff --git a/app/assets/images/emoji/water_polo_tone3.png b/app/assets/images/emoji/water_polo_tone3.png
new file mode 100644
index 00000000000..b081a4a5a96
--- /dev/null
+++ b/app/assets/images/emoji/water_polo_tone3.png
diff --git a/app/assets/images/emoji/water_polo_tone4.png b/app/assets/images/emoji/water_polo_tone4.png
new file mode 100644
index 00000000000..82cfbc3b0c7
--- /dev/null
+++ b/app/assets/images/emoji/water_polo_tone4.png
diff --git a/app/assets/images/emoji/water_polo_tone5.png b/app/assets/images/emoji/water_polo_tone5.png
new file mode 100644
index 00000000000..bd3366eb06c
--- /dev/null
+++ b/app/assets/images/emoji/water_polo_tone5.png
diff --git a/app/assets/images/emoji/watermelon.png b/app/assets/images/emoji/watermelon.png
new file mode 100644
index 00000000000..0761488b4c9
--- /dev/null
+++ b/app/assets/images/emoji/watermelon.png
diff --git a/app/assets/images/emoji/wave.png b/app/assets/images/emoji/wave.png
new file mode 100644
index 00000000000..e0cd79b45f5
--- /dev/null
+++ b/app/assets/images/emoji/wave.png
diff --git a/app/assets/images/emoji/wave_tone1.png b/app/assets/images/emoji/wave_tone1.png
new file mode 100644
index 00000000000..6b2b34b106e
--- /dev/null
+++ b/app/assets/images/emoji/wave_tone1.png
diff --git a/app/assets/images/emoji/wave_tone2.png b/app/assets/images/emoji/wave_tone2.png
new file mode 100644
index 00000000000..b857119732e
--- /dev/null
+++ b/app/assets/images/emoji/wave_tone2.png
diff --git a/app/assets/images/emoji/wave_tone3.png b/app/assets/images/emoji/wave_tone3.png
new file mode 100644
index 00000000000..6283b670f43
--- /dev/null
+++ b/app/assets/images/emoji/wave_tone3.png
diff --git a/app/assets/images/emoji/wave_tone4.png b/app/assets/images/emoji/wave_tone4.png
new file mode 100644
index 00000000000..fe6b2baa747
--- /dev/null
+++ b/app/assets/images/emoji/wave_tone4.png
diff --git a/app/assets/images/emoji/wave_tone5.png b/app/assets/images/emoji/wave_tone5.png
new file mode 100644
index 00000000000..4bd168ebb78
--- /dev/null
+++ b/app/assets/images/emoji/wave_tone5.png
diff --git a/app/assets/images/emoji/wavy_dash.png b/app/assets/images/emoji/wavy_dash.png
new file mode 100644
index 00000000000..001c8d6e47d
--- /dev/null
+++ b/app/assets/images/emoji/wavy_dash.png
diff --git a/app/assets/images/emoji/waxing_crescent_moon.png b/app/assets/images/emoji/waxing_crescent_moon.png
new file mode 100644
index 00000000000..687125173d9
--- /dev/null
+++ b/app/assets/images/emoji/waxing_crescent_moon.png
diff --git a/app/assets/images/emoji/waxing_gibbous_moon.png b/app/assets/images/emoji/waxing_gibbous_moon.png
new file mode 100644
index 00000000000..3a808156318
--- /dev/null
+++ b/app/assets/images/emoji/waxing_gibbous_moon.png
diff --git a/app/assets/images/emoji/wc.png b/app/assets/images/emoji/wc.png
new file mode 100644
index 00000000000..aa433e84ba6
--- /dev/null
+++ b/app/assets/images/emoji/wc.png
diff --git a/app/assets/images/emoji/weary.png b/app/assets/images/emoji/weary.png
new file mode 100644
index 00000000000..98bfbd24a16
--- /dev/null
+++ b/app/assets/images/emoji/weary.png
diff --git a/app/assets/images/emoji/wedding.png b/app/assets/images/emoji/wedding.png
new file mode 100644
index 00000000000..d0d8aa0bfae
--- /dev/null
+++ b/app/assets/images/emoji/wedding.png
diff --git a/app/assets/images/emoji/whale.png b/app/assets/images/emoji/whale.png
new file mode 100644
index 00000000000..9f19b44257c
--- /dev/null
+++ b/app/assets/images/emoji/whale.png
diff --git a/app/assets/images/emoji/whale2.png b/app/assets/images/emoji/whale2.png
new file mode 100644
index 00000000000..0df9d3c73a4
--- /dev/null
+++ b/app/assets/images/emoji/whale2.png
diff --git a/app/assets/images/emoji/wheel_of_dharma.png b/app/assets/images/emoji/wheel_of_dharma.png
new file mode 100644
index 00000000000..3666db0016b
--- /dev/null
+++ b/app/assets/images/emoji/wheel_of_dharma.png
diff --git a/app/assets/images/emoji/wheelchair.png b/app/assets/images/emoji/wheelchair.png
new file mode 100644
index 00000000000..4e5b2698eac
--- /dev/null
+++ b/app/assets/images/emoji/wheelchair.png
diff --git a/app/assets/images/emoji/white_check_mark.png b/app/assets/images/emoji/white_check_mark.png
new file mode 100644
index 00000000000..e55f087e544
--- /dev/null
+++ b/app/assets/images/emoji/white_check_mark.png
diff --git a/app/assets/images/emoji/white_circle.png b/app/assets/images/emoji/white_circle.png
new file mode 100644
index 00000000000..c19e15684dd
--- /dev/null
+++ b/app/assets/images/emoji/white_circle.png
diff --git a/app/assets/images/emoji/white_flower.png b/app/assets/images/emoji/white_flower.png
new file mode 100644
index 00000000000..d6af8b60077
--- /dev/null
+++ b/app/assets/images/emoji/white_flower.png
diff --git a/app/assets/images/emoji/white_large_square.png b/app/assets/images/emoji/white_large_square.png
new file mode 100644
index 00000000000..6f06c1c79de
--- /dev/null
+++ b/app/assets/images/emoji/white_large_square.png
diff --git a/app/assets/images/emoji/white_medium_small_square.png b/app/assets/images/emoji/white_medium_small_square.png
new file mode 100644
index 00000000000..ae874126750
--- /dev/null
+++ b/app/assets/images/emoji/white_medium_small_square.png
diff --git a/app/assets/images/emoji/white_medium_square.png b/app/assets/images/emoji/white_medium_square.png
new file mode 100644
index 00000000000..8daacf57059
--- /dev/null
+++ b/app/assets/images/emoji/white_medium_square.png
diff --git a/app/assets/images/emoji/white_small_square.png b/app/assets/images/emoji/white_small_square.png
new file mode 100644
index 00000000000..d7ebdb0c0ed
--- /dev/null
+++ b/app/assets/images/emoji/white_small_square.png
diff --git a/app/assets/images/emoji/white_square_button.png b/app/assets/images/emoji/white_square_button.png
new file mode 100644
index 00000000000..934b1cedfd2
--- /dev/null
+++ b/app/assets/images/emoji/white_square_button.png
diff --git a/app/assets/images/emoji/white_sun_cloud.png b/app/assets/images/emoji/white_sun_cloud.png
new file mode 100644
index 00000000000..0a4cc100269
--- /dev/null
+++ b/app/assets/images/emoji/white_sun_cloud.png
diff --git a/app/assets/images/emoji/white_sun_rain_cloud.png b/app/assets/images/emoji/white_sun_rain_cloud.png
new file mode 100644
index 00000000000..491f9ca4839
--- /dev/null
+++ b/app/assets/images/emoji/white_sun_rain_cloud.png
diff --git a/app/assets/images/emoji/white_sun_small_cloud.png b/app/assets/images/emoji/white_sun_small_cloud.png
new file mode 100644
index 00000000000..cead0bfa521
--- /dev/null
+++ b/app/assets/images/emoji/white_sun_small_cloud.png
diff --git a/app/assets/images/emoji/wilted_rose.png b/app/assets/images/emoji/wilted_rose.png
new file mode 100644
index 00000000000..62412b143ae
--- /dev/null
+++ b/app/assets/images/emoji/wilted_rose.png
diff --git a/app/assets/images/emoji/wind_blowing_face.png b/app/assets/images/emoji/wind_blowing_face.png
new file mode 100644
index 00000000000..df81b652eb6
--- /dev/null
+++ b/app/assets/images/emoji/wind_blowing_face.png
diff --git a/app/assets/images/emoji/wind_chime.png b/app/assets/images/emoji/wind_chime.png
new file mode 100644
index 00000000000..3c9ef3a95f6
--- /dev/null
+++ b/app/assets/images/emoji/wind_chime.png
diff --git a/app/assets/images/emoji/wine_glass.png b/app/assets/images/emoji/wine_glass.png
new file mode 100644
index 00000000000..3cc98689192
--- /dev/null
+++ b/app/assets/images/emoji/wine_glass.png
diff --git a/app/assets/images/emoji/wink.png b/app/assets/images/emoji/wink.png
new file mode 100644
index 00000000000..7ea7810a37d
--- /dev/null
+++ b/app/assets/images/emoji/wink.png
diff --git a/app/assets/images/emoji/wolf.png b/app/assets/images/emoji/wolf.png
new file mode 100644
index 00000000000..ba7220f2de9
--- /dev/null
+++ b/app/assets/images/emoji/wolf.png
diff --git a/app/assets/images/emoji/woman.png b/app/assets/images/emoji/woman.png
new file mode 100644
index 00000000000..ece440e7a61
--- /dev/null
+++ b/app/assets/images/emoji/woman.png
diff --git a/app/assets/images/emoji/woman_tone1.png b/app/assets/images/emoji/woman_tone1.png
new file mode 100644
index 00000000000..ff089b8889b
--- /dev/null
+++ b/app/assets/images/emoji/woman_tone1.png
diff --git a/app/assets/images/emoji/woman_tone2.png b/app/assets/images/emoji/woman_tone2.png
new file mode 100644
index 00000000000..0719c378016
--- /dev/null
+++ b/app/assets/images/emoji/woman_tone2.png
diff --git a/app/assets/images/emoji/woman_tone3.png b/app/assets/images/emoji/woman_tone3.png
new file mode 100644
index 00000000000..5672e2fd52d
--- /dev/null
+++ b/app/assets/images/emoji/woman_tone3.png
diff --git a/app/assets/images/emoji/woman_tone4.png b/app/assets/images/emoji/woman_tone4.png
new file mode 100644
index 00000000000..5754aab558b
--- /dev/null
+++ b/app/assets/images/emoji/woman_tone4.png
diff --git a/app/assets/images/emoji/woman_tone5.png b/app/assets/images/emoji/woman_tone5.png
new file mode 100644
index 00000000000..fc252af3a39
--- /dev/null
+++ b/app/assets/images/emoji/woman_tone5.png
diff --git a/app/assets/images/emoji/womans_clothes.png b/app/assets/images/emoji/womans_clothes.png
new file mode 100644
index 00000000000..01410dc8107
--- /dev/null
+++ b/app/assets/images/emoji/womans_clothes.png
diff --git a/app/assets/images/emoji/womans_hat.png b/app/assets/images/emoji/womans_hat.png
new file mode 100644
index 00000000000..b837b6a2e47
--- /dev/null
+++ b/app/assets/images/emoji/womans_hat.png
diff --git a/app/assets/images/emoji/womens.png b/app/assets/images/emoji/womens.png
new file mode 100644
index 00000000000..d4ecc22e7b3
--- /dev/null
+++ b/app/assets/images/emoji/womens.png
diff --git a/app/assets/images/emoji/worried.png b/app/assets/images/emoji/worried.png
new file mode 100644
index 00000000000..7074afcf5b7
--- /dev/null
+++ b/app/assets/images/emoji/worried.png
diff --git a/app/assets/images/emoji/wrench.png b/app/assets/images/emoji/wrench.png
new file mode 100644
index 00000000000..c16b7439697
--- /dev/null
+++ b/app/assets/images/emoji/wrench.png
diff --git a/app/assets/images/emoji/wrestlers.png b/app/assets/images/emoji/wrestlers.png
new file mode 100644
index 00000000000..71e67cfad85
--- /dev/null
+++ b/app/assets/images/emoji/wrestlers.png
diff --git a/app/assets/images/emoji/wrestlers_tone1.png b/app/assets/images/emoji/wrestlers_tone1.png
new file mode 100644
index 00000000000..379070fd03b
--- /dev/null
+++ b/app/assets/images/emoji/wrestlers_tone1.png
diff --git a/app/assets/images/emoji/wrestlers_tone2.png b/app/assets/images/emoji/wrestlers_tone2.png
new file mode 100644
index 00000000000..6863ea9209d
--- /dev/null
+++ b/app/assets/images/emoji/wrestlers_tone2.png
diff --git a/app/assets/images/emoji/wrestlers_tone3.png b/app/assets/images/emoji/wrestlers_tone3.png
new file mode 100644
index 00000000000..b7e62910127
--- /dev/null
+++ b/app/assets/images/emoji/wrestlers_tone3.png
diff --git a/app/assets/images/emoji/wrestlers_tone4.png b/app/assets/images/emoji/wrestlers_tone4.png
new file mode 100644
index 00000000000..750f9589233
--- /dev/null
+++ b/app/assets/images/emoji/wrestlers_tone4.png
diff --git a/app/assets/images/emoji/wrestlers_tone5.png b/app/assets/images/emoji/wrestlers_tone5.png
new file mode 100644
index 00000000000..36ab9bb3f42
--- /dev/null
+++ b/app/assets/images/emoji/wrestlers_tone5.png
diff --git a/app/assets/images/emoji/writing_hand.png b/app/assets/images/emoji/writing_hand.png
new file mode 100644
index 00000000000..85639f8ac40
--- /dev/null
+++ b/app/assets/images/emoji/writing_hand.png
diff --git a/app/assets/images/emoji/writing_hand_tone1.png b/app/assets/images/emoji/writing_hand_tone1.png
new file mode 100644
index 00000000000..7923d8ebb17
--- /dev/null
+++ b/app/assets/images/emoji/writing_hand_tone1.png
diff --git a/app/assets/images/emoji/writing_hand_tone2.png b/app/assets/images/emoji/writing_hand_tone2.png
new file mode 100644
index 00000000000..bcb304e15d2
--- /dev/null
+++ b/app/assets/images/emoji/writing_hand_tone2.png
diff --git a/app/assets/images/emoji/writing_hand_tone3.png b/app/assets/images/emoji/writing_hand_tone3.png
new file mode 100644
index 00000000000..fd885fd2d90
--- /dev/null
+++ b/app/assets/images/emoji/writing_hand_tone3.png
diff --git a/app/assets/images/emoji/writing_hand_tone4.png b/app/assets/images/emoji/writing_hand_tone4.png
new file mode 100644
index 00000000000..d065b8c64ab
--- /dev/null
+++ b/app/assets/images/emoji/writing_hand_tone4.png
diff --git a/app/assets/images/emoji/writing_hand_tone5.png b/app/assets/images/emoji/writing_hand_tone5.png
new file mode 100644
index 00000000000..a44b3dd757c
--- /dev/null
+++ b/app/assets/images/emoji/writing_hand_tone5.png
diff --git a/app/assets/images/emoji/x.png b/app/assets/images/emoji/x.png
new file mode 100644
index 00000000000..9f9ed0f7ad2
--- /dev/null
+++ b/app/assets/images/emoji/x.png
diff --git a/app/assets/images/emoji/yellow_heart.png b/app/assets/images/emoji/yellow_heart.png
new file mode 100644
index 00000000000..7901a9d0103
--- /dev/null
+++ b/app/assets/images/emoji/yellow_heart.png
diff --git a/app/assets/images/emoji/yen.png b/app/assets/images/emoji/yen.png
new file mode 100644
index 00000000000..63ee4799d66
--- /dev/null
+++ b/app/assets/images/emoji/yen.png
diff --git a/app/assets/images/emoji/yin_yang.png b/app/assets/images/emoji/yin_yang.png
new file mode 100644
index 00000000000..f2900f6338f
--- /dev/null
+++ b/app/assets/images/emoji/yin_yang.png
diff --git a/app/assets/images/emoji/yum.png b/app/assets/images/emoji/yum.png
new file mode 100644
index 00000000000..2df15753ca1
--- /dev/null
+++ b/app/assets/images/emoji/yum.png
diff --git a/app/assets/images/emoji/zap.png b/app/assets/images/emoji/zap.png
new file mode 100644
index 00000000000..47e68e48e49
--- /dev/null
+++ b/app/assets/images/emoji/zap.png
diff --git a/app/assets/images/emoji/zero.png b/app/assets/images/emoji/zero.png
new file mode 100644
index 00000000000..13aca83e018
--- /dev/null
+++ b/app/assets/images/emoji/zero.png
diff --git a/app/assets/images/emoji/zipper_mouth.png b/app/assets/images/emoji/zipper_mouth.png
new file mode 100644
index 00000000000..f8ced2502a7
--- /dev/null
+++ b/app/assets/images/emoji/zipper_mouth.png
diff --git a/app/assets/images/emoji/zzz.png b/app/assets/images/emoji/zzz.png
new file mode 100644
index 00000000000..9bc72b4469f
--- /dev/null
+++ b/app/assets/images/emoji/zzz.png
diff --git a/app/assets/images/emoji@2x.png b/app/assets/images/emoji@2x.png
index dc9cae1d44c..b0fa9e1139e 100644
--- a/app/assets/images/emoji@2x.png
+++ b/app/assets/images/emoji@2x.png
diff --git a/app/assets/images/favicon-blue.ico b/app/assets/images/favicon-blue.ico
new file mode 100755
index 00000000000..156fcf07588
--- /dev/null
+++ b/app/assets/images/favicon-blue.ico
diff --git a/app/assets/images/icon-merge-request-unmerged.svg b/app/assets/images/icon-merge-request-unmerged.svg
new file mode 100644
index 00000000000..d53a7470243
--- /dev/null
+++ b/app/assets/images/icon-merge-request-unmerged.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m5 5.563v4.875c1.024.4 1.75 1.397 1.75 2.563 0 1.519-1.231 2.75-2.75 2.75-1.519 0-2.75-1.231-2.75-2.75 0-1.166.726-2.162 1.75-2.563v-4.875c-1.024-.4-1.75-1.397-1.75-2.563 0-1.519 1.231-2.75 2.75-2.75 1.519 0 2.75 1.231 2.75 2.75 0 1.166-.726 2.162-1.75 2.563m-1 8.687c.69 0 1.25-.56 1.25-1.25 0-.69-.56-1.25-1.25-1.25-.69 0-1.25.56-1.25 1.25 0 .69.56 1.25 1.25 1.25m0-10c.69 0 1.25-.56 1.25-1.25 0-.69-.56-1.25-1.25-1.25-.69 0-1.25.56-1.25 1.25 0 .69.56 1.25 1.25 1.25"/><path d="m10.501 2c1.381.001 2.499 1.125 2.499 2.506v5.931c1.024.4 1.75 1.397 1.75 2.563 0 1.519-1.231 2.75-2.75 2.75-1.519 0-2.75-1.231-2.75-2.75 0-1.166.726-2.162 1.75-2.563v-5.931c0-.279-.225-.506-.499-.506v.926c0 .346-.244.474-.569.271l-2.952-1.844c-.314-.196-.325-.507 0-.71l2.952-1.844c.314-.196.569-.081.569.271v.93m1.499 12.25c.69 0 1.25-.56 1.25-1.25 0-.69-.56-1.25-1.25-1.25-.69 0-1.25.56-1.25 1.25 0 .69.56 1.25 1.25 1.25"/></svg>
\ No newline at end of file
diff --git a/app/assets/images/mailers/gitlab_footer_logo.gif b/app/assets/images/mailers/gitlab_footer_logo.gif
new file mode 100644
index 00000000000..3f4ef31947b
--- /dev/null
+++ b/app/assets/images/mailers/gitlab_footer_logo.gif
diff --git a/app/assets/images/mailers/gitlab_header_logo.gif b/app/assets/images/mailers/gitlab_header_logo.gif
new file mode 100644
index 00000000000..387628f831c
--- /dev/null
+++ b/app/assets/images/mailers/gitlab_header_logo.gif
diff --git a/app/assets/javascripts/abuse_reports.js b/app/assets/javascripts/abuse_reports.js
new file mode 100644
index 00000000000..346de4ad11e
--- /dev/null
+++ b/app/assets/javascripts/abuse_reports.js
@@ -0,0 +1,37 @@
+const MAX_MESSAGE_LENGTH = 500;
+const MESSAGE_CELL_SELECTOR = '.abuse-reports .message';
+
+class AbuseReports {
+  constructor() {
+    $(MESSAGE_CELL_SELECTOR).each(this.truncateLongMessage);
+    $(document)
+      .off('click', MESSAGE_CELL_SELECTOR)
+      .on('click', MESSAGE_CELL_SELECTOR, this.toggleMessageTruncation);
+  }
+
+  truncateLongMessage() {
+    const $messageCellElement = $(this);
+    const reportMessage = $messageCellElement.text();
+    if (reportMessage.length > MAX_MESSAGE_LENGTH) {
+      $messageCellElement.data('original-message', reportMessage);
+      $messageCellElement.data('message-truncated', 'true');
+      $messageCellElement.text(window.gl.text.truncate(reportMessage, MAX_MESSAGE_LENGTH));
+    }
+  }
+
+  toggleMessageTruncation() {
+    const $messageCellElement = $(this);
+    const originalMessage = $messageCellElement.data('original-message');
+    if (!originalMessage) return;
+    if ($messageCellElement.data('message-truncated') === 'true') {
+      $messageCellElement.data('message-truncated', 'false');
+      $messageCellElement.text(originalMessage);
+    } else {
+      $messageCellElement.data('message-truncated', 'true');
+      $messageCellElement.text(`${originalMessage.substr(0, (MAX_MESSAGE_LENGTH - 3))}...`);
+    }
+  }
+}
+
+window.gl = window.gl || {};
+window.gl.AbuseReports = AbuseReports;
diff --git a/app/assets/javascripts/abuse_reports.js.es6 b/app/assets/javascripts/abuse_reports.js.es6
deleted file mode 100644
index 82e526ae0ef..00000000000
--- a/app/assets/javascripts/abuse_reports.js.es6
+++ /dev/null
@@ -1,39 +0,0 @@
-/* eslint-disable */
-((global) => {
-  const MAX_MESSAGE_LENGTH = 500;
-  const MESSAGE_CELL_SELECTOR = '.abuse-reports .message';
-
-  class AbuseReports {
-    constructor() {
-      $(MESSAGE_CELL_SELECTOR).each(this.truncateLongMessage);
-      $(document)
-        .off('click', MESSAGE_CELL_SELECTOR)
-        .on('click', MESSAGE_CELL_SELECTOR, this.toggleMessageTruncation);
-    }
-
-    truncateLongMessage() {
-      const $messageCellElement = $(this);
-      const reportMessage = $messageCellElement.text();
-      if (reportMessage.length > MAX_MESSAGE_LENGTH) {
-        $messageCellElement.data('original-message', reportMessage);
-        $messageCellElement.data('message-truncated', 'true');
-        $messageCellElement.text(global.text.truncate(reportMessage, MAX_MESSAGE_LENGTH));
-      }
-    }
-
-    toggleMessageTruncation() {
-      const $messageCellElement = $(this);
-      const originalMessage = $messageCellElement.data('original-message');
-      if (!originalMessage) return;
-      if ($messageCellElement.data('message-truncated') === 'true') {
-        $messageCellElement.data('message-truncated', 'false');
-        $messageCellElement.text(originalMessage);
-      } else {
-        $messageCellElement.data('message-truncated', 'true');
-        $messageCellElement.text(`${originalMessage.substr(0, (MAX_MESSAGE_LENGTH - 3))}...`);
-      }
-    }
-  }
-
-  global.AbuseReports = AbuseReports;
-})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/activities.js b/app/assets/javascripts/activities.js
index 59ac9b9cef5..d816df831eb 100644
--- a/app/assets/javascripts/activities.js
+++ b/app/assets/javascripts/activities.js
@@ -1,37 +1,37 @@
-/* eslint-disable */
-(function() {
-  this.Activities = (function() {
-    function Activities() {
-      Pager.init(20, true, false, this.updateTooltips);
-      $(".event-filter-link").on("click", (function(_this) {
-        return function(event) {
-          event.preventDefault();
-          _this.toggleFilter($(event.currentTarget));
-          return _this.reloadActivities();
-        };
-      })(this));
-    }
-
-    Activities.prototype.updateTooltips = function() {
-      return gl.utils.localTimeAgo($('.js-timeago', '.content_list'));
-    };
-
-    Activities.prototype.reloadActivities = function() {
-      $(".content_list").html('');
-      return Pager.init(20, true);
-    };
-
-    Activities.prototype.toggleFilter = function(sender) {
-      var filter = sender.attr("id").split("_")[0];
-
-      $('.event-filter .active').removeClass("active");
-      Cookies.set("event_filter", filter);
-
-      sender.closest('li').toggleClass("active");
-    };
-
-    return Activities;
-
-  })();
-
-}).call(this);
+/* eslint-disable no-param-reassign, class-methods-use-this */
+/* global Pager */
+
+import Cookies from 'js-cookie';
+
+class Activities {
+  constructor() {
+    Pager.init(20, true, false, this.updateTooltips);
+    $('.event-filter-link').on('click', (e) => {
+      e.preventDefault();
+      this.toggleFilter(e.currentTarget);
+      this.reloadActivities();
+    });
+  }
+
+  updateTooltips() {
+    gl.utils.localTimeAgo($('.js-timeago', '.content_list'));
+  }
+
+  reloadActivities() {
+    $('.content_list').html('');
+    Pager.init(20, true, false, this.updateTooltips);
+  }
+
+  toggleFilter(sender) {
+    const $sender = $(sender);
+    const filter = $sender.attr('id').split('_')[0];
+
+    $('.event-filter .active').removeClass('active');
+    Cookies.set('event_filter', filter);
+
+    $sender.closest('li').toggleClass('active');
+  }
+}
+
+window.gl = window.gl || {};
+window.gl.Activities = Activities;
diff --git a/app/assets/javascripts/admin.js b/app/assets/javascripts/admin.js
index 1ef340e4ca1..34669dd13d6 100644
--- a/app/assets/javascripts/admin.js
+++ b/app/assets/javascripts/admin.js
@@ -1,65 +1,62 @@
-/* eslint-disable */
-(function() {
-  this.Admin = (function() {
-    function Admin() {
-      var modal, showBlacklistType;
-      $('input#user_force_random_password').on('change', function(elem) {
-        var elems;
-        elems = $('#user_password, #user_password_confirmation');
-        if ($(this).attr('checked')) {
-          return elems.val('').attr('disabled', true);
-        } else {
-          return elems.removeAttr('disabled');
-        }
-      });
-      $('body').on('click', '.js-toggle-colors-link', function(e) {
-        e.preventDefault();
-        return $('.js-toggle-colors-container').toggle();
-      });
-      $('.log-tabs a').click(function(e) {
-        e.preventDefault();
-        return $(this).tab('show');
-      });
-      $('.log-bottom').click(function(e) {
-        var visible_log;
-        e.preventDefault();
-        visible_log = $(".file-content:visible");
-        return visible_log.animate({
-          scrollTop: visible_log.find('ol').height()
-        }, "fast");
-      });
-      modal = $('.change-owner-holder');
-      $('.change-owner-link').bind("click", function(e) {
-        e.preventDefault();
-        $(this).hide();
-        return modal.show();
-      });
-      $('.change-owner-cancel-link').bind("click", function(e) {
-        e.preventDefault();
-        modal.hide();
-        return $('.change-owner-link').show();
-      });
-      $('li.project_member').bind('ajax:success', function() {
-        return Turbolinks.visit(location.href);
-      });
-      $('li.group_member').bind('ajax:success', function() {
-        return Turbolinks.visit(location.href);
-      });
-      showBlacklistType = function() {
-        if ($("input[name='blacklist_type']:checked").val() === 'file') {
-          $('.blacklist-file').show();
-          return $('.blacklist-raw').hide();
-        } else {
-          $('.blacklist-file').hide();
-          return $('.blacklist-raw').show();
-        }
-      };
-      $("input[name='blacklist_type']").click(showBlacklistType);
-      showBlacklistType();
-    }
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, one-var, no-var, one-var-declaration-per-line, no-unused-vars, no-else-return, prefer-arrow-callback, camelcase, quotes, comma-dangle, max-len */
 
-    return Admin;
+window.Admin = (function() {
+  function Admin() {
+    var modal, showBlacklistType;
+    $('input#user_force_random_password').on('change', function(elem) {
+      var elems;
+      elems = $('#user_password, #user_password_confirmation');
+      if ($(this).attr('checked')) {
+        return elems.val('').attr('disabled', true);
+      } else {
+        return elems.removeAttr('disabled');
+      }
+    });
+    $('body').on('click', '.js-toggle-colors-link', function(e) {
+      e.preventDefault();
+      return $('.js-toggle-colors-container').toggle();
+    });
+    $('.log-tabs a').click(function(e) {
+      e.preventDefault();
+      return $(this).tab('show');
+    });
+    $('.log-bottom').click(function(e) {
+      var visible_log;
+      e.preventDefault();
+      visible_log = $(".file-content:visible");
+      return visible_log.animate({
+        scrollTop: visible_log.find('ol').height()
+      }, "fast");
+    });
+    modal = $('.change-owner-holder');
+    $('.change-owner-link').bind("click", function(e) {
+      e.preventDefault();
+      $(this).hide();
+      return modal.show();
+    });
+    $('.change-owner-cancel-link').bind("click", function(e) {
+      e.preventDefault();
+      modal.hide();
+      return $('.change-owner-link').show();
+    });
+    $('li.project_member').bind('ajax:success', function() {
+      return gl.utils.refreshCurrentPage();
+    });
+    $('li.group_member').bind('ajax:success', function() {
+      return gl.utils.refreshCurrentPage();
+    });
+    showBlacklistType = function() {
+      if ($("input[name='blacklist_type']:checked").val() === 'file') {
+        $('.blacklist-file').show();
+        return $('.blacklist-raw').hide();
+      } else {
+        $('.blacklist-file').hide();
+        return $('.blacklist-raw').show();
+      }
+    };
+    $("input[name='blacklist_type']").click(showBlacklistType);
+    showBlacklistType();
+  }
 
-  })();
-
-}).call(this);
+  return Admin;
+})();
diff --git a/app/assets/javascripts/ajax_loading_spinner.js b/app/assets/javascripts/ajax_loading_spinner.js
new file mode 100644
index 00000000000..38a8317dbd7
--- /dev/null
+++ b/app/assets/javascripts/ajax_loading_spinner.js
@@ -0,0 +1,35 @@
+class AjaxLoadingSpinner {
+  static init() {
+    const $elements = $('.js-ajax-loading-spinner');
+
+    $elements.on('ajax:beforeSend', AjaxLoadingSpinner.ajaxBeforeSend);
+    $elements.on('ajax:complete', AjaxLoadingSpinner.ajaxComplete);
+  }
+
+  static ajaxBeforeSend(e) {
+    e.target.setAttribute('disabled', '');
+    const iconElement = e.target.querySelector('i');
+    // get first fa- icon
+    const originalIcon = iconElement.className.match(/(fa-)([^\s]+)/g).first();
+    iconElement.dataset.icon = originalIcon;
+    AjaxLoadingSpinner.toggleLoadingIcon(iconElement);
+    $(e.target).off('ajax:beforeSend', AjaxLoadingSpinner.ajaxBeforeSend);
+  }
+
+  static ajaxComplete(e) {
+    e.target.removeAttribute('disabled');
+    const iconElement = e.target.querySelector('i');
+    AjaxLoadingSpinner.toggleLoadingIcon(iconElement);
+    $(e.target).off('ajax:complete', AjaxLoadingSpinner.ajaxComplete);
+  }
+
+  static toggleLoadingIcon(iconElement) {
+    const classList = iconElement.classList;
+    classList.toggle(iconElement.dataset.icon);
+    classList.toggle('fa-spinner');
+    classList.toggle('fa-spin');
+  }
+}
+
+window.gl = window.gl || {};
+gl.AjaxLoadingSpinner = AjaxLoadingSpinner;
diff --git a/app/assets/javascripts/api.js b/app/assets/javascripts/api.js
index 1cab66e109e..e5f36c84987 100644
--- a/app/assets/javascripts/api.js
+++ b/app/assets/javascripts/api.js
@@ -1,143 +1,148 @@
-/* eslint-disable */
-(function() {
-  this.Api = {
-    groupsPath: "/api/:version/groups.json",
-    groupPath: "/api/:version/groups/:id.json",
-    namespacesPath: "/api/:version/namespaces.json",
-    groupProjectsPath: "/api/:version/groups/:id/projects.json",
-    projectsPath: "/api/:version/projects.json?simple=true",
-    labelsPath: "/:namespace_path/:project_path/labels",
-    licensePath: "/api/:version/templates/licenses/:key",
-    gitignorePath: "/api/:version/templates/gitignores/:key",
-    gitlabCiYmlPath: "/api/:version/templates/gitlab_ci_ymls/:key",
-    issuableTemplatePath: "/:namespace_path/:project_path/templates/:type/:key",
-    group: function(group_id, callback) {
-      var url = Api.buildUrl(Api.groupPath)
-        .replace(':id', group_id);
-      return $.ajax({
-        url: url,
-        dataType: "json"
-      }).done(function(group) {
-        return callback(group);
-      });
-    },
-    // Return groups list. Filtered by query
-    groups: function(query, options, callback) {
-      var url = Api.buildUrl(Api.groupsPath);
-      return $.ajax({
-        url: url,
-        data: $.extend({
-                search: query,
-                per_page: 20
-              }, options),
-        dataType: "json"
-      }).done(function(groups) {
-        return callback(groups);
-      });
-    },
-    // Return namespaces list. Filtered by query
-    namespaces: function(query, callback) {
-      var url = Api.buildUrl(Api.namespacesPath);
-      return $.ajax({
-        url: url,
-        data: {
-          search: query,
-          per_page: 20
-        },
-        dataType: "json"
-      }).done(function(namespaces) {
-        return callback(namespaces);
-      });
-    },
-    // Return projects list. Filtered by query
-    projects: function(query, order, callback) {
-      var url = Api.buildUrl(Api.projectsPath);
-      return $.ajax({
-        url: url,
-        data: {
-          search: query,
-          order_by: order,
-          per_page: 20
-        },
-        dataType: "json"
-      }).done(function(projects) {
-        return callback(projects);
-      });
-    },
-    newLabel: function(namespace_path, project_path, data, callback) {
-      var url = Api.buildUrl(Api.labelsPath)
-        .replace(':namespace_path', namespace_path)
-        .replace(':project_path', project_path);
-      return $.ajax({
-        url: url,
-        type: "POST",
-        data: {'label': data},
-        dataType: "json"
-      }).done(function(label) {
-        return callback(label);
-      }).error(function(message) {
-        return callback(message.responseJSON);
-      });
-    },
-    // Return group projects list. Filtered by query
-    groupProjects: function(group_id, query, callback) {
-      var url = Api.buildUrl(Api.groupProjectsPath)
-        .replace(':id', group_id);
-      return $.ajax({
-        url: url,
-        data: {
-          search: query,
-          per_page: 20
-        },
-        dataType: "json"
-      }).done(function(projects) {
-        return callback(projects);
-      });
-    },
-    // Return text for a specific license
-    licenseText: function(key, data, callback) {
-      var url = Api.buildUrl(Api.licensePath)
-        .replace(':key', key);
-      return $.ajax({
-        url: url,
-        data: data
-      }).done(function(license) {
-        return callback(license);
-      });
-    },
-    gitignoreText: function(key, callback) {
-      var url = Api.buildUrl(Api.gitignorePath)
-        .replace(':key', key);
-      return $.get(url, function(gitignore) {
-        return callback(gitignore);
-      });
-    },
-    gitlabCiYml: function(key, callback) {
-      var url = Api.buildUrl(Api.gitlabCiYmlPath)
-        .replace(':key', key);
-      return $.get(url, function(file) {
-        return callback(file);
-      });
-    },
-    issueTemplate: function(namespacePath, projectPath, key, type, callback) {
-      var url = Api.buildUrl(Api.issuableTemplatePath)
-        .replace(':key', key)
-        .replace(':type', type)
-        .replace(':project_path', projectPath)
-        .replace(':namespace_path', namespacePath);
-      $.ajax({
-        url: url,
-        dataType: 'json'
-      }).done(function(file) {
-        callback(null, file);
-      }).error(callback);
-    },
-    buildUrl: function(url) {
-      if (gon.relative_url_root != null) {
-        url = gon.relative_url_root + url;
-      }
-      return url.replace(':version', gon.api_version);
+/* eslint-disable func-names, space-before-function-paren, quotes, object-shorthand, camelcase, no-var, comma-dangle, prefer-arrow-callback, quote-props, no-param-reassign, max-len */
+
+var Api = {
+  groupsPath: "/api/:version/groups.json",
+  groupPath: "/api/:version/groups/:id.json",
+  namespacesPath: "/api/:version/namespaces.json",
+  groupProjectsPath: "/api/:version/groups/:id/projects.json",
+  projectsPath: "/api/:version/projects.json?simple=true",
+  labelsPath: "/:namespace_path/:project_path/labels",
+  licensePath: "/api/:version/templates/licenses/:key",
+  gitignorePath: "/api/:version/templates/gitignores/:key",
+  gitlabCiYmlPath: "/api/:version/templates/gitlab_ci_ymls/:key",
+  dockerfilePath: "/api/:version/templates/dockerfiles/:key",
+  issuableTemplatePath: "/:namespace_path/:project_path/templates/:type/:key",
+  group: function(group_id, callback) {
+    var url = Api.buildUrl(Api.groupPath)
+      .replace(':id', group_id);
+    return $.ajax({
+      url: url,
+      dataType: "json"
+    }).done(function(group) {
+      return callback(group);
+    });
+  },
+  // Return groups list. Filtered by query
+  groups: function(query, options, callback) {
+    var url = Api.buildUrl(Api.groupsPath);
+    return $.ajax({
+      url: url,
+      data: $.extend({
+        search: query,
+        per_page: 20
+      }, options),
+      dataType: "json"
+    }).done(function(groups) {
+      return callback(groups);
+    });
+  },
+  // Return namespaces list. Filtered by query
+  namespaces: function(query, callback) {
+    var url = Api.buildUrl(Api.namespacesPath);
+    return $.ajax({
+      url: url,
+      data: {
+        search: query,
+        per_page: 20
+      },
+      dataType: "json"
+    }).done(function(namespaces) {
+      return callback(namespaces);
+    });
+  },
+  // Return projects list. Filtered by query
+  projects: function(query, options, callback) {
+    var url = Api.buildUrl(Api.projectsPath);
+    return $.ajax({
+      url: url,
+      data: $.extend({
+        search: query,
+        per_page: 20,
+        membership: true
+      }, options),
+      dataType: "json"
+    }).done(function(projects) {
+      return callback(projects);
+    });
+  },
+  newLabel: function(namespace_path, project_path, data, callback) {
+    var url = Api.buildUrl(Api.labelsPath)
+      .replace(':namespace_path', namespace_path)
+      .replace(':project_path', project_path);
+    return $.ajax({
+      url: url,
+      type: "POST",
+      data: { 'label': data },
+      dataType: "json"
+    }).done(function(label) {
+      return callback(label);
+    }).error(function(message) {
+      return callback(message.responseJSON);
+    });
+  },
+  // Return group projects list. Filtered by query
+  groupProjects: function(group_id, query, callback) {
+    var url = Api.buildUrl(Api.groupProjectsPath)
+      .replace(':id', group_id);
+    return $.ajax({
+      url: url,
+      data: {
+        search: query,
+        per_page: 20
+      },
+      dataType: "json"
+    }).done(function(projects) {
+      return callback(projects);
+    });
+  },
+  // Return text for a specific license
+  licenseText: function(key, data, callback) {
+    var url = Api.buildUrl(Api.licensePath)
+      .replace(':key', key);
+    return $.ajax({
+      url: url,
+      data: data
+    }).done(function(license) {
+      return callback(license);
+    });
+  },
+  gitignoreText: function(key, callback) {
+    var url = Api.buildUrl(Api.gitignorePath)
+      .replace(':key', key);
+    return $.get(url, function(gitignore) {
+      return callback(gitignore);
+    });
+  },
+  gitlabCiYml: function(key, callback) {
+    var url = Api.buildUrl(Api.gitlabCiYmlPath)
+      .replace(':key', key);
+    return $.get(url, function(file) {
+      return callback(file);
+    });
+  },
+  dockerfileYml: function(key, callback) {
+    var url = Api.buildUrl(Api.dockerfilePath).replace(':key', key);
+    $.get(url, callback);
+  },
+  issueTemplate: function(namespacePath, projectPath, key, type, callback) {
+    var url = Api.buildUrl(Api.issuableTemplatePath)
+      .replace(':key', key)
+      .replace(':type', type)
+      .replace(':project_path', projectPath)
+      .replace(':namespace_path', namespacePath);
+    $.ajax({
+      url: url,
+      dataType: 'json'
+    }).done(function(file) {
+      callback(null, file);
+    }).error(callback);
+  },
+  buildUrl: function(url) {
+    if (gon.relative_url_root != null) {
+      url = gon.relative_url_root + url;
     }
-  };
+    return url.replace(':version', gon.api_version);
+  }
+};
 
-}).call(this);
+window.Api = Api;
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
deleted file mode 100644
index 7d942de0184..00000000000
--- a/app/assets/javascripts/application.js
+++ /dev/null
@@ -1,245 +0,0 @@
-/* eslint-disable */
-// This is a manifest file that'll be compiled into including all the files listed below.
-// Add new JavaScript code in separate files in this directory and they'll automatically
-// be included in the compiled file accessible from http://example.com/assets/application.js
-// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
-// the compiled file.
-//
-/*= require jquery2 */
-/*= require jquery-ui/autocomplete */
-/*= require jquery-ui/datepicker */
-/*= require jquery-ui/draggable */
-/*= require jquery-ui/effect-highlight */
-/*= require jquery-ui/sortable */
-/*= require jquery_ujs */
-/*= require jquery.endless-scroll */
-/*= require jquery.timeago */
-/*= require jquery.highlight */
-/*= require jquery.waitforimages */
-/*= require jquery.atwho */
-/*= require jquery.scrollTo */
-/*= require jquery.turbolinks */
-/*= require js.cookie */
-/*= require turbolinks */
-/*= require autosave */
-/*= require bootstrap/affix */
-/*= require bootstrap/alert */
-/*= require bootstrap/button */
-/*= require bootstrap/collapse */
-/*= require bootstrap/dropdown */
-/*= require bootstrap/modal */
-/*= require bootstrap/scrollspy */
-/*= require bootstrap/tab */
-/*= require bootstrap/transition */
-/*= require bootstrap/tooltip */
-/*= require bootstrap/popover */
-/*= require select2 */
-/*= require underscore */
-/*= require dropzone */
-/*= require mousetrap */
-/*= require mousetrap/pause */
-/*= require shortcuts */
-/*= require shortcuts_navigation */
-/*= require shortcuts_dashboard_navigation */
-/*= require shortcuts_issuable */
-/*= require shortcuts_network */
-/*= require jquery.nicescroll */
-/*= require date.format */
-/*= require_directory ./behaviors */
-/*= require_directory ./blob */
-/*= require_directory ./templates */
-/*= require_directory ./commit */
-/*= require_directory ./extensions */
-/*= require_directory ./lib/utils */
-/*= require_directory ./u2f */
-/*= require_directory . */
-/*= require fuzzaldrin-plus */
-
-(function () {
-  document.addEventListener('page:fetch', gl.utils.cleanupBeforeFetch);
-  window.addEventListener('hashchange', gl.utils.shiftWindow);
-
-  window.onload = function () {
-    // Scroll the window to avoid the topnav bar
-    // https://github.com/twitter/bootstrap/issues/1768
-    if (location.hash) {
-      return setTimeout(gl.utils.shiftWindow, 100);
-    }
-  };
-
-  $(function () {
-    var $body = $('body');
-    var $document = $(document);
-    var $window = $(window);
-    var $sidebarGutterToggle = $('.js-sidebar-toggle');
-    var $flash = $('.flash-container');
-    var bootstrapBreakpoint = bp.getBreakpointSize();
-    var checkInitialSidebarSize;
-    var fitSidebarForSize;
-
-    // Set the default path for all cookies to GitLab's root directory
-    Cookies.defaults.path = gon.relative_url_root || '/';
-
-    gl.utils.preventDisabledButtons();
-    $('.nav-sidebar').niceScroll({
-      cursoropacitymax: '0.4',
-      cursorcolor: '#FFF',
-      cursorborder: '1px solid #FFF'
-    });
-    $('.js-select-on-focus').on('focusin', function () {
-      return $(this).select().one('mouseup', function (e) {
-        return e.preventDefault();
-      });
-    // Click a .js-select-on-focus field, select the contents
-    // Prevent a mouseup event from deselecting the input
-    });
-    $('.remove-row').bind('ajax:success', function () {
-      $(this).tooltip('destroy')
-        .closest('li')
-        .fadeOut();
-    });
-    $('.js-remove-tr').bind('ajax:before', function () {
-      return $(this).hide();
-    });
-    $('.js-remove-tr').bind('ajax:success', function () {
-      return $(this).closest('tr').fadeOut();
-    });
-    $('select.select2').select2({
-      width: 'resolve',
-      // Initialize select2 selects
-      dropdownAutoWidth: true
-    });
-    $('.js-select2').bind('select2-close', function () {
-      return setTimeout((function () {
-        $('.select2-container-active').removeClass('select2-container-active');
-        return $(':focus').blur();
-      }), 1);
-    // Close select2 on escape
-    });
-    // Initialize tooltips
-    $.fn.tooltip.Constructor.DEFAULTS.trigger = 'hover';
-    $body.tooltip({
-      selector: '.has-tooltip, [data-toggle="tooltip"]',
-      placement: function (_, el) {
-        return $(el).data('placement') || 'bottom';
-      }
-    });
-    $('.trigger-submit').on('change', function () {
-      return $(this).parents('form').submit();
-    // Form submitter
-    });
-    gl.utils.localTimeAgo($('abbr.timeago, .js-timeago'), true);
-    // Flash
-    if ($flash.length > 0) {
-      $flash.click(function () {
-        return $(this).fadeOut();
-      });
-      $flash.show();
-    }
-    // Disable form buttons while a form is submitting
-    $body.on('ajax:complete, ajax:beforeSend, submit', 'form', function (e) {
-      var buttons;
-      buttons = $('[type="submit"]', this);
-      switch (e.type) {
-        case 'ajax:beforeSend':
-        case 'submit':
-          return buttons.disable();
-        default:
-          return buttons.enable();
-      }
-    });
-    $(document).ajaxError(function (e, xhrObj) {
-      var ref = xhrObj.status;
-      if (xhrObj.status === 401) {
-        return new Flash('You need to be logged in.', 'alert');
-      } else if (ref === 404 || ref === 500) {
-        return new Flash('Something went wrong on our end.', 'alert');
-      }
-    });
-    $('.account-box').hover(function () {
-      // Show/Hide the profile menu when hovering the account box
-      return $(this).toggleClass('hover');
-    });
-    $document.on('click', '.diff-content .js-show-suppressed-diff', function () {
-      var $container;
-      $container = $(this).parent();
-      $container.next('table').show();
-      return $container.remove();
-    // Commit show suppressed diff
-    });
-    $('.navbar-toggle').on('click', function () {
-      $('.header-content .title').toggle();
-      $('.header-content .header-logo').toggle();
-      $('.header-content .navbar-collapse').toggle();
-      return $('.navbar-toggle').toggleClass('active');
-    });
-    // Show/hide comments on diff
-    $body.on('click', '.js-toggle-diff-comments', function (e) {
-      var $this = $(this);
-      var notesHolders = $this.closest('.diff-file').find('.notes_holder');
-      $this.toggleClass('active');
-      if ($this.hasClass('active')) {
-        notesHolders.show().find('.hide').show();
-      } else {
-        notesHolders.hide();
-      }
-      $this.trigger('blur');
-      return e.preventDefault();
-    });
-    $document.off('click', '.js-confirm-danger');
-    $document.on('click', '.js-confirm-danger', function (e) {
-      var btn = $(e.target);
-      var form = btn.closest('form');
-      var text = btn.data('confirm-danger-message');
-      e.preventDefault();
-      return new ConfirmDangerModal(form, text);
-    });
-    $document.on('click', 'button', function () {
-      return $(this).blur();
-    });
-    $('input[type="search"]').each(function () {
-      var $this = $(this);
-      $this.attr('value', $this.val());
-    });
-    $document.off('keyup', 'input[type="search"]').on('keyup', 'input[type="search"]', function () {
-      var $this;
-      $this = $(this);
-      return $this.attr('value', $this.val());
-    });
-    $document.off('breakpoint:change').on('breakpoint:change', function (e, breakpoint) {
-      var $gutterIcon;
-      if (breakpoint === 'sm' || breakpoint === 'xs') {
-        $gutterIcon = $sidebarGutterToggle.find('i');
-        if ($gutterIcon.hasClass('fa-angle-double-right')) {
-          return $sidebarGutterToggle.trigger('click');
-        }
-      }
-    });
-    fitSidebarForSize = function () {
-      var oldBootstrapBreakpoint;
-      oldBootstrapBreakpoint = bootstrapBreakpoint;
-      bootstrapBreakpoint = bp.getBreakpointSize();
-      if (bootstrapBreakpoint !== oldBootstrapBreakpoint) {
-        return $document.trigger('breakpoint:change', [bootstrapBreakpoint]);
-      }
-    };
-    checkInitialSidebarSize = function () {
-      bootstrapBreakpoint = bp.getBreakpointSize();
-      if (bootstrapBreakpoint === 'xs' || 'sm') {
-        return $document.trigger('breakpoint:change', [bootstrapBreakpoint]);
-      }
-    };
-    $window.off('resize.app').on('resize.app', function () {
-      return fitSidebarForSize();
-    });
-    gl.awardsHandler = new AwardsHandler();
-    checkInitialSidebarSize();
-    new Aside();
-
-    // bind sidebar events
-    new gl.Sidebar();
-
-    // Custom time ago
-    gl.utils.shortTimeAgo($('.js-short-timeago'));
-  });
-}).call(this);
diff --git a/app/assets/javascripts/aside.js b/app/assets/javascripts/aside.js
index c7eff27f971..88756884d16 100644
--- a/app/assets/javascripts/aside.js
+++ b/app/assets/javascripts/aside.js
@@ -1,27 +1,24 @@
-/* eslint-disable */
-(function() {
-  this.Aside = (function() {
-    function Aside() {
-      $(document).off("click", "a.show-aside");
-      $(document).on("click", 'a.show-aside', function(e) {
-        var btn, icon;
-        e.preventDefault();
-        btn = $(e.currentTarget);
-        icon = btn.find('i');
-        if (icon.hasClass('fa-angle-left')) {
-          btn.parent().find('section').hide();
-          btn.parent().find('aside').fadeIn();
-          return icon.removeClass('fa-angle-left').addClass('fa-angle-right');
-        } else {
-          btn.parent().find('aside').hide();
-          btn.parent().find('section').fadeIn();
-          return icon.removeClass('fa-angle-right').addClass('fa-angle-left');
-        }
-      });
-    }
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, quotes, prefer-arrow-callback, no-var, one-var, one-var-declaration-per-line, no-else-return, max-len */
 
-    return Aside;
+window.Aside = (function() {
+  function Aside() {
+    $(document).off("click", "a.show-aside");
+    $(document).on("click", 'a.show-aside', function(e) {
+      var btn, icon;
+      e.preventDefault();
+      btn = $(e.currentTarget);
+      icon = btn.find('i');
+      if (icon.hasClass('fa-angle-left')) {
+        btn.parent().find('section').hide();
+        btn.parent().find('aside').fadeIn();
+        return icon.removeClass('fa-angle-left').addClass('fa-angle-right');
+      } else {
+        btn.parent().find('aside').hide();
+        btn.parent().find('section').fadeIn();
+        return icon.removeClass('fa-angle-right').addClass('fa-angle-left');
+      }
+    });
+  }
 
-  })();
-
-}).call(this);
+  return Aside;
+})();
diff --git a/app/assets/javascripts/autosave.js b/app/assets/javascripts/autosave.js
index ab09e4475e6..8630b18a73f 100644
--- a/app/assets/javascripts/autosave.js
+++ b/app/assets/javascripts/autosave.js
@@ -1,64 +1,61 @@
-/* eslint-disable */
-(function() {
-  this.Autosave = (function() {
-    function Autosave(field, key) {
-      this.field = field;
-      if (key.join != null) {
-        key = key.join("/");
-      }
-      this.key = "autosave/" + key;
-      this.field.data("autosave", this);
-      this.restore();
-      this.field.on("input", (function(_this) {
-        return function() {
-          return _this.save();
-        };
-      })(this));
-    }
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-param-reassign, quotes, prefer-template, no-var, one-var, no-unused-vars, one-var-declaration-per-line, no-void, consistent-return, no-empty, max-len */
 
-    Autosave.prototype.restore = function() {
-      var e, text;
-      if (window.localStorage == null) {
-        return;
-      }
-      try {
-        text = window.localStorage.getItem(this.key);
-      } catch (error) {
-        e = error;
-        return;
-      }
-      if ((text != null ? text.length : void 0) > 0) {
-        this.field.val(text);
-      }
-      return this.field.trigger("input");
-    };
+window.Autosave = (function() {
+  function Autosave(field, key) {
+    this.field = field;
+    if (key.join != null) {
+      key = key.join("/");
+    }
+    this.key = "autosave/" + key;
+    this.field.data("autosave", this);
+    this.restore();
+    this.field.on("input", (function(_this) {
+      return function() {
+        return _this.save();
+      };
+    })(this));
+  }
 
-    Autosave.prototype.save = function() {
-      var text;
-      if (window.localStorage == null) {
-        return;
-      }
-      text = this.field.val();
-      if ((text != null ? text.length : void 0) > 0) {
-        try {
-          return window.localStorage.setItem(this.key, text);
-        } catch (error) {}
-      } else {
-        return this.reset();
-      }
-    };
+  Autosave.prototype.restore = function() {
+    var e, text;
+    if (window.localStorage == null) {
+      return;
+    }
+    try {
+      text = window.localStorage.getItem(this.key);
+    } catch (error) {
+      e = error;
+      return;
+    }
+    if ((text != null ? text.length : void 0) > 0) {
+      this.field.val(text);
+    }
+    return this.field.trigger("input");
+  };
 
-    Autosave.prototype.reset = function() {
-      if (window.localStorage == null) {
-        return;
-      }
+  Autosave.prototype.save = function() {
+    var text;
+    if (window.localStorage == null) {
+      return;
+    }
+    text = this.field.val();
+    if ((text != null ? text.length : void 0) > 0) {
       try {
-        return window.localStorage.removeItem(this.key);
+        return window.localStorage.setItem(this.key, text);
       } catch (error) {}
-    };
-
-    return Autosave;
+    } else {
+      return this.reset();
+    }
+  };
 
-  })();
+  Autosave.prototype.reset = function() {
+    if (window.localStorage == null) {
+      return;
+    }
+    try {
+      return window.localStorage.removeItem(this.key);
+    } catch (error) {}
+  };
 
-}).call(this);
+  return Autosave;
+})();
diff --git a/app/assets/javascripts/awards_handler.js b/app/assets/javascripts/awards_handler.js
index d7cda977845..c743dd551d7 100644
--- a/app/assets/javascripts/awards_handler.js
+++ b/app/assets/javascripts/awards_handler.js
@@ -1,378 +1,518 @@
-/* eslint-disable */
-(function() {
-  this.AwardsHandler = (function() {
-    var FROM_SENTENCE_REGEX = /(?:, and | and |, )/; //For separating lists produced by ruby's Array#toSentence
-    function AwardsHandler() {
-      this.aliases = gl.emojiAliases();
-      $(document).off('click', '.js-add-award').on('click', '.js-add-award', (function(_this) {
-        return function(e) {
-          e.stopPropagation();
-          e.preventDefault();
-          return _this.showEmojiMenu($(e.currentTarget));
-        };
-      })(this));
-      $('html').on('click', function(e) {
-        var $target;
-        $target = $(e.target);
-        if (!$target.closest('.emoji-menu-content').length) {
-          $('.js-awards-block.current').removeClass('current');
-        }
-        if (!$target.closest('.emoji-menu').length) {
-          if ($('.emoji-menu').is(':visible')) {
-            $('.js-add-award.is-active').removeClass('is-active');
-            return $('.emoji-menu').removeClass('is-visible');
-          }
-        }
-      });
-      $(document).off('click', '.js-emoji-btn').on('click', '.js-emoji-btn', (function(_this) {
-        return function(e) {
-          var $target, emoji;
-          e.preventDefault();
-          $target = $(e.currentTarget);
-          emoji = $target.find('.icon').data('emoji');
-          $target.closest('.js-awards-block').addClass('current');
-          return _this.addAward(_this.getVotesBlock(), _this.getAwardUrl(), emoji);
-        };
-      })(this));
+import Cookies from 'js-cookie';
+
+import emojiMap from 'emojis/digests.json';
+import emojiAliases from 'emojis/aliases.json';
+import { glEmojiTag } from './behaviors/gl_emoji';
+import isEmojiNameValid from './behaviors/gl_emoji/is_emoji_name_valid';
+
+const animationEndEventString = 'animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd';
+const requestAnimationFrame = window.requestAnimationFrame ||
+  window.webkitRequestAnimationFrame ||
+  window.mozRequestAnimationFrame ||
+  window.setTimeout;
+
+const FROM_SENTENCE_REGEX = /(?:, and | and |, )/; // For separating lists produced by ruby's Array#toSentence
+
+let categoryMap = null;
+
+const categoryLabelMap = {
+  activity: 'Activity',
+  people: 'People',
+  nature: 'Nature',
+  food: 'Food',
+  travel: 'Travel',
+  objects: 'Objects',
+  symbols: 'Symbols',
+  flags: 'Flags',
+};
+
+function buildCategoryMap() {
+  return Object.keys(emojiMap).reduce((currentCategoryMap, emojiNameKey) => {
+    const emojiInfo = emojiMap[emojiNameKey];
+    if (currentCategoryMap[emojiInfo.category]) {
+      currentCategoryMap[emojiInfo.category].push(emojiNameKey);
     }
 
-    AwardsHandler.prototype.showEmojiMenu = function($addBtn) {
-      var $holder, $menu, url;
-      $menu = $('.emoji-menu');
-      if ($addBtn.hasClass('js-note-emoji')) {
-        $addBtn.closest('.note').find('.js-awards-block').addClass('current');
-      } else {
-        $addBtn.closest('.js-awards-block').addClass('current');
-      }
-      if ($menu.length) {
-        $holder = $addBtn.closest('.js-award-holder');
-        if ($menu.is('.is-visible')) {
-          $addBtn.removeClass('is-active');
-          $menu.removeClass('is-visible');
-          return $('#emoji_search').blur();
-        } else {
-          $addBtn.addClass('is-active');
-          this.positionMenu($menu, $addBtn);
-          $menu.addClass('is-visible');
-          return $('#emoji_search').focus();
-        }
-      } else {
-        $addBtn.addClass('is-loading is-active');
-        url = this.getAwardMenuUrl();
-        return this.createEmojiMenu(url, (function(_this) {
-          return function() {
-            $addBtn.removeClass('is-loading');
-            $menu = $('.emoji-menu');
-            _this.positionMenu($menu, $addBtn);
-            if (!_this.frequentEmojiBlockRendered) {
-              _this.renderFrequentlyUsedBlock();
-            }
-            return setTimeout(function() {
-              $menu.addClass('is-visible');
-              $('#emoji_search').focus();
-              return _this.setupSearch();
-            }, 200);
-          };
-        })(this));
-      }
-    };
-
-    AwardsHandler.prototype.createEmojiMenu = function(awardMenuUrl, callback) {
-      return $.get(awardMenuUrl, function(response) {
-        $('body').append(response);
-        return callback();
+    return currentCategoryMap;
+  }, {
+    activity: [],
+    people: [],
+    nature: [],
+    food: [],
+    travel: [],
+    objects: [],
+    symbols: [],
+    flags: [],
+  });
+}
+
+function renderCategory(name, emojiList, opts = {}) {
+  return `
+    <h5 class="emoji-menu-title">
+      ${name}
+    </h5>
+    <ul class="clearfix emoji-menu-list ${opts.menuListClass}">
+      ${emojiList.map(emojiName => `
+        <li class="emoji-menu-list-item">
+          <button class="emoji-menu-btn text-center js-emoji-btn" type="button">
+            ${glEmojiTag(emojiName, {
+              sprite: true,
+            })}
+          </button>
+        </li>
+      `).join('\n')}
+    </ul>
+  `;
+}
+
+function AwardsHandler() {
+  this.eventListeners = [];
+  this.aliases = emojiAliases;
+  // If the user shows intent let's pre-build the menu
+  this.registerEventListener('one', $(document), 'mouseenter focus', '.js-add-award', 'mouseenter focus', () => {
+    const $menu = $('.emoji-menu');
+    if ($menu.length === 0) {
+      requestAnimationFrame(() => {
+        this.createEmojiMenu();
       });
-    };
-
-    AwardsHandler.prototype.positionMenu = function($menu, $addBtn) {
-      var css, position;
-      position = $addBtn.data('position');
-      // The menu could potentially be off-screen or in a hidden overflow element
-      // So we position the element absolute in the body
-      css = {
-        top: ($addBtn.offset().top + $addBtn.outerHeight()) + "px"
-      };
-      if (position === 'right') {
-        css.left = (($addBtn.offset().left - $menu.outerWidth()) + 20) + "px";
-        $menu.addClass('is-aligned-right');
-      } else {
-        css.left = ($addBtn.offset().left) + "px";
-        $menu.removeClass('is-aligned-right');
-      }
-      return $menu.css(css);
-    };
-
-    AwardsHandler.prototype.addAward = function(votesBlock, awardUrl, emoji, checkMutuality, callback) {
-      if (checkMutuality == null) {
-        checkMutuality = true;
-      }
-      emoji = this.normilizeEmojiName(emoji);
-      this.postEmoji(awardUrl, emoji, (function(_this) {
-        return function() {
-          _this.addAwardToEmojiBar(votesBlock, emoji, checkMutuality);
-          return typeof callback === "function" ? callback() : void 0;
-        };
-      })(this));
-      return $('.emoji-menu').removeClass('is-visible');
-    };
-
-    AwardsHandler.prototype.addAwardToEmojiBar = function(votesBlock, emoji, checkForMutuality) {
-      var $emojiButton, counter;
-      if (checkForMutuality == null) {
-        checkForMutuality = true;
-      }
-      if (checkForMutuality) {
-        this.checkMutuality(votesBlock, emoji);
-      }
-      this.addEmojiToFrequentlyUsedList(emoji);
-      emoji = this.normilizeEmojiName(emoji);
-      $emojiButton = this.findEmojiIcon(votesBlock, emoji).parent();
-      if ($emojiButton.length > 0) {
-        if (this.isActive($emojiButton)) {
-          return this.decrementCounter($emojiButton, emoji);
-        } else {
-          counter = $emojiButton.find('.js-counter');
-          counter.text(parseInt(counter.text()) + 1);
-          $emojiButton.addClass('active');
-          this.addYouToUserList(votesBlock, emoji);
-          return this.animateEmoji($emojiButton);
-        }
-      } else {
-        votesBlock.removeClass('hidden');
-        return this.createEmoji(votesBlock, emoji);
-      }
-    };
-
-    AwardsHandler.prototype.getVotesBlock = function() {
-      var currentBlock;
-      currentBlock = $('.js-awards-block.current');
-      if (currentBlock.length) {
-        return currentBlock;
-      } else {
-        return $('.js-awards-block').eq(0);
-      }
-    };
-
-    AwardsHandler.prototype.getAwardUrl = function() {
-      return this.getVotesBlock().data('award-url');
-    };
-
-    AwardsHandler.prototype.checkMutuality = function(votesBlock, emoji) {
-      var $emojiButton, awardUrl, isAlreadyVoted, mutualVote;
-      awardUrl = this.getAwardUrl();
-      if (emoji === 'thumbsup' || emoji === 'thumbsdown') {
-        mutualVote = emoji === 'thumbsup' ? 'thumbsdown' : 'thumbsup';
-        $emojiButton = votesBlock.find("[data-emoji=" + mutualVote + "]").parent();
-        isAlreadyVoted = $emojiButton.hasClass('active');
-        if (isAlreadyVoted) {
-          this.addAward(votesBlock, awardUrl, mutualVote, false);
-        }
-      }
-    };
-
-    AwardsHandler.prototype.isActive = function($emojiButton) {
-      return $emojiButton.hasClass('active');
-    };
-
-    AwardsHandler.prototype.decrementCounter = function($emojiButton, emoji) {
-      var counter, counterNumber;
-      counter = $('.js-counter', $emojiButton);
-      counterNumber = parseInt(counter.text(), 10);
-      if (counterNumber > 1) {
-        counter.text(counterNumber - 1);
-        this.removeYouFromUserList($emojiButton, emoji);
-      } else if (emoji === 'thumbsup' || emoji === 'thumbsdown') {
-        $emojiButton.tooltip('destroy');
-        counter.text('0');
-        this.removeYouFromUserList($emojiButton, emoji);
-        if ($emojiButton.parents('.note').length) {
-          this.removeEmoji($emojiButton);
-        }
-      } else {
-        this.removeEmoji($emojiButton);
-      }
-      return $emojiButton.removeClass('active');
-    };
-
-    AwardsHandler.prototype.removeEmoji = function($emojiButton) {
-      var $votesBlock;
-      $emojiButton.tooltip('destroy');
-      $emojiButton.remove();
-      $votesBlock = this.getVotesBlock();
-      if ($votesBlock.find('.js-emoji-btn').length === 0) {
-        return $votesBlock.addClass('hidden');
-      }
-    };
-
-    AwardsHandler.prototype.getAwardTooltip = function($awardBlock) {
-      return $awardBlock.attr('data-original-title') || $awardBlock.attr('data-title') || '';
-    };
-
-    AwardsHandler.prototype.toSentence = function(list) {
-      if(list.length <= 2){
-        return list.join(' and ');
-      }
-      else{
-        return list.slice(0, -1).join(', ') + ', and ' + list[list.length - 1];
+    }
+    // Prebuild the categoryMap
+    categoryMap = categoryMap || buildCategoryMap();
+  });
+  this.registerEventListener('on', $(document), 'click', '.js-add-award', (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    this.showEmojiMenu($(e.currentTarget));
+  });
+
+  this.registerEventListener('on', $('html'), 'click', (e) => {
+    const $target = $(e.target);
+    if (!$target.closest('.emoji-menu-content').length) {
+      $('.js-awards-block.current').removeClass('current');
+    }
+    if (!$target.closest('.emoji-menu').length) {
+      if ($('.emoji-menu').is(':visible')) {
+        $('.js-add-award.is-active').removeClass('is-active');
+        $('.emoji-menu').removeClass('is-visible');
       }
-    };
-
-    AwardsHandler.prototype.removeYouFromUserList = function($emojiButton, emoji) {
-      var authors, awardBlock, newAuthors, originalTitle;
-      awardBlock = $emojiButton;
-      originalTitle = this.getAwardTooltip(awardBlock);
-      authors = originalTitle.split(FROM_SENTENCE_REGEX);
-      authors.splice(authors.indexOf('You'), 1);
-      return awardBlock
-        .closest('.js-emoji-btn')
-        .removeData('title')
-        .removeAttr('data-title')
-        .removeAttr('data-original-title')
-        .attr('title', this.toSentence(authors))
-        .tooltip('fixTitle');
-    };
-
-    AwardsHandler.prototype.addYouToUserList = function(votesBlock, emoji) {
-      var awardBlock, origTitle, users;
-      awardBlock = this.findEmojiIcon(votesBlock, emoji).parent();
-      origTitle = this.getAwardTooltip(awardBlock);
-      users = [];
-      if (origTitle) {
-        users = origTitle.trim().split(FROM_SENTENCE_REGEX);
+    }
+  });
+  this.registerEventListener('on', $(document), 'click', '.js-emoji-btn', (e) => {
+    e.preventDefault();
+    const $target = $(e.currentTarget);
+    const $glEmojiElement = $target.find('gl-emoji');
+    const $spriteIconElement = $target.find('.icon');
+    const emoji = ($glEmojiElement.length ? $glEmojiElement : $spriteIconElement).data('name');
+    $target.closest('.js-awards-block').addClass('current');
+    return this.addAward(this.getVotesBlock(), this.getAwardUrl(), emoji);
+  });
+}
+
+AwardsHandler.prototype.registerEventListener = function registerEventListener(method = 'on', element, ...args) {
+  element[method].call(element, ...args);
+  this.eventListeners.push({
+    element,
+    args,
+  });
+};
+
+AwardsHandler.prototype.showEmojiMenu = function showEmojiMenu($addBtn) {
+  if ($addBtn.hasClass('js-note-emoji')) {
+    $addBtn.closest('.note').find('.js-awards-block').addClass('current');
+  } else {
+    $addBtn.closest('.js-awards-block').addClass('current');
+  }
+
+  const $menu = $('.emoji-menu');
+  if ($menu.length) {
+    if ($menu.is('.is-visible')) {
+      $addBtn.removeClass('is-active');
+      $menu.removeClass('is-visible');
+      $('#emoji_search').blur();
+    } else {
+      $addBtn.addClass('is-active');
+      this.positionMenu($menu, $addBtn);
+      $menu.addClass('is-visible');
+      $('#emoji_search').focus();
+    }
+  } else {
+    $addBtn.addClass('is-loading is-active');
+    this.createEmojiMenu(() => {
+      const $createdMenu = $('.emoji-menu');
+      $addBtn.removeClass('is-loading');
+      this.positionMenu($createdMenu, $addBtn);
+      return setTimeout(() => {
+        $createdMenu.addClass('is-visible');
+        $('#emoji_search').focus();
+      }, 200);
+    });
+  }
+};
+
+// Create the emoji menu with the first category of emojis.
+// Then render the remaining categories of emojis one by one to avoid jank.
+AwardsHandler.prototype.createEmojiMenu = function createEmojiMenu(callback) {
+  if (this.isCreatingEmojiMenu) {
+    return;
+  }
+  this.isCreatingEmojiMenu = true;
+
+  // Render the first category
+  categoryMap = categoryMap || buildCategoryMap();
+  const categoryNameKey = Object.keys(categoryMap)[0];
+  const emojisInCategory = categoryMap[categoryNameKey];
+  const firstCategory = renderCategory(categoryLabelMap[categoryNameKey], emojisInCategory);
+
+  // Render the frequently used
+  const frequentlyUsedEmojis = this.getFrequentlyUsedEmojis();
+  let frequentlyUsedCatgegory = '';
+  if (frequentlyUsedEmojis.length > 0) {
+    frequentlyUsedCatgegory = renderCategory('Frequently used', frequentlyUsedEmojis, {
+      menuListClass: 'frequent-emojis',
+    });
+  }
+
+  const emojiMenuMarkup = `
+    <div class="emoji-menu">
+      <input type="text" name="emoji_search" id="emoji_search" value="" class="emoji-search search-input form-control" placeholder="Search emoji" />
+
+      <div class="emoji-menu-content">
+        ${frequentlyUsedCatgegory}
+        ${firstCategory}
+      </div>
+    </div>
+  `;
+
+  document.body.insertAdjacentHTML('beforeend', emojiMenuMarkup);
+
+  this.addRemainingEmojiMenuCategories();
+  this.setupSearch();
+  if (callback) {
+    callback();
+  }
+};
+
+AwardsHandler
+  .prototype
+  .addRemainingEmojiMenuCategories = function addRemainingEmojiMenuCategories() {
+    if (this.isAddingRemainingEmojiMenuCategories) {
+      return;
+    }
+    this.isAddingRemainingEmojiMenuCategories = true;
+
+    categoryMap = categoryMap || buildCategoryMap();
+
+    // Avoid the jank and render the remaining categories separately
+    // This will take more time, but makes UI more responsive
+    const menu = document.querySelector('.emoji-menu');
+    const emojiContentElement = menu.querySelector('.emoji-menu-content');
+    const remainingCategories = Object.keys(categoryMap).slice(1);
+    const allCategoriesAddedPromise = remainingCategories.reduce(
+      (promiseChain, categoryNameKey) =>
+        promiseChain.then(() =>
+          new Promise((resolve) => {
+            const emojisInCategory = categoryMap[categoryNameKey];
+            const categoryMarkup = renderCategory(
+              categoryLabelMap[categoryNameKey],
+              emojisInCategory,
+            );
+            requestAnimationFrame(() => {
+              emojiContentElement.insertAdjacentHTML('beforeend', categoryMarkup);
+              resolve();
+            });
+          }),
+      ),
+      Promise.resolve(),
+    );
+
+    allCategoriesAddedPromise.then(() => {
+      // Used for tests
+      // We check for the menu in case it was destroyed in the meantime
+      if (menu) {
+        menu.dispatchEvent(new CustomEvent('build-emoji-menu-finish'));
       }
-      users.unshift('You');
-      return awardBlock
-        .attr('title', this.toSentence(users))
-        .tooltip('fixTitle');
-    };
-
-    AwardsHandler.prototype.createEmoji_ = function(votesBlock, emoji) {
-      var $emojiButton, buttonHtml, emojiCssClass;
-      emojiCssClass = this.resolveNameToCssClass(emoji);
-      buttonHtml = "<button class='btn award-control js-emoji-btn has-tooltip active' title='You' data-placement='bottom'> <div class='icon emoji-icon " + emojiCssClass + "' data-emoji='" + emoji + "'></div> <span class='award-control-text js-counter'>1</span> </button>";
-      $emojiButton = $(buttonHtml);
-      $emojiButton.insertBefore(votesBlock.find('.js-award-holder')).find('.emoji-icon').data('emoji', emoji);
+    });
+  };
+
+AwardsHandler.prototype.positionMenu = function positionMenu($menu, $addBtn) {
+  const position = $addBtn.data('position');
+  // The menu could potentially be off-screen or in a hidden overflow element
+  // So we position the element absolute in the body
+  const css = {
+    top: `${$addBtn.offset().top + $addBtn.outerHeight()}px`,
+  };
+  if (position === 'right') {
+    css.left = `${($addBtn.offset().left - $menu.outerWidth()) + 20}px`;
+    $menu.addClass('is-aligned-right');
+  } else {
+    css.left = `${$addBtn.offset().left}px`;
+    $menu.removeClass('is-aligned-right');
+  }
+  return $menu.css(css);
+};
+
+AwardsHandler.prototype.addAward = function addAward(
+  votesBlock,
+  awardUrl,
+  emoji,
+  checkMutuality,
+  callback,
+) {
+  const normalizedEmoji = this.normalizeEmojiName(emoji);
+  this.postEmoji(awardUrl, normalizedEmoji, () => {
+    this.addAwardToEmojiBar(votesBlock, normalizedEmoji, checkMutuality);
+    return typeof callback === 'function' ? callback() : undefined;
+  });
+  return $('.emoji-menu').removeClass('is-visible');
+};
+
+AwardsHandler.prototype.addAwardToEmojiBar = function addAwardToEmojiBar(
+  votesBlock,
+  emoji,
+  checkForMutuality,
+) {
+  if (checkForMutuality || checkForMutuality === null) {
+    this.checkMutuality(votesBlock, emoji);
+  }
+  this.addEmojiToFrequentlyUsedList(emoji);
+  const normalizedEmoji = this.normalizeEmojiName(emoji);
+  const $emojiButton = this.findEmojiIcon(votesBlock, normalizedEmoji).parent();
+  if ($emojiButton.length > 0) {
+    if (this.isActive($emojiButton)) {
+      this.decrementCounter($emojiButton, normalizedEmoji);
+    } else {
+      const counter = $emojiButton.find('.js-counter');
+      counter.text(parseInt(counter.text(), 10) + 1);
+      $emojiButton.addClass('active');
+      this.addYouToUserList(votesBlock, normalizedEmoji);
       this.animateEmoji($emojiButton);
-      $('.award-control').tooltip();
-      return votesBlock.removeClass('current');
-    };
-
-    AwardsHandler.prototype.animateEmoji = function($emoji) {
-      var className = 'pulse animated once short';
-      $emoji.addClass(className);
-
-      $emoji.on('webkitAnimationEnd animationEnd', function() {
-        $(this).removeClass(className);
-      });
-    };
+    }
+  } else {
+    votesBlock.removeClass('hidden');
+    this.createEmoji(votesBlock, normalizedEmoji);
+  }
+};
+
+AwardsHandler.prototype.getVotesBlock = function getVotesBlock() {
+  const currentBlock = $('.js-awards-block.current');
+  let resultantVotesBlock = currentBlock;
+  if (currentBlock.length === 0) {
+    resultantVotesBlock = $('.js-awards-block').eq(0);
+  }
+
+  return resultantVotesBlock;
+};
+
+AwardsHandler.prototype.getAwardUrl = function getAwardUrl() {
+  return this.getVotesBlock().data('award-url');
+};
+
+AwardsHandler.prototype.checkMutuality = function checkMutuality(votesBlock, emoji) {
+  const awardUrl = this.getAwardUrl();
+  if (emoji === 'thumbsup' || emoji === 'thumbsdown') {
+    const mutualVote = emoji === 'thumbsup' ? 'thumbsdown' : 'thumbsup';
+    const $emojiButton = votesBlock.find(`[data-name="${mutualVote}"]`).parent();
+    const isAlreadyVoted = $emojiButton.hasClass('active');
+    if (isAlreadyVoted) {
+      this.addAward(votesBlock, awardUrl, mutualVote, false);
+    }
+  }
+};
+
+AwardsHandler.prototype.isActive = function isActive($emojiButton) {
+  return $emojiButton.hasClass('active');
+};
+
+AwardsHandler.prototype.decrementCounter = function decrementCounter($emojiButton, emoji) {
+  const counter = $('.js-counter', $emojiButton);
+  const counterNumber = parseInt(counter.text(), 10);
+  if (counterNumber > 1) {
+    counter.text(counterNumber - 1);
+    this.removeYouFromUserList($emojiButton);
+  } else if (emoji === 'thumbsup' || emoji === 'thumbsdown') {
+    $emojiButton.tooltip('destroy');
+    counter.text('0');
+    this.removeYouFromUserList($emojiButton);
+    if ($emojiButton.parents('.note').length) {
+      this.removeEmoji($emojiButton);
+    }
+  } else {
+    this.removeEmoji($emojiButton);
+  }
+  return $emojiButton.removeClass('active');
+};
+
+AwardsHandler.prototype.removeEmoji = function removeEmoji($emojiButton) {
+  $emojiButton.tooltip('destroy');
+  $emojiButton.remove();
+  const $votesBlock = this.getVotesBlock();
+  if ($votesBlock.find('.js-emoji-btn').length === 0) {
+    $votesBlock.addClass('hidden');
+  }
+};
+
+AwardsHandler.prototype.getAwardTooltip = function getAwardTooltip($awardBlock) {
+  return $awardBlock.attr('data-original-title') || $awardBlock.attr('data-title') || '';
+};
+
+AwardsHandler.prototype.toSentence = function toSentence(list) {
+  let sentence;
+  if (list.length <= 2) {
+    sentence = list.join(' and ');
+  } else {
+    sentence = `${list.slice(0, -1).join(', ')}, and ${list[list.length - 1]}`;
+  }
+
+  return sentence;
+};
+
+AwardsHandler.prototype.removeYouFromUserList = function removeYouFromUserList($emojiButton) {
+  const awardBlock = $emojiButton;
+  const originalTitle = this.getAwardTooltip(awardBlock);
+  const authors = originalTitle.split(FROM_SENTENCE_REGEX);
+  authors.splice(authors.indexOf('You'), 1);
+  return awardBlock
+    .closest('.js-emoji-btn')
+    .removeData('title')
+    .removeAttr('data-title')
+    .removeAttr('data-original-title')
+    .attr('title', this.toSentence(authors))
+    .tooltip('fixTitle');
+};
+
+AwardsHandler.prototype.addYouToUserList = function addYouToUserList(votesBlock, emoji) {
+  const awardBlock = this.findEmojiIcon(votesBlock, emoji).parent();
+  const origTitle = this.getAwardTooltip(awardBlock);
+  let users = [];
+  if (origTitle) {
+    users = origTitle.trim().split(FROM_SENTENCE_REGEX);
+  }
+  users.unshift('You');
+  return awardBlock
+    .attr('title', this.toSentence(users))
+    .tooltip('fixTitle');
+};
+
+AwardsHandler
+  .prototype
+  .createAwardButtonForVotesBlock = function createAwardButtonForVotesBlock(votesBlock, emojiName) {
+    const buttonHtml = `
+      <button class="btn award-control js-emoji-btn has-tooltip active" title="You" data-placement="bottom">
+        ${glEmojiTag(emojiName)}
+        <span class="award-control-text js-counter">1</span>
+      </button>
+    `;
+    const $emojiButton = $(buttonHtml);
+    $emojiButton.insertBefore(votesBlock.find('.js-award-holder')).find('.emoji-icon').data('name', emojiName);
+    this.animateEmoji($emojiButton);
+    $('.award-control').tooltip();
+    votesBlock.removeClass('current');
+  };
+
+AwardsHandler.prototype.animateEmoji = function animateEmoji($emoji) {
+  const className = 'pulse animated once short';
+  $emoji.addClass(className);
+
+  this.registerEventListener('on', $emoji, animationEndEventString, (e) => {
+    $(e.currentTarget).removeClass(className);
+  });
+};
+
+AwardsHandler.prototype.createEmoji = function createEmoji(votesBlock, emoji) {
+  if ($('.emoji-menu').length) {
+    this.createAwardButtonForVotesBlock(votesBlock, emoji);
+  }
+  this.createEmojiMenu(() => {
+    this.createAwardButtonForVotesBlock(votesBlock, emoji);
+  });
+};
+
+AwardsHandler.prototype.postEmoji = function postEmoji(awardUrl, emoji, callback) {
+  return $.post(awardUrl, {
+    name: emoji,
+  }, (data) => {
+    if (data.ok) {
+      callback();
+    }
+  });
+};
+
+AwardsHandler.prototype.findEmojiIcon = function findEmojiIcon(votesBlock, emoji) {
+  return votesBlock.find(`.js-emoji-btn [data-name="${emoji}"]`);
+};
+
+AwardsHandler.prototype.scrollToAwards = function scrollToAwards() {
+  const options = {
+    scrollTop: $('.awards').offset().top - 110,
+  };
+  return $('body, html').animate(options, 200);
+};
+
+AwardsHandler.prototype.normalizeEmojiName = function normalizeEmojiName(emoji) {
+  return Object.prototype.hasOwnProperty.call(this.aliases, emoji) ? this.aliases[emoji] : emoji;
+};
+
+AwardsHandler
+  .prototype
+  .addEmojiToFrequentlyUsedList = function addEmojiToFrequentlyUsedList(emoji) {
+    if (isEmojiNameValid(emoji)) {
+      this.frequentlyUsedEmojis = _.uniq(this.getFrequentlyUsedEmojis().concat(emoji));
+      Cookies.set('frequently_used_emojis', this.frequentlyUsedEmojis.join(','), { expires: 365 });
+    }
+  };
 
-    AwardsHandler.prototype.createEmoji = function(votesBlock, emoji) {
-      if ($('.emoji-menu').length) {
-        return this.createEmoji_(votesBlock, emoji);
-      }
-      return this.createEmojiMenu(this.getAwardMenuUrl(), (function(_this) {
-        return function() {
-          return _this.createEmoji_(votesBlock, emoji);
-        };
-      })(this));
-    };
-
-    AwardsHandler.prototype.getAwardMenuUrl = function() {
-      return gon.award_menu_url;
-    };
-
-    AwardsHandler.prototype.resolveNameToCssClass = function(emoji) {
-      var emojiIcon, unicodeName;
-      emojiIcon = $(".emoji-menu-content [data-emoji='" + emoji + "']");
-      if (emojiIcon.length > 0) {
-        unicodeName = emojiIcon.data('unicode-name');
-      } else {
-        // Find by alias
-        unicodeName = $(".emoji-menu-content [data-aliases*=':" + emoji + ":']").data('unicode-name');
-      }
-      return "emoji-" + unicodeName;
-    };
-
-    AwardsHandler.prototype.postEmoji = function(awardUrl, emoji, callback) {
-      return $.post(awardUrl, {
-        name: emoji
-      }, function(data) {
-        if (data.ok) {
-          return callback();
-        }
-      });
-    };
-
-    AwardsHandler.prototype.findEmojiIcon = function(votesBlock, emoji) {
-      return votesBlock.find(".js-emoji-btn [data-emoji='" + emoji + "']");
-    };
-
-    AwardsHandler.prototype.scrollToAwards = function() {
-      var options;
-      options = {
-        scrollTop: $('.awards').offset().top - 110
-      };
-      return $('body, html').animate(options, 200);
-    };
-
-    AwardsHandler.prototype.normilizeEmojiName = function(emoji) {
-      return this.aliases[emoji] || emoji;
-    };
-
-    AwardsHandler.prototype.addEmojiToFrequentlyUsedList = function(emoji) {
-      var frequentlyUsedEmojis;
-      frequentlyUsedEmojis = this.getFrequentlyUsedEmojis();
-      frequentlyUsedEmojis.push(emoji);
-      Cookies.set('frequently_used_emojis', frequentlyUsedEmojis.join(','), { expires: 365 });
-    };
-
-    AwardsHandler.prototype.getFrequentlyUsedEmojis = function() {
-      var frequentlyUsedEmojis;
-      frequentlyUsedEmojis = (Cookies.get('frequently_used_emojis') || '').split(',');
-      return _.compact(_.uniq(frequentlyUsedEmojis));
-    };
-
-    AwardsHandler.prototype.renderFrequentlyUsedBlock = function() {
-      var emoji, frequentlyUsedEmojis, i, len, ul;
-      if (Cookies.get('frequently_used_emojis')) {
-        frequentlyUsedEmojis = this.getFrequentlyUsedEmojis();
-        ul = $("<ul class='clearfix emoji-menu-list frequent-emojis'>");
-        for (i = 0, len = frequentlyUsedEmojis.length; i < len; i++) {
-          emoji = frequentlyUsedEmojis[i];
-          $(".emoji-menu-content [data-emoji='" + emoji + "']").closest('li').clone().appendTo(ul);
-        }
-        $('.emoji-menu-content').prepend(ul).prepend($('<h5>').text('Frequently used'));
-      }
-      return this.frequentEmojiBlockRendered = true;
-    };
-
-    AwardsHandler.prototype.setupSearch = function() {
-      return $('input.emoji-search').on('keyup', (function(_this) {
-        return function(ev) {
-          var found_emojis, h5, term, ul;
-          term = $(ev.target).val();
-          // Clean previous search results
-          $('ul.emoji-menu-search, h5.emoji-search').remove();
-          if (term) {
-            // Generate a search result block
-            h5 = $('<h5 class="emoji-search" />').text('Search results');
-            found_emojis = _this.searchEmojis(term).show();
-            ul = $('<ul>').addClass('emoji-menu-list emoji-menu-search').append(found_emojis);
-            $('.emoji-menu-content ul, .emoji-menu-content h5').hide();
-            return $('.emoji-menu-content').append(h5).append(ul);
-          } else {
-            return $('.emoji-menu-content').children().show();
-          }
-        };
-      })(this));
-    };
-
-    AwardsHandler.prototype.searchEmojis = function(term) {
-      return $(".emoji-menu-list:not(.frequent-emojis) [data-emoji*='" + term + "']").closest('li').clone();
-    };
-
-    return AwardsHandler;
+AwardsHandler.prototype.getFrequentlyUsedEmojis = function getFrequentlyUsedEmojis() {
+  return this.frequentlyUsedEmojis || (() => {
+    const frequentlyUsedEmojis = _.uniq((Cookies.get('frequently_used_emojis') || '').split(','));
+    this.frequentlyUsedEmojis = frequentlyUsedEmojis.filter(
+      inputName => isEmojiNameValid(inputName),
+    );
 
+    return this.frequentlyUsedEmojis;
   })();
+};
+
+AwardsHandler.prototype.setupSearch = function setupSearch() {
+  this.registerEventListener('on', $('input.emoji-search'), 'input', (e) => {
+    const term = $(e.target).val().trim();
+    // Clean previous search results
+    $('ul.emoji-menu-search, h5.emoji-search').remove();
+    if (term.length > 0) {
+      // Generate a search result block
+      const h5 = $('<h5 class="emoji-search" />').text('Search results');
+      const foundEmojis = this.searchEmojis(term).show();
+      const ul = $('<ul>').addClass('emoji-menu-list emoji-menu-search').append(foundEmojis);
+      $('.emoji-menu-content ul, .emoji-menu-content h5').hide();
+      $('.emoji-menu-content').append(h5).append(ul);
+    } else {
+      $('.emoji-menu-content').children().show();
+    }
+  });
+};
 
-}).call(this);
+AwardsHandler.prototype.searchEmojis = function searchEmojis(term) {
+  const safeTerm = term.toLowerCase();
+
+  const namesMatchingAlias = [];
+  Object.keys(emojiAliases).forEach((alias) => {
+    if (alias.indexOf(safeTerm) >= 0) {
+      namesMatchingAlias.push(emojiAliases[alias]);
+    }
+  });
+  const $matchingElements = namesMatchingAlias.concat(safeTerm)
+    .reduce(
+      ($result, searchTerm) =>
+        $result.add($(`.emoji-menu-list:not(.frequent-emojis) [data-name*="${searchTerm}"]`)),
+      $([]),
+    );
+  return $matchingElements.closest('li').clone();
+};
+
+AwardsHandler.prototype.destroy = function destroy() {
+  this.eventListeners.forEach((entry) => {
+    entry.element.off.call(entry.element, ...entry.args);
+  });
+  $('.emoji-menu').remove();
+};
+
+export default AwardsHandler;
diff --git a/app/assets/javascripts/behaviors/autosize.js b/app/assets/javascripts/behaviors/autosize.js
index 074378b9e52..f7f41d55b52 100644
--- a/app/assets/javascripts/behaviors/autosize.js
+++ b/app/assets/javascripts/behaviors/autosize.js
@@ -1,7 +1,7 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, no-var, consistent-return, max-len */
+/* global autosize */
 
-/*= require jquery.ba-resize */
-/*= require autosize */
+var autosize = require('vendor/autosize');
 
 (function() {
   $(function() {
@@ -25,5 +25,4 @@
     autosize.update($fields);
     return $fields.css('resize', 'vertical');
   });
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/behaviors/bind_in_out.js b/app/assets/javascripts/behaviors/bind_in_out.js
new file mode 100644
index 00000000000..886f127b06b
--- /dev/null
+++ b/app/assets/javascripts/behaviors/bind_in_out.js
@@ -0,0 +1,47 @@
+class BindInOut {
+  constructor(bindIn, bindOut) {
+    this.in = bindIn;
+    this.out = bindOut;
+
+    this.eventWrapper = {};
+    this.eventType = /(INPUT|TEXTAREA)/.test(bindIn.tagName) ? 'keyup' : 'change';
+  }
+
+  addEvents() {
+    this.eventWrapper.updateOut = this.updateOut.bind(this);
+
+    this.in.addEventListener(this.eventType, this.eventWrapper.updateOut);
+
+    return this;
+  }
+
+  updateOut() {
+    this.out.textContent = this.in.value;
+
+    return this;
+  }
+
+  removeEvents() {
+    this.in.removeEventListener(this.eventType, this.eventWrapper.updateOut);
+
+    return this;
+  }
+
+  static initAll() {
+    const ins = document.querySelectorAll('*[data-bind-in]');
+
+    return [].map.call(ins, anIn => BindInOut.init(anIn));
+  }
+
+  static init(anIn, anOut) {
+    const out = anOut || document.querySelector(`*[data-bind-out="${anIn.dataset.bindIn}"]`);
+
+    if (!out) return null;
+
+    const bindInOut = new BindInOut(anIn, out);
+
+    return bindInOut.addEvents().updateOut();
+  }
+}
+
+export default BindInOut;
diff --git a/app/assets/javascripts/behaviors/details_behavior.js b/app/assets/javascripts/behaviors/details_behavior.js
index a64cefb62bd..fd0840fa117 100644
--- a/app/assets/javascripts/behaviors/details_behavior.js
+++ b/app/assets/javascripts/behaviors/details_behavior.js
@@ -1,4 +1,4 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, quotes, no-var, vars-on-top, max-len */
 (function() {
   $(function() {
     $("body").on("click", ".js-details-target", function() {
@@ -23,5 +23,4 @@
       return e.preventDefault();
     });
   });
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/behaviors/gl_emoji.js b/app/assets/javascripts/behaviors/gl_emoji.js
new file mode 100644
index 00000000000..19a607309e4
--- /dev/null
+++ b/app/assets/javascripts/behaviors/gl_emoji.js
@@ -0,0 +1,116 @@
+import installCustomElements from 'document-register-element';
+import emojiMap from 'emojis/digests.json';
+import emojiAliases from 'emojis/aliases.json';
+import { getUnicodeSupportMap } from './gl_emoji/unicode_support_map';
+import { isEmojiUnicodeSupported } from './gl_emoji/is_emoji_unicode_supported';
+
+installCustomElements(window);
+
+const generatedUnicodeSupportMap = getUnicodeSupportMap();
+
+function emojiImageTag(name, src) {
+  return `<img class="emoji" title=":${name}:" alt=":${name}:" src="${src}" width="20" height="20" align="absmiddle" />`;
+}
+
+function assembleFallbackImageSrc(inputName) {
+  let name = Object.prototype.hasOwnProperty.call(emojiAliases, inputName) ?
+    emojiAliases[inputName] : inputName;
+  let emojiInfo = emojiMap[name];
+  // Fallback to question mark for unknown emojis
+  if (!emojiInfo) {
+    name = 'grey_question';
+    emojiInfo = emojiMap[name];
+  }
+  const fallbackImageSrc = `${gon.asset_host || ''}${gon.relative_url_root || ''}/assets/emoji/${name}-${emojiInfo.digest}.png`;
+
+  return fallbackImageSrc;
+}
+const glEmojiTagDefaults = {
+  sprite: false,
+  forceFallback: false,
+};
+function glEmojiTag(inputName, options) {
+  const opts = Object.assign({}, glEmojiTagDefaults, options);
+  let name = Object.prototype.hasOwnProperty.call(emojiAliases, inputName) ?
+    emojiAliases[inputName] : inputName;
+  let emojiInfo = emojiMap[name];
+  // Fallback to question mark for unknown emojis
+  if (!emojiInfo) {
+    name = 'grey_question';
+    emojiInfo = emojiMap[name];
+  }
+
+  const fallbackImageSrc = assembleFallbackImageSrc(name);
+  const fallbackSpriteClass = `emoji-${name}`;
+
+  const classList = [];
+  if (opts.forceFallback && opts.sprite) {
+    classList.push('emoji-icon');
+    classList.push(fallbackSpriteClass);
+  }
+  const classAttribute = classList.length > 0 ? `class="${classList.join(' ')}"` : '';
+  const fallbackSpriteAttribute = opts.sprite ? `data-fallback-sprite-class="${fallbackSpriteClass}"` : '';
+  let contents = emojiInfo.moji;
+  if (opts.forceFallback && !opts.sprite) {
+    contents = emojiImageTag(name, fallbackImageSrc);
+  }
+
+  return `
+  <gl-emoji
+    ${classAttribute}
+    data-name="${name}"
+    data-fallback-src="${fallbackImageSrc}"
+    ${fallbackSpriteAttribute}
+    data-unicode-version="${emojiInfo.unicodeVersion}"
+  >
+    ${contents}
+  </gl-emoji>
+  `;
+}
+
+function installGlEmojiElement() {
+  const GlEmojiElementProto = Object.create(HTMLElement.prototype);
+  GlEmojiElementProto.createdCallback = function createdCallback() {
+    const emojiUnicode = this.textContent.trim();
+    const {
+      name,
+      unicodeVersion,
+      fallbackSrc,
+      fallbackSpriteClass,
+    } = this.dataset;
+
+    const isEmojiUnicode = this.childNodes && Array.prototype.every.call(
+      this.childNodes,
+      childNode => childNode.nodeType === 3,
+    );
+    const hasImageFallback = fallbackSrc && fallbackSrc.length > 0;
+    const hasCssSpriteFalback = fallbackSpriteClass && fallbackSpriteClass.length > 0;
+
+    if (
+      isEmojiUnicode &&
+      !isEmojiUnicodeSupported(generatedUnicodeSupportMap, emojiUnicode, unicodeVersion)
+    ) {
+      // CSS sprite fallback takes precedence over image fallback
+      if (hasCssSpriteFalback) {
+        // IE 11 doesn't like adding multiple at once :(
+        this.classList.add('emoji-icon');
+        this.classList.add(fallbackSpriteClass);
+      } else if (hasImageFallback) {
+        this.innerHTML = emojiImageTag(name, fallbackSrc);
+      } else {
+        const src = assembleFallbackImageSrc(name);
+        this.innerHTML = emojiImageTag(name, src);
+      }
+    }
+  };
+
+  document.registerElement('gl-emoji', {
+    prototype: GlEmojiElementProto,
+  });
+}
+
+export {
+  installGlEmojiElement,
+  glEmojiTag,
+  emojiImageTag,
+};
diff --git a/app/assets/javascripts/behaviors/gl_emoji/is_emoji_name_valid.js b/app/assets/javascripts/behaviors/gl_emoji/is_emoji_name_valid.js
new file mode 100644
index 00000000000..be4aeb32c46
--- /dev/null
+++ b/app/assets/javascripts/behaviors/gl_emoji/is_emoji_name_valid.js
@@ -0,0 +1,11 @@
+import emojiMap from 'emojis/digests.json';
+import emojiAliases from 'emojis/aliases.json';
+
+function isEmojiNameValid(inputName) {
+  const name = Object.prototype.hasOwnProperty.call(emojiAliases, inputName) ?
+    emojiAliases[inputName] : inputName;
+
+  return name && emojiMap[name];
+}
+
+export default isEmojiNameValid;
diff --git a/app/assets/javascripts/behaviors/gl_emoji/is_emoji_unicode_supported.js b/app/assets/javascripts/behaviors/gl_emoji/is_emoji_unicode_supported.js
new file mode 100644
index 00000000000..20ab2d7e827
--- /dev/null
+++ b/app/assets/javascripts/behaviors/gl_emoji/is_emoji_unicode_supported.js
@@ -0,0 +1,119 @@
+// On Windows, flags render as two-letter country codes, see http://emojipedia.org/flags/
+const flagACodePoint = 127462; // parseInt('1F1E6', 16)
+const flagZCodePoint = 127487; // parseInt('1F1FF', 16)
+function isFlagEmoji(emojiUnicode) {
+  const cp = emojiUnicode.codePointAt(0);
+  // Length 4 because flags are made of 2 characters which are surrogate pairs
+  return emojiUnicode.length === 4 && cp >= flagACodePoint && cp <= flagZCodePoint;
+}
+
+// Chrome <57 renders keycaps oddly
+// See https://bugs.chromium.org/p/chromium/issues/detail?id=632294
+// Same issue on Windows also fixed in Chrome 57, http://i.imgur.com/rQF7woO.png
+function isKeycapEmoji(emojiUnicode) {
+  return emojiUnicode.length === 3 && emojiUnicode[2] === '\u20E3';
+}
+
+// Check for a skin tone variation emoji which aren't always supported
+const tone1 = 127995;// parseInt('1F3FB', 16)
+const tone5 = 127999;// parseInt('1F3FF', 16)
+function isSkinToneComboEmoji(emojiUnicode) {
+  return emojiUnicode.length > 2 && Array.from(emojiUnicode).some((char) => {
+    const cp = char.codePointAt(0);
+    return cp >= tone1 && cp <= tone5;
+  });
+}
+
+// macOS supports most skin tone emoji's but
+// doesn't support the skin tone versions of horse racing
+const horseRacingCodePoint = 127943;// parseInt('1F3C7', 16)
+function isHorceRacingSkinToneComboEmoji(emojiUnicode) {
+  return Array.from(emojiUnicode)[0].codePointAt(0) === horseRacingCodePoint &&
+    isSkinToneComboEmoji(emojiUnicode);
+}
+
+// Check for `family_*`, `kiss_*`, `couple_*`
+// For ex. Windows 8.1 Firefox 51.0.1, doesn't support these
+const zwj = 8205; // parseInt('200D', 16)
+const personStartCodePoint = 128102; // parseInt('1F466', 16)
+const personEndCodePoint = 128105; // parseInt('1F469', 16)
+function isPersonZwjEmoji(emojiUnicode) {
+  let hasPersonEmoji = false;
+  let hasZwj = false;
+  Array.from(emojiUnicode).forEach((character) => {
+    const cp = character.codePointAt(0);
+    if (cp === zwj) {
+      hasZwj = true;
+    } else if (cp >= personStartCodePoint && cp <= personEndCodePoint) {
+      hasPersonEmoji = true;
+    }
+  });
+
+  return hasPersonEmoji && hasZwj;
+}
+
+// Helper so we don't have to run `isFlagEmoji` twice
+// in `isEmojiUnicodeSupported` logic
+function checkFlagEmojiSupport(unicodeSupportMap, emojiUnicode) {
+  const isFlagResult = isFlagEmoji(emojiUnicode);
+  return (
+    (unicodeSupportMap.flag && isFlagResult) ||
+    !isFlagResult
+  );
+}
+
+// Helper so we don't have to run `isSkinToneComboEmoji` twice
+// in `isEmojiUnicodeSupported` logic
+function checkSkinToneModifierSupport(unicodeSupportMap, emojiUnicode) {
+  const isSkinToneResult = isSkinToneComboEmoji(emojiUnicode);
+  return (
+    (unicodeSupportMap.skinToneModifier && isSkinToneResult) ||
+    !isSkinToneResult
+  );
+}
+
+// Helper func so we don't have to run `isHorceRacingSkinToneComboEmoji` twice
+// in `isEmojiUnicodeSupported` logic
+function checkHorseRacingSkinToneComboEmojiSupport(unicodeSupportMap, emojiUnicode) {
+  const isHorseRacingSkinToneResult = isHorceRacingSkinToneComboEmoji(emojiUnicode);
+  return (
+    (unicodeSupportMap.horseRacing && isHorseRacingSkinToneResult) ||
+    !isHorseRacingSkinToneResult
+  );
+}
+
+// Helper so we don't have to run `isPersonZwjEmoji` twice
+// in `isEmojiUnicodeSupported` logic
+function checkPersonEmojiSupport(unicodeSupportMap, emojiUnicode) {
+  const isPersonZwjResult = isPersonZwjEmoji(emojiUnicode);
+  return (
+    (unicodeSupportMap.personZwj && isPersonZwjResult) ||
+    !isPersonZwjResult
+  );
+}
+
+// Takes in a support map and determines whether
+// the given unicode emoji is supported on the platform.
+//
+// Combines all the edge case tests into a one-stop shop method
+function isEmojiUnicodeSupported(unicodeSupportMap = {}, emojiUnicode, unicodeVersion) {
+  const isOlderThanChrome57 = unicodeSupportMap.meta && unicodeSupportMap.meta.isChrome &&
+    unicodeSupportMap.meta.chromeVersion < 57;
+
+  // For comments about each scenario, see the comments above each individual respective function
+  return unicodeSupportMap[unicodeVersion] &&
+    !(isOlderThanChrome57 && isKeycapEmoji(emojiUnicode)) &&
+    checkFlagEmojiSupport(unicodeSupportMap, emojiUnicode) &&
+    checkSkinToneModifierSupport(unicodeSupportMap, emojiUnicode) &&
+    checkHorseRacingSkinToneComboEmojiSupport(unicodeSupportMap, emojiUnicode) &&
+    checkPersonEmojiSupport(unicodeSupportMap, emojiUnicode);
+}
+
+export {
+  isEmojiUnicodeSupported,
+  isFlagEmoji,
+  isKeycapEmoji,
+  isSkinToneComboEmoji,
+  isHorceRacingSkinToneComboEmoji,
+  isPersonZwjEmoji,
+};
diff --git a/app/assets/javascripts/behaviors/gl_emoji/unicode_support_map.js b/app/assets/javascripts/behaviors/gl_emoji/unicode_support_map.js
new file mode 100644
index 00000000000..aa522e20c36
--- /dev/null
+++ b/app/assets/javascripts/behaviors/gl_emoji/unicode_support_map.js
@@ -0,0 +1,161 @@
+const unicodeSupportTestMap = {
+  // man, student (emojione does not have any of these yet), http://emojipedia.org/emoji-zwj-sequences/
+  // occupationZwj: '\u{1F468}\u{200D}\u{1F393}',
+  // woman, biking (emojione does not have any of these yet), http://emojipedia.org/emoji-zwj-sequences/
+  // sexZwj: '\u{1F6B4}\u{200D}\u{2640}',
+  // family_mwgb
+  // Windows 8.1, Firefox 51.0.1 does not support `family_`, `kiss_`, `couple_`
+  personZwj: '\u{1F468}\u{200D}\u{1F469}\u{200D}\u{1F467}\u{200D}\u{1F466}',
+  // horse_racing_tone5
+  // Special case that is not supported on macOS 10.12 even though `skinToneModifier` succeeds
+  horseRacing: '\u{1F3C7}\u{1F3FF}',
+  // US flag, http://emojipedia.org/flags/
+  flag: '\u{1F1FA}\u{1F1F8}',
+  // http://emojipedia.org/modifiers/
+  skinToneModifier: [
+    // spy_tone5
+    '\u{1F575}\u{1F3FF}',
+    // person_with_ball_tone5
+    '\u{26F9}\u{1F3FF}',
+    // angel_tone5
+    '\u{1F47C}\u{1F3FF}',
+  ],
+  // rofl, http://emojipedia.org/unicode-9.0/
+  '9.0': '\u{1F923}',
+  // metal, http://emojipedia.org/unicode-8.0/
+  '8.0': '\u{1F918}',
+  // spy, http://emojipedia.org/unicode-7.0/
+  '7.0': '\u{1F575}',
+  // expressionless, http://emojipedia.org/unicode-6.1/
+  6.1: '\u{1F611}',
+  // japanese_goblin, http://emojipedia.org/unicode-6.0/
+  '6.0': '\u{1F47A}',
+  // sailboat, http://emojipedia.org/unicode-5.2/
+  5.2: '\u{26F5}',
+  // mahjong, http://emojipedia.org/unicode-5.1/
+  5.1: '\u{1F004}',
+  // gear, http://emojipedia.org/unicode-4.1/
+  4.1: '\u{2699}',
+  // zap, http://emojipedia.org/unicode-4.0/
+  '4.0': '\u{26A1}',
+  // recycle, http://emojipedia.org/unicode-3.2/
+  3.2: '\u{267B}',
+  // information_source, http://emojipedia.org/unicode-3.0/
+  '3.0': '\u{2139}',
+  // heart, http://emojipedia.org/unicode-1.1/
+  1.1: '\u{2764}',
+};
+
+function checkPixelInImageDataArray(pixelOffset, imageDataArray) {
+  // `4 *` because RGBA
+  const indexOffset = 4 * pixelOffset;
+  const hasColor = imageDataArray[indexOffset + 0] ||
+    imageDataArray[indexOffset + 1] ||
+    imageDataArray[indexOffset + 2];
+  const isVisible = imageDataArray[indexOffset + 3];
+  // Check for some sort of color other than black
+  if (hasColor && isVisible) {
+    return true;
+  }
+  return false;
+}
+
+const chromeMatches = navigator.userAgent.match(/Chrom(?:e|ium)\/([0-9]+)\./);
+const isChrome = chromeMatches && chromeMatches.length > 0;
+const chromeVersion = chromeMatches && chromeMatches[1] && parseInt(chromeMatches[1], 10);
+
+// We use 16px because mobile Safari (iOS 9.3) doesn't properly scale emojis :/
+// See 32px, https://i.imgur.com/htY6Zym.png
+// See 16px, https://i.imgur.com/FPPsIF8.png
+const fontSize = 16;
+function generateUnicodeSupportMap(testMap) {
+  const testMapKeys = Object.keys(testMap);
+  const numTestEntries = testMapKeys
+    .reduce((list, testKey) => list.concat(testMap[testKey]), []).length;
+
+  const canvas = document.createElement('canvas');
+  (window.gl || window).testEmojiUnicodeSupportMapCanvas = canvas;
+  const ctx = canvas.getContext('2d');
+  canvas.width = (2 * fontSize);
+  canvas.height = (numTestEntries * fontSize);
+  ctx.fillStyle = '#000000';
+  ctx.textBaseline = 'middle';
+  ctx.font = `${fontSize}px "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`;
+  // Write each emoji to the canvas vertically
+  let writeIndex = 0;
+  testMapKeys.forEach((testKey) => {
+    const testEntry = testMap[testKey];
+    [].concat(testEntry).forEach((emojiUnicode) => {
+      ctx.fillText(emojiUnicode, 0, (writeIndex * fontSize) + (fontSize / 2));
+      writeIndex += 1;
+    });
+  });
+
+  // Read from the canvas
+  const resultMap = {};
+  let readIndex = 0;
+  testMapKeys.forEach((testKey) => {
+    const testEntry = testMap[testKey];
+    // This needs to be a `reduce` instead of `every` because we need to
+    // keep the `readIndex` in sync from the writes by running all entries
+    const isTestSatisfied = [].concat(testEntry).reduce((isSatisfied) => {
+      // Sample along the vertical-middle for a couple of characters
+      const imageData = ctx.getImageData(
+          0,
+          (readIndex * fontSize) + (fontSize / 2),
+          2 * fontSize,
+          1,
+        ).data;
+
+      let isValidEmoji = false;
+      for (let currentPixel = 0; currentPixel < 64; currentPixel += 1) {
+        const isLookingAtFirstChar = currentPixel < fontSize;
+        const isLookingAtSecondChar = currentPixel >= (fontSize + (fontSize / 2));
+        // Check for the emoji somewhere along the row
+        if (isLookingAtFirstChar && checkPixelInImageDataArray(currentPixel, imageData)) {
+          isValidEmoji = true;
+
+        // Check to see that nothing is rendered next to the first character
+        // to ensure that the ZWJ sequence rendered as one piece
+        } else if (isLookingAtSecondChar && checkPixelInImageDataArray(currentPixel, imageData)) {
+          isValidEmoji = false;
+          break;
+        }
+      }
+
+      readIndex += 1;
+      return isSatisfied && isValidEmoji;
+    }, true);
+
+    resultMap[testKey] = isTestSatisfied;
+  });
+
+  resultMap.meta = {
+    isChrome,
+    chromeVersion,
+  };
+
+  return resultMap;
+}
+
+function getUnicodeSupportMap() {
+  let unicodeSupportMap;
+  const userAgentFromCache = window.localStorage.getItem('gl-emoji-user-agent');
+  try {
+    unicodeSupportMap = JSON.parse(window.localStorage.getItem('gl-emoji-unicode-support-map'));
+  } catch (err) {
+    // swallow
+  }
+  if (!unicodeSupportMap || userAgentFromCache !== navigator.userAgent) {
+    unicodeSupportMap = generateUnicodeSupportMap(unicodeSupportTestMap);
+    window.localStorage.setItem('gl-emoji-user-agent', navigator.userAgent);
+    window.localStorage.setItem('gl-emoji-unicode-support-map', JSON.stringify(unicodeSupportMap));
+  }
+
+  return unicodeSupportMap;
+}
+
+export {
+  getUnicodeSupportMap,
+  generateUnicodeSupportMap,
+};
diff --git a/app/assets/javascripts/behaviors/quick_submit.js b/app/assets/javascripts/behaviors/quick_submit.js
index 7ff88ecdcaf..626f3503c91 100644
--- a/app/assets/javascripts/behaviors/quick_submit.js
+++ b/app/assets/javascripts/behaviors/quick_submit.js
@@ -1,11 +1,12 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, one-var, no-var, one-var-declaration-per-line, prefer-arrow-callback, camelcase, consistent-return, quotes, object-shorthand, comma-dangle, max-len */
+
 // Quick Submit behavior
 //
 // When a child field of a form with a `js-quick-submit` class receives a
 // "Meta+Enter" (Mac) or "Ctrl+Enter" (Linux/Windows) key combination, the form
 // is submitted.
 //
-/*= require extensions/jquery */
+import '../commons/bootstrap';
 
 //
 // ### Example Markup
@@ -73,5 +74,4 @@
       return $this.tooltip('hide');
     });
   });
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/behaviors/requires_input.js b/app/assets/javascripts/behaviors/requires_input.js
index 4ac343f876c..eb7143f5b1a 100644
--- a/app/assets/javascripts/behaviors/requires_input.js
+++ b/app/assets/javascripts/behaviors/requires_input.js
@@ -1,10 +1,10 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, one-var, no-var, one-var-declaration-per-line, quotes, prefer-template, prefer-arrow-callback, no-else-return, consistent-return, max-len */
 // Requires Input behavior
 //
 // When called on a form with input fields with the `required` attribute, the
 // form's submit button will be disabled until all required fields have values.
 //
-/*= require extensions/jquery */
+import '../commons/bootstrap';
 
 //
 // ### Example Markup
@@ -59,5 +59,4 @@
       return hideOrShowHelpBlock($form);
     });
   });
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/behaviors/toggler_behavior.js b/app/assets/javascripts/behaviors/toggler_behavior.js
index 05b213fe3fb..576b8a0425f 100644
--- a/app/assets/javascripts/behaviors/toggler_behavior.js
+++ b/app/assets/javascripts/behaviors/toggler_behavior.js
@@ -1,23 +1,33 @@
-/* eslint-disable */
+/* eslint-disable wrap-iife, func-names, space-before-function-paren, prefer-arrow-callback, vars-on-top, no-var, max-len */
 (function(w) {
   $(function() {
+    var toggleContainer = function(container, /* optional */toggleState) {
+      var $container = $(container);
+
+      $container
+        .find('.js-toggle-button .fa')
+        .toggleClass('fa-chevron-up', toggleState)
+        .toggleClass('fa-chevron-down', toggleState !== undefined ? !toggleState : undefined);
+
+      $container
+        .find('.js-toggle-content')
+        .toggle(toggleState);
+    };
+
     // Toggle button. Show/hide content inside parent container.
     // Button does not change visibility. If button has icon - it changes chevron style.
     //
     // %div.js-toggle-container
-    //   %a.js-toggle-button
+    //   %button.js-toggle-button
     //   %div.js-toggle-content
     //
     $('body').on('click', '.js-toggle-button', function(e) {
-      e.preventDefault();
-      $(this)
-        .find('.fa')
-          .toggleClass('fa-chevron-down fa-chevron-up')
-        .end()
-        .closest('.js-toggle-container')
-          .find('.js-toggle-content')
-            .toggle()
-      ;
+      toggleContainer($(this).closest('.js-toggle-container'));
+
+      const targetTag = e.currentTarget.tagName.toLowerCase();
+      if (targetTag === 'a' || targetTag === 'button') {
+        e.preventDefault();
+      }
     });
 
     // If we're accessing a permalink, ensure it is not inside a
@@ -26,8 +36,8 @@
     var anchor = hash && document.getElementById(hash);
     var container = anchor && $(anchor).closest('.js-toggle-container');
 
-    if (container && container.find('.js-toggle-content').is(':hidden')) {
-      container.find('.js-toggle-button').trigger('click');
+    if (container) {
+      toggleContainer(container, true);
       anchor.scrollIntoView();
     }
   });
diff --git a/app/assets/javascripts/blob/blob_ci_yaml.js.es6 b/app/assets/javascripts/blob/blob_ci_yaml.js.es6
deleted file mode 100644
index 37531aaec9b..00000000000
--- a/app/assets/javascripts/blob/blob_ci_yaml.js.es6
+++ /dev/null
@@ -1,41 +0,0 @@
-/* eslint-disable */
-/*= require blob/template_selector */
-((global) => {
-
-  class BlobCiYamlSelector extends gl.TemplateSelector {
-    requestFile(query) {
-      return Api.gitlabCiYml(query.name, this.requestFileSuccess.bind(this));
-    }
-
-    requestFileSuccess(file) {
-      return super.requestFileSuccess(file);
-    }
-  }
-
-  global.BlobCiYamlSelector = BlobCiYamlSelector;
-
-  class BlobCiYamlSelectors {
-    constructor({ editor, $dropdowns } = {}) {
-      this.editor = editor;
-      this.$dropdowns = $dropdowns || $('.js-gitlab-ci-yml-selector');
-      this.initSelectors();
-    }
-
-    initSelectors() {
-      const editor = this.editor;
-      this.$dropdowns.each((i, dropdown) => {
-        const $dropdown = $(dropdown);
-        return new BlobCiYamlSelector({
-          editor,
-          pattern: /(.gitlab-ci.yml)/,
-          data: $dropdown.data('data'),
-          wrapper: $dropdown.closest('.js-gitlab-ci-yml-selector-wrap'),
-          dropdown: $dropdown
-        });
-      });
-    }
-  }
-
-  global.BlobCiYamlSelectors = BlobCiYamlSelectors;
-
-})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/blob/blob_file_dropzone.js b/app/assets/javascripts/blob/blob_file_dropzone.js
index 33fb4f8185c..c9fe23aec75 100644
--- a/app/assets/javascripts/blob/blob_file_dropzone.js
+++ b/app/assets/javascripts/blob/blob_file_dropzone.js
@@ -1,66 +1,63 @@
-/* eslint-disable */
-(function() {
-  this.BlobFileDropzone = (function() {
-    function BlobFileDropzone(form, method) {
-      var dropzone, form_dropzone, submitButton;
-      form_dropzone = form.find('.dropzone');
-      Dropzone.autoDiscover = false;
-      dropzone = form_dropzone.dropzone({
-        autoDiscover: false,
-        autoProcessQueue: false,
-        url: form.attr('action'),
-        // Rails uses a hidden input field for PUT
-        // http://stackoverflow.com/questions/21056482/how-to-set-method-put-in-form-tag-in-rails
-        method: method,
-        clickable: true,
-        uploadMultiple: false,
-        paramName: "file",
-        maxFilesize: gon.max_file_size || 10,
-        parallelUploads: 1,
-        maxFiles: 1,
-        addRemoveLinks: true,
-        previewsContainer: '.dropzone-previews',
-        headers: {
-          "X-CSRF-Token": $("meta[name=\"csrf-token\"]").attr("content")
-        },
-        init: function() {
-          this.on('addedfile', function(file) {
-            $('.dropzone-alerts').html('').hide();
-          });
-          this.on('success', function(header, response) {
-            window.location.href = response.filePath;
-          });
-          this.on('maxfilesexceeded', function(file) {
-            this.removeFile(file);
-          });
-          return this.on('sending', function(file, xhr, formData) {
-            formData.append('target_branch', form.find('.js-target-branch').val());
-            formData.append('create_merge_request', form.find('.js-create-merge-request').val());
-            formData.append('commit_message', form.find('.js-commit-message').val());
-          });
-        },
-        // Override behavior of adding error underneath preview
-        error: function(file, errorMessage) {
-          var stripped;
-          stripped = $("<div/>").html(errorMessage).text();
-          $('.dropzone-alerts').html('Error uploading file: \"' + stripped + '\"').show();
-          this.removeFile(file);
-        }
-      });
-      submitButton = form.find('#submit-all')[0];
-      submitButton.addEventListener('click', function(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        if (dropzone[0].dropzone.getQueuedFiles().length === 0) {
-          alert("Please select a file");
-        }
-        dropzone[0].dropzone.processQueue();
-        return false;
-      });
-    }
+/* eslint-disable func-names, object-shorthand, prefer-arrow-callback */
+/* global Dropzone */
 
-    return BlobFileDropzone;
+export default class BlobFileDropzone {
+  constructor(form, method) {
+    const formDropzone = form.find('.dropzone');
+    Dropzone.autoDiscover = false;
 
-  })();
+    const dropzone = formDropzone.dropzone({
+      autoDiscover: false,
+      autoProcessQueue: false,
+      url: form.attr('action'),
+      // Rails uses a hidden input field for PUT
+      // http://stackoverflow.com/questions/21056482/how-to-set-method-put-in-form-tag-in-rails
+      method: method,
+      clickable: true,
+      uploadMultiple: false,
+      paramName: 'file',
+      maxFilesize: gon.max_file_size || 10,
+      parallelUploads: 1,
+      maxFiles: 1,
+      addRemoveLinks: true,
+      previewsContainer: '.dropzone-previews',
+      headers: {
+        'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content'),
+      },
+      init: function () {
+        this.on('addedfile', function () {
+          $('.dropzone-alerts').html('').hide();
+        });
+        this.on('success', function (header, response) {
+          window.location.href = response.filePath;
+        });
+        this.on('maxfilesexceeded', function (file) {
+          this.removeFile(file);
+        });
+        this.on('sending', function (file, xhr, formData) {
+          formData.append('target_branch', form.find('input[name="target_branch"]').val());
+          formData.append('create_merge_request', form.find('.js-create-merge-request').val());
+          formData.append('commit_message', form.find('.js-commit-message').val());
+        });
+      },
+      // Override behavior of adding error underneath preview
+      error: function (file, errorMessage) {
+        const stripped = $('<div/>').html(errorMessage).text();
+        $('.dropzone-alerts').html(`Error uploading file: "${stripped}"`).show();
+        this.removeFile(file);
+      },
+    });
 
-}).call(this);
+    const submitButton = form.find('#submit-all')[0];
+    submitButton.addEventListener('click', function (e) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (dropzone[0].dropzone.getQueuedFiles().length === 0) {
+        // eslint-disable-next-line no-alert
+        alert('Please select a file');
+      }
+      dropzone[0].dropzone.processQueue();
+      return false;
+    });
+  }
+}
diff --git a/app/assets/javascripts/blob/blob_gitignore_selector.js b/app/assets/javascripts/blob/blob_gitignore_selector.js
deleted file mode 100644
index 344fe5dcd94..00000000000
--- a/app/assets/javascripts/blob/blob_gitignore_selector.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/* eslint-disable */
-
-/*= require blob/template_selector */
-
-(function() {
-  var extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
-    hasProp = {}.hasOwnProperty;
-
-  this.BlobGitignoreSelector = (function(superClass) {
-    extend(BlobGitignoreSelector, superClass);
-
-    function BlobGitignoreSelector() {
-      return BlobGitignoreSelector.__super__.constructor.apply(this, arguments);
-    }
-
-    BlobGitignoreSelector.prototype.requestFile = function(query) {
-      return Api.gitignoreText(query.name, this.requestFileSuccess.bind(this));
-    };
-
-    return BlobGitignoreSelector;
-
-  })(gl.TemplateSelector);
-
-}).call(this);
diff --git a/app/assets/javascripts/blob/blob_gitignore_selectors.js b/app/assets/javascripts/blob/blob_gitignore_selectors.js
deleted file mode 100644
index 9e992f7913c..00000000000
--- a/app/assets/javascripts/blob/blob_gitignore_selectors.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/* eslint-disable */
-(function() {
-  this.BlobGitignoreSelectors = (function() {
-    function BlobGitignoreSelectors(opts) {
-      var ref;
-      this.$dropdowns = (ref = opts.$dropdowns) != null ? ref : $('.js-gitignore-selector'), this.editor = opts.editor;
-      this.$dropdowns.each((function(_this) {
-        return function(i, dropdown) {
-          var $dropdown;
-          $dropdown = $(dropdown);
-          return new BlobGitignoreSelector({
-            pattern: /(.gitignore)/,
-            data: $dropdown.data('data'),
-            wrapper: $dropdown.closest('.js-gitignore-selector-wrap'),
-            dropdown: $dropdown,
-            editor: _this.editor
-          });
-        };
-      })(this));
-    }
-
-    return BlobGitignoreSelectors;
-
-  })();
-
-}).call(this);
diff --git a/app/assets/javascripts/blob/blob_license_selector.js b/app/assets/javascripts/blob/blob_license_selector.js
deleted file mode 100644
index 41a83a56146..00000000000
--- a/app/assets/javascripts/blob/blob_license_selector.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/* eslint-disable */
-
-/*= require blob/template_selector */
-
-(function() {
-  var extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
-    hasProp = {}.hasOwnProperty;
-
-  this.BlobLicenseSelector = (function(superClass) {
-    extend(BlobLicenseSelector, superClass);
-
-    function BlobLicenseSelector() {
-      return BlobLicenseSelector.__super__.constructor.apply(this, arguments);
-    }
-
-    BlobLicenseSelector.prototype.requestFile = function(query) {
-      var data;
-      data = {
-        project: this.dropdown.data('project'),
-        fullname: this.dropdown.data('fullname')
-      };
-      return Api.licenseText(query.id, data, this.requestFileSuccess.bind(this));
-    };
-
-    return BlobLicenseSelector;
-
-  })(gl.TemplateSelector);
-
-}).call(this);
diff --git a/app/assets/javascripts/blob/blob_license_selectors.js.es6 b/app/assets/javascripts/blob/blob_license_selectors.js.es6
deleted file mode 100644
index adeb8ba1318..00000000000
--- a/app/assets/javascripts/blob/blob_license_selectors.js.es6
+++ /dev/null
@@ -1,22 +0,0 @@
-/* eslint-disable */
-((global) => {
-  class BlobLicenseSelectors {
-    constructor({ $dropdowns, editor }) {
-      this.$dropdowns = $('.js-license-selector');
-      this.editor = editor;
-      this.$dropdowns.each((i, dropdown) => {
-        const $dropdown = $(dropdown);
-        return new BlobLicenseSelector({
-          editor,
-          pattern: /^(.+\/)?(licen[sc]e|copying)($|\.)/i,
-          data: $dropdown.data('data'),
-          wrapper: $dropdown.closest('.js-license-selector-wrap'),
-          dropdown: $dropdown,
-        });
-      });
-    }
-  }
-
-  global.BlobLicenseSelectors = BlobLicenseSelectors;
-
-})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/blob/blob_line_permalink_updater.js b/app/assets/javascripts/blob/blob_line_permalink_updater.js
new file mode 100644
index 00000000000..c8f68860fbd
--- /dev/null
+++ b/app/assets/javascripts/blob/blob_line_permalink_updater.js
@@ -0,0 +1,35 @@
+const lineNumberRe = /^L[0-9]+/;
+
+const updateLineNumbersOnBlobPermalinks = (linksToUpdate) => {
+  const hash = gl.utils.getLocationHash();
+  if (hash && lineNumberRe.test(hash)) {
+    const hashUrlString = `#${hash}`;
+
+    [].concat(Array.prototype.slice.call(linksToUpdate)).forEach((permalinkButton) => {
+      const baseHref = permalinkButton.getAttribute('data-original-href') || (() => {
+        const href = permalinkButton.getAttribute('href');
+        permalinkButton.setAttribute('data-original-href', href);
+        return href;
+      })();
+      permalinkButton.setAttribute('href', `${baseHref}${hashUrlString}`);
+    });
+  }
+};
+
+function BlobLinePermalinkUpdater(blobContentHolder, lineNumberSelector, elementsToUpdate) {
+  const updateBlameAndBlobPermalinkCb = () => {
+    // Wait for the hash to update from the LineHighlighter callback
+    setTimeout(() => {
+      updateLineNumbersOnBlobPermalinks(elementsToUpdate);
+    }, 0);
+  };
+
+  blobContentHolder.addEventListener('click', (e) => {
+    if (e.target.matches(lineNumberSelector)) {
+      updateBlameAndBlobPermalinkCb();
+    }
+  });
+  updateBlameAndBlobPermalinkCb();
+}
+
+export default BlobLinePermalinkUpdater;
diff --git a/app/assets/javascripts/blob/create_branch_dropdown.js b/app/assets/javascripts/blob/create_branch_dropdown.js
new file mode 100644
index 00000000000..95517f51b1c
--- /dev/null
+++ b/app/assets/javascripts/blob/create_branch_dropdown.js
@@ -0,0 +1,88 @@
+class CreateBranchDropdown {
+  constructor(el, targetBranchDropdown) {
+    this.targetBranchDropdown = targetBranchDropdown;
+    this.el = el;
+    this.dropdownBack = this.el.closest('.dropdown').querySelector('.dropdown-menu-back');
+    this.cancelButton = this.el.querySelector('.js-cancel-branch-btn');
+    this.newBranchField = this.el.querySelector('#new_branch_name');
+    this.newBranchCreateButton = this.el.querySelector('.js-new-branch-btn');
+
+    this.newBranchCreateButton.setAttribute('disabled', '');
+
+    this.addBindings();
+    this.cleanupWrapper = this.cleanup.bind(this);
+    document.addEventListener('beforeunload', this.cleanupWrapper);
+  }
+
+  cleanup() {
+    this.cleanBindings();
+    document.removeEventListener('beforeunload', this.cleanupWrapper);
+  }
+
+  cleanBindings() {
+    this.newBranchField.removeEventListener('keyup', this.enableBranchCreateButtonWrapper);
+    this.newBranchField.removeEventListener('change', this.enableBranchCreateButtonWrapper);
+    this.newBranchField.removeEventListener('keydown', this.handleNewBranchKeydownWrapper);
+    this.dropdownBack.removeEventListener('click', this.resetFormWrapper);
+    this.cancelButton.removeEventListener('click', this.handleCancelClickWrapper);
+    this.newBranchCreateButton.removeEventListener('click', this.createBranchWrapper);
+  }
+
+  addBindings() {
+    this.enableBranchCreateButtonWrapper = this.enableBranchCreateButton.bind(this);
+    this.handleNewBranchKeydownWrapper = this.handleNewBranchKeydown.bind(this);
+    this.resetFormWrapper = this.resetForm.bind(this);
+    this.handleCancelClickWrapper = this.handleCancelClick.bind(this);
+    this.createBranchWrapper = this.createBranch.bind(this);
+
+    this.newBranchField.addEventListener('keyup', this.enableBranchCreateButtonWrapper);
+    this.newBranchField.addEventListener('change', this.enableBranchCreateButtonWrapper);
+    this.newBranchField.addEventListener('keydown', this.handleNewBranchKeydownWrapper);
+    this.dropdownBack.addEventListener('click', this.resetFormWrapper);
+    this.cancelButton.addEventListener('click', this.handleCancelClickWrapper);
+    this.newBranchCreateButton.addEventListener('click', this.createBranchWrapper);
+  }
+
+  handleCancelClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    this.resetForm();
+    this.dropdownBack.click();
+  }
+
+  handleNewBranchKeydown(e) {
+    const keyCode = e.which;
+    const ENTER_KEYCODE = 13;
+    if (keyCode === ENTER_KEYCODE) {
+      this.createBranch(e);
+    }
+  }
+
+  enableBranchCreateButton() {
+    if (this.newBranchField.value !== '') {
+      this.newBranchCreateButton.removeAttribute('disabled');
+    } else {
+      this.newBranchCreateButton.setAttribute('disabled', '');
+    }
+  }
+
+  resetForm() {
+    this.newBranchField.value = '';
+    this.enableBranchCreateButtonWrapper();
+  }
+
+  createBranch(e) {
+    e.preventDefault();
+
+    if (this.newBranchCreateButton.getAttribute('disabled') === '') {
+      return;
+    }
+    const newBranchName = this.newBranchField.value;
+    this.targetBranchDropdown.setNewBranch(newBranchName);
+    this.resetForm();
+  }
+}
+
+window.gl = window.gl || {};
+gl.CreateBranchDropdown = CreateBranchDropdown;
diff --git a/app/assets/javascripts/blob/notebook/index.js b/app/assets/javascripts/blob/notebook/index.js
new file mode 100644
index 00000000000..9b8bfbfc8c0
--- /dev/null
+++ b/app/assets/javascripts/blob/notebook/index.js
@@ -0,0 +1,85 @@
+/* eslint-disable no-new */
+import Vue from 'vue';
+import VueResource from 'vue-resource';
+import NotebookLab from 'vendor/notebooklab';
+
+Vue.use(VueResource);
+Vue.use(NotebookLab);
+
+export default () => {
+  const el = document.getElementById('js-notebook-viewer');
+
+  new Vue({
+    el,
+    data() {
+      return {
+        error: false,
+        loadError: false,
+        loading: true,
+        json: {},
+      };
+    },
+    template: `
+      <div class="container-fluid md prepend-top-default append-bottom-default">
+        <div
+          class="text-center loading"
+          v-if="loading && !error">
+          <i
+            class="fa fa-spinner fa-spin"
+            aria-hidden="true"
+            aria-label="iPython notebook loading">
+          </i>
+        </div>
+        <notebook-lab
+          v-if="!loading && !error"
+          :notebook="json"
+          code-css-class="code white" />
+        <p
+          class="text-center"
+          v-if="error">
+          <span v-if="loadError">
+            An error occured whilst loading the file. Please try again later.
+          </span>
+          <span v-else>
+            An error occured whilst parsing the file.
+          </span>
+        </p>
+      </div>
+    `,
+    methods: {
+      loadFile() {
+        this.$http.get(el.dataset.endpoint)
+          .then((res) => {
+            this.json = res.json();
+            this.loading = false;
+          })
+          .catch((e) => {
+            if (e.status) {
+              this.loadError = true;
+            }
+
+            this.error = true;
+          });
+      },
+    },
+    mounted() {
+      if (gon.katex_css_url) {
+        const katexStyles = document.createElement('link');
+        katexStyles.setAttribute('rel', 'stylesheet');
+        katexStyles.setAttribute('href', gon.katex_css_url);
+        document.head.appendChild(katexStyles);
+      }
+
+      if (gon.katex_js_url) {
+        const katexScript = document.createElement('script');
+        katexScript.addEventListener('load', () => {
+          this.loadFile();
+        });
+        katexScript.setAttribute('src', gon.katex_js_url);
+        document.head.appendChild(katexScript);
+      } else {
+        this.loadFile();
+      }
+    },
+  });
+};
diff --git a/app/assets/javascripts/blob/notebook_viewer.js b/app/assets/javascripts/blob/notebook_viewer.js
new file mode 100644
index 00000000000..b7a0a195a92
--- /dev/null
+++ b/app/assets/javascripts/blob/notebook_viewer.js
@@ -0,0 +1,3 @@
+import renderNotebook from './notebook';
+
+document.addEventListener('DOMContentLoaded', renderNotebook);
diff --git a/app/assets/javascripts/blob/target_branch_dropdown.js b/app/assets/javascripts/blob/target_branch_dropdown.js
new file mode 100644
index 00000000000..216f069ef71
--- /dev/null
+++ b/app/assets/javascripts/blob/target_branch_dropdown.js
@@ -0,0 +1,152 @@
+/* eslint-disable class-methods-use-this */
+const SELECT_ITEM_MSG = 'Select';
+
+class TargetBranchDropDown {
+  constructor(dropdown) {
+    this.dropdown = dropdown;
+    this.$dropdown = $(dropdown);
+    this.fieldName = this.dropdown.getAttribute('data-field-name');
+    this.form = this.dropdown.closest('form');
+    this.createDropdown();
+  }
+
+  static bootstrap() {
+    const dropdowns = document.querySelectorAll('.js-project-branches-dropdown');
+    [].forEach.call(dropdowns, dropdown => new TargetBranchDropDown(dropdown));
+  }
+
+  createDropdown() {
+    const self = this;
+    this.$dropdown.glDropdown({
+      selectable: true,
+      filterable: true,
+      search: {
+        fields: ['title'],
+      },
+      data: (term, callback) => $.ajax({
+        url: self.dropdown.getAttribute('data-refs-url'),
+        data: {
+          ref: self.dropdown.getAttribute('data-ref'),
+          show_all: true,
+        },
+        dataType: 'json',
+      }).done(refs => callback(self.dropdownData(refs))),
+      toggleLabel(item, el) {
+        if (el.is('.is-active')) {
+          return item.text;
+        }
+        return SELECT_ITEM_MSG;
+      },
+      clicked(item, el, e) {
+        e.preventDefault();
+        self.onClick.call(self);
+      },
+      fieldName: self.fieldName,
+    });
+    return new gl.CreateBranchDropdown(this.form.querySelector('.dropdown-new-branch'), this);
+  }
+
+  onClick() {
+    this.enableSubmit();
+    this.$dropdown.trigger('change.branch');
+  }
+
+  enableSubmit() {
+    const submitBtn = this.form.querySelector('[type="submit"]');
+    if (this.branchInput && this.branchInput.value) {
+      submitBtn.removeAttribute('disabled');
+    } else {
+      submitBtn.setAttribute('disabled', '');
+    }
+  }
+
+  dropdownData(refs) {
+    const branchList = this.dropdownItems(refs);
+    this.cachedRefs = refs;
+    this.addDefaultBranch(branchList);
+    this.addNewBranch(branchList);
+    return { Branches: branchList };
+  }
+
+  dropdownItems(refs) {
+    return refs.map(this.dropdownItem);
+  }
+
+  dropdownItem(ref) {
+    return { id: ref, text: ref, title: ref };
+  }
+
+  addDefaultBranch(branchList) {
+    // when no branch is selected do nothing
+    if (!this.branchInput) {
+      return;
+    }
+
+    const branchInputVal = this.branchInput.value;
+    const currentBranchIndex = this.searchBranch(branchList, branchInputVal);
+
+    if (currentBranchIndex === -1) {
+      this.unshiftBranch(branchList, this.dropdownItem(branchInputVal));
+    }
+  }
+
+  addNewBranch(branchList) {
+    if (this.newBranch) {
+      this.unshiftBranch(branchList, this.newBranch);
+    }
+  }
+
+  searchBranch(branchList, branchName) {
+    return _.findIndex(branchList, el => branchName === el.id);
+  }
+
+  unshiftBranch(branchList, branch) {
+    const branchIndex = this.searchBranch(branchList, branch.id);
+
+    if (branchIndex === -1) {
+      branchList.unshift(branch);
+    }
+  }
+
+  setNewBranch(newBranchName) {
+    this.newBranch = this.dropdownItem(newBranchName);
+    this.refreshData();
+    this.selectBranch(this.searchBranch(this.glDropdown.fullData.Branches, newBranchName));
+  }
+
+  refreshData() {
+    this.glDropdown.fullData = this.dropdownData(this.cachedRefs);
+    this.clearFilter();
+  }
+
+  clearFilter() {
+    // apply an empty filter in order to refresh the data
+    this.glDropdown.filter.filter('');
+    this.dropdown.closest('.dropdown').querySelector('.dropdown-page-one .dropdown-input-field').value = '';
+  }
+
+  selectBranch(index) {
+    const branch = this.dropdown.closest('.dropdown').querySelectorAll('li a')[index];
+
+    if (!branch.classList.contains('is-active')) {
+      branch.click();
+    } else {
+      this.closeDropdown();
+    }
+  }
+
+  closeDropdown() {
+    this.dropdown.closest('.dropdown').querySelector('.dropdown-menu-close').click();
+  }
+
+  get branchInput() {
+    return this.form.querySelector(`input[name="${this.fieldName}"]`);
+  }
+
+  get glDropdown() {
+    return this.$dropdown.data('glDropdown');
+  }
+}
+
+window.gl = window.gl || {};
+gl.TargetBranchDropDown = TargetBranchDropDown;
diff --git a/app/assets/javascripts/blob/template_selector.js.es6 b/app/assets/javascripts/blob/template_selector.js.es6
deleted file mode 100644
index 5434a19bcec..00000000000
--- a/app/assets/javascripts/blob/template_selector.js.es6
+++ /dev/null
@@ -1,98 +0,0 @@
-/* eslint-disable */
-((global) => {
-    class TemplateSelector {
-      constructor({ dropdown, data, pattern, wrapper, editor, fileEndpoint, $input } = {}) {
-        this.onClick = this.onClick.bind(this);
-        this.dropdown = dropdown;
-        this.data = data;
-        this.pattern = pattern;
-        this.wrapper = wrapper;
-        this.editor = editor;
-        this.fileEndpoint = fileEndpoint;
-        this.$input = $input || $('#file_name');
-        this.dropdownIcon = $('.fa-chevron-down', this.dropdown);
-        this.buildDropdown();
-        this.bindEvents();
-        this.onFilenameUpdate();
-
-        this.autosizeUpdateEvent = document.createEvent('Event');
-        this.autosizeUpdateEvent.initEvent('autosize:update', true, false);
-      }
-
-      buildDropdown() {
-        return this.dropdown.glDropdown({
-          data: this.data,
-          filterable: true,
-          selectable: true,
-          toggleLabel: this.toggleLabel,
-          search: {
-            fields: ['name']
-          },
-          clicked: this.onClick,
-          text: function(item) {
-            return item.name;
-          }
-        });
-      }
-
-      bindEvents() {
-        return this.$input.on('keyup blur', (e) => this.onFilenameUpdate());
-      }
-
-      toggleLabel(item) {
-        return item.name;
-      }
-
-      onFilenameUpdate() {
-        var filenameMatches;
-        if (!this.$input.length) {
-          return;
-        }
-        filenameMatches = this.pattern.test(this.$input.val().trim());
-        if (!filenameMatches) {
-          this.wrapper.addClass('hidden');
-          return;
-        }
-        return this.wrapper.removeClass('hidden');
-      }
-
-      onClick(item, el, e) {
-        e.preventDefault();
-        return this.requestFile(item);
-      }
-
-      requestFile(item) {
-        // This `requestFile` method is an abstract method that should
-        // be added by all subclasses.
-      }
-
-      // To be implemented on the extending class
-      // e.g.
-      // Api.gitignoreText item.name, @requestFileSuccess.bind(@)
-      requestFileSuccess(file, { skipFocus } = {}) {
-        const oldValue = this.editor.getValue();
-        let newValue = file.content;
-
-        this.editor.setValue(newValue, 1);
-        if (!skipFocus) this.editor.focus();
-
-        if (this.editor instanceof jQuery) {
-          this.editor.get(0).dispatchEvent(this.autosizeUpdateEvent);
-        }
-      }
-
-      startLoadingSpinner() {
-        this.dropdownIcon
-          .addClass('fa-spinner fa-spin')
-          .removeClass('fa-chevron-down');
-      }
-
-      stopLoadingSpinner() {
-        this.dropdownIcon
-          .addClass('fa-chevron-down')
-          .removeClass('fa-spinner fa-spin');
-      }
-    }
-
-    global.TemplateSelector = TemplateSelector;
-  })(window.gl || ( window.gl = {}));
diff --git a/app/assets/javascripts/blob/template_selectors/blob_ci_yaml_selector.js b/app/assets/javascripts/blob/template_selectors/blob_ci_yaml_selector.js
new file mode 100644
index 00000000000..5a5954e7751
--- /dev/null
+++ b/app/assets/javascripts/blob/template_selectors/blob_ci_yaml_selector.js
@@ -0,0 +1,9 @@
+/* global Api */
+
+import TemplateSelector from './template_selector';
+
+export default class BlobCiYamlSelector extends TemplateSelector {
+  requestFile(query) {
+    return Api.gitlabCiYml(query.name, (file, config) => this.setEditorContent(file, config));
+  }
+}
diff --git a/app/assets/javascripts/blob/template_selectors/blob_ci_yaml_selectors.js b/app/assets/javascripts/blob/template_selectors/blob_ci_yaml_selectors.js
new file mode 100644
index 00000000000..7a4d6a42a03
--- /dev/null
+++ b/app/assets/javascripts/blob/template_selectors/blob_ci_yaml_selectors.js
@@ -0,0 +1,23 @@
+/* global Api */
+
+import BlobCiYamlSelector from './blob_ci_yaml_selector';
+
+export default class BlobCiYamlSelectors {
+  constructor({ editor, $dropdowns }) {
+    this.$dropdowns = $dropdowns || $('.js-gitlab-ci-yml-selector');
+    this.initSelectors(editor);
+  }
+
+  initSelectors(editor) {
+    this.$dropdowns.each((i, dropdown) => {
+      const $dropdown = $(dropdown);
+      return new BlobCiYamlSelector({
+        editor,
+        pattern: /(.gitlab-ci.yml)/,
+        data: $dropdown.data('data'),
+        wrapper: $dropdown.closest('.js-gitlab-ci-yml-selector-wrap'),
+        dropdown: $dropdown,
+      });
+    });
+  }
+}
diff --git a/app/assets/javascripts/blob/template_selectors/blob_dockerfile_selector.js b/app/assets/javascripts/blob/template_selectors/blob_dockerfile_selector.js
new file mode 100644
index 00000000000..19f8820a0cb
--- /dev/null
+++ b/app/assets/javascripts/blob/template_selectors/blob_dockerfile_selector.js
@@ -0,0 +1,9 @@
+/* global Api */
+
+import TemplateSelector from './template_selector';
+
+export default class BlobDockerfileSelector extends TemplateSelector {
+  requestFile(query) {
+    return Api.dockerfileYml(query.name, (file, config) => this.setEditorContent(file, config));
+  }
+}
diff --git a/app/assets/javascripts/blob/template_selectors/blob_dockerfile_selectors.js b/app/assets/javascripts/blob/template_selectors/blob_dockerfile_selectors.js
new file mode 100644
index 00000000000..da067035b43
--- /dev/null
+++ b/app/assets/javascripts/blob/template_selectors/blob_dockerfile_selectors.js
@@ -0,0 +1,23 @@
+import BlobDockerfileSelector from './blob_dockerfile_selector';
+
+export default class BlobDockerfileSelectors {
+  constructor({ editor, $dropdowns }) {
+    this.editor = editor;
+    this.$dropdowns = $dropdowns || $('.js-dockerfile-selector');
+    this.initSelectors();
+  }
+
+  initSelectors() {
+    const editor = this.editor;
+    this.$dropdowns.each((i, dropdown) => {
+      const $dropdown = $(dropdown);
+      return new BlobDockerfileSelector({
+        editor,
+        pattern: /(Dockerfile)/,
+        data: $dropdown.data('data'),
+        wrapper: $dropdown.closest('.js-dockerfile-selector-wrap'),
+        dropdown: $dropdown,
+      });
+    });
+  }
+}
diff --git a/app/assets/javascripts/blob/template_selectors/blob_gitignore_selector.js b/app/assets/javascripts/blob/template_selectors/blob_gitignore_selector.js
new file mode 100644
index 00000000000..0b6b02fc2b3
--- /dev/null
+++ b/app/assets/javascripts/blob/template_selectors/blob_gitignore_selector.js
@@ -0,0 +1,9 @@
+/* global Api */
+
+import TemplateSelector from './template_selector';
+
+export default class BlobGitignoreSelector extends TemplateSelector {
+  requestFile(query) {
+    return Api.gitignoreText(query.name, (file, config) => this.setEditorContent(file, config));
+  }
+}
diff --git a/app/assets/javascripts/blob/template_selectors/blob_gitignore_selectors.js b/app/assets/javascripts/blob/template_selectors/blob_gitignore_selectors.js
new file mode 100644
index 00000000000..dc485d97677
--- /dev/null
+++ b/app/assets/javascripts/blob/template_selectors/blob_gitignore_selectors.js
@@ -0,0 +1,23 @@
+import BlobGitignoreSelector from './blob_gitignore_selector';
+
+export default class BlobGitignoreSelectors {
+  constructor({ editor, $dropdowns }) {
+    this.$dropdowns = $dropdowns || $('.js-gitignore-selector');
+    this.editor = editor;
+    this.initSelectors();
+  }
+
+  initSelectors() {
+    this.$dropdowns.each((i, dropdown) => {
+      const $dropdown = $(dropdown);
+
+      return new BlobGitignoreSelector({
+        pattern: /(.gitignore)/,
+        data: $dropdown.data('data'),
+        wrapper: $dropdown.closest('.js-gitignore-selector-wrap'),
+        dropdown: $dropdown,
+        editor: this.editor,
+      });
+    });
+  }
+}
diff --git a/app/assets/javascripts/blob/template_selectors/blob_license_selector.js b/app/assets/javascripts/blob/template_selectors/blob_license_selector.js
new file mode 100644
index 00000000000..e9cb31cc2dc
--- /dev/null
+++ b/app/assets/javascripts/blob/template_selectors/blob_license_selector.js
@@ -0,0 +1,13 @@
+/* global Api */
+
+import TemplateSelector from './template_selector';
+
+export default class BlobLicenseSelector extends TemplateSelector {
+  requestFile(query) {
+    const data = {
+      project: this.dropdown.data('project'),
+      fullname: this.dropdown.data('fullname'),
+    };
+    return Api.licenseText(query.id, data, (file, config) => this.setEditorContent(file, config));
+  }
+}
diff --git a/app/assets/javascripts/blob/template_selectors/blob_license_selectors.js b/app/assets/javascripts/blob/template_selectors/blob_license_selectors.js
new file mode 100644
index 00000000000..a44f4f78b2d
--- /dev/null
+++ b/app/assets/javascripts/blob/template_selectors/blob_license_selectors.js
@@ -0,0 +1,24 @@
+/* eslint-disable no-unused-vars, no-param-reassign */
+
+import BlobLicenseSelector from './blob_license_selector';
+
+export default class BlobLicenseSelectors {
+  constructor({ $dropdowns, editor }) {
+    this.$dropdowns = $dropdowns || $('.js-license-selector');
+    this.initSelectors(editor);
+  }
+
+  initSelectors(editor) {
+    this.$dropdowns.each((i, dropdown) => {
+      const $dropdown = $(dropdown);
+
+      return new BlobLicenseSelector({
+        editor,
+        pattern: /^(.+\/)?(licen[sc]e|copying)($|\.)/i,
+        data: $dropdown.data('data'),
+        wrapper: $dropdown.closest('.js-license-selector-wrap'),
+        dropdown: $dropdown,
+      });
+    });
+  }
+}
diff --git a/app/assets/javascripts/blob/template_selectors/template_selector.js b/app/assets/javascripts/blob/template_selectors/template_selector.js
new file mode 100644
index 00000000000..d7c1c32efbd
--- /dev/null
+++ b/app/assets/javascripts/blob/template_selectors/template_selector.js
@@ -0,0 +1,92 @@
+/* eslint-disable class-methods-use-this, no-unused-vars */
+
+export default class TemplateSelector {
+  constructor({ dropdown, data, pattern, wrapper, editor, $input } = {}) {
+    this.pattern = pattern;
+    this.editor = editor;
+    this.dropdown = dropdown;
+    this.$dropdownContainer = wrapper;
+    this.$filenameInput = $input || $('#file_name');
+    this.$dropdownIcon = $('.fa-chevron-down', dropdown);
+
+    this.initDropdown(dropdown, data);
+    this.listenForFilenameInput();
+    this.renderMatchedDropdown();
+    this.initAutosizeUpdateEvent();
+  }
+
+  initDropdown(dropdown, data) {
+    return $(dropdown).glDropdown({
+      data,
+      filterable: true,
+      selectable: true,
+      toggleLabel: item => item.name,
+      search: {
+        fields: ['name'],
+      },
+      clicked: (item, el, e) => this.fetchFileTemplate(item, el, e),
+      text: item => item.name,
+    });
+  }
+
+  initAutosizeUpdateEvent() {
+    this.autosizeUpdateEvent = document.createEvent('Event');
+    this.autosizeUpdateEvent.initEvent('autosize:update', true, false);
+  }
+
+  listenForFilenameInput() {
+    return this.$filenameInput.on('keyup blur', e => this.renderMatchedDropdown(e));
+  }
+
+  renderMatchedDropdown() {
+    if (!this.$filenameInput.length) {
+      return null;
+    }
+
+    const filenameMatches = this.pattern.test(this.$filenameInput.val().trim());
+
+    if (!filenameMatches) {
+      return this.$dropdownContainer.addClass('hidden');
+    }
+    return this.$dropdownContainer.removeClass('hidden');
+  }
+
+  fetchFileTemplate(item, el, e) {
+    e.preventDefault();
+    return this.requestFile(item);
+  }
+
+  requestFile(item) {
+    // This `requestFile` method is an abstract method that should
+    // be added by all subclasses.
+  }
+
+  // To be implemented on the extending class
+  // e.g. Api.gitlabCiYml(query.name, file => this.setEditorContent(file));
+
+  setEditorContent(file, { skipFocus } = {}) {
+    if (!file) return;
+
+    const newValue = file.content;
+
+    this.editor.setValue(newValue, 1);
+
+    if (!skipFocus) this.editor.focus();
+
+    if (this.editor instanceof jQuery) {
+      this.editor.get(0).dispatchEvent(this.autosizeUpdateEvent);
+    }
+  }
+
+  startLoadingSpinner() {
+    this.$dropdownIcon
+      .addClass('fa-spinner fa-spin')
+      .removeClass('fa-chevron-down');
+  }
+
+  stopLoadingSpinner() {
+    this.$dropdownIcon
+      .addClass('fa-chevron-down')
+      .removeClass('fa-spinner fa-spin');
+  }
+}
diff --git a/app/assets/javascripts/blob_edit/blob_bundle.js b/app/assets/javascripts/blob_edit/blob_bundle.js
new file mode 100644
index 00000000000..c5deccf631e
--- /dev/null
+++ b/app/assets/javascripts/blob_edit/blob_bundle.js
@@ -0,0 +1,32 @@
+/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, no-var, quotes, vars-on-top, no-unused-vars, no-new, max-len */
+/* global EditBlob */
+/* global NewCommitForm */
+
+import EditBlob from './edit_blob';
+import BlobFileDropzone from '../blob/blob_file_dropzone';
+
+$(() => {
+  const editBlobForm = $('.js-edit-blob-form');
+  const uploadBlobForm = $('.js-upload-blob-form');
+
+  if (editBlobForm.length) {
+    const urlRoot = editBlobForm.data('relative-url-root');
+    const assetsPath = editBlobForm.data('assets-prefix');
+    const blobLanguage = editBlobForm.data('blob-language');
+
+    new EditBlob(`${urlRoot}${assetsPath}`, blobLanguage);
+    new NewCommitForm(editBlobForm);
+  }
+
+  if (uploadBlobForm.length) {
+    const method = uploadBlobForm.data('method');
+
+    new BlobFileDropzone(uploadBlobForm, method);
+    new NewCommitForm(uploadBlobForm);
+
+    window.gl.utils.disableButtonIfEmptyField(
+      uploadBlobForm.find('.js-commit-message'),
+      '.btn-upload-file',
+    );
+  }
+});
diff --git a/app/assets/javascripts/blob_edit/blob_edit_bundle.js b/app/assets/javascripts/blob_edit/blob_edit_bundle.js
deleted file mode 100644
index b801c10f168..00000000000
--- a/app/assets/javascripts/blob_edit/blob_edit_bundle.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/* eslint-disable */
-/*= require_tree . */
-
-(function() {
-  $(function() {
-    var url = $(".js-edit-blob-form").data("relative-url-root");
-    url += $(".js-edit-blob-form").data("assets-prefix");
-
-    var blob = new EditBlob(url, $('.js-edit-blob-form').data('blob-language'));
-    new NewCommitForm($('.js-edit-blob-form'));
-  });
-
-}).call(this);
diff --git a/app/assets/javascripts/blob_edit/edit_blob.js b/app/assets/javascripts/blob_edit/edit_blob.js
index 60840560dd3..d3560d5df3b 100644
--- a/app/assets/javascripts/blob_edit/edit_blob.js
+++ b/app/assets/javascripts/blob_edit/edit_blob.js
@@ -1,84 +1,99 @@
-/* eslint-disable */
-(function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
-
-  this.EditBlob = (function() {
-    function EditBlob(assets_path, ace_mode) {
-      if (ace_mode == null) {
-        ace_mode = null;
-      }
-      this.editModeLinkClickHandler = bind(this.editModeLinkClickHandler, this);
-      ace.config.set("modePath", assets_path + "/ace");
-      ace.config.loadModule("ace/ext/searchbox");
-      this.editor = ace.edit("editor");
-      this.editor.focus();
-      if (ace_mode) {
-        this.editor.getSession().setMode("ace/mode/" + ace_mode);
-      }
-      $('form').submit((function(_this) {
-        return function() {
-          return $("#file-content").val(_this.editor.getValue());
-        };
-      // Before a form submission, move the content from the Ace editor into the
-      // submitted textarea
-      })(this));
-      this.initModePanesAndLinks();
-      this.initSoftWrap();
-      new gl.BlobLicenseSelectors({
-        editor: this.editor
-      });
+/* global ace */
+
+import BlobLicenseSelectors from '../blob/template_selectors/blob_license_selectors';
+import BlobGitignoreSelectors from '../blob/template_selectors/blob_gitignore_selectors';
+import BlobCiYamlSelectors from '../blob/template_selectors/blob_ci_yaml_selectors';
+import BlobDockerfileSelectors from '../blob/template_selectors/blob_dockerfile_selectors';
+
+export default class EditBlob {
+  constructor(assetsPath, aceMode) {
+    this.configureAceEditor(aceMode, assetsPath);
+    this.prepFileContentForSubmit();
+    this.initModePanesAndLinks();
+    this.initSoftWrap();
+    this.initFileSelectors();
+  }
+
+  configureAceEditor(aceMode, assetsPath) {
+    ace.config.set('modePath', `${assetsPath}/ace`);
+    ace.config.loadModule('ace/ext/searchbox');
+
+    this.editor = ace.edit('editor');
+    this.editor.focus();
+
+    if (aceMode) {
+      this.editor.getSession().setMode(`ace/mode/${aceMode}`);
+    }
+  }
+
+  prepFileContentForSubmit() {
+    $('form').submit(() => {
+      $('#file-content').val(this.editor.getValue());
+    });
+  }
+
+  initFileSelectors() {
+    this.blobTemplateSelectors = [
+      new BlobLicenseSelectors({
+        editor: this.editor,
+      }),
       new BlobGitignoreSelectors({
-        editor: this.editor
-      });
-      new gl.BlobCiYamlSelectors({
-        editor: this.editor
+        editor: this.editor,
+      }),
+      new BlobCiYamlSelectors({
+        editor: this.editor,
+      }),
+      new BlobDockerfileSelectors({
+        editor: this.editor,
+      }),
+    ];
+  }
+
+  initModePanesAndLinks() {
+    this.$editModePanes = $('.js-edit-mode-pane');
+    this.$editModeLinks = $('.js-edit-mode a');
+    this.$editModeLinks.on('click', e => this.editModeLinkClickHandler(e));
+  }
+
+  editModeLinkClickHandler(e) {
+    e.preventDefault();
+
+    const currentLink = $(e.target);
+    const paneId = currentLink.attr('href');
+    const currentPane = this.$editModePanes.filter(paneId);
+
+    this.$editModeLinks.parent().removeClass('active hover');
+
+    currentLink.parent().addClass('active hover');
+
+    this.$editModePanes.hide();
+
+    currentPane.fadeIn(200);
+
+    if (paneId === '#preview') {
+      this.$toggleButton.hide();
+      return $.post(currentLink.data('preview-url'), {
+        content: this.editor.getValue(),
+      }, (response) => {
+        currentPane.empty().append(response);
+        return currentPane.renderGFM();
       });
     }
 
-    EditBlob.prototype.initModePanesAndLinks = function() {
-      this.$editModePanes = $(".js-edit-mode-pane");
-      this.$editModeLinks = $(".js-edit-mode a");
-      return this.$editModeLinks.click(this.editModeLinkClickHandler);
-    };
-
-    EditBlob.prototype.editModeLinkClickHandler = function(event) {
-      var currentLink, currentPane, paneId;
-      event.preventDefault();
-      currentLink = $(event.target);
-      paneId = currentLink.attr("href");
-      currentPane = this.$editModePanes.filter(paneId);
-      this.$editModeLinks.parent().removeClass("active hover");
-      currentLink.parent().addClass("active hover");
-      this.$editModePanes.hide();
-      currentPane.fadeIn(200);
-      if (paneId === "#preview") {
-        this.$toggleButton.hide();
-        return $.post(currentLink.data("preview-url"), {
-          content: this.editor.getValue()
-        }, function(response) {
-          currentPane.empty().append(response);
-          return currentPane.syntaxHighlight();
-        });
-      } else {
-        this.$toggleButton.show();
-        return this.editor.focus();
-      }
-    };
-
-    EditBlob.prototype.initSoftWrap = function() {
-      this.isSoftWrapped = false;
-      this.$toggleButton = $('.soft-wrap-toggle');
-      this.$toggleButton.on('click', this.toggleSoftWrap.bind(this));
-    };
-
-    EditBlob.prototype.toggleSoftWrap = function(e) {
-      this.isSoftWrapped = !this.isSoftWrapped;
-      this.$toggleButton.toggleClass('soft-wrap-active', this.isSoftWrapped);
-      this.editor.getSession().setUseWrapMode(this.isSoftWrapped);
-    };
-
-    return EditBlob;
-
-  })();
-
-}).call(this);
+    this.$toggleButton.show();
+
+    return this.editor.focus();
+  }
+
+  initSoftWrap() {
+    this.isSoftWrapped = false;
+    this.$toggleButton = $('.soft-wrap-toggle');
+    this.$toggleButton.on('click', () => this.toggleSoftWrap());
+  }
+
+  toggleSoftWrap() {
+    this.isSoftWrapped = !this.isSoftWrapped;
+    this.$toggleButton.toggleClass('soft-wrap-active', this.isSoftWrapped);
+    this.editor.getSession().setUseWrapMode(this.isSoftWrapped);
+  }
+}
diff --git a/app/assets/javascripts/boards/boards_bundle.js b/app/assets/javascripts/boards/boards_bundle.js
new file mode 100644
index 00000000000..e057ac8df02
--- /dev/null
+++ b/app/assets/javascripts/boards/boards_bundle.js
@@ -0,0 +1,168 @@
+/* eslint-disable one-var, quote-props, comma-dangle, space-before-function-paren */
+/* global BoardService */
+
+import Vue from 'vue';
+import VueResource from 'vue-resource';
+import FilteredSearchBoards from './filtered_search_boards';
+import eventHub from './eventhub';
+
+require('./models/issue');
+require('./models/label');
+require('./models/list');
+require('./models/milestone');
+require('./models/user');
+require('./stores/boards_store');
+require('./stores/modal_store');
+require('./services/board_service');
+require('./mixins/modal_mixins');
+require('./mixins/sortable_default_options');
+require('./filters/due_date_filters');
+require('./components/board');
+require('./components/board_sidebar');
+require('./components/new_list_dropdown');
+require('./components/modal/index');
+require('../vue_shared/vue_resource_interceptor');
+
+Vue.use(VueResource);
+
+$(() => {
+  const $boardApp = document.getElementById('board-app');
+  const Store = gl.issueBoards.BoardsStore;
+  const ModalStore = gl.issueBoards.ModalStore;
+
+  window.gl = window.gl || {};
+
+  if (gl.IssueBoardsApp) {
+    gl.IssueBoardsApp.$destroy(true);
+  }
+
+  Store.create();
+
+  gl.IssueBoardsApp = new Vue({
+    el: $boardApp,
+    components: {
+      'board': gl.issueBoards.Board,
+      'board-sidebar': gl.issueBoards.BoardSidebar,
+      'board-add-issues-modal': gl.issueBoards.IssuesModal,
+    },
+    data: {
+      state: Store.state,
+      loading: true,
+      endpoint: $boardApp.dataset.endpoint,
+      boardId: $boardApp.dataset.boardId,
+      disabled: $boardApp.dataset.disabled === 'true',
+      issueLinkBase: $boardApp.dataset.issueLinkBase,
+      rootPath: $boardApp.dataset.rootPath,
+      bulkUpdatePath: $boardApp.dataset.bulkUpdatePath,
+      detailIssue: Store.detail
+    },
+    computed: {
+      detailIssueVisible () {
+        return Object.keys(this.detailIssue.issue).length;
+      },
+    },
+    created () {
+      gl.boardService = new BoardService(this.endpoint, this.bulkUpdatePath, this.boardId);
+
+      this.filterManager = new FilteredSearchBoards(Store.filter, true);
+
+      // Listen for updateTokens event
+      eventHub.$on('updateTokens', this.updateTokens);
+    },
+    beforeDestroy() {
+      eventHub.$off('updateTokens', this.updateTokens);
+    },
+    mounted () {
+      Store.disabled = this.disabled;
+      gl.boardService.all()
+        .then((resp) => {
+          resp.json().forEach((board) => {
+            const list = Store.addList(board);
+
+            if (list.type === 'closed') {
+              list.position = Infinity;
+            }
+          });
+
+          this.state.lists = _.sortBy(this.state.lists, 'position');
+
+          Store.addBlankState();
+          this.loading = false;
+        });
+    },
+    methods: {
+      updateTokens() {
+        this.filterManager.updateTokens();
+      }
+    },
+  });
+
+  gl.IssueBoardsSearch = new Vue({
+    el: document.getElementById('js-add-list'),
+    data: {
+      filters: Store.state.filters
+    },
+    mounted () {
+      gl.issueBoards.newListDropdownInit();
+    }
+  });
+
+  gl.IssueBoardsModalAddBtn = new Vue({
+    mixins: [gl.issueBoards.ModalMixins],
+    el: document.getElementById('js-add-issues-btn'),
+    data: {
+      modal: ModalStore.store,
+      store: Store.state,
+    },
+    watch: {
+      disabled() {
+        this.updateTooltip();
+      },
+    },
+    computed: {
+      disabled() {
+        return !this.store.lists.filter(list => list.type !== 'blank' && list.type !== 'done').length;
+      },
+      tooltipTitle() {
+        if (this.disabled) {
+          return 'Please add a list to your board first';
+        }
+
+        return '';
+      },
+    },
+    methods: {
+      updateTooltip() {
+        const $tooltip = $(this.$el);
+
+        this.$nextTick(() => {
+          if (this.disabled) {
+            $tooltip.tooltip();
+          } else {
+            $tooltip.tooltip('destroy');
+          }
+        });
+      },
+      openModal() {
+        if (!this.disabled) {
+          this.toggleModal(true);
+        }
+      },
+    },
+    mounted() {
+      this.updateTooltip();
+    },
+    template: `
+      <button
+        class="btn btn-create pull-right prepend-left-10"
+        type="button"
+        data-placement="bottom"
+        :class="{ 'disabled': disabled }"
+        :title="tooltipTitle"
+        :aria-disabled="disabled"
+        @click="openModal">
+        Add issues
+      </button>
+    `,
+  });
+});
diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6
deleted file mode 100644
index efb22d38513..00000000000
--- a/app/assets/javascripts/boards/boards_bundle.js.es6
+++ /dev/null
@@ -1,75 +0,0 @@
-/* eslint-disable */
-//= require vue
-//= require vue-resource
-//= require Sortable
-//= require_tree ./models
-//= require_tree ./stores
-//= require_tree ./services
-//= require_tree ./mixins
-//= require_tree ./filters
-//= require ./components/board
-//= require ./components/board_sidebar
-//= require ./components/new_list_dropdown
-//= require ./vue_resource_interceptor
-
-$(() => {
-  const $boardApp = document.getElementById('board-app'),
-        Store = gl.issueBoards.BoardsStore;
-
-  window.gl = window.gl || {};
-
-  if (gl.IssueBoardsApp) {
-    gl.IssueBoardsApp.$destroy(true);
-  }
-
-  gl.IssueBoardsApp = new Vue({
-    el: $boardApp,
-    components: {
-      'board': gl.issueBoards.Board,
-      'board-sidebar': gl.issueBoards.BoardSidebar
-    },
-    data: {
-      state: Store.state,
-      loading: true,
-      endpoint: $boardApp.dataset.endpoint,
-      boardId: $boardApp.dataset.boardId,
-      disabled: $boardApp.dataset.disabled === 'true',
-      issueLinkBase: $boardApp.dataset.issueLinkBase,
-      detailIssue: Store.detail
-    },
-    init: Store.create.bind(Store),
-    computed: {
-      detailIssueVisible () {
-        return Object.keys(this.detailIssue.issue).length;
-      }
-    },
-    created () {
-      gl.boardService = new BoardService(this.endpoint, this.boardId);
-    },
-    ready () {
-      Store.disabled = this.disabled;
-      gl.boardService.all()
-        .then((resp) => {
-          resp.json().forEach((board) => {
-            const list = Store.addList(board);
-
-            if (list.type === 'done') {
-              list.position = Infinity;
-            } else if (list.type === 'backlog') {
-              list.position = -1;
-            }
-          });
-
-          Store.addBlankState();
-          this.loading = false;
-        });
-    }
-  });
-
-  gl.IssueBoardsSearch = new Vue({
-    el: '#js-boards-seach',
-    data: {
-      filters: Store.state.filters
-    }
-  });
-});
diff --git a/app/assets/javascripts/boards/components/board.js b/app/assets/javascripts/boards/components/board.js
new file mode 100644
index 00000000000..35b3205cca7
--- /dev/null
+++ b/app/assets/javascripts/boards/components/board.js
@@ -0,0 +1,106 @@
+/* eslint-disable comma-dangle, space-before-function-paren, one-var */
+/* global Sortable */
+
+import Vue from 'vue';
+import boardBlankState from './board_blank_state';
+
+require('./board_delete');
+require('./board_list');
+
+(() => {
+  const Store = gl.issueBoards.BoardsStore;
+
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
+  gl.issueBoards.Board = Vue.extend({
+    template: '#js-board-template',
+    components: {
+      'board-list': gl.issueBoards.BoardList,
+      'board-delete': gl.issueBoards.BoardDelete,
+      boardBlankState,
+    },
+    props: {
+      list: Object,
+      disabled: Boolean,
+      issueLinkBase: String,
+      rootPath: String,
+    },
+    data () {
+      return {
+        detailIssue: Store.detail,
+        filter: Store.filter,
+      };
+    },
+    watch: {
+      filter: {
+        handler() {
+          this.list.page = 1;
+          this.list.getIssues(true);
+        },
+        deep: true,
+      },
+      detailIssue: {
+        handler () {
+          if (!Object.keys(this.detailIssue.issue).length) return;
+
+          const issue = this.list.findIssue(this.detailIssue.issue.id);
+
+          if (issue) {
+            const offsetLeft = this.$el.offsetLeft;
+            const boardsList = document.querySelectorAll('.boards-list')[0];
+            const left = boardsList.scrollLeft - offsetLeft;
+            let right = (offsetLeft + this.$el.offsetWidth);
+
+            if (window.innerWidth > 768 && boardsList.classList.contains('is-compact')) {
+              // -290 here because width of boardsList is animating so therefore
+              // getting the width here is incorrect
+              // 290 is the width of the sidebar
+              right -= (boardsList.offsetWidth - 290);
+            } else {
+              right -= boardsList.offsetWidth;
+            }
+
+            if (right - boardsList.scrollLeft > 0) {
+              $(boardsList).animate({
+                scrollLeft: right
+              }, this.sortableOptions.animation);
+            } else if (left > 0) {
+              $(boardsList).animate({
+                scrollLeft: offsetLeft
+              }, this.sortableOptions.animation);
+            }
+          }
+        },
+        deep: true
+      }
+    },
+    methods: {
+      showNewIssueForm() {
+        this.$refs['board-list'].showIssueForm = !this.$refs['board-list'].showIssueForm;
+      }
+    },
+    mounted () {
+      this.sortableOptions = gl.issueBoards.getBoardSortableDefaultOptions({
+        disabled: this.disabled,
+        group: 'boards',
+        draggable: '.is-draggable',
+        handle: '.js-board-handle',
+        onEnd: (e) => {
+          gl.issueBoards.onEnd();
+
+          if (e.newIndex !== undefined && e.oldIndex !== e.newIndex) {
+            const order = this.sortable.toArray();
+            const list = Store.findList('id', parseInt(e.item.dataset.id, 10));
+
+            this.$nextTick(() => {
+              Store.moveList(list, order);
+            });
+          }
+        }
+      });
+
+      this.sortable = Sortable.create(this.$el.parentNode, this.sortableOptions);
+    },
+  });
+})();
diff --git a/app/assets/javascripts/boards/components/board.js.es6 b/app/assets/javascripts/boards/components/board.js.es6
deleted file mode 100644
index 0e03d43872b..00000000000
--- a/app/assets/javascripts/boards/components/board.js.es6
+++ /dev/null
@@ -1,94 +0,0 @@
-/* eslint-disable */
-//= require ./board_blank_state
-//= require ./board_delete
-//= require ./board_list
-
-(() => {
-  const Store = gl.issueBoards.BoardsStore;
-
-  window.gl = window.gl || {};
-  window.gl.issueBoards = window.gl.issueBoards || {};
-
-  gl.issueBoards.Board = Vue.extend({
-    components: {
-      'board-list': gl.issueBoards.BoardList,
-      'board-delete': gl.issueBoards.BoardDelete,
-      'board-blank-state': gl.issueBoards.BoardBlankState
-    },
-    props: {
-      list: Object,
-      disabled: Boolean,
-      issueLinkBase: String
-    },
-    data () {
-      return {
-        detailIssue: Store.detail,
-        filters: Store.state.filters,
-        showIssueForm: false
-      };
-    },
-    watch: {
-      filters: {
-        handler () {
-          this.list.page = 1;
-          this.list.getIssues(true);
-        },
-        deep: true
-      },
-      detailIssue: {
-        handler () {
-          if (!Object.keys(this.detailIssue.issue).length) return;
-
-          const issue = this.list.findIssue(this.detailIssue.issue.id);
-
-          if (issue) {
-            const boardsList = document.querySelectorAll('.boards-list')[0];
-            const right = (this.$el.offsetLeft + this.$el.offsetWidth) - boardsList.offsetWidth;
-            const left = boardsList.scrollLeft - this.$el.offsetLeft;
-
-            if (right - boardsList.scrollLeft > 0) {
-              boardsList.scrollLeft = right;
-            } else if (left > 0) {
-              boardsList.scrollLeft = this.$el.offsetLeft;
-            }
-          }
-        },
-        deep: true
-      }
-    },
-    methods: {
-      showNewIssueForm() {
-        this.showIssueForm = !this.showIssueForm;
-      }
-    },
-    ready () {
-      const options = gl.issueBoards.getBoardSortableDefaultOptions({
-        disabled: this.disabled,
-        group: 'boards',
-        draggable: '.is-draggable',
-        handle: '.js-board-handle',
-        onEnd: (e) => {
-          gl.issueBoards.onEnd();
-
-          if (e.newIndex !== undefined && e.oldIndex !== e.newIndex) {
-            const order = this.sortable.toArray(),
-                  $board = this.$parent.$refs.board[e.oldIndex + 1],
-                  list = $board.list;
-
-            $board.$destroy(true);
-
-            this.$nextTick(() => {
-              Store.state.lists.splice(e.newIndex, 0, list);
-              Store.moveList(list, order);
-            });
-          }
-        }
-      });
-
-      this.sortable = Sortable.create(this.$el.parentNode, options);
-    },
-    beforeDestroy () {
-      Store.state.lists.$remove(this.list);
-    }
-  });
-})();
diff --git a/app/assets/javascripts/boards/components/board_blank_state.js b/app/assets/javascripts/boards/components/board_blank_state.js
new file mode 100644
index 00000000000..3fc68457961
--- /dev/null
+++ b/app/assets/javascripts/boards/components/board_blank_state.js
@@ -0,0 +1,86 @@
+/* global ListLabel */
+
+import Cookies from 'js-cookie';
+
+const Store = gl.issueBoards.BoardsStore;
+
+export default {
+  template: `
+    <div class="board-blank-state">
+      <p>
+        Add the following default lists to your Issue Board with one click:
+      </p>
+      <ul class="board-blank-state-list">
+        <li v-for="label in predefinedLabels">
+          <span
+            class="label-color"
+            :style="{ backgroundColor: label.color }">
+          </span>
+          {{ label.title }}
+        </li>
+      </ul>
+      <p>
+        Starting out with the default set of lists will get you right on the way to making the most of your board.
+      </p>
+      <button
+        class="btn btn-create btn-inverted btn-block"
+        type="button"
+        @click.stop="addDefaultLists">
+        Add default lists
+      </button>
+      <button
+        class="btn btn-default btn-block"
+        type="button"
+        @click.stop="clearBlankState">
+        Nevermind, I'll use my own
+      </button>
+    </div>
+  `,
+  data() {
+    return {
+      predefinedLabels: [
+        new ListLabel({ title: 'To Do', color: '#F0AD4E' }),
+        new ListLabel({ title: 'Doing', color: '#5CB85C' }),
+      ],
+    };
+  },
+  methods: {
+    addDefaultLists() {
+      this.clearBlankState();
+
+      this.predefinedLabels.forEach((label, i) => {
+        Store.addList({
+          title: label.title,
+          position: i,
+          list_type: 'label',
+          label: {
+            title: label.title,
+            color: label.color,
+          },
+        });
+      });
+
+      Store.state.lists = _.sortBy(Store.state.lists, 'position');
+
+      // Save the labels
+      gl.boardService.generateDefaultLists()
+        .then((resp) => {
+          resp.json().forEach((listObj) => {
+            const list = Store.findList('title', listObj.title);
+
+            list.id = listObj.id;
+            list.label.id = listObj.label.id;
+            list.getIssues();
+          });
+        })
+        .catch(() => {
+          Store.removeList(undefined, 'label');
+          Cookies.remove('issue_board_welcome_hidden', {
+            path: '',
+          });
+          Store.addBlankState();
+        });
+    },
+    clearBlankState: Store.removeBlankState.bind(Store),
+  },
+};
diff --git a/app/assets/javascripts/boards/components/board_blank_state.js.es6 b/app/assets/javascripts/boards/components/board_blank_state.js.es6
deleted file mode 100644
index 885553690d3..00000000000
--- a/app/assets/javascripts/boards/components/board_blank_state.js.es6
+++ /dev/null
@@ -1,48 +0,0 @@
-/* eslint-disable */
-(() => {
-  const Store = gl.issueBoards.BoardsStore;
-
-  window.gl = window.gl || {};
-  window.gl.issueBoards = window.gl.issueBoards || {};
-
-  gl.issueBoards.BoardBlankState = Vue.extend({
-    data () {
-      return {
-        predefinedLabels: [
-          new ListLabel({ title: 'To Do', color: '#F0AD4E' }),
-          new ListLabel({ title: 'Doing', color: '#5CB85C' })
-        ]
-      }
-    },
-    methods: {
-      addDefaultLists () {
-        this.clearBlankState();
-
-        this.predefinedLabels.forEach((label, i) => {
-          Store.addList({
-            title: label.title,
-            position: i,
-            list_type: 'label',
-            label: {
-              title: label.title,
-              color: label.color
-            }
-          });
-        });
-
-        // Save the labels
-        gl.boardService.generateDefaultLists()
-          .then((resp) => {
-            resp.json().forEach((listObj) => {
-              const list = Store.findList('title', listObj.title);
-
-              list.id = listObj.id;
-              list.label.id = listObj.label.id;
-              list.getIssues();
-            });
-          });
-      },
-      clearBlankState: Store.removeBlankState.bind(Store)
-    }
-  });
-})();
diff --git a/app/assets/javascripts/boards/components/board_card.js b/app/assets/javascripts/boards/components/board_card.js
new file mode 100644
index 00000000000..f591134c548
--- /dev/null
+++ b/app/assets/javascripts/boards/components/board_card.js
@@ -0,0 +1,67 @@
+require('./issue_card_inner');
+
+const Store = gl.issueBoards.BoardsStore;
+
+export default {
+  name: 'BoardsIssueCard',
+  template: `
+    <li class="card"
+      :class="{ 'user-can-drag': !disabled && issue.id, 'is-disabled': disabled || !issue.id, 'is-active': issueDetailVisible }"
+      :index="index"
+      :data-issue-id="issue.id"
+      @mousedown="mouseDown"
+      @mousemove="mouseMove"
+      @mouseup="showIssue($event)">
+      <issue-card-inner
+        :list="list"
+        :issue="issue"
+        :issue-link-base="issueLinkBase"
+        :root-path="rootPath"
+        :update-filters="true" />
+    </li>
+  `,
+  components: {
+    'issue-card-inner': gl.issueBoards.IssueCardInner,
+  },
+  props: {
+    list: Object,
+    issue: Object,
+    issueLinkBase: String,
+    disabled: Boolean,
+    index: Number,
+    rootPath: String,
+  },
+  data() {
+    return {
+      showDetail: false,
+      detailIssue: Store.detail,
+    };
+  },
+  computed: {
+    issueDetailVisible() {
+      return this.detailIssue.issue && this.detailIssue.issue.id === this.issue.id;
+    },
+  },
+  methods: {
+    mouseDown() {
+      this.showDetail = true;
+    },
+    mouseMove() {
+      this.showDetail = false;
+    },
+    showIssue(e) {
+      if (e.target.classList.contains('js-no-trigger')) return;
+
+      if (this.showDetail) {
+        this.showDetail = false;
+
+        if (Store.detail.issue && Store.detail.issue.id === this.issue.id) {
+          Store.detail.issue = {};
+        } else {
+          Store.detail.issue = this.issue;
+          Store.detail.list = this.list;
+        }
+      }
+    },
+  },
+};
diff --git a/app/assets/javascripts/boards/components/board_card.js.es6 b/app/assets/javascripts/boards/components/board_card.js.es6
deleted file mode 100644
index 2f6c03e3538..00000000000
--- a/app/assets/javascripts/boards/components/board_card.js.es6
+++ /dev/null
@@ -1,78 +0,0 @@
-/* eslint-disable */
-(() => {
-  const Store = gl.issueBoards.BoardsStore;
-
-  window.gl = window.gl || {};
-  window.gl.issueBoards = window.gl.issueBoards || {};
-
-  gl.issueBoards.BoardCard = Vue.extend({
-    props: {
-      list: Object,
-      issue: Object,
-      issueLinkBase: String,
-      disabled: Boolean,
-      index: Number
-    },
-    data () {
-      return {
-        showDetail: false,
-        detailIssue: Store.detail
-      };
-    },
-    computed: {
-      issueDetailVisible () {
-        return this.detailIssue.issue && this.detailIssue.issue.id === this.issue.id;
-      }
-    },
-    methods: {
-      filterByLabel (label, e) {
-        let labelToggleText = label.title;
-        const labelIndex = Store.state.filters['label_name'].indexOf(label.title);
-        $(e.target).tooltip('hide');
-
-        if (labelIndex === -1) {
-          Store.state.filters['label_name'].push(label.title);
-          $('.labels-filter').prepend(`<input type="hidden" name="label_name[]" value="${label.title}" />`);
-        } else {
-          Store.state.filters['label_name'].splice(labelIndex, 1);
-          labelToggleText = Store.state.filters['label_name'][0];
-          $(`.labels-filter input[name="label_name[]"][value="${label.title}"]`).remove();
-        }
-
-        const selectedLabels = Store.state.filters['label_name'];
-        if (selectedLabels.length === 0) {
-          labelToggleText = 'Label';
-        } else if (selectedLabels.length > 1) {
-          labelToggleText = `${selectedLabels[0]} + ${selectedLabels.length - 1} more`;
-        }
-
-        $('.labels-filter .dropdown-toggle-text').text(labelToggleText);
-
-        Store.updateFiltersUrl();
-      },
-      mouseDown () {
-        this.showDetail = true;
-      },
-      mouseMove () {
-        if (this.showDetail) {
-          this.showDetail = false;
-        }
-      },
-      showIssue (e) {
-        const targetTagName = e.target.tagName.toLowerCase();
-
-        if (targetTagName === 'a' || targetTagName === 'button') return;
-
-        if (this.showDetail) {
-          this.showDetail = false;
-
-          if (Store.detail.issue && Store.detail.issue.id === this.issue.id) {
-            Store.detail.issue = {};
-          } else {
-            Store.detail.issue = this.issue;
-          }
-        }
-      }
-    }
-  });
-})();
diff --git a/app/assets/javascripts/boards/components/board_delete.js b/app/assets/javascripts/boards/components/board_delete.js
new file mode 100644
index 00000000000..af621cfd57f
--- /dev/null
+++ b/app/assets/javascripts/boards/components/board_delete.js
@@ -0,0 +1,23 @@
+/* eslint-disable comma-dangle, space-before-function-paren, no-alert */
+
+import Vue from 'vue';
+
+(() => {
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
+  gl.issueBoards.BoardDelete = Vue.extend({
+    props: {
+      list: Object
+    },
+    methods: {
+      deleteBoard () {
+        $(this.$el).tooltip('hide');
+
+        if (confirm('Are you sure you want to delete this list?')) {
+          this.list.destroy();
+        }
+      }
+    }
+  });
+})();
diff --git a/app/assets/javascripts/boards/components/board_delete.js.es6 b/app/assets/javascripts/boards/components/board_delete.js.es6
deleted file mode 100644
index c45e1926c5c..00000000000
--- a/app/assets/javascripts/boards/components/board_delete.js.es6
+++ /dev/null
@@ -1,20 +0,0 @@
-/* eslint-disable */
-(() => {
-  window.gl = window.gl || {};
-  window.gl.issueBoards = window.gl.issueBoards || {};
-
-  gl.issueBoards.BoardDelete = Vue.extend({
-    props: {
-      list: Object
-    },
-    methods: {
-      deleteBoard () {
-        $(this.$el).tooltip('hide');
-
-        if (confirm('Are you sure you want to delete this list?')) {
-          this.list.destroy();
-        }
-      }
-    }
-  });
-})();
diff --git a/app/assets/javascripts/boards/components/board_list.js b/app/assets/javascripts/boards/components/board_list.js
new file mode 100644
index 00000000000..86e6c26e570
--- /dev/null
+++ b/app/assets/javascripts/boards/components/board_list.js
@@ -0,0 +1,131 @@
+/* eslint-disable comma-dangle, space-before-function-paren, max-len */
+/* global Sortable */
+
+import Vue from 'vue';
+import boardNewIssue from './board_new_issue';
+import boardCard from './board_card';
+
+(() => {
+  const Store = gl.issueBoards.BoardsStore;
+
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
+  gl.issueBoards.BoardList = Vue.extend({
+    template: '#js-board-list-template',
+    components: {
+      boardCard,
+      boardNewIssue,
+    },
+    props: {
+      disabled: Boolean,
+      list: Object,
+      issues: Array,
+      loading: Boolean,
+      issueLinkBase: String,
+      rootPath: String,
+    },
+    data () {
+      return {
+        scrollOffset: 250,
+        filters: Store.state.filters,
+        showCount: false,
+        showIssueForm: false
+      };
+    },
+    watch: {
+      filters: {
+        handler () {
+          this.list.loadingMore = false;
+          this.$refs.list.scrollTop = 0;
+        },
+        deep: true
+      },
+      issues () {
+        this.$nextTick(() => {
+          if (this.scrollHeight() <= this.listHeight() && this.list.issuesSize > this.list.issues.length) {
+            this.list.page += 1;
+            this.list.getIssues(false);
+          }
+
+          if (this.scrollHeight() > Math.ceil(this.listHeight())) {
+            this.showCount = true;
+          } else {
+            this.showCount = false;
+          }
+        });
+      }
+    },
+    methods: {
+      listHeight () {
+        return this.$refs.list.getBoundingClientRect().height;
+      },
+      scrollHeight () {
+        return this.$refs.list.scrollHeight;
+      },
+      scrollTop () {
+        return this.$refs.list.scrollTop + this.listHeight();
+      },
+      loadNextPage () {
+        const getIssues = this.list.nextPage();
+
+        if (getIssues) {
+          this.list.loadingMore = true;
+          getIssues.then(() => {
+            this.list.loadingMore = false;
+          });
+        }
+      },
+      toggleForm() {
+        this.showIssueForm = !this.showIssueForm;
+      },
+    },
+    created() {
+      gl.IssueBoardsApp.$on(`hide-issue-form-${this.list.id}`, this.toggleForm);
+    },
+    mounted () {
+      const options = gl.issueBoards.getBoardSortableDefaultOptions({
+        scroll: document.querySelectorAll('.boards-list')[0],
+        group: 'issues',
+        disabled: this.disabled,
+        filter: '.board-list-count, .is-disabled',
+        dataIdAttr: 'data-issue-id',
+        onStart: (e) => {
+          const card = this.$refs.issue[e.oldIndex];
+
+          card.showDetail = false;
+          Store.moving.list = card.list;
+          Store.moving.issue = Store.moving.list.findIssue(+e.item.dataset.issueId);
+
+          gl.issueBoards.onStart();
+        },
+        onAdd: (e) => {
+          gl.issueBoards.BoardsStore.moveIssueToList(Store.moving.list, this.list, Store.moving.issue, e.newIndex);
+
+          this.$nextTick(() => {
+            e.item.remove();
+          });
+        },
+        onUpdate: (e) => {
+          const sortedArray = this.sortable.toArray().filter(id => id !== '-1');
+          gl.issueBoards.BoardsStore.moveIssueInList(this.list, Store.moving.issue, e.oldIndex, e.newIndex, sortedArray);
+        },
+        onMove(e) {
+          return !e.related.classList.contains('board-list-count');
+        }
+      });
+
+      this.sortable = Sortable.create(this.$refs.list, options);
+
+      // Scroll event on list to load more
+      this.$refs.list.onscroll = () => {
+        if ((this.scrollTop() > this.scrollHeight() - this.scrollOffset) && !this.list.loadingMore) {
+          this.loadNextPage();
+        }
+      };
+    },
+    beforeDestroy() {
+      gl.IssueBoardsApp.$off(`hide-issue-form-${this.list.id}`, this.toggleForm);
+    },
+  });
+})();
diff --git a/app/assets/javascripts/boards/components/board_list.js.es6 b/app/assets/javascripts/boards/components/board_list.js.es6
deleted file mode 100644
index 34fc7694241..00000000000
--- a/app/assets/javascripts/boards/components/board_list.js.es6
+++ /dev/null
@@ -1,107 +0,0 @@
-/* eslint-disable */
-//= require ./board_card
-//= require ./board_new_issue
-
-(() => {
-  const Store = gl.issueBoards.BoardsStore;
-
-  window.gl = window.gl || {};
-  window.gl.issueBoards = window.gl.issueBoards || {};
-
-  gl.issueBoards.BoardList = Vue.extend({
-    components: {
-      'board-card': gl.issueBoards.BoardCard,
-      'board-new-issue': gl.issueBoards.BoardNewIssue
-    },
-    props: {
-      disabled: Boolean,
-      list: Object,
-      issues: Array,
-      loading: Boolean,
-      issueLinkBase: String,
-      showIssueForm: Boolean
-    },
-    data () {
-      return {
-        scrollOffset: 250,
-        filters: Store.state.filters,
-        showCount: false
-      };
-    },
-    watch: {
-      filters: {
-        handler () {
-          this.list.loadingMore = false;
-          this.$els.list.scrollTop = 0;
-        },
-        deep: true
-      },
-      issues () {
-        this.$nextTick(() => {
-          if (this.scrollHeight() <= this.listHeight() && this.list.issuesSize > this.list.issues.length) {
-            this.list.page++;
-            this.list.getIssues(false);
-          }
-
-          if (this.scrollHeight() > this.listHeight()) {
-            this.showCount = true;
-          } else {
-            this.showCount = false;
-          }
-        });
-      }
-    },
-    methods: {
-      listHeight () {
-        return this.$els.list.getBoundingClientRect().height;
-      },
-      scrollHeight () {
-        return this.$els.list.scrollHeight;
-      },
-      scrollTop () {
-        return this.$els.list.scrollTop + this.listHeight();
-      },
-      loadNextPage () {
-        const getIssues = this.list.nextPage();
-
-        if (getIssues) {
-          this.list.loadingMore = true;
-          getIssues.then(() => {
-            this.list.loadingMore = false;
-          });
-        }
-      },
-    },
-    ready () {
-      const options = gl.issueBoards.getBoardSortableDefaultOptions({
-        group: 'issues',
-        sort: false,
-        disabled: this.disabled,
-        filter: '.board-list-count, .is-disabled',
-        onStart: (e) => {
-          const card = this.$refs.issue[e.oldIndex];
-
-          Store.moving.issue = card.issue;
-          Store.moving.list = card.list;
-
-          gl.issueBoards.onStart();
-        },
-        onAdd: (e) => {
-          gl.issueBoards.BoardsStore.moveIssueToList(Store.moving.list, this.list, Store.moving.issue);
-        },
-        onRemove: (e) => {
-          this.$refs.issue[e.oldIndex].$destroy(true);
-        }
-      });
-
-      this.sortable = Sortable.create(this.$els.list, options);
-
-      // Scroll event on list to load more
-      this.$els.list.onscroll = () => {
-        if ((this.scrollTop() > this.scrollHeight() - this.scrollOffset) && !this.list.loadingMore) {
-          this.loadNextPage();
-        }
-      };
-    }
-  });
-})();
diff --git a/app/assets/javascripts/boards/components/board_new_issue.js b/app/assets/javascripts/boards/components/board_new_issue.js
new file mode 100644
index 00000000000..b88f59dd6d4
--- /dev/null
+++ b/app/assets/javascripts/boards/components/board_new_issue.js
@@ -0,0 +1,92 @@
+/* global ListIssue */
+const Store = gl.issueBoards.BoardsStore;
+
+export default {
+  name: 'BoardNewIssue',
+  props: {
+    list: Object,
+  },
+  data() {
+    return {
+      title: '',
+      error: false,
+    };
+  },
+  methods: {
+    submit(e) {
+      e.preventDefault();
+      if (this.title.trim() === '') return;
+
+      this.error = false;
+
+      const labels = this.list.label ? [this.list.label] : [];
+      const issue = new ListIssue({
+        title: this.title,
+        labels,
+        subscribed: true,
+      });
+
+      this.list.newIssue(issue)
+        .then(() => {
+          // Need this because our jQuery very kindly disables buttons on ALL form submissions
+          $(this.$refs.submitButton).enable();
+
+          Store.detail.issue = issue;
+          Store.detail.list = this.list;
+        })
+        .catch(() => {
+          // Need this because our jQuery very kindly disables buttons on ALL form submissions
+          $(this.$refs.submitButton).enable();
+
+          // Remove the issue
+          this.list.removeIssue(issue);
+
+          // Show error message
+          this.error = true;
+        });
+
+      this.cancel();
+    },
+    cancel() {
+      this.title = '';
+      gl.IssueBoardsApp.$emit(`hide-issue-form-${this.list.id}`);
+    },
+  },
+  mounted() {
+    this.$refs.input.focus();
+  },
+  template: `
+    <div class="card board-new-issue-form">
+      <form @submit="submit($event)">
+        <div class="flash-container"
+          v-if="error">
+          <div class="flash-alert">
+            An error occured. Please try again.
+          </div>
+        </div>
+        <label class="label-light"
+          :for="list.id + '-title'">
+          Title
+        </label>
+        <input class="form-control"
+          type="text"
+          v-model="title"
+          ref="input"
+          :id="list.id + '-title'" />
+        <div class="clearfix prepend-top-10">
+          <button class="btn btn-success pull-left"
+            type="submit"
+            :disabled="title === ''"
+            ref="submit-button">
+            Submit issue
+          </button>
+          <button class="btn btn-default pull-right"
+            type="button"
+            @click="cancel">
+            Cancel
+          </button>
+        </div>
+      </form>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/boards/components/board_new_issue.js.es6 b/app/assets/javascripts/boards/components/board_new_issue.js.es6
deleted file mode 100644
index 7fc0bfd56f3..00000000000
--- a/app/assets/javascripts/boards/components/board_new_issue.js.es6
+++ /dev/null
@@ -1,64 +0,0 @@
-/* eslint-disable */
-(() => {
-  const Store = gl.issueBoards.BoardsStore;
-
-  window.gl = window.gl || {};
-
-  gl.issueBoards.BoardNewIssue = Vue.extend({
-    props: {
-      list: Object,
-      showIssueForm: Boolean
-    },
-    data() {
-      return {
-        title: '',
-        error: false
-      };
-    },
-    watch: {
-      showIssueForm () {
-        this.$els.input.focus();
-      }
-    },
-    methods: {
-      submit(e) {
-        e.preventDefault();
-        if (this.title.trim() === '') return;
-
-        this.error = false;
-
-        const labels = this.list.label ? [this.list.label] : [];
-        const issue = new ListIssue({
-          title: this.title,
-          labels,
-          subscribed: true
-        });
-
-        this.list.newIssue(issue)
-          .then((data) => {
-            // Need this because our jQuery very kindly disables buttons on ALL form submissions
-            $(this.$els.submitButton).enable();
-
-            Store.detail.issue = issue;
-          })
-          .catch(() => {
-            // Need this because our jQuery very kindly disables buttons on ALL form submissions
-            $(this.$els.submitButton).enable();
-
-            // Remove the issue
-            this.list.removeIssue(issue);
-
-            // Show error message
-            this.error = true;
-            this.showIssueForm = true;
-          });
-
-        this.cancel();
-      },
-      cancel() {
-        this.showIssueForm = false;
-        this.title = '';
-      }
-    }
-  });
-})();
diff --git a/app/assets/javascripts/boards/components/board_sidebar.js b/app/assets/javascripts/boards/components/board_sidebar.js
new file mode 100644
index 00000000000..3c080008244
--- /dev/null
+++ b/app/assets/javascripts/boards/components/board_sidebar.js
@@ -0,0 +1,73 @@
+/* eslint-disable comma-dangle, space-before-function-paren, no-new */
+/* global IssuableContext */
+/* global MilestoneSelect */
+/* global LabelsSelect */
+/* global Sidebar */
+
+import Vue from 'vue';
+
+require('./sidebar/remove_issue');
+
+(() => {
+  const Store = gl.issueBoards.BoardsStore;
+
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
+  gl.issueBoards.BoardSidebar = Vue.extend({
+    props: {
+      currentUser: Object
+    },
+    data() {
+      return {
+        detail: Store.detail,
+        issue: {},
+        list: {},
+      };
+    },
+    computed: {
+      showSidebar () {
+        return Object.keys(this.issue).length;
+      }
+    },
+    watch: {
+      detail: {
+        handler () {
+          if (this.issue.id !== this.detail.issue.id) {
+            $('.js-issue-board-sidebar', this.$el).each((i, el) => {
+              $(el).data('glDropdown').clearMenu();
+            });
+          }
+
+          this.issue = this.detail.issue;
+          this.list = this.detail.list;
+        },
+        deep: true
+      },
+      issue () {
+        if (this.showSidebar) {
+          this.$nextTick(() => {
+            $('.right-sidebar').getNiceScroll(0).doScrollTop(0, 0);
+            $('.right-sidebar').getNiceScroll().resize();
+          });
+        }
+      }
+    },
+    methods: {
+      closeSidebar () {
+        this.detail.issue = {};
+      }
+    },
+    mounted () {
+      new IssuableContext(this.currentUser);
+      new MilestoneSelect();
+      new gl.DueDateSelectors();
+      new LabelsSelect();
+      new Sidebar();
+      gl.Subscription.bindAll('.subscription');
+    },
+    components: {
+      removeBtn: gl.issueBoards.RemoveIssueBtn,
+    },
+  });
+})();
diff --git a/app/assets/javascripts/boards/components/board_sidebar.js.es6 b/app/assets/javascripts/boards/components/board_sidebar.js.es6
deleted file mode 100644
index 4928320d015..00000000000
--- a/app/assets/javascripts/boards/components/board_sidebar.js.es6
+++ /dev/null
@@ -1,53 +0,0 @@
-/* eslint-disable */
-(() => {
-  const Store = gl.issueBoards.BoardsStore;
-
-  window.gl = window.gl || {};
-  window.gl.issueBoards = window.gl.issueBoards || {};
-
-  gl.issueBoards.BoardSidebar = Vue.extend({
-    props: {
-      currentUser: Object
-    },
-    data() {
-      return {
-        detail: Store.detail,
-        issue: {}
-      };
-    },
-    computed: {
-      showSidebar () {
-        return Object.keys(this.issue).length;
-      }
-    },
-    watch: {
-      detail: {
-        handler () {
-          this.issue = this.detail.issue;
-        },
-        deep: true
-      },
-      issue () {
-        if (this.showSidebar) {
-          this.$nextTick(() => {
-            $('.right-sidebar').getNiceScroll(0).doScrollTop(0, 0);
-            $('.right-sidebar').getNiceScroll().resize();
-          });
-        }
-      }
-    },
-    methods: {
-      closeSidebar () {
-        this.detail.issue = {};
-      }
-    },
-    ready () {
-      new IssuableContext(this.currentUser);
-      new MilestoneSelect();
-      new gl.DueDateSelectors();
-      new LabelsSelect();
-      new Sidebar();
-      new Subscription('.subscription');
-    }
-  });
-})();
diff --git a/app/assets/javascripts/boards/components/issue_card_inner.js b/app/assets/javascripts/boards/components/issue_card_inner.js
new file mode 100644
index 00000000000..a4629b092bf
--- /dev/null
+++ b/app/assets/javascripts/boards/components/issue_card_inner.js
@@ -0,0 +1,114 @@
+import Vue from 'vue';
+import eventHub from '../eventhub';
+
+(() => {
+  const Store = gl.issueBoards.BoardsStore;
+
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
+  gl.issueBoards.IssueCardInner = Vue.extend({
+    props: {
+      issue: {
+        type: Object,
+        required: true,
+      },
+      issueLinkBase: {
+        type: String,
+        required: true,
+      },
+      list: {
+        type: Object,
+        required: false,
+      },
+      rootPath: {
+        type: String,
+        required: true,
+      },
+      updateFilters: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+    },
+    methods: {
+      showLabel(label) {
+        if (!this.list) return true;
+
+        return !this.list.label || label.id !== this.list.label.id;
+      },
+      filterByLabel(label, e) {
+        if (!this.updateFilters) return;
+
+        const filterPath = gl.issueBoards.BoardsStore.filter.path.split('&');
+        const labelTitle = encodeURIComponent(label.title);
+        const param = `label_name[]=${labelTitle}`;
+        const labelIndex = filterPath.indexOf(param);
+        $(e.currentTarget).tooltip('hide');
+
+        if (labelIndex === -1) {
+          filterPath.push(param);
+        } else {
+          filterPath.splice(labelIndex, 1);
+        }
+
+        gl.issueBoards.BoardsStore.filter.path = filterPath.join('&');
+
+        Store.updateFiltersUrl();
+
+        eventHub.$emit('updateTokens');
+      },
+      labelStyle(label) {
+        return {
+          backgroundColor: label.color,
+          color: label.textColor,
+        };
+      },
+    },
+    template: `
+      <div>
+        <h4 class="card-title">
+          <i
+            class="fa fa-eye-slash confidential-icon"
+            v-if="issue.confidential"></i>
+          <a
+            :href="issueLinkBase + '/' + issue.id"
+            :title="issue.title">
+            {{ issue.title }}
+          </a>
+        </h4>
+        <div class="card-footer">
+          <span
+            class="card-number"
+            v-if="issue.id">
+            #{{ issue.id }}
+          </span>
+          <a
+            class="card-assignee has-tooltip js-no-trigger"
+            :href="rootPath + issue.assignee.username"
+            :title="'Assigned to ' + issue.assignee.name"
+            v-if="issue.assignee"
+            data-container="body">
+            <img
+              class="avatar avatar-inline s20 js-no-trigger"
+              :src="issue.assignee.avatar"
+              width="20"
+              height="20"
+              :alt="'Avatar for ' + issue.assignee.name" />
+          </a>
+          <button
+            class="label color-label has-tooltip js-no-trigger"
+            v-for="label in issue.labels"
+            type="button"
+            v-if="showLabel(label)"
+            @click="filterByLabel(label, $event)"
+            :style="labelStyle(label)"
+            :title="label.description"
+            data-container="body">
+            {{ label.title }}
+          </button>
+        </div>
+      </div>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/boards/components/modal/empty_state.js b/app/assets/javascripts/boards/components/modal/empty_state.js
new file mode 100644
index 00000000000..823319df6e7
--- /dev/null
+++ b/app/assets/javascripts/boards/components/modal/empty_state.js
@@ -0,0 +1,71 @@
+import Vue from 'vue';
+
+(() => {
+  const ModalStore = gl.issueBoards.ModalStore;
+
+  gl.issueBoards.ModalEmptyState = Vue.extend({
+    mixins: [gl.issueBoards.ModalMixins],
+    data() {
+      return ModalStore.store;
+    },
+    props: {
+      image: {
+        type: String,
+        required: true,
+      },
+      newIssuePath: {
+        type: String,
+        required: true,
+      },
+    },
+    computed: {
+      contents() {
+        const obj = {
+          title: 'You haven\'t added any issues to your project yet',
+          content: `
+            An issue can be a bug, a todo or a feature request that needs to be
+            discussed in a project. Besides, issues are searchable and filterable.
+          `,
+        };
+
+        if (this.activeTab === 'selected') {
+          obj.title = 'You haven\'t selected any issues yet';
+          obj.content = `
+            Go back to <strong>Open issues</strong> and select some issues
+            to add to your board.
+          `;
+        }
+
+        return obj;
+      },
+    },
+    template: `
+      <section class="empty-state">
+        <div class="row">
+          <div class="col-xs-12 col-sm-6 col-sm-push-6">
+            <aside class="svg-content" v-html="image"></aside>
+          </div>
+          <div class="col-xs-12 col-sm-6 col-sm-pull-6">
+            <div class="text-content">
+              <h4>{{ contents.title }}</h4>
+              <p v-html="contents.content"></p>
+              <a
+                :href="newIssuePath"
+                class="btn btn-success btn-inverted"
+                v-if="activeTab === 'all'">
+                New issue
+              </a>
+              <button
+                type="button"
+                class="btn btn-default"
+                @click="changeTab('all')"
+                v-if="activeTab === 'selected'">
+                Open issues
+              </button>
+            </div>
+          </div>
+        </div>
+      </section>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/boards/components/modal/filters.js b/app/assets/javascripts/boards/components/modal/filters.js
new file mode 100644
index 00000000000..b214b5a7199
--- /dev/null
+++ b/app/assets/javascripts/boards/components/modal/filters.js
@@ -0,0 +1,26 @@
+import FilteredSearchBoards from '../../filtered_search_boards';
+import FilteredSearchContainer from '../../../filtered_search/container';
+
+export default {
+  name: 'modal-filters',
+  props: {
+    store: {
+      type: Object,
+      required: true,
+    },
+  },
+  mounted() {
+    FilteredSearchContainer.container = this.$el;
+
+    this.filteredSearch = new FilteredSearchBoards(this.store);
+    this.filteredSearch.removeTokens();
+    this.filteredSearch.handleInputPlaceholder();
+    this.filteredSearch.toggleClearSearchButton();
+  },
+  destroyed() {
+    this.filteredSearch.cleanup();
+    FilteredSearchContainer.container = document;
+    this.store.path = '';
+  },
+  template: '#js-board-modal-filter',
+};
diff --git a/app/assets/javascripts/boards/components/modal/footer.js b/app/assets/javascripts/boards/components/modal/footer.js
new file mode 100644
index 00000000000..887ce373096
--- /dev/null
+++ b/app/assets/javascripts/boards/components/modal/footer.js
@@ -0,0 +1,84 @@
+/* eslint-disable no-new */
+/* global Flash */
+
+import Vue from 'vue';
+
+require('./lists_dropdown');
+
+(() => {
+  const ModalStore = gl.issueBoards.ModalStore;
+
+  gl.issueBoards.ModalFooter = Vue.extend({
+    mixins: [gl.issueBoards.ModalMixins],
+    data() {
+      return {
+        modal: ModalStore.store,
+        state: gl.issueBoards.BoardsStore.state,
+      };
+    },
+    computed: {
+      submitDisabled() {
+        return !ModalStore.selectedCount();
+      },
+      submitText() {
+        const count = ModalStore.selectedCount();
+
+        return `Add ${count > 0 ? count : ''} ${gl.text.pluralize('issue', count)}`;
+      },
+    },
+    methods: {
+      addIssues() {
+        const list = this.modal.selectedList || this.state.lists[0];
+        const selectedIssues = ModalStore.getSelectedIssues();
+        const issueIds = selectedIssues.map(issue => issue.globalId);
+
+        // Post the data to the backend
+        gl.boardService.bulkUpdate(issueIds, {
+          add_label_ids: [list.label.id],
+        }).catch(() => {
+          new Flash('Failed to update issues, please try again.', 'alert');
+
+          selectedIssues.forEach((issue) => {
+            list.removeIssue(issue);
+            list.issuesSize -= 1;
+          });
+        });
+
+        // Add the issues on the frontend
+        selectedIssues.forEach((issue) => {
+          list.addIssue(issue);
+          list.issuesSize += 1;
+        });
+
+        this.toggleModal(false);
+      },
+    },
+    components: {
+      'lists-dropdown': gl.issueBoards.ModalFooterListsDropdown,
+    },
+    template: `
+      <footer
+        class="form-actions add-issues-footer">
+        <div class="pull-left">
+          <button
+            class="btn btn-success"
+            type="button"
+            :disabled="submitDisabled"
+            @click="addIssues">
+            {{ submitText }}
+          </button>
+          <span class="inline add-issues-footer-to-list">
+            to list
+          </span>
+          <lists-dropdown></lists-dropdown>
+        </div>
+        <button
+          class="btn btn-default pull-right"
+          type="button"
+          @click="toggleModal(false)">
+          Cancel
+        </button>
+      </footer>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/boards/components/modal/header.js b/app/assets/javascripts/boards/components/modal/header.js
new file mode 100644
index 00000000000..116e29cd177
--- /dev/null
+++ b/app/assets/javascripts/boards/components/modal/header.js
@@ -0,0 +1,82 @@
+import Vue from 'vue';
+import modalFilters from './filters';
+
+require('./tabs');
+
+(() => {
+  const ModalStore = gl.issueBoards.ModalStore;
+
+  gl.issueBoards.ModalHeader = Vue.extend({
+    mixins: [gl.issueBoards.ModalMixins],
+    props: {
+      projectId: {
+        type: Number,
+        required: true,
+      },
+      milestonePath: {
+        type: String,
+        required: true,
+      },
+      labelPath: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return ModalStore.store;
+    },
+    computed: {
+      selectAllText() {
+        if (ModalStore.selectedCount() !== this.issues.length || this.issues.length === 0) {
+          return 'Select all';
+        }
+
+        return 'Deselect all';
+      },
+      showSearch() {
+        return this.activeTab === 'all' && !this.loading && this.issuesCount > 0;
+      },
+    },
+    methods: {
+      toggleAll() {
+        this.$refs.selectAllBtn.blur();
+
+        ModalStore.toggleAll();
+      },
+    },
+    components: {
+      'modal-tabs': gl.issueBoards.ModalTabs,
+      modalFilters,
+    },
+    template: `
+      <div>
+        <header class="add-issues-header form-actions">
+          <h2>
+            Add issues
+            <button
+              type="button"
+              class="close"
+              data-dismiss="modal"
+              aria-label="Close"
+              @click="toggleModal(false)">
+              <span aria-hidden="true">×</span>
+            </button>
+          </h2>
+        </header>
+        <modal-tabs v-if="!loading && issuesCount > 0"></modal-tabs>
+        <div
+          class="add-issues-search append-bottom-10"
+          v-if="showSearch">
+          <modal-filters :store="filter" />
+          <button
+            type="button"
+            class="btn btn-success btn-inverted prepend-left-10"
+            ref="selectAllBtn"
+            @click="toggleAll">
+            {{ selectAllText }}
+          </button>
+        </div>
+      </div>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/boards/components/modal/index.js b/app/assets/javascripts/boards/components/modal/index.js
new file mode 100644
index 00000000000..91c08cde13a
--- /dev/null
+++ b/app/assets/javascripts/boards/components/modal/index.js
@@ -0,0 +1,167 @@
+/* global ListIssue */
+
+import Vue from 'vue';
+import queryData from '../../utils/query_data';
+
+require('./header');
+require('./list');
+require('./footer');
+require('./empty_state');
+
+(() => {
+  const ModalStore = gl.issueBoards.ModalStore;
+
+  gl.issueBoards.IssuesModal = Vue.extend({
+    props: {
+      blankStateImage: {
+        type: String,
+        required: true,
+      },
+      newIssuePath: {
+        type: String,
+        required: true,
+      },
+      issueLinkBase: {
+        type: String,
+        required: true,
+      },
+      rootPath: {
+        type: String,
+        required: true,
+      },
+      projectId: {
+        type: Number,
+        required: true,
+      },
+      milestonePath: {
+        type: String,
+        required: true,
+      },
+      labelPath: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return ModalStore.store;
+    },
+    watch: {
+      page() {
+        this.loadIssues();
+      },
+      showAddIssuesModal() {
+        if (this.showAddIssuesModal && !this.issues.length) {
+          this.loading = true;
+
+          this.loadIssues()
+            .then(() => {
+              this.loading = false;
+            });
+        } else if (!this.showAddIssuesModal) {
+          this.issues = [];
+          this.selectedIssues = [];
+          this.issuesCount = false;
+        }
+      },
+      filter: {
+        handler() {
+          if (this.$el.tagName) {
+            this.page = 1;
+            this.filterLoading = true;
+
+            this.loadIssues(true)
+              .then(() => {
+                this.filterLoading = false;
+              });
+          }
+        },
+        deep: true,
+      },
+    },
+    methods: {
+      loadIssues(clearIssues = false) {
+        if (!this.showAddIssuesModal) return false;
+
+        return gl.boardService.getBacklog(queryData(this.filter.path, {
+          page: this.page,
+          per: this.perPage,
+        })).then((res) => {
+          const data = res.json();
+
+          if (clearIssues) {
+            this.issues = [];
+          }
+
+          data.issues.forEach((issueObj) => {
+            const issue = new ListIssue(issueObj);
+            const foundSelectedIssue = ModalStore.findSelectedIssue(issue);
+            issue.selected = !!foundSelectedIssue;
+
+            this.issues.push(issue);
+          });
+
+          this.loadingNewPage = false;
+
+          if (!this.issuesCount) {
+            this.issuesCount = data.size;
+          }
+        });
+      },
+    },
+    computed: {
+      showList() {
+        if (this.activeTab === 'selected') {
+          return this.selectedIssues.length > 0;
+        }
+
+        return this.issuesCount > 0;
+      },
+      showEmptyState() {
+        if (!this.loading && this.issuesCount === 0) {
+          return true;
+        }
+
+        return this.activeTab === 'selected' && this.selectedIssues.length === 0;
+      },
+    },
+    created() {
+      this.page = 1;
+    },
+    components: {
+      'modal-header': gl.issueBoards.ModalHeader,
+      'modal-list': gl.issueBoards.ModalList,
+      'modal-footer': gl.issueBoards.ModalFooter,
+      'empty-state': gl.issueBoards.ModalEmptyState,
+    },
+    template: `
+      <div
+        class="add-issues-modal"
+        v-if="showAddIssuesModal">
+        <div class="add-issues-container">
+          <modal-header
+            :project-id="projectId"
+            :milestone-path="milestonePath"
+            :label-path="labelPath">
+          </modal-header>
+          <modal-list
+            :image="blankStateImage"
+            :issue-link-base="issueLinkBase"
+            :root-path="rootPath"
+            v-if="!loading && showList && !filterLoading"></modal-list>
+          <empty-state
+            v-if="showEmptyState"
+            :image="blankStateImage"
+            :new-issue-path="newIssuePath"></empty-state>
+          <section
+            class="add-issues-list text-center"
+            v-if="loading || filterLoading">
+            <div class="add-issues-list-loading">
+              <i class="fa fa-spinner fa-spin"></i>
+            </div>
+          </section>
+          <modal-footer></modal-footer>
+        </div>
+      </div>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/boards/components/modal/list.js b/app/assets/javascripts/boards/components/modal/list.js
new file mode 100644
index 00000000000..aba56d4aa31
--- /dev/null
+++ b/app/assets/javascripts/boards/components/modal/list.js
@@ -0,0 +1,161 @@
+/* global ListIssue */
+/* global bp */
+
+import Vue from 'vue';
+
+(() => {
+  const ModalStore = gl.issueBoards.ModalStore;
+
+  gl.issueBoards.ModalList = Vue.extend({
+    props: {
+      issueLinkBase: {
+        type: String,
+        required: true,
+      },
+      rootPath: {
+        type: String,
+        required: true,
+      },
+      image: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return ModalStore.store;
+    },
+    watch: {
+      activeTab() {
+        if (this.activeTab === 'all') {
+          ModalStore.purgeUnselectedIssues();
+        }
+      },
+    },
+    computed: {
+      loopIssues() {
+        if (this.activeTab === 'all') {
+          return this.issues;
+        }
+
+        return this.selectedIssues;
+      },
+      groupedIssues() {
+        const groups = [];
+        this.loopIssues.forEach((issue, i) => {
+          const index = i % this.columns;
+
+          if (!groups[index]) {
+            groups.push([]);
+          }
+
+          groups[index].push(issue);
+        });
+
+        return groups;
+      },
+    },
+    methods: {
+      scrollHandler() {
+        const currentPage = Math.floor(this.issues.length / this.perPage);
+
+        if ((this.scrollTop() > this.scrollHeight() - 100) && !this.loadingNewPage
+          && currentPage === this.page) {
+          this.loadingNewPage = true;
+          this.page += 1;
+        }
+      },
+      toggleIssue(e, issue) {
+        if (e.target.tagName !== 'A') {
+          ModalStore.toggleIssue(issue);
+        }
+      },
+      listHeight() {
+        return this.$refs.list.getBoundingClientRect().height;
+      },
+      scrollHeight() {
+        return this.$refs.list.scrollHeight;
+      },
+      scrollTop() {
+        return this.$refs.list.scrollTop + this.listHeight();
+      },
+      showIssue(issue) {
+        if (this.activeTab === 'all') return true;
+
+        const index = ModalStore.selectedIssueIndex(issue);
+
+        return index !== -1;
+      },
+      setColumnCount() {
+        const breakpoint = bp.getBreakpointSize();
+
+        if (breakpoint === 'lg' || breakpoint === 'md') {
+          this.columns = 3;
+        } else if (breakpoint === 'sm') {
+          this.columns = 2;
+        } else {
+          this.columns = 1;
+        }
+      },
+    },
+    mounted() {
+      this.scrollHandlerWrapper = this.scrollHandler.bind(this);
+      this.setColumnCountWrapper = this.setColumnCount.bind(this);
+      this.setColumnCount();
+
+      this.$refs.list.addEventListener('scroll', this.scrollHandlerWrapper);
+      window.addEventListener('resize', this.setColumnCountWrapper);
+    },
+    beforeDestroy() {
+      this.$refs.list.removeEventListener('scroll', this.scrollHandlerWrapper);
+      window.removeEventListener('resize', this.setColumnCountWrapper);
+    },
+    components: {
+      'issue-card-inner': gl.issueBoards.IssueCardInner,
+    },
+    template: `
+      <section
+        class="add-issues-list add-issues-list-columns"
+        ref="list">
+        <div
+          class="empty-state add-issues-empty-state-filter text-center"
+          v-if="issuesCount > 0 && issues.length === 0">
+          <div
+            class="svg-content"
+            v-html="image">
+          </div>
+          <div class="text-content">
+            <h4>
+              There are no issues to show.
+            </h4>
+          </div>
+        </div>
+        <div
+          v-for="group in groupedIssues"
+          class="add-issues-list-column">
+          <div
+            v-for="issue in group"
+            v-if="showIssue(issue)"
+            class="card-parent">
+            <div
+              class="card"
+              :class="{ 'is-active': issue.selected }"
+              @click="toggleIssue($event, issue)">
+              <issue-card-inner
+                :issue="issue"
+                :issue-link-base="issueLinkBase"
+                :root-path="rootPath">
+              </issue-card-inner>
+              <span
+                :aria-label="'Issue #' + issue.id + ' selected'"
+                aria-checked="true"
+                v-if="issue.selected"
+                class="issue-card-selected text-center">
+                <i class="fa fa-check"></i>
+              </span>
+            </div>
+          </div>
+        </div>
+      </section>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/boards/components/modal/lists_dropdown.js b/app/assets/javascripts/boards/components/modal/lists_dropdown.js
new file mode 100644
index 00000000000..9e9ed46ab8d
--- /dev/null
+++ b/app/assets/javascripts/boards/components/modal/lists_dropdown.js
@@ -0,0 +1,57 @@
+import Vue from 'vue';
+
+(() => {
+  const ModalStore = gl.issueBoards.ModalStore;
+
+  gl.issueBoards.ModalFooterListsDropdown = Vue.extend({
+    data() {
+      return {
+        modal: ModalStore.store,
+        state: gl.issueBoards.BoardsStore.state,
+      };
+    },
+    computed: {
+      selected() {
+        return this.modal.selectedList || this.state.lists[0];
+      },
+    },
+    destroyed() {
+      this.modal.selectedList = null;
+    },
+    template: `
+      <div class="dropdown inline">
+        <button
+          class="dropdown-menu-toggle"
+          type="button"
+          data-toggle="dropdown"
+          aria-expanded="false">
+          <span
+            class="dropdown-label-box"
+            :style="{ backgroundColor: selected.label.color }">
+          </span>
+          {{ selected.title }}
+          <i class="fa fa-chevron-down"></i>
+        </button>
+        <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up">
+          <ul>
+            <li
+              v-for="list in state.lists"
+              v-if="list.type == 'label'">
+              <a
+                href="#"
+                role="button"
+                :class="{ 'is-active': list.id == selected.id }"
+                @click.prevent="modal.selectedList = list">
+                <span
+                  class="dropdown-label-box"
+                  :style="{ backgroundColor: list.label.color }">
+                </span>
+                {{ list.title }}
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/boards/components/modal/tabs.js b/app/assets/javascripts/boards/components/modal/tabs.js
new file mode 100644
index 00000000000..23cb1b13d11
--- /dev/null
+++ b/app/assets/javascripts/boards/components/modal/tabs.js
@@ -0,0 +1,48 @@
+import Vue from 'vue';
+
+(() => {
+  const ModalStore = gl.issueBoards.ModalStore;
+
+  gl.issueBoards.ModalTabs = Vue.extend({
+    mixins: [gl.issueBoards.ModalMixins],
+    data() {
+      return ModalStore.store;
+    },
+    computed: {
+      selectedCount() {
+        return ModalStore.selectedCount();
+      },
+    },
+    destroyed() {
+      this.activeTab = 'all';
+    },
+    template: `
+      <div class="top-area prepend-top-10 append-bottom-10">
+        <ul class="nav-links issues-state-filters">
+          <li :class="{ 'active': activeTab == 'all' }">
+            <a
+              href="#"
+              role="button"
+              @click.prevent="changeTab('all')">
+              Open issues
+              <span class="badge">
+                {{ issuesCount }}
+              </span>
+            </a>
+          </li>
+          <li :class="{ 'active': activeTab == 'selected' }">
+            <a
+              href="#"
+              role="button"
+              @click.prevent="changeTab('selected')">
+              Selected issues
+              <span class="badge">
+                {{ selectedCount }}
+              </span>
+            </a>
+          </li>
+        </ul>
+      </div>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/boards/components/new_list_dropdown.js b/app/assets/javascripts/boards/components/new_list_dropdown.js
new file mode 100644
index 00000000000..556826a9148
--- /dev/null
+++ b/app/assets/javascripts/boards/components/new_list_dropdown.js
@@ -0,0 +1,76 @@
+/* eslint-disable comma-dangle, func-names, no-new, space-before-function-paren, one-var */
+
+(() => {
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
+  const Store = gl.issueBoards.BoardsStore;
+
+  $(document).off('created.label').on('created.label', (e, label) => {
+    Store.new({
+      title: label.title,
+      position: Store.state.lists.length - 2,
+      list_type: 'label',
+      label: {
+        id: label.id,
+        title: label.title,
+        color: label.color
+      }
+    });
+  });
+
+  gl.issueBoards.newListDropdownInit = () => {
+    $('.js-new-board-list').each(function () {
+      const $this = $(this);
+      new gl.CreateLabelDropdown($this.closest('.dropdown').find('.dropdown-new-label'), $this.data('namespace-path'), $this.data('project-path'));
+
+      $this.glDropdown({
+        data(term, callback) {
+          $.get($this.attr('data-labels'))
+            .then((resp) => {
+              callback(resp);
+            });
+        },
+        renderRow (label) {
+          const active = Store.findList('title', label.title);
+          const $li = $('<li />');
+          const $a = $('<a />', {
+            class: (active ? `is-active js-board-list-${active.id}` : ''),
+            text: label.title,
+            href: '#'
+          });
+          const $labelColor = $('<span />', {
+            class: 'dropdown-label-box',
+            style: `background-color: ${label.color}`
+          });
+
+          return $li.append($a.prepend($labelColor));
+        },
+        search: {
+          fields: ['title']
+        },
+        filterable: true,
+        selectable: true,
+        multiSelect: true,
+        clicked (label, $el, e) {
+          e.preventDefault();
+
+          if (!Store.findList('title', label.title)) {
+            Store.new({
+              title: label.title,
+              position: Store.state.lists.length - 2,
+              list_type: 'label',
+              label: {
+                id: label.id,
+                title: label.title,
+                color: label.color
+              }
+            });
+
+            Store.state.lists = _.sortBy(Store.state.lists, 'position');
+          }
+        }
+      });
+    });
+  };
+})();
diff --git a/app/assets/javascripts/boards/components/new_list_dropdown.js.es6 b/app/assets/javascripts/boards/components/new_list_dropdown.js.es6
deleted file mode 100644
index 14f618fd5d5..00000000000
--- a/app/assets/javascripts/boards/components/new_list_dropdown.js.es6
+++ /dev/null
@@ -1,68 +0,0 @@
-/* eslint-disable */
-$(() => {
-  const Store = gl.issueBoards.BoardsStore;
-
-  $(document).off('created.label').on('created.label', (e, label) => {
-    Store.new({
-      title: label.title,
-      position: Store.state.lists.length - 2,
-      list_type: 'label',
-      label: {
-        id: label.id,
-        title: label.title,
-        color: label.color
-      }
-    });
-  });
-
-  $('.js-new-board-list').each(function () {
-    const $this = $(this);
-    new gl.CreateLabelDropdown($this.closest('.dropdown').find('.dropdown-new-label'), $this.data('namespace-path'), $this.data('project-path'));
-
-    $this.glDropdown({
-      data(term, callback) {
-        $.get($this.attr('data-labels'))
-          .then((resp) => {
-            callback(resp);
-          });
-      },
-      renderRow (label) {
-        const active = Store.findList('title', label.title),
-              $li = $('<li />'),
-              $a = $('<a />', {
-                class: (active ? `is-active js-board-list-${active.id}` : ''),
-                text: label.title,
-                href: '#'
-              }),
-              $labelColor = $('<span />', {
-                class: 'dropdown-label-box',
-                style: `background-color: ${label.color}`
-              });
-
-        return $li.append($a.prepend($labelColor));
-      },
-			search: {
-				fields: ['title']
-			},
-			filterable: true,
-      selectable: true,
-      multiSelect: true,
-      clicked (label, $el, e) {
-        e.preventDefault();
-
-        if (!Store.findList('title', label.title)) {
-          Store.new({
-            title: label.title,
-            position: Store.state.lists.length - 2,
-            list_type: 'label',
-            label: {
-              id: label.id,
-              title: label.title,
-              color: label.color
-            }
-          });
-        }
-      }
-    });
-  });
-});
diff --git a/app/assets/javascripts/boards/components/sidebar/remove_issue.js b/app/assets/javascripts/boards/components/sidebar/remove_issue.js
new file mode 100644
index 00000000000..772ea4c5565
--- /dev/null
+++ b/app/assets/javascripts/boards/components/sidebar/remove_issue.js
@@ -0,0 +1,61 @@
+/* eslint-disable no-new */
+/* global Flash */
+
+import Vue from 'vue';
+
+(() => {
+  const Store = gl.issueBoards.BoardsStore;
+
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
+  gl.issueBoards.RemoveIssueBtn = Vue.extend({
+    props: {
+      issue: {
+        type: Object,
+        required: true,
+      },
+      list: {
+        type: Object,
+        required: true,
+      },
+    },
+    methods: {
+      removeIssue() {
+        const issue = this.issue;
+        const lists = issue.getLists();
+        const labelIds = lists.map(list => list.label.id);
+
+        // Post the remove data
+        gl.boardService.bulkUpdate([issue.globalId], {
+          remove_label_ids: labelIds,
+        }).catch(() => {
+          new Flash('Failed to remove issue from board, please try again.', 'alert');
+
+          lists.forEach((list) => {
+            list.addIssue(issue);
+          });
+        });
+
+        // Remove from the frontend store
+        lists.forEach((list) => {
+          list.removeIssue(issue);
+        });
+
+        Store.detail.issue = {};
+      },
+    },
+    template: `
+      <div
+        class="block list"
+        v-if="list.type !== 'closed'">
+        <button
+          class="btn btn-default btn-block"
+          type="button"
+          @click="removeIssue">
+          Remove from board
+        </button>
+      </div>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/boards/eventhub.js b/app/assets/javascripts/boards/eventhub.js
new file mode 100644
index 00000000000..0948c2e5352
--- /dev/null
+++ b/app/assets/javascripts/boards/eventhub.js
@@ -0,0 +1,3 @@
+import Vue from 'vue';
+
+export default new Vue();
diff --git a/app/assets/javascripts/boards/filtered_search_boards.js b/app/assets/javascripts/boards/filtered_search_boards.js
new file mode 100644
index 00000000000..1264280284c
--- /dev/null
+++ b/app/assets/javascripts/boards/filtered_search_boards.js
@@ -0,0 +1,43 @@
+/* eslint-disable class-methods-use-this */
+import FilteredSearchContainer from '../filtered_search/container';
+
+export default class FilteredSearchBoards extends gl.FilteredSearchManager {
+  constructor(store, updateUrl = false) {
+    super('boards');
+
+    this.store = store;
+    this.updateUrl = updateUrl;
+
+    // Issue boards is slightly different, we handle all the requests async
+    // instead or reloading the page, we just re-fire the list ajax requests
+    this.isHandledAsync = true;
+  }
+
+  updateObject(path) {
+    this.store.path = path.substr(1);
+
+    if (this.updateUrl) {
+      gl.issueBoards.BoardsStore.updateFiltersUrl();
+    }
+  }
+
+  removeTokens() {
+    const tokens = FilteredSearchContainer.container.querySelectorAll('.js-visual-token');
+
+    // Remove all the tokens as they will be replaced by the search manager
+    [].forEach.call(tokens, (el) => {
+      el.parentNode.removeChild(el);
+    });
+
+    this.filteredSearchInput.value = '';
+  }
+
+  updateTokens() {
+    this.removeTokens();
+
+    this.loadSearchParamsFromURL();
+
+    // Get the placeholder back if search is empty
+    this.filteredSearchInput.dispatchEvent(new Event('input'));
+  }
+}
diff --git a/app/assets/javascripts/boards/filters/due_date_filters.js b/app/assets/javascripts/boards/filters/due_date_filters.js
new file mode 100644
index 00000000000..70132dbfa6f
--- /dev/null
+++ b/app/assets/javascripts/boards/filters/due_date_filters.js
@@ -0,0 +1,8 @@
+/* global dateFormat */
+
+import Vue from 'vue';
+
+Vue.filter('due-date', (value) => {
+  const date = new Date(value);
+  return dateFormat(date, 'mmm d, yyyy', true);
+});
diff --git a/app/assets/javascripts/boards/filters/due_date_filters.js.es6 b/app/assets/javascripts/boards/filters/due_date_filters.js.es6
deleted file mode 100644
index 9eceac4eddd..00000000000
--- a/app/assets/javascripts/boards/filters/due_date_filters.js.es6
+++ /dev/null
@@ -1,5 +0,0 @@
-/* eslint-disable */
-Vue.filter('due-date', (value) => {
-  const date = new Date(value);
-  return $.datepicker.formatDate('M d, yy', date);
-});
diff --git a/app/assets/javascripts/boards/mixins/modal_mixins.js b/app/assets/javascripts/boards/mixins/modal_mixins.js
new file mode 100644
index 00000000000..d378b7d4baf
--- /dev/null
+++ b/app/assets/javascripts/boards/mixins/modal_mixins.js
@@ -0,0 +1,14 @@
+(() => {
+  const ModalStore = gl.issueBoards.ModalStore;
+
+  gl.issueBoards.ModalMixins = {
+    methods: {
+      toggleModal(toggle) {
+        ModalStore.store.showAddIssuesModal = toggle;
+      },
+      changeTab(tab) {
+        ModalStore.store.activeTab = tab;
+      },
+    },
+  };
+})();
diff --git a/app/assets/javascripts/boards/mixins/sortable_default_options.js b/app/assets/javascripts/boards/mixins/sortable_default_options.js
new file mode 100644
index 00000000000..b6c6d17274f
--- /dev/null
+++ b/app/assets/javascripts/boards/mixins/sortable_default_options.js
@@ -0,0 +1,39 @@
+/* eslint-disable no-unused-vars, no-mixed-operators, comma-dangle */
+/* global DocumentTouch */
+
+((w) => {
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
+  gl.issueBoards.onStart = () => {
+    $('.has-tooltip').tooltip('hide')
+      .tooltip('disable');
+    document.body.classList.add('is-dragging');
+  };
+
+  gl.issueBoards.onEnd = () => {
+    $('.has-tooltip').tooltip('enable');
+    document.body.classList.remove('is-dragging');
+  };
+
+  gl.issueBoards.touchEnabled = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch;
+
+  gl.issueBoards.getBoardSortableDefaultOptions = (obj) => {
+    const defaultSortOptions = {
+      animation: 200,
+      forceFallback: true,
+      fallbackClass: 'is-dragging',
+      fallbackOnBody: true,
+      ghostClass: 'is-ghost',
+      filter: '.board-delete, .btn',
+      delay: gl.issueBoards.touchEnabled ? 100 : 0,
+      scrollSensitivity: gl.issueBoards.touchEnabled ? 60 : 100,
+      scrollSpeed: 20,
+      onStart: gl.issueBoards.onStart,
+      onEnd: gl.issueBoards.onEnd
+    };
+
+    Object.keys(obj).forEach((key) => { defaultSortOptions[key] = obj[key]; });
+    return defaultSortOptions;
+  };
+})(window);
diff --git a/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6 b/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6
deleted file mode 100644
index db9a5a8e40a..00000000000
--- a/app/assets/javascripts/boards/mixins/sortable_default_options.js.es6
+++ /dev/null
@@ -1,36 +0,0 @@
-/* eslint-disable */
-((w) => {
-  window.gl = window.gl || {};
-  window.gl.issueBoards = window.gl.issueBoards || {};
-
-  gl.issueBoards.onStart = () => {
-    $('.has-tooltip').tooltip('hide')
-      .tooltip('disable');
-    document.body.classList.add('is-dragging');
-  };
-
-  gl.issueBoards.onEnd = () => {
-    $('.has-tooltip').tooltip('enable');
-    document.body.classList.remove('is-dragging');
-  };
-
-  gl.issueBoards.touchEnabled = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch;
-
-  gl.issueBoards.getBoardSortableDefaultOptions = (obj) => {
-    let defaultSortOptions = {
-      forceFallback: true,
-      fallbackClass: 'is-dragging',
-      fallbackOnBody: true,
-      ghostClass: 'is-ghost',
-      filter: '.board-delete, .btn',
-      delay: gl.issueBoards.touchEnabled ? 100 : 50,
-      scrollSensitivity: gl.issueBoards.touchEnabled ? 60 : 100,
-      scrollSpeed: 20,
-      onStart: gl.issueBoards.onStart,
-      onEnd: gl.issueBoards.onEnd
-    }
-
-    Object.keys(obj).forEach((key) => { defaultSortOptions[key] = obj[key]; });
-    return defaultSortOptions;
-  };
-})(window);
diff --git a/app/assets/javascripts/boards/models/issue.js b/app/assets/javascripts/boards/models/issue.js
new file mode 100644
index 00000000000..d6175069e37
--- /dev/null
+++ b/app/assets/javascripts/boards/models/issue.js
@@ -0,0 +1,76 @@
+/* eslint-disable no-unused-vars, space-before-function-paren, arrow-body-style, arrow-parens, comma-dangle, max-len */
+/* global ListLabel */
+/* global ListMilestone */
+/* global ListUser */
+
+import Vue from 'vue';
+
+class ListIssue {
+  constructor (obj) {
+    this.globalId = obj.id;
+    this.id = obj.iid;
+    this.title = obj.title;
+    this.confidential = obj.confidential;
+    this.dueDate = obj.due_date;
+    this.subscribed = obj.subscribed;
+    this.labels = [];
+    this.selected = false;
+    this.assignee = false;
+    this.position = obj.relative_position || Infinity;
+
+    if (obj.assignee) {
+      this.assignee = new ListUser(obj.assignee);
+    }
+
+    if (obj.milestone) {
+      this.milestone = new ListMilestone(obj.milestone);
+    }
+
+    obj.labels.forEach((label) => {
+      this.labels.push(new ListLabel(label));
+    });
+  }
+
+  addLabel (label) {
+    if (!this.findLabel(label)) {
+      this.labels.push(new ListLabel(label));
+    }
+  }
+
+  findLabel (findLabel) {
+    return this.labels.filter(label => label.title === findLabel.title)[0];
+  }
+
+  removeLabel (removeLabel) {
+    if (removeLabel) {
+      this.labels = this.labels.filter(label => removeLabel.title !== label.title);
+    }
+  }
+
+  removeLabels (labels) {
+    labels.forEach(this.removeLabel.bind(this));
+  }
+
+  getLists () {
+    return gl.issueBoards.BoardsStore.state.lists.filter(list => list.findIssue(this.id));
+  }
+
+  update (url) {
+    const data = {
+      issue: {
+        milestone_id: this.milestone ? this.milestone.id : null,
+        due_date: this.dueDate,
+        assignee_id: this.assignee ? this.assignee.id : null,
+        label_ids: this.labels.map((label) => label.id)
+      }
+    };
+
+    if (!data.issue.label_ids.length) {
+      data.issue.label_ids = [''];
+    }
+
+    return Vue.http.patch(url, data);
+  }
+}
+
+window.ListIssue = ListIssue;
diff --git a/app/assets/javascripts/boards/models/issue.js.es6 b/app/assets/javascripts/boards/models/issue.js.es6
deleted file mode 100644
index 21d735e8231..00000000000
--- a/app/assets/javascripts/boards/models/issue.js.es6
+++ /dev/null
@@ -1,68 +0,0 @@
-/* eslint-disable */
-class ListIssue {
-  constructor (obj) {
-    this.id = obj.iid;
-    this.title = obj.title;
-    this.confidential = obj.confidential;
-    this.dueDate = obj.due_date;
-    this.subscribed = obj.subscribed;
-    this.labels = [];
-
-    if (obj.assignee) {
-      this.assignee = new ListUser(obj.assignee);
-    }
-
-    if (obj.milestone) {
-      this.milestone = new ListMilestone(obj.milestone);
-    }
-
-    obj.labels.forEach((label) => {
-      this.labels.push(new ListLabel(label));
-    });
-
-    this.priority = this.labels.reduce((max, label) => {
-      return (label.priority < max) ? label.priority : max;
-    }, Infinity);
-  }
-
-  addLabel (label) {
-    if (!this.findLabel(label)) {
-      this.labels.push(new ListLabel(label));
-    }
-  }
-
-  findLabel (findLabel) {
-    return this.labels.filter( label => label.title === findLabel.title )[0];
-  }
-
-  removeLabel (removeLabel) {
-    if (removeLabel) {
-      this.labels = this.labels.filter( label => removeLabel.title !== label.title );
-    }
-  }
-
-  removeLabels (labels) {
-    labels.forEach(this.removeLabel.bind(this));
-  }
-
-  getLists () {
-    return gl.issueBoards.BoardsStore.state.lists.filter( list => list.findIssue(this.id) );
-  }
-
-  update (url) {
-    const data = {
-      issue: {
-        milestone_id: this.milestone ? this.milestone.id : null,
-        due_date: this.dueDate,
-        assignee_id: this.assignee ? this.assignee.id : null,
-        label_ids: this.labels.map( (label) => label.id )
-      }
-    };
-
-    if (!data.issue.label_ids.length) {
-      data.issue.label_ids = [''];
-    }
-
-    return Vue.http.patch(url, data);
-  }
-}
diff --git a/app/assets/javascripts/boards/models/label.js b/app/assets/javascripts/boards/models/label.js
new file mode 100644
index 00000000000..9af88d167d6
--- /dev/null
+++ b/app/assets/javascripts/boards/models/label.js
@@ -0,0 +1,14 @@
+/* eslint-disable no-unused-vars, space-before-function-paren */
+
+class ListLabel {
+  constructor (obj) {
+    this.id = obj.id;
+    this.title = obj.title;
+    this.color = obj.color;
+    this.textColor = obj.text_color;
+    this.description = obj.description;
+    this.priority = (obj.priority !== null) ? obj.priority : Infinity;
+  }
+}
+
+window.ListLabel = ListLabel;
diff --git a/app/assets/javascripts/boards/models/label.js.es6 b/app/assets/javascripts/boards/models/label.js.es6
deleted file mode 100644
index 0910fe9a854..00000000000
--- a/app/assets/javascripts/boards/models/label.js.es6
+++ /dev/null
@@ -1,11 +0,0 @@
-/* eslint-disable */
-class ListLabel {
-  constructor (obj) {
-    this.id = obj.id;
-    this.title = obj.title;
-    this.color = obj.color;
-    this.textColor = obj.text_color;
-    this.description = obj.description;
-    this.priority = (obj.priority !== null) ? obj.priority : Infinity;
-  }
-}
diff --git a/app/assets/javascripts/boards/models/list.js b/app/assets/javascripts/boards/models/list.js
new file mode 100644
index 00000000000..91e5fb2a666
--- /dev/null
+++ b/app/assets/javascripts/boards/models/list.js
@@ -0,0 +1,172 @@
+/* eslint-disable space-before-function-paren, no-underscore-dangle, class-methods-use-this, consistent-return, no-shadow, no-param-reassign, max-len, no-unused-vars */
+/* global ListIssue */
+/* global ListLabel */
+import queryData from '../utils/query_data';
+
+class List {
+  constructor (obj) {
+    this.id = obj.id;
+    this._uid = this.guid();
+    this.position = obj.position;
+    this.title = obj.title;
+    this.type = obj.list_type;
+    this.preset = ['closed', 'blank'].indexOf(this.type) > -1;
+    this.page = 1;
+    this.loading = true;
+    this.loadingMore = false;
+    this.issues = [];
+    this.issuesSize = 0;
+
+    if (obj.label) {
+      this.label = new ListLabel(obj.label);
+    }
+
+    if (this.type !== 'blank' && this.id) {
+      this.getIssues();
+    }
+  }
+
+  guid() {
+    const s4 = () => Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
+    return `${s4()}${s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`;
+  }
+
+  save () {
+    return gl.boardService.createList(this.label.id)
+      .then((resp) => {
+        const data = resp.json();
+
+        this.id = data.id;
+        this.type = data.list_type;
+        this.position = data.position;
+
+        return this.getIssues();
+      });
+  }
+
+  destroy () {
+    const index = gl.issueBoards.BoardsStore.state.lists.indexOf(this);
+    gl.issueBoards.BoardsStore.state.lists.splice(index, 1);
+    gl.issueBoards.BoardsStore.updateNewListDropdown(this.id);
+
+    gl.boardService.destroyList(this.id);
+  }
+
+  update () {
+    gl.boardService.updateList(this.id, this.position);
+  }
+
+  nextPage () {
+    if (this.issuesSize > this.issues.length) {
+      this.page += 1;
+
+      return this.getIssues(false);
+    }
+  }
+
+  getIssues (emptyIssues = true) {
+    const data = queryData(gl.issueBoards.BoardsStore.filter.path, { page: this.page });
+
+    if (this.label && data.label_name) {
+      data.label_name = data.label_name.filter(label => label !== this.label.title);
+    }
+
+    if (emptyIssues) {
+      this.loading = true;
+    }
+
+    return gl.boardService.getIssuesForList(this.id, data)
+      .then((resp) => {
+        const data = resp.json();
+        this.loading = false;
+        this.issuesSize = data.size;
+
+        if (emptyIssues) {
+          this.issues = [];
+        }
+
+        this.createIssues(data.issues);
+      });
+  }
+
+  newIssue (issue) {
+    this.addIssue(issue);
+    this.issuesSize += 1;
+
+    return gl.boardService.newIssue(this.id, issue)
+      .then((resp) => {
+        const data = resp.json();
+        issue.id = data.iid;
+      });
+  }
+
+  createIssues (data) {
+    data.forEach((issueObj) => {
+      this.addIssue(new ListIssue(issueObj));
+    });
+  }
+
+  addIssue (issue, listFrom, newIndex) {
+    let moveBeforeIid = null;
+    let moveAfterIid = null;
+
+    if (!this.findIssue(issue.id)) {
+      if (newIndex !== undefined) {
+        this.issues.splice(newIndex, 0, issue);
+
+        if (this.issues[newIndex - 1]) {
+          moveBeforeIid = this.issues[newIndex - 1].id;
+        }
+
+        if (this.issues[newIndex + 1]) {
+          moveAfterIid = this.issues[newIndex + 1].id;
+        }
+      } else {
+        this.issues.push(issue);
+      }
+
+      if (this.label) {
+        issue.addLabel(this.label);
+      }
+
+      if (listFrom) {
+        this.issuesSize += 1;
+
+        this.updateIssueLabel(issue, listFrom, moveBeforeIid, moveAfterIid);
+      }
+    }
+  }
+
+  moveIssue (issue, oldIndex, newIndex, moveBeforeIid, moveAfterIid) {
+    this.issues.splice(oldIndex, 1);
+    this.issues.splice(newIndex, 0, issue);
+
+    gl.boardService.moveIssue(issue.id, null, null, moveBeforeIid, moveAfterIid);
+  }
+
+  updateIssueLabel(issue, listFrom, moveBeforeIid, moveAfterIid) {
+    gl.boardService.moveIssue(issue.id, listFrom.id, this.id, moveBeforeIid, moveAfterIid)
+      .then(() => {
+        listFrom.getIssues(false);
+      });
+  }
+
+  findIssue (id) {
+    return this.issues.filter(issue => issue.id === id)[0];
+  }
+
+  removeIssue (removeIssue) {
+    this.issues = this.issues.filter((issue) => {
+      const matchesRemove = removeIssue.id === issue.id;
+
+      if (matchesRemove) {
+        this.issuesSize -= 1;
+        issue.removeLabel(this.label);
+      }
+
+      return !matchesRemove;
+    });
+  }
+}
+
+window.List = List;
diff --git a/app/assets/javascripts/boards/models/list.js.es6 b/app/assets/javascripts/boards/models/list.js.es6
deleted file mode 100644
index b331a26fed5..00000000000
--- a/app/assets/javascripts/boards/models/list.js.es6
+++ /dev/null
@@ -1,142 +0,0 @@
-/* eslint-disable */
-class List {
-  constructor (obj) {
-    this.id = obj.id;
-    this._uid = this.guid();
-    this.position = obj.position;
-    this.title = obj.title;
-    this.type = obj.list_type;
-    this.preset = ['backlog', 'done', 'blank'].indexOf(this.type) > -1;
-    this.filters = gl.issueBoards.BoardsStore.state.filters;
-    this.page = 1;
-    this.loading = true;
-    this.loadingMore = false;
-    this.issues = [];
-    this.issuesSize = 0;
-
-    if (obj.label) {
-      this.label = new ListLabel(obj.label);
-    }
-
-    if (this.type !== 'blank' && this.id) {
-      this.getIssues();
-    }
-  }
-
-  guid() {
-    const s4 = () => Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
-    return `${s4()}${s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`;
-  }
-
-  save () {
-    return gl.boardService.createList(this.label.id)
-      .then((resp) => {
-        const data = resp.json();
-
-        this.id = data.id;
-        this.type = data.list_type;
-        this.position = data.position;
-
-        return this.getIssues();
-      });
-  }
-
-  destroy () {
-    gl.issueBoards.BoardsStore.state.lists.$remove(this);
-    gl.issueBoards.BoardsStore.updateNewListDropdown(this.id);
-
-    gl.boardService.destroyList(this.id);
-  }
-
-  update () {
-    gl.boardService.updateList(this.id, this.position);
-  }
-
-  nextPage () {
-    if (this.issuesSize > this.issues.length) {
-      this.page++;
-
-      return this.getIssues(false);
-    }
-  }
-
-  getIssues (emptyIssues = true) {
-    const filters = this.filters;
-    let data = { page: this.page };
-
-    Object.keys(filters).forEach((key) => { data[key] = filters[key]; });
-
-    if (this.label) {
-      data.label_name = data.label_name.filter( label => label !== this.label.title );
-    }
-
-    if (emptyIssues) {
-      this.loading = true;
-    }
-
-    return gl.boardService.getIssuesForList(this.id, data)
-      .then((resp) => {
-        const data = resp.json();
-        this.loading = false;
-        this.issuesSize = data.size;
-
-        if (emptyIssues) {
-          this.issues = [];
-        }
-
-        this.createIssues(data.issues);
-      });
-  }
-
-  newIssue (issue) {
-    this.addIssue(issue);
-    this.issuesSize++;
-
-    return gl.boardService.newIssue(this.id, issue)
-      .then((resp) => {
-        const data = resp.json();
-        issue.id = data.iid;
-      });
-  }
-
-  createIssues (data) {
-    data.forEach((issueObj) => {
-      this.addIssue(new ListIssue(issueObj));
-    });
-  }
-
-  addIssue (issue, listFrom) {
-    if (!this.findIssue(issue.id)) {
-      this.issues.push(issue);
-
-      if (this.label) {
-        issue.addLabel(this.label);
-      }
-
-      if (listFrom) {
-        this.issuesSize++;
-        gl.boardService.moveIssue(issue.id, listFrom.id, this.id)
-          .then(() => {
-            listFrom.getIssues(false);
-          });
-      }
-    }
-  }
-
-  findIssue (id) {
-    return this.issues.filter( issue => issue.id === id )[0];
-  }
-
-  removeIssue (removeIssue) {
-    this.issues = this.issues.filter((issue) => {
-      const matchesRemove = removeIssue.id === issue.id;
-
-      if (matchesRemove) {
-        this.issuesSize--;
-        issue.removeLabel(this.label);
-      }
-
-      return !matchesRemove;
-    });
-  }
-}
diff --git a/app/assets/javascripts/boards/models/milestone.js b/app/assets/javascripts/boards/models/milestone.js
new file mode 100644
index 00000000000..c867b06d320
--- /dev/null
+++ b/app/assets/javascripts/boards/models/milestone.js
@@ -0,0 +1,10 @@
+/* eslint-disable no-unused-vars */
+
+class ListMilestone {
+  constructor(obj) {
+    this.id = obj.id;
+    this.title = obj.title;
+  }
+}
+
+window.ListMilestone = ListMilestone;
diff --git a/app/assets/javascripts/boards/models/milestone.js.es6 b/app/assets/javascripts/boards/models/milestone.js.es6
deleted file mode 100644
index a48969e19c9..00000000000
--- a/app/assets/javascripts/boards/models/milestone.js.es6
+++ /dev/null
@@ -1,7 +0,0 @@
-/* eslint-disable */
-class ListMilestone {
-  constructor (obj) {
-    this.id = obj.id;
-    this.title = obj.title;
-  }
-}
diff --git a/app/assets/javascripts/boards/models/user.js b/app/assets/javascripts/boards/models/user.js
new file mode 100644
index 00000000000..8e9de4d4cbb
--- /dev/null
+++ b/app/assets/javascripts/boards/models/user.js
@@ -0,0 +1,12 @@
+/* eslint-disable no-unused-vars */
+
+class ListUser {
+  constructor(user) {
+    this.id = user.id;
+    this.name = user.name;
+    this.username = user.username;
+    this.avatar = user.avatar_url;
+  }
+}
+
+window.ListUser = ListUser;
diff --git a/app/assets/javascripts/boards/models/user.js.es6 b/app/assets/javascripts/boards/models/user.js.es6
deleted file mode 100644
index 583a973fc46..00000000000
--- a/app/assets/javascripts/boards/models/user.js.es6
+++ /dev/null
@@ -1,9 +0,0 @@
-/* eslint-disable */
-class ListUser {
-  constructor (user) {
-    this.id = user.id;
-    this.name = user.name;
-    this.username = user.username;
-    this.avatar = user.avatar_url;
-  }
-}
diff --git a/app/assets/javascripts/boards/services/board_service.js b/app/assets/javascripts/boards/services/board_service.js
new file mode 100644
index 00000000000..db9bced2f89
--- /dev/null
+++ b/app/assets/javascripts/boards/services/board_service.js
@@ -0,0 +1,98 @@
+/* eslint-disable space-before-function-paren, comma-dangle, no-param-reassign, camelcase, max-len, no-unused-vars */
+
+import Vue from 'vue';
+
+class BoardService {
+  constructor (root, bulkUpdatePath, boardId) {
+    this.boards = Vue.resource(`${root}{/id}.json`, {}, {
+      issues: {
+        method: 'GET',
+        url: `${root}/${boardId}/issues.json`
+      }
+    });
+    this.lists = Vue.resource(`${root}/${boardId}/lists{/id}`, {}, {
+      generate: {
+        method: 'POST',
+        url: `${root}/${boardId}/lists/generate.json`
+      }
+    });
+    this.issue = Vue.resource(`${root}/${boardId}/issues{/id}`, {});
+    this.issues = Vue.resource(`${root}/${boardId}/lists{/id}/issues`, {}, {
+      bulkUpdate: {
+        method: 'POST',
+        url: bulkUpdatePath,
+      },
+    });
+
+    Vue.http.interceptors.push((request, next) => {
+      request.headers['X-CSRF-Token'] = $.rails.csrfToken();
+      next();
+    });
+  }
+
+  all () {
+    return this.lists.get();
+  }
+
+  generateDefaultLists () {
+    return this.lists.generate({});
+  }
+
+  createList (label_id) {
+    return this.lists.save({}, {
+      list: {
+        label_id
+      }
+    });
+  }
+
+  updateList (id, position) {
+    return this.lists.update({ id }, {
+      list: {
+        position
+      }
+    });
+  }
+
+  destroyList (id) {
+    return this.lists.delete({ id });
+  }
+
+  getIssuesForList (id, filter = {}) {
+    const data = { id };
+    Object.keys(filter).forEach((key) => { data[key] = filter[key]; });
+
+    return this.issues.get(data);
+  }
+
+  moveIssue (id, from_list_id = null, to_list_id = null, move_before_iid = null, move_after_iid = null) {
+    return this.issue.update({ id }, {
+      from_list_id,
+      to_list_id,
+      move_before_iid,
+      move_after_iid,
+    });
+  }
+
+  newIssue (id, issue) {
+    return this.issues.save({ id }, {
+      issue
+    });
+  }
+
+  getBacklog(data) {
+    return this.boards.issues(data);
+  }
+
+  bulkUpdate(issueIds, extraData = {}) {
+    const data = {
+      update: Object.assign(extraData, {
+        issuable_ids: issueIds.join(','),
+      }),
+    };
+
+    return this.issues.bulkUpdate(data);
+  }
+}
+
+window.BoardService = BoardService;
diff --git a/app/assets/javascripts/boards/services/board_service.js.es6 b/app/assets/javascripts/boards/services/board_service.js.es6
deleted file mode 100644
index f59a2ed7937..00000000000
--- a/app/assets/javascripts/boards/services/board_service.js.es6
+++ /dev/null
@@ -1,66 +0,0 @@
-/* eslint-disable */
-class BoardService {
-  constructor (root, boardId) {
-    this.lists = Vue.resource(`${root}/${boardId}/lists{/id}`, {}, {
-      generate: {
-        method: 'POST',
-        url: `${root}/${boardId}/lists/generate.json`
-      }
-    });
-    this.issue = Vue.resource(`${root}/${boardId}/issues{/id}`, {});
-    this.issues = Vue.resource(`${root}/${boardId}/lists{/id}/issues`, {});
-
-    Vue.http.interceptors.push((request, next) => {
-      request.headers['X-CSRF-Token'] = $.rails.csrfToken();
-      next();
-    });
-  }
-
-  all () {
-    return this.lists.get();
-  }
-
-  generateDefaultLists () {
-    return this.lists.generate({});
-  }
-
-  createList (label_id) {
-    return this.lists.save({}, {
-      list: {
-        label_id
-      }
-    });
-  }
-
-  updateList (id, position) {
-    return this.lists.update({ id }, {
-      list: {
-        position
-      }
-    });
-  }
-
-  destroyList (id) {
-    return this.lists.delete({ id });
-  }
-
-  getIssuesForList (id, filter = {}) {
-    let data = { id };
-    Object.keys(filter).forEach((key) => { data[key] = filter[key]; });
-
-    return this.issues.get(data);
-  }
-
-  moveIssue (id, from_list_id, to_list_id) {
-    return this.issue.update({ id }, {
-      from_list_id,
-      to_list_id
-    });
-  }
-
-  newIssue (id, issue) {
-    return this.issues.save({ id }, {
-      issue
-    });
-  }
-};
diff --git a/app/assets/javascripts/boards/stores/boards_store.js b/app/assets/javascripts/boards/stores/boards_store.js
new file mode 100644
index 00000000000..bcda70d0638
--- /dev/null
+++ b/app/assets/javascripts/boards/stores/boards_store.js
@@ -0,0 +1,127 @@
+/* eslint-disable comma-dangle, space-before-function-paren, one-var, no-shadow, dot-notation, max-len */
+/* global List */
+
+import Cookies from 'js-cookie';
+
+(() => {
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
+  gl.issueBoards.BoardsStore = {
+    disabled: false,
+    filter: {
+      path: '',
+    },
+    state: {},
+    detail: {
+      issue: {}
+    },
+    moving: {
+      issue: {},
+      list: {}
+    },
+    create () {
+      this.state.lists = [];
+      this.filter.path = gl.utils.getUrlParamsArray().join('&');
+    },
+    addList (listObj) {
+      const list = new List(listObj);
+      this.state.lists.push(list);
+
+      return list;
+    },
+    new (listObj) {
+      const list = this.addList(listObj);
+
+      list
+        .save()
+        .then(() => {
+          this.state.lists = _.sortBy(this.state.lists, 'position');
+        });
+      this.removeBlankState();
+    },
+    updateNewListDropdown (listId) {
+      $(`.js-board-list-${listId}`).removeClass('is-active');
+    },
+    shouldAddBlankState () {
+      // Decide whether to add the blank state
+      return !(this.state.lists.filter(list => list.type !== 'closed')[0]);
+    },
+    addBlankState () {
+      if (!this.shouldAddBlankState() || this.welcomeIsHidden() || this.disabled) return;
+
+      this.addList({
+        id: 'blank',
+        list_type: 'blank',
+        title: 'Welcome to your Issue Board!',
+        position: 0
+      });
+
+      this.state.lists = _.sortBy(this.state.lists, 'position');
+    },
+    removeBlankState () {
+      this.removeList('blank');
+
+      Cookies.set('issue_board_welcome_hidden', 'true', {
+        expires: 365 * 10,
+        path: ''
+      });
+    },
+    welcomeIsHidden () {
+      return Cookies.get('issue_board_welcome_hidden') === 'true';
+    },
+    removeList (id, type = 'blank') {
+      const list = this.findList('id', id, type);
+
+      if (!list) return;
+
+      this.state.lists = this.state.lists.filter(list => list.id !== id);
+    },
+    moveList (listFrom, orderLists) {
+      orderLists.forEach((id, i) => {
+        const list = this.findList('id', parseInt(id, 10));
+
+        list.position = i;
+      });
+      listFrom.update();
+    },
+    moveIssueToList (listFrom, listTo, issue, newIndex) {
+      const issueTo = listTo.findIssue(issue.id);
+      const issueLists = issue.getLists();
+      const listLabels = issueLists.map(listIssue => listIssue.label);
+
+      if (!issueTo) {
+        // Add to new lists issues if it doesn't already exist
+        listTo.addIssue(issue, listFrom, newIndex);
+      } else {
+        listTo.updateIssueLabel(issue, listFrom);
+        issueTo.removeLabel(listFrom.label);
+      }
+
+      if (listTo.type === 'closed') {
+        issueLists.forEach((list) => {
+          list.removeIssue(issue);
+        });
+        issue.removeLabels(listLabels);
+      } else {
+        listFrom.removeIssue(issue);
+      }
+    },
+    moveIssueInList (list, issue, oldIndex, newIndex, idArray) {
+      const beforeId = parseInt(idArray[newIndex - 1], 10) || null;
+      const afterId = parseInt(idArray[newIndex + 1], 10) || null;
+
+      list.moveIssue(issue, oldIndex, newIndex, beforeId, afterId);
+    },
+    findList (key, val, type = 'label') {
+      return this.state.lists.filter((list) => {
+        const byType = type ? list['type'] === type : true;
+
+        return list[key] === val && byType;
+      })[0];
+    },
+    updateFiltersUrl () {
+      history.pushState(null, null, `?${this.filter.path}`);
+    }
+  };
+})();
diff --git a/app/assets/javascripts/boards/stores/boards_store.js.es6 b/app/assets/javascripts/boards/stores/boards_store.js.es6
deleted file mode 100644
index 175e034afed..00000000000
--- a/app/assets/javascripts/boards/stores/boards_store.js.es6
+++ /dev/null
@@ -1,118 +0,0 @@
-/* eslint-disable */
-(() => {
-  window.gl = window.gl || {};
-  window.gl.issueBoards = window.gl.issueBoards || {};
-
-  gl.issueBoards.BoardsStore = {
-    disabled: false,
-    state: {},
-    detail: {
-      issue: {}
-    },
-    moving: {
-      issue: {},
-      list: {}
-    },
-    create () {
-      this.state.lists = [];
-      this.state.filters = {
-        author_id: gl.utils.getParameterValues('author_id')[0],
-        assignee_id: gl.utils.getParameterValues('assignee_id')[0],
-        milestone_title: gl.utils.getParameterValues('milestone_title')[0],
-        label_name: gl.utils.getParameterValues('label_name[]'),
-        search: ''
-      };
-    },
-    addList (listObj) {
-      const list = new List(listObj);
-      this.state.lists.push(list);
-
-      return list;
-    },
-    new (listObj) {
-      const list = this.addList(listObj),
-            backlogList = this.findList('type', 'backlog', 'backlog');
-
-      list
-        .save()
-        .then(() => {
-          // Remove any new issues from the backlog
-          // as they will be visible in the new list
-          list.issues.forEach(backlogList.removeIssue.bind(backlogList));
-        });
-      this.removeBlankState();
-    },
-    updateNewListDropdown (listId) {
-      $(`.js-board-list-${listId}`).removeClass('is-active');
-    },
-    shouldAddBlankState () {
-      // Decide whether to add the blank state
-      return !(this.state.lists.filter( list => list.type !== 'backlog' && list.type !== 'done' )[0]);
-    },
-    addBlankState () {
-      if (!this.shouldAddBlankState() || this.welcomeIsHidden() || this.disabled) return;
-
-      this.addList({
-        id: 'blank',
-        list_type: 'blank',
-        title: 'Welcome to your Issue Board!',
-        position: 0
-      });
-    },
-    removeBlankState () {
-      this.removeList('blank');
-
-      Cookies.set('issue_board_welcome_hidden', 'true', {
-        expires: 365 * 10,
-        path: ''
-      });
-    },
-    welcomeIsHidden () {
-      return Cookies.get('issue_board_welcome_hidden') === 'true';
-    },
-    removeList (id, type = 'blank') {
-      const list = this.findList('id', id, type);
-
-      if (!list) return;
-
-      this.state.lists = this.state.lists.filter( list => list.id !== id );
-    },
-    moveList (listFrom, orderLists) {
-      orderLists.forEach((id, i) => {
-        const list = this.findList('id', parseInt(id));
-
-        list.position = i;
-      });
-      listFrom.update();
-    },
-    moveIssueToList (listFrom, listTo, issue) {
-      const issueTo = listTo.findIssue(issue.id),
-            issueLists = issue.getLists(),
-            listLabels = issueLists.map( listIssue => listIssue.label );
-
-      // Add to new lists issues if it doesn't already exist
-      if (!issueTo) {
-        listTo.addIssue(issue, listFrom);
-      }
-
-      if (listTo.type === 'done' && listFrom.type !== 'backlog') {
-        issueLists.forEach((list) => {
-          list.removeIssue(issue);
-        })
-        issue.removeLabels(listLabels);
-      } else {
-        listFrom.removeIssue(issue);
-      }
-    },
-    findList (key, val, type = 'label') {
-      return this.state.lists.filter((list) => {
-        const byType = type ? list['type'] === type : true;
-
-        return list[key] === val && byType;
-      })[0];
-    },
-    updateFiltersUrl () {
-      history.pushState(null, null, `?${$.param(this.state.filters)}`);
-    }
-  };
-})();
diff --git a/app/assets/javascripts/boards/stores/modal_store.js b/app/assets/javascripts/boards/stores/modal_store.js
new file mode 100644
index 00000000000..9b009483a3c
--- /dev/null
+++ b/app/assets/javascripts/boards/stores/modal_store.js
@@ -0,0 +1,100 @@
+(() => {
+  window.gl = window.gl || {};
+  window.gl.issueBoards = window.gl.issueBoards || {};
+
+  class ModalStore {
+    constructor() {
+      this.store = {
+        columns: 3,
+        issues: [],
+        issuesCount: false,
+        selectedIssues: [],
+        showAddIssuesModal: false,
+        activeTab: 'all',
+        selectedList: null,
+        searchTerm: '',
+        loading: false,
+        loadingNewPage: false,
+        filterLoading: false,
+        page: 1,
+        perPage: 50,
+        filter: {
+          path: '',
+        },
+      };
+    }
+
+    selectedCount() {
+      return this.getSelectedIssues().length;
+    }
+
+    toggleIssue(issueObj) {
+      const issue = issueObj;
+      const selected = issue.selected;
+
+      issue.selected = !selected;
+
+      if (!selected) {
+        this.addSelectedIssue(issue);
+      } else {
+        this.removeSelectedIssue(issue);
+      }
+    }
+
+    toggleAll() {
+      const select = this.selectedCount() !== this.store.issues.length;
+
+      this.store.issues.forEach((issue) => {
+        const issueUpdate = issue;
+
+        if (issueUpdate.selected !== select) {
+          issueUpdate.selected = select;
+
+          if (select) {
+            this.addSelectedIssue(issue);
+          } else {
+            this.removeSelectedIssue(issue);
+          }
+        }
+      });
+    }
+
+    getSelectedIssues() {
+      return this.store.selectedIssues.filter(issue => issue.selected);
+    }
+
+    addSelectedIssue(issue) {
+      const index = this.selectedIssueIndex(issue);
+
+      if (index === -1) {
+        this.store.selectedIssues.push(issue);
+      }
+    }
+
+    removeSelectedIssue(issue, forcePurge = false) {
+      if (this.store.activeTab === 'all' || forcePurge) {
+        this.store.selectedIssues = this.store.selectedIssues
+          .filter(fIssue => fIssue.id !== issue.id);
+      }
+    }
+
+    purgeUnselectedIssues() {
+      this.store.selectedIssues.forEach((issue) => {
+        if (!issue.selected) {
+          this.removeSelectedIssue(issue, true);
+        }
+      });
+    }
+
+    selectedIssueIndex(issue) {
+      return this.store.selectedIssues.indexOf(issue);
+    }
+
+    findSelectedIssue(issue) {
+      return this.store.selectedIssues
+        .filter(filteredIssue => filteredIssue.id === issue.id)[0];
+    }
+  }
+
+  gl.issueBoards.ModalStore = new ModalStore();
+})();
diff --git a/app/assets/javascripts/boards/test_utils/simulate_drag.js b/app/assets/javascripts/boards/test_utils/simulate_drag.js
deleted file mode 100644
index 039ca491cf5..00000000000
--- a/app/assets/javascripts/boards/test_utils/simulate_drag.js
+++ /dev/null
@@ -1,120 +0,0 @@
-/* eslint-disable */
-(function () {
-	'use strict';
-
-	function simulateEvent(el, type, options) {
-		var event;
-		if (!el) return;
-		var ownerDocument = el.ownerDocument;
-
-		options = options || {};
-
-		if (/^mouse/.test(type)) {
-			event = ownerDocument.createEvent('MouseEvents');
-			event.initMouseEvent(type, true, true, ownerDocument.defaultView,
-				options.button, options.screenX, options.screenY, options.clientX, options.clientY,
-				options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, el);
-		} else {
-			event = ownerDocument.createEvent('CustomEvent');
-
-			event.initCustomEvent(type, true, true, ownerDocument.defaultView,
-				options.button, options.screenX, options.screenY, options.clientX, options.clientY,
-				options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, el);
-
-			event.dataTransfer = {
-				data: {},
-
-				setData: function (type, val) {
-					this.data[type] = val;
-				},
-
-				getData: function (type) {
-					return this.data[type];
-				}
-			};
-		}
-
-		if (el.dispatchEvent) {
-			el.dispatchEvent(event);
-		} else if (el.fireEvent) {
-			el.fireEvent('on' + type, event);
-		}
-
-		return event;
-	}
-
-	function getTraget(target) {
-		var el = typeof target.el === 'string' ? document.getElementById(target.el.substr(1)) : target.el;
-		var children = el.children;
-
-		return (
-			children[target.index] ||
-			children[target.index === 'first' ? 0 : -1] ||
-			children[target.index === 'last' ? children.length - 1 : -1]
-		);
-	}
-
-	function getRect(el) {
-		var rect = el.getBoundingClientRect();
-		var width = rect.right - rect.left;
-		var height = rect.bottom - rect.top;
-
-		return {
-			x: rect.left,
-			y: rect.top,
-			cx: rect.left + width / 2,
-			cy: rect.top + height / 2,
-			w: width,
-			h: height,
-			hw: width / 2,
-			wh: height / 2
-		};
-	}
-
-	function simulateDrag(options, callback) {
-		options.to.el = options.to.el || options.from.el;
-
-		var fromEl = getTraget(options.from);
-		var toEl = getTraget(options.to);
-    var scrollable = options.scrollable;
-
-		var fromRect = getRect(fromEl);
-		var toRect = getRect(toEl);
-
-		var startTime = new Date().getTime();
-		var duration = options.duration || 1000;
-		simulateEvent(fromEl, 'mousedown', {button: 0});
-		options.ontap && options.ontap();
-		window.SIMULATE_DRAG_ACTIVE = 1;
-
-		var dragInterval = setInterval(function loop() {
-			var progress = (new Date().getTime() - startTime) / duration;
-			var x = (fromRect.cx + (toRect.cx - fromRect.cx) * progress) - scrollable.scrollLeft;
-			var y = (fromRect.cy + (toRect.cy - fromRect.cy) * progress) - scrollable.scrollTop;
-			var overEl = fromEl.ownerDocument.elementFromPoint(x, y);
-
-			simulateEvent(overEl, 'mousemove', {
-				clientX: x,
-				clientY: y
-			});
-
-			if (progress >= 1) {
-				options.ondragend && options.ondragend();
-				simulateEvent(toEl, 'mouseup');
-				clearInterval(dragInterval);
-				window.SIMULATE_DRAG_ACTIVE = 0;
-			}
-		}, 100);
-
-		return {
-			target: fromEl,
-			fromList: fromEl.parentNode,
-			toList: toEl.parentNode
-		};
-	}
-
-
-	// Export
-	window.simulateEvent = simulateEvent;
-	window.simulateDrag = simulateDrag;
-})();
diff --git a/app/assets/javascripts/boards/utils/query_data.js b/app/assets/javascripts/boards/utils/query_data.js
new file mode 100644
index 00000000000..2cd3c146f11
--- /dev/null
+++ b/app/assets/javascripts/boards/utils/query_data.js
@@ -0,0 +1,21 @@
+export default (path, extraData) => path.split('&').reduce((dataParam, filterParam) => {
+  if (filterParam === '') return dataParam;
+
+  const data = dataParam;
+  const paramSplit = filterParam.split('=');
+  const paramKeyNormalized = paramSplit[0].replace('[]', '');
+  const isArray = paramSplit[0].indexOf('[]');
+  const value = decodeURIComponent(paramSplit[1]).replace(/\+/g, ' ');
+
+  if (isArray !== -1) {
+    if (!data[paramKeyNormalized]) {
+      data[paramKeyNormalized] = [];
+    }
+
+    data[paramKeyNormalized].push(value);
+  } else {
+    data[paramKeyNormalized] = value;
+  }
+
+  return data;
+}, extraData);
diff --git a/app/assets/javascripts/boards/vue_resource_interceptor.js.es6 b/app/assets/javascripts/boards/vue_resource_interceptor.js.es6
deleted file mode 100644
index 80f137ca12e..00000000000
--- a/app/assets/javascripts/boards/vue_resource_interceptor.js.es6
+++ /dev/null
@@ -1,8 +0,0 @@
-/* eslint-disable */
-Vue.http.interceptors.push((request, next) => {
-  Vue.activeResources = Vue.activeResources ? Vue.activeResources + 1 : 1;
-
-  next(function (response) {
-    Vue.activeResources--;
-  });
-});
diff --git a/app/assets/javascripts/breakpoints.js b/app/assets/javascripts/breakpoints.js
index 5d4d23e26c6..2c1f988d987 100644
--- a/app/assets/javascripts/breakpoints.js
+++ b/app/assets/javascripts/breakpoints.js
@@ -1,71 +1,66 @@
-/* eslint-disable */
-(function() {
-  this.Breakpoints = (function() {
-    var BreakpointInstance, instance;
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, one-var, no-var, one-var-declaration-per-line, quotes, no-shadow, prefer-arrow-callback, prefer-template, consistent-return, no-return-assign, new-parens, no-param-reassign, max-len */
 
-    function Breakpoints() {}
+var Breakpoints = (function() {
+  var BreakpointInstance, instance;
 
-    instance = null;
+  function Breakpoints() {}
 
-    BreakpointInstance = (function() {
-      var BREAKPOINTS;
+  instance = null;
 
-      BREAKPOINTS = ["xs", "sm", "md", "lg"];
+  BreakpointInstance = (function() {
+    var BREAKPOINTS;
 
-      function BreakpointInstance() {
-        this.setup();
-      }
-
-      BreakpointInstance.prototype.setup = function() {
-        var allDeviceSelector, els;
-        allDeviceSelector = BREAKPOINTS.map(function(breakpoint) {
-          return ".device-" + breakpoint;
-        });
-        if ($(allDeviceSelector.join(",")).length) {
-          return;
-        }
-        // Create all the elements
-        els = $.map(BREAKPOINTS, function(breakpoint) {
-          return "<div class='device-" + breakpoint + " visible-" + breakpoint + "'></div>";
-        });
-        return $("body").append(els.join(''));
-      };
-
-      BreakpointInstance.prototype.visibleDevice = function() {
-        var allDeviceSelector;
-        allDeviceSelector = BREAKPOINTS.map(function(breakpoint) {
-          return ".device-" + breakpoint;
-        });
-        return $(allDeviceSelector.join(",")).filter(":visible");
-      };
+    BREAKPOINTS = ["xs", "sm", "md", "lg"];
 
-      BreakpointInstance.prototype.getBreakpointSize = function() {
-        var $visibleDevice;
-        $visibleDevice = this.visibleDevice;
-        // the page refreshed via turbolinks
-        if (!$visibleDevice().length) {
-          this.setup();
-        }
-        $visibleDevice = this.visibleDevice();
-        return $visibleDevice.attr("class").split("visible-")[1];
-      };
+    function BreakpointInstance() {
+      this.setup();
+    }
 
-      return BreakpointInstance;
-
-    })();
+    BreakpointInstance.prototype.setup = function() {
+      var allDeviceSelector, els;
+      allDeviceSelector = BREAKPOINTS.map(function(breakpoint) {
+        return ".device-" + breakpoint;
+      });
+      if ($(allDeviceSelector.join(",")).length) {
+        return;
+      }
+      // Create all the elements
+      els = $.map(BREAKPOINTS, function(breakpoint) {
+        return "<div class='device-" + breakpoint + " visible-" + breakpoint + "'></div>";
+      });
+      return $("body").append(els.join(''));
+    };
 
-    Breakpoints.get = function() {
-      return instance != null ? instance : instance = new BreakpointInstance;
+    BreakpointInstance.prototype.visibleDevice = function() {
+      var allDeviceSelector;
+      allDeviceSelector = BREAKPOINTS.map(function(breakpoint) {
+        return ".device-" + breakpoint;
+      });
+      return $(allDeviceSelector.join(",")).filter(":visible");
     };
 
-    return Breakpoints;
+    BreakpointInstance.prototype.getBreakpointSize = function() {
+      var $visibleDevice;
+      $visibleDevice = this.visibleDevice;
+      // TODO: Consider refactoring in light of turbolinks removal.
+      // the page refreshed via turbolinks
+      if (!$visibleDevice().length) {
+        this.setup();
+      }
+      $visibleDevice = this.visibleDevice();
+      return $visibleDevice.attr("class").split("visible-")[1];
+    };
 
+    return BreakpointInstance;
   })();
 
-  $((function(_this) {
-    return function() {
-      return _this.bp = Breakpoints.get();
-    };
-  })(this));
+  Breakpoints.get = function() {
+    return instance != null ? instance : instance = new BreakpointInstance;
+  };
+
+  return Breakpoints;
+})();
+
+$(() => { window.bp = Breakpoints.get(); });
 
-}).call(this);
+window.Breakpoints = Breakpoints;
diff --git a/app/assets/javascripts/broadcast_message.js b/app/assets/javascripts/broadcast_message.js
index 576f4c76c1e..f73e489e7b2 100644
--- a/app/assets/javascripts/broadcast_message.js
+++ b/app/assets/javascripts/broadcast_message.js
@@ -1,35 +1,33 @@
-/* eslint-disable */
-(function() {
-  $(function() {
-    var previewPath;
-    $('input#broadcast_message_color').on('input', function() {
-      var previewColor;
-      previewColor = $(this).val();
-      return $('div.broadcast-message-preview').css('background-color', previewColor);
-    });
-    $('input#broadcast_message_font').on('input', function() {
-      var previewColor;
-      previewColor = $(this).val();
-      return $('div.broadcast-message-preview').css('color', previewColor);
-    });
-    previewPath = $('textarea#broadcast_message_message').data('preview-path');
-    return $('textarea#broadcast_message_message').on('input', function() {
-      var message;
-      message = $(this).val();
-      if (message === '') {
-        return $('.js-broadcast-message-preview').text("Your message here");
-      } else {
-        return $.ajax({
-          url: previewPath,
-          type: "POST",
-          data: {
-            broadcast_message: {
-              message: message
-            }
+/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, no-var, quotes, no-else-return, object-shorthand, comma-dangle, max-len */
+
+$(function() {
+  var previewPath;
+  $('input#broadcast_message_color').on('input', function() {
+    var previewColor;
+    previewColor = $(this).val();
+    return $('div.broadcast-message-preview').css('background-color', previewColor);
+  });
+  $('input#broadcast_message_font').on('input', function() {
+    var previewColor;
+    previewColor = $(this).val();
+    return $('div.broadcast-message-preview').css('color', previewColor);
+  });
+  previewPath = $('textarea#broadcast_message_message').data('preview-path');
+  return $('textarea#broadcast_message_message').on('input', function() {
+    var message;
+    message = $(this).val();
+    if (message === '') {
+      return $('.js-broadcast-message-preview').text("Your message here");
+    } else {
+      return $.ajax({
+        url: previewPath,
+        type: "POST",
+        data: {
+          broadcast_message: {
+            message: message
           }
-        });
-      }
-    });
+        }
+      });
+    }
   });
-
-}).call(this);
+});
diff --git a/app/assets/javascripts/build.js b/app/assets/javascripts/build.js
index 12e653f4122..6efd26ccc37 100644
--- a/app/assets/javascripts/build.js
+++ b/app/assets/javascripts/build.js
@@ -1,204 +1,283 @@
-/* eslint-disable */
-(function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
-
-  this.Build = (function() {
-    Build.interval = null;
-
-    Build.state = null;
-
-    function Build(options) {
-      this.page_url = options.page_url;
-      this.build_url = options.build_url;
-      this.build_status = options.build_status;
-      this.state = options.state1;
-      this.build_stage = options.build_stage;
-      this.hideSidebar = bind(this.hideSidebar, this);
-      this.toggleSidebar = bind(this.toggleSidebar, this);
-      this.updateDropdown = bind(this.updateDropdown, this);
-      this.$document = $(document);
-      clearInterval(Build.interval);
-      // Init breakpoint checker
-      this.bp = Breakpoints.get();
-      this.initSidebar();
-
-      this.populateJobs(this.build_stage);
-      this.updateStageDropdownText(this.build_stage);
-
-      $(window).off('resize.build').on('resize.build', this.hideSidebar);
-      this.$document.off('click', '.stage-item').on('click', '.stage-item', this.updateDropdown);
-      $('#js-build-scroll > a').off('click').on('click', this.stepTrace);
-      this.updateArtifactRemoveDate();
-      if ($('#build-trace').length) {
-        this.getInitialBuildTrace();
-        this.initScrollButtons();
-      }
-      if (this.build_status === "running" || this.build_status === "pending") {
-        $('#autoscroll-button').on('click', function() {
-          var state;
-          state = $(this).data("state");
-          if ("enabled" === state) {
-            $(this).data("state", "disabled");
-            return $(this).text("enable autoscroll");
-          } else {
-            $(this).data("state", "enabled");
-            return $(this).text("disable autoscroll");
-          }
-        //
-        // Bind autoscroll button to follow build output
-        //
-        });
-        Build.interval = setInterval((function(_this) {
-          return function() {
-            if (window.location.href.split("#").first() === _this.page_url) {
-              return _this.getBuildTrace();
-            }
-          };
-        //
-        // Check for new build output if user still watching build page
-        // Only valid for runnig build when output changes during time
-        //
-        })(this), 4000);
-      }
+/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-use-before-define, no-param-reassign, quotes, yoda, no-else-return, consistent-return, comma-dangle, object-shorthand, prefer-template, one-var, one-var-declaration-per-line, no-unused-vars, max-len, vars-on-top */
+/* global Breakpoints */
+
+var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
+var AUTO_SCROLL_OFFSET = 75;
+var DOWN_BUILD_TRACE = '#down-build-trace';
+
+window.Build = (function() {
+  Build.timeout = null;
+
+  Build.state = null;
+
+  function Build(options) {
+    options = options || $('.js-build-options').data();
+    this.pageUrl = options.pageUrl;
+    this.buildUrl = options.buildUrl;
+    this.buildStatus = options.buildStatus;
+    this.state = options.logState;
+    this.buildStage = options.buildStage;
+    this.updateDropdown = bind(this.updateDropdown, this);
+    this.$document = $(document);
+    this.$body = $('body');
+    this.$buildTrace = $('#build-trace');
+    this.$autoScrollContainer = $('.autoscroll-container');
+    this.$autoScrollStatus = $('#autoscroll-status');
+    this.$autoScrollStatusText = this.$autoScrollStatus.find('.status-text');
+    this.$upBuildTrace = $('#up-build-trace');
+    this.$downBuildTrace = $(DOWN_BUILD_TRACE);
+    this.$scrollTopBtn = $('#scroll-top');
+    this.$scrollBottomBtn = $('#scroll-bottom');
+    this.$buildRefreshAnimation = $('.js-build-refresh');
+
+    clearTimeout(Build.timeout);
+    // Init breakpoint checker
+    this.bp = Breakpoints.get();
+
+    this.initSidebar();
+    this.$buildScroll = $('#js-build-scroll');
+
+    this.populateJobs(this.buildStage);
+    this.updateStageDropdownText(this.buildStage);
+    this.sidebarOnResize();
+
+    this.$document.off('click', '.js-sidebar-build-toggle').on('click', '.js-sidebar-build-toggle', this.sidebarOnClick.bind(this));
+    this.$document.off('click', '.stage-item').on('click', '.stage-item', this.updateDropdown);
+    this.$document.on('scroll', this.initScrollMonitor.bind(this));
+    $(window).off('resize.build').on('resize.build', this.sidebarOnResize.bind(this));
+    $('a', this.$buildScroll).off('click.stepTrace').on('click.stepTrace', this.stepTrace);
+    this.updateArtifactRemoveDate();
+    if ($('#build-trace').length) {
+      this.getInitialBuildTrace();
+      this.initScrollButtonAffix();
     }
+    this.invokeBuildTrace();
+  }
 
-    Build.prototype.initSidebar = function() {
-      this.$sidebar = $('.js-build-sidebar');
-      this.sidebarTranslationLimits = {
-        min: $('.navbar-gitlab').outerHeight() + $('.layout-nav').outerHeight()
-      }
-      this.sidebarTranslationLimits.max = this.sidebarTranslationLimits.min + $('.scrolling-tabs-container').outerHeight();
-      this.$sidebar.css({
-        top: this.sidebarTranslationLimits.max
-      });
-      this.$sidebar.niceScroll();
-      this.hideSidebar();
-      this.$document.off('click', '.js-sidebar-build-toggle').on('click', '.js-sidebar-build-toggle', this.toggleSidebar);
-      this.$document.off('scroll.translateSidebar').on('scroll.translateSidebar', this.translateSidebar.bind(this));
-    };
-
-    Build.prototype.getInitialBuildTrace = function() {
-      var removeRefreshStatuses = ['success', 'failed', 'canceled', 'skipped']
-
-      return $.ajax({
-        url: this.build_url,
-        dataType: 'json',
-        success: function(build_data) {
-          $('.js-build-output').html(build_data.trace_html);
-          if (removeRefreshStatuses.indexOf(build_data.status) >= 0) {
-            return $('.js-build-refresh').remove();
+  Build.prototype.initSidebar = function() {
+    this.$sidebar = $('.js-build-sidebar');
+    this.$sidebar.niceScroll();
+    this.$document.off('click', '.js-sidebar-build-toggle').on('click', '.js-sidebar-build-toggle', this.toggleSidebar);
+  };
+
+  Build.prototype.location = function() {
+    return window.location.href.split("#")[0];
+  };
+
+  Build.prototype.invokeBuildTrace = function() {
+    var continueRefreshStatuses = ['running', 'pending'];
+    // Continue to update build trace when build is running or pending
+    if (continueRefreshStatuses.indexOf(this.buildStatus) !== -1) {
+      // Check for new build output if user still watching build page
+      // Only valid for runnig build when output changes during time
+      Build.timeout = setTimeout((function(_this) {
+        return function() {
+          if (_this.location() === _this.pageUrl) {
+            return _this.getBuildTrace();
           }
+        };
+      })(this), 4000);
+    }
+  };
+
+  Build.prototype.getInitialBuildTrace = function() {
+    var removeRefreshStatuses = ['success', 'failed', 'canceled', 'skipped'];
+
+    return $.ajax({
+      url: this.buildUrl,
+      dataType: 'json',
+      success: function(buildData) {
+        $('.js-build-output').html(buildData.trace_html);
+        if (window.location.hash === DOWN_BUILD_TRACE) {
+          $("html,body").scrollTop(this.$buildTrace.height());
+        }
+        if (removeRefreshStatuses.indexOf(buildData.status) !== -1) {
+          this.$buildRefreshAnimation.remove();
+          return this.initScrollMonitor();
         }
-      });
-    };
-
-    Build.prototype.getBuildTrace = function() {
-      return $.ajax({
-        url: this.page_url + "/trace.json?state=" + (encodeURIComponent(this.state)),
-        dataType: "json",
-        success: (function(_this) {
-          return function(log) {
-            if (log.state) {
-              _this.state = log.state;
+      }.bind(this)
+    });
+  };
+
+  Build.prototype.getBuildTrace = function() {
+    return $.ajax({
+      url: this.pageUrl + "/trace.json?state=" + (encodeURIComponent(this.state)),
+      dataType: "json",
+      success: (function(_this) {
+        return function(log) {
+          var pageUrl;
+
+          if (log.state) {
+            _this.state = log.state;
+          }
+          _this.invokeBuildTrace();
+          if (log.status === "running") {
+            if (log.append) {
+              $('.js-build-output').append(log.html);
+            } else {
+              $('.js-build-output').html(log.html);
             }
-            if (log.status === "running") {
-              if (log.append) {
-                $('.js-build-output').append(log.html);
-              } else {
-                $('.js-build-output').html(log.html);
-              }
-              return _this.checkAutoscroll();
-            } else if (log.status !== _this.build_status) {
-              return Turbolinks.visit(_this.page_url);
+            return _this.checkAutoscroll();
+          } else if (log.status !== _this.buildStatus) {
+            pageUrl = _this.pageUrl;
+            if (_this.$autoScrollStatus.data('state') === 'enabled') {
+              pageUrl += DOWN_BUILD_TRACE;
             }
-          };
-        })(this)
-      });
-    };
-
-    Build.prototype.checkAutoscroll = function() {
-      if ("enabled" === $("#autoscroll-button").data("state")) {
-        return $("html,body").scrollTop($("#build-trace").height());
-      }
-    };
-
-    Build.prototype.initScrollButtons = function() {
-      var $body, $buildScroll, $buildTrace;
-      $buildScroll = $('#js-build-scroll');
-      $body = $('body');
-      $buildTrace = $('#build-trace');
-      return $buildScroll.affix({
-        offset: {
-          bottom: function() {
-            return $body.outerHeight() - ($buildTrace.outerHeight() + $buildTrace.offset().top);
+
+            return gl.utils.visitUrl(pageUrl);
           }
-        }
-      });
-    };
-
-    Build.prototype.shouldHideSidebar = function() {
-      var bootstrapBreakpoint;
-      bootstrapBreakpoint = this.bp.getBreakpointSize();
-      return bootstrapBreakpoint === 'xs' || bootstrapBreakpoint === 'sm';
-    };
-
-    Build.prototype.toggleSidebar = function() {
-      if (this.shouldHideSidebar()) {
-        return this.$sidebar.toggleClass('right-sidebar-expanded right-sidebar-collapsed');
-      }
-    };
-
-    Build.prototype.translateSidebar = function(e) {
-      var newPosition = this.sidebarTranslationLimits.max - (document.body.scrollTop || document.documentElement.scrollTop);
-      if (newPosition < this.sidebarTranslationLimits.min) newPosition = this.sidebarTranslationLimits.min;
-      this.$sidebar.css({
-        top: newPosition
-      });
-    };
-
-    Build.prototype.hideSidebar = function() {
-      if (this.shouldHideSidebar()) {
-        return this.$sidebar.removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed');
+        };
+      })(this)
+    });
+  };
+
+  Build.prototype.checkAutoscroll = function() {
+    if (this.$autoScrollStatus.data("state") === "enabled") {
+      return $("html,body").scrollTop(this.$buildTrace.height());
+    }
+
+    // Handle a situation where user started new build
+    // but never scrolled a page
+    if (!this.$scrollTopBtn.is(':visible') &&
+        !this.$scrollBottomBtn.is(':visible') &&
+        !gl.utils.isInViewport(this.$downBuildTrace.get(0))) {
+      this.$scrollBottomBtn.show();
+    }
+  };
+
+  Build.prototype.initScrollButtonAffix = function() {
+    // Hide everything initially
+    this.$scrollTopBtn.hide();
+    this.$scrollBottomBtn.hide();
+    this.$autoScrollContainer.hide();
+  };
+
+  // Page scroll listener to detect if user has scrolling page
+  // and handle following cases
+  // 1) User is at Top of Build Log;
+  //      - Hide Top Arrow button
+  //      - Show Bottom Arrow button
+  //      - Disable Autoscroll and hide indicator (when build is running)
+  // 2) User is at Bottom of Build Log;
+  //      - Show Top Arrow button
+  //      - Hide Bottom Arrow button
+  //      - Enable Autoscroll and show indicator (when build is running)
+  // 3) User is somewhere in middle of Build Log;
+  //      - Show Top Arrow button
+  //      - Show Bottom Arrow button
+  //      - Disable Autoscroll and hide indicator (when build is running)
+  Build.prototype.initScrollMonitor = function() {
+    if (!gl.utils.isInViewport(this.$upBuildTrace.get(0)) && !gl.utils.isInViewport(this.$downBuildTrace.get(0))) {
+      // User is somewhere in middle of Build Log
+
+      this.$scrollTopBtn.show();
+
+      if (this.buildStatus === 'success' || this.buildStatus === 'failed') { // Check if Build is completed
+        this.$scrollBottomBtn.show();
+      } else if (this.$buildRefreshAnimation.is(':visible') && !gl.utils.isInViewport(this.$buildRefreshAnimation.get(0))) {
+        this.$scrollBottomBtn.show();
       } else {
-        return this.$sidebar.removeClass('right-sidebar-collapsed').addClass('right-sidebar-expanded');
+        this.$scrollBottomBtn.hide();
       }
-    };
-
-    Build.prototype.updateArtifactRemoveDate = function() {
-      var $date, date;
-      $date = $('.js-artifacts-remove');
-      if ($date.length) {
-        date = $date.text();
-        return $date.text($.timefor(new Date(date.replace(/([0-9]+)-([0-9]+)-([0-9]+)/g, '$1/$2/$3')), ' '));
+
+      // Hide Autoscroll Status Indicator
+      if (this.$scrollBottomBtn.is(':visible')) {
+        this.$autoScrollContainer.hide();
+        this.$autoScrollStatusText.removeClass('animate');
+      } else {
+        this.$autoScrollContainer.css({ top: this.$body.outerHeight() - AUTO_SCROLL_OFFSET }).show();
+        this.$autoScrollStatusText.addClass('animate');
       }
-    };
+    } else if (gl.utils.isInViewport(this.$upBuildTrace.get(0)) && !gl.utils.isInViewport(this.$downBuildTrace.get(0))) {
+      // User is at Top of Build Log
+
+      this.$scrollTopBtn.hide();
+      this.$scrollBottomBtn.show();
 
-    Build.prototype.populateJobs = function(stage) {
-      $('.build-job').hide();
-      $('.build-job[data-stage="' + stage + '"]').show();
-    };
+      this.$autoScrollContainer.hide();
+      this.$autoScrollStatusText.removeClass('animate');
+    } else if ((!gl.utils.isInViewport(this.$upBuildTrace.get(0)) && gl.utils.isInViewport(this.$downBuildTrace.get(0))) ||
+               (this.$buildRefreshAnimation.is(':visible') && gl.utils.isInViewport(this.$buildRefreshAnimation.get(0)))) {
+      // User is at Bottom of Build Log
 
-    Build.prototype.updateStageDropdownText = function(stage) {
-      $('.stage-selection').text(stage);
-    };
+      this.$scrollTopBtn.show();
+      this.$scrollBottomBtn.hide();
+
+      // Show and Reposition Autoscroll Status Indicator
+      this.$autoScrollContainer.css({ top: this.$body.outerHeight() - AUTO_SCROLL_OFFSET }).show();
+      this.$autoScrollStatusText.addClass('animate');
+    } else if (gl.utils.isInViewport(this.$upBuildTrace.get(0)) && gl.utils.isInViewport(this.$downBuildTrace.get(0))) {
+      // Build Log height is small
+
+      this.$scrollTopBtn.hide();
+      this.$scrollBottomBtn.hide();
+
+      // Hide Autoscroll Status Indicator
+      this.$autoScrollContainer.hide();
+      this.$autoScrollStatusText.removeClass('animate');
+    }
+
+    if (this.buildStatus === "running" || this.buildStatus === "pending") {
+      // Check if Refresh Animation is in Viewport and enable Autoscroll, disable otherwise.
+      this.$autoScrollStatus.data("state", gl.utils.isInViewport(this.$buildRefreshAnimation.get(0)) ? 'enabled' : 'disabled');
+    }
+  };
+
+  Build.prototype.shouldHideSidebarForViewport = function() {
+    var bootstrapBreakpoint;
+    bootstrapBreakpoint = this.bp.getBreakpointSize();
+    return bootstrapBreakpoint === 'xs' || bootstrapBreakpoint === 'sm';
+  };
+
+  Build.prototype.toggleSidebar = function(shouldHide) {
+    var shouldShow = typeof shouldHide === 'boolean' ? !shouldHide : undefined;
+    this.$buildScroll.toggleClass('sidebar-expanded', shouldShow)
+      .toggleClass('sidebar-collapsed', shouldHide);
+    this.$sidebar.toggleClass('right-sidebar-expanded', shouldShow)
+      .toggleClass('right-sidebar-collapsed', shouldHide);
+  };
+
+  Build.prototype.sidebarOnResize = function() {
+    this.toggleSidebar(this.shouldHideSidebarForViewport());
+  };
+
+  Build.prototype.sidebarOnClick = function() {
+    if (this.shouldHideSidebarForViewport()) this.toggleSidebar();
+  };
+
+  Build.prototype.updateArtifactRemoveDate = function() {
+    var $date, date;
+    $date = $('.js-artifacts-remove');
+    if ($date.length) {
+      date = $date.text();
+      return $date.text(gl.utils.timeFor(new Date(date.replace(/([0-9]+)-([0-9]+)-([0-9]+)/g, '$1/$2/$3')), ' '));
+    }
+  };
 
-    Build.prototype.updateDropdown = function(e) {
-      e.preventDefault();
-      var stage = e.currentTarget.text;
-      this.updateStageDropdownText(stage);
-      this.populateJobs(stage);
-    };
+  Build.prototype.populateJobs = function(stage) {
+    $('.build-job').hide();
+    $('.build-job[data-stage="' + stage + '"]').show();
+  };
 
-    Build.prototype.stepTrace = function(e) {
-      e.preventDefault();
-      $currentTarget = $(e.currentTarget);
-      $.scrollTo($currentTarget.attr('href'), {
-        offset: -($('.navbar-gitlab').outerHeight() + $('.layout-nav').outerHeight())
-      });
-    };
+  Build.prototype.updateStageDropdownText = function(stage) {
+    $('.stage-selection').text(stage);
+  };
 
-    return Build;
+  Build.prototype.updateDropdown = function(e) {
+    e.preventDefault();
+    var stage = e.currentTarget.text;
+    this.updateStageDropdownText(stage);
+    this.populateJobs(stage);
+  };
 
-  })();
+  Build.prototype.stepTrace = function(e) {
+    var $currentTarget;
+    e.preventDefault();
+    $currentTarget = $(e.currentTarget);
+    $.scrollTo($currentTarget.attr('href'), {
+      offset: 0
+    });
+  };
 
-}).call(this);
+  return Build;
+})();
diff --git a/app/assets/javascripts/build_artifacts.js b/app/assets/javascripts/build_artifacts.js
index 49f84581650..bd479700fd3 100644
--- a/app/assets/javascripts/build_artifacts.js
+++ b/app/assets/javascripts/build_artifacts.js
@@ -1,28 +1,25 @@
-/* eslint-disable */
-(function() {
-  this.BuildArtifacts = (function() {
-    function BuildArtifacts() {
-      this.disablePropagation();
-      this.setupEntryClick();
-    }
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, prefer-arrow-callback, no-unused-vars, no-return-assign, max-len */
 
-    BuildArtifacts.prototype.disablePropagation = function() {
-      $('.top-block').on('click', '.download', function(e) {
-        return e.stopPropagation();
-      });
-      return $('.tree-holder').on('click', 'tr[data-link] a', function(e) {
-        return e.stopImmediatePropagation();
-      });
-    };
+window.BuildArtifacts = (function() {
+  function BuildArtifacts() {
+    this.disablePropagation();
+    this.setupEntryClick();
+  }
 
-    BuildArtifacts.prototype.setupEntryClick = function() {
-      return $('.tree-holder').on('click', 'tr[data-link]', function(e) {
-        return window.location = this.dataset.link;
-      });
-    };
+  BuildArtifacts.prototype.disablePropagation = function() {
+    $('.top-block').on('click', '.download', function(e) {
+      return e.stopPropagation();
+    });
+    return $('.tree-holder').on('click', 'tr[data-link] a', function(e) {
+      return e.stopImmediatePropagation();
+    });
+  };
 
-    return BuildArtifacts;
+  BuildArtifacts.prototype.setupEntryClick = function() {
+    return $('.tree-holder').on('click', 'tr[data-link]', function(e) {
+      return window.location = this.dataset.link;
+    });
+  };
 
-  })();
-
-}).call(this);
+  return BuildArtifacts;
+})();
diff --git a/app/assets/javascripts/build_variables.js b/app/assets/javascripts/build_variables.js
new file mode 100644
index 00000000000..99082b412e2
--- /dev/null
+++ b/app/assets/javascripts/build_variables.js
@@ -0,0 +1,8 @@
+/* eslint-disable func-names, prefer-arrow-callback, space-before-function-paren */
+
+$(function() {
+  $('.reveal-variables').off('click').on('click', function() {
+    $('.js-build').toggle().niceScroll();
+    $(this).hide();
+  });
+});
diff --git a/app/assets/javascripts/build_variables.js.es6 b/app/assets/javascripts/build_variables.js.es6
deleted file mode 100644
index 0ecd20bc11e..00000000000
--- a/app/assets/javascripts/build_variables.js.es6
+++ /dev/null
@@ -1,7 +0,0 @@
-/* eslint-disable */
-$(function(){
-  $('.reveal-variables').off('click').on('click',function(){
-    $('.js-build').toggle().niceScroll();
-    $(this).hide();
-  });
-});
diff --git a/app/assets/javascripts/ci_lint_editor.js b/app/assets/javascripts/ci_lint_editor.js
new file mode 100644
index 00000000000..dd4a08a2f31
--- /dev/null
+++ b/app/assets/javascripts/ci_lint_editor.js
@@ -0,0 +1,17 @@
+
+window.gl = window.gl || {};
+
+class CILintEditor {
+  constructor() {
+    this.editor = window.ace.edit('ci-editor');
+    this.textarea = document.querySelector('#content');
+
+    this.editor.getSession().setMode('ace/mode/yaml');
+    this.editor.on('input', () => {
+      const content = this.editor.getSession().getValue();
+      this.textarea.value = content;
+    });
+  }
+}
+
+gl.CILintEditor = CILintEditor;
diff --git a/app/assets/javascripts/commit.js b/app/assets/javascripts/commit.js
index fac5b4f17da..5f637524e30 100644
--- a/app/assets/javascripts/commit.js
+++ b/app/assets/javascripts/commit.js
@@ -1,14 +1,12 @@
-/* eslint-disable */
-(function() {
-  this.Commit = (function() {
-    function Commit() {
-      $('.files .diff-file').each(function() {
-        return new CommitFile(this);
-      });
-    }
+/* eslint-disable func-names, space-before-function-paren, wrap-iife */
+/* global CommitFile */
 
-    return Commit;
+window.Commit = (function() {
+  function Commit() {
+    $('.files .diff-file').each(function() {
+      return new CommitFile(this);
+    });
+  }
 
-  })();
-
-}).call(this);
+  return Commit;
+})();
diff --git a/app/assets/javascripts/commit/file.js b/app/assets/javascripts/commit/file.js
index 16d63729d31..ee087c978dd 100644
--- a/app/assets/javascripts/commit/file.js
+++ b/app/assets/javascripts/commit/file.js
@@ -1,14 +1,14 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-new */
+/* global ImageFile */
+
 (function() {
   this.CommitFile = (function() {
     function CommitFile(file) {
       if ($('.image', file).length) {
-        new ImageFile(file);
+        new gl.ImageFile(file);
       }
     }
 
     return CommitFile;
-
   })();
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/commit/image_file.js b/app/assets/javascripts/commit/image_file.js
index ffddce1297b..17d14dc1e79 100644
--- a/app/assets/javascripts/commit/image_file.js
+++ b/app/assets/javascripts/commit/image_file.js
@@ -1,6 +1,6 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-use-before-define, prefer-arrow-callback, no-else-return, consistent-return, prefer-template, quotes, one-var, one-var-declaration-per-line, no-unused-vars, no-return-assign, comma-dangle, quote-props, no-unused-expressions, no-sequences, object-shorthand, max-len */
 (function() {
-  this.ImageFile = (function() {
+  gl.ImageFile = (function() {
     var prepareFrames;
 
     // Width where images must fits in, for 2-up this gets divided by 2
@@ -52,6 +52,30 @@
       return this.views[viewMode].call(this);
     };
 
+    ImageFile.prototype.initDraggable = function($el, padding, callback) {
+      var dragging = false;
+      var $body = $('body');
+      var $offsetEl = $el.parent();
+
+      $el.off('mousedown').on('mousedown', function() {
+        dragging = true;
+        $body.css('user-select', 'none');
+      });
+
+      $body.off('mouseup').off('mousemove').on('mouseup', function() {
+        dragging = false;
+        $body.css('user-select', '');
+      })
+      .on('mousemove', function(e) {
+        var left;
+        if (!dragging) return;
+
+        left = e.pageX - ($offsetEl.offset().left + padding);
+
+        callback(e, left);
+      });
+    };
+
     prepareFrames = function(view) {
       var maxHeight, maxWidth;
       maxWidth = 0;
@@ -96,26 +120,30 @@
         maxHeight = 0;
         return $('.swipe.view', this.file).each((function(_this) {
           return function(index, view) {
-            var ref;
+            var $swipeWrap, $swipeBar, $swipeFrame, wrapPadding, ref;
             ref = prepareFrames(view), maxWidth = ref[0], maxHeight = ref[1];
-            $('.swipe-frame', view).css({
+            $swipeFrame = $('.swipe-frame', view);
+            $swipeWrap = $('.swipe-wrap', view);
+            $swipeBar = $('.swipe-bar', view);
+
+            $swipeFrame.css({
               width: maxWidth + 16,
               height: maxHeight + 28
             });
-            $('.swipe-wrap', view).css({
+            $swipeWrap.css({
               width: maxWidth + 1,
               height: maxHeight + 2
             });
-            return $('.swipe-bar', view).css({
+            $swipeBar.css({
               left: 0
-            }).draggable({
-              axis: 'x',
-              containment: 'parent',
-              drag: function(event) {
-                return $('.swipe-wrap', view).width((maxWidth + 1) - $(this).position().left);
-              },
-              stop: function(event) {
-                return $('.swipe-wrap', view).width((maxWidth + 1) - $(this).position().left);
+            });
+
+            wrapPadding = parseInt($swipeWrap.css('right').replace('px', ''), 10);
+
+            _this.initDraggable($swipeBar, wrapPadding, function(e, left) {
+              if (left > 0 && left < $swipeFrame.width() - (wrapPadding * 2)) {
+                $swipeWrap.width((maxWidth + 1) - left);
+                $swipeBar.css('left', left);
               }
             });
           };
@@ -128,9 +156,14 @@
         dragTrackWidth = $('.drag-track', this.file).width() - $('.dragger', this.file).width();
         return $('.onion-skin.view', this.file).each((function(_this) {
           return function(index, view) {
-            var ref;
+            var $frame, $track, $dragger, $frameAdded, framePadding, ref, dragging = false;
             ref = prepareFrames(view), maxWidth = ref[0], maxHeight = ref[1];
-            $('.onion-skin-frame', view).css({
+            $frame = $('.onion-skin-frame', view);
+            $frameAdded = $('.frame.added', view);
+            $track = $('.drag-track', view);
+            $dragger = $('.dragger', $track);
+
+            $frame.css({
               width: maxWidth + 16,
               height: maxHeight + 28
             });
@@ -138,16 +171,18 @@
               width: maxWidth + 1,
               height: maxHeight + 2
             });
-            return $('.dragger', view).css({
+            $dragger.css({
               left: dragTrackWidth
-            }).draggable({
-              axis: 'x',
-              containment: 'parent',
-              drag: function(event) {
-                return $('.frame.added', view).css('opacity', $(this).position().left / dragTrackWidth);
-              },
-              stop: function(event) {
-                return $('.frame.added', view).css('opacity', $(this).position().left / dragTrackWidth);
+            });
+
+            framePadding = parseInt($frameAdded.css('right').replace('px', ''), 10);
+
+            _this.initDraggable($dragger, framePadding, function(e, left) {
+              var opacity = left / dragTrackWidth;
+
+              if (opacity >= 0 && opacity <= 1) {
+                $dragger.css('left', left);
+                $frameAdded.css('opacity', opacity);
               }
             });
           };
@@ -172,7 +207,5 @@
     };
 
     return ImageFile;
-
   })();
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_bundle.js b/app/assets/javascripts/commit/pipelines/pipelines_bundle.js
new file mode 100644
index 00000000000..a92e068ca5a
--- /dev/null
+++ b/app/assets/javascripts/commit/pipelines/pipelines_bundle.js
@@ -0,0 +1,32 @@
+/* eslint-disable no-param-reassign */
+
+import Vue from 'vue';
+import VueResource from 'vue-resource';
+import CommitPipelinesTable from './pipelines_table';
+
+Vue.use(VueResource);
+
+/**
+ * Commits View > Pipelines Tab > Pipelines Table.
+ * Merge Request View > Pipelines Tab > Pipelines Table.
+ *
+ * Renders Pipelines table in pipelines tab in the commits show view.
+ * Renders Pipelines table in pipelines tab in the merge request show view.
+ */
+
+$(() => {
+  window.gl = window.gl || {};
+  gl.commits = gl.commits || {};
+  gl.commits.pipelines = gl.commits.pipelines || {};
+
+  if (gl.commits.PipelinesTableBundle) {
+    gl.commits.PipelinesTableBundle.$destroy(true);
+  }
+
+  const pipelineTableViewEl = document.querySelector('#commit-pipeline-table-view');
+  gl.commits.pipelines.PipelinesTableBundle = new CommitPipelinesTable();
+
+  if (pipelineTableViewEl && pipelineTableViewEl.dataset.disableInitialization === undefined) {
+    gl.commits.pipelines.PipelinesTableBundle.$mount(pipelineTableViewEl);
+  }
+});
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.js b/app/assets/javascripts/commit/pipelines/pipelines_table.js
new file mode 100644
index 00000000000..4d5a857d705
--- /dev/null
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.js
@@ -0,0 +1,124 @@
+import Vue from 'vue';
+import PipelinesTableComponent from '../../vue_shared/components/pipelines_table';
+import PipelinesService from '../../vue_pipelines_index/services/pipelines_service';
+import PipelineStore from '../../vue_pipelines_index/stores/pipelines_store';
+import eventHub from '../../vue_pipelines_index/event_hub';
+import EmptyState from '../../vue_pipelines_index/components/empty_state';
+import ErrorState from '../../vue_pipelines_index/components/error_state';
+import '../../lib/utils/common_utils';
+import '../../vue_shared/vue_resource_interceptor';
+
+/**
+ *
+ * Uses `pipelines-table-component` to render Pipelines table with an API call.
+ * Endpoint is provided in HTML and passed as `endpoint`.
+ * We need a store to store the received environemnts.
+ * We need a service to communicate with the server.
+ *
+ * Necessary SVG in the table are provided as props. This should be refactored
+ * as soon as we have Webpack and can load them directly into JS files.
+ */
+
+export default Vue.component('pipelines-table', {
+  components: {
+    'pipelines-table-component': PipelinesTableComponent,
+    'error-state': ErrorState,
+    'empty-state': EmptyState,
+  },
+
+  /**
+   * Accesses the DOM to provide the needed data.
+   * Returns the necessary props to render `pipelines-table-component` component.
+   *
+   * @return {Object}
+   */
+  data() {
+    const store = new PipelineStore();
+
+    return {
+      endpoint: null,
+      helpPagePath: null,
+      store,
+      state: store.state,
+      isLoading: false,
+      hasError: false,
+    };
+  },
+
+  computed: {
+    shouldRenderErrorState() {
+      return this.hasError && !this.isLoading;
+    },
+
+    shouldRenderEmptyState() {
+      return !this.state.pipelines.length && !this.isLoading;
+    },
+  },
+
+  /**
+   * When the component is about to be mounted, tell the service to fetch the data
+   *
+   * A request to fetch the pipelines will be made.
+   * In case of a successfull response we will store the data in the provided
+   * store, in case of a failed response we need to warn the user.
+   *
+   */
+  beforeMount() {
+    this.endpoint = this.$el.dataset.endpoint;
+    this.helpPagePath = this.$el.dataset.helpPagePath;
+    this.service = new PipelinesService(this.endpoint);
+
+    this.fetchPipelines();
+
+    eventHub.$on('refreshPipelines', this.fetchPipelines);
+  },
+
+  beforeUpdate() {
+    if (this.state.pipelines.length && this.$children) {
+      this.store.startTimeAgoLoops.call(this, Vue);
+    }
+  },
+
+  beforeDestroyed() {
+    eventHub.$off('refreshPipelines');
+  },
+
+  methods: {
+    fetchPipelines() {
+      this.isLoading = true;
+      return this.service.getPipelines()
+        .then(response => response.json())
+        .then((json) => {
+          // depending of the endpoint the response can either bring a `pipelines` key or not.
+          const pipelines = json.pipelines || json;
+          this.store.storePipelines(pipelines);
+          this.isLoading = false;
+        })
+        .catch(() => {
+          this.hasError = true;
+          this.isLoading = false;
+        });
+    },
+  },
+
+  template: `
+    <div class="content-list pipelines">
+      <div class="realtime-loading" v-if="isLoading">
+        <i class="fa fa-spinner fa-spin"></i>
+      </div>
+
+      <empty-state
+        v-if="shouldRenderEmptyState"
+        :help-page-path="helpPagePath" />
+
+      <error-state v-if="shouldRenderErrorState" />
+
+      <div class="table-holder"
+        v-if="!isLoading && state.pipelines.length > 0">
+        <pipelines-table-component
+          :pipelines="state.pipelines"
+          :service="service" />
+      </div>
+    </div>
+  `,
+});
diff --git a/app/assets/javascripts/commits.js b/app/assets/javascripts/commits.js
index c765d233831..e3f9eaaf39c 100644
--- a/app/assets/javascripts/commits.js
+++ b/app/assets/javascripts/commits.js
@@ -1,60 +1,66 @@
-/* eslint-disable */
-(function() {
-  this.CommitsList = (function() {
-    function CommitsList() {}
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, quotes, consistent-return, no-return-assign, no-param-reassign, one-var, no-var, one-var-declaration-per-line, no-unused-vars, prefer-template, object-shorthand, comma-dangle, max-len, prefer-arrow-callback */
+/* global Pager */
 
-    CommitsList.timer = null;
+window.CommitsList = (function() {
+  var CommitsList = {};
 
-    CommitsList.init = function(limit) {
-      $("body").on("click", ".day-commits-table li.commit", function(event) {
-        if (event.target.nodeName !== "A") {
-          location.href = $(this).attr("url");
-          e.stopPropagation();
-          return false;
-        }
-      });
-      Pager.init(limit, false);
-      this.content = $("#commits-list");
-      this.searchField = $("#commits-search");
-      return this.initSearch();
-    };
+  CommitsList.timer = null;
 
-    CommitsList.initSearch = function() {
-      this.timer = null;
-      return this.searchField.keyup((function(_this) {
-        return function() {
-          clearTimeout(_this.timer);
-          return _this.timer = setTimeout(_this.filterResults, 500);
-        };
-      })(this));
-    };
+  CommitsList.init = function(limit) {
+    $("body").on("click", ".day-commits-table li.commit", function(e) {
+      if (e.target.nodeName !== "A") {
+        location.href = $(this).attr("url");
+        e.stopPropagation();
+        return false;
+      }
+    });
+    Pager.init(limit, false, false, function() {
+      gl.utils.localTimeAgo($('.js-timeago'));
+    });
+    this.content = $("#commits-list");
+    this.searchField = $("#commits-search");
+    this.lastSearch = this.searchField.val();
+    return this.initSearch();
+  };
 
-    CommitsList.filterResults = function() {
-      var commitsUrl, form, search;
-      form = $(".commits-search-form");
-      search = CommitsList.searchField.val();
-      commitsUrl = form.attr("action") + '?' + form.serialize();
-      CommitsList.content.fadeTo('fast', 0.5);
-      return $.ajax({
-        type: "GET",
-        url: form.attr("action"),
-        data: form.serialize(),
-        complete: function() {
-          return CommitsList.content.fadeTo('fast', 1.0);
-        },
-        success: function(data) {
-          CommitsList.content.html(data.html);
-          return history.replaceState({
-            page: commitsUrl
-          // Change url so if user reload a page - search results are saved
-          }, document.title, commitsUrl);
-        },
-        dataType: "json"
-      });
-    };
+  CommitsList.initSearch = function() {
+    this.timer = null;
+    return this.searchField.keyup((function(_this) {
+      return function() {
+        clearTimeout(_this.timer);
+        return _this.timer = setTimeout(_this.filterResults, 500);
+      };
+    })(this));
+  };
 
-    return CommitsList;
+  CommitsList.filterResults = function() {
+    var commitsUrl, form, search;
+    form = $(".commits-search-form");
+    search = CommitsList.searchField.val();
+    if (search === CommitsList.lastSearch) return;
+    commitsUrl = form.attr("action") + '?' + form.serialize();
+    CommitsList.content.fadeTo('fast', 0.5);
+    return $.ajax({
+      type: "GET",
+      url: form.attr("action"),
+      data: form.serialize(),
+      complete: function() {
+        return CommitsList.content.fadeTo('fast', 1.0);
+      },
+      success: function(data) {
+        CommitsList.lastSearch = search;
+        CommitsList.content.html(data.html);
+        return history.replaceState({
+          page: commitsUrl
+        // Change url so if user reload a page - search results are saved
+        }, document.title, commitsUrl);
+      },
+      error: function() {
+        CommitsList.lastSearch = null;
+      },
+      dataType: "json"
+    });
+  };
 
-  })();
-
-}).call(this);
+  return CommitsList;
+})();
diff --git a/app/assets/javascripts/commons/bootstrap.js b/app/assets/javascripts/commons/bootstrap.js
new file mode 100644
index 00000000000..36bfe457be9
--- /dev/null
+++ b/app/assets/javascripts/commons/bootstrap.js
@@ -0,0 +1,16 @@
+import $ from 'jquery';
+
+// bootstrap jQuery plugins
+import 'bootstrap-sass/assets/javascripts/bootstrap/affix';
+import 'bootstrap-sass/assets/javascripts/bootstrap/alert';
+import 'bootstrap-sass/assets/javascripts/bootstrap/dropdown';
+import 'bootstrap-sass/assets/javascripts/bootstrap/modal';
+import 'bootstrap-sass/assets/javascripts/bootstrap/tab';
+import 'bootstrap-sass/assets/javascripts/bootstrap/transition';
+import 'bootstrap-sass/assets/javascripts/bootstrap/tooltip';
+
+// custom jQuery functions
+$.fn.extend({
+  disable() { return $(this).attr('disabled', 'disabled').addClass('disabled'); },
+  enable() { return $(this).removeAttr('disabled').removeClass('disabled'); },
+});
diff --git a/app/assets/javascripts/commons/index.js b/app/assets/javascripts/commons/index.js
new file mode 100644
index 00000000000..7063f59d446
--- /dev/null
+++ b/app/assets/javascripts/commons/index.js
@@ -0,0 +1,3 @@
+import './polyfills';
+import './jquery';
+import './bootstrap';
diff --git a/app/assets/javascripts/commons/jquery.js b/app/assets/javascripts/commons/jquery.js
new file mode 100644
index 00000000000..b53f6284afc
--- /dev/null
+++ b/app/assets/javascripts/commons/jquery.js
@@ -0,0 +1,11 @@
+import 'jquery';
+
+// common jQuery plugins
+import 'jquery-ujs';
+import 'vendor/jquery.endless-scroll';
+import 'vendor/jquery.caret';
+import 'vendor/jquery.atwho';
+import 'vendor/jquery.scrollTo';
+import 'vendor/jquery.nicescroll';
+import 'vendor/jquery.waitforimages';
+import 'select2/select2';
diff --git a/app/assets/javascripts/commons/polyfills.js b/app/assets/javascripts/commons/polyfills.js
new file mode 100644
index 00000000000..3253eebd9b5
--- /dev/null
+++ b/app/assets/javascripts/commons/polyfills.js
@@ -0,0 +1,12 @@
+// ECMAScript polyfills
+import 'core-js/fn/array/find';
+import 'core-js/fn/array/from';
+import 'core-js/fn/object/assign';
+import 'core-js/fn/promise';
+import 'core-js/fn/string/code-point-at';
+import 'core-js/fn/string/from-code-point';
+import 'core-js/fn/symbol';
+
+// Browser polyfills
+import './polyfills/custom_event';
+import './polyfills/element';
diff --git a/app/assets/javascripts/commons/polyfills/custom_event.js b/app/assets/javascripts/commons/polyfills/custom_event.js
new file mode 100644
index 00000000000..aea61b82d03
--- /dev/null
+++ b/app/assets/javascripts/commons/polyfills/custom_event.js
@@ -0,0 +1,9 @@
+if (typeof window.CustomEvent !== 'function') {
+  window.CustomEvent = function CustomEvent(event, params) {
+    const evt = document.createEvent('CustomEvent');
+    const evtParams = params || { bubbles: false, cancelable: false, detail: undefined };
+    evt.initCustomEvent(event, evtParams.bubbles, evtParams.cancelable, evtParams.detail);
+    return evt;
+  };
+  window.CustomEvent.prototype = Event;
+}
diff --git a/app/assets/javascripts/commons/polyfills/element.js b/app/assets/javascripts/commons/polyfills/element.js
new file mode 100644
index 00000000000..9a1f73bf2ac
--- /dev/null
+++ b/app/assets/javascripts/commons/polyfills/element.js
@@ -0,0 +1,20 @@
+Element.prototype.closest = Element.prototype.closest ||
+  function closest(selector, selectedElement = this) {
+    if (!selectedElement) return null;
+    return selectedElement.matches(selector) ?
+      selectedElement :
+      Element.prototype.closest(selector, selectedElement.parentElement);
+  };
+
+Element.prototype.matches = Element.prototype.matches ||
+  Element.prototype.matchesSelector ||
+  Element.prototype.mozMatchesSelector ||
+  Element.prototype.msMatchesSelector ||
+  Element.prototype.oMatchesSelector ||
+  Element.prototype.webkitMatchesSelector ||
+  function matches(selector) {
+    const elms = (this.document || this.ownerDocument).querySelectorAll(selector);
+    let i = elms.length - 1;
+    while (i >= 0 && elms.item(i) !== this) { i -= 1; }
+    return i > -1;
+  };
diff --git a/app/assets/javascripts/compare.js b/app/assets/javascripts/compare.js
index b3f769d4129..9e5dbd64a7e 100644
--- a/app/assets/javascripts/compare.js
+++ b/app/assets/javascripts/compare.js
@@ -1,92 +1,90 @@
-/* eslint-disable */
-(function() {
-  this.Compare = (function() {
-    function Compare(opts) {
-      this.opts = opts;
-      this.source_loading = $(".js-source-loading");
-      this.target_loading = $(".js-target-loading");
-      $('.js-compare-dropdown').each((function(_this) {
-        return function(i, dropdown) {
-          var $dropdown;
-          $dropdown = $(dropdown);
-          return $dropdown.glDropdown({
-            selectable: true,
-            fieldName: $dropdown.data('field-name'),
-            filterable: true,
-            id: function(obj, $el) {
-              return $el.data('id');
-            },
-            toggleLabel: function(obj, $el) {
-              return $el.text().trim();
-            },
-            clicked: function(e, el) {
-              if ($dropdown.is('.js-target-branch')) {
-                return _this.getTargetHtml();
-              } else if ($dropdown.is('.js-source-branch')) {
-                return _this.getSourceHtml();
-              } else if ($dropdown.is('.js-target-project')) {
-                return _this.getTargetProject();
-              }
-            }
-          });
-        };
-      })(this));
-      this.initialState();
-    }
-
-    Compare.prototype.initialState = function() {
-      this.getSourceHtml();
-      return this.getTargetHtml();
-    };
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, quotes, no-var, object-shorthand, consistent-return, no-unused-vars, comma-dangle, vars-on-top, prefer-template, max-len */
 
-    Compare.prototype.getTargetProject = function() {
-      return $.ajax({
-        url: this.opts.targetProjectUrl,
-        data: {
-          target_project_id: $("input[name='merge_request[target_project_id]']").val()
-        },
-        beforeSend: function() {
-          return $('.mr_target_commit').empty();
-        },
-        success: function(html) {
-          return $('.js-target-branch-dropdown .dropdown-content').html(html);
-        }
-      });
-    };
+window.Compare = (function() {
+  function Compare(opts) {
+    this.opts = opts;
+    this.source_loading = $(".js-source-loading");
+    this.target_loading = $(".js-target-loading");
+    $('.js-compare-dropdown').each((function(_this) {
+      return function(i, dropdown) {
+        var $dropdown;
+        $dropdown = $(dropdown);
+        return $dropdown.glDropdown({
+          selectable: true,
+          fieldName: $dropdown.data('field-name'),
+          filterable: true,
+          id: function(obj, $el) {
+            return $el.data('id');
+          },
+          toggleLabel: function(obj, $el) {
+            return $el.text().trim();
+          },
+          clicked: function(e, el) {
+            if ($dropdown.is('.js-target-branch')) {
+              return _this.getTargetHtml();
+            } else if ($dropdown.is('.js-source-branch')) {
+              return _this.getSourceHtml();
+            } else if ($dropdown.is('.js-target-project')) {
+              return _this.getTargetProject();
+            }
+          }
+        });
+      };
+    })(this));
+    this.initialState();
+  }
 
-    Compare.prototype.getSourceHtml = function() {
-      return this.sendAjax(this.opts.sourceBranchUrl, this.source_loading, '.mr_source_commit', {
-        ref: $("input[name='merge_request[source_branch]']").val()
-      });
-    };
+  Compare.prototype.initialState = function() {
+    this.getSourceHtml();
+    return this.getTargetHtml();
+  };
 
-    Compare.prototype.getTargetHtml = function() {
-      return this.sendAjax(this.opts.targetBranchUrl, this.target_loading, '.mr_target_commit', {
-        target_project_id: $("input[name='merge_request[target_project_id]']").val(),
-        ref: $("input[name='merge_request[target_branch]']").val()
-      });
-    };
+  Compare.prototype.getTargetProject = function() {
+    return $.ajax({
+      url: this.opts.targetProjectUrl,
+      data: {
+        target_project_id: $("input[name='merge_request[target_project_id]']").val()
+      },
+      beforeSend: function() {
+        return $('.mr_target_commit').empty();
+      },
+      success: function(html) {
+        return $('.js-target-branch-dropdown .dropdown-content').html(html);
+      }
+    });
+  };
 
-    Compare.prototype.sendAjax = function(url, loading, target, data) {
-      var $target;
-      $target = $(target);
-      return $.ajax({
-        url: url,
-        data: data,
-        beforeSend: function() {
-          loading.show();
-          return $target.empty();
-        },
-        success: function(html) {
-          loading.hide();
-          $target.html(html);
-          return $('.js-timeago', $target).timeago();
-        }
-      });
-    };
+  Compare.prototype.getSourceHtml = function() {
+    return this.sendAjax(this.opts.sourceBranchUrl, this.source_loading, '.mr_source_commit', {
+      ref: $("input[name='merge_request[source_branch]']").val()
+    });
+  };
 
-    return Compare;
+  Compare.prototype.getTargetHtml = function() {
+    return this.sendAjax(this.opts.targetBranchUrl, this.target_loading, '.mr_target_commit', {
+      target_project_id: $("input[name='merge_request[target_project_id]']").val(),
+      ref: $("input[name='merge_request[target_branch]']").val()
+    });
+  };
 
-  })();
+  Compare.prototype.sendAjax = function(url, loading, target, data) {
+    var $target;
+    $target = $(target);
+    return $.ajax({
+      url: url,
+      data: data,
+      beforeSend: function() {
+        loading.show();
+        return $target.empty();
+      },
+      success: function(html) {
+        loading.hide();
+        $target.html(html);
+        var className = '.' + $target[0].className.replace(' ', '.');
+        gl.utils.localTimeAgo($('.js-timeago', className));
+      }
+    });
+  };
 
-}).call(this);
+  return Compare;
+})();
diff --git a/app/assets/javascripts/compare_autocomplete.js b/app/assets/javascripts/compare_autocomplete.js
new file mode 100644
index 00000000000..72c0d98d47c
--- /dev/null
+++ b/app/assets/javascripts/compare_autocomplete.js
@@ -0,0 +1,68 @@
+/* eslint-disable func-names, space-before-function-paren, one-var, no-var, one-var-declaration-per-line, object-shorthand, comma-dangle, prefer-arrow-callback, no-else-return, newline-per-chained-call, wrap-iife, max-len */
+
+window.CompareAutocomplete = (function() {
+  function CompareAutocomplete() {
+    this.initDropdown();
+  }
+
+  CompareAutocomplete.prototype.initDropdown = function() {
+    return $('.js-compare-dropdown').each(function() {
+      var $dropdown, selected;
+      $dropdown = $(this);
+      selected = $dropdown.data('selected');
+      const $dropdownContainer = $dropdown.closest('.dropdown');
+      const $fieldInput = $(`input[name="${$dropdown.data('field-name')}"]`, $dropdownContainer);
+      const $filterInput = $('input[type="search"]', $dropdownContainer);
+      $dropdown.glDropdown({
+        data: function(term, callback) {
+          return $.ajax({
+            url: $dropdown.data('refs-url'),
+            data: {
+              ref: $dropdown.data('ref'),
+              search: term,
+            }
+          }).done(function(refs) {
+            return callback(refs);
+          });
+        },
+        selectable: true,
+        filterable: true,
+        filterRemote: true,
+        fieldName: $dropdown.data('field-name'),
+        filterInput: 'input[type="search"]',
+        renderRow: function(ref) {
+          var link;
+          if (ref.header != null) {
+            return $('<li />').addClass('dropdown-header').text(ref.header);
+          } else {
+            link = $('<a />').attr('href', '#').addClass(ref === selected ? 'is-active' : '').text(ref).attr('data-ref', escape(ref));
+            return $('<li />').append(link);
+          }
+        },
+        id: function(obj, $el) {
+          return $el.attr('data-ref');
+        },
+        toggleLabel: function(obj, $el) {
+          return $el.text().trim();
+        }
+      });
+      $filterInput.on('keyup', (e) => {
+        const keyCode = e.keyCode || e.which;
+        if (keyCode !== 13) return;
+        const text = $filterInput.val();
+        $fieldInput.val(text);
+        $('.dropdown-toggle-text', $dropdown).text(text);
+        $dropdownContainer.removeClass('open');
+      });
+
+      $dropdownContainer.on('click', '.dropdown-content a', (e) => {
+        $dropdown.prop('title', e.target.text.replace(/_+?/g, '-'));
+        if ($dropdown.hasClass('has-tooltip')) {
+          $dropdown.tooltip('fixTitle');
+        }
+      });
+    });
+  };
+
+  return CompareAutocomplete;
+})();
diff --git a/app/assets/javascripts/compare_autocomplete.js.es6 b/app/assets/javascripts/compare_autocomplete.js.es6
deleted file mode 100644
index bd980f87e72..00000000000
--- a/app/assets/javascripts/compare_autocomplete.js.es6
+++ /dev/null
@@ -1,64 +0,0 @@
-/* eslint-disable */
-(function() {
-  this.CompareAutocomplete = (function() {
-    function CompareAutocomplete() {
-      this.initDropdown();
-    }
-
-    CompareAutocomplete.prototype.initDropdown = function() {
-      return $('.js-compare-dropdown').each(function() {
-        var $dropdown, selected;
-        $dropdown = $(this);
-        selected = $dropdown.data('selected');
-        const $dropdownContainer = $dropdown.closest('.dropdown');
-        const $fieldInput = $(`input[name="${$dropdown.data('field-name')}"]`, $dropdownContainer);
-        const $filterInput = $('input[type="search"]', $dropdownContainer);
-        $dropdown.glDropdown({
-          data: function(term, callback) {
-            return $.ajax({
-              url: $dropdown.data('refs-url'),
-              data: {
-                ref: $dropdown.data('ref')
-              }
-            }).done(function(refs) {
-              return callback(refs);
-            });
-          },
-          selectable: true,
-          filterable: true,
-          filterByText: true,
-          toggleLabel: true,
-          fieldName: $dropdown.data('field-name'),
-          filterInput: 'input[type="search"]',
-          renderRow: function(ref) {
-            var link;
-            if (ref.header != null) {
-              return $('<li />').addClass('dropdown-header').text(ref.header);
-            } else {
-              link = $('<a />').attr('href', '#').addClass(ref === selected ? 'is-active' : '').text(ref).attr('data-ref', escape(ref));
-              return $('<li />').append(link);
-            }
-          },
-          id: function(obj, $el) {
-            return $el.attr('data-ref');
-          },
-          toggleLabel: function(obj, $el) {
-            return $el.text().trim();
-          }
-        });
-        $filterInput.on('keyup', (e) => {
-          const keyCode = e.keyCode || e.which;
-          if (keyCode !== 13) return;
-          const text = $filterInput.val();
-          $fieldInput.val(text);
-          $('.dropdown-toggle-text', $dropdown).text(text);
-          $dropdownContainer.removeClass('open');
-        });
-      });
-    };
-
-    return CompareAutocomplete;
-
-  })();
-
-}).call(this);
diff --git a/app/assets/javascripts/confirm_danger_modal.js b/app/assets/javascripts/confirm_danger_modal.js
index 143d21adb37..b375b61202e 100644
--- a/app/assets/javascripts/confirm_danger_modal.js
+++ b/app/assets/javascripts/confirm_danger_modal.js
@@ -1,33 +1,30 @@
-/* eslint-disable */
-(function() {
-  this.ConfirmDangerModal = (function() {
-    function ConfirmDangerModal(form, text) {
-      var project_path, submit;
-      this.form = form;
-      $('.js-confirm-text').text(text || '');
-      $('.js-confirm-danger-input').val('');
-      $('#modal-confirm-danger').modal('show');
-      project_path = $('.js-confirm-danger-match').text();
-      submit = $('.js-confirm-danger-submit');
-      submit.disable();
-      $('.js-confirm-danger-input').off('input');
-      $('.js-confirm-danger-input').on('input', function() {
-        if (gl.utils.rstrip($(this).val()) === project_path) {
-          return submit.enable();
-        } else {
-          return submit.disable();
-        }
-      });
-      $('.js-confirm-danger-submit').off('click');
-      $('.js-confirm-danger-submit').on('click', (function(_this) {
-        return function() {
-          return _this.form.submit();
-        };
-      })(this));
-    }
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, one-var, no-var, camelcase, one-var-declaration-per-line, no-else-return, max-len */
 
-    return ConfirmDangerModal;
+window.ConfirmDangerModal = (function() {
+  function ConfirmDangerModal(form, text) {
+    var project_path, submit;
+    this.form = form;
+    $('.js-confirm-text').text(text || '');
+    $('.js-confirm-danger-input').val('');
+    $('#modal-confirm-danger').modal('show');
+    project_path = $('.js-confirm-danger-match').text();
+    submit = $('.js-confirm-danger-submit');
+    submit.disable();
+    $('.js-confirm-danger-input').off('input');
+    $('.js-confirm-danger-input').on('input', function() {
+      if (gl.utils.rstrip($(this).val()) === project_path) {
+        return submit.enable();
+      } else {
+        return submit.disable();
+      }
+    });
+    $('.js-confirm-danger-submit').off('click');
+    $('.js-confirm-danger-submit').on('click', (function(_this) {
+      return function() {
+        return _this.form.submit();
+      };
+    })(this));
+  }
 
-  })();
-
-}).call(this);
+  return ConfirmDangerModal;
+})();
diff --git a/app/assets/javascripts/copy_as_gfm.js b/app/assets/javascripts/copy_as_gfm.js
new file mode 100644
index 00000000000..570799c030e
--- /dev/null
+++ b/app/assets/javascripts/copy_as_gfm.js
@@ -0,0 +1,402 @@
+/* eslint-disable class-methods-use-this, object-shorthand, no-unused-vars, no-use-before-define, no-new, max-len, no-restricted-syntax, guard-for-in, no-continue */
+
+require('./lib/utils/common_utils');
+
+const gfmRules = {
+  // The filters referenced in lib/banzai/pipeline/gfm_pipeline.rb convert
+  // GitLab Flavored Markdown (GFM) to HTML.
+  // These handlers consequently convert that same HTML to GFM to be copied to the clipboard.
+  // Every filter in lib/banzai/pipeline/gfm_pipeline.rb that generates HTML
+  // from GFM should have a handler here, in reverse order.
+  // The GFM-to-HTML-to-GFM cycle is tested in spec/features/copy_as_gfm_spec.rb.
+  InlineDiffFilter: {
+    'span.idiff.addition'(el, text) {
+      return `{+${text}+}`;
+    },
+    'span.idiff.deletion'(el, text) {
+      return `{-${text}-}`;
+    },
+  },
+  TaskListFilter: {
+    'input[type=checkbox].task-list-item-checkbox'(el, text) {
+      return `[${el.checked ? 'x' : ' '}]`;
+    },
+  },
+  ReferenceFilter: {
+    '.tooltip'(el, text) {
+      return '';
+    },
+    'a.gfm:not([data-link=true])'(el, text) {
+      return el.dataset.original || text;
+    },
+  },
+  AutolinkFilter: {
+    'a'(el, text) {
+      // Fallback on the regular MarkdownFilter's `a` handler.
+      if (text !== el.getAttribute('href')) return false;
+
+      return text;
+    },
+  },
+  TableOfContentsFilter: {
+    'ul.section-nav'(el, text) {
+      return '[[_TOC_]]';
+    },
+  },
+  EmojiFilter: {
+    'img.emoji'(el, text) {
+      return el.getAttribute('alt');
+    },
+    'gl-emoji'(el, text) {
+      return `:${el.getAttribute('data-name')}:`;
+    },
+  },
+  ImageLinkFilter: {
+    'a.no-attachment-icon'(el, text) {
+      return text;
+    },
+  },
+  VideoLinkFilter: {
+    '.video-container'(el, text) {
+      const videoEl = el.querySelector('video');
+      if (!videoEl) return false;
+
+      return CopyAsGFM.nodeToGFM(videoEl);
+    },
+    'video'(el, text) {
+      return `![${el.dataset.title}](${el.getAttribute('src')})`;
+    },
+  },
+  MathFilter: {
+    'pre.code.math[data-math-style=display]'(el, text) {
+      return `\`\`\`math\n${text.trim()}\n\`\`\``;
+    },
+    'code.code.math[data-math-style=inline]'(el, text) {
+      return `$\`${text}\`$`;
+    },
+    'span.katex-display span.katex-mathml'(el, text) {
+      const mathAnnotation = el.querySelector('annotation[encoding="application/x-tex"]');
+      if (!mathAnnotation) return false;
+
+      return `\`\`\`math\n${CopyAsGFM.nodeToGFM(mathAnnotation)}\n\`\`\``;
+    },
+    'span.katex-mathml'(el, text) {
+      const mathAnnotation = el.querySelector('annotation[encoding="application/x-tex"]');
+      if (!mathAnnotation) return false;
+
+      return `$\`${CopyAsGFM.nodeToGFM(mathAnnotation)}\`$`;
+    },
+    'span.katex-html'(el, text) {
+      // We don't want to include the content of this element in the copied text.
+      return '';
+    },
+    'annotation[encoding="application/x-tex"]'(el, text) {
+      return text.trim();
+    },
+  },
+  SanitizationFilter: {
+    'a[name]:not([href]):empty'(el, text) {
+      return el.outerHTML;
+    },
+    'dl'(el, text) {
+      let lines = text.trim().split('\n');
+      // Add two spaces to the front of subsequent list items lines,
+      // or leave the line entirely blank.
+      lines = lines.map((l) => {
+        const line = l.trim();
+        if (line.length === 0) return '';
+
+        return `  ${line}`;
+      });
+
+      return `<dl>\n${lines.join('\n')}\n</dl>`;
+    },
+    'sub, dt, dd, kbd, q, samp, var, ruby, rt, rp, abbr, summary, details'(el, text) {
+      const tag = el.nodeName.toLowerCase();
+      return `<${tag}>${text}</${tag}>`;
+    },
+  },
+  SyntaxHighlightFilter: {
+    'pre.code.highlight'(el, t) {
+      const text = t.trimRight();
+
+      let lang = el.getAttribute('lang');
+      if (!lang || lang === 'plaintext') {
+        lang = '';
+      }
+
+      // Prefixes lines with 4 spaces if the code contains triple backticks
+      if (lang === '' && text.match(/^```/gm)) {
+        return text.split('\n').map((l) => {
+          const line = l.trim();
+          if (line.length === 0) return '';
+
+          return `    ${line}`;
+        }).join('\n');
+      }
+
+      return `\`\`\`${lang}\n${text}\n\`\`\``;
+    },
+    'pre > code'(el, text) {
+       // Don't wrap code blocks in ``
+      return text;
+    },
+  },
+  MarkdownFilter: {
+    'br'(el, text) {
+      // Two spaces at the end of a line are turned into a BR
+      return '  ';
+    },
+    'code'(el, text) {
+      let backtickCount = 1;
+      const backtickMatch = text.match(/`+/);
+      if (backtickMatch) {
+        backtickCount = backtickMatch[0].length + 1;
+      }
+
+      const backticks = Array(backtickCount + 1).join('`');
+      const spaceOrNoSpace = backtickCount > 1 ? ' ' : '';
+
+      return backticks + spaceOrNoSpace + text.trim() + spaceOrNoSpace + backticks;
+    },
+    'blockquote'(el, text) {
+      return text.trim().split('\n').map(s => `> ${s}`.trim()).join('\n');
+    },
+    'img'(el, text) {
+      return `![${el.getAttribute('alt')}](${el.getAttribute('src')})`;
+    },
+    'a.anchor'(el, text) {
+      // Don't render a Markdown link for the anchor link inside a heading
+      return text;
+    },
+    'a'(el, text) {
+      return `[${text}](${el.getAttribute('href')})`;
+    },
+    'li'(el, text) {
+      const lines = text.trim().split('\n');
+      const firstLine = `- ${lines.shift()}`;
+      // Add four spaces to the front of subsequent list items lines,
+      // or leave the line entirely blank.
+      const nextLines = lines.map((s) => {
+        if (s.trim().length === 0) return '';
+
+        return `    ${s}`;
+      });
+
+      return `${firstLine}\n${nextLines.join('\n')}`;
+    },
+    'ul'(el, text) {
+      return text;
+    },
+    'ol'(el, text) {
+      // LIs get a `- ` prefix by default, which we replace by `1. ` for ordered lists.
+      return text.replace(/^- /mg, '1. ');
+    },
+    'h1'(el, text) {
+      return `# ${text.trim()}`;
+    },
+    'h2'(el, text) {
+      return `## ${text.trim()}`;
+    },
+    'h3'(el, text) {
+      return `### ${text.trim()}`;
+    },
+    'h4'(el, text) {
+      return `#### ${text.trim()}`;
+    },
+    'h5'(el, text) {
+      return `##### ${text.trim()}`;
+    },
+    'h6'(el, text) {
+      return `###### ${text.trim()}`;
+    },
+    'strong'(el, text) {
+      return `**${text}**`;
+    },
+    'em'(el, text) {
+      return `_${text}_`;
+    },
+    'del'(el, text) {
+      return `~~${text}~~`;
+    },
+    'sup'(el, text) {
+      return `^${text}`;
+    },
+    'hr'(el, text) {
+      return '-----';
+    },
+    'table'(el, text) {
+      const theadEl = el.querySelector('thead');
+      const tbodyEl = el.querySelector('tbody');
+      if (!theadEl || !tbodyEl) return false;
+
+      const theadText = CopyAsGFM.nodeToGFM(theadEl);
+      const tbodyText = CopyAsGFM.nodeToGFM(tbodyEl);
+
+      return theadText + tbodyText;
+    },
+    'thead'(el, text) {
+      const cells = _.map(el.querySelectorAll('th'), (cell) => {
+        let chars = CopyAsGFM.nodeToGFM(cell).trim().length + 2;
+
+        let before = '';
+        let after = '';
+        switch (cell.style.textAlign) {
+          case 'center':
+            before = ':';
+            after = ':';
+            chars -= 2;
+            break;
+          case 'right':
+            after = ':';
+            chars -= 1;
+            break;
+          default:
+            break;
+        }
+
+        chars = Math.max(chars, 3);
+
+        const middle = Array(chars + 1).join('-');
+
+        return before + middle + after;
+      });
+
+      return `${text}|${cells.join('|')}|`;
+    },
+    'tr'(el, text) {
+      const cells = _.map(el.querySelectorAll('td, th'), cell => CopyAsGFM.nodeToGFM(cell).trim());
+      return `| ${cells.join(' | ')} |`;
+    },
+  },
+};
+
+class CopyAsGFM {
+  constructor() {
+    $(document).on('copy', '.md, .wiki', (e) => { this.copyAsGFM(e, CopyAsGFM.transformGFMSelection); });
+    $(document).on('copy', 'pre.code.highlight, .diff-content .line_content', (e) => { this.copyAsGFM(e, CopyAsGFM.transformCodeSelection); });
+    $(document).on('paste', '.js-gfm-input', this.pasteGFM.bind(this));
+  }
+
+  copyAsGFM(e, transformer) {
+    const clipboardData = e.originalEvent.clipboardData;
+    if (!clipboardData) return;
+
+    const documentFragment = window.gl.utils.getSelectedFragment();
+    if (!documentFragment) return;
+
+    const el = transformer(documentFragment.cloneNode(true));
+    if (!el) return;
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    clipboardData.setData('text/plain', el.textContent);
+    clipboardData.setData('text/x-gfm', CopyAsGFM.nodeToGFM(el));
+  }
+
+  pasteGFM(e) {
+    const clipboardData = e.originalEvent.clipboardData;
+    if (!clipboardData) return;
+
+    const gfm = clipboardData.getData('text/x-gfm');
+    if (!gfm) return;
+
+    e.preventDefault();
+
+    window.gl.utils.insertText(e.target, gfm);
+  }
+
+  static transformGFMSelection(documentFragment) {
+    // If the documentFragment contains more than just Markdown, don't copy as GFM.
+    if (documentFragment.querySelector('.md, .wiki')) return null;
+
+    return documentFragment;
+  }
+
+  static transformCodeSelection(documentFragment) {
+    const lineEls = documentFragment.querySelectorAll('.line');
+
+    let codeEl;
+    if (lineEls.length > 1) {
+      codeEl = document.createElement('pre');
+      codeEl.className = 'code highlight';
+
+      const lang = lineEls[0].getAttribute('lang');
+      if (lang) {
+        codeEl.setAttribute('lang', lang);
+      }
+    } else {
+      codeEl = document.createElement('code');
+    }
+
+    if (lineEls.length > 0) {
+      for (let i = 0; i < lineEls.length; i += 1) {
+        const lineEl = lineEls[i];
+        codeEl.appendChild(lineEl);
+        codeEl.appendChild(document.createTextNode('\n'));
+      }
+    } else {
+      codeEl.appendChild(documentFragment);
+    }
+
+    return codeEl;
+  }
+
+  static nodeToGFM(node) {
+    if (node.nodeType === Node.COMMENT_NODE) {
+      return '';
+    }
+
+    if (node.nodeType === Node.TEXT_NODE) {
+      return node.textContent;
+    }
+
+    const text = this.innerGFM(node);
+
+    if (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+      return text;
+    }
+
+    for (const filter in gfmRules) {
+      const rules = gfmRules[filter];
+
+      for (const selector in rules) {
+        const func = rules[selector];
+
+        if (!window.gl.utils.nodeMatchesSelector(node, selector)) continue;
+
+        const result = func(node, text);
+        if (result === false) continue;
+
+        return result;
+      }
+    }
+
+    return text;
+  }
+
+  static innerGFM(parentNode) {
+    const nodes = parentNode.childNodes;
+
+    const clonedParentNode = parentNode.cloneNode(true);
+    const clonedNodes = Array.prototype.slice.call(clonedParentNode.childNodes, 0);
+
+    for (let i = 0; i < nodes.length; i += 1) {
+      const node = nodes[i];
+      const clonedNode = clonedNodes[i];
+
+      const text = this.nodeToGFM(node);
+
+      // `clonedNode.replaceWith(text)` is not yet widely supported
+      clonedNode.parentNode.replaceChild(document.createTextNode(text), clonedNode);
+    }
+
+    return clonedParentNode.innerText || clonedParentNode.textContent;
+  }
+}
+
+window.gl = window.gl || {};
+window.gl.CopyAsGFM = CopyAsGFM;
+
+new CopyAsGFM();
diff --git a/app/assets/javascripts/copy_to_clipboard.js b/app/assets/javascripts/copy_to_clipboard.js
index 7808d7fe313..6dbec50b890 100644
--- a/app/assets/javascripts/copy_to_clipboard.js
+++ b/app/assets/javascripts/copy_to_clipboard.js
@@ -1,49 +1,46 @@
-/* eslint-disable */
-
-/*= require clipboard */
-
-(function() {
-  var genericError, genericSuccess, showTooltip;
-
-  genericSuccess = function(e) {
-    showTooltip(e.trigger, 'Copied!');
-    // Clear the selection and blur the trigger so it loses its border
-    e.clearSelection();
-    return $(e.trigger).blur();
-  };
-
-  // Safari doesn't support `execCommand`, so instead we inform the user to
-  // copy manually.
-  //
-  // See http://clipboardjs.com/#browser-support
-  genericError = function(e) {
-    var key;
-    if (/Mac/i.test(navigator.userAgent)) {
-      key = '&#8984;'; // Command
-    } else {
-      key = 'Ctrl';
-    }
-    return showTooltip(e.trigger, "Press " + key + "-C to copy");
-  };
-
-  showTooltip = function(target, title) {
-    var $target = $(target);
-    var originalTitle = $target.data('original-title');
-
-    $target
-      .attr('title', 'Copied!')
-      .tooltip('fixTitle')
-      .tooltip('show')
-      .attr('title', originalTitle)
-      .tooltip('fixTitle');
-  };
-
-  $(function() {
-    var clipboard;
-
-    clipboard = new Clipboard('[data-clipboard-target], [data-clipboard-text]');
-    clipboard.on('success', genericSuccess);
-    return clipboard.on('error', genericError);
-  });
-
-}).call(this);
+/* eslint-disable func-names, space-before-function-paren, one-var, no-var, one-var-declaration-per-line, prefer-template, quotes, no-unused-vars, prefer-arrow-callback, max-len */
+
+import Clipboard from 'vendor/clipboard';
+
+var genericError, genericSuccess, showTooltip;
+
+genericSuccess = function(e) {
+  showTooltip(e.trigger, 'Copied');
+  // Clear the selection and blur the trigger so it loses its border
+  e.clearSelection();
+  return $(e.trigger).blur();
+};
+
+// Safari doesn't support `execCommand`, so instead we inform the user to
+// copy manually.
+//
+// See http://clipboardjs.com/#browser-support
+genericError = function(e) {
+  var key;
+  if (/Mac/i.test(navigator.userAgent)) {
+    key = '&#8984;'; // Command
+  } else {
+    key = 'Ctrl';
+  }
+  return showTooltip(e.trigger, "Press " + key + "-C to copy");
+};
+
+showTooltip = function(target, title) {
+  var $target = $(target);
+  var originalTitle = $target.data('original-title');
+
+  $target
+    .attr('title', 'Copied')
+    .tooltip('fixTitle')
+    .tooltip('show')
+    .attr('title', originalTitle)
+    .tooltip('fixTitle');
+};
+
+$(function() {
+  var clipboard;
+
+  clipboard = new Clipboard('[data-clipboard-target], [data-clipboard-text]');
+  clipboard.on('success', genericSuccess);
+  return clipboard.on('error', genericError);
+});
diff --git a/app/assets/javascripts/create_label.js b/app/assets/javascripts/create_label.js
new file mode 100644
index 00000000000..121d64db789
--- /dev/null
+++ b/app/assets/javascripts/create_label.js
@@ -0,0 +1,127 @@
+/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, comma-dangle, prefer-template, quotes, no-param-reassign, wrap-iife, max-len */
+/* global Api */
+
+class CreateLabelDropdown {
+  constructor ($el, namespacePath, projectPath) {
+    this.$el = $el;
+    this.namespacePath = namespacePath;
+    this.projectPath = projectPath;
+    this.$dropdownBack = $('.dropdown-menu-back', this.$el.closest('.dropdown'));
+    this.$cancelButton = $('.js-cancel-label-btn', this.$el);
+    this.$newLabelField = $('#new_label_name', this.$el);
+    this.$newColorField = $('#new_label_color', this.$el);
+    this.$colorPreview = $('.js-dropdown-label-color-preview', this.$el);
+    this.$newLabelError = $('.js-label-error', this.$el);
+    this.$newLabelCreateButton = $('.js-new-label-btn', this.$el);
+    this.$colorSuggestions = $('.suggest-colors-dropdown a', this.$el);
+
+    this.$newLabelError.hide();
+    this.$newLabelCreateButton.disable();
+
+    this.cleanBinding();
+    this.addBinding();
+  }
+
+  cleanBinding () {
+    this.$colorSuggestions.off('click');
+    this.$newLabelField.off('keyup change');
+    this.$newColorField.off('keyup change');
+    this.$dropdownBack.off('click');
+    this.$cancelButton.off('click');
+    this.$newLabelCreateButton.off('click');
+  }
+
+  addBinding () {
+    const self = this;
+
+    this.$colorSuggestions.on('click', function (e) {
+      const $this = $(this);
+      self.addColorValue(e, $this);
+    });
+
+    this.$newLabelField.on('keyup change', this.enableLabelCreateButton.bind(this));
+    this.$newColorField.on('keyup change', this.enableLabelCreateButton.bind(this));
+
+    this.$dropdownBack.on('click', this.resetForm.bind(this));
+
+    this.$cancelButton.on('click', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      self.resetForm();
+      self.$dropdownBack.trigger('click');
+    });
+
+    this.$newLabelCreateButton.on('click', this.saveLabel.bind(this));
+  }
+
+  addColorValue (e, $this) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    this.$newColorField.val($this.data('color')).trigger('change');
+    this.$colorPreview
+      .css('background-color', $this.data('color'))
+      .parent()
+      .addClass('is-active');
+  }
+
+  enableLabelCreateButton () {
+    if (this.$newLabelField.val() !== '' && this.$newColorField.val() !== '') {
+      this.$newLabelError.hide();
+      this.$newLabelCreateButton.enable();
+    } else {
+      this.$newLabelCreateButton.disable();
+    }
+  }
+
+  resetForm () {
+    this.$newLabelField
+      .val('')
+      .trigger('change');
+
+    this.$newColorField
+      .val('')
+      .trigger('change');
+
+    this.$colorPreview
+      .css('background-color', '')
+      .parent()
+      .removeClass('is-active');
+  }
+
+  saveLabel (e) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    Api.newLabel(this.namespacePath, this.projectPath, {
+      title: this.$newLabelField.val(),
+      color: this.$newColorField.val()
+    }, (label) => {
+      this.$newLabelCreateButton.enable();
+
+      if (label.message) {
+        let errors;
+
+        if (typeof label.message === 'string') {
+          errors = label.message;
+        } else {
+          errors = Object.keys(label.message).map(key =>
+            `${gl.text.humanize(key)} ${label.message[key].join(', ')}`
+          ).join("<br/>");
+        }
+
+        this.$newLabelError
+          .html(errors)
+          .show();
+      } else {
+        this.$dropdownBack.trigger('click');
+
+        $(document).trigger('created.label', label);
+      }
+    });
+  }
+}
+
+window.gl = window.gl || {};
+gl.CreateLabelDropdown = CreateLabelDropdown;
diff --git a/app/assets/javascripts/create_label.js.es6 b/app/assets/javascripts/create_label.js.es6
deleted file mode 100644
index 744aa0afa03..00000000000
--- a/app/assets/javascripts/create_label.js.es6
+++ /dev/null
@@ -1,130 +0,0 @@
-/* eslint-disable */
-(function (w) {
-  class CreateLabelDropdown {
-    constructor ($el, namespacePath, projectPath) {
-      this.$el = $el;
-      this.namespacePath = namespacePath;
-      this.projectPath = projectPath;
-      this.$dropdownBack = $('.dropdown-menu-back', this.$el.closest('.dropdown'));
-      this.$cancelButton = $('.js-cancel-label-btn', this.$el);
-      this.$newLabelField = $('#new_label_name', this.$el);
-      this.$newColorField = $('#new_label_color', this.$el);
-      this.$colorPreview = $('.js-dropdown-label-color-preview', this.$el);
-      this.$newLabelError = $('.js-label-error', this.$el);
-      this.$newLabelCreateButton = $('.js-new-label-btn', this.$el);
-      this.$colorSuggestions = $('.suggest-colors-dropdown a', this.$el);
-
-      this.$newLabelError.hide();
-      this.$newLabelCreateButton.disable();
-
-      this.cleanBinding();
-      this.addBinding();
-    }
-
-    cleanBinding () {
-      this.$colorSuggestions.off('click');
-      this.$newLabelField.off('keyup change');
-      this.$newColorField.off('keyup change');
-      this.$dropdownBack.off('click');
-      this.$cancelButton.off('click');
-      this.$newLabelCreateButton.off('click');
-    }
-
-    addBinding () {
-      const self = this;
-
-      this.$colorSuggestions.on('click', function (e) {
-        const $this = $(this);
-        self.addColorValue(e, $this);
-      });
-
-      this.$newLabelField.on('keyup change', this.enableLabelCreateButton.bind(this));
-      this.$newColorField.on('keyup change', this.enableLabelCreateButton.bind(this));
-
-      this.$dropdownBack.on('click', this.resetForm.bind(this));
-
-      this.$cancelButton.on('click', function(e) {
-        e.preventDefault();
-        e.stopPropagation();
-
-        self.resetForm();
-        self.$dropdownBack.trigger('click');
-      });
-
-      this.$newLabelCreateButton.on('click', this.saveLabel.bind(this));
-    }
-
-    addColorValue (e, $this) {
-      e.preventDefault();
-      e.stopPropagation();
-
-      this.$newColorField.val($this.data('color')).trigger('change');
-      this.$colorPreview
-        .css('background-color', $this.data('color'))
-        .parent()
-        .addClass('is-active');
-    }
-
-    enableLabelCreateButton () {
-      if (this.$newLabelField.val() !== '' && this.$newColorField.val() !== '') {
-        this.$newLabelError.hide();
-        this.$newLabelCreateButton.enable();
-      } else {
-        this.$newLabelCreateButton.disable();
-      }
-    }
-
-    resetForm () {
-      this.$newLabelField
-        .val('')
-        .trigger('change');
-
-      this.$newColorField
-        .val('')
-        .trigger('change');
-
-      this.$colorPreview
-        .css('background-color', '')
-        .parent()
-        .removeClass('is-active');
-    }
-
-    saveLabel (e) {
-      e.preventDefault();
-      e.stopPropagation();
-
-      Api.newLabel(this.namespacePath, this.projectPath, {
-        title: this.$newLabelField.val(),
-        color: this.$newColorField.val()
-      }, (label) => {
-        this.$newLabelCreateButton.enable();
-
-        if (label.message) {
-          let errors;
-
-          if (typeof label.message === 'string') {
-            errors = label.message;
-          } else {
-            errors = label.message.map(function (value, key) {
-              return key + " " + value[0];
-            }).join("<br/>");
-          }
-
-          this.$newLabelError
-            .html(errors)
-            .show();
-        } else {
-          this.$dropdownBack.trigger('click');
-
-          $(document).trigger('created.label', label);
-        }
-      });
-    }
-  }
-
-  if (!w.gl) {
-    w.gl = {};
-  }
-
-  gl.CreateLabelDropdown = CreateLabelDropdown;
-})(window);
diff --git a/app/assets/javascripts/cycle_analytics/components/limit_warning_component.js b/app/assets/javascripts/cycle_analytics/components/limit_warning_component.js
new file mode 100644
index 00000000000..abe48572347
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/components/limit_warning_component.js
@@ -0,0 +1,17 @@
+export default {
+  props: {
+    count: {
+      type: Number,
+      required: true,
+    },
+  },
+  template: `
+    <span v-if="count === 50" class="events-info pull-right">
+      <i class="fa fa-warning has-tooltip"
+          aria-hidden="true"
+          title="Limited to showing 50 events at most"
+          data-placement="top"></i>
+      Showing 50 events
+    </span>
+  `,
+};
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_code_component.js b/app/assets/javascripts/cycle_analytics/components/stage_code_component.js
new file mode 100644
index 00000000000..3f419a96ff9
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/components/stage_code_component.js
@@ -0,0 +1,47 @@
+/* eslint-disable no-param-reassign */
+
+import Vue from 'vue';
+
+((global) => {
+  global.cycleAnalytics = global.cycleAnalytics || {};
+
+  global.cycleAnalytics.StageCodeComponent = Vue.extend({
+    props: {
+      items: Array,
+      stage: Object,
+    },
+    template: `
+      <div>
+        <div class="events-description">
+          {{ stage.description }}
+          <limit-warning :count="items.length" />
+        </div>
+        <ul class="stage-event-list">
+          <li v-for="mergeRequest in items" class="stage-event-item">
+            <div class="item-details">
+              <img class="avatar" :src="mergeRequest.author.avatarUrl">
+              <h5 class="item-title merge-merquest-title">
+                <a :href="mergeRequest.url">
+                  {{ mergeRequest.title }}
+                </a>
+              </h5>
+              <a :href="mergeRequest.url" class="issue-link">!{{ mergeRequest.iid }}</a>
+              &middot;
+              <span>
+                Opened
+                <a :href="mergeRequest.url" class="issue-date">{{ mergeRequest.createdAt }}</a>
+              </span>
+              <span>
+                by
+                <a :href="mergeRequest.author.webUrl" class="issue-author-link">{{ mergeRequest.author.name }}</a>
+              </span>
+            </div>
+            <div class="item-time">
+              <total-time :time="mergeRequest.totalTime"></total-time>
+            </div>
+          </li>
+        </ul>
+      </div>
+    `,
+  });
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_issue_component.js b/app/assets/javascripts/cycle_analytics/components/stage_issue_component.js
new file mode 100644
index 00000000000..7ffa38edd9e
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/components/stage_issue_component.js
@@ -0,0 +1,49 @@
+/* eslint-disable no-param-reassign */
+
+import Vue from 'vue';
+
+((global) => {
+  global.cycleAnalytics = global.cycleAnalytics || {};
+
+  global.cycleAnalytics.StageIssueComponent = Vue.extend({
+    props: {
+      items: Array,
+      stage: Object,
+    },
+    template: `
+      <div>
+        <div class="events-description">
+          {{ stage.description }}
+          <limit-warning :count="items.length" />
+        </div>
+        <ul class="stage-event-list">
+          <li v-for="issue in items" class="stage-event-item">
+            <div class="item-details">
+              <img class="avatar" :src="issue.author.avatarUrl">
+              <h5 class="item-title issue-title">
+                <a class="issue-title" :href="issue.url">
+                  {{ issue.title }}
+                </a>
+              </h5>
+              <a :href="issue.url" class="issue-link">#{{ issue.iid }}</a>
+              &middot;
+              <span>
+                Opened
+                <a :href="issue.url" class="issue-date">{{ issue.createdAt }}</a>
+              </span>
+              <span>
+                by
+                <a :href="issue.author.webUrl" class="issue-author-link">
+                  {{ issue.author.name }}
+                </a>
+              </span>
+            </div>
+            <div class="item-time">
+              <total-time :time="issue.totalTime"></total-time>
+            </div>
+          </li>
+        </ul>
+      </div>
+    `,
+  });
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js b/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js
new file mode 100644
index 00000000000..d736c8b0c28
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/components/stage_plan_component.js
@@ -0,0 +1,51 @@
+/* eslint-disable no-param-reassign */
+import Vue from 'vue';
+import iconCommit from '../svg/icon_commit.svg';
+
+((global) => {
+  global.cycleAnalytics = global.cycleAnalytics || {};
+
+  global.cycleAnalytics.StagePlanComponent = Vue.extend({
+    props: {
+      items: Array,
+      stage: Object,
+    },
+
+    data() {
+      return { iconCommit };
+    },
+
+    template: `
+      <div>
+        <div class="events-description">
+          {{ stage.description }}
+          <limit-warning :count="items.length" />
+        </div>
+        <ul class="stage-event-list">
+          <li v-for="commit in items" class="stage-event-item">
+            <div class="item-details item-conmmit-component">
+              <img class="avatar" :src="commit.author.avatarUrl">
+              <h5 class="item-title commit-title">
+                <a :href="commit.commitUrl">
+                  {{ commit.title }}
+                </a>
+              </h5>
+              <span>
+                First
+                <span class="commit-icon">${iconCommit}</span>
+                <a :href="commit.commitUrl" class="commit-hash-link monospace">{{ commit.shortSha }}</a>
+                pushed by
+                <a :href="commit.author.webUrl" class="commit-author-link">
+                  {{ commit.author.name }}
+                </a>
+              </span>
+            </div>
+            <div class="item-time">
+              <total-time :time="commit.totalTime"></total-time>
+            </div>
+          </li>
+        </ul>
+      </div>
+    `,
+  });
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_production_component.js b/app/assets/javascripts/cycle_analytics/components/stage_production_component.js
new file mode 100644
index 00000000000..698a79ca68c
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/components/stage_production_component.js
@@ -0,0 +1,49 @@
+/* eslint-disable no-param-reassign */
+
+import Vue from 'vue';
+
+((global) => {
+  global.cycleAnalytics = global.cycleAnalytics || {};
+
+  global.cycleAnalytics.StageProductionComponent = Vue.extend({
+    props: {
+      items: Array,
+      stage: Object,
+    },
+    template: `
+      <div>
+        <div class="events-description">
+          {{ stage.description }}
+          <limit-warning :count="items.length" />
+        </div>
+        <ul class="stage-event-list">
+          <li v-for="issue in items" class="stage-event-item">
+            <div class="item-details">
+              <img class="avatar" :src="issue.author.avatarUrl">
+              <h5 class="item-title issue-title">
+                <a class="issue-title" :href="issue.url">
+                  {{ issue.title }}
+                </a>
+              </h5>
+              <a :href="issue.url" class="issue-link">#{{ issue.iid }}</a>
+              &middot;
+              <span>
+                Opened
+                <a :href="issue.url" class="issue-date">{{ issue.createdAt }}</a>
+              </span>
+              <span>
+              by
+              <a :href="issue.author.webUrl" class="issue-author-link">
+                {{ issue.author.name }}
+              </a>
+              </span>
+            </div>
+            <div class="item-time">
+              <total-time :time="issue.totalTime"></total-time>
+            </div>
+          </li>
+        </ul>
+      </div>
+    `,
+  });
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_review_component.js b/app/assets/javascripts/cycle_analytics/components/stage_review_component.js
new file mode 100644
index 00000000000..e63c41f2a57
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/components/stage_review_component.js
@@ -0,0 +1,59 @@
+/* eslint-disable no-param-reassign */
+
+import Vue from 'vue';
+
+((global) => {
+  global.cycleAnalytics = global.cycleAnalytics || {};
+
+  global.cycleAnalytics.StageReviewComponent = Vue.extend({
+    props: {
+      items: Array,
+      stage: Object,
+    },
+    template: `
+      <div>
+        <div class="events-description">
+          {{ stage.description }}
+          <limit-warning :count="items.length" />
+        </div>
+        <ul class="stage-event-list">
+          <li v-for="mergeRequest in items" class="stage-event-item">
+            <div class="item-details">
+              <img class="avatar" :src="mergeRequest.author.avatarUrl">
+              <h5 class="item-title merge-merquest-title">
+                <a :href="mergeRequest.url">
+                  {{ mergeRequest.title }}
+                </a>
+              </h5>
+              <a :href="mergeRequest.url" class="issue-link">!{{ mergeRequest.iid }}</a>
+              &middot;
+              <span>
+                Opened
+                <a :href="mergeRequest.url" class="issue-date">{{ mergeRequest.createdAt }}</a>
+              </span>
+              <span>
+                by
+                <a :href="mergeRequest.author.webUrl" class="issue-author-link">{{ mergeRequest.author.name }}</a>
+              </span>
+              <template v-if="mergeRequest.state === 'closed'">
+                <span class="merge-request-state">
+                  <i class="fa fa-ban"></i>
+                  {{ mergeRequest.state.toUpperCase() }}
+                </span>
+              </template>
+              <template v-else>
+                <span class="merge-request-branch" v-if="mergeRequest.branch">
+                  <i class= "fa fa-code-fork"></i>
+                  <a :href="mergeRequest.branch.url">{{ mergeRequest.branch.name }}</a>
+                </span>
+              </template>
+            </div>
+            <div class="item-time">
+              <total-time :time="mergeRequest.totalTime"></total-time>
+            </div>
+          </li>
+        </ul>
+      </div>
+    `,
+  });
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js
new file mode 100644
index 00000000000..d51f7134e25
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.js
@@ -0,0 +1,49 @@
+/* eslint-disable no-param-reassign */
+import Vue from 'vue';
+import iconBranch from '../svg/icon_branch.svg';
+
+((global) => {
+  global.cycleAnalytics = global.cycleAnalytics || {};
+
+  global.cycleAnalytics.StageStagingComponent = Vue.extend({
+    props: {
+      items: Array,
+      stage: Object,
+    },
+    data() {
+      return { iconBranch };
+    },
+    template: `
+      <div>
+        <div class="events-description">
+          {{ stage.description }}
+          <limit-warning :count="items.length" />
+        </div>
+        <ul class="stage-event-list">
+          <li v-for="build in items" class="stage-event-item item-build-component">
+            <div class="item-details">
+              <img class="avatar" :src="build.author.avatarUrl">
+              <h5 class="item-title">
+                <a :href="build.url" class="pipeline-id">#{{ build.id }}</a>
+                <i class="fa fa-code-fork"></i>
+                <a :href="build.branch.url" class="branch-name monospace">{{ build.branch.name }}</a>
+                <span class="icon-branch">${iconBranch}</span>
+                <a :href="build.commitUrl" class="short-sha monospace">{{ build.shortSha }}</a>
+              </h5>
+              <span>
+                <a :href="build.url" class="build-date">{{ build.date }}</a>
+                by
+                <a :href="build.author.webUrl" class="issue-author-link">
+                  {{ build.author.name }}
+                </a>
+              </span>
+            </div>
+            <div class="item-time">
+              <total-time :time="build.totalTime"></total-time>
+            </div>
+          </li>
+        </ul>
+      </div>
+    `,
+  });
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_test_component.js b/app/assets/javascripts/cycle_analytics/components/stage_test_component.js
new file mode 100644
index 00000000000..17ae3a9ddc1
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/components/stage_test_component.js
@@ -0,0 +1,50 @@
+/* eslint-disable no-param-reassign */
+import Vue from 'vue';
+import iconBuildStatus from '../svg/icon_build_status.svg';
+import iconBranch from '../svg/icon_branch.svg';
+
+((global) => {
+  global.cycleAnalytics = global.cycleAnalytics || {};
+
+  global.cycleAnalytics.StageTestComponent = Vue.extend({
+    props: {
+      items: Array,
+      stage: Object,
+    },
+    data() {
+      return { iconBuildStatus, iconBranch };
+    },
+    template: `
+      <div>
+        <div class="events-description">
+          {{ stage.description }}
+          <limit-warning :count="items.length" />
+        </div>
+        <ul class="stage-event-list">
+          <li v-for="build in items" class="stage-event-item item-build-component">
+            <div class="item-details">
+              <h5 class="item-title">
+                <span class="icon-build-status">${iconBuildStatus}</span>
+                <a :href="build.url" class="item-build-name">{{ build.name }}</a>
+                &middot;
+                <a :href="build.url" class="pipeline-id">#{{ build.id }}</a>
+                <i class="fa fa-code-fork"></i>
+                <a :href="build.branch.url" class="branch-name monospace">{{ build.branch.name }}</a>
+                <span class="icon-branch">${iconBranch}</span>
+                <a :href="build.commitUrl" class="short-sha monospace">{{ build.shortSha }}</a>
+              </h5>
+              <span>
+                <a :href="build.url" class="issue-date">
+                  {{ build.date }}
+                </a>
+              </span>
+            </div>
+            <div class="item-time">
+              <total-time :time="build.totalTime"></total-time>
+            </div>
+          </li>
+        </ul>
+      </div>
+    `,
+  });
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/cycle_analytics/components/total_time_component.js b/app/assets/javascripts/cycle_analytics/components/total_time_component.js
new file mode 100644
index 00000000000..b4442ea5566
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/components/total_time_component.js
@@ -0,0 +1,26 @@
+/* eslint-disable no-param-reassign */
+
+import Vue from 'vue';
+
+((global) => {
+  global.cycleAnalytics = global.cycleAnalytics || {};
+
+  global.cycleAnalytics.TotalTimeComponent = Vue.extend({
+    props: {
+      time: Object,
+    },
+    template: `
+      <span class="total-time">
+        <template v-if="Object.keys(time).length">
+          <template v-if="time.days">{{ time.days }} <span>{{ time.days === 1 ? 'day' : 'days' }}</span></template>
+          <template v-if="time.hours">{{ time.hours }} <span>hr</span></template>
+          <template v-if="time.mins && !time.days">{{ time.mins }} <span>mins</span></template>
+          <template v-if="time.seconds && Object.keys(time).length === 1 || time.seconds === 0">{{ time.seconds }} <span>s</span></template>
+        </template>
+        <template v-else>
+          --
+        </template>
+      </span>
+    `,
+  });
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
new file mode 100644
index 00000000000..b099b39e58f
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js
@@ -0,0 +1,136 @@
+/* global Flash */
+
+import Vue from 'vue';
+import Cookies from 'js-cookie';
+import LimitWarningComponent from './components/limit_warning_component';
+
+require('./components/stage_code_component');
+require('./components/stage_issue_component');
+require('./components/stage_plan_component');
+require('./components/stage_production_component');
+require('./components/stage_review_component');
+require('./components/stage_staging_component');
+require('./components/stage_test_component');
+require('./components/total_time_component');
+require('./cycle_analytics_service');
+require('./cycle_analytics_store');
+require('./default_event_objects');
+
+$(() => {
+  const OVERVIEW_DIALOG_COOKIE = 'cycle_analytics_help_dismissed';
+  const cycleAnalyticsEl = document.querySelector('#cycle-analytics');
+  const cycleAnalyticsStore = gl.cycleAnalytics.CycleAnalyticsStore;
+  const cycleAnalyticsService = new gl.cycleAnalytics.CycleAnalyticsService({
+    requestPath: cycleAnalyticsEl.dataset.requestPath,
+  });
+
+  gl.cycleAnalyticsApp = new Vue({
+    el: '#cycle-analytics',
+    name: 'CycleAnalytics',
+    data: {
+      state: cycleAnalyticsStore.state,
+      isLoading: false,
+      isLoadingStage: false,
+      isEmptyStage: false,
+      hasError: false,
+      startDate: 30,
+      isOverviewDialogDismissed: Cookies.get(OVERVIEW_DIALOG_COOKIE),
+    },
+    computed: {
+      currentStage() {
+        return cycleAnalyticsStore.currentActiveStage();
+      },
+    },
+    components: {
+      'stage-issue-component': gl.cycleAnalytics.StageIssueComponent,
+      'stage-plan-component': gl.cycleAnalytics.StagePlanComponent,
+      'stage-code-component': gl.cycleAnalytics.StageCodeComponent,
+      'stage-test-component': gl.cycleAnalytics.StageTestComponent,
+      'stage-review-component': gl.cycleAnalytics.StageReviewComponent,
+      'stage-staging-component': gl.cycleAnalytics.StageStagingComponent,
+      'stage-production-component': gl.cycleAnalytics.StageProductionComponent,
+    },
+    created() {
+      this.fetchCycleAnalyticsData();
+    },
+    methods: {
+      handleError() {
+        cycleAnalyticsStore.setErrorState(true);
+        return new Flash('There was an error while fetching cycle analytics data.');
+      },
+      initDropdown() {
+        const $dropdown = $('.js-ca-dropdown');
+        const $label = $dropdown.find('.dropdown-label');
+
+        $dropdown.find('li a').off('click').on('click', (e) => {
+          e.preventDefault();
+          const $target = $(e.currentTarget);
+          this.startDate = $target.data('value');
+
+          $label.text($target.text().trim());
+          this.fetchCycleAnalyticsData({ startDate: this.startDate });
+        });
+      },
+      fetchCycleAnalyticsData(options) {
+        const fetchOptions = options || { startDate: this.startDate };
+
+        this.isLoading = true;
+
+        cycleAnalyticsService
+          .fetchCycleAnalyticsData(fetchOptions)
+          .done((response) => {
+            cycleAnalyticsStore.setCycleAnalyticsData(response);
+            this.selectDefaultStage();
+            this.initDropdown();
+          })
+          .error(() => {
+            this.handleError();
+          })
+          .always(() => {
+            this.isLoading = false;
+          });
+      },
+      selectDefaultStage() {
+        const stage = this.state.stages.first();
+        this.selectStage(stage);
+      },
+      selectStage(stage) {
+        if (this.isLoadingStage) return;
+        if (this.currentStage === stage) return;
+
+        if (!stage.isUserAllowed) {
+          cycleAnalyticsStore.setActiveStage(stage);
+          return;
+        }
+
+        this.isLoadingStage = true;
+        cycleAnalyticsStore.setStageEvents([], stage);
+        cycleAnalyticsStore.setActiveStage(stage);
+
+        cycleAnalyticsService
+          .fetchStageData({
+            stage,
+            startDate: this.startDate,
+          })
+          .done((response) => {
+            this.isEmptyStage = !response.events.length;
+            cycleAnalyticsStore.setStageEvents(response.events, stage);
+          })
+          .error(() => {
+            this.isEmptyStage = true;
+          })
+          .always(() => {
+            this.isLoadingStage = false;
+          });
+      },
+      dismissOverviewDialog() {
+        this.isOverviewDialogDismissed = true;
+        Cookies.set(OVERVIEW_DIALOG_COOKIE, '1');
+      },
+    },
+  });
+
+  // Register global components
+  Vue.component('limit-warning', LimitWarningComponent);
+  Vue.component('total-time', gl.cycleAnalytics.TotalTimeComponent);
+});
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js.es6 b/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js.es6
deleted file mode 100644
index 331f0209888..00000000000
--- a/app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js.es6
+++ /dev/null
@@ -1,98 +0,0 @@
-/* eslint-disable */
-//= require vue
-
-((global) => {
-
-  const COOKIE_NAME = 'cycle_analytics_help_dismissed';
-  const store = gl.cycleAnalyticsStore = {
-    isLoading: true,
-    hasError: false,
-    isHelpDismissed: Cookies.get(COOKIE_NAME),
-    analytics: {}
-  };
-
-  gl.CycleAnalytics = class CycleAnalytics {
-    constructor() {
-      const that = this;
-
-      this.vue = new Vue({
-        el: '#cycle-analytics',
-        name: 'CycleAnalytics',
-        created: this.fetchData(),
-        data: store,
-        methods: {
-          dismissLanding() {
-            that.dismissLanding();
-          }
-        }
-      });
-    }
-
-    fetchData(options) {
-      store.isLoading = true;
-      options = options || { startDate: 30 };
-
-      $.ajax({
-        url: $('#cycle-analytics').data('request-path'),
-        method: 'GET',
-        dataType: 'json',
-        contentType: 'application/json',
-        data: {
-          cycle_analytics: {
-            start_date: options.startDate
-          }
-        }
-      }).done((data) => {
-        this.decorateData(data);
-        this.initDropdown();
-      })
-      .error((data) => {
-        this.handleError(data);
-      })
-      .always(() => {
-        store.isLoading = false;
-      })
-    }
-
-    decorateData(data) {
-      data.summary = data.summary || [];
-      data.stats = data.stats || [];
-
-      data.summary.forEach((item) => {
-        item.value = item.value || '-';
-      });
-
-      data.stats.forEach((item) => {
-        item.value = item.value || '- - -';
-      });
-
-      store.analytics = data;
-    }
-
-    handleError(data) {
-      store.hasError = true;
-      new Flash('There was an error while fetching cycle analytics data.', 'alert');
-    }
-
-    dismissLanding() {
-      store.isHelpDismissed = true;
-      Cookies.set(COOKIE_NAME, true);
-    }
-
-    initDropdown() {
-      const $dropdown = $('.js-ca-dropdown');
-      const $label = $dropdown.find('.dropdown-label');
-
-      $dropdown.find('li a').off('click').on('click', (e) => {
-        e.preventDefault();
-        const $target = $(e.currentTarget);
-        const value = $target.data('value');
-
-        $label.text($target.text().trim());
-        this.fetchData({ startDate: value });
-      })
-    }
-
-  }
-
-})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js
new file mode 100644
index 00000000000..9f74b14c4b9
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_service.js
@@ -0,0 +1,41 @@
+/* eslint-disable no-param-reassign */
+((global) => {
+  global.cycleAnalytics = global.cycleAnalytics || {};
+
+  class CycleAnalyticsService {
+    constructor(options) {
+      this.requestPath = options.requestPath;
+    }
+
+    fetchCycleAnalyticsData(options) {
+      options = options || { startDate: 30 };
+
+      return $.ajax({
+        url: this.requestPath,
+        method: 'GET',
+        dataType: 'json',
+        contentType: 'application/json',
+        data: {
+          cycle_analytics: {
+            start_date: options.startDate,
+          },
+        },
+      });
+    }
+
+    fetchStageData(options) {
+      const {
+        stage,
+        startDate,
+      } = options;
+
+      return $.get(`${this.requestPath}/events/${stage.title.toLowerCase()}.json`, {
+        cycle_analytics: {
+          start_date: startDate,
+        },
+      });
+    }
+  }
+
+  global.cycleAnalytics.CycleAnalyticsService = CycleAnalyticsService;
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js b/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js
new file mode 100644
index 00000000000..7ae9de7297c
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/cycle_analytics_store.js
@@ -0,0 +1,104 @@
+/* eslint-disable no-param-reassign */
+
+require('../lib/utils/text_utility');
+const DEFAULT_EVENT_OBJECTS = require('./default_event_objects');
+
+((global) => {
+  global.cycleAnalytics = global.cycleAnalytics || {};
+
+  const EMPTY_STAGE_TEXTS = {
+    issue: 'The issue stage shows the time it takes from creating an issue to assigning the issue to a milestone, or add the issue to a list on your Issue Board. Begin creating issues to see data for this stage.',
+    plan: 'The planning stage shows the time from the previous step to pushing your first commit. This time will be added automatically once you push your first commit.',
+    code: 'The coding stage shows the time from the first commit to creating the merge request. The data will automatically be added here once you create your first merge request.',
+    test: 'The testing stage shows the time GitLab CI takes to run every pipeline for the related merge request. The data will automatically be added after your first pipeline finishes running.',
+    review: 'The review stage shows the time from creating the merge request to merging it. The data will automatically be added after you merge your first merge request.',
+    staging: 'The staging stage shows the time between merging the MR and deploying code to the production environment. The data will be automatically added once you deploy to production for the first time.',
+    production: 'The production stage shows the total time it takes between creating an issue and deploying the code to production. The data will be automatically added once you have completed the full idea to production cycle.',
+  };
+
+  global.cycleAnalytics.CycleAnalyticsStore = {
+    state: {
+      summary: '',
+      stats: '',
+      analytics: '',
+      events: [],
+      stages: [],
+    },
+    setCycleAnalyticsData(data) {
+      this.state = Object.assign(this.state, this.decorateData(data));
+    },
+    decorateData(data) {
+      const newData = {};
+
+      newData.stages = data.stats || [];
+      newData.summary = data.summary || [];
+
+      newData.summary.forEach((item) => {
+        item.value = item.value || '-';
+      });
+
+      newData.stages.forEach((item) => {
+        const stageSlug = gl.text.dasherize(item.title.toLowerCase());
+        item.active = false;
+        item.isUserAllowed = data.permissions[stageSlug];
+        item.emptyStageText = EMPTY_STAGE_TEXTS[stageSlug];
+        item.component = `stage-${stageSlug}-component`;
+        item.slug = stageSlug;
+      });
+      newData.analytics = data;
+      return newData;
+    },
+    setLoadingState(state) {
+      this.state.isLoading = state;
+    },
+    setErrorState(state) {
+      this.state.hasError = state;
+    },
+    deactivateAllStages() {
+      this.state.stages.forEach((stage) => {
+        stage.active = false;
+      });
+    },
+    setActiveStage(stage) {
+      this.deactivateAllStages();
+      stage.active = true;
+    },
+    setStageEvents(events, stage) {
+      this.state.events = this.decorateEvents(events, stage);
+    },
+    decorateEvents(events, stage) {
+      const newEvents = [];
+
+      events.forEach((item) => {
+        if (!item) return;
+
+        const eventItem = Object.assign({}, DEFAULT_EVENT_OBJECTS[stage.slug], item);
+
+        eventItem.totalTime = eventItem.total_time;
+
+        if (eventItem.author) {
+          eventItem.author.webUrl = eventItem.author.web_url;
+          eventItem.author.avatarUrl = eventItem.author.avatar_url;
+        }
+
+        if (eventItem.created_at) eventItem.createdAt = eventItem.created_at;
+        if (eventItem.short_sha) eventItem.shortSha = eventItem.short_sha;
+        if (eventItem.commit_url) eventItem.commitUrl = eventItem.commit_url;
+
+        delete eventItem.author.web_url;
+        delete eventItem.author.avatar_url;
+        delete eventItem.total_time;
+        delete eventItem.created_at;
+        delete eventItem.short_sha;
+        delete eventItem.commit_url;
+
+        newEvents.push(eventItem);
+      });
+
+      return newEvents;
+    },
+    currentActiveStage() {
+      return this.state.stages.find(stage => stage.active);
+    },
+  };
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/cycle_analytics/default_event_objects.js b/app/assets/javascripts/cycle_analytics/default_event_objects.js
new file mode 100644
index 00000000000..cfaf9835bf8
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/default_event_objects.js
@@ -0,0 +1,98 @@
+module.exports = {
+  issue: {
+    created_at: '',
+    url: '',
+    iid: '',
+    title: '',
+    total_time: {},
+    author: {
+      avatar_url: '',
+      id: '',
+      name: '',
+      web_url: '',
+    },
+  },
+  plan: {
+    title: '',
+    commit_url: '',
+    short_sha: '',
+    total_time: {},
+    author: {
+      name: '',
+      id: '',
+      avatar_url: '',
+      web_url: '',
+    },
+  },
+  code: {
+    title: '',
+    iid: '',
+    created_at: '',
+    url: '',
+    total_time: {},
+    author: {
+      name: '',
+      id: '',
+      avatar_url: '',
+      web_url: '',
+    },
+  },
+  test: {
+    name: '',
+    id: '',
+    date: '',
+    url: '',
+    short_sha: '',
+    commit_url: '',
+    total_time: {},
+    branch: {
+      name: '',
+      url: '',
+    },
+  },
+  review: {
+    title: '',
+    iid: '',
+    created_at: '',
+    url: '',
+    state: '',
+    total_time: {},
+    author: {
+      name: '',
+      id: '',
+      avatar_url: '',
+      web_url: '',
+    },
+  },
+  staging: {
+    id: '',
+    short_sha: '',
+    date: '',
+    url: '',
+    commit_url: '',
+    total_time: {},
+    author: {
+      name: '',
+      id: '',
+      avatar_url: '',
+      web_url: '',
+    },
+    branch: {
+      name: '',
+      url: '',
+    },
+  },
+  production: {
+    title: '',
+    created_at: '',
+    url: '',
+    iid: '',
+    total_time: {},
+    author: {
+      name: '',
+      id: '',
+      avatar_url: '',
+      web_url: '',
+    },
+  },
+};
diff --git a/app/assets/javascripts/cycle_analytics/svg/icon_branch.svg b/app/assets/javascripts/cycle_analytics/svg/icon_branch.svg
new file mode 100644
index 00000000000..9f547d3d744
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/svg/icon_branch.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path fill="#8C8C8C" fill-rule="evenodd" d="M9.678 6.722C9.353 5.167 8.053 4 6.5 4S3.647 5.167 3.322 6.722h-2.6c-.397 0-.722.35-.722.778 0 .428.325.778.722.778h2.6C3.647 9.833 4.947 11 6.5 11s2.853-1.167 3.178-2.722h2.6c.397 0 .722-.35.722-.778 0-.428-.325-.778-.722-.778h-2.6zM4.694 7.5c0-1.09.795-1.944 1.806-1.944 1.01 0 1.806.855 1.806 1.944 0 1.09-.795 1.944-1.806 1.944-1.01 0-1.806-.855-1.806-1.944z"/></svg>
diff --git a/app/assets/javascripts/cycle_analytics/svg/icon_build_status.svg b/app/assets/javascripts/cycle_analytics/svg/icon_build_status.svg
new file mode 100644
index 00000000000..b932d90618a
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/svg/icon_build_status.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><g fill="#31AF64" fill-rule="evenodd"><path d="M12.5 7c0-3.038-2.462-5.5-5.5-5.5S1.5 3.962 1.5 7s2.462 5.5 5.5 5.5 5.5-2.462 5.5-5.5zM0 7c0-3.866 3.134-7 7-7s7 3.134 7 7-3.134 7-7 7-7-3.134-7-7z"/><path d="M6.28 7.697L5.045 6.464c-.117-.117-.305-.117-.42-.002l-.614.614c-.11.113-.11.303.007.42l1.91 1.91c.19.19.51.197.703.004l.264-.265L9.997 6.04c.108-.107.107-.293-.01-.408l-.612-.614c-.114-.113-.298-.12-.41-.01L6.28 7.7z"/></g></svg>
diff --git a/app/assets/javascripts/cycle_analytics/svg/icon_commit.svg b/app/assets/javascripts/cycle_analytics/svg/icon_commit.svg
new file mode 100644
index 00000000000..6a517756058
--- /dev/null
+++ b/app/assets/javascripts/cycle_analytics/svg/icon_commit.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path fill="#8F8F8F" fill-rule="evenodd" d="M28.777 18c-.91-4.008-4.494-7-8.777-7-4.283 0-7.868 2.992-8.777 7H4.01C2.9 18 2 18.895 2 20c0 1.112.9 2 2.01 2h7.213c.91 4.008 4.494 7 8.777 7 4.283 0 7.868-2.992 8.777-7h7.214C37.1 22 38 21.105 38 20c0-1.112-.9-2-2.01-2h-7.213zM20 25c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5z"/></svg>
diff --git a/app/assets/javascripts/diff.js b/app/assets/javascripts/diff.js
index 4ddafff428f..88180149715 100644
--- a/app/assets/javascripts/diff.js
+++ b/app/assets/javascripts/diff.js
@@ -1,77 +1,125 @@
-/* eslint-disable */
-(function() {
-  this.Diff = (function() {
-    var UNFOLD_COUNT;
-
-    UNFOLD_COUNT = 20;
-
-    function Diff() {
-      $('.files .diff-file').singleFileDiff();
-      this.filesCommentButton = $('.files .diff-file').filesCommentButton();
-      if (this.diffViewType() === 'parallel') {
-        $('.content-wrapper .container-fluid').removeClass('container-limited');
-      }
-      $(document).off('click', '.js-unfold');
-      $(document).on('click', '.js-unfold', (function(_this) {
-        return function(event) {
-          var line_number, link, file, offset, old_line, params, prev_new_line, prev_old_line, ref, ref1, since, target, to, unfold, unfoldBottom;
-          target = $(event.target);
-          unfoldBottom = target.hasClass('js-unfold-bottom');
-          unfold = true;
-          ref = _this.lineNumbers(target.parent()), old_line = ref[0], line_number = ref[1];
-          offset = line_number - old_line;
-          if (unfoldBottom) {
-            line_number += 1;
-            since = line_number;
-            to = line_number + UNFOLD_COUNT;
-          } else {
-            ref1 = _this.lineNumbers(target.parent().prev()), prev_old_line = ref1[0], prev_new_line = ref1[1];
-            line_number -= 1;
-            to = line_number;
-            if (line_number - UNFOLD_COUNT > prev_new_line + 1) {
-              since = line_number - UNFOLD_COUNT;
-            } else {
-              since = prev_new_line + 1;
-              unfold = false;
-            }
-          }
-          file = target.parents('.diff-file');
-          link = file.data('blob-diff-path');
-          params = {
-            since: since,
-            to: to,
-            bottom: unfoldBottom,
-            offset: offset,
-            unfold: unfold,
-            // indent is used to compensate for single space indent to fit
-            // '+' and '-' prepended to diff lines,
-            // see https://gitlab.com/gitlab-org/gitlab-ce/issues/707
-            indent: 1,
-            view: file.data('view')
-          };
-          return $.get(link, params, function(response) {
-            return target.parent().replaceWith(response);
-          });
-        };
-      })(this));
+/* eslint-disable class-methods-use-this */
+
+require('./lib/utils/url_utility');
+
+const UNFOLD_COUNT = 20;
+let isBound = false;
+
+class Diff {
+  constructor() {
+    const $diffFile = $('.files .diff-file');
+    $diffFile.singleFileDiff();
+    $diffFile.filesCommentButton();
+
+    $diffFile.each((index, file) => new gl.ImageFile(file));
+
+    if (this.diffViewType() === 'parallel') {
+      $('.content-wrapper .container-fluid').removeClass('container-limited');
     }
 
-    Diff.prototype.diffViewType = function() {
-      return $('.inline-parallel-buttons a.active').data('view-type');
+    if (!isBound) {
+      $(document)
+        .on('click', '.js-unfold', this.handleClickUnfold.bind(this))
+        .on('click', '.diff-line-num a', this.handleClickLineNum.bind(this));
+      isBound = true;
     }
 
-    Diff.prototype.lineNumbers = function(line) {
-      if (!line.children().length) {
-        return [0, 0];
+    if (gl.utils.getLocationHash()) {
+      this.highlightSelectedLine();
+    }
+
+    this.openAnchoredDiff();
+  }
+
+  handleClickUnfold(e) {
+    const $target = $(e.target);
+    const [oldLineNumber, newLineNumber] = this.lineNumbers($target.parent());
+    const offset = newLineNumber - oldLineNumber;
+    const bottom = $target.hasClass('js-unfold-bottom');
+    let since;
+    let to;
+    let unfold = true;
+
+    if (bottom) {
+      const lineNumber = newLineNumber + 1;
+      since = lineNumber;
+      to = lineNumber + UNFOLD_COUNT;
+    } else {
+      const lineNumber = newLineNumber - 1;
+      since = lineNumber - UNFOLD_COUNT;
+      to = lineNumber;
+
+      // make sure we aren't loading more than we need
+      const prevNewLine = this.lineNumbers($target.parent().prev())[1];
+      if (since <= prevNewLine + 1) {
+        since = prevNewLine + 1;
+        unfold = false;
       }
+    }
 
-      return line.find('.diff-line-num').map(function() {
-        return parseInt($(this).data('linenumber'));
+    const file = $target.parents('.diff-file');
+    const link = file.data('blob-diff-path');
+    const view = file.data('view');
+
+    const params = { since, to, bottom, offset, unfold, view };
+    $.get(link, params, response => $target.parent().replaceWith(response));
+  }
+
+  openAnchoredDiff(cb) {
+    const locationHash = gl.utils.getLocationHash();
+    const anchoredDiff = locationHash && locationHash.split('_')[0];
+
+    if (!anchoredDiff) return;
+
+    const diffTitle = $(`#${anchoredDiff}`);
+    const diffFile = diffTitle.closest('.diff-file');
+    const nothingHereBlock = $('.nothing-here-block:visible', diffFile);
+    if (nothingHereBlock.length) {
+      const clickTarget = $('.js-file-title, .click-to-expand', diffFile);
+      diffFile.data('singleFileDiff').toggleDiff(clickTarget, () => {
+        this.highlightSelectedLine();
+        if (cb) cb();
       });
-    };
+    } else if (cb) {
+      cb();
+    }
+  }
 
-    return Diff;
+  handleClickLineNum(e) {
+    const hash = $(e.currentTarget).attr('href');
+    e.preventDefault();
+    if (window.history.pushState) {
+      window.history.pushState(null, null, hash);
+    } else {
+      window.location.hash = hash;
+    }
+    this.highlightSelectedLine();
+  }
 
-  })();
+  diffViewType() {
+    return $('.inline-parallel-buttons a.active').data('view-type');
+  }
+
+  lineNumbers(line) {
+    const children = line.find('.diff-line-num').toArray();
+    if (children.length !== 2) {
+      return [0, 0];
+    }
+    return children.map(elm => parseInt($(elm).data('linenumber'), 10) || 0);
+  }
+
+  highlightSelectedLine() {
+    const hash = gl.utils.getLocationHash();
+    const $diffFiles = $('.diff-file');
+    $diffFiles.find('.hll').removeClass('hll');
+
+    if (hash) {
+      $diffFiles
+        .find(`tr#${hash}:not(.match) td, td#${hash}, td[data-line-code="${hash}"]`)
+        .addClass('hll');
+    }
+  }
+}
 
-}).call(this);
+window.gl = window.gl || {};
+window.gl.Diff = Diff;
diff --git a/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js b/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js
new file mode 100644
index 00000000000..fc2f20e3bcb
--- /dev/null
+++ b/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js
@@ -0,0 +1,61 @@
+/* eslint-disable comma-dangle, object-shorthand, func-names, no-else-return, quotes, no-lonely-if, max-len */
+/* global CommentsStore */
+
+import Vue from 'vue';
+
+(() => {
+  const CommentAndResolveBtn = Vue.extend({
+    props: {
+      discussionId: String,
+    },
+    data() {
+      return {
+        textareaIsEmpty: true,
+        discussion: {},
+      };
+    },
+    computed: {
+      showButton: function () {
+        if (this.discussion) {
+          return this.discussion.isResolvable();
+        } else {
+          return false;
+        }
+      },
+      isDiscussionResolved: function () {
+        return this.discussion.isResolved();
+      },
+      buttonText: function () {
+        if (this.isDiscussionResolved) {
+          if (this.textareaIsEmpty) {
+            return "Unresolve discussion";
+          } else {
+            return "Comment & unresolve discussion";
+          }
+        } else {
+          if (this.textareaIsEmpty) {
+            return "Resolve discussion";
+          } else {
+            return "Comment & resolve discussion";
+          }
+        }
+      }
+    },
+    created() {
+      this.discussion = CommentsStore.state[this.discussionId];
+    },
+    mounted: function () {
+      const $textarea = $(`#new-discussion-note-form-${this.discussionId} .note-textarea`);
+      this.textareaIsEmpty = $textarea.val() === '';
+
+      $textarea.on('input.comment-and-resolve-btn', () => {
+        this.textareaIsEmpty = $textarea.val() === '';
+      });
+    },
+    destroyed: function () {
+      $(`#new-discussion-note-form-${this.discussionId} .note-textarea`).off('input.comment-and-resolve-btn');
+    }
+  });
+
+  Vue.component('comment-and-resolve-btn', CommentAndResolveBtn);
+})(window);
diff --git a/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js.es6 b/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js.es6
deleted file mode 100644
index 29a12a2395b..00000000000
--- a/app/assets/javascripts/diff_notes/components/comment_resolve_btn.js.es6
+++ /dev/null
@@ -1,50 +0,0 @@
-/* eslint-disable */
-((w) => {
-  w.CommentAndResolveBtn = Vue.extend({
-    props: {
-      discussionId: String,
-      textareaIsEmpty: Boolean
-    },
-    computed: {
-      discussion: function () {
-        return CommentsStore.state[this.discussionId];
-      },
-      showButton: function () {
-        if (this.discussion) {
-          return this.discussion.isResolvable();
-        } else {
-          return false;
-        }
-      },
-      isDiscussionResolved: function () {
-        return this.discussion.isResolved();
-      },
-      buttonText: function () {
-        if (this.isDiscussionResolved) {
-          if (this.textareaIsEmpty) {
-            return "Unresolve discussion";
-          } else {
-            return "Comment & unresolve discussion";
-          }
-        } else {
-          if (this.textareaIsEmpty) {
-            return "Resolve discussion";
-          } else {
-            return "Comment & resolve discussion";
-          }
-        }
-      }
-    },
-    ready: function () {
-      const $textarea = $(`#new-discussion-note-form-${this.discussionId} .note-textarea`);
-      this.textareaIsEmpty = $textarea.val() === '';
-
-      $textarea.on('input.comment-and-resolve-btn', () => {
-        this.textareaIsEmpty = $textarea.val() === '';
-      });
-    },
-    destroyed: function () {
-      $(`#new-discussion-note-form-${this.discussionId} .note-textarea`).off('input.comment-and-resolve-btn');
-    }
-  });
-})(window);
diff --git a/app/assets/javascripts/diff_notes/components/diff_note_avatars.js b/app/assets/javascripts/diff_notes/components/diff_note_avatars.js
new file mode 100644
index 00000000000..0297add94d5
--- /dev/null
+++ b/app/assets/javascripts/diff_notes/components/diff_note_avatars.js
@@ -0,0 +1,158 @@
+/* global CommentsStore */
+/* global notes */
+
+import Vue from 'vue';
+import collapseIcon from '../icons/collapse_icon.svg';
+
+(() => {
+  const DiffNoteAvatars = Vue.extend({
+    props: ['discussionId'],
+    data() {
+      return {
+        isVisible: false,
+        lineType: '',
+        storeState: CommentsStore.state,
+        shownAvatars: 3,
+        collapseIcon,
+      };
+    },
+    template: `
+      <div class="diff-comment-avatar-holders"
+        v-show="notesCount !== 0">
+        <div v-if="!isVisible">
+          <img v-for="note in notesSubset"
+            class="avatar diff-comment-avatar has-tooltip js-diff-comment-avatar"
+            width="19"
+            height="19"
+            role="button"
+            data-container="body"
+            data-placement="top"
+            data-html="true"
+            :data-line-type="lineType"
+            :title="note.authorName + ': ' + note.noteTruncated"
+            :src="note.authorAvatar"
+            @click="clickedAvatar($event)" />
+          <span v-if="notesCount > shownAvatars"
+            class="diff-comments-more-count has-tooltip js-diff-comment-avatar"
+            data-container="body"
+            data-placement="top"
+            ref="extraComments"
+            role="button"
+            :data-line-type="lineType"
+            :title="extraNotesTitle"
+            @click="clickedAvatar($event)">{{ moreText }}</span>
+        </div>
+        <button class="diff-notes-collapse js-diff-comment-avatar"
+          type="button"
+          aria-label="Show comments"
+          :data-line-type="lineType"
+          @click="clickedAvatar($event)"
+          v-if="isVisible"
+          v-html="collapseIcon">
+        </button>
+      </div>
+    `,
+    mounted() {
+      this.$nextTick(() => {
+        this.addNoCommentClass();
+        this.setDiscussionVisible();
+
+        this.lineType = $(this.$el).closest('.diff-line-num').hasClass('old_line') ? 'old' : 'new';
+      });
+
+      $(document).on('toggle.comments', () => {
+        this.$nextTick(() => {
+          this.setDiscussionVisible();
+        });
+      });
+    },
+    destroyed() {
+      $(document).off('toggle.comments');
+    },
+    watch: {
+      storeState: {
+        handler() {
+          this.$nextTick(() => {
+            $('.has-tooltip', this.$el).tooltip('fixTitle');
+
+            // We need to add/remove a class to an element that is outside the Vue instance
+            this.addNoCommentClass();
+          });
+        },
+        deep: true,
+      },
+    },
+    computed: {
+      notesSubset() {
+        let notes = [];
+
+        if (this.discussion) {
+          notes = Object.keys(this.discussion.notes)
+            .slice(0, this.shownAvatars)
+            .map(noteId => this.discussion.notes[noteId]);
+        }
+
+        return notes;
+      },
+      extraNotesTitle() {
+        if (this.discussion) {
+          const extra = this.discussion.notesCount() - this.shownAvatars;
+
+          return `${extra} more comment${extra > 1 ? 's' : ''}`;
+        }
+
+        return '';
+      },
+      discussion() {
+        return this.storeState[this.discussionId];
+      },
+      notesCount() {
+        if (this.discussion) {
+          return this.discussion.notesCount();
+        }
+
+        return 0;
+      },
+      moreText() {
+        const plusSign = this.notesCount < 100 ? '+' : '';
+
+        return `${plusSign}${this.notesCount - this.shownAvatars}`;
+      },
+    },
+    methods: {
+      clickedAvatar(e) {
+        notes.addDiffNote(e);
+
+        // Toggle the active state of the toggle all button
+        this.toggleDiscussionsToggleState();
+
+        this.$nextTick(() => {
+          this.setDiscussionVisible();
+
+          $('.has-tooltip', this.$el).tooltip('fixTitle');
+          $('.has-tooltip', this.$el).tooltip('hide');
+        });
+      },
+      addNoCommentClass() {
+        const notesCount = this.notesCount;
+
+        $(this.$el).closest('.js-avatar-container')
+          .toggleClass('js-no-comment-btn', notesCount > 0)
+          .nextUntil('.js-avatar-container')
+          .toggleClass('js-no-comment-btn', notesCount > 0);
+      },
+      toggleDiscussionsToggleState() {
+        const $notesHolders = $(this.$el).closest('.code').find('.notes_holder');
+        const $visibleNotesHolders = $notesHolders.filter(':visible');
+        const $toggleDiffCommentsBtn = $(this.$el).closest('.diff-file').find('.js-toggle-diff-comments');
+
+        $toggleDiffCommentsBtn.toggleClass('active', $notesHolders.length === $visibleNotesHolders.length);
+      },
+      setDiscussionVisible() {
+        this.isVisible = $(`.diffs .notes[data-discussion-id="${this.discussion.id}"]`).is(':visible');
+      },
+    },
+  });
+
+  Vue.component('diff-note-avatars', DiffNoteAvatars);
+})();
diff --git a/app/assets/javascripts/diff_notes/components/jump_to_discussion.js b/app/assets/javascripts/diff_notes/components/jump_to_discussion.js
new file mode 100644
index 00000000000..8edc45130fc
--- /dev/null
+++ b/app/assets/javascripts/diff_notes/components/jump_to_discussion.js
@@ -0,0 +1,195 @@
+/* eslint-disable comma-dangle, object-shorthand, func-names, no-else-return, guard-for-in, no-restricted-syntax, one-var, space-before-function-paren, no-lonely-if, no-continue, brace-style, max-len, quotes */
+/* global DiscussionMixins */
+/* global CommentsStore */
+
+import Vue from 'vue';
+
+(() => {
+  const JumpToDiscussion = Vue.extend({
+    mixins: [DiscussionMixins],
+    props: {
+      discussionId: String
+    },
+    data: function () {
+      return {
+        discussions: CommentsStore.state,
+        discussion: {},
+      };
+    },
+    computed: {
+      allResolved: function () {
+        return this.unresolvedDiscussionCount === 0;
+      },
+      showButton: function () {
+        if (this.discussionId) {
+          if (this.unresolvedDiscussionCount > 1) {
+            return true;
+          } else {
+            return this.discussionId !== this.lastResolvedId;
+          }
+        } else {
+          return this.unresolvedDiscussionCount >= 1;
+        }
+      },
+      lastResolvedId: function () {
+        let lastId;
+        for (const discussionId in this.discussions) {
+          const discussion = this.discussions[discussionId];
+
+          if (!discussion.isResolved()) {
+            lastId = discussion.id;
+          }
+        }
+        return lastId;
+      }
+    },
+    methods: {
+      jumpToNextUnresolvedDiscussion: function () {
+        let discussionsSelector;
+        let discussionIdsInScope;
+        let firstUnresolvedDiscussionId;
+        let nextUnresolvedDiscussionId;
+        let activeTab = window.mrTabs.currentAction;
+        let hasDiscussionsToJumpTo = true;
+        let jumpToFirstDiscussion = !this.discussionId;
+
+        const discussionIdsForElements = function(elements) {
+          return elements.map(function() {
+            return $(this).attr('data-discussion-id');
+          }).toArray();
+        };
+
+        const discussions = this.discussions;
+
+        if (activeTab === 'diffs') {
+          discussionsSelector = '.diffs .notes[data-discussion-id]';
+          discussionIdsInScope = discussionIdsForElements($(discussionsSelector));
+
+          let unresolvedDiscussionCount = 0;
+
+          for (let i = 0; i < discussionIdsInScope.length; i += 1) {
+            const discussionId = discussionIdsInScope[i];
+            const discussion = discussions[discussionId];
+            if (discussion && !discussion.isResolved()) {
+              unresolvedDiscussionCount += 1;
+            }
+          }
+
+          if (this.discussionId && !this.discussion.isResolved()) {
+            // If this is the last unresolved discussion on the diffs tab,
+            // there are no discussions to jump to.
+            if (unresolvedDiscussionCount === 1) {
+              hasDiscussionsToJumpTo = false;
+            }
+          } else {
+            // If there are no unresolved discussions on the diffs tab at all,
+            // there are no discussions to jump to.
+            if (unresolvedDiscussionCount === 0) {
+              hasDiscussionsToJumpTo = false;
+            }
+          }
+        } else if (activeTab !== 'notes') {
+          // If we are on the commits or builds tabs,
+          // there are no discussions to jump to.
+          hasDiscussionsToJumpTo = false;
+        }
+
+        if (!hasDiscussionsToJumpTo) {
+          // If there are no discussions to jump to on the current page,
+          // switch to the notes tab and jump to the first disucssion there.
+          window.mrTabs.activateTab('notes');
+          activeTab = 'notes';
+          jumpToFirstDiscussion = true;
+        }
+
+        if (activeTab === 'notes') {
+          discussionsSelector = '.discussion[data-discussion-id]';
+          discussionIdsInScope = discussionIdsForElements($(discussionsSelector));
+        }
+
+        let currentDiscussionFound = false;
+        for (let i = 0; i < discussionIdsInScope.length; i += 1) {
+          const discussionId = discussionIdsInScope[i];
+          const discussion = discussions[discussionId];
+
+          if (!discussion) {
+            // Discussions for comments on commits in this MR don't have a resolved status.
+            continue;
+          }
+
+          if (!firstUnresolvedDiscussionId && !discussion.isResolved()) {
+            firstUnresolvedDiscussionId = discussionId;
+
+            if (jumpToFirstDiscussion) {
+              break;
+            }
+          }
+
+          if (!jumpToFirstDiscussion) {
+            if (currentDiscussionFound) {
+              if (!discussion.isResolved()) {
+                nextUnresolvedDiscussionId = discussionId;
+                break;
+              }
+              else {
+                continue;
+              }
+            }
+
+            if (discussionId === this.discussionId) {
+              currentDiscussionFound = true;
+            }
+          }
+        }
+
+        nextUnresolvedDiscussionId = nextUnresolvedDiscussionId || firstUnresolvedDiscussionId;
+
+        if (!nextUnresolvedDiscussionId) {
+          return;
+        }
+
+        let $target = $(`${discussionsSelector}[data-discussion-id="${nextUnresolvedDiscussionId}"]`);
+
+        if (activeTab === 'notes') {
+          $target = $target.closest('.note-discussion');
+
+          // If the next discussion is closed, toggle it open.
+          if ($target.find('.js-toggle-content').is(':hidden')) {
+            $target.find('.js-toggle-button i').trigger('click');
+          }
+        } else if (activeTab === 'diffs') {
+          // Resolved discussions are hidden in the diffs tab by default.
+          // If they are marked unresolved on the notes tab, they will still be hidden on the diffs tab.
+          // When jumping between unresolved discussions on the diffs tab, we show them.
+          $target.closest(".content").show();
+
+          $target = $target.closest("tr.notes_holder");
+          $target.show();
+
+          // If we are on the diffs tab, we don't scroll to the discussion itself, but to
+          // 4 diff lines above it: the line the discussion was in response to + 3 context
+          let prevEl;
+          for (let i = 0; i < 4; i += 1) {
+            prevEl = $target.prev();
+
+            // If the discussion doesn't have 4 lines above it, we'll have to do with fewer.
+            if (!prevEl.hasClass("line_holder")) {
+              break;
+            }
+
+            $target = prevEl;
+          }
+        }
+
+        $.scrollTo($target, {
+          offset: 0
+        });
+      }
+    },
+    created() {
+      this.discussion = this.discussions[this.discussionId];
+    },
+  });
+
+  Vue.component('jump-to-discussion', JumpToDiscussion);
+})();
diff --git a/app/assets/javascripts/diff_notes/components/jump_to_discussion.js.es6 b/app/assets/javascripts/diff_notes/components/jump_to_discussion.js.es6
deleted file mode 100644
index 983e554b9c1..00000000000
--- a/app/assets/javascripts/diff_notes/components/jump_to_discussion.js.es6
+++ /dev/null
@@ -1,189 +0,0 @@
-/* eslint-disable */
-(() => {
-  JumpToDiscussion = Vue.extend({
-    mixins: [DiscussionMixins],
-    props: {
-      discussionId: String
-    },
-    data: function () {
-      return {
-        discussions: CommentsStore.state,
-      };
-    },
-    computed: {
-      discussion: function () {
-        return this.discussions[this.discussionId];
-      },
-      allResolved: function () {
-        return this.unresolvedDiscussionCount === 0;
-      },
-      showButton: function () {
-        if (this.discussionId) {
-          if (this.unresolvedDiscussionCount > 1) {
-            return true;
-          } else {
-            return this.discussionId !== this.lastResolvedId;
-          }
-        } else {
-          return this.unresolvedDiscussionCount >= 1;
-        }
-      },
-      lastResolvedId: function () {
-        let lastId;
-        for (const discussionId in this.discussions) {
-          const discussion = this.discussions[discussionId];
-
-          if (!discussion.isResolved()) {
-            lastId = discussion.id;
-          }
-        }
-        return lastId;
-      }
-    },
-    methods: {
-      jumpToNextUnresolvedDiscussion: function () {
-        let discussionsSelector,
-            discussionIdsInScope,
-            firstUnresolvedDiscussionId,
-            nextUnresolvedDiscussionId,
-            activeTab = window.mrTabs.currentAction,
-            hasDiscussionsToJumpTo = true,
-            jumpToFirstDiscussion = !this.discussionId;
-
-        const discussionIdsForElements = function(elements) {
-          return elements.map(function() {
-            return $(this).attr('data-discussion-id');
-          }).toArray();
-        };
-
-        const discussions = this.discussions;
-
-        if (activeTab === 'diffs') {
-          discussionsSelector = '.diffs .notes[data-discussion-id]';
-          discussionIdsInScope = discussionIdsForElements($(discussionsSelector));
-
-          let unresolvedDiscussionCount = 0;
-
-          for (let i = 0; i < discussionIdsInScope.length; i++) {
-            const discussionId = discussionIdsInScope[i];
-            const discussion = discussions[discussionId];
-            if (discussion && !discussion.isResolved()) {
-              unresolvedDiscussionCount++;
-            }
-          }
-
-          if (this.discussionId && !this.discussion.isResolved()) {
-            // If this is the last unresolved discussion on the diffs tab,
-            // there are no discussions to jump to.
-            if (unresolvedDiscussionCount === 1) {
-              hasDiscussionsToJumpTo = false;
-            }
-          } else {
-            // If there are no unresolved discussions on the diffs tab at all,
-            // there are no discussions to jump to.
-            if (unresolvedDiscussionCount === 0) {
-              hasDiscussionsToJumpTo = false;
-            }
-          }
-        } else if (activeTab !== 'notes') {
-          // If we are on the commits or builds tabs,
-          // there are no discussions to jump to.
-          hasDiscussionsToJumpTo = false;
-        }
-
-        if (!hasDiscussionsToJumpTo) {
-          // If there are no discussions to jump to on the current page,
-          // switch to the notes tab and jump to the first disucssion there.
-          window.mrTabs.activateTab('notes');
-          activeTab = 'notes';
-          jumpToFirstDiscussion = true;
-        }
-
-        if (activeTab === 'notes') {
-          discussionsSelector = '.discussion[data-discussion-id]';
-          discussionIdsInScope = discussionIdsForElements($(discussionsSelector));
-        }
-
-        let currentDiscussionFound = false;
-        for (let i = 0; i < discussionIdsInScope.length; i++) {
-          const discussionId = discussionIdsInScope[i];
-          const discussion = discussions[discussionId];
-
-          if (!discussion) {
-            // Discussions for comments on commits in this MR don't have a resolved status.
-            continue;
-          }
-
-          if (!firstUnresolvedDiscussionId && !discussion.isResolved()) {
-            firstUnresolvedDiscussionId = discussionId;
-
-            if (jumpToFirstDiscussion) {
-              break;
-            }
-          }
-
-          if (!jumpToFirstDiscussion) {
-            if (currentDiscussionFound) {
-              if (!discussion.isResolved()) {
-                nextUnresolvedDiscussionId = discussionId;
-                break;
-              }
-              else {
-                continue;
-              }
-            }
-
-            if (discussionId === this.discussionId) {
-              currentDiscussionFound = true;
-            }
-          }
-        }
-
-        nextUnresolvedDiscussionId = nextUnresolvedDiscussionId || firstUnresolvedDiscussionId;
-
-        if (!nextUnresolvedDiscussionId) {
-          return;
-        }
-
-        let $target = $(`${discussionsSelector}[data-discussion-id="${nextUnresolvedDiscussionId}"]`);
-
-        if (activeTab === 'notes') {
-          $target = $target.closest('.note-discussion');
-
-          // If the next discussion is closed, toggle it open.
-          if ($target.find('.js-toggle-content').is(':hidden')) {
-            $target.find('.js-toggle-button i').trigger('click')
-          }
-        } else if (activeTab === 'diffs') {
-          // Resolved discussions are hidden in the diffs tab by default.
-          // If they are marked unresolved on the notes tab, they will still be hidden on the diffs tab.
-          // When jumping between unresolved discussions on the diffs tab, we show them.
-          $target.closest(".content").show();
-
-          $target = $target.closest("tr.notes_holder");
-          $target.show();
-
-          // If we are on the diffs tab, we don't scroll to the discussion itself, but to
-          // 4 diff lines above it: the line the discussion was in response to + 3 context
-          let prevEl;
-          for (let i = 0; i < 4; i++) {
-            prevEl = $target.prev();
-
-            // If the discussion doesn't have 4 lines above it, we'll have to do with fewer.
-            if (!prevEl.hasClass("line_holder")) {
-              break;
-            }
-
-            $target = prevEl;
-          }
-        }
-
-        $.scrollTo($target, {
-          offset: -($('.navbar-gitlab').outerHeight() + $('.layout-nav').outerHeight())
-        });
-      }
-    }
-  });
-
-  Vue.component('jump-to-discussion', JumpToDiscussion);
-})();
diff --git a/app/assets/javascripts/diff_notes/components/new_issue_for_discussion.js b/app/assets/javascripts/diff_notes/components/new_issue_for_discussion.js
new file mode 100644
index 00000000000..8eb0e10b832
--- /dev/null
+++ b/app/assets/javascripts/diff_notes/components/new_issue_for_discussion.js
@@ -0,0 +1,30 @@
+/* global CommentsStore */
+
+import Vue from 'vue';
+
+(() => {
+  const NewIssueForDiscussion = Vue.extend({
+    props: {
+      discussionId: {
+        type: String,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        discussions: CommentsStore.state,
+      };
+    },
+    computed: {
+      discussion() {
+        return this.discussions[this.discussionId];
+      },
+      showButton() {
+        if (this.discussion) return !this.discussion.isResolved();
+        return false;
+      },
+    },
+  });
+
+  Vue.component('new-issue-for-discussion-btn', NewIssueForDiscussion);
+})();
diff --git a/app/assets/javascripts/diff_notes/components/resolve_btn.js b/app/assets/javascripts/diff_notes/components/resolve_btn.js
new file mode 100644
index 00000000000..312f38ce241
--- /dev/null
+++ b/app/assets/javascripts/diff_notes/components/resolve_btn.js
@@ -0,0 +1,121 @@
+/* eslint-disable comma-dangle, object-shorthand, func-names, quote-props, no-else-return, camelcase, no-new, max-len */
+/* global CommentsStore */
+/* global ResolveService */
+/* global Flash */
+
+import Vue from 'vue';
+
+(() => {
+  const ResolveBtn = Vue.extend({
+    props: {
+      noteId: Number,
+      discussionId: String,
+      resolved: Boolean,
+      canResolve: Boolean,
+      resolvedBy: String,
+      authorName: String,
+      authorAvatar: String,
+      noteTruncated: String,
+    },
+    data: function () {
+      return {
+        discussions: CommentsStore.state,
+        loading: false,
+        note: {},
+      };
+    },
+    watch: {
+      'discussions': {
+        handler: 'updateTooltip',
+        deep: true
+      }
+    },
+    computed: {
+      discussion: function () {
+        return this.discussions[this.discussionId];
+      },
+      buttonText: function () {
+        if (this.isResolved) {
+          return `Resolved by ${this.resolvedByName}`;
+        } else if (this.canResolve) {
+          return 'Mark as resolved';
+        } else {
+          return 'Unable to resolve';
+        }
+      },
+      isResolved: function () {
+        if (this.note) {
+          return this.note.resolved;
+        } else {
+          return false;
+        }
+      },
+      resolvedByName: function () {
+        return this.note.resolved_by;
+      },
+    },
+    methods: {
+      updateTooltip: function () {
+        this.$nextTick(() => {
+          $(this.$refs.button)
+            .tooltip('hide')
+            .tooltip('fixTitle');
+        });
+      },
+      resolve: function () {
+        if (!this.canResolve) return;
+
+        let promise;
+        this.loading = true;
+
+        if (this.isResolved) {
+          promise = ResolveService
+            .unresolve(this.noteId);
+        } else {
+          promise = ResolveService
+            .resolve(this.noteId);
+        }
+
+        promise.then((response) => {
+          this.loading = false;
+
+          if (response.status === 200) {
+            const data = response.json();
+            const resolved_by = data ? data.resolved_by : null;
+
+            CommentsStore.update(this.discussionId, this.noteId, !this.isResolved, resolved_by);
+            this.discussion.updateHeadline(data);
+          } else {
+            new Flash('An error occurred when trying to resolve a comment. Please try again.', 'alert');
+          }
+
+          this.updateTooltip();
+        });
+      }
+    },
+    mounted: function () {
+      $(this.$refs.button).tooltip({
+        container: 'body'
+      });
+    },
+    beforeDestroy: function () {
+      CommentsStore.delete(this.discussionId, this.noteId);
+    },
+    created: function () {
+      CommentsStore.create({
+        discussionId: this.discussionId,
+        noteId: this.noteId,
+        canResolve: this.canResolve,
+        resolved: this.resolved,
+        resolvedBy: this.resolvedBy,
+        authorName: this.authorName,
+        authorAvatar: this.authorAvatar,
+        noteTruncated: this.noteTruncated,
+      });
+
+      this.note = this.discussion.getNote(this.noteId);
+    }
+  });
+
+  Vue.component('resolve-btn', ResolveBtn);
+})();
diff --git a/app/assets/javascripts/diff_notes/components/resolve_btn.js.es6 b/app/assets/javascripts/diff_notes/components/resolve_btn.js.es6
deleted file mode 100644
index bcc052c7c8c..00000000000
--- a/app/assets/javascripts/diff_notes/components/resolve_btn.js.es6
+++ /dev/null
@@ -1,104 +0,0 @@
-/* eslint-disable */
-((w) => {
-  w.ResolveBtn = Vue.extend({
-    props: {
-      noteId: Number,
-      discussionId: String,
-      resolved: Boolean,
-      projectPath: String,
-      canResolve: Boolean,
-      resolvedBy: String
-    },
-    data: function () {
-      return {
-        discussions: CommentsStore.state,
-        loading: false
-      };
-    },
-    watch: {
-      'discussions': {
-        handler: 'updateTooltip',
-        deep: true
-      }
-    },
-    computed: {
-      discussion: function () {
-        return this.discussions[this.discussionId];
-      },
-      note: function () {
-        if (this.discussion) {
-          return this.discussion.getNote(this.noteId);
-        } else {
-          return undefined;
-        }
-      },
-      buttonText: function () {
-        if (this.isResolved) {
-          return `Resolved by ${this.resolvedByName}`;
-        } else if (this.canResolve) {
-          return 'Mark as resolved';
-        } else {
-          return 'Unable to resolve';
-        }
-      },
-      isResolved: function () {
-        if (this.note) {
-          return this.note.resolved;
-        } else {
-          return false;
-        }
-      },
-      resolvedByName: function () {
-        return this.note.resolved_by;
-      },
-    },
-    methods: {
-      updateTooltip: function () {
-        $(this.$els.button)
-          .tooltip('hide')
-          .tooltip('fixTitle');
-      },
-      resolve: function () {
-        if (!this.canResolve) return;
-
-        let promise;
-        this.loading = true;
-
-        if (this.isResolved) {
-          promise = ResolveService
-            .unresolve(this.projectPath, this.noteId);
-        } else {
-          promise = ResolveService
-            .resolve(this.projectPath, this.noteId);
-        }
-
-        promise.then((response) => {
-          this.loading = false;
-
-          if (response.status === 200) {
-            const data = response.json();
-            const resolved_by = data ? data.resolved_by : null;
-
-            CommentsStore.update(this.discussionId, this.noteId, !this.isResolved, resolved_by);
-            this.discussion.updateHeadline(data);
-          } else {
-            new Flash('An error occurred when trying to resolve a comment. Please try again.', 'alert');
-          }
-
-          this.$nextTick(this.updateTooltip);
-        });
-      }
-    },
-    compiled: function () {
-      $(this.$els.button).tooltip({
-        container: 'body'
-      });
-    },
-    beforeDestroy: function () {
-      CommentsStore.delete(this.discussionId, this.noteId);
-    },
-    created: function () {
-      CommentsStore.create(this.discussionId, this.noteId, this.canResolve, this.resolved, this.resolvedBy);
-    }
-  });
-})(window);
diff --git a/app/assets/javascripts/diff_notes/components/resolve_count.js b/app/assets/javascripts/diff_notes/components/resolve_count.js
new file mode 100644
index 00000000000..27147ac6b5c
--- /dev/null
+++ b/app/assets/javascripts/diff_notes/components/resolve_count.js
@@ -0,0 +1,27 @@
+/* eslint-disable comma-dangle, object-shorthand, func-names, no-param-reassign */
+/* global DiscussionMixins */
+/* global CommentsStore */
+
+import Vue from 'vue';
+
+((w) => {
+  w.ResolveCount = Vue.extend({
+    mixins: [DiscussionMixins],
+    props: {
+      loggedOut: Boolean
+    },
+    data: function () {
+      return {
+        discussions: CommentsStore.state
+      };
+    },
+    computed: {
+      allResolved: function () {
+        return this.resolvedDiscussionCount === this.discussionCount;
+      },
+      resolvedCountText() {
+        return this.discussionCount === 1 ? 'discussion' : 'discussions';
+      }
+    }
+  });
+})(window);
diff --git a/app/assets/javascripts/diff_notes/components/resolve_count.js.es6 b/app/assets/javascripts/diff_notes/components/resolve_count.js.es6
deleted file mode 100644
index 24a99e23132..00000000000
--- a/app/assets/javascripts/diff_notes/components/resolve_count.js.es6
+++ /dev/null
@@ -1,19 +0,0 @@
-/* eslint-disable */
-((w) => {
-  w.ResolveCount = Vue.extend({
-    mixins: [DiscussionMixins],
-    props: {
-      loggedOut: Boolean
-    },
-    data: function () {
-      return {
-        discussions: CommentsStore.state
-      };
-    },
-    computed: {
-      allResolved: function () {
-        return this.resolvedDiscussionCount === this.discussionCount;
-      }
-    }
-  });
-})(window);
diff --git a/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js b/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js
new file mode 100644
index 00000000000..a964b7d0c6b
--- /dev/null
+++ b/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js
@@ -0,0 +1,62 @@
+/* eslint-disable object-shorthand, func-names, space-before-function-paren, comma-dangle, no-else-return, quotes, max-len */
+/* global CommentsStore */
+/* global ResolveService */
+
+import Vue from 'vue';
+
+(() => {
+  const ResolveDiscussionBtn = Vue.extend({
+    props: {
+      discussionId: String,
+      mergeRequestId: Number,
+      canResolve: Boolean,
+    },
+    data: function() {
+      return {
+        discussion: {},
+      };
+    },
+    computed: {
+      showButton: function () {
+        if (this.discussion) {
+          return this.discussion.isResolvable();
+        } else {
+          return false;
+        }
+      },
+      isDiscussionResolved: function () {
+        if (this.discussion) {
+          return this.discussion.isResolved();
+        } else {
+          return false;
+        }
+      },
+      buttonText: function () {
+        if (this.isDiscussionResolved) {
+          return "Unresolve discussion";
+        } else {
+          return "Resolve discussion";
+        }
+      },
+      loading: function () {
+        if (this.discussion) {
+          return this.discussion.loading;
+        } else {
+          return false;
+        }
+      }
+    },
+    methods: {
+      resolve: function () {
+        ResolveService.toggleResolveForDiscussion(this.mergeRequestId, this.discussionId);
+      }
+    },
+    created: function () {
+      CommentsStore.createDiscussion(this.discussionId, this.canResolve);
+
+      this.discussion = CommentsStore.state[this.discussionId];
+    }
+  });
+
+  Vue.component('resolve-discussion-btn', ResolveDiscussionBtn);
+})();
diff --git a/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js.es6 b/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js.es6
deleted file mode 100644
index 060034f049b..00000000000
--- a/app/assets/javascripts/diff_notes/components/resolve_discussion_btn.js.es6
+++ /dev/null
@@ -1,57 +0,0 @@
-/* eslint-disable */
-((w) => {
-  w.ResolveDiscussionBtn = Vue.extend({
-    props: {
-      discussionId: String,
-      mergeRequestId: Number,
-      projectPath: String,
-      canResolve: Boolean,
-    },
-    data: function() {
-      return {
-        discussions: CommentsStore.state
-      };
-    },
-    computed: {
-      discussion: function () {
-        return this.discussions[this.discussionId];
-      },
-      showButton: function () {
-        if (this.discussion) {
-          return this.discussion.isResolvable();
-        } else {
-          return false;
-        }
-      },
-      isDiscussionResolved: function () {
-        if (this.discussion) {
-          return this.discussion.isResolved();
-        } else {
-          return false;
-        }
-      },
-      buttonText: function () {
-        if (this.isDiscussionResolved) {
-          return "Unresolve discussion";
-        } else {
-          return "Resolve discussion";
-        }
-      },
-      loading: function () {
-        if (this.discussion) {
-          return this.discussion.loading;
-        } else {
-          return false;
-        }
-      }
-    },
-    methods: {
-      resolve: function () {
-        ResolveService.toggleResolveForDiscussion(this.projectPath, this.mergeRequestId, this.discussionId);
-      }
-    },
-    created: function () {
-      CommentsStore.createDiscussion(this.discussionId, this.canResolve);
-    }
-  });
-})(window);
diff --git a/app/assets/javascripts/diff_notes/diff_notes_bundle.js b/app/assets/javascripts/diff_notes/diff_notes_bundle.js
new file mode 100644
index 00000000000..b6b47e2da6f
--- /dev/null
+++ b/app/assets/javascripts/diff_notes/diff_notes_bundle.js
@@ -0,0 +1,68 @@
+/* eslint-disable func-names, comma-dangle, new-cap, no-new, max-len */
+/* global ResolveCount */
+
+import Vue from 'vue';
+
+require('./models/discussion');
+require('./models/note');
+require('./stores/comments');
+require('./services/resolve');
+require('./mixins/discussion');
+require('./components/comment_resolve_btn');
+require('./components/jump_to_discussion');
+require('./components/resolve_btn');
+require('./components/resolve_count');
+require('./components/resolve_discussion_btn');
+require('./components/diff_note_avatars');
+require('./components/new_issue_for_discussion');
+
+$(() => {
+  const projectPath = document.querySelector('.merge-request').dataset.projectPath;
+  const COMPONENT_SELECTOR = 'resolve-btn, resolve-discussion-btn, jump-to-discussion, comment-and-resolve-btn, new-issue-for-discussion-btn';
+
+  window.gl = window.gl || {};
+  window.gl.diffNoteApps = {};
+
+  window.ResolveService = new gl.DiffNotesResolveServiceClass(projectPath);
+
+  gl.diffNotesCompileComponents = () => {
+    $('diff-note-avatars').each(function () {
+      const tmp = Vue.extend({
+        template: $(this).get(0).outerHTML
+      });
+      const tmpApp = new tmp().$mount();
+
+      $(this).replaceWith(tmpApp.$el);
+    });
+
+    const $components = $(COMPONENT_SELECTOR).filter(function () {
+      return $(this).closest('resolve-count').length !== 1;
+    });
+
+    if ($components) {
+      $components.each(function () {
+        const $this = $(this);
+        const noteId = $this.attr(':note-id');
+        const tmp = Vue.extend({
+          template: $this.get(0).outerHTML
+        });
+        const tmpApp = new tmp().$mount();
+
+        if (noteId) {
+          gl.diffNoteApps[`note_${noteId}`] = tmpApp;
+        }
+
+        $this.replaceWith(tmpApp.$el);
+      });
+    }
+  };
+
+  gl.diffNotesCompileComponents();
+
+  new Vue({
+    el: '#resolve-count-app',
+    components: {
+      'resolve-count': ResolveCount
+    }
+  });
+});
diff --git a/app/assets/javascripts/diff_notes/diff_notes_bundle.js.es6 b/app/assets/javascripts/diff_notes/diff_notes_bundle.js.es6
deleted file mode 100644
index 6149bfd052a..00000000000
--- a/app/assets/javascripts/diff_notes/diff_notes_bundle.js.es6
+++ /dev/null
@@ -1,36 +0,0 @@
-/* eslint-disable */
-//= require vue
-//= require vue-resource
-//= require_directory ./models
-//= require_directory ./stores
-//= require_directory ./services
-//= require_directory ./mixins
-//= require_directory ./components
-
-$(() => {
-  window.DiffNotesApp = new Vue({
-    el: '#diff-notes-app',
-    components: {
-      'resolve-btn': ResolveBtn,
-      'resolve-discussion-btn': ResolveDiscussionBtn,
-      'comment-and-resolve-btn': CommentAndResolveBtn
-    },
-    methods: {
-      compileComponents: function () {
-        const $components = $('resolve-btn, resolve-discussion-btn, jump-to-discussion');
-        if ($components.length) {
-          $components.each(function () {
-            DiffNotesApp.$compile($(this).get(0));
-          });
-        }
-      }
-    }
-  });
-
-  new Vue({
-    el: '#resolve-count-app',
-    components: {
-      'resolve-count': ResolveCount
-    }
-  });
-});
diff --git a/app/assets/javascripts/diff_notes/icons/collapse_icon.svg b/app/assets/javascripts/diff_notes/icons/collapse_icon.svg
new file mode 100644
index 00000000000..bd4b393cfaa
--- /dev/null
+++ b/app/assets/javascripts/diff_notes/icons/collapse_icon.svg
@@ -0,0 +1 @@
+<svg width="11" height="11" viewBox="0 0 9 13"><path d="M2.57568253,6.49866948 C2.50548852,6.57199715 2.44637866,6.59708255 2.39835118,6.57392645 C2.3503237,6.55077034 2.32631032,6.48902165 2.32631032,6.38867852 L2.32631032,-2.13272614 C2.32631032,-2.23306927 2.3503237,-2.29481796 2.39835118,-2.31797406 C2.44637866,-2.34113017 2.50548852,-2.31604477 2.57568253,-2.24271709 L6.51022184,1.86747129 C6.53977721,1.8983461 6.56379059,1.93500939 6.5822627,1.97746225 L6.5822627,2.27849013 C6.56379059,2.31708364 6.53977721,2.35374693 6.51022184,2.38848109 L2.57568253,6.49866948 Z" transform="translate(4.454287, 2.127976) rotate(90.000000) translate(-4.454287, -2.127976) "></path><path d="M3.74312342,2.09553332 C3.74312342,1.99519019 3.77821989,1.9083561 3.8484139,1.83502843 C3.91860791,1.76170075 4.00173115,1.72503747 4.09778611,1.72503747 L4.80711151,1.72503747 C4.90316647,1.72503747 4.98628971,1.76170075 5.05648372,1.83502843 C5.12667773,1.9083561 5.16177421,1.99519019 5.16177421,2.09553332 L5.16177421,10.2464421 C5.16177421,10.3467853 5.12667773,10.4336194 5.05648372,10.506947 C4.98628971,10.5802747 4.90316647,10.616938 4.80711151,10.616938 L4.09778611,10.616938 C4.00173115,10.616938 3.91860791,10.5802747 3.8484139,10.506947 C3.77821989,10.4336194 3.74312342,10.3467853 3.74312342,10.2464421 L3.74312342,2.09553332 Z" transform="translate(4.452449, 6.170988) rotate(-90.000000) translate(-4.452449, -6.170988) "></path><path d="M2.57568253,14.6236695 C2.50548852,14.6969971 2.44637866,14.7220826 2.39835118,14.6989264 C2.3503237,14.6757703 2.32631032,14.6140216 2.32631032,14.5136785 L2.32631032,5.99227386 C2.32631032,5.89193073 2.3503237,5.83018204 2.39835118,5.80702594 C2.44637866,5.78386983 2.50548852,5.80895523 2.57568253,5.88228291 L6.51022184,9.99247129 C6.53977721,10.0233461 6.56379059,10.0600094 6.5822627,10.1024622 L6.5822627,10.4034901 C6.56379059,10.4420836 6.53977721,10.4787469 6.51022184,10.5134811 L2.57568253,14.6236695 Z" transform="translate(4.454287, 10.252976) scale(1, -1) rotate(90.000000) translate(-4.454287, -10.252976) "></path></svg>
diff --git a/app/assets/javascripts/diff_notes/mixins/discussion.js b/app/assets/javascripts/diff_notes/mixins/discussion.js
new file mode 100644
index 00000000000..3c08c222f46
--- /dev/null
+++ b/app/assets/javascripts/diff_notes/mixins/discussion.js
@@ -0,0 +1,37 @@
+/* eslint-disable object-shorthand, func-names, guard-for-in, no-restricted-syntax, comma-dangle, no-param-reassign, max-len */
+
+((w) => {
+  w.DiscussionMixins = {
+    computed: {
+      discussionCount: function () {
+        return Object.keys(this.discussions).length;
+      },
+      resolvedDiscussionCount: function () {
+        let resolvedCount = 0;
+
+        for (const discussionId in this.discussions) {
+          const discussion = this.discussions[discussionId];
+
+          if (discussion.isResolved()) {
+            resolvedCount += 1;
+          }
+        }
+
+        return resolvedCount;
+      },
+      unresolvedDiscussionCount: function () {
+        let unresolvedCount = 0;
+
+        for (const discussionId in this.discussions) {
+          const discussion = this.discussions[discussionId];
+
+          if (!discussion.isResolved()) {
+            unresolvedCount += 1;
+          }
+        }
+
+        return unresolvedCount;
+      }
+    }
+  };
+})(window);
diff --git a/app/assets/javascripts/diff_notes/mixins/discussion.js.es6 b/app/assets/javascripts/diff_notes/mixins/discussion.js.es6
deleted file mode 100644
index 7a929017f36..00000000000
--- a/app/assets/javascripts/diff_notes/mixins/discussion.js.es6
+++ /dev/null
@@ -1,36 +0,0 @@
-/* eslint-disable */
-((w) => {
-  w.DiscussionMixins = {
-    computed: {
-      discussionCount: function () {
-        return Object.keys(this.discussions).length;
-      },
-      resolvedDiscussionCount: function () {
-        let resolvedCount = 0;
-
-        for (const discussionId in this.discussions) {
-          const discussion = this.discussions[discussionId];
-
-          if (discussion.isResolved()) {
-            resolvedCount++;
-          }
-        }
-
-        return resolvedCount;
-      },
-      unresolvedDiscussionCount: function () {
-        let unresolvedCount = 0;
-
-        for (const discussionId in this.discussions) {
-          const discussion = this.discussions[discussionId];
-
-          if (!discussion.isResolved()) {
-            unresolvedCount++;
-          }
-        }
-
-        return unresolvedCount;
-      }
-    }
-  };
-})(window);
diff --git a/app/assets/javascripts/diff_notes/models/discussion.js b/app/assets/javascripts/diff_notes/models/discussion.js
new file mode 100644
index 00000000000..dc43e4b2cc7
--- /dev/null
+++ b/app/assets/javascripts/diff_notes/models/discussion.js
@@ -0,0 +1,97 @@
+/* eslint-disable space-before-function-paren, camelcase, guard-for-in, no-restricted-syntax, no-unused-vars, max-len */
+/* global NoteModel */
+
+import Vue from 'vue';
+
+class DiscussionModel {
+  constructor (discussionId) {
+    this.id = discussionId;
+    this.notes = {};
+    this.loading = false;
+    this.canResolve = false;
+  }
+
+  createNote (noteObj) {
+    Vue.set(this.notes, noteObj.noteId, new NoteModel(this.id, noteObj));
+  }
+
+  deleteNote (noteId) {
+    Vue.delete(this.notes, noteId);
+  }
+
+  getNote (noteId) {
+    return this.notes[noteId];
+  }
+
+  notesCount() {
+    return Object.keys(this.notes).length;
+  }
+
+  isResolved () {
+    for (const noteId in this.notes) {
+      const note = this.notes[noteId];
+
+      if (!note.resolved) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  resolveAllNotes (resolved_by) {
+    for (const noteId in this.notes) {
+      const note = this.notes[noteId];
+
+      if (!note.resolved) {
+        note.resolved = true;
+        note.resolved_by = resolved_by;
+      }
+    }
+  }
+
+  unResolveAllNotes () {
+    for (const noteId in this.notes) {
+      const note = this.notes[noteId];
+
+      if (note.resolved) {
+        note.resolved = false;
+        note.resolved_by = null;
+      }
+    }
+  }
+
+  updateHeadline (data) {
+    const discussionSelector = `.discussion[data-discussion-id="${this.id}"]`;
+    const $discussionHeadline = $(`${discussionSelector} .js-discussion-headline`);
+
+    if (data.discussion_headline_html) {
+      if ($discussionHeadline.length) {
+        $discussionHeadline.replaceWith(data.discussion_headline_html);
+      } else {
+        $(`${discussionSelector} .discussion-header`).append(data.discussion_headline_html);
+      }
+
+      gl.utils.localTimeAgo($('.js-timeago', `${discussionSelector}`));
+    } else {
+      $discussionHeadline.remove();
+    }
+  }
+
+  isResolvable () {
+    if (!this.canResolve) {
+      return false;
+    }
+
+    for (const noteId in this.notes) {
+      const note = this.notes[noteId];
+
+      if (note.canResolve) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+}
+
+window.DiscussionModel = DiscussionModel;
diff --git a/app/assets/javascripts/diff_notes/models/discussion.js.es6 b/app/assets/javascripts/diff_notes/models/discussion.js.es6
deleted file mode 100644
index 439f55520ef..00000000000
--- a/app/assets/javascripts/diff_notes/models/discussion.js.es6
+++ /dev/null
@@ -1,88 +0,0 @@
-/* eslint-disable */
-class DiscussionModel {
-  constructor (discussionId) {
-    this.id = discussionId;
-    this.notes = {};
-    this.loading = false;
-    this.canResolve = false;
-  }
-
-  createNote (noteId, canResolve, resolved, resolved_by) {
-    Vue.set(this.notes, noteId, new NoteModel(this.id, noteId, canResolve, resolved, resolved_by));
-  }
-
-  deleteNote (noteId) {
-    Vue.delete(this.notes, noteId);
-  }
-
-  getNote (noteId) {
-    return this.notes[noteId];
-  }
-
-  notesCount() {
-    return Object.keys(this.notes).length;
-  }
-
-  isResolved () {
-    for (const noteId in this.notes) {
-      const note = this.notes[noteId];
-
-      if (!note.resolved) {
-        return false;
-      }
-    }
-    return true;
-  }
-
-  resolveAllNotes (resolved_by) {
-    for (const noteId in this.notes) {
-      const note = this.notes[noteId];
-
-      if (!note.resolved) {
-        note.resolved = true;
-        note.resolved_by = resolved_by;
-      }
-    }
-  }
-
-  unResolveAllNotes () {
-    for (const noteId in this.notes) {
-      const note = this.notes[noteId];
-
-      if (note.resolved) {
-        note.resolved = false;
-        note.resolved_by = null;
-      }
-    }
-  }
-
-  updateHeadline (data) {
-    const $discussionHeadline = $(`.discussion[data-discussion-id="${this.id}"] .js-discussion-headline`);
-
-    if (data.discussion_headline_html) {
-      if ($discussionHeadline.length) {
-        $discussionHeadline.replaceWith(data.discussion_headline_html);
-      } else {
-        $(`.discussion[data-discussion-id="${this.id}"] .discussion-header`).append(data.discussion_headline_html);
-      }
-    } else {
-       $discussionHeadline.remove();
-    }
-  }
-
-  isResolvable () {
-    if (!this.canResolve) {
-      return false;
-    }
-    
-    for (const noteId in this.notes) {
-      const note = this.notes[noteId];
-
-      if (note.canResolve) {
-        return true;
-      }
-    }
-
-    return false;
-  }
-}
diff --git a/app/assets/javascripts/diff_notes/models/note.js b/app/assets/javascripts/diff_notes/models/note.js
new file mode 100644
index 00000000000..04465aa507e
--- /dev/null
+++ b/app/assets/javascripts/diff_notes/models/note.js
@@ -0,0 +1,16 @@
+/* eslint-disable camelcase, no-unused-vars */
+
+class NoteModel {
+  constructor(discussionId, noteObj) {
+    this.discussionId = discussionId;
+    this.id = noteObj.noteId;
+    this.canResolve = noteObj.canResolve;
+    this.resolved = noteObj.resolved;
+    this.resolved_by = noteObj.resolvedBy;
+    this.authorName = noteObj.authorName;
+    this.authorAvatar = noteObj.authorAvatar;
+    this.noteTruncated = noteObj.noteTruncated;
+  }
+}
+
+window.NoteModel = NoteModel;
diff --git a/app/assets/javascripts/diff_notes/models/note.js.es6 b/app/assets/javascripts/diff_notes/models/note.js.es6
deleted file mode 100644
index d0541b02632..00000000000
--- a/app/assets/javascripts/diff_notes/models/note.js.es6
+++ /dev/null
@@ -1,10 +0,0 @@
-/* eslint-disable */
-class NoteModel {
-  constructor (discussionId, noteId, canResolve, resolved, resolved_by) {
-    this.discussionId = discussionId;
-    this.id = noteId;
-    this.canResolve = canResolve;
-    this.resolved = resolved;
-    this.resolved_by = resolved_by;
-  }
-}
diff --git a/app/assets/javascripts/diff_notes/services/resolve.js b/app/assets/javascripts/diff_notes/services/resolve.js
new file mode 100644
index 00000000000..bfa4fc9037a
--- /dev/null
+++ b/app/assets/javascripts/diff_notes/services/resolve.js
@@ -0,0 +1,84 @@
+/* eslint-disable class-methods-use-this, one-var, camelcase, no-new, comma-dangle, no-param-reassign, max-len */
+/* global Flash */
+/* global CommentsStore */
+
+import Vue from 'vue';
+import VueResource from 'vue-resource';
+
+require('../../vue_shared/vue_resource_interceptor');
+
+Vue.use(VueResource);
+
+(() => {
+  window.gl = window.gl || {};
+
+  class ResolveServiceClass {
+    constructor(root) {
+      this.noteResource = Vue.resource(`${root}/notes{/noteId}/resolve`);
+      this.discussionResource = Vue.resource(`${root}/merge_requests{/mergeRequestId}/discussions{/discussionId}/resolve`);
+    }
+
+    resolve(noteId) {
+      return this.noteResource.save({ noteId }, {});
+    }
+
+    unresolve(noteId) {
+      return this.noteResource.delete({ noteId }, {});
+    }
+
+    toggleResolveForDiscussion(mergeRequestId, discussionId) {
+      const discussion = CommentsStore.state[discussionId];
+      const isResolved = discussion.isResolved();
+      let promise;
+
+      if (isResolved) {
+        promise = this.unResolveAll(mergeRequestId, discussionId);
+      } else {
+        promise = this.resolveAll(mergeRequestId, discussionId);
+      }
+
+      promise.then((response) => {
+        discussion.loading = false;
+
+        if (response.status === 200) {
+          const data = response.json();
+          const resolved_by = data ? data.resolved_by : null;
+
+          if (isResolved) {
+            discussion.unResolveAllNotes();
+          } else {
+            discussion.resolveAllNotes(resolved_by);
+          }
+
+          discussion.updateHeadline(data);
+        } else {
+          new Flash('An error occurred when trying to resolve a discussion. Please try again.', 'alert');
+        }
+      });
+    }
+
+    resolveAll(mergeRequestId, discussionId) {
+      const discussion = CommentsStore.state[discussionId];
+
+      discussion.loading = true;
+
+      return this.discussionResource.save({
+        mergeRequestId,
+        discussionId
+      }, {});
+    }
+
+    unResolveAll(mergeRequestId, discussionId) {
+      const discussion = CommentsStore.state[discussionId];
+
+      discussion.loading = true;
+
+      return this.discussionResource.delete({
+        mergeRequestId,
+        discussionId
+      }, {});
+    }
+  }
+
+  gl.DiffNotesResolveServiceClass = ResolveServiceClass;
+})();
diff --git a/app/assets/javascripts/diff_notes/services/resolve.js.es6 b/app/assets/javascripts/diff_notes/services/resolve.js.es6
deleted file mode 100644
index 86953ce7ffb..00000000000
--- a/app/assets/javascripts/diff_notes/services/resolve.js.es6
+++ /dev/null
@@ -1,89 +0,0 @@
-/* eslint-disable */
-((w) => {
-  class ResolveServiceClass {
-    constructor() {
-      this.noteResource = Vue.resource('notes{/noteId}/resolve');
-      this.discussionResource = Vue.resource('merge_requests{/mergeRequestId}/discussions{/discussionId}/resolve');
-    }
-
-    setCSRF() {
-      Vue.http.headers.common['X-CSRF-Token'] = $.rails.csrfToken();
-    }
-
-    prepareRequest(root) {
-      this.setCSRF();
-      Vue.http.options.root = root;
-    }
-
-    resolve(projectPath, noteId) {
-      this.prepareRequest(projectPath);
-
-      return this.noteResource.save({ noteId }, {});
-    }
-
-    unresolve(projectPath, noteId) {
-      this.prepareRequest(projectPath);
-
-      return this.noteResource.delete({ noteId }, {});
-    }
-
-    toggleResolveForDiscussion(projectPath, mergeRequestId, discussionId) {
-      const discussion = CommentsStore.state[discussionId],
-            isResolved = discussion.isResolved();
-      let promise;
-
-      if (isResolved) {
-        promise = this.unResolveAll(projectPath, mergeRequestId, discussionId);
-      } else {
-        promise = this.resolveAll(projectPath, mergeRequestId, discussionId);
-      }
-
-      promise.then((response) => {
-        discussion.loading = false;
-
-        if (response.status === 200) {
-          const data = response.json();
-          const resolved_by = data ? data.resolved_by : null;
-
-          if (isResolved) {
-            discussion.unResolveAllNotes();
-          } else {
-            discussion.resolveAllNotes(resolved_by);
-          }
-
-          discussion.updateHeadline(data);
-        } else {
-          new Flash('An error occurred when trying to resolve a discussion. Please try again.', 'alert');
-        }
-      })
-    }
-
-    resolveAll(projectPath, mergeRequestId, discussionId) {
-      const discussion = CommentsStore.state[discussionId];
-
-      this.prepareRequest(projectPath);
-
-      discussion.loading = true;
-
-      return this.discussionResource.save({
-        mergeRequestId,
-        discussionId
-      }, {});
-    }
-
-    unResolveAll(projectPath, mergeRequestId, discussionId) {
-      const discussion = CommentsStore.state[discussionId];
-
-      this.prepareRequest(projectPath);
-
-      discussion.loading = true;
-
-      return this.discussionResource.delete({
-        mergeRequestId,
-        discussionId
-      }, {});
-    }
-  }
-
-  w.ResolveService = new ResolveServiceClass();
-})(window);
diff --git a/app/assets/javascripts/diff_notes/stores/comments.js b/app/assets/javascripts/diff_notes/stores/comments.js
new file mode 100644
index 00000000000..e6cbda56c91
--- /dev/null
+++ b/app/assets/javascripts/diff_notes/stores/comments.js
@@ -0,0 +1,58 @@
+/* eslint-disable object-shorthand, func-names, camelcase, no-restricted-syntax, guard-for-in, comma-dangle, max-len, no-param-reassign */
+/* global DiscussionModel */
+
+import Vue from 'vue';
+
+((w) => {
+  w.CommentsStore = {
+    state: {},
+    get: function (discussionId, noteId) {
+      return this.state[discussionId].getNote(noteId);
+    },
+    createDiscussion: function (discussionId, canResolve) {
+      let discussion = this.state[discussionId];
+      if (!this.state[discussionId]) {
+        discussion = new DiscussionModel(discussionId);
+        Vue.set(this.state, discussionId, discussion);
+      }
+
+      if (canResolve !== undefined) {
+        discussion.canResolve = canResolve;
+      }
+
+      return discussion;
+    },
+    create: function (noteObj) {
+      const discussion = this.createDiscussion(noteObj.discussionId);
+
+      discussion.createNote(noteObj);
+    },
+    update: function (discussionId, noteId, resolved, resolved_by) {
+      const discussion = this.state[discussionId];
+      const note = discussion.getNote(noteId);
+      note.resolved = resolved;
+      note.resolved_by = resolved_by;
+    },
+    delete: function (discussionId, noteId) {
+      const discussion = this.state[discussionId];
+      discussion.deleteNote(noteId);
+
+      if (discussion.notesCount() === 0) {
+        Vue.delete(this.state, discussionId);
+      }
+    },
+    unresolvedDiscussionIds: function () {
+      const ids = [];
+
+      for (const discussionId in this.state) {
+        const discussion = this.state[discussionId];
+
+        if (!discussion.isResolved()) {
+          ids.push(discussion.id);
+        }
+      }
+
+      return ids;
+    }
+  };
+})(window);
diff --git a/app/assets/javascripts/diff_notes/stores/comments.js.es6 b/app/assets/javascripts/diff_notes/stores/comments.js.es6
deleted file mode 100644
index f42ca406bb1..00000000000
--- a/app/assets/javascripts/diff_notes/stores/comments.js.es6
+++ /dev/null
@@ -1,54 +0,0 @@
-/* eslint-disable */
-((w) => {
-  w.CommentsStore = {
-    state: {},
-    get: function (discussionId, noteId) {
-      return this.state[discussionId].getNote(noteId);
-    },
-    createDiscussion: function (discussionId, canResolve) {
-      let discussion = this.state[discussionId];
-      if (!this.state[discussionId]) {
-        discussion = new DiscussionModel(discussionId);
-        Vue.set(this.state, discussionId, discussion);
-      }
-
-      if (canResolve !== undefined) {
-        discussion.canResolve = canResolve;
-      }
-
-      return discussion;
-    },
-    create: function (discussionId, noteId, canResolve, resolved, resolved_by) {
-      const discussion = this.createDiscussion(discussionId);
-
-      discussion.createNote(noteId, canResolve, resolved, resolved_by);
-    },
-    update: function (discussionId, noteId, resolved, resolved_by) {
-      const discussion = this.state[discussionId];
-      const note = discussion.getNote(noteId);
-      note.resolved = resolved;
-      note.resolved_by = resolved_by;
-    },
-    delete: function (discussionId, noteId) {
-      const discussion = this.state[discussionId];
-      discussion.deleteNote(noteId);
-
-      if (discussion.notesCount() === 0) {
-        Vue.delete(this.state, discussionId);
-      }
-    },
-    unresolvedDiscussionIds: function () {
-      let ids = [];
-
-      for (const discussionId in this.state) {
-        const discussion = this.state[discussionId];
-
-        if (!discussion.isResolved()) {
-          ids.push(discussion.id);
-        }
-      }
-
-      return ids;
-    }
-  };
-})(window);
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
new file mode 100644
index 00000000000..80490052389
--- /dev/null
+++ b/app/assets/javascripts/dispatcher.js
@@ -0,0 +1,451 @@
+/* eslint-disable func-names, space-before-function-paren, no-var, prefer-arrow-callback, wrap-iife, no-shadow, consistent-return, one-var, one-var-declaration-per-line, camelcase, default-case, no-new, quotes, no-duplicate-case, no-case-declarations, no-fallthrough, max-len */
+/* global UsernameValidator */
+/* global ActiveTabMemoizer */
+/* global ShortcutsNavigation */
+/* global Build */
+/* global Issuable */
+/* global ShortcutsIssuable */
+/* global ZenMode */
+/* global Milestone */
+/* global IssuableForm */
+/* global LabelsSelect */
+/* global MilestoneSelect */
+/* global MergedButtons */
+/* global Commit */
+/* global NotificationsForm */
+/* global TreeView */
+/* global NotificationsDropdown */
+/* global UsersSelect */
+/* global GroupAvatar */
+/* global LineHighlighter */
+/* global ProjectFork */
+/* global BuildArtifacts */
+/* global GroupsSelect */
+/* global Search */
+/* global Admin */
+/* global NamespaceSelects */
+/* global ShortcutsDashboardNavigation */
+/* global Project */
+/* global ProjectAvatar */
+/* global CompareAutocomplete */
+/* global ProjectNew */
+/* global Star */
+/* global ProjectShow */
+/* global Labels */
+/* global Shortcuts */
+/* global Sidebar */
+
+import Issue from './issue';
+
+import BindInOut from './behaviors/bind_in_out';
+import GroupName from './group_name';
+import GroupsList from './groups_list';
+import ProjectsList from './projects_list';
+import MiniPipelineGraph from './mini_pipeline_graph_dropdown';
+import BlobLinePermalinkUpdater from './blob/blob_line_permalink_updater';
+import UserCallout from './user_callout';
+
+const ShortcutsBlob = require('./shortcuts_blob');
+
+(function() {
+  var Dispatcher;
+
+  $(function() {
+    return new Dispatcher();
+  });
+
+  Dispatcher = (function() {
+    function Dispatcher() {
+      this.initSearch();
+      this.initFieldErrors();
+      this.initPageScripts();
+    }
+
+    Dispatcher.prototype.initPageScripts = function() {
+      var page, path, shortcut_handler, fileBlobPermalinkUrlElement, fileBlobPermalinkUrl;
+      page = $('body').attr('data-page');
+      if (!page) {
+        return false;
+      }
+      path = page.split(':');
+      shortcut_handler = null;
+
+      function initBlob() {
+        new LineHighlighter();
+
+        new BlobLinePermalinkUpdater(
+          document.querySelector('#blob-content-holder'),
+          '.diff-line-num[data-line-number]',
+          document.querySelectorAll('.js-data-file-blob-permalink-url, .js-blob-blame-link'),
+        );
+
+        shortcut_handler = new ShortcutsNavigation();
+        fileBlobPermalinkUrlElement = document.querySelector('.js-data-file-blob-permalink-url');
+        fileBlobPermalinkUrl = fileBlobPermalinkUrlElement && fileBlobPermalinkUrlElement.getAttribute('href');
+        new ShortcutsBlob({
+          skipResetBindings: true,
+          fileBlobPermalinkUrl,
+        });
+      }
+
+      switch (page) {
+        case 'sessions:new':
+          new UsernameValidator();
+          new ActiveTabMemoizer();
+          break;
+        case 'projects:boards:show':
+        case 'projects:boards:index':
+          shortcut_handler = new ShortcutsNavigation();
+          break;
+        case 'projects:builds:show':
+          new Build();
+          break;
+        case 'projects:merge_requests:index':
+        case 'projects:issues:index':
+          if (gl.FilteredSearchManager) {
+            new gl.FilteredSearchManager(page === 'projects:issues:index' ? 'issues' : 'merge_requests');
+          }
+          Issuable.init();
+          new gl.IssuableBulkActions({
+            prefixId: page === 'projects:merge_requests:index' ? 'merge_request_' : 'issue_',
+          });
+          shortcut_handler = new ShortcutsNavigation();
+          break;
+        case 'projects:issues:show':
+          new Issue();
+          shortcut_handler = new ShortcutsIssuable();
+          new ZenMode();
+          break;
+        case 'projects:milestones:show':
+        case 'groups:milestones:show':
+        case 'dashboard:milestones:show':
+          new Milestone();
+          new Sidebar();
+          break;
+        case 'dashboard:todos:index':
+          new gl.Todos();
+          break;
+        case 'dashboard:projects:index':
+        case 'dashboard:projects:starred':
+        case 'explore:projects:index':
+        case 'explore:projects:trending':
+        case 'explore:projects:starred':
+        case 'admin:projects:index':
+          new ProjectsList();
+          break;
+        case 'dashboard:groups:index':
+        case 'explore:groups:index':
+          new GroupsList();
+          break;
+        case 'projects:milestones:new':
+        case 'projects:milestones:edit':
+        case 'projects:milestones:update':
+          new ZenMode();
+          new gl.DueDateSelectors();
+          new gl.GLForm($('.milestone-form'));
+          break;
+        case 'groups:milestones:new':
+          new ZenMode();
+          break;
+        case 'projects:compare:show':
+          new gl.Diff();
+          break;
+        case 'projects:branches:index':
+          gl.AjaxLoadingSpinner.init();
+          break;
+        case 'projects:issues:new':
+        case 'projects:issues:edit':
+          shortcut_handler = new ShortcutsNavigation();
+          new gl.GLForm($('.issue-form'));
+          new IssuableForm($('.issue-form'));
+          new LabelsSelect();
+          new MilestoneSelect();
+          new gl.IssuableTemplateSelectors();
+          break;
+        case 'projects:merge_requests:new':
+        case 'projects:merge_requests:new_diffs':
+        case 'projects:merge_requests:edit':
+          new gl.Diff();
+          shortcut_handler = new ShortcutsNavigation();
+          new gl.GLForm($('.merge-request-form'));
+          new IssuableForm($('.merge-request-form'));
+          new LabelsSelect();
+          new MilestoneSelect();
+          new gl.IssuableTemplateSelectors();
+          break;
+        case 'projects:tags:new':
+          new ZenMode();
+          new gl.GLForm($('.tag-form'));
+          break;
+        case 'projects:releases:edit':
+          new ZenMode();
+          new gl.GLForm($('.release-form'));
+          break;
+        case 'projects:merge_requests:show':
+          new gl.Diff();
+          shortcut_handler = new ShortcutsIssuable(true);
+          new ZenMode();
+          new MergedButtons();
+          break;
+        case 'projects:merge_requests:commits':
+          new MergedButtons();
+          break;
+        case "projects:merge_requests:diffs":
+          new gl.Diff();
+          new ZenMode();
+          new MergedButtons();
+          break;
+        case 'dashboard:activity':
+          new gl.Activities();
+          break;
+        case 'projects:commit:show':
+          new Commit();
+          new gl.Diff();
+          new ZenMode();
+          shortcut_handler = new ShortcutsNavigation();
+          new MiniPipelineGraph({
+            container: '.js-commit-pipeline-graph',
+          }).bindEvents();
+          break;
+        case 'projects:commit:pipelines':
+          new MiniPipelineGraph({
+            container: '.js-commit-pipeline-graph',
+          }).bindEvents();
+          break;
+        case 'projects:commits:show':
+        case 'projects:activity':
+          shortcut_handler = new ShortcutsNavigation();
+          break;
+        case 'projects:show':
+          shortcut_handler = new ShortcutsNavigation();
+          new NotificationsForm();
+          if ($('#tree-slider').length) {
+            new TreeView();
+          }
+          break;
+        case 'projects:pipelines:builds':
+        case 'projects:pipelines:show':
+          const { controllerAction } = document.querySelector('.js-pipeline-container').dataset;
+
+          new gl.Pipelines({
+            initTabs: true,
+            tabsOptions: {
+              action: controllerAction,
+              defaultAction: 'pipelines',
+              parentEl: '.pipelines-tabs',
+            },
+          });
+          break;
+        case 'groups:activity':
+          new gl.Activities();
+          break;
+        case 'groups:show':
+          shortcut_handler = new ShortcutsNavigation();
+          new NotificationsForm();
+          new NotificationsDropdown();
+          new ProjectsList();
+          break;
+        case 'groups:group_members:index':
+          new gl.MemberExpirationDate();
+          new gl.Members();
+          new UsersSelect();
+          break;
+        case 'projects:members:show':
+          new gl.MemberExpirationDate('.js-access-expiration-date-groups');
+          new GroupsSelect();
+          new gl.MemberExpirationDate();
+          new gl.Members();
+          new UsersSelect();
+          break;
+        case 'groups:new':
+        case 'admin:groups:new':
+        case 'groups:create':
+        case 'admin:groups:create':
+          BindInOut.initAll();
+        case 'groups:new':
+        case 'admin:groups:new':
+        case 'groups:edit':
+        case 'admin:groups:edit':
+          new GroupAvatar();
+          break;
+        case 'projects:tree:show':
+          shortcut_handler = new ShortcutsNavigation();
+          new TreeView();
+          gl.TargetBranchDropDown.bootstrap();
+          break;
+        case 'projects:find_file:show':
+          shortcut_handler = true;
+          break;
+        case 'projects:blob:new':
+          gl.TargetBranchDropDown.bootstrap();
+          break;
+        case 'projects:blob:create':
+          gl.TargetBranchDropDown.bootstrap();
+          break;
+        case 'projects:blob:show':
+          gl.TargetBranchDropDown.bootstrap();
+          initBlob();
+          break;
+        case 'projects:blob:edit':
+          gl.TargetBranchDropDown.bootstrap();
+          break;
+        case 'projects:blame:show':
+          initBlob();
+          break;
+        case 'groups:labels:new':
+        case 'groups:labels:edit':
+        case 'projects:labels:new':
+        case 'projects:labels:edit':
+          new Labels();
+          break;
+        case 'projects:labels:index':
+          if ($('.prioritized-labels').length) {
+            new gl.LabelManager();
+          }
+          break;
+        case 'projects:network:show':
+          // Ensure we don't create a particular shortcut handler here. This is
+          // already created, where the network graph is created.
+          shortcut_handler = true;
+          break;
+        case 'projects:forks:new':
+          new ProjectFork();
+          break;
+        case 'projects:artifacts:browse':
+          new BuildArtifacts();
+          break;
+        case 'help:index':
+          gl.VersionCheckImage.bindErrorEvent($('img.js-version-status-badge'));
+          break;
+        case 'search:show':
+          new Search();
+          break;
+        case 'projects:repository:show':
+          new gl.ProtectedBranchCreate();
+          new gl.ProtectedBranchEditList();
+          break;
+        case 'projects:ci_cd:show':
+          new gl.ProjectVariables();
+          break;
+        case 'ci:lints:create':
+        case 'ci:lints:show':
+          new gl.CILintEditor();
+          break;
+        case 'users:show':
+          new UserCallout();
+          break;
+      }
+      switch (path.first()) {
+        case 'sessions':
+        case 'omniauth_callbacks':
+          if (!gon.u2f) break;
+          gl.u2fAuthenticate = new gl.U2FAuthenticate(
+            $('#js-authenticate-u2f'),
+            '#js-login-u2f-form',
+            gon.u2f,
+            document.querySelector('#js-login-2fa-device'),
+            document.querySelector('.js-2fa-form'),
+          );
+          gl.u2fAuthenticate.start();
+        case 'admin':
+          new Admin();
+          switch (path[1]) {
+            case 'groups':
+              new UsersSelect();
+              break;
+            case 'projects':
+              new NamespaceSelects();
+              break;
+            case 'labels':
+              switch (path[2]) {
+                case 'new':
+                case 'edit':
+                  new Labels();
+              }
+            case 'abuse_reports':
+              new gl.AbuseReports();
+              break;
+          }
+          break;
+        case 'dashboard':
+        case 'root':
+          shortcut_handler = new ShortcutsDashboardNavigation();
+          new UserCallout();
+          break;
+        case 'groups':
+          new GroupName();
+          break;
+        case 'profiles':
+          new NotificationsForm();
+          new NotificationsDropdown();
+          break;
+        case 'projects':
+          new Project();
+          new ProjectAvatar();
+          new GroupName();
+          switch (path[1]) {
+            case 'compare':
+              new CompareAutocomplete();
+              break;
+            case 'edit':
+              shortcut_handler = new ShortcutsNavigation();
+              new ProjectNew();
+              break;
+            case 'new':
+              new ProjectNew();
+              break;
+            case 'show':
+              new Star();
+              new ProjectNew();
+              new ProjectShow();
+              new NotificationsDropdown();
+              break;
+            case 'wikis':
+              new gl.Wikis();
+              shortcut_handler = new ShortcutsNavigation();
+              new ZenMode();
+              new gl.GLForm($('.wiki-form'));
+              break;
+            case 'snippets':
+              shortcut_handler = new ShortcutsNavigation();
+              if (path[2] === 'show') {
+                new ZenMode();
+              }
+              break;
+            case 'labels':
+            case 'graphs':
+            case 'compare':
+            case 'pipelines':
+            case 'forks':
+            case 'milestones':
+            case 'project_members':
+            case 'deploy_keys':
+            case 'builds':
+            case 'hooks':
+            case 'services':
+            case 'protected_branches':
+              shortcut_handler = new ShortcutsNavigation();
+          }
+      }
+      // If we haven't installed a custom shortcut handler, install the default one
+      if (!shortcut_handler) {
+        new Shortcuts();
+      }
+    };
+
+    Dispatcher.prototype.initSearch = function() {
+      // Only when search form is present
+      if ($('.search').length) {
+        return new gl.SearchAutocomplete();
+      }
+    };
+
+    Dispatcher.prototype.initFieldErrors = function() {
+      $('.gl-show-field-errors').each((i, form) => {
+        new gl.GlFieldErrors(form);
+      });
+    };
+
+    return Dispatcher;
+  })();
+}).call(window);
diff --git a/app/assets/javascripts/dispatcher.js.es6 b/app/assets/javascripts/dispatcher.js.es6
deleted file mode 100644
index 8e4fd1f19ba..00000000000
--- a/app/assets/javascripts/dispatcher.js.es6
+++ /dev/null
@@ -1,311 +0,0 @@
-/* eslint-disable */
-(function() {
-  var Dispatcher;
-
-  $(function() {
-    return new Dispatcher();
-  });
-
-  Dispatcher = (function() {
-    function Dispatcher() {
-      this.initSearch();
-      this.initFieldErrors();
-      this.initPageScripts();
-    }
-
-    Dispatcher.prototype.initPageScripts = function() {
-      var page, path, shortcut_handler;
-      page = $('body').attr('data-page');
-      if (!page) {
-        return false;
-      }
-      path = page.split(':');
-      shortcut_handler = null;
-      switch (page) {
-        case 'sessions:new':
-          new UsernameValidator();
-          break;
-        case 'projects:boards:show':
-        case 'projects:boards:index':
-          shortcut_handler = new ShortcutsNavigation();
-          break;
-        case 'projects:merge_requests:index':
-        case 'projects:issues:index':
-          Issuable.init();
-          new gl.IssuableBulkActions();
-          shortcut_handler = new ShortcutsNavigation();
-          break;
-        case 'projects:issues:show':
-          new Issue();
-          shortcut_handler = new ShortcutsIssuable();
-          new ZenMode();
-          break;
-        case 'projects:milestones:show':
-        case 'groups:milestones:show':
-        case 'dashboard:milestones:show':
-          new Milestone();
-          break;
-        case 'dashboard:todos:index':
-          new gl.Todos();
-          break;
-        case 'projects:milestones:new':
-        case 'projects:milestones:edit':
-          new ZenMode();
-          new gl.DueDateSelectors();
-          new GLForm($('.milestone-form'));
-          break;
-        case 'groups:milestones:new':
-          new ZenMode();
-          break;
-        case 'projects:compare:show':
-          new Diff();
-          break;
-        case 'projects:issues:new':
-        case 'projects:issues:edit':
-          shortcut_handler = new ShortcutsNavigation();
-          new GLForm($('.issue-form'));
-          new IssuableForm($('.issue-form'));
-          new LabelsSelect();
-          new MilestoneSelect();
-          new gl.IssuableTemplateSelectors();
-          break;
-        case 'projects:merge_requests:new':
-        case 'projects:merge_requests:edit':
-          new Diff();
-          shortcut_handler = new ShortcutsNavigation();
-          new GLForm($('.merge-request-form'));
-          new IssuableForm($('.merge-request-form'));
-          new LabelsSelect();
-          new MilestoneSelect();
-          new gl.IssuableTemplateSelectors();
-          break;
-        case 'projects:tags:new':
-          new ZenMode();
-          new GLForm($('.tag-form'));
-          break;
-        case 'projects:releases:edit':
-          new ZenMode();
-          new GLForm($('.release-form'));
-          break;
-        case 'projects:merge_requests:show':
-          new Diff();
-          shortcut_handler = new ShortcutsIssuable(true);
-          new ZenMode();
-          new MergedButtons();
-          break;
-        case 'projects:merge_requests:commits':
-        case 'projects:merge_requests:builds':
-          new MergedButtons();
-          break;
-        case "projects:merge_requests:diffs":
-          new Diff();
-          new ZenMode();
-          new MergedButtons();
-          break;
-        case 'projects:merge_requests:index':
-          shortcut_handler = new ShortcutsNavigation();
-          Issuable.init();
-          break;
-        case 'dashboard:activity':
-          new Activities();
-          break;
-        case 'dashboard:projects:starred':
-          new Activities();
-          break;
-        case 'projects:commit:show':
-          new Commit();
-          new Diff();
-          new ZenMode();
-          shortcut_handler = new ShortcutsNavigation();
-          break;
-        case 'projects:commit:builds':
-          new gl.Pipelines();
-          break;
-        case 'projects:commits:show':
-        case 'projects:activity':
-          shortcut_handler = new ShortcutsNavigation();
-          break;
-        case 'projects:show':
-          shortcut_handler = new ShortcutsNavigation();
-          new NotificationsForm();
-          if ($('#tree-slider').length) {
-            new TreeView();
-          }
-          break;
-        case 'projects:pipelines:show':
-          new gl.Pipelines();
-          break;
-        case 'groups:activity':
-          new Activities();
-          break;
-        case 'groups:show':
-          shortcut_handler = new ShortcutsNavigation();
-          new NotificationsForm();
-          new NotificationsDropdown();
-          break;
-        case 'groups:group_members:index':
-          new gl.MemberExpirationDate();
-          new gl.Members();
-          new UsersSelect();
-          break;
-        case 'projects:project_members:index':
-          new gl.MemberExpirationDate();
-          new gl.Members();
-          new UsersSelect();
-          break;
-        case 'groups:new':
-        case 'groups:edit':
-        case 'admin:groups:edit':
-        case 'admin:groups:new':
-          new GroupAvatar();
-          break;
-        case 'projects:tree:show':
-          shortcut_handler = new ShortcutsNavigation();
-          new TreeView();
-          break;
-        case 'projects:find_file:show':
-          shortcut_handler = true;
-          break;
-        case 'projects:blob:show':
-        case 'projects:blame:show':
-          new LineHighlighter();
-          shortcut_handler = new ShortcutsNavigation();
-          new ShortcutsBlob(true);
-          break;
-        case 'groups:labels:new':
-        case 'groups:labels:edit':
-        case 'projects:labels:new':
-        case 'projects:labels:edit':
-          new Labels();
-          break;
-        case 'projects:labels:index':
-          if ($('.prioritized-labels').length) {
-            new gl.LabelManager();
-          }
-          break;
-        case 'projects:network:show':
-          // Ensure we don't create a particular shortcut handler here. This is
-          // already created, where the network graph is created.
-          shortcut_handler = true;
-          break;
-        case 'projects:forks:new':
-          new ProjectFork();
-          break;
-        case 'projects:artifacts:browse':
-          new BuildArtifacts();
-          break;
-        case 'projects:group_links:index':
-          new gl.MemberExpirationDate();
-          new GroupsSelect();
-          break;
-        case 'search:show':
-          new Search();
-          break;
-        case 'projects:protected_branches:index':
-          new gl.ProtectedBranchCreate();
-          new gl.ProtectedBranchEditList();
-          break;
-        case 'projects:cycle_analytics:show':
-          new gl.CycleAnalytics();
-          break;
-      }
-      switch (path.first()) {
-        case 'admin':
-          new Admin();
-          switch (path[1]) {
-            case 'groups':
-              new UsersSelect();
-              break;
-            case 'projects':
-              new NamespaceSelects();
-              break;
-            case 'labels':
-              switch (path[2]) {
-                case 'new':
-                case 'edit':
-                  new Labels();
-              }
-            case 'abuse_reports':
-              new gl.AbuseReports();
-              break;
-          }
-          break;
-        case 'dashboard':
-        case 'root':
-          shortcut_handler = new ShortcutsDashboardNavigation();
-          break;
-        case 'profiles':
-          new NotificationsForm();
-          new NotificationsDropdown();
-          break;
-        case 'projects':
-          new Project();
-          new ProjectAvatar();
-          switch (path[1]) {
-            case 'compare':
-              new CompareAutocomplete();
-              break;
-            case 'edit':
-              shortcut_handler = new ShortcutsNavigation();
-              new ProjectNew();
-              break;
-            case 'new':
-              new ProjectNew();
-              break;
-            case 'show':
-              new Star();
-              new ProjectNew();
-              new ProjectShow();
-              new NotificationsDropdown();
-              break;
-            case 'wikis':
-              new Wikis();
-              shortcut_handler = new ShortcutsNavigation();
-              new ZenMode();
-              new GLForm($('.wiki-form'));
-              break;
-            case 'snippets':
-              shortcut_handler = new ShortcutsNavigation();
-              if (path[2] === 'show') {
-                new ZenMode();
-              }
-              break;
-            case 'labels':
-            case 'graphs':
-            case 'compare':
-            case 'pipelines':
-            case 'forks':
-            case 'milestones':
-            case 'project_members':
-            case 'deploy_keys':
-            case 'builds':
-            case 'hooks':
-            case 'services':
-            case 'protected_branches':
-              shortcut_handler = new ShortcutsNavigation();
-          }
-      }
-      // If we haven't installed a custom shortcut handler, install the default one
-      if (!shortcut_handler) {
-        return new Shortcuts();
-      }
-    };
-
-    Dispatcher.prototype.initSearch = function() {
-      // Only when search form is present
-      if ($('.search').length) {
-        return new gl.SearchAutocomplete();
-      }
-    };
-
-    Dispatcher.prototype.initFieldErrors = function() {
-      $('.gl-show-field-errors').each((i, form) => {
-        new gl.GlFieldErrors(form);
-      });
-    };
-
-    return Dispatcher;
-
-  })();
-
-}).call(this);
diff --git a/app/assets/javascripts/droplab/droplab.js b/app/assets/javascripts/droplab/droplab.js
new file mode 100644
index 00000000000..8b14191395b
--- /dev/null
+++ b/app/assets/javascripts/droplab/droplab.js
@@ -0,0 +1,741 @@
+/* eslint-disable */
+// Determine where to place this
+if (typeof Object.assign != 'function') {
+  Object.assign = function (target, varArgs) { // .length of function is 2
+    'use strict';
+    if (target == null) { // TypeError if undefined or null
+      throw new TypeError('Cannot convert undefined or null to object');
+    }
+
+    var to = Object(target);
+
+    for (var index = 1; index < arguments.length; index++) {
+      var nextSource = arguments[index];
+
+      if (nextSource != null) { // Skip over if undefined or null
+        for (var nextKey in nextSource) {
+          // Avoid bugs when hasOwnProperty is shadowed
+          if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
+            to[nextKey] = nextSource[nextKey];
+          }
+        }
+      }
+    }
+    return to;
+  };
+}
+
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.droplab = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+var DATA_TRIGGER = 'data-dropdown-trigger';
+var DATA_DROPDOWN = 'data-dropdown';
+
+module.exports = {
+  DATA_TRIGGER: DATA_TRIGGER,
+  DATA_DROPDOWN: DATA_DROPDOWN,
+}
+
+},{}],2:[function(require,module,exports){
+// Custom event support for IE
+if ( typeof CustomEvent === "function" ) {
+  module.exports = CustomEvent;
+} else {
+  require('./window')(function(w){
+    var CustomEvent = function ( event, params ) {
+      params = params || { bubbles: false, cancelable: false, detail: undefined };
+      var evt = document.createEvent( 'CustomEvent' );
+      evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
+      return evt;
+    }
+    CustomEvent.prototype = w.Event.prototype;
+
+    w.CustomEvent = CustomEvent;
+  });
+  module.exports = CustomEvent;
+}
+
+},{"./window":11}],3:[function(require,module,exports){
+var CustomEvent = require('./custom_event_polyfill');
+var utils = require('./utils');
+
+var DropDown = function(list) {
+  this.currentIndex = 0;
+  this.hidden = true;
+  this.list = list;
+  this.items = [];
+  this.getItems();
+  this.initTemplateString();
+  this.addEvents();
+  this.initialState = list.innerHTML;
+};
+
+Object.assign(DropDown.prototype, {
+  getItems: function() {
+    this.items = [].slice.call(this.list.querySelectorAll('li'));
+    return this.items;
+  },
+
+  initTemplateString: function() {
+    var items = this.items || this.getItems();
+
+    var templateString = '';
+    if(items.length > 0) {
+      templateString = items[items.length - 1].outerHTML;
+    }
+    this.templateString = templateString;
+    return this.templateString;
+  },
+
+  clickEvent: function(e) {
+    // climb up the tree to find the LI
+    var selected = utils.closest(e.target, 'LI');
+
+    if(selected) {
+      e.preventDefault();
+      this.hide();
+      var listEvent = new CustomEvent('click.dl', {
+        detail: {
+          list: this,
+          selected: selected,
+          data: e.target.dataset,
+        },
+      });
+      this.list.dispatchEvent(listEvent);
+    }
+  },
+
+  addEvents: function() {
+    this.clickWrapper = this.clickEvent.bind(this);
+    // event delegation.
+    this.list.addEventListener('click', this.clickWrapper);
+  },
+
+  toggle: function() {
+    if(this.hidden) {
+      this.show();
+    } else {
+      this.hide();
+    }
+  },
+
+  setData: function(data) {
+    this.data = data;
+    this.render(data);
+  },
+
+  addData: function(data) {
+    this.data = (this.data || []).concat(data);
+    this.render(this.data);
+  },
+
+  // call render manually on data;
+  render: function(data){
+    // debugger
+    // empty the list first
+    var templateString = this.templateString;
+    var newChildren = [];
+    var toAppend;
+
+    newChildren = (data ||[]).map(function(dat){
+      var html = utils.t(templateString, dat);
+      var template = document.createElement('div');
+      template.innerHTML = html;
+
+      // Help set the image src template
+      var imageTags = template.querySelectorAll('img[data-src]');
+      // debugger
+      for(var i = 0; i < imageTags.length; i++) {
+        var imageTag = imageTags[i];
+        imageTag.src = imageTag.getAttribute('data-src');
+        imageTag.removeAttribute('data-src');
+      }
+
+      if(dat.hasOwnProperty('droplab_hidden') && dat.droplab_hidden){
+        template.firstChild.style.display = 'none'
+      }else{
+        template.firstChild.style.display = 'block';
+      }
+      return template.firstChild.outerHTML;
+    });
+    toAppend = this.list.querySelector('ul[data-dynamic]');
+    if(toAppend) {
+      toAppend.innerHTML = newChildren.join('');
+    } else {
+      this.list.innerHTML = newChildren.join('');
+    }
+  },
+
+  show: function() {
+    if (this.hidden) {
+      // debugger
+      this.list.style.display = 'block';
+      this.currentIndex = 0;
+      this.hidden = false;
+    }
+  },
+
+  hide: function() {
+    if (!this.hidden) {
+      // debugger
+      this.list.style.display = 'none';
+      this.currentIndex = 0;
+      this.hidden = true;
+    }
+  },
+
+  destroy: function() {
+    this.hide();
+    this.list.removeEventListener('click', this.clickWrapper);
+  }
+});
+
+module.exports = DropDown;
+
+},{"./custom_event_polyfill":2,"./utils":10}],4:[function(require,module,exports){
+require('./window')(function(w){
+  module.exports = function(deps) {
+    deps = deps || {};
+    var window = deps.window || w;
+    var document = deps.document || window.document;
+    var CustomEvent = deps.CustomEvent || require('./custom_event_polyfill');
+    var HookButton = deps.HookButton || require('./hook_button');
+    var HookInput = deps.HookInput || require('./hook_input');
+    var utils = deps.utils || require('./utils');
+    var DATA_TRIGGER = require('./constants').DATA_TRIGGER;
+
+    var DropLab = function(hook){
+      if (!(this instanceof DropLab)) return new DropLab(hook);
+      this.ready = false;
+      this.hooks = [];
+      this.queuedData = [];
+      this.config = {};
+      this.loadWrapper;
+      if(typeof hook !== 'undefined'){
+        this.addHook(hook);
+      }
+    };
+
+
+    Object.assign(DropLab.prototype, {
+      load: function() {
+        this.loadWrapper();
+      },
+
+      loadWrapper: function(){
+        var dropdownTriggers = [].slice.apply(document.querySelectorAll('['+DATA_TRIGGER+']'));
+        this.addHooks(dropdownTriggers).init();
+      },
+
+      addData: function () {
+        var args = [].slice.apply(arguments);
+        this.applyArgs(args, '_addData');
+      },
+
+      setData: function() {
+        var args = [].slice.apply(arguments);
+        this.applyArgs(args, '_setData');
+      },
+
+      destroy: function() {
+        for(var i = 0; i < this.hooks.length; i++) {
+          this.hooks[i].destroy();
+        }
+        this.hooks = [];
+        this.removeEvents();
+      },
+
+      applyArgs: function(args, methodName) {
+        if(this.ready) {
+          this[methodName].apply(this, args);
+        } else {
+          this.queuedData = this.queuedData || [];
+          this.queuedData.push(args);
+        }
+      },
+
+      _addData: function(trigger, data) {
+        this._processData(trigger, data, 'addData');
+      },
+
+      _setData: function(trigger, data) {
+        this._processData(trigger, data, 'setData');
+      },
+
+      _processData: function(trigger, data, methodName) {
+        for(var i = 0; i < this.hooks.length; i++) {
+          var hook = this.hooks[i];
+          if(hook.trigger.dataset.hasOwnProperty('id')) {
+            if(hook.trigger.dataset.id === trigger) {
+              hook.list[methodName](data);
+            }
+          }
+        }
+      },
+
+      addEvents: function() {
+        var self = this;
+        this.windowClickedWrapper = function(e){
+          var thisTag = e.target;
+          if(thisTag.tagName !== 'UL'){
+            // climb up the tree to find the UL
+            thisTag = utils.closest(thisTag, 'UL');
+          }
+          if(utils.isDropDownParts(thisTag)){ return }
+          if(utils.isDropDownParts(e.target)){ return }
+          for(var i = 0; i < self.hooks.length; i++) {
+            self.hooks[i].list.hide();
+          }
+        }.bind(this);
+        document.addEventListener('click', this.windowClickedWrapper);
+      },
+
+      removeEvents: function(){
+        w.removeEventListener('click', this.windowClickedWrapper);
+        w.removeEventListener('load', this.loadWrapper);
+      },
+
+      changeHookList: function(trigger, list, plugins, config) {
+        trigger = document.querySelector('[data-id="'+trigger+'"]');
+        // list = document.querySelector(list);
+        this.hooks.every(function(hook, i) {
+          if(hook.trigger === trigger) {
+            hook.destroy();
+            this.hooks.splice(i, 1);
+            this.addHook(trigger, list, plugins, config);
+            return false;
+          }
+          return true
+        }.bind(this));
+      },
+
+      addHook: function(hook, list, plugins, config) {
+        if(!(hook instanceof HTMLElement) && typeof hook === 'string'){
+          hook = document.querySelector(hook);
+        }
+        if(!list){
+          list = document.querySelector(hook.dataset[utils.toDataCamelCase(DATA_TRIGGER)]);
+        }
+
+        if(hook) {
+          if(hook.tagName === 'A' || hook.tagName === 'BUTTON') {
+            this.hooks.push(new HookButton(hook, list, plugins, config));
+          } else if(hook.tagName === 'INPUT') {
+            this.hooks.push(new HookInput(hook, list, plugins, config));
+          }
+        }
+        return this;
+      },
+
+      addHooks: function(hooks, plugins, config) {
+        for(var i = 0; i < hooks.length; i++) {
+          var hook = hooks[i];
+          this.addHook(hook, null, plugins, config);
+        }
+        return this;
+      },
+
+      setConfig: function(obj){
+        this.config = obj;
+      },
+
+      init: function () {
+        this.addEvents();
+        var readyEvent = new CustomEvent('ready.dl', {
+          detail: {
+            dropdown: this,
+          },
+        });
+        window.dispatchEvent(readyEvent);
+        this.ready = true;
+        for(var i = 0; i < this.queuedData.length; i++) {
+          this.addData.apply(this, this.queuedData[i]);
+        }
+        this.queuedData = [];
+        return this;
+      },
+    });
+
+    return DropLab;
+  };
+});
+
+},{"./constants":1,"./custom_event_polyfill":2,"./hook_button":6,"./hook_input":7,"./utils":10,"./window":11}],5:[function(require,module,exports){
+var DropDown = require('./dropdown');
+
+var Hook = function(trigger, list, plugins, config){
+  this.trigger = trigger;
+  this.list = new DropDown(list);
+  this.type = 'Hook';
+  this.event = 'click';
+  this.plugins = plugins || [];
+  this.config = config || {};
+  this.id = trigger.dataset.id;
+};
+
+Object.assign(Hook.prototype, {
+
+  addEvents: function(){},
+
+  constructor: Hook,
+});
+
+module.exports = Hook;
+
+},{"./dropdown":3}],6:[function(require,module,exports){
+var CustomEvent = require('./custom_event_polyfill');
+var Hook = require('./hook');
+
+var HookButton = function(trigger, list, plugins, config) {
+  Hook.call(this, trigger, list, plugins, config);
+  this.type = 'button';
+  this.event = 'click';
+  this.addEvents();
+  this.addPlugins();
+};
+
+HookButton.prototype = Object.create(Hook.prototype);
+
+Object.assign(HookButton.prototype, {
+  addPlugins: function() {
+    for(var i = 0; i < this.plugins.length; i++) {
+      this.plugins[i].init(this);
+    }
+  },
+
+  clicked: function(e){
+    var buttonEvent = new CustomEvent('click.dl', {
+      detail: {
+        hook: this,
+      },
+      bubbles: true,
+      cancelable: true
+    });
+    this.list.show();
+    e.target.dispatchEvent(buttonEvent);
+  },
+
+  addEvents: function(){
+    this.clickedWrapper = this.clicked.bind(this);
+    this.trigger.addEventListener('click', this.clickedWrapper);
+  },
+
+  removeEvents: function(){
+    this.trigger.removeEventListener('click', this.clickedWrapper);
+  },
+
+  restoreInitialState: function() {
+    this.list.list.innerHTML = this.list.initialState;
+  },
+
+  removePlugins: function() {
+    for(var i = 0; i < this.plugins.length; i++) {
+      this.plugins[i].destroy();
+    }
+  },
+
+  destroy: function() {
+    this.restoreInitialState();
+    this.removeEvents();
+    this.removePlugins();
+  },
+
+
+  constructor: HookButton,
+});
+
+
+module.exports = HookButton;
+
+},{"./custom_event_polyfill":2,"./hook":5}],7:[function(require,module,exports){
+var CustomEvent = require('./custom_event_polyfill');
+var Hook = require('./hook');
+
+var HookInput = function(trigger, list, plugins, config) {
+  Hook.call(this, trigger, list, plugins, config);
+  this.type = 'input';
+  this.event = 'input';
+  this.addPlugins();
+  this.addEvents();
+};
+
+Object.assign(HookInput.prototype, {
+  addPlugins: function() {
+    var self = this;
+    for(var i = 0; i < this.plugins.length; i++) {
+      this.plugins[i].init(self);
+    }
+  },
+
+  addEvents: function(){
+    var self = this;
+
+    this.mousedown = function mousedown(e) {
+      if(self.hasRemovedEvents) return;
+
+      var mouseEvent = new CustomEvent('mousedown.dl', {
+        detail: {
+          hook: self,
+          text: e.target.value,
+        },
+        bubbles: true,
+        cancelable: true
+      });
+      e.target.dispatchEvent(mouseEvent);
+    }
+
+    this.input = function input(e) {
+      if(self.hasRemovedEvents) return;
+
+      self.list.show();
+
+      var inputEvent = new CustomEvent('input.dl', {
+        detail: {
+          hook: self,
+          text: e.target.value,
+        },
+        bubbles: true,
+        cancelable: true
+      });
+      e.target.dispatchEvent(inputEvent);
+    }
+
+    this.keyup = function keyup(e) {
+      if(self.hasRemovedEvents) return;
+
+      keyEvent(e, 'keyup.dl');
+    }
+
+    this.keydown = function keydown(e) {
+      if(self.hasRemovedEvents) return;
+
+      keyEvent(e, 'keydown.dl');
+    }
+
+    function keyEvent(e, keyEventName){
+      self.list.show();
+
+      var keyEvent = new CustomEvent(keyEventName, {
+        detail: {
+          hook: self,
+          text: e.target.value,
+          which: e.which,
+          key: e.key,
+        },
+        bubbles: true,
+        cancelable: true
+      });
+      e.target.dispatchEvent(keyEvent);
+    }
+
+    this.events = this.events || {};
+    this.events.mousedown = this.mousedown;
+    this.events.input = this.input;
+    this.events.keyup = this.keyup;
+    this.events.keydown = this.keydown;
+    this.trigger.addEventListener('mousedown', this.mousedown);
+    this.trigger.addEventListener('input', this.input);
+    this.trigger.addEventListener('keyup', this.keyup);
+    this.trigger.addEventListener('keydown', this.keydown);
+  },
+
+  removeEvents: function() {
+    this.hasRemovedEvents = true;
+    this.trigger.removeEventListener('mousedown', this.mousedown);
+    this.trigger.removeEventListener('input', this.input);
+    this.trigger.removeEventListener('keyup', this.keyup);
+    this.trigger.removeEventListener('keydown', this.keydown);
+  },
+
+  restoreInitialState: function() {
+    this.list.list.innerHTML = this.list.initialState;
+  },
+
+  removePlugins: function() {
+    for(var i = 0; i < this.plugins.length; i++) {
+      this.plugins[i].destroy();
+    }
+  },
+
+  destroy: function() {
+    this.restoreInitialState();
+    this.removeEvents();
+    this.removePlugins();
+    this.list.destroy();
+  }
+});
+
+module.exports = HookInput;
+
+},{"./custom_event_polyfill":2,"./hook":5}],8:[function(require,module,exports){
+var DropLab = require('./droplab')();
+var DATA_TRIGGER = require('./constants').DATA_TRIGGER;
+var keyboard = require('./keyboard')();
+var setup = function() {
+  window.DropLab = DropLab;
+};
+
+
+module.exports = setup();
+
+},{"./constants":1,"./droplab":4,"./keyboard":9}],9:[function(require,module,exports){
+require('./window')(function(w){
+  module.exports = function(){
+    var currentKey;
+    var currentFocus;
+    var isUpArrow = false;
+    var isDownArrow = false;
+    var removeHighlight = function removeHighlight(list) {
+      var listItems = Array.prototype.slice.call(list.list.querySelectorAll('li:not(.divider)'), 0);
+      var listItemsTmp = [];
+      for(var i = 0; i < listItems.length; i++) {
+        var listItem = listItems[i];
+        listItem.classList.remove('dropdown-active');
+
+        if (listItem.style.display !== 'none') {
+          listItemsTmp.push(listItem);
+        }
+      }
+      return listItemsTmp;
+    };
+
+    var setMenuForArrows = function setMenuForArrows(list) {
+      var listItems = removeHighlight(list);
+      if(list.currentIndex>0){
+        if(!listItems[list.currentIndex-1]){
+          list.currentIndex = list.currentIndex-1;
+        }
+
+        if (listItems[list.currentIndex-1]) {
+          var el = listItems[list.currentIndex-1];
+          var filterDropdownEl = el.closest('.filter-dropdown');
+          el.classList.add('dropdown-active');
+
+          if (filterDropdownEl) {
+            var filterDropdownBottom = filterDropdownEl.offsetHeight;
+            var elOffsetTop = el.offsetTop - 30;
+
+            if (elOffsetTop > filterDropdownBottom) {
+              filterDropdownEl.scrollTop = elOffsetTop - filterDropdownBottom;
+            }
+          }
+        }
+      }
+    };
+
+    var mousedown = function mousedown(e) {
+      var list = e.detail.hook.list;
+      removeHighlight(list);
+      list.show();
+      list.currentIndex = 0;
+      isUpArrow = false;
+      isDownArrow = false;
+    };
+    var selectItem = function selectItem(list) {
+      var listItems = removeHighlight(list);
+      var currentItem = listItems[list.currentIndex-1];
+      var listEvent = new CustomEvent('click.dl', {
+        detail: {
+          list: list,
+          selected: currentItem,
+          data: currentItem.dataset,
+        },
+      });
+      list.list.dispatchEvent(listEvent);
+      list.hide();
+    }
+
+    var keydown = function keydown(e){
+      var typedOn = e.target;
+      var list = e.detail.hook.list;
+      var currentIndex = list.currentIndex;
+      isUpArrow = false;
+      isDownArrow = false;
+
+      if(e.detail.which){
+        currentKey = e.detail.which;
+        if(currentKey === 13){
+          selectItem(e.detail.hook.list);
+          return;
+        }
+        if(currentKey === 38) {
+          isUpArrow = true;
+        }
+        if(currentKey === 40) {
+          isDownArrow = true;
+        }
+      } else if(e.detail.key) {
+        currentKey = e.detail.key;
+        if(currentKey === 'Enter'){
+          selectItem(e.detail.hook.list);
+          return;
+        }
+        if(currentKey === 'ArrowUp') {
+          isUpArrow = true;
+        }
+        if(currentKey === 'ArrowDown') {
+          isDownArrow = true;
+        }
+      }
+      if(isUpArrow){ currentIndex--; }
+      if(isDownArrow){ currentIndex++; }
+      if(currentIndex < 0){ currentIndex = 0; }
+      list.currentIndex = currentIndex;
+      setMenuForArrows(e.detail.hook.list);
+    };
+
+    w.addEventListener('mousedown.dl', mousedown);
+    w.addEventListener('keydown.dl', keydown);
+  };
+});
+},{"./window":11}],10:[function(require,module,exports){
+var DATA_TRIGGER = require('./constants').DATA_TRIGGER;
+var DATA_DROPDOWN = require('./constants').DATA_DROPDOWN;
+
+var toDataCamelCase = function(attr){
+  return this.camelize(attr.split('-').slice(1).join(' '));
+};
+
+// the tiniest damn templating I can do
+var t = function(s,d){
+  for(var p in d)
+    s=s.replace(new RegExp('{{'+p+'}}','g'), d[p]);
+  return s;
+};
+
+var camelize = function(str) {
+  return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(letter, index) {
+    return index == 0 ? letter.toLowerCase() : letter.toUpperCase();
+  }).replace(/\s+/g, '');
+};
+
+var closest = function(thisTag, stopTag) {
+  while(thisTag && thisTag.tagName !== stopTag && thisTag.tagName !== 'HTML'){
+    thisTag = thisTag.parentNode;
+  }
+  return thisTag;
+};
+
+var isDropDownParts = function(target) {
+  if(!target || target.tagName === 'HTML') { return false; }
+  return (
+    target.hasAttribute(DATA_TRIGGER) ||
+      target.hasAttribute(DATA_DROPDOWN)
+  );
+};
+
+module.exports = {
+  toDataCamelCase: toDataCamelCase,
+  t: t,
+  camelize: camelize,
+  closest: closest,
+  isDropDownParts: isDropDownParts,
+};
+
+},{"./constants":1}],11:[function(require,module,exports){
+module.exports = function(callback) {
+  return (function() {
+    callback(this);
+  }).call(null);
+};
+
+},{}]},{},[8])(8)
+});
diff --git a/app/assets/javascripts/droplab/droplab_ajax.js b/app/assets/javascripts/droplab/droplab_ajax.js
new file mode 100644
index 00000000000..020f8b4ac65
--- /dev/null
+++ b/app/assets/javascripts/droplab/droplab_ajax.js
@@ -0,0 +1,103 @@
+/* eslint-disable */
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g=(g.droplab||(g.droplab = {}));g=(g.ajax||(g.ajax = {}));g=(g.datasource||(g.datasource = {}));g.js = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+/* global droplab */
+
+require('../window')(function(w){
+  function droplabAjaxException(message) {
+    this.message = message;
+  }
+
+  w.droplabAjax = {
+    _loadUrlData: function _loadUrlData(url) {
+      var self = this;
+      return new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest;
+        xhr.open('GET', url, true);
+        xhr.onreadystatechange = function () {
+          if(xhr.readyState === XMLHttpRequest.DONE) {
+            if (xhr.status === 200) {
+              var data = JSON.parse(xhr.responseText);
+              self.cache[url] = data;
+              return resolve(data);
+            } else {
+              return reject([xhr.responseText, xhr.status]);
+            }
+          }
+        };
+        xhr.send();
+      });
+    },
+
+    _loadData: function _loadData(data, config, self) {
+      if (config.loadingTemplate) {
+        var dataLoadingTemplate = self.hook.list.list.querySelector('[data-loading-template]');
+
+        if (dataLoadingTemplate) {
+          dataLoadingTemplate.outerHTML = self.listTemplate;
+        }
+      }
+
+      if (!self.destroyed) {
+        self.hook.list[config.method].call(self.hook.list, data);
+      }
+    },
+
+    init: function init(hook) {
+      var self = this;
+      self.destroyed = false;
+      self.cache = self.cache || {};
+      var config = hook.config.droplabAjax;
+      this.hook = hook;
+
+      if (!config || !config.endpoint || !config.method) {
+        return;
+      }
+
+      if (config.method !== 'setData' && config.method !== 'addData') {
+        return;
+      }
+
+      if (config.loadingTemplate) {
+        var dynamicList = hook.list.list.querySelector('[data-dynamic]');
+
+        var loadingTemplate = document.createElement('div');
+        loadingTemplate.innerHTML = config.loadingTemplate;
+        loadingTemplate.setAttribute('data-loading-template', '');
+
+        this.listTemplate = dynamicList.outerHTML;
+        dynamicList.outerHTML = loadingTemplate.outerHTML;
+      }
+
+      if (self.cache[config.endpoint]) {
+        self._loadData(self.cache[config.endpoint], config, self);
+      } else {
+        this._loadUrlData(config.endpoint)
+          .then(function(d) {
+            self._loadData(d, config, self);
+          }, function(xhrError) {
+            // TODO: properly handle errors due to XHR cancellation
+            return;
+          }).catch(function(e) {
+            throw new droplabAjaxException(e.message || e);
+          });
+      }
+    },
+
+    destroy: function() {
+      var dynamicList = this.hook.list.list.querySelector('[data-dynamic]');
+      this.destroyed = true;
+      if (this.listTemplate && dynamicList) {
+        dynamicList.outerHTML = this.listTemplate;
+      }
+    }
+  };
+});
+},{"../window":2}],2:[function(require,module,exports){
+module.exports = function(callback) {
+  return (function() {
+    callback(this);
+  }).call(null);
+};
+
+},{}]},{},[1])(1)
+});
diff --git a/app/assets/javascripts/droplab/droplab_ajax_filter.js b/app/assets/javascripts/droplab/droplab_ajax_filter.js
new file mode 100644
index 00000000000..05eba7aef56
--- /dev/null
+++ b/app/assets/javascripts/droplab/droplab_ajax_filter.js
@@ -0,0 +1,164 @@
+/* eslint-disable */
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g=(g.droplab||(g.droplab = {}));g=(g.ajax||(g.ajax = {}));g=(g.datasource||(g.datasource = {}));g.js = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+/* global droplab */
+
+require('../window')(function(w){
+  w.droplabAjaxFilter = {
+    init: function(hook) {
+      this.destroyed = false;
+      this.hook = hook;
+      this.notLoading();
+
+      this.debounceTriggerWrapper = this.debounceTrigger.bind(this);
+      this.hook.trigger.addEventListener('keydown.dl', this.debounceTriggerWrapper);
+      this.hook.trigger.addEventListener('focus', this.debounceTriggerWrapper);
+      this.trigger(true);
+    },
+
+    notLoading: function notLoading() {
+      this.loading = false;
+    },
+
+    debounceTrigger: function debounceTrigger(e) {
+      var NON_CHARACTER_KEYS = [16, 17, 18, 20, 37, 38, 39, 40, 91, 93];
+      var invalidKeyPressed = NON_CHARACTER_KEYS.indexOf(e.detail.which || e.detail.keyCode) > -1;
+      var focusEvent = e.type === 'focus';
+
+      if (invalidKeyPressed || this.loading) {
+        return;
+      }
+
+      if (this.timeout) {
+        clearTimeout(this.timeout);
+      }
+
+      this.timeout = setTimeout(this.trigger.bind(this, focusEvent), 200);
+    },
+
+    trigger: function trigger(getEntireList) {
+      var config = this.hook.config.droplabAjaxFilter;
+      var searchValue = this.trigger.value;
+
+      if (!config || !config.endpoint || !config.searchKey) {
+        return;
+      }
+
+      if (config.searchValueFunction) {
+        searchValue = config.searchValueFunction();
+      }
+
+      if (config.loadingTemplate && this.hook.list.data === undefined ||
+        this.hook.list.data.length === 0) {
+        var dynamicList = this.hook.list.list.querySelector('[data-dynamic]');
+
+        var loadingTemplate = document.createElement('div');
+        loadingTemplate.innerHTML = config.loadingTemplate;
+        loadingTemplate.setAttribute('data-loading-template', true);
+
+        this.listTemplate = dynamicList.outerHTML;
+        dynamicList.outerHTML = loadingTemplate.outerHTML;
+      }
+
+      if (getEntireList) {
+        searchValue = '';
+      }
+
+      if (config.searchKey === searchValue) {
+        return this.list.show();
+      }
+
+      this.loading = true;
+
+      var params = config.params || {};
+      params[config.searchKey] = searchValue;
+      var self = this;
+      self.cache = self.cache || {};
+      var url = config.endpoint + this.buildParams(params);
+      var urlCachedData = self.cache[url];
+
+      if (urlCachedData) {
+        self._loadData(urlCachedData, config, self);
+      } else {
+        this._loadUrlData(url)
+          .then(function(data) {
+            self._loadData(data, config, self);
+          }, function(xhrError) {
+            // TODO: properly handle errors due to XHR cancellation
+            return;
+          });
+      }
+    },
+
+    _loadUrlData: function _loadUrlData(url) {
+      var self = this;
+      return new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest;
+        xhr.open('GET', url, true);
+        xhr.onreadystatechange = function () {
+          if(xhr.readyState === XMLHttpRequest.DONE) {
+            if (xhr.status === 200) {
+              var data = JSON.parse(xhr.responseText);
+              self.cache[url] = data;
+              return resolve(data);
+            } else {
+              return reject([xhr.responseText, xhr.status]);
+            }
+          }
+        };
+        xhr.send();
+      });
+    },
+
+    _loadData: function _loadData(data, config, self) {
+      if (config.loadingTemplate && self.hook.list.data === undefined ||
+        self.hook.list.data.length === 0) {
+        const dataLoadingTemplate = self.hook.list.list.querySelector('[data-loading-template]');
+
+        if (dataLoadingTemplate) {
+          dataLoadingTemplate.outerHTML = self.listTemplate;
+        }
+      }
+
+      if (!self.destroyed) {
+        var hookListChildren = self.hook.list.list.children;
+        var onlyDynamicList = hookListChildren.length === 1 && hookListChildren[0].hasAttribute('data-dynamic');
+
+        if (onlyDynamicList && data.length === 0) {
+          self.hook.list.hide();
+        }
+
+        self.hook.list.setData.call(self.hook.list, data);
+      }
+      self.notLoading();
+      self.hook.list.currentIndex = 0;
+    },
+
+    buildParams: function(params) {
+      if (!params) return '';
+      var paramsArray = Object.keys(params).map(function(param) {
+        return param + '=' + (params[param] || '');
+      });
+      return '?' + paramsArray.join('&');
+    },
+
+    destroy: function destroy() {
+      if (this.timeout) {
+        clearTimeout(this.timeout);
+      }
+
+      this.destroyed = true;
+
+      this.hook.trigger.removeEventListener('keydown.dl', this.debounceTriggerWrapper);
+      this.hook.trigger.removeEventListener('focus', this.debounceTriggerWrapper);
+    }
+  };
+});
+},{"../window":2}],2:[function(require,module,exports){
+module.exports = function(callback) {
+  return (function() {
+    callback(this);
+  }).call(null);
+};
+
+},{}]},{},[1])(1)
+});
diff --git a/app/assets/javascripts/droplab/droplab_filter.js b/app/assets/javascripts/droplab/droplab_filter.js
new file mode 100644
index 00000000000..7f7d93f3e27
--- /dev/null
+++ b/app/assets/javascripts/droplab/droplab_filter.js
@@ -0,0 +1,76 @@
+/* eslint-disable */
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g=(g.droplab||(g.droplab = {}));g=(g.filter||(g.filter = {}));g.js = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+/* global droplab */
+
+require('../window')(function(w){
+  w.droplabFilter = {
+
+    keydownWrapper: function(e){
+        var hiddenCount = 0;
+        var dataHiddenCount = 0;
+        var list = e.detail.hook.list;
+        var data = list.data;
+        var value = e.detail.hook.trigger.value.toLowerCase();
+        var config = e.detail.hook.config.droplabFilter;
+        var matches = [];
+        var filterFunction;
+        // will only work on dynamically set data
+        if(!data){
+          return;
+        }
+
+        if (config && config.filterFunction && typeof config.filterFunction === 'function') {
+          filterFunction = config.filterFunction;
+        } else {
+          filterFunction = function(o){
+            // cheap string search
+            o.droplab_hidden = o[config.template].toLowerCase().indexOf(value) === -1;
+            return o;
+          };
+        }
+
+        dataHiddenCount = data.filter(function(o) {
+          return !o.droplab_hidden;
+        }).length;
+
+        matches = data.map(function(o) {
+          return filterFunction(o, value);
+        });
+
+        hiddenCount = matches.filter(function(o) {
+          return !o.droplab_hidden;
+        }).length;
+
+        if (dataHiddenCount !== hiddenCount) {
+          list.render(matches);
+          list.currentIndex = 0;
+        }
+    },
+
+    init: function init(hookInput) {
+      var config = hookInput.config.droplabFilter;
+
+      if (!config || (!config.template && !config.filterFunction)) {
+        return;
+      }
+
+      this.hookInput = hookInput;
+      this.hookInput.trigger.addEventListener('keyup.dl', this.keydownWrapper);
+      this.hookInput.trigger.addEventListener('mousedown.dl', this.keydownWrapper);
+    },
+
+    destroy: function destroy(){
+      this.hookInput.trigger.removeEventListener('keyup.dl', this.keydownWrapper);
+      this.hookInput.trigger.removeEventListener('mousedown.dl', this.keydownWrapper);
+    }
+  };
+});
+},{"../window":2}],2:[function(require,module,exports){
+module.exports = function(callback) {
+  return (function() {
+    callback(this);
+  }).call(null);
+};
+
+},{}]},{},[1])(1)
+});
diff --git a/app/assets/javascripts/dropzone_input.js b/app/assets/javascripts/dropzone_input.js
index 1a0aa9757ba..f2963a5eb19 100644
--- a/app/assets/javascripts/dropzone_input.js
+++ b/app/assets/javascripts/dropzone_input.js
@@ -1,220 +1,218 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, max-len, one-var, no-var, one-var-declaration-per-line, no-unused-vars, camelcase, quotes, no-useless-concat, prefer-template, quote-props, comma-dangle, object-shorthand, consistent-return, prefer-arrow-callback */
+/* global Dropzone */
 
-/*= require preview_markdown */
+require('./preview_markdown');
 
-(function() {
-  this.DropzoneInput = (function() {
-    function DropzoneInput(form) {
-      var $mdArea, alertAttr, alertClass, appendToTextArea, btnAlert, child, closeAlertMessage, closeSpinner, divAlert, divHover, divSpinner, dropzone, form_dropzone, form_textarea, getFilename, handlePaste, iconPaperclip, iconSpinner, insertToTextArea, isImage, max_file_size, pasteText, project_uploads_path, showError, showSpinner, uploadFile, uploadProgress;
-      Dropzone.autoDiscover = false;
-      alertClass = "alert alert-danger alert-dismissable div-dropzone-alert";
-      alertAttr = "class=\"close\" data-dismiss=\"alert\"" + "aria-hidden=\"true\"";
-      divHover = "<div class=\"div-dropzone-hover\"></div>";
-      divSpinner = "<div class=\"div-dropzone-spinner\"></div>";
-      divAlert = "<div class=\"" + alertClass + "\"></div>";
-      iconPaperclip = "<i class=\"fa fa-paperclip div-dropzone-icon\"></i>";
-      iconSpinner = "<i class=\"fa fa-spinner fa-spin div-dropzone-icon\"></i>";
-      uploadProgress = $("<div class=\"div-dropzone-progress\"></div>");
-      btnAlert = "<button type=\"button\"" + alertAttr + ">&times;</button>";
-      project_uploads_path = window.project_uploads_path || null;
-      max_file_size = gon.max_file_size || 10;
-      form_textarea = $(form).find(".js-gfm-input");
-      form_textarea.wrap("<div class=\"div-dropzone\"></div>");
-      form_textarea.on('paste', (function(_this) {
-        return function(event) {
-          return handlePaste(event);
-        };
-      })(this));
-      $mdArea = $(form_textarea).closest('.md-area');
-      $(form).setupMarkdownPreview();
-      form_dropzone = $(form).find('.div-dropzone');
-      form_dropzone.parent().addClass("div-dropzone-wrapper");
-      form_dropzone.append(divHover);
-      form_dropzone.find(".div-dropzone-hover").append(iconPaperclip);
-      form_dropzone.append(divSpinner);
-      form_dropzone.find(".div-dropzone-spinner").append(iconSpinner);
-      form_dropzone.find(".div-dropzone-spinner").append(uploadProgress);
-      form_dropzone.find(".div-dropzone-spinner").css({
-        "opacity": 0,
-        "display": "none"
-      });
-      dropzone = form_dropzone.dropzone({
-        url: project_uploads_path,
-        dictDefaultMessage: "",
-        clickable: true,
-        paramName: "file",
-        maxFilesize: max_file_size,
-        uploadMultiple: false,
-        headers: {
-          "X-CSRF-Token": $("meta[name=\"csrf-token\"]").attr("content")
-        },
-        previewContainer: false,
-        processing: function() {
-          return $(".div-dropzone-alert").alert("close");
-        },
-        dragover: function() {
-          $mdArea.addClass('is-dropzone-hover');
-          form.find(".div-dropzone-hover").css("opacity", 0.7);
-        },
-        dragleave: function() {
-          $mdArea.removeClass('is-dropzone-hover');
-          form.find(".div-dropzone-hover").css("opacity", 0);
-        },
-        drop: function() {
-          $mdArea.removeClass('is-dropzone-hover');
-          form.find(".div-dropzone-hover").css("opacity", 0);
-          form_textarea.focus();
-        },
-        success: function(header, response) {
-          pasteText(response.link.markdown);
-        },
-        error: function(temp) {
-          var checkIfMsgExists, errorAlert;
-          errorAlert = $(form).find('.error-alert');
-          checkIfMsgExists = errorAlert.children().length;
-          if (checkIfMsgExists === 0) {
-            errorAlert.append(divAlert);
-            $(".div-dropzone-alert").append(btnAlert + "Attaching the file failed.");
-          }
-        },
-        totaluploadprogress: function(totalUploadProgress) {
-          uploadProgress.text(Math.round(totalUploadProgress) + "%");
-        },
-        sending: function() {
-          form_dropzone.find(".div-dropzone-spinner").css({
-            "opacity": 0.7,
-            "display": "inherit"
-          });
-        },
-        queuecomplete: function() {
-          uploadProgress.text("");
-          $(".dz-preview").remove();
-          $(".markdown-area").trigger("input");
-          $(".div-dropzone-spinner").css({
-            "opacity": 0,
-            "display": "none"
-          });
-        }
-      });
-      child = $(dropzone[0]).children("textarea");
-      handlePaste = function(event) {
-        var filename, image, pasteEvent, text;
-        pasteEvent = event.originalEvent;
-        if (pasteEvent.clipboardData && pasteEvent.clipboardData.items) {
-          image = isImage(pasteEvent);
-          if (image) {
-            event.preventDefault();
-            filename = getFilename(pasteEvent) || "image.png";
-            text = "{{" + filename + "}}";
-            pasteText(text);
-            return uploadFile(image.getAsFile(), filename);
-          }
-        }
-      };
-      isImage = function(data) {
-        var i, item;
-        i = 0;
-        while (i < data.clipboardData.items.length) {
-          item = data.clipboardData.items[i];
-          if (item.type.indexOf("image") !== -1) {
-            return item;
-          }
-          i++;
-        }
-        return false;
-      };
-      pasteText = function(text) {
-        var afterSelection, beforeSelection, caretEnd, caretStart, textEnd;
-        caretStart = $(child)[0].selectionStart;
-        caretEnd = $(child)[0].selectionEnd;
-        textEnd = $(child).val().length;
-        beforeSelection = $(child).val().substring(0, caretStart);
-        afterSelection = $(child).val().substring(caretEnd, textEnd);
-        $(child).val(beforeSelection + text + afterSelection);
-        child.get(0).setSelectionRange(caretStart + text.length, caretEnd + text.length);
-        return form_textarea.trigger("input");
+window.DropzoneInput = (function() {
+  function DropzoneInput(form) {
+    var $mdArea, alertAttr, alertClass, appendToTextArea, btnAlert, child, closeAlertMessage, closeSpinner, divAlert, divHover, divSpinner, dropzone, form_dropzone, form_textarea, getFilename, handlePaste, iconPaperclip, iconSpinner, insertToTextArea, isImage, max_file_size, pasteText, project_uploads_path, showError, showSpinner, uploadFile, uploadProgress;
+    Dropzone.autoDiscover = false;
+    alertClass = "alert alert-danger alert-dismissable div-dropzone-alert";
+    alertAttr = "class=\"close\" data-dismiss=\"alert\"" + "aria-hidden=\"true\"";
+    divHover = "<div class=\"div-dropzone-hover\"></div>";
+    divSpinner = "<div class=\"div-dropzone-spinner\"></div>";
+    divAlert = "<div class=\"" + alertClass + "\"></div>";
+    iconPaperclip = "<i class=\"fa fa-paperclip div-dropzone-icon\"></i>";
+    iconSpinner = "<i class=\"fa fa-spinner fa-spin div-dropzone-icon\"></i>";
+    uploadProgress = $("<div class=\"div-dropzone-progress\"></div>");
+    btnAlert = "<button type=\"button\"" + alertAttr + ">&times;</button>";
+    project_uploads_path = window.project_uploads_path || null;
+    max_file_size = gon.max_file_size || 10;
+    form_textarea = $(form).find(".js-gfm-input");
+    form_textarea.wrap("<div class=\"div-dropzone\"></div>");
+    form_textarea.on('paste', (function(_this) {
+      return function(event) {
+        return handlePaste(event);
       };
-      getFilename = function(e) {
-        var value;
-        if (window.clipboardData && window.clipboardData.getData) {
-          value = window.clipboardData.getData("Text");
-        } else if (e.clipboardData && e.clipboardData.getData) {
-          value = e.clipboardData.getData("text/plain");
+    })(this));
+    $mdArea = $(form_textarea).closest('.md-area');
+    $(form).setupMarkdownPreview();
+    form_dropzone = $(form).find('.div-dropzone');
+    form_dropzone.parent().addClass("div-dropzone-wrapper");
+    form_dropzone.append(divHover);
+    form_dropzone.find(".div-dropzone-hover").append(iconPaperclip);
+    form_dropzone.append(divSpinner);
+    form_dropzone.find(".div-dropzone-spinner").append(iconSpinner);
+    form_dropzone.find(".div-dropzone-spinner").append(uploadProgress);
+    form_dropzone.find(".div-dropzone-spinner").css({
+      "opacity": 0,
+      "display": "none"
+    });
+    dropzone = form_dropzone.dropzone({
+      url: project_uploads_path,
+      dictDefaultMessage: "",
+      clickable: true,
+      paramName: "file",
+      maxFilesize: max_file_size,
+      uploadMultiple: false,
+      headers: {
+        "X-CSRF-Token": $("meta[name=\"csrf-token\"]").attr("content")
+      },
+      previewContainer: false,
+      processing: function() {
+        return $(".div-dropzone-alert").alert("close");
+      },
+      dragover: function() {
+        $mdArea.addClass('is-dropzone-hover');
+        form.find(".div-dropzone-hover").css("opacity", 0.7);
+      },
+      dragleave: function() {
+        $mdArea.removeClass('is-dropzone-hover');
+        form.find(".div-dropzone-hover").css("opacity", 0);
+      },
+      drop: function() {
+        $mdArea.removeClass('is-dropzone-hover');
+        form.find(".div-dropzone-hover").css("opacity", 0);
+        form_textarea.focus();
+      },
+      success: function(header, response) {
+        pasteText(response.link.markdown);
+      },
+      error: function(temp) {
+        var checkIfMsgExists, errorAlert;
+        errorAlert = $(form).find('.error-alert');
+        checkIfMsgExists = errorAlert.children().length;
+        if (checkIfMsgExists === 0) {
+          errorAlert.append(divAlert);
+          $(".div-dropzone-alert").append(btnAlert + "Attaching the file failed.");
         }
-        value = value.split("\r");
-        return value.first();
-      };
-      uploadFile = function(item, filename) {
-        var formData;
-        formData = new FormData();
-        formData.append("file", item, filename);
-        return $.ajax({
-          url: project_uploads_path,
-          type: "POST",
-          data: formData,
-          dataType: "json",
-          processData: false,
-          contentType: false,
-          headers: {
-            "X-CSRF-Token": $("meta[name=\"csrf-token\"]").attr("content")
-          },
-          beforeSend: function() {
-            showSpinner();
-            return closeAlertMessage();
-          },
-          success: function(e, textStatus, response) {
-            return insertToTextArea(filename, response.responseJSON.link.markdown);
-          },
-          error: function(response) {
-            return showError(response.responseJSON.message);
-          },
-          complete: function() {
-            return closeSpinner();
-          }
-        });
-      };
-      insertToTextArea = function(filename, url) {
-        return $(child).val(function(index, val) {
-          return val.replace("{{" + filename + "}}", url + "\n");
-        });
-      };
-      appendToTextArea = function(url) {
-        return $(child).val(function(index, val) {
-          return val + url + "\n";
-        });
-      };
-      showSpinner = function(e) {
-        return form.find(".div-dropzone-spinner").css({
+      },
+      totaluploadprogress: function(totalUploadProgress) {
+        uploadProgress.text(Math.round(totalUploadProgress) + "%");
+      },
+      sending: function() {
+        form_dropzone.find(".div-dropzone-spinner").css({
           "opacity": 0.7,
           "display": "inherit"
         });
-      };
-      closeSpinner = function() {
-        return form.find(".div-dropzone-spinner").css({
+      },
+      queuecomplete: function() {
+        uploadProgress.text("");
+        $(".dz-preview").remove();
+        $(".markdown-area").trigger("input");
+        $(".div-dropzone-spinner").css({
           "opacity": 0,
           "display": "none"
         });
-      };
-      showError = function(message) {
-        var checkIfMsgExists, errorAlert;
-        errorAlert = $(form).find('.error-alert');
-        checkIfMsgExists = errorAlert.children().length;
-        if (checkIfMsgExists === 0) {
-          errorAlert.append(divAlert);
-          return $(".div-dropzone-alert").append(btnAlert + message);
+      }
+    });
+    child = $(dropzone[0]).children("textarea");
+    handlePaste = function(event) {
+      var filename, image, pasteEvent, text;
+      pasteEvent = event.originalEvent;
+      if (pasteEvent.clipboardData && pasteEvent.clipboardData.items) {
+        image = isImage(pasteEvent);
+        if (image) {
+          event.preventDefault();
+          filename = getFilename(pasteEvent) || "image.png";
+          text = "{{" + filename + "}}";
+          pasteText(text);
+          return uploadFile(image.getAsFile(), filename);
+        }
+      }
+    };
+    isImage = function(data) {
+      var i, item;
+      i = 0;
+      while (i < data.clipboardData.items.length) {
+        item = data.clipboardData.items[i];
+        if (item.type.indexOf("image") !== -1) {
+          return item;
+        }
+        i += 1;
+      }
+      return false;
+    };
+    pasteText = function(text) {
+      var afterSelection, beforeSelection, caretEnd, caretStart, textEnd;
+      var formattedText = text + "\n\n";
+      caretStart = $(child)[0].selectionStart;
+      caretEnd = $(child)[0].selectionEnd;
+      textEnd = $(child).val().length;
+      beforeSelection = $(child).val().substring(0, caretStart);
+      afterSelection = $(child).val().substring(caretEnd, textEnd);
+      $(child).val(beforeSelection + formattedText + afterSelection);
+      child.get(0).setSelectionRange(caretStart + formattedText.length, caretEnd + formattedText.length);
+      return form_textarea.trigger("input");
+    };
+    getFilename = function(e) {
+      var value;
+      if (window.clipboardData && window.clipboardData.getData) {
+        value = window.clipboardData.getData("Text");
+      } else if (e.clipboardData && e.clipboardData.getData) {
+        value = e.clipboardData.getData("text/plain");
+      }
+      value = value.split("\r");
+      return value.first();
+    };
+    uploadFile = function(item, filename) {
+      var formData;
+      formData = new FormData();
+      formData.append("file", item, filename);
+      return $.ajax({
+        url: project_uploads_path,
+        type: "POST",
+        data: formData,
+        dataType: "json",
+        processData: false,
+        contentType: false,
+        headers: {
+          "X-CSRF-Token": $("meta[name=\"csrf-token\"]").attr("content")
+        },
+        beforeSend: function() {
+          showSpinner();
+          return closeAlertMessage();
+        },
+        success: function(e, textStatus, response) {
+          return insertToTextArea(filename, response.responseJSON.link.markdown);
+        },
+        error: function(response) {
+          return showError(response.responseJSON.message);
+        },
+        complete: function() {
+          return closeSpinner();
         }
-      };
-      closeAlertMessage = function() {
-        return form.find(".div-dropzone-alert").alert("close");
-      };
-      form.find(".markdown-selector").click(function(e) {
-        e.preventDefault();
-        $(this).closest('.gfm-form').find('.div-dropzone').click();
       });
-    }
-
-    return DropzoneInput;
-
-  })();
+    };
+    insertToTextArea = function(filename, url) {
+      return $(child).val(function(index, val) {
+        return val.replace("{{" + filename + "}}", url + "\n");
+      });
+    };
+    appendToTextArea = function(url) {
+      return $(child).val(function(index, val) {
+        return val + url + "\n";
+      });
+    };
+    showSpinner = function(e) {
+      return form.find(".div-dropzone-spinner").css({
+        "opacity": 0.7,
+        "display": "inherit"
+      });
+    };
+    closeSpinner = function() {
+      return form.find(".div-dropzone-spinner").css({
+        "opacity": 0,
+        "display": "none"
+      });
+    };
+    showError = function(message) {
+      var checkIfMsgExists, errorAlert;
+      errorAlert = $(form).find('.error-alert');
+      checkIfMsgExists = errorAlert.children().length;
+      if (checkIfMsgExists === 0) {
+        errorAlert.append(divAlert);
+        return $(".div-dropzone-alert").append(btnAlert + message);
+      }
+    };
+    closeAlertMessage = function() {
+      return form.find(".div-dropzone-alert").alert("close");
+    };
+    form.find(".markdown-selector").click(function(e) {
+      e.preventDefault();
+      $(this).closest('.gfm-form').find('.div-dropzone').click();
+    });
+  }
 
-}).call(this);
+  return DropzoneInput;
+})();
diff --git a/app/assets/javascripts/due_date_select.js b/app/assets/javascripts/due_date_select.js
new file mode 100644
index 00000000000..db10b383913
--- /dev/null
+++ b/app/assets/javascripts/due_date_select.js
@@ -0,0 +1,203 @@
+/* eslint-disable wrap-iife, func-names, space-before-function-paren, comma-dangle, prefer-template, consistent-return, class-methods-use-this, arrow-body-style, no-unused-vars, no-underscore-dangle, no-new, max-len, no-sequences, no-unused-expressions, no-param-reassign */
+/* global dateFormat */
+/* global Pikaday */
+
+class DueDateSelect {
+  constructor({ $dropdown, $loading } = {}) {
+    const $dropdownParent = $dropdown.closest('.dropdown');
+    const $block = $dropdown.closest('.block');
+    this.$loading = $loading;
+    this.$dropdown = $dropdown;
+    this.$dropdownParent = $dropdownParent;
+    this.$datePicker = $dropdownParent.find('.js-due-date-calendar');
+    this.$block = $block;
+    this.$selectbox = $dropdown.closest('.selectbox');
+    this.$value = $block.find('.value');
+    this.$valueContent = $block.find('.value-content');
+    this.$sidebarValue = $('.js-due-date-sidebar-value', $block);
+    this.fieldName = $dropdown.data('field-name'),
+    this.abilityName = $dropdown.data('ability-name'),
+    this.issueUpdateURL = $dropdown.data('issue-update');
+
+    this.rawSelectedDate = null;
+    this.displayedDate = null;
+    this.datePayload = null;
+
+    this.initGlDropdown();
+    this.initRemoveDueDate();
+    this.initDatePicker();
+  }
+
+  initGlDropdown() {
+    this.$dropdown.glDropdown({
+      opened: () => {
+        const calendar = this.$datePicker.data('pikaday');
+        calendar.show();
+      },
+      hidden: () => {
+        this.$selectbox.hide();
+        this.$value.css('display', '');
+      }
+    });
+  }
+
+  initDatePicker() {
+    const $dueDateInput = $(`input[name='${this.fieldName}']`);
+
+    const calendar = new Pikaday({
+      field: $dueDateInput.get(0),
+      theme: 'gitlab-theme',
+      format: 'yyyy-mm-dd',
+      onSelect: (dateText) => {
+        const formattedDate = dateFormat(new Date(dateText), 'yyyy-mm-dd');
+
+        $dueDateInput.val(formattedDate);
+
+        if (this.$dropdown.hasClass('js-issue-boards-due-date')) {
+          gl.issueBoards.BoardsStore.detail.issue.dueDate = $dueDateInput.val();
+          this.updateIssueBoardIssue();
+        } else {
+          this.saveDueDate(true);
+        }
+      }
+    });
+
+    calendar.setDate(new Date($dueDateInput.val()));
+    this.$datePicker.append(calendar.el);
+    this.$datePicker.data('pikaday', calendar);
+  }
+
+  initRemoveDueDate() {
+    this.$block.on('click', '.js-remove-due-date', (e) => {
+      const calendar = this.$datePicker.data('pikaday');
+      e.preventDefault();
+
+      calendar.setDate(null);
+
+      if (this.$dropdown.hasClass('js-issue-boards-due-date')) {
+        gl.issueBoards.BoardsStore.detail.issue.dueDate = '';
+        this.updateIssueBoardIssue();
+      } else {
+        $("input[name='" + this.fieldName + "']").val('');
+        return this.saveDueDate(false);
+      }
+    });
+  }
+
+  saveDueDate(isDropdown) {
+    this.parseSelectedDate();
+    this.prepSelectedDate();
+    this.submitSelectedDate(isDropdown);
+  }
+
+  parseSelectedDate() {
+    this.rawSelectedDate = $(`input[name='${this.fieldName}']`).val();
+
+    if (this.rawSelectedDate.length) {
+      // Construct Date object manually to avoid buggy dateString support within Date constructor
+      const dateArray = this.rawSelectedDate.split('-').map(v => parseInt(v, 10));
+      const dateObj = new Date(dateArray[0], dateArray[1] - 1, dateArray[2]);
+      this.displayedDate = dateFormat(dateObj, 'mmm d, yyyy');
+    } else {
+      this.displayedDate = 'No due date';
+    }
+  }
+
+  prepSelectedDate() {
+    const datePayload = {};
+    datePayload[this.abilityName] = {};
+    datePayload[this.abilityName].due_date = this.rawSelectedDate;
+    this.datePayload = datePayload;
+  }
+
+  updateIssueBoardIssue () {
+    this.$loading.fadeIn();
+    this.$dropdown.trigger('loading.gl.dropdown');
+    this.$selectbox.hide();
+    this.$value.css('display', '');
+
+    gl.issueBoards.BoardsStore.detail.issue.update(this.$dropdown.attr('data-issue-update'))
+      .then(() => {
+        this.$loading.fadeOut();
+      });
+  }
+
+  submitSelectedDate(isDropdown) {
+    return $.ajax({
+      type: 'PUT',
+      url: this.issueUpdateURL,
+      data: this.datePayload,
+      dataType: 'json',
+      beforeSend: () => {
+        const selectedDateValue = this.datePayload[this.abilityName].due_date;
+        const displayedDateStyle = this.displayedDate !== 'No due date' ? 'bold' : 'no-value';
+
+        this.$loading.removeClass('hidden').fadeIn();
+
+        if (isDropdown) {
+          this.$dropdown.trigger('loading.gl.dropdown');
+          this.$selectbox.hide();
+        }
+
+        this.$value.css('display', '');
+        this.$valueContent.html(`<span class='${displayedDateStyle}'>${this.displayedDate}</span>`);
+        this.$sidebarValue.html(this.displayedDate);
+
+        return selectedDateValue.length ?
+          $('.js-remove-due-date-holder').removeClass('hidden') :
+          $('.js-remove-due-date-holder').addClass('hidden');
+      }
+    }).done((data) => {
+      if (isDropdown) {
+        this.$dropdown.trigger('loaded.gl.dropdown');
+        this.$dropdown.dropdown('toggle');
+      }
+      return this.$loading.fadeOut();
+    });
+  }
+}
+
+class DueDateSelectors {
+  constructor() {
+    this.initMilestoneDatePicker();
+    this.initIssuableSelect();
+  }
+
+  initMilestoneDatePicker() {
+    $('.datepicker').each(function() {
+      const $datePicker = $(this);
+      const calendar = new Pikaday({
+        field: $datePicker.get(0),
+        theme: 'gitlab-theme',
+        format: 'yyyy-mm-dd',
+        onSelect(dateText) {
+          $datePicker.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
+        }
+      });
+      calendar.setDate(new Date($datePicker.val()));
+
+      $datePicker.data('pikaday', calendar);
+    });
+
+    $('.js-clear-due-date,.js-clear-start-date').on('click', (e) => {
+      e.preventDefault();
+      const calendar = $(e.target).siblings('.datepicker').data('pikaday');
+      calendar.setDate(null);
+    });
+  }
+
+  initIssuableSelect() {
+    const $loading = $('.js-issuable-update .due_date').find('.block-loading').hide();
+
+    $('.js-due-date-select').each((i, dropdown) => {
+      const $dropdown = $(dropdown);
+      new DueDateSelect({
+        $dropdown,
+        $loading
+      });
+    });
+  }
+}
+
+window.gl = window.gl || {};
+window.gl.DueDateSelectors = DueDateSelectors;
diff --git a/app/assets/javascripts/due_date_select.js.es6 b/app/assets/javascripts/due_date_select.js.es6
deleted file mode 100644
index fd7f961aab9..00000000000
--- a/app/assets/javascripts/due_date_select.js.es6
+++ /dev/null
@@ -1,185 +0,0 @@
-/* eslint-disable */
-(function(global) {
-  class DueDateSelect {
-    constructor({ $dropdown, $loading } = {}) {
-      const $dropdownParent = $dropdown.closest('.dropdown');
-      const $block = $dropdown.closest('.block');
-      this.$loading = $loading;
-      this.$dropdown = $dropdown;
-      this.$dropdownParent = $dropdownParent;
-      this.$datePicker = $dropdownParent.find('.js-due-date-calendar');
-      this.$block = $block;
-      this.$selectbox = $dropdown.closest('.selectbox');
-      this.$value = $block.find('.value');
-      this.$valueContent = $block.find('.value-content');
-      this.$sidebarValue = $('.js-due-date-sidebar-value', $block);
-      this.fieldName = $dropdown.data('field-name'),
-      this.abilityName = $dropdown.data('ability-name'),
-      this.issueUpdateURL = $dropdown.data('issue-update')
-
-      this.rawSelectedDate = null;
-      this.displayedDate = null;
-      this.datePayload = null;
-
-      this.initGlDropdown();
-      this.initRemoveDueDate();
-      this.initDatePicker();
-      this.initStopPropagation();
-    }
-
-    initGlDropdown() {
-      this.$dropdown.glDropdown({
-        hidden: () => {
-          this.$selectbox.hide();
-          this.$value.css('display', '');
-        }
-      });
-    }
-
-    initDatePicker() {
-      this.$datePicker.datepicker({
-        dateFormat: 'yy-mm-dd',
-        defaultDate: $("input[name='" + this.fieldName + "']").val(),
-        altField: "input[name='" + this.fieldName + "']",
-        onSelect: () => {
-          if (this.$dropdown.hasClass('js-issue-boards-due-date')) {
-            gl.issueBoards.BoardsStore.detail.issue.dueDate = $(`input[name='${this.fieldName}']`).val();
-            this.updateIssueBoardIssue();
-          } else {
-            return this.saveDueDate(true);
-          }
-        }
-      });
-    }
-
-    initRemoveDueDate() {
-      this.$block.on('click', '.js-remove-due-date', (e) => {
-        e.preventDefault();
-
-        if (this.$dropdown.hasClass('js-issue-boards-due-date')) {
-          gl.issueBoards.BoardsStore.detail.issue.dueDate = '';
-          this.updateIssueBoardIssue();
-        } else {
-          $("input[name='" + this.fieldName + "']").val('');
-          return this.saveDueDate(false);
-        }
-      });
-    }
-
-    initStopPropagation() {
-      $(document).off('click', '.ui-datepicker-header a').on('click', '.ui-datepicker-header a', (e) => {
-        return e.stopImmediatePropagation();
-      });
-    }
-
-    saveDueDate(isDropdown) {
-      this.parseSelectedDate();
-      this.prepSelectedDate();
-      this.submitSelectedDate(isDropdown);
-    }
-
-    parseSelectedDate() {
-      this.rawSelectedDate = $("input[name='" + this.fieldName + "']").val();
-      if (this.rawSelectedDate.length) {
-        let dateObj = new Date(this.rawSelectedDate);
-        this.displayedDate = $.datepicker.formatDate('M d, yy', dateObj);
-      } else {
-        this.displayedDate = 'No due date';
-      }
-    }
-
-    prepSelectedDate() {
-      const datePayload = {};
-      datePayload[this.abilityName] = {};
-      datePayload[this.abilityName].due_date = this.rawSelectedDate;
-      this.datePayload = datePayload;
-    }
-
-    updateIssueBoardIssue () {
-      this.$loading.fadeIn();
-      this.$dropdown.trigger('loading.gl.dropdown');
-      this.$selectbox.hide();
-      this.$value.css('display', '');
-
-      gl.issueBoards.BoardsStore.detail.issue.update(this.$dropdown.attr('data-issue-update'))
-        .then(() => {
-          this.$loading.fadeOut();
-        });
-    }
-
-    submitSelectedDate(isDropdown) {
-      return $.ajax({
-        type: 'PUT',
-        url: this.issueUpdateURL,
-        data: this.datePayload,
-        dataType: 'json',
-        beforeSend: () => {
-          const selectedDateValue = this.datePayload[this.abilityName].due_date;
-          const displayedDateStyle = this.displayedDate !== 'No due date' ? 'bold' : 'no-value';
-
-          this.$loading.fadeIn();
-
-          if (isDropdown) {
-            this.$dropdown.trigger('loading.gl.dropdown');
-            this.$selectbox.hide();
-          }
-
-          this.$value.css('display', '');
-          this.$valueContent.html(`<span class='${displayedDateStyle}'>${this.displayedDate}</span>`);
-          this.$sidebarValue.html(this.displayedDate);
-
-          return selectedDateValue.length ?
-            $('.js-remove-due-date-holder').removeClass('hidden') :
-            $('.js-remove-due-date-holder').addClass('hidden');
-
-        }
-      }).done((data) => {
-        if (isDropdown) {
-          this.$dropdown.trigger('loaded.gl.dropdown');
-          this.$dropdown.dropdown('toggle');
-        }
-        return this.$loading.fadeOut();
-      });
-    }
-  }
-
-  class DueDateSelectors {
-    constructor() {
-      this.initMilestoneDueDate();
-      this.initIssuableSelect();
-    }
-
-    initMilestoneDueDate() {
-      const $datePicker = $('.datepicker');
-
-      if ($datePicker.length) {
-        const $dueDate = $('#milestone_due_date');
-        $datePicker.datepicker({
-          dateFormat: 'yy-mm-dd',
-          onSelect: (dateText, inst) => {
-            $dueDate.val(dateText);
-          }
-        }).datepicker('setDate', $.datepicker.parseDate('yy-mm-dd', $dueDate.val()));
-      }
-      $('.js-clear-due-date').on('click', (e) => {
-        e.preventDefault();
-        $.datepicker._clearDate($datePicker);
-      });
-    }
-
-    initIssuableSelect() {
-      const $loading = $('.js-issuable-update .due_date').find('.block-loading').hide();
-
-      $('.js-due-date-select').each((i, dropdown) => {
-        const $dropdown = $(dropdown);
-        new DueDateSelect({
-          $dropdown,
-          $loading
-        });
-      });
-    }
-  }
-
-  global.DueDateSelectors = DueDateSelectors;
-
-})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/environments/components/environment.js b/app/assets/javascripts/environments/components/environment.js
new file mode 100644
index 00000000000..51aab8460f6
--- /dev/null
+++ b/app/assets/javascripts/environments/components/environment.js
@@ -0,0 +1,192 @@
+/* eslint-disable no-new */
+/* global Flash */
+import Vue from 'vue';
+import EnvironmentsService from '../services/environments_service';
+import EnvironmentTable from './environments_table';
+import EnvironmentsStore from '../stores/environments_store';
+import TablePaginationComponent from '../../vue_shared/components/table_pagination';
+import '../../lib/utils/common_utils';
+import eventHub from '../event_hub';
+
+export default Vue.component('environment-component', {
+
+  components: {
+    'environment-table': EnvironmentTable,
+    'table-pagination': TablePaginationComponent,
+  },
+
+  data() {
+    const environmentsData = document.querySelector('#environments-list-view').dataset;
+    const store = new EnvironmentsStore();
+
+    return {
+      store,
+      state: store.state,
+      visibility: 'available',
+      isLoading: false,
+      cssContainerClass: environmentsData.cssClass,
+      endpoint: environmentsData.environmentsDataEndpoint,
+      canCreateDeployment: environmentsData.canCreateDeployment,
+      canReadEnvironment: environmentsData.canReadEnvironment,
+      canCreateEnvironment: environmentsData.canCreateEnvironment,
+      projectEnvironmentsPath: environmentsData.projectEnvironmentsPath,
+      projectStoppedEnvironmentsPath: environmentsData.projectStoppedEnvironmentsPath,
+      newEnvironmentPath: environmentsData.newEnvironmentPath,
+      helpPagePath: environmentsData.helpPagePath,
+
+      // Pagination Properties,
+      paginationInformation: {},
+      pageNumber: 1,
+    };
+  },
+
+  computed: {
+    scope() {
+      return gl.utils.getParameterByName('scope');
+    },
+
+    canReadEnvironmentParsed() {
+      return gl.utils.convertPermissionToBoolean(this.canReadEnvironment);
+    },
+
+    canCreateDeploymentParsed() {
+      return gl.utils.convertPermissionToBoolean(this.canCreateDeployment);
+    },
+
+    canCreateEnvironmentParsed() {
+      return gl.utils.convertPermissionToBoolean(this.canCreateEnvironment);
+    },
+  },
+
+  /**
+   * Fetches all the environments and stores them.
+   * Toggles loading property.
+   */
+  created() {
+    this.service = new EnvironmentsService(this.endpoint);
+
+    this.fetchEnvironments();
+
+    eventHub.$on('refreshEnvironments', this.fetchEnvironments);
+  },
+
+  beforeDestroyed() {
+    eventHub.$off('refreshEnvironments');
+  },
+
+  methods: {
+    toggleRow(model) {
+      return this.store.toggleFolder(model.name);
+    },
+
+    /**
+     * Will change the page number and update the URL.
+     *
+     * @param  {Number} pageNumber desired page to go to.
+     * @return {String}
+     */
+    changePage(pageNumber) {
+      const param = gl.utils.setParamInURL('page', pageNumber);
+
+      gl.utils.visitUrl(param);
+      return param;
+    },
+
+    fetchEnvironments() {
+      const scope = gl.utils.getParameterByName('scope') || this.visibility;
+      const pageNumber = gl.utils.getParameterByName('page') || this.pageNumber;
+
+      this.isLoading = true;
+
+      return this.service.get(scope, pageNumber)
+        .then(resp => ({
+          headers: resp.headers,
+          body: resp.json(),
+        }))
+        .then((response) => {
+          this.store.storeAvailableCount(response.body.available_count);
+          this.store.storeStoppedCount(response.body.stopped_count);
+          this.store.storeEnvironments(response.body.environments);
+          this.store.setPagination(response.headers);
+        })
+        .then(() => {
+          this.isLoading = false;
+        })
+        .catch(() => {
+          this.isLoading = false;
+          new Flash('An error occurred while fetching the environments.');
+        });
+    },
+  },
+
+  template: `
+    <div :class="cssContainerClass">
+      <div class="top-area">
+        <ul v-if="!isLoading" class="nav-links">
+          <li v-bind:class="{ 'active': scope === null || scope === 'available' }">
+            <a :href="projectEnvironmentsPath">
+              Available
+              <span class="badge js-available-environments-count">
+                {{state.availableCounter}}
+              </span>
+            </a>
+          </li>
+          <li v-bind:class="{ 'active' : scope === 'stopped' }">
+            <a :href="projectStoppedEnvironmentsPath">
+              Stopped
+              <span class="badge js-stopped-environments-count">
+                {{state.stoppedCounter}}
+              </span>
+            </a>
+          </li>
+        </ul>
+        <div v-if="canCreateEnvironmentParsed && !isLoading" class="nav-controls">
+          <a :href="newEnvironmentPath" class="btn btn-create">
+            New environment
+          </a>
+        </div>
+      </div>
+
+      <div class="content-list environments-container">
+        <div class="environments-list-loading text-center" v-if="isLoading">
+          <i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
+        </div>
+
+        <div class="blank-state blank-state-no-icon"
+          v-if="!isLoading && state.environments.length === 0">
+          <h2 class="blank-state-title js-blank-state-title">
+            You don't have any environments right now.
+          </h2>
+          <p class="blank-state-text">
+            Environments are places where code gets deployed, such as staging or production.
+            <br />
+            <a :href="helpPagePath">
+              Read more about environments
+            </a>
+          </p>
+
+          <a v-if="canCreateEnvironmentParsed"
+            :href="newEnvironmentPath"
+            class="btn btn-create js-new-environment-button">
+            New Environment
+          </a>
+        </div>
+
+        <div class="table-holder"
+          v-if="!isLoading && state.environments.length > 0">
+
+          <environment-table
+            :environments="state.environments"
+            :can-create-deployment="canCreateDeploymentParsed"
+            :can-read-environment="canReadEnvironmentParsed"
+            :service="service"/>
+        </div>
+
+        <table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
+          :change="changePage"
+          :pageInfo="state.paginationInformation">
+        </table-pagination>
+      </div>
+    </div>
+  `,
+});
diff --git a/app/assets/javascripts/environments/components/environment_actions.js b/app/assets/javascripts/environments/components/environment_actions.js
new file mode 100644
index 00000000000..385085c03e2
--- /dev/null
+++ b/app/assets/javascripts/environments/components/environment_actions.js
@@ -0,0 +1,80 @@
+/* global Flash */
+/* eslint-disable no-new */
+
+import playIconSvg from 'icons/_icon_play.svg';
+import eventHub from '../event_hub';
+
+export default {
+  props: {
+    actions: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+
+    service: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      playIconSvg,
+      isLoading: false,
+    };
+  },
+
+  computed: {
+    title() {
+      return 'Deploy to...';
+    },
+  },
+
+  methods: {
+    onClickAction(endpoint) {
+      this.isLoading = true;
+
+      this.service.postAction(endpoint)
+      .then(() => {
+        this.isLoading = false;
+        eventHub.$emit('refreshEnvironments');
+      })
+      .catch(() => {
+        this.isLoading = false;
+        new Flash('An error occured while making the request.');
+      });
+    },
+  },
+
+  template: `
+    <div class="btn-group" role="group">
+      <button
+        class="dropdown btn btn-default dropdown-new js-dropdown-play-icon-container has-tooltip"
+        data-container="body"
+        data-toggle="dropdown"
+        :title="title"
+        :aria-label="title"
+        :disabled="isLoading">
+        <span>
+          <span v-html="playIconSvg"></span>
+          <i class="fa fa-caret-down" aria-hidden="true"></i>
+          <i v-if="isLoading" class="fa fa-spinner fa-spin" aria-hidden="true"></i>
+        </span>
+
+      <ul class="dropdown-menu dropdown-menu-align-right">
+        <li v-for="action in actions">
+          <button
+            @click="onClickAction(action.play_path)"
+            class="js-manual-action-link no-btn">
+            ${playIconSvg}
+            <span>
+              {{action.name}}
+            </span>
+          </button>
+        </li>
+      </ul>
+    </button>
+  </div>
+  `,
+};
diff --git a/app/assets/javascripts/environments/components/environment_external_url.js b/app/assets/javascripts/environments/components/environment_external_url.js
new file mode 100644
index 00000000000..d79b916c360
--- /dev/null
+++ b/app/assets/javascripts/environments/components/environment_external_url.js
@@ -0,0 +1,30 @@
+/**
+ * Renders the external url link in environments table.
+ */
+export default {
+  props: {
+    externalUrl: {
+      type: String,
+      default: '',
+    },
+  },
+
+  computed: {
+    title() {
+      return 'Open';
+    },
+  },
+
+  template: `
+    <a
+      class="btn external-url has-tooltip"
+      data-container="body"
+      :href="externalUrl"
+      target="_blank"
+      rel="noopener noreferrer nofollow"
+      :title="title"
+      :aria-label="title">
+      <i class="fa fa-external-link" aria-hidden="true"></i>
+    </a>
+  `,
+};
diff --git a/app/assets/javascripts/environments/components/environment_item.js b/app/assets/javascripts/environments/components/environment_item.js
new file mode 100644
index 00000000000..9c196562c6c
--- /dev/null
+++ b/app/assets/javascripts/environments/components/environment_item.js
@@ -0,0 +1,527 @@
+import Timeago from 'timeago.js';
+import '../../lib/utils/text_utility';
+import ActionsComponent from './environment_actions';
+import ExternalUrlComponent from './environment_external_url';
+import StopComponent from './environment_stop';
+import RollbackComponent from './environment_rollback';
+import TerminalButtonComponent from './environment_terminal_button';
+import MonitoringButtonComponent from './environment_monitoring';
+import CommitComponent from '../../vue_shared/components/commit';
+
+/**
+ * Envrionment Item Component
+ *
+ * Renders a table row for each environment.
+ */
+const timeagoInstance = new Timeago();
+
+export default {
+  components: {
+    'commit-component': CommitComponent,
+    'actions-component': ActionsComponent,
+    'external-url-component': ExternalUrlComponent,
+    'stop-component': StopComponent,
+    'rollback-component': RollbackComponent,
+    'terminal-button-component': TerminalButtonComponent,
+    'monitoring-button-component': MonitoringButtonComponent,
+  },
+
+  props: {
+    model: {
+      type: Object,
+      required: true,
+      default: () => ({}),
+    },
+
+    canCreateDeployment: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+
+    canReadEnvironment: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+
+    service: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  computed: {
+    /**
+     * Verifies if `last_deployment` key exists in the current Envrionment.
+     * This key is required to render most of the html - this method works has
+     * an helper.
+     *
+     * @returns {Boolean}
+     */
+    hasLastDeploymentKey() {
+      if (this.model &&
+        this.model.last_deployment &&
+        !this.$options.isObjectEmpty(this.model.last_deployment)) {
+        return true;
+      }
+      return false;
+    },
+
+    /**
+     * Verifies is the given environment has manual actions.
+     * Used to verify if we should render them or nor.
+     *
+     * @returns {Boolean|Undefined}
+     */
+    hasManualActions() {
+      return this.model &&
+        this.model.last_deployment &&
+        this.model.last_deployment.manual_actions &&
+        this.model.last_deployment.manual_actions.length > 0;
+    },
+
+    /**
+     * Returns the value of the `stop_action?` key provided in the response.
+     *
+     * @returns {Boolean}
+     */
+    hasStopAction() {
+      return this.model && this.model['stop_action?'];
+    },
+
+    /**
+     * Verifies if the `deployable` key is present in `last_deployment` key.
+     * Used to verify whether we should or not render the rollback partial.
+     *
+     * @returns {Boolean|Undefined}
+     */
+    canRetry() {
+      return this.model &&
+        this.hasLastDeploymentKey &&
+        this.model.last_deployment &&
+        this.model.last_deployment.deployable;
+    },
+
+    /**
+     * Verifies if the date to be shown is present.
+     *
+     * @returns {Boolean|Undefined}
+     */
+    canShowDate() {
+      return this.model &&
+        this.model.last_deployment &&
+        this.model.last_deployment.deployable &&
+        this.model.last_deployment.deployable !== undefined;
+    },
+
+    /**
+     * Human readable date.
+     *
+     * @returns {String}
+     */
+    createdDate() {
+      if (this.model &&
+        this.model.last_deployment &&
+        this.model.last_deployment.deployable &&
+        this.model.last_deployment.deployable.created_at) {
+        return timeagoInstance.format(this.model.last_deployment.deployable.created_at);
+      }
+      return '';
+    },
+
+    /**
+     * Returns the manual actions with the name parsed.
+     *
+     * @returns {Array.<Object>|Undefined}
+     */
+    manualActions() {
+      if (this.hasManualActions) {
+        return this.model.last_deployment.manual_actions.map((action) => {
+          const parsedAction = {
+            name: gl.text.humanize(action.name),
+            play_path: action.play_path,
+          };
+          return parsedAction;
+        });
+      }
+      return [];
+    },
+
+    /**
+     * Builds the string used in the user image alt attribute.
+     *
+     * @returns {String}
+     */
+    userImageAltDescription() {
+      if (this.model &&
+        this.model.last_deployment &&
+        this.model.last_deployment.user &&
+        this.model.last_deployment.user.username) {
+        return `${this.model.last_deployment.user.username}'s avatar'`;
+      }
+      return '';
+    },
+
+    /**
+     * If provided, returns the commit tag.
+     *
+     * @returns {String|Undefined}
+     */
+    commitTag() {
+      if (this.model &&
+        this.model.last_deployment &&
+        this.model.last_deployment.tag) {
+        return this.model.last_deployment.tag;
+      }
+      return undefined;
+    },
+
+    /**
+     * If provided, returns the commit ref.
+     *
+     * @returns {Object|Undefined}
+     */
+    commitRef() {
+      if (this.model &&
+        this.model.last_deployment &&
+        this.model.last_deployment.ref) {
+        return this.model.last_deployment.ref;
+      }
+      return undefined;
+    },
+
+    /**
+     * If provided, returns the commit url.
+     *
+     * @returns {String|Undefined}
+     */
+    commitUrl() {
+      if (this.model &&
+        this.model.last_deployment &&
+        this.model.last_deployment.commit &&
+        this.model.last_deployment.commit.commit_path) {
+        return this.model.last_deployment.commit.commit_path;
+      }
+      return undefined;
+    },
+
+    /**
+     * If provided, returns the commit short sha.
+     *
+     * @returns {String|Undefined}
+     */
+    commitShortSha() {
+      if (this.model &&
+        this.model.last_deployment &&
+        this.model.last_deployment.commit &&
+        this.model.last_deployment.commit.short_id) {
+        return this.model.last_deployment.commit.short_id;
+      }
+      return undefined;
+    },
+
+    /**
+     * If provided, returns the commit title.
+     *
+     * @returns {String|Undefined}
+     */
+    commitTitle() {
+      if (this.model &&
+        this.model.last_deployment &&
+        this.model.last_deployment.commit &&
+        this.model.last_deployment.commit.title) {
+        return this.model.last_deployment.commit.title;
+      }
+      return undefined;
+    },
+
+    /**
+     * If provided, returns the commit tag.
+     *
+     * @returns {Object|Undefined}
+     */
+    commitAuthor() {
+      if (this.model &&
+        this.model.last_deployment &&
+        this.model.last_deployment.commit &&
+        this.model.last_deployment.commit.author) {
+        return this.model.last_deployment.commit.author;
+      }
+
+      return undefined;
+    },
+
+    /**
+     * Verifies if the `retry_path` key is present and returns its value.
+     *
+     * @returns {String|Undefined}
+     */
+    retryUrl() {
+      if (this.model &&
+        this.model.last_deployment &&
+        this.model.last_deployment.deployable &&
+        this.model.last_deployment.deployable.retry_path) {
+        return this.model.last_deployment.deployable.retry_path;
+      }
+      return undefined;
+    },
+
+    /**
+     * Verifies if the `last?` key is present and returns its value.
+     *
+     * @returns {Boolean|Undefined}
+     */
+    isLastDeployment() {
+      return this.model && this.model.last_deployment &&
+        this.model.last_deployment['last?'];
+    },
+
+    /**
+     * Builds the name of the builds needed to display both the name and the id.
+     *
+     * @returns {String}
+     */
+    buildName() {
+      if (this.model &&
+        this.model.last_deployment &&
+        this.model.last_deployment.deployable) {
+        return `${this.model.last_deployment.deployable.name} #${this.model.last_deployment.deployable.id}`;
+      }
+      return '';
+    },
+
+    /**
+     * Builds the needed string to show the internal id.
+     *
+     * @returns {String}
+     */
+    deploymentInternalId() {
+      if (this.model &&
+        this.model.last_deployment &&
+        this.model.last_deployment.iid) {
+        return `#${this.model.last_deployment.iid}`;
+      }
+      return '';
+    },
+
+    /**
+     * Verifies if the user object is present under last_deployment object.
+     *
+     * @returns {Boolean}
+     */
+    deploymentHasUser() {
+      return this.model &&
+        !this.$options.isObjectEmpty(this.model.last_deployment) &&
+        !this.$options.isObjectEmpty(this.model.last_deployment.user);
+    },
+
+    /**
+     * Returns the user object nested with the last_deployment object.
+     * Used to render the template.
+     *
+     * @returns {Object}
+     */
+    deploymentUser() {
+      if (this.model &&
+        !this.$options.isObjectEmpty(this.model.last_deployment) &&
+        !this.$options.isObjectEmpty(this.model.last_deployment.user)) {
+        return this.model.last_deployment.user;
+      }
+      return {};
+    },
+
+    /**
+     * Verifies if the build name column should be rendered by verifing
+     * if all the information needed is present
+     * and if the environment is not a folder.
+     *
+     * @returns {Boolean}
+     */
+    shouldRenderBuildName() {
+      return !this.model.isFolder &&
+        !this.$options.isObjectEmpty(this.model.last_deployment) &&
+        !this.$options.isObjectEmpty(this.model.last_deployment.deployable);
+    },
+
+    /**
+     * Verifies the presence of all the keys needed to render the buil_path.
+     *
+     * @return {String}
+     */
+    buildPath() {
+      if (this.model &&
+        this.model.last_deployment &&
+        this.model.last_deployment.deployable &&
+        this.model.last_deployment.deployable.build_path) {
+        return this.model.last_deployment.deployable.build_path;
+      }
+
+      return '';
+    },
+
+    /**
+     * Verifies the presence of all the keys needed to render the external_url.
+     *
+     * @return {String}
+     */
+    externalURL() {
+      if (this.model && this.model.external_url) {
+        return this.model.external_url;
+      }
+
+      return '';
+    },
+
+    /**
+     * Verifies if deplyment internal ID should be rendered by verifing
+     * if all the information needed is present
+     * and if the environment is not a folder.
+     *
+     * @returns {Boolean}
+     */
+    shouldRenderDeploymentID() {
+      return !this.model.isFolder &&
+        !this.$options.isObjectEmpty(this.model.last_deployment) &&
+        this.model.last_deployment.iid !== undefined;
+    },
+
+    environmentPath() {
+      if (this.model && this.model.environment_path) {
+        return this.model.environment_path;
+      }
+
+      return '';
+    },
+
+    monitoringUrl() {
+      if (this.model && this.model.metrics_path) {
+        return this.model.metrics_path;
+      }
+
+      return '';
+    },
+
+    /**
+     * Constructs folder URL based on the current location and the folder id.
+     *
+     * @return {String}
+     */
+    folderUrl() {
+      return `${window.location.pathname}/folders/${this.model.folderName}`;
+    },
+
+  },
+
+  /**
+   * Helper to verify if certain given object are empty.
+   * Should be replaced by lodash _.isEmpty - https://lodash.com/docs/4.17.2#isEmpty
+   * @param  {Object} object
+   * @returns {Bollean}
+   */
+  isObjectEmpty(object) {
+    for (const key in object) { // eslint-disable-line
+      if (hasOwnProperty.call(object, key)) {
+        return false;
+      }
+    }
+    return true;
+  },
+
+  template: `
+    <tr>
+      <td>
+        <a v-if="!model.isFolder"
+          class="environment-name"
+          :href="environmentPath">
+          {{model.name}}
+        </a>
+        <a v-else class="folder-name" :href="folderUrl">
+          <span class="folder-icon">
+            <i class="fa fa-folder" aria-hidden="true"></i>
+          </span>
+
+          <span>
+            {{model.folderName}}
+          </span>
+
+          <span class="badge">
+            {{model.size}}
+          </span>
+        </a>
+      </td>
+
+      <td class="deployment-column">
+        <span v-if="shouldRenderDeploymentID">
+          {{deploymentInternalId}}
+        </span>
+
+        <span v-if="!model.isFolder && deploymentHasUser">
+          by
+          <a :href="deploymentUser.web_url" class="js-deploy-user-container">
+            <img class="avatar has-tooltip s20"
+              :src="deploymentUser.avatar_url"
+              :alt="userImageAltDescription"
+              :title="deploymentUser.username" />
+          </a>
+        </span>
+      </td>
+
+      <td class="environments-build-cell">
+        <a v-if="shouldRenderBuildName"
+          class="build-link"
+          :href="buildPath">
+          {{buildName}}
+        </a>
+      </td>
+
+      <td>
+        <div v-if="!model.isFolder && hasLastDeploymentKey" class="js-commit-component">
+          <commit-component
+            :tag="commitTag"
+            :commit-ref="commitRef"
+            :commit-url="commitUrl"
+            :short-sha="commitShortSha"
+            :title="commitTitle"
+            :author="commitAuthor"/>
+        </div>
+        <p v-if="!model.isFolder && !hasLastDeploymentKey" class="commit-title">
+          No deployments yet
+        </p>
+      </td>
+
+      <td>
+        <span v-if="!model.isFolder && canShowDate"
+          class="environment-created-date-timeago">
+          {{createdDate}}
+        </span>
+      </td>
+
+      <td class="environments-actions">
+        <div v-if="!model.isFolder" class="btn-group pull-right" role="group">
+          <actions-component v-if="hasManualActions && canCreateDeployment"
+            :service="service"
+            :actions="manualActions"/>
+
+          <external-url-component v-if="externalURL && canReadEnvironment"
+            :external-url="externalURL"/>
+
+          <monitoring-button-component v-if="monitoringUrl && canReadEnvironment"
+            :monitoring-url="monitoringUrl"/>
+
+          <terminal-button-component v-if="model && model.terminal_path"
+            :terminal-path="model.terminal_path"/>
+
+          <stop-component v-if="hasStopAction && canCreateDeployment"
+            :stop-url="model.stop_path"
+            :service="service"/>
+
+          <rollback-component v-if="canRetry && canCreateDeployment"
+            :is-last-deployment="isLastDeployment"
+            :retry-url="retryUrl"
+            :service="service"/>
+        </div>
+      </td>
+    </tr>
+  `,
+};
diff --git a/app/assets/javascripts/environments/components/environment_monitoring.js b/app/assets/javascripts/environments/components/environment_monitoring.js
new file mode 100644
index 00000000000..064e2fc7434
--- /dev/null
+++ b/app/assets/javascripts/environments/components/environment_monitoring.js
@@ -0,0 +1,31 @@
+/**
+ * Renders the Monitoring (Metrics) link in environments table.
+ */
+export default {
+  props: {
+    monitoringUrl: {
+      type: String,
+      default: '',
+      required: true,
+    },
+  },
+
+  computed: {
+    title() {
+      return 'Monitoring';
+    },
+  },
+
+  template: `
+    <a
+      class="btn monitoring-url has-tooltip"
+      data-container="body"
+      :href="monitoringUrl"
+      target="_blank"
+      rel="noopener noreferrer nofollow"
+      :title="title"
+      :aria-label="title">
+      <i class="fa fa-area-chart" aria-hidden="true"></i>
+    </a>
+  `,
+};
diff --git a/app/assets/javascripts/environments/components/environment_rollback.js b/app/assets/javascripts/environments/components/environment_rollback.js
new file mode 100644
index 00000000000..baa15d9e5b5
--- /dev/null
+++ b/app/assets/javascripts/environments/components/environment_rollback.js
@@ -0,0 +1,67 @@
+/* global Flash */
+/* eslint-disable no-new */
+/**
+ * Renders Rollback or Re deploy button in environments table depending
+ * of the provided property `isLastDeployment`.
+ *
+ * Makes a post request when the button is clicked.
+ */
+import eventHub from '../event_hub';
+
+export default {
+  props: {
+    retryUrl: {
+      type: String,
+      default: '',
+    },
+
+    isLastDeployment: {
+      type: Boolean,
+      default: true,
+    },
+
+    service: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      isLoading: false,
+    };
+  },
+
+  methods: {
+    onClick() {
+      this.isLoading = true;
+
+      this.service.postAction(this.retryUrl)
+      .then(() => {
+        this.isLoading = false;
+        eventHub.$emit('refreshEnvironments');
+      })
+      .catch(() => {
+        this.isLoading = false;
+        new Flash('An error occured while making the request.');
+      });
+    },
+  },
+
+  template: `
+    <button type="button"
+      class="btn"
+      @click="onClick"
+      :disabled="isLoading">
+
+      <span v-if="isLastDeployment">
+        Re-deploy
+      </span>
+      <span v-else>
+        Rollback
+      </span>
+
+      <i v-if="isLoading" class="fa fa-spinner fa-spin" aria-hidden="true"></i>
+    </button>
+  `,
+};
diff --git a/app/assets/javascripts/environments/components/environment_stop.js b/app/assets/javascripts/environments/components/environment_stop.js
new file mode 100644
index 00000000000..47102692024
--- /dev/null
+++ b/app/assets/javascripts/environments/components/environment_stop.js
@@ -0,0 +1,64 @@
+/* global Flash */
+/* eslint-disable no-new, no-alert */
+/**
+ * Renders the stop "button" that allows stop an environment.
+ * Used in environments table.
+ */
+import eventHub from '../event_hub';
+
+export default {
+  props: {
+    stopUrl: {
+      type: String,
+      default: '',
+    },
+
+    service: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      isLoading: false,
+    };
+  },
+
+  computed: {
+    title() {
+      return 'Stop';
+    },
+  },
+
+  methods: {
+    onClick() {
+      if (confirm('Are you sure you want to stop this environment?')) {
+        this.isLoading = true;
+
+        this.service.postAction(this.retryUrl)
+        .then(() => {
+          this.isLoading = false;
+          eventHub.$emit('refreshEnvironments');
+        })
+        .catch(() => {
+          this.isLoading = false;
+          new Flash('An error occured while making the request.', 'alert');
+        });
+      }
+    },
+  },
+
+  template: `
+    <button type="button"
+      class="btn stop-env-link has-tooltip"
+      data-container="body"
+      @click="onClick"
+      :disabled="isLoading"
+      :title="title"
+      :aria-label="title">
+      <i class="fa fa-stop stop-env-icon" aria-hidden="true"></i>
+      <i v-if="isLoading" class="fa fa-spinner fa-spin" aria-hidden="true"></i>
+    </button>
+  `,
+};
diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.js b/app/assets/javascripts/environments/components/environment_terminal_button.js
new file mode 100644
index 00000000000..092a50a0d6f
--- /dev/null
+++ b/app/assets/javascripts/environments/components/environment_terminal_button.js
@@ -0,0 +1,37 @@
+/**
+ * Renders a terminal button to open a web terminal.
+ * Used in environments table.
+ */
+import terminalIconSvg from 'icons/_icon_terminal.svg';
+
+export default {
+  props: {
+    terminalPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+
+  data() {
+    return {
+      terminalIconSvg,
+    };
+  },
+
+  computed: {
+    title() {
+      return 'Terminal';
+    },
+  },
+
+  template: `
+    <a class="btn terminal-button has-tooltip"
+      data-container="body"
+      :title="title"
+      :aria-label="title"
+      :href="terminalPath">
+      ${terminalIconSvg}
+    </a>
+  `,
+};
diff --git a/app/assets/javascripts/environments/components/environments_table.js b/app/assets/javascripts/environments/components/environments_table.js
new file mode 100644
index 00000000000..338dff40bc9
--- /dev/null
+++ b/app/assets/javascripts/environments/components/environments_table.js
@@ -0,0 +1,60 @@
+/**
+ * Render environments table.
+ */
+import EnvironmentTableRowComponent from './environment_item';
+
+export default {
+  components: {
+    'environment-item': EnvironmentTableRowComponent,
+  },
+
+  props: {
+    environments: {
+      type: Array,
+      required: true,
+      default: () => ([]),
+    },
+
+    canReadEnvironment: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+
+    canCreateDeployment: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+
+    service: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  template: `
+    <table class="table ci-table">
+      <thead>
+        <tr>
+          <th class="environments-name">Environment</th>
+          <th class="environments-deploy">Last deployment</th>
+          <th class="environments-build">Job</th>
+          <th class="environments-commit">Commit</th>
+          <th class="environments-date">Updated</th>
+          <th class="environments-actions"></th>
+        </tr>
+      </thead>
+      <tbody>
+        <template v-for="model in environments"
+          v-bind:model="model">
+          <tr is="environment-item"
+            :model="model"
+            :can-create-deployment="canCreateDeployment"
+            :can-read-environment="canReadEnvironment"
+            :service="service"></tr>
+        </template>
+      </tbody>
+    </table>
+  `,
+};
diff --git a/app/assets/javascripts/environments/environments_bundle.js b/app/assets/javascripts/environments/environments_bundle.js
new file mode 100644
index 00000000000..8d963b335cf
--- /dev/null
+++ b/app/assets/javascripts/environments/environments_bundle.js
@@ -0,0 +1,13 @@
+import EnvironmentsComponent from './components/environment';
+
+$(() => {
+  window.gl = window.gl || {};
+
+  if (gl.EnvironmentsListApp) {
+    gl.EnvironmentsListApp.$destroy(true);
+  }
+
+  gl.EnvironmentsListApp = new EnvironmentsComponent({
+    el: document.querySelector('#environments-list-view'),
+  });
+});
diff --git a/app/assets/javascripts/environments/event_hub.js b/app/assets/javascripts/environments/event_hub.js
new file mode 100644
index 00000000000..0948c2e5352
--- /dev/null
+++ b/app/assets/javascripts/environments/event_hub.js
@@ -0,0 +1,3 @@
+import Vue from 'vue';
+
+export default new Vue();
diff --git a/app/assets/javascripts/environments/folder/environments_folder_bundle.js b/app/assets/javascripts/environments/folder/environments_folder_bundle.js
new file mode 100644
index 00000000000..f939eccf246
--- /dev/null
+++ b/app/assets/javascripts/environments/folder/environments_folder_bundle.js
@@ -0,0 +1,13 @@
+import EnvironmentsFolderComponent from './environments_folder_view';
+
+$(() => {
+  window.gl = window.gl || {};
+
+  if (gl.EnvironmentsListFolderApp) {
+    gl.EnvironmentsListFolderApp.$destroy(true);
+  }
+
+  gl.EnvironmentsListFolderApp = new EnvironmentsFolderComponent({
+    el: document.querySelector('#environments-folder-list-view'),
+  });
+});
diff --git a/app/assets/javascripts/environments/folder/environments_folder_view.js b/app/assets/javascripts/environments/folder/environments_folder_view.js
new file mode 100644
index 00000000000..8abbcf0c227
--- /dev/null
+++ b/app/assets/javascripts/environments/folder/environments_folder_view.js
@@ -0,0 +1,178 @@
+/* eslint-disable no-new */
+/* global Flash */
+import Vue from 'vue';
+import EnvironmentsService from '../services/environments_service';
+import EnvironmentTable from '../components/environments_table';
+import EnvironmentsStore from '../stores/environments_store';
+import TablePaginationComponent from '../../vue_shared/components/table_pagination';
+import '../../lib/utils/common_utils';
+import '../../vue_shared/vue_resource_interceptor';
+
+export default Vue.component('environment-folder-view', {
+  components: {
+    'environment-table': EnvironmentTable,
+    'table-pagination': TablePaginationComponent,
+  },
+
+  data() {
+    const environmentsData = document.querySelector('#environments-folder-list-view').dataset;
+    const store = new EnvironmentsStore();
+    const pathname = window.location.pathname;
+    const endpoint = `${pathname}.json`;
+    const folderName = pathname.substr(pathname.lastIndexOf('/') + 1);
+
+    return {
+      store,
+      folderName,
+      endpoint,
+      state: store.state,
+      visibility: 'available',
+      isLoading: false,
+      cssContainerClass: environmentsData.cssClass,
+      canCreateDeployment: environmentsData.canCreateDeployment,
+      canReadEnvironment: environmentsData.canReadEnvironment,
+
+      // svgs
+      commitIconSvg: environmentsData.commitIconSvg,
+      playIconSvg: environmentsData.playIconSvg,
+      terminalIconSvg: environmentsData.terminalIconSvg,
+
+      // Pagination Properties,
+      paginationInformation: {},
+      pageNumber: 1,
+    };
+  },
+
+  computed: {
+    scope() {
+      return gl.utils.getParameterByName('scope');
+    },
+
+    canReadEnvironmentParsed() {
+      return gl.utils.convertPermissionToBoolean(this.canReadEnvironment);
+    },
+
+    canCreateDeploymentParsed() {
+      return gl.utils.convertPermissionToBoolean(this.canCreateDeployment);
+    },
+
+    /**
+     * URL to link in the stopped tab.
+     *
+     * @return {String}
+     */
+    stoppedPath() {
+      return `${window.location.pathname}?scope=stopped`;
+    },
+
+    /**
+     * URL to link in the available tab.
+     *
+     * @return {String}
+     */
+    availablePath() {
+      return window.location.pathname;
+    },
+  },
+
+  /**
+   * Fetches all the environments and stores them.
+   * Toggles loading property.
+   */
+  created() {
+    const scope = gl.utils.getParameterByName('scope') || this.visibility;
+    const pageNumber = gl.utils.getParameterByName('page') || this.pageNumber;
+
+    const endpoint = `${this.endpoint}?scope=${scope}&page=${pageNumber}`;
+
+    this.service = new EnvironmentsService(endpoint);
+
+    this.isLoading = true;
+
+    return this.service.get()
+      .then(resp => ({
+        headers: resp.headers,
+        body: resp.json(),
+      }))
+      .then((response) => {
+        this.store.storeAvailableCount(response.body.available_count);
+        this.store.storeStoppedCount(response.body.stopped_count);
+        this.store.storeEnvironments(response.body.environments);
+        this.store.setPagination(response.headers);
+      })
+      .then(() => {
+        this.isLoading = false;
+      })
+      .catch(() => {
+        this.isLoading = false;
+        new Flash('An error occurred while fetching the environments.', 'alert');
+      });
+  },
+
+  methods: {
+    /**
+     * Will change the page number and update the URL.
+     *
+     * @param  {Number} pageNumber desired page to go to.
+     */
+    changePage(pageNumber) {
+      const param = gl.utils.setParamInURL('page', pageNumber);
+
+      gl.utils.visitUrl(param);
+      return param;
+    },
+  },
+
+  template: `
+    <div :class="cssContainerClass">
+      <div class="top-area" v-if="!isLoading">
+
+        <h4 class="js-folder-name environments-folder-name">
+          Environments / <b>{{folderName}}</b>
+        </h4>
+
+        <ul class="nav-links">
+          <li v-bind:class="{ 'active': scope === null || scope === 'available' }">
+            <a :href="availablePath" class="js-available-environments-folder-tab">
+              Available
+              <span class="badge js-available-environments-count">
+                {{state.availableCounter}}
+              </span>
+            </a>
+          </li>
+          <li v-bind:class="{ 'active' : scope === 'stopped' }">
+            <a :href="stoppedPath" class="js-stopped-environments-folder-tab">
+              Stopped
+              <span class="badge js-stopped-environments-count">
+                {{state.stoppedCounter}}
+              </span>
+            </a>
+          </li>
+        </ul>
+      </div>
+
+      <div class="environments-container">
+        <div class="environments-list-loading text-center" v-if="isLoading">
+          <i class="fa fa-spinner fa-spin"></i>
+        </div>
+
+        <div class="table-holder"
+          v-if="!isLoading && state.environments.length > 0">
+
+          <environment-table
+            :environments="state.environments"
+            :can-create-deployment="canCreateDeploymentParsed"
+            :can-read-environment="canReadEnvironmentParsed"
+            :play-icon-svg="playIconSvg"
+            :terminal-icon-svg="terminalIconSvg"
+            :commit-icon-svg="commitIconSvg"
+            :service="service"/>
+
+          <table-pagination v-if="state.paginationInformation && state.paginationInformation.totalPages > 1"
+            :change="changePage"
+            :pageInfo="state.paginationInformation"/>
+        </div>
+      </div>
+    </div>
+  `,
+});
diff --git a/app/assets/javascripts/environments/services/environments_service.js b/app/assets/javascripts/environments/services/environments_service.js
new file mode 100644
index 00000000000..07040bf0d73
--- /dev/null
+++ b/app/assets/javascripts/environments/services/environments_service.js
@@ -0,0 +1,19 @@
+/* eslint-disable class-methods-use-this */
+import Vue from 'vue';
+import VueResource from 'vue-resource';
+
+Vue.use(VueResource);
+
+export default class EnvironmentsService {
+  constructor(endpoint) {
+    this.environments = Vue.resource(endpoint);
+  }
+
+  get(scope, page) {
+    return this.environments.get({ scope, page });
+  }
+
+  postAction(endpoint) {
+    return Vue.http.post(endpoint, {}, { emulateJSON: true });
+  }
+}
diff --git a/app/assets/javascripts/environments/stores/environments_store.js b/app/assets/javascripts/environments/stores/environments_store.js
new file mode 100644
index 00000000000..3c3084f3b78
--- /dev/null
+++ b/app/assets/javascripts/environments/stores/environments_store.js
@@ -0,0 +1,88 @@
+import '~/lib/utils/common_utils';
+/**
+ * Environments Store.
+ *
+ * Stores received environments, count of stopped environments and count of
+ * available environments.
+ */
+export default class EnvironmentsStore {
+  constructor() {
+    this.state = {};
+    this.state.environments = [];
+    this.state.stoppedCounter = 0;
+    this.state.availableCounter = 0;
+    this.state.paginationInformation = {};
+
+    return this;
+  }
+
+  /**
+   *
+   * Stores the received environments.
+   *
+   * In the main environments endpoint, each environment has the following schema
+   * { name: String, size: Number, latest: Object }
+   * In the endpoint to retrieve environments from each folder, the environment does
+   * not have the `latest` key and the data is all in the root level.
+   * To avoid doing this check in the view, we store both cases the same by extracting
+   * what is inside the `latest` key.
+   *
+   * If the `size` is bigger than 1, it means it should be rendered as a folder.
+   * In those cases we add `isFolder` key in order to render it properly.
+   *
+   * @param  {Array} environments
+   * @returns {Array}
+   */
+  storeEnvironments(environments = []) {
+    const filteredEnvironments = environments.map((env) => {
+      let filtered = {};
+
+      if (env.size > 1) {
+        filtered = Object.assign({}, env, { isFolder: true, folderName: env.name });
+      }
+
+      if (env.latest) {
+        filtered = Object.assign(filtered, env, env.latest);
+        delete filtered.latest;
+      } else {
+        filtered = Object.assign(filtered, env);
+      }
+
+      return filtered;
+    });
+
+    this.state.environments = filteredEnvironments;
+
+    return filteredEnvironments;
+  }
+
+  setPagination(pagination = {}) {
+    const normalizedHeaders = gl.utils.normalizeHeaders(pagination);
+    const paginationInformation = gl.utils.parseIntPagination(normalizedHeaders);
+
+    this.state.paginationInformation = paginationInformation;
+    return paginationInformation;
+  }
+
+  /**
+   * Stores the number of available environments.
+   *
+   * @param  {Number} count = 0
+   * @return {Number}
+   */
+  storeAvailableCount(count = 0) {
+    this.state.availableCounter = count;
+    return count;
+  }
+
+  /**
+   * Stores the number of closed environments.
+   *
+   * @param  {Number} count = 0
+   * @return {Number}
+   */
+  storeStoppedCount(count = 0) {
+    this.state.stoppedCounter = count;
+    return count;
+  }
+}
diff --git a/app/assets/javascripts/extensions/array.js b/app/assets/javascripts/extensions/array.js
index 4c9e219aa43..027222f804d 100644
--- a/app/assets/javascripts/extensions/array.js
+++ b/app/assets/javascripts/extensions/array.js
@@ -1,8 +1,11 @@
-/* eslint-disable */
-Array.prototype.first = function() {
+// TODO: remove this
+
+// eslint-disable-next-line no-extend-native
+Array.prototype.first = function first() {
   return this[0];
-}
+};
 
-Array.prototype.last = function() {
-  return this[this.length-1];
-}
+// eslint-disable-next-line no-extend-native
+Array.prototype.last = function last() {
+  return this[this.length - 1];
+};
diff --git a/app/assets/javascripts/extensions/element.js.es6 b/app/assets/javascripts/extensions/element.js.es6
deleted file mode 100644
index afb2f0d6956..00000000000
--- a/app/assets/javascripts/extensions/element.js.es6
+++ /dev/null
@@ -1,9 +0,0 @@
-/* global Element */
-/* eslint-disable consistent-return, max-len */
-
-Element.prototype.matches = Element.prototype.matches || Element.prototype.msMatchesSelector;
-
-Element.prototype.closest = function closest(selector, selectedElement = this) {
-  if (!selectedElement) return;
-  return selectedElement.matches(selector) ? selectedElement : Element.prototype.closest(selector, selectedElement.parentElement);
-};
diff --git a/app/assets/javascripts/extensions/jquery.js b/app/assets/javascripts/extensions/jquery.js
deleted file mode 100644
index 623a80b7053..00000000000
--- a/app/assets/javascripts/extensions/jquery.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/* eslint-disable */
-// Disable an element and add the 'disabled' Bootstrap class
-(function() {
-  $.fn.extend({
-    disable: function() {
-      return $(this).attr('disabled', 'disabled').addClass('disabled');
-    }
-  });
-
-  // Enable an element and remove the 'disabled' Bootstrap class
-  $.fn.extend({
-    enable: function() {
-      return $(this).removeAttr('disabled').removeClass('disabled');
-    }
-  });
-
-}).call(this);
diff --git a/app/assets/javascripts/files_comment_button.js b/app/assets/javascripts/files_comment_button.js
index 732136f1f2c..3f041172ff3 100644
--- a/app/assets/javascripts/files_comment_button.js
+++ b/app/assets/javascripts/files_comment_button.js
@@ -1,147 +1,141 @@
-/* eslint-disable */
-(function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, max-len, one-var, one-var-declaration-per-line, quotes, prefer-template, newline-per-chained-call, comma-dangle, new-cap, no-else-return, consistent-return */
+/* global FilesCommentButton */
+/* global notes */
 
-  this.FilesCommentButton = (function() {
-    var COMMENT_BUTTON_CLASS, COMMENT_BUTTON_TEMPLATE, DEBOUNCE_TIMEOUT_DURATION, EMPTY_CELL_CLASS, LINE_COLUMN_CLASSES, LINE_CONTENT_CLASS, LINE_HOLDER_CLASS, LINE_NUMBER_CLASS, OLD_LINE_CLASS, TEXT_FILE_SELECTOR, UNFOLDABLE_LINE_CLASS;
+let $commentButtonTemplate;
+var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
 
-    COMMENT_BUTTON_CLASS = '.add-diff-note';
+window.FilesCommentButton = (function() {
+  var COMMENT_BUTTON_CLASS, EMPTY_CELL_CLASS, LINE_COLUMN_CLASSES, LINE_CONTENT_CLASS, LINE_HOLDER_CLASS, LINE_NUMBER_CLASS, OLD_LINE_CLASS, TEXT_FILE_SELECTOR, UNFOLDABLE_LINE_CLASS;
 
-    COMMENT_BUTTON_TEMPLATE = _.template('<button name="button" type="submit" class="btn <%- COMMENT_BUTTON_CLASS %> js-add-diff-note-button" title="Add a comment to this line"><i class="fa fa-comment-o"></i></button>');
+  COMMENT_BUTTON_CLASS = '.add-diff-note';
 
-    LINE_HOLDER_CLASS = '.line_holder';
+  LINE_HOLDER_CLASS = '.line_holder';
 
-    LINE_NUMBER_CLASS = 'diff-line-num';
+  LINE_NUMBER_CLASS = 'diff-line-num';
 
-    LINE_CONTENT_CLASS = 'line_content';
+  LINE_CONTENT_CLASS = 'line_content';
 
-    UNFOLDABLE_LINE_CLASS = 'js-unfold';
+  UNFOLDABLE_LINE_CLASS = 'js-unfold';
 
-    EMPTY_CELL_CLASS = 'empty-cell';
+  EMPTY_CELL_CLASS = 'empty-cell';
 
-    OLD_LINE_CLASS = 'old_line';
+  OLD_LINE_CLASS = 'old_line';
 
-    LINE_COLUMN_CLASSES = "." + LINE_NUMBER_CLASS + ", .line_content";
+  LINE_COLUMN_CLASSES = "." + LINE_NUMBER_CLASS + ", .line_content";
 
-    TEXT_FILE_SELECTOR = '.text-file';
+  TEXT_FILE_SELECTOR = '.text-file';
 
-    DEBOUNCE_TIMEOUT_DURATION = 100;
+  function FilesCommentButton(filesContainerElement) {
+    this.render = bind(this.render, this);
+    this.hideButton = bind(this.hideButton, this);
+    this.isParallelView = notes.isParallelView();
+    filesContainerElement.on('mouseover', LINE_COLUMN_CLASSES, this.render)
+      .on('mouseleave', LINE_COLUMN_CLASSES, this.hideButton);
+  }
 
-    function FilesCommentButton(filesContainerElement) {
-      var debounce;
-      this.filesContainerElement = filesContainerElement;
-      this.destroy = bind(this.destroy, this);
-      this.render = bind(this.render, this);
-      this.VIEW_TYPE = $('input#view[type=hidden]').val();
-      debounce = _.debounce(this.render, DEBOUNCE_TIMEOUT_DURATION);
-      $(this.filesContainerElement).off('mouseover', LINE_COLUMN_CLASSES).off('mouseleave', LINE_COLUMN_CLASSES).on('mouseover', LINE_COLUMN_CLASSES, debounce).on('mouseleave', LINE_COLUMN_CLASSES, this.destroy);
-    }
+  FilesCommentButton.prototype.render = function(e) {
+    var $currentTarget, buttonParentElement, lineContentElement, textFileElement, $button;
+    $currentTarget = $(e.currentTarget);
 
-    FilesCommentButton.prototype.render = function(e) {
-      var $currentTarget, buttonParentElement, lineContentElement, textFileElement;
-      $currentTarget = $(e.currentTarget);
-
-      buttonParentElement = this.getButtonParent($currentTarget);
-      if (!this.validateButtonParent(buttonParentElement)) return;
-      lineContentElement = this.getLineContent($currentTarget);
-      if (!this.validateLineContent(lineContentElement)) return;
-
-      textFileElement = this.getTextFileElement($currentTarget);
-      buttonParentElement.append(this.buildButton({
-        noteableType: textFileElement.attr('data-noteable-type'),
-        noteableID: textFileElement.attr('data-noteable-id'),
-        commitID: textFileElement.attr('data-commit-id'),
-        noteType: lineContentElement.attr('data-note-type'),
-        position: lineContentElement.attr('data-position'),
-        lineType: lineContentElement.attr('data-line-type'),
-        discussionID: lineContentElement.attr('data-discussion-id'),
-        lineCode: lineContentElement.attr('data-line-code')
-      }));
-    };
-
-    FilesCommentButton.prototype.destroy = function(e) {
-      if (this.isMovingToSameType(e)) {
-        return;
-      }
-      $(COMMENT_BUTTON_CLASS, this.getButtonParent($(e.currentTarget))).remove();
-    };
-
-    FilesCommentButton.prototype.buildButton = function(buttonAttributes) {
-      var initializedButtonTemplate;
-      initializedButtonTemplate = COMMENT_BUTTON_TEMPLATE({
-        COMMENT_BUTTON_CLASS: COMMENT_BUTTON_CLASS.substr(1)
-      });
-      return $(initializedButtonTemplate).attr({
-        'data-noteable-type': buttonAttributes.noteableType,
-        'data-noteable-id': buttonAttributes.noteableID,
-        'data-commit-id': buttonAttributes.commitID,
-        'data-note-type': buttonAttributes.noteType,
-        'data-line-code': buttonAttributes.lineCode,
-        'data-position': buttonAttributes.position,
-        'data-discussion-id': buttonAttributes.discussionID,
-        'data-line-type': buttonAttributes.lineType
-      });
-    };
-
-    FilesCommentButton.prototype.getTextFileElement = function(hoveredElement) {
-      return $(hoveredElement.closest(TEXT_FILE_SELECTOR));
-    };
-
-    FilesCommentButton.prototype.getLineContent = function(hoveredElement) {
-      if (hoveredElement.hasClass(LINE_CONTENT_CLASS)) {
-        return hoveredElement;
-      }
-      if (this.VIEW_TYPE === 'inline') {
-        return $(hoveredElement).closest(LINE_HOLDER_CLASS).find("." + LINE_CONTENT_CLASS);
-      } else {
-        return $(hoveredElement).next("." + LINE_CONTENT_CLASS);
-      }
-    };
-
-    FilesCommentButton.prototype.getButtonParent = function(hoveredElement) {
-      if (this.VIEW_TYPE === 'inline') {
-        if (hoveredElement.hasClass(OLD_LINE_CLASS)) {
-          return hoveredElement;
-        }
-        return hoveredElement.parent().find("." + OLD_LINE_CLASS);
-      } else {
-        if (hoveredElement.hasClass(LINE_NUMBER_CLASS)) {
-          return hoveredElement;
-        }
-        return $(hoveredElement).prev("." + LINE_NUMBER_CLASS);
-      }
-    };
+    if ($currentTarget.hasClass('js-no-comment-btn')) return;
 
-    FilesCommentButton.prototype.isMovingToSameType = function(e) {
-      var newButtonParent;
-      newButtonParent = this.getButtonParent($(e.toElement));
-      if (!newButtonParent) {
-        return false;
-      }
-      return newButtonParent.is(this.getButtonParent($(e.currentTarget)));
-    };
+    lineContentElement = this.getLineContent($currentTarget);
+    buttonParentElement = this.getButtonParent($currentTarget);
 
-    FilesCommentButton.prototype.validateButtonParent = function(buttonParentElement) {
-      return !buttonParentElement.hasClass(EMPTY_CELL_CLASS) && !buttonParentElement.hasClass(UNFOLDABLE_LINE_CLASS) && $(COMMENT_BUTTON_CLASS, buttonParentElement).length === 0;
-    };
+    if (!this.validateButtonParent(buttonParentElement) || !this.validateLineContent(lineContentElement)) return;
 
-    FilesCommentButton.prototype.validateLineContent = function(lineContentElement) {
-      return lineContentElement.attr('data-discussion-id') && lineContentElement.attr('data-discussion-id') !== '';
-    };
+    $button = $(COMMENT_BUTTON_CLASS, buttonParentElement);
+    buttonParentElement.addClass('is-over')
+      .nextUntil(`.${LINE_CONTENT_CLASS}`).addClass('is-over');
 
-    return FilesCommentButton;
+    if ($button.length) {
+      return;
+    }
 
-  })();
+    textFileElement = this.getTextFileElement($currentTarget);
+    buttonParentElement.append(this.buildButton({
+      noteableType: textFileElement.attr('data-noteable-type'),
+      noteableID: textFileElement.attr('data-noteable-id'),
+      commitID: textFileElement.attr('data-commit-id'),
+      noteType: lineContentElement.attr('data-note-type'),
+      position: lineContentElement.attr('data-position'),
+      lineType: lineContentElement.attr('data-line-type'),
+      discussionID: lineContentElement.attr('data-discussion-id'),
+      lineCode: lineContentElement.attr('data-line-code')
+    }));
+  };
 
-  $.fn.filesCommentButton = function() {
-    if (!(this && (this.parent().data('can-create-note') != null))) {
-      return;
+  FilesCommentButton.prototype.hideButton = function(e) {
+    var $currentTarget = $(e.currentTarget);
+    var buttonParentElement = this.getButtonParent($currentTarget);
+
+    buttonParentElement.removeClass('is-over')
+      .nextUntil(`.${LINE_CONTENT_CLASS}`).removeClass('is-over');
+  };
+
+  FilesCommentButton.prototype.buildButton = function(buttonAttributes) {
+    return $commentButtonTemplate.clone().attr({
+      'data-noteable-type': buttonAttributes.noteableType,
+      'data-noteable-id': buttonAttributes.noteableID,
+      'data-commit-id': buttonAttributes.commitID,
+      'data-note-type': buttonAttributes.noteType,
+      'data-line-code': buttonAttributes.lineCode,
+      'data-position': buttonAttributes.position,
+      'data-discussion-id': buttonAttributes.discussionID,
+      'data-line-type': buttonAttributes.lineType
+    });
+  };
+
+  FilesCommentButton.prototype.getTextFileElement = function(hoveredElement) {
+    return hoveredElement.closest(TEXT_FILE_SELECTOR);
+  };
+
+  FilesCommentButton.prototype.getLineContent = function(hoveredElement) {
+    if (hoveredElement.hasClass(LINE_CONTENT_CLASS)) {
+      return hoveredElement;
+    }
+    if (!this.isParallelView) {
+      return $(hoveredElement).closest(LINE_HOLDER_CLASS).find("." + LINE_CONTENT_CLASS);
+    } else {
+      return $(hoveredElement).next("." + LINE_CONTENT_CLASS);
     }
-    return this.each(function() {
-      if (!$.data(this, 'filesCommentButton')) {
-        return $.data(this, 'filesCommentButton', new FilesCommentButton($(this)));
+  };
+
+  FilesCommentButton.prototype.getButtonParent = function(hoveredElement) {
+    if (!this.isParallelView) {
+      if (hoveredElement.hasClass(OLD_LINE_CLASS)) {
+        return hoveredElement;
       }
-    });
+      return hoveredElement.parent().find("." + OLD_LINE_CLASS);
+    } else {
+      if (hoveredElement.hasClass(LINE_NUMBER_CLASS)) {
+        return hoveredElement;
+      }
+      return $(hoveredElement).prev("." + LINE_NUMBER_CLASS);
+    }
+  };
+
+  FilesCommentButton.prototype.validateButtonParent = function(buttonParentElement) {
+    return !buttonParentElement.hasClass(EMPTY_CELL_CLASS) && !buttonParentElement.hasClass(UNFOLDABLE_LINE_CLASS);
+  };
+
+  FilesCommentButton.prototype.validateLineContent = function(lineContentElement) {
+    return lineContentElement.attr('data-discussion-id') && lineContentElement.attr('data-discussion-id') !== '';
   };
 
-}).call(this);
+  return FilesCommentButton;
+})();
+
+$.fn.filesCommentButton = function() {
+  $commentButtonTemplate = $('<button name="button" type="submit" class="add-diff-note js-add-diff-note-button" title="Add a comment to this line"><i class="fa fa-comment-o"></i></button>');
+
+  if (!(this && (this.parent().data('can-create-note') != null))) {
+    return;
+  }
+  return this.each(function() {
+    if (!$.data(this, 'filesCommentButton')) {
+      return $.data(this, 'filesCommentButton', new FilesCommentButton($(this)));
+    }
+  });
+};
diff --git a/app/assets/javascripts/filterable_list.js b/app/assets/javascripts/filterable_list.js
new file mode 100644
index 00000000000..aaaeb9bddb1
--- /dev/null
+++ b/app/assets/javascripts/filterable_list.js
@@ -0,0 +1,46 @@
+/**
+ * Makes search request for content when user types a value in the search input.
+ * Updates the html content of the page with the received one.
+ */
+
+export default class FilterableList {
+  constructor(form, filter, holder) {
+    this.filterForm = form;
+    this.listFilterElement = filter;
+    this.listHolderElement = holder;
+  }
+
+  initSearch() {
+    this.debounceFilter = _.debounce(this.filterResults.bind(this), 500);
+
+    this.listFilterElement.removeEventListener('input', this.debounceFilter);
+    this.listFilterElement.addEventListener('input', this.debounceFilter);
+  }
+
+  filterResults() {
+    const form = this.filterForm;
+    const filterUrl = `${form.getAttribute('action')}?${$(form).serialize()}`;
+
+    $(this.listHolderElement).fadeTo(250, 0.5);
+
+    return $.ajax({
+      url: form.getAttribute('action'),
+      data: $(form).serialize(),
+      type: 'GET',
+      dataType: 'json',
+      context: this,
+      complete() {
+        $(this.listHolderElement).fadeTo(250, 1);
+      },
+      success(data) {
+        this.listHolderElement.innerHTML = data.html;
+
+       // Change url so if user reload a page - search results are saved
+        return window.history.replaceState({
+          page: filterUrl,
+
+        }, document.title, filterUrl);
+      },
+    });
+  }
+}
diff --git a/app/assets/javascripts/filtered_search/container.js b/app/assets/javascripts/filtered_search/container.js
new file mode 100644
index 00000000000..2243c4dd2c5
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/container.js
@@ -0,0 +1,14 @@
+/* eslint-disable class-methods-use-this */
+let container = document;
+
+class FilteredSearchContainerClass {
+  set container(containerParam) {
+    container = containerParam;
+  }
+
+  get container() {
+    return container;
+  }
+}
+
+export default new FilteredSearchContainerClass();
diff --git a/app/assets/javascripts/filtered_search/dropdown_hint.js b/app/assets/javascripts/filtered_search/dropdown_hint.js
new file mode 100644
index 00000000000..98dcb697af9
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/dropdown_hint.js
@@ -0,0 +1,83 @@
+require('./filtered_search_dropdown');
+
+/* global droplabFilter */
+
+(() => {
+  class DropdownHint extends gl.FilteredSearchDropdown {
+    constructor(droplab, dropdown, input, filter) {
+      super(droplab, dropdown, input, filter);
+      this.config = {
+        droplabFilter: {
+          template: 'hint',
+          filterFunction: gl.DropdownUtils.filterHint.bind(null, input),
+        },
+      };
+    }
+
+    itemClicked(e) {
+      const { selected } = e.detail;
+
+      if (selected.tagName === 'LI') {
+        if (selected.hasAttribute('data-value')) {
+          this.dismissDropdown();
+        } else if (selected.getAttribute('data-action') === 'submit') {
+          this.dismissDropdown();
+          this.dispatchFormSubmitEvent();
+        } else {
+          const token = selected.querySelector('.js-filter-hint').innerText.trim();
+          const tag = selected.querySelector('.js-filter-tag').innerText.trim();
+
+          if (tag.length) {
+            // Get previous input values in the input field and convert them into visual tokens
+            const previousInputValues = this.input.value.split(' ');
+            const searchTerms = [];
+
+            previousInputValues.forEach((value, index) => {
+              searchTerms.push(value);
+
+              if (index === previousInputValues.length - 1
+                && token.indexOf(value.toLowerCase()) !== -1) {
+                searchTerms.pop();
+              }
+            });
+
+            if (searchTerms.length > 0) {
+              gl.FilteredSearchVisualTokens.addSearchVisualToken(searchTerms.join(' '));
+            }
+
+            gl.FilteredSearchDropdownManager.addWordToInput(token.replace(':', ''), '', false, this.container);
+          }
+          this.dismissDropdown();
+          this.dispatchInputEvent();
+        }
+      }
+    }
+
+    renderContent() {
+      const dropdownData = [];
+
+      [].forEach.call(this.input.closest('.filtered-search-input-container').querySelectorAll('.dropdown-menu'), (dropdownMenu) => {
+        const { icon, hint, tag, type } = dropdownMenu.dataset;
+        if (icon && hint && tag) {
+          dropdownData.push(
+            Object.assign({
+              icon: `fa-${icon}`,
+              hint,
+              tag: `&lt;${tag}&gt;`,
+            }, type && { type }),
+          );
+        }
+      });
+
+      this.droplab.changeHookList(this.hookId, this.dropdown, [droplabFilter], this.config);
+      this.droplab.setData(this.hookId, dropdownData);
+    }
+
+    init() {
+      this.droplab.addHook(this.input, this.dropdown, [droplabFilter], this.config).init();
+    }
+  }
+
+  window.gl = window.gl || {};
+  gl.DropdownHint = DropdownHint;
+})();
diff --git a/app/assets/javascripts/filtered_search/dropdown_non_user.js b/app/assets/javascripts/filtered_search/dropdown_non_user.js
new file mode 100644
index 00000000000..b3dc3e502c5
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/dropdown_non_user.js
@@ -0,0 +1,44 @@
+require('./filtered_search_dropdown');
+
+/* global droplabAjax */
+/* global droplabFilter */
+
+(() => {
+  class DropdownNonUser extends gl.FilteredSearchDropdown {
+    constructor(droplab, dropdown, input, filter, endpoint, symbol) {
+      super(droplab, dropdown, input, filter);
+      this.symbol = symbol;
+      this.config = {
+        droplabAjax: {
+          endpoint,
+          method: 'setData',
+          loadingTemplate: this.loadingTemplate,
+        },
+        droplabFilter: {
+          filterFunction: gl.DropdownUtils.filterWithSymbol.bind(null, this.symbol, input),
+        },
+      };
+    }
+
+    itemClicked(e) {
+      super.itemClicked(e, (selected) => {
+        const title = selected.querySelector('.js-data-value').innerText.trim();
+        return `${this.symbol}${gl.DropdownUtils.getEscapedText(title)}`;
+      });
+    }
+
+    renderContent(forceShowList = false) {
+      this.droplab
+        .changeHookList(this.hookId, this.dropdown, [droplabAjax, droplabFilter], this.config);
+      super.renderContent(forceShowList);
+    }
+
+    init() {
+      this.droplab
+        .addHook(this.input, this.dropdown, [droplabAjax, droplabFilter], this.config).init();
+    }
+  }
+
+  window.gl = window.gl || {};
+  gl.DropdownNonUser = DropdownNonUser;
+})();
diff --git a/app/assets/javascripts/filtered_search/dropdown_user.js b/app/assets/javascripts/filtered_search/dropdown_user.js
new file mode 100644
index 00000000000..04e2afad02f
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/dropdown_user.js
@@ -0,0 +1,65 @@
+require('./filtered_search_dropdown');
+
+/* global droplabAjaxFilter */
+
+(() => {
+  class DropdownUser extends gl.FilteredSearchDropdown {
+    constructor(droplab, dropdown, input, filter) {
+      super(droplab, dropdown, input, filter);
+      this.config = {
+        droplabAjaxFilter: {
+          endpoint: `${gon.relative_url_root || ''}/autocomplete/users.json`,
+          searchKey: 'search',
+          params: {
+            per_page: 20,
+            active: true,
+            project_id: this.getProjectId(),
+            current_user: true,
+          },
+          searchValueFunction: this.getSearchInput.bind(this),
+          loadingTemplate: this.loadingTemplate,
+        },
+      };
+    }
+
+    itemClicked(e) {
+      super.itemClicked(e,
+        selected => selected.querySelector('.dropdown-light-content').innerText.trim());
+    }
+
+    renderContent(forceShowList = false) {
+      this.droplab.changeHookList(this.hookId, this.dropdown, [droplabAjaxFilter], this.config);
+      super.renderContent(forceShowList);
+    }
+
+    getProjectId() {
+      return this.input.getAttribute('data-project-id');
+    }
+
+    getSearchInput() {
+      const query = gl.DropdownUtils.getSearchInput(this.input);
+      const { lastToken } = gl.FilteredSearchTokenizer.processTokens(query);
+
+      let value = lastToken || '';
+
+      if (value[0] === '@') {
+        value = value.slice(1);
+      }
+
+      // Removes the first character if it is a quotation so that we can search
+      // with multiple words
+      if (value[0] === '"' || value[0] === '\'') {
+        value = value.slice(1);
+      }
+
+      return value;
+    }
+
+    init() {
+      this.droplab.addHook(this.input, this.dropdown, [droplabAjaxFilter], this.config).init();
+    }
+  }
+
+  window.gl = window.gl || {};
+  gl.DropdownUser = DropdownUser;
+})();
diff --git a/app/assets/javascripts/filtered_search/dropdown_utils.js b/app/assets/javascripts/filtered_search/dropdown_utils.js
new file mode 100644
index 00000000000..432b0c0dfd2
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/dropdown_utils.js
@@ -0,0 +1,181 @@
+import FilteredSearchContainer from './container';
+
+(() => {
+  class DropdownUtils {
+    static getEscapedText(text) {
+      let escapedText = text;
+      const hasSpace = text.indexOf(' ') !== -1;
+      const hasDoubleQuote = text.indexOf('"') !== -1;
+
+      // Encapsulate value with quotes if it has spaces
+      // Known side effect: values's with both single and double quotes
+      // won't escape properly
+      if (hasSpace) {
+        if (hasDoubleQuote) {
+          escapedText = `'${text}'`;
+        } else {
+          // Encapsulate singleQuotes or if it hasSpace
+          escapedText = `"${text}"`;
+        }
+      }
+
+      return escapedText;
+    }
+
+    static filterWithSymbol(filterSymbol, input, item) {
+      const updatedItem = item;
+      const searchInput = gl.DropdownUtils.getSearchInput(input);
+
+      const title = updatedItem.title.toLowerCase();
+      let value = searchInput.toLowerCase();
+      let symbol = '';
+
+      // Remove the symbol for filter
+      if (value[0] === filterSymbol) {
+        symbol = value[0];
+        value = value.slice(1);
+      }
+
+      // Removes the first character if it is a quotation so that we can search
+      // with multiple words
+      if ((value[0] === '"' || value[0] === '\'') && title.indexOf(' ') !== -1) {
+        value = value.slice(1);
+      }
+
+      // Eg. filterSymbol = ~ for labels
+      const matchWithoutSymbol = symbol === filterSymbol && title.indexOf(value) !== -1;
+      const match = title.indexOf(`${symbol}${value}`) !== -1;
+
+      updatedItem.droplab_hidden = !match && !matchWithoutSymbol;
+
+      return updatedItem;
+    }
+
+    static filterHint(input, item) {
+      const updatedItem = item;
+      const searchInput = gl.DropdownUtils.getSearchQuery(input);
+      const { lastToken, tokens } = gl.FilteredSearchTokenizer.processTokens(searchInput);
+      const lastKey = lastToken.key || lastToken || '';
+      const allowMultiple = item.type === 'array';
+      const itemInExistingTokens = tokens.some(t => t.key === item.hint);
+
+      if (!allowMultiple && itemInExistingTokens) {
+        updatedItem.droplab_hidden = true;
+      } else if (!lastKey || searchInput.split('').last() === ' ') {
+        updatedItem.droplab_hidden = false;
+      } else if (lastKey) {
+        const split = lastKey.split(':');
+        const tokenName = split[0].split(' ').last();
+
+        const match = updatedItem.hint.indexOf(tokenName.toLowerCase()) === -1;
+        updatedItem.droplab_hidden = tokenName ? match : false;
+      }
+
+      return updatedItem;
+    }
+
+    static setDataValueIfSelected(filter, selected) {
+      const dataValue = selected.getAttribute('data-value');
+
+      if (dataValue) {
+        gl.FilteredSearchDropdownManager.addWordToInput(filter, dataValue, true);
+      }
+
+      // Return boolean based on whether it was set
+      return dataValue !== null;
+    }
+
+    // Determines the full search query (visual tokens + input)
+    static getSearchQuery(untilInput = false) {
+      const container = FilteredSearchContainer.container;
+      const tokens = [].slice.call(container.querySelectorAll('.tokens-container li'));
+      const values = [];
+
+      if (untilInput) {
+        const inputIndex = _.findIndex(tokens, t => t.classList.contains('input-token'));
+        // Add one to include input-token to the tokens array
+        tokens.splice(inputIndex + 1);
+      }
+
+      tokens.forEach((token) => {
+        if (token.classList.contains('js-visual-token')) {
+          const name = token.querySelector('.name');
+          const value = token.querySelector('.value');
+          const symbol = value && value.dataset.symbol ? value.dataset.symbol : '';
+          let valueText = '';
+
+          if (value && value.innerText) {
+            valueText = value.innerText;
+          }
+
+          if (token.className.indexOf('filtered-search-token') !== -1) {
+            values.push(`${name.innerText.toLowerCase()}:${symbol}${valueText}`);
+          } else {
+            values.push(name.innerText);
+          }
+        } else if (token.classList.contains('input-token')) {
+          const { isLastVisualTokenValid } =
+            gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
+
+          const input = FilteredSearchContainer.container.querySelector('.filtered-search');
+          const inputValue = input && input.value;
+
+          if (isLastVisualTokenValid) {
+            values.push(inputValue);
+          } else {
+            const previous = values.pop();
+            values.push(`${previous}${inputValue}`);
+          }
+        }
+      });
+
+      return values.join(' ');
+    }
+
+    static getSearchInput(filteredSearchInput) {
+      const inputValue = filteredSearchInput.value;
+      const { right } = gl.DropdownUtils.getInputSelectionPosition(filteredSearchInput);
+
+      return inputValue.slice(0, right);
+    }
+
+    static getInputSelectionPosition(input) {
+      const selectionStart = input.selectionStart;
+      let inputValue = input.value;
+      // Replace all spaces inside quote marks with underscores
+      // (will continue to match entire string until an end quote is found if any)
+      // This helps with matching the beginning & end of a token:key
+      inputValue = inputValue.replace(/(('[^']*'{0,1})|("[^"]*"{0,1})|:\s+)/g, str => str.replace(/\s/g, '_'));
+
+      // Get the right position for the word selected
+      // Regex matches first space
+      let right = inputValue.slice(selectionStart).search(/\s/);
+
+      if (right >= 0) {
+        right += selectionStart;
+      } else if (right < 0) {
+        right = inputValue.length;
+      }
+
+      // Get the left position for the word selected
+      // Regex matches last non-whitespace character
+      let left = inputValue.slice(0, right).search(/\S+$/);
+
+      if (selectionStart === 0) {
+        left = 0;
+      } else if (selectionStart === inputValue.length && left < 0) {
+        left = inputValue.length;
+      } else if (left < 0) {
+        left = selectionStart;
+      }
+
+      return {
+        left,
+        right,
+      };
+    }
+  }
+
+  window.gl = window.gl || {};
+  gl.DropdownUtils = DropdownUtils;
+})();
diff --git a/app/assets/javascripts/filtered_search/filtered_search_bundle.js b/app/assets/javascripts/filtered_search/filtered_search_bundle.js
new file mode 100644
index 00000000000..856eb6590ee
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/filtered_search_bundle.js
@@ -0,0 +1,10 @@
+require('./dropdown_hint');
+require('./dropdown_non_user');
+require('./dropdown_user');
+require('./dropdown_utils');
+require('./filtered_search_dropdown_manager');
+require('./filtered_search_dropdown');
+require('./filtered_search_manager');
+require('./filtered_search_token_keys');
+require('./filtered_search_tokenizer');
+require('./filtered_search_visual_tokens');
diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown.js b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js
new file mode 100644
index 00000000000..e7bf530d343
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown.js
@@ -0,0 +1,124 @@
+(() => {
+  const DATA_DROPDOWN_TRIGGER = 'data-dropdown-trigger';
+
+  class FilteredSearchDropdown {
+    constructor(droplab, dropdown, input, filter) {
+      this.droplab = droplab;
+      this.hookId = input && input.getAttribute('data-id');
+      this.input = input;
+      this.filter = filter;
+      this.dropdown = dropdown;
+      this.loadingTemplate = `<div class="filter-dropdown-loading">
+        <i class="fa fa-spinner fa-spin"></i>
+      </div>`;
+      this.bindEvents();
+    }
+
+    bindEvents() {
+      this.itemClickedWrapper = this.itemClicked.bind(this);
+      this.dropdown.addEventListener('click.dl', this.itemClickedWrapper);
+    }
+
+    unbindEvents() {
+      this.dropdown.removeEventListener('click.dl', this.itemClickedWrapper);
+    }
+
+    getCurrentHook() {
+      return this.droplab.hooks.filter(h => h.id === this.hookId)[0] || null;
+    }
+
+    itemClicked(e, getValueFunction) {
+      const { selected } = e.detail;
+
+      if (selected.tagName === 'LI' && selected.innerHTML) {
+        const dataValueSet = gl.DropdownUtils.setDataValueIfSelected(this.filter, selected);
+
+        if (!dataValueSet) {
+          const value = getValueFunction(selected);
+          gl.FilteredSearchDropdownManager.addWordToInput(this.filter, value, true);
+        }
+
+        this.resetFilters();
+        this.dismissDropdown();
+        this.dispatchInputEvent();
+      }
+    }
+
+    setAsDropdown() {
+      this.input.setAttribute(DATA_DROPDOWN_TRIGGER, `#${this.dropdown.id}`);
+    }
+
+    setOffset(offset = 0) {
+      if (window.innerWidth > 480) {
+        this.dropdown.style.left = `${offset}px`;
+      } else {
+        this.dropdown.style.left = '0px';
+      }
+    }
+
+    renderContent(forceShowList = false) {
+      const currentHook = this.getCurrentHook();
+      if (forceShowList && currentHook && currentHook.list.hidden) {
+        currentHook.list.show();
+      }
+    }
+
+    render(forceRenderContent = false, forceShowList = false) {
+      this.setAsDropdown();
+
+      const currentHook = this.getCurrentHook();
+      const firstTimeInitialized = currentHook === null;
+
+      if (firstTimeInitialized || forceRenderContent) {
+        this.renderContent(forceShowList);
+      } else if (currentHook.list.list.id !== this.dropdown.id) {
+        this.renderContent(forceShowList);
+      }
+    }
+
+    dismissDropdown() {
+      // Focusing on the input will dismiss dropdown
+      // (default droplab functionality)
+      this.input.focus();
+    }
+
+    dispatchInputEvent() {
+      // Propogate input change to FilteredSearchDropdownManager
+      // so that it can determine which dropdowns to open
+      this.input.dispatchEvent(new CustomEvent('input', {
+        bubbles: true,
+        cancelable: true,
+      }));
+    }
+
+    dispatchFormSubmitEvent() {
+      // dispatchEvent() is necessary as form.submit() does not
+      // trigger event handlers
+      this.input.form.dispatchEvent(new Event('submit'));
+    }
+
+    hideDropdown() {
+      const currentHook = this.getCurrentHook();
+      if (currentHook) {
+        currentHook.list.hide();
+      }
+    }
+
+    resetFilters() {
+      const hook = this.getCurrentHook();
+
+      if (hook) {
+        const data = hook.list.data || [];
+        const results = data.map((o) => {
+          const updated = o;
+          updated.droplab_hidden = false;
+          return updated;
+        });
+        hook.list.render(results);
+      }
+    }
+  }
+
+  window.gl = window.gl || {};
+  gl.FilteredSearchDropdown = FilteredSearchDropdown;
+})();
diff --git a/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js
new file mode 100644
index 00000000000..5fbe0450bb8
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/filtered_search_dropdown_manager.js
@@ -0,0 +1,191 @@
+/* global DropLab */
+import FilteredSearchContainer from './container';
+
+(() => {
+  class FilteredSearchDropdownManager {
+    constructor(baseEndpoint = '', page) {
+      this.container = FilteredSearchContainer.container;
+      this.baseEndpoint = baseEndpoint.replace(/\/$/, '');
+      this.tokenizer = gl.FilteredSearchTokenizer;
+      this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeys;
+      this.filteredSearchInput = this.container.querySelector('.filtered-search');
+      this.page = page;
+
+      this.setupMapping();
+
+      this.cleanupWrapper = this.cleanup.bind(this);
+      document.addEventListener('beforeunload', this.cleanupWrapper);
+    }
+
+    cleanup() {
+      if (this.droplab) {
+        this.droplab.destroy();
+        this.droplab = null;
+      }
+
+      this.setupMapping();
+
+      document.removeEventListener('beforeunload', this.cleanupWrapper);
+    }
+
+    setupMapping() {
+      this.mapping = {
+        author: {
+          reference: null,
+          gl: 'DropdownUser',
+          element: this.container.querySelector('#js-dropdown-author'),
+        },
+        assignee: {
+          reference: null,
+          gl: 'DropdownUser',
+          element: this.container.querySelector('#js-dropdown-assignee'),
+        },
+        milestone: {
+          reference: null,
+          gl: 'DropdownNonUser',
+          extraArguments: [`${this.baseEndpoint}/milestones.json`, '%'],
+          element: this.container.querySelector('#js-dropdown-milestone'),
+        },
+        label: {
+          reference: null,
+          gl: 'DropdownNonUser',
+          extraArguments: [`${this.baseEndpoint}/labels.json`, '~'],
+          element: this.container.querySelector('#js-dropdown-label'),
+        },
+        hint: {
+          reference: null,
+          gl: 'DropdownHint',
+          element: this.container.querySelector('#js-dropdown-hint'),
+        },
+      };
+    }
+
+    static addWordToInput(tokenName, tokenValue = '', clicked = false) {
+      const input = FilteredSearchContainer.container.querySelector('.filtered-search');
+
+      gl.FilteredSearchVisualTokens.addFilterVisualToken(tokenName, tokenValue);
+      input.value = '';
+
+      if (clicked) {
+        gl.FilteredSearchVisualTokens.moveInputToTheRight();
+      }
+    }
+
+    updateCurrentDropdownOffset() {
+      this.updateDropdownOffset(this.currentDropdown);
+    }
+
+    updateDropdownOffset(key) {
+      // Always align dropdown with the input field
+      let offset = this.filteredSearchInput.getBoundingClientRect().left - this.container.querySelector('.scroll-container').getBoundingClientRect().left;
+
+      const maxInputWidth = 240;
+      const currentDropdownWidth = this.mapping[key].element.clientWidth || maxInputWidth;
+
+      // Make sure offset never exceeds the input container
+      const offsetMaxWidth = this.container.querySelector('.scroll-container').clientWidth - currentDropdownWidth;
+      if (offsetMaxWidth < offset) {
+        offset = offsetMaxWidth;
+      }
+
+      this.mapping[key].reference.setOffset(offset);
+    }
+
+    load(key, firstLoad = false) {
+      const mappingKey = this.mapping[key];
+      const glClass = mappingKey.gl;
+      const element = mappingKey.element;
+      let forceShowList = false;
+
+      if (!mappingKey.reference) {
+        const dl = this.droplab;
+        const defaultArguments = [null, dl, element, this.filteredSearchInput, key];
+        const glArguments = defaultArguments.concat(mappingKey.extraArguments || []);
+
+        // Passing glArguments to `new gl[glClass](<arguments>)`
+        mappingKey.reference = new (Function.prototype.bind.apply(gl[glClass], glArguments))();
+      }
+
+      if (firstLoad) {
+        mappingKey.reference.init();
+      }
+
+      if (this.currentDropdown === 'hint') {
+        // Force the dropdown to show if it was clicked from the hint dropdown
+        forceShowList = true;
+      }
+
+      this.updateDropdownOffset(key);
+      mappingKey.reference.render(firstLoad, forceShowList);
+
+      this.currentDropdown = key;
+    }
+
+    loadDropdown(dropdownName = '') {
+      let firstLoad = false;
+
+      if (!this.droplab) {
+        firstLoad = true;
+        this.droplab = new DropLab();
+      }
+
+      const match = this.filteredSearchTokenKeys.searchByKey(dropdownName.toLowerCase());
+      const shouldOpenFilterDropdown = match && this.currentDropdown !== match.key
+        && this.mapping[match.key];
+      const shouldOpenHintDropdown = !match && this.currentDropdown !== 'hint';
+
+      if (shouldOpenFilterDropdown || shouldOpenHintDropdown) {
+        const key = match && match.key ? match.key : 'hint';
+        this.load(key, firstLoad);
+      }
+    }
+
+    setDropdown() {
+      const query = gl.DropdownUtils.getSearchQuery(true);
+      const { lastToken, searchToken } = this.tokenizer.processTokens(query);
+
+      if (this.currentDropdown) {
+        this.updateCurrentDropdownOffset();
+      }
+
+      if (lastToken === searchToken && lastToken !== null) {
+        // Token is not fully initialized yet because it has no value
+        // Eg. token = 'label:'
+
+        const split = lastToken.split(':');
+        const dropdownName = split[0].split(' ').last();
+        this.loadDropdown(split.length > 1 ? dropdownName : '');
+      } else if (lastToken) {
+        // Token has been initialized into an object because it has a value
+        this.loadDropdown(lastToken.key);
+      } else {
+        this.loadDropdown('hint');
+      }
+    }
+
+    resetDropdowns() {
+      if (!this.currentDropdown) {
+        return;
+      }
+
+      // Force current dropdown to hide
+      this.mapping[this.currentDropdown].reference.hideDropdown();
+
+      // Re-Load dropdown
+      this.setDropdown();
+
+      // Reset filters for current dropdown
+      this.mapping[this.currentDropdown].reference.resetFilters();
+
+      // Reposition dropdown so that it is aligned with cursor
+      this.updateDropdownOffset(this.currentDropdown);
+    }
+
+    destroyDroplab() {
+      this.droplab.destroy();
+    }
+  }
+
+  window.gl = window.gl || {};
+  gl.FilteredSearchDropdownManager = FilteredSearchDropdownManager;
+})();
diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js b/app/assets/javascripts/filtered_search/filtered_search_manager.js
new file mode 100644
index 00000000000..22352950452
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js
@@ -0,0 +1,423 @@
+import FilteredSearchContainer from './container';
+
+(() => {
+  class FilteredSearchManager {
+    constructor(page) {
+      this.container = FilteredSearchContainer.container;
+      this.filteredSearchInput = this.container.querySelector('.filtered-search');
+      this.clearSearchButton = this.container.querySelector('.clear-search');
+      this.tokensContainer = this.container.querySelector('.tokens-container');
+      this.filteredSearchTokenKeys = gl.FilteredSearchTokenKeys;
+
+      if (this.filteredSearchInput) {
+        this.tokenizer = gl.FilteredSearchTokenizer;
+        this.dropdownManager = new gl.FilteredSearchDropdownManager(this.filteredSearchInput.getAttribute('data-base-endpoint') || '', page);
+
+        this.bindEvents();
+        this.loadSearchParamsFromURL();
+        this.dropdownManager.setDropdown();
+
+        this.cleanupWrapper = this.cleanup.bind(this);
+        document.addEventListener('beforeunload', this.cleanupWrapper);
+      }
+    }
+
+    cleanup() {
+      this.unbindEvents();
+      document.removeEventListener('beforeunload', this.cleanupWrapper);
+    }
+
+    bindEvents() {
+      this.handleFormSubmit = this.handleFormSubmit.bind(this);
+      this.setDropdownWrapper = this.dropdownManager.setDropdown.bind(this.dropdownManager);
+      this.toggleClearSearchButtonWrapper = this.toggleClearSearchButton.bind(this);
+      this.handleInputPlaceholderWrapper = this.handleInputPlaceholder.bind(this);
+      this.handleInputVisualTokenWrapper = this.handleInputVisualToken.bind(this);
+      this.checkForEnterWrapper = this.checkForEnter.bind(this);
+      this.clearSearchWrapper = this.clearSearch.bind(this);
+      this.checkForBackspaceWrapper = this.checkForBackspace.bind(this);
+      this.removeSelectedTokenWrapper = this.removeSelectedToken.bind(this);
+      this.unselectEditTokensWrapper = this.unselectEditTokens.bind(this);
+      this.editTokenWrapper = this.editToken.bind(this);
+      this.tokenChange = this.tokenChange.bind(this);
+      this.addInputContainerFocusWrapper = this.addInputContainerFocus.bind(this);
+      this.removeInputContainerFocusWrapper = this.removeInputContainerFocus.bind(this);
+
+      this.filteredSearchInputForm = this.filteredSearchInput.form;
+      this.filteredSearchInputForm.addEventListener('submit', this.handleFormSubmit);
+      this.filteredSearchInput.addEventListener('input', this.setDropdownWrapper);
+      this.filteredSearchInput.addEventListener('input', this.toggleClearSearchButtonWrapper);
+      this.filteredSearchInput.addEventListener('input', this.handleInputPlaceholderWrapper);
+      this.filteredSearchInput.addEventListener('input', this.handleInputVisualTokenWrapper);
+      this.filteredSearchInput.addEventListener('keydown', this.checkForEnterWrapper);
+      this.filteredSearchInput.addEventListener('keyup', this.checkForBackspaceWrapper);
+      this.filteredSearchInput.addEventListener('click', this.tokenChange);
+      this.filteredSearchInput.addEventListener('keyup', this.tokenChange);
+      this.filteredSearchInput.addEventListener('focus', this.addInputContainerFocusWrapper);
+      this.tokensContainer.addEventListener('click', FilteredSearchManager.selectToken);
+      this.tokensContainer.addEventListener('dblclick', this.editTokenWrapper);
+      this.clearSearchButton.addEventListener('click', this.clearSearchWrapper);
+      document.addEventListener('click', gl.FilteredSearchVisualTokens.unselectTokens);
+      document.addEventListener('click', this.unselectEditTokensWrapper);
+      document.addEventListener('click', this.removeInputContainerFocusWrapper);
+      document.addEventListener('keydown', this.removeSelectedTokenWrapper);
+    }
+
+    unbindEvents() {
+      this.filteredSearchInputForm.removeEventListener('submit', this.handleFormSubmit);
+      this.filteredSearchInput.removeEventListener('input', this.setDropdownWrapper);
+      this.filteredSearchInput.removeEventListener('input', this.toggleClearSearchButtonWrapper);
+      this.filteredSearchInput.removeEventListener('input', this.handleInputPlaceholderWrapper);
+      this.filteredSearchInput.removeEventListener('input', this.handleInputVisualTokenWrapper);
+      this.filteredSearchInput.removeEventListener('keydown', this.checkForEnterWrapper);
+      this.filteredSearchInput.removeEventListener('keyup', this.checkForBackspaceWrapper);
+      this.filteredSearchInput.removeEventListener('click', this.tokenChange);
+      this.filteredSearchInput.removeEventListener('keyup', this.tokenChange);
+      this.filteredSearchInput.removeEventListener('focus', this.addInputContainerFocusWrapper);
+      this.tokensContainer.removeEventListener('click', FilteredSearchManager.selectToken);
+      this.tokensContainer.removeEventListener('dblclick', this.editTokenWrapper);
+      this.clearSearchButton.removeEventListener('click', this.clearSearchWrapper);
+      document.removeEventListener('click', gl.FilteredSearchVisualTokens.unselectTokens);
+      document.removeEventListener('click', this.unselectEditTokensWrapper);
+      document.removeEventListener('click', this.removeInputContainerFocusWrapper);
+      document.removeEventListener('keydown', this.removeSelectedTokenWrapper);
+    }
+
+    checkForBackspace(e) {
+      // 8 = Backspace Key
+      // 46 = Delete Key
+      if (e.keyCode === 8 || e.keyCode === 46) {
+        const { lastVisualToken } = gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
+
+        if (this.filteredSearchInput.value === '' && lastVisualToken) {
+          this.filteredSearchInput.value = gl.FilteredSearchVisualTokens.getLastTokenPartial();
+          gl.FilteredSearchVisualTokens.removeLastTokenPartial();
+        }
+
+        // Reposition dropdown so that it is aligned with cursor
+        this.dropdownManager.updateCurrentDropdownOffset();
+      }
+    }
+
+    checkForEnter(e) {
+      if (e.keyCode === 38 || e.keyCode === 40) {
+        const selectionStart = this.filteredSearchInput.selectionStart;
+
+        e.preventDefault();
+        this.filteredSearchInput.setSelectionRange(selectionStart, selectionStart);
+      }
+
+      if (e.keyCode === 13) {
+        const dropdown = this.dropdownManager.mapping[this.dropdownManager.currentDropdown];
+        const dropdownEl = dropdown.element;
+        const activeElements = dropdownEl.querySelectorAll('.dropdown-active');
+
+        e.preventDefault();
+
+        if (!activeElements.length) {
+          if (this.isHandledAsync) {
+            e.stopImmediatePropagation();
+
+            this.filteredSearchInput.blur();
+            this.dropdownManager.resetDropdowns();
+          } else {
+            // Prevent droplab from opening dropdown
+            this.dropdownManager.destroyDroplab();
+          }
+
+          this.search();
+        }
+      }
+    }
+
+    addInputContainerFocus() {
+      const inputContainer = this.filteredSearchInput.closest('.filtered-search-input-container');
+
+      if (inputContainer) {
+        inputContainer.classList.add('focus');
+      }
+    }
+
+    removeInputContainerFocus(e) {
+      const inputContainer = this.filteredSearchInput.closest('.filtered-search-input-container');
+      const isElementInFilteredSearch = inputContainer && inputContainer.contains(e.target);
+      const isElementInDynamicFilterDropdown = e.target.closest('.filter-dropdown') !== null;
+      const isElementInStaticFilterDropdown = e.target.closest('ul[data-dropdown]') !== null;
+
+      if (!isElementInFilteredSearch && !isElementInDynamicFilterDropdown &&
+        !isElementInStaticFilterDropdown && inputContainer) {
+        inputContainer.classList.remove('focus');
+      }
+    }
+
+    static selectToken(e) {
+      const button = e.target.closest('.selectable');
+
+      if (button) {
+        e.preventDefault();
+        e.stopPropagation();
+        gl.FilteredSearchVisualTokens.selectToken(button);
+      }
+    }
+
+    unselectEditTokens(e) {
+      const inputContainer = this.container.querySelector('.filtered-search-input-container');
+      const isElementInFilteredSearch = inputContainer && inputContainer.contains(e.target);
+      const isElementInFilterDropdown = e.target.closest('.filter-dropdown') !== null;
+      const isElementTokensContainer = e.target.classList.contains('tokens-container');
+
+      if ((!isElementInFilteredSearch && !isElementInFilterDropdown) || isElementTokensContainer) {
+        gl.FilteredSearchVisualTokens.moveInputToTheRight();
+        this.dropdownManager.resetDropdowns();
+      }
+    }
+
+    editToken(e) {
+      const token = e.target.closest('.js-visual-token');
+
+      if (token) {
+        gl.FilteredSearchVisualTokens.editToken(token);
+        this.tokenChange();
+      }
+    }
+
+    toggleClearSearchButton() {
+      const query = gl.DropdownUtils.getSearchQuery();
+      const hidden = 'hidden';
+      const hasHidden = this.clearSearchButton.classList.contains(hidden);
+
+      if (query.length === 0 && !hasHidden) {
+        this.clearSearchButton.classList.add(hidden);
+      } else if (query.length && hasHidden) {
+        this.clearSearchButton.classList.remove(hidden);
+      }
+    }
+
+    handleInputPlaceholder() {
+      const query = gl.DropdownUtils.getSearchQuery();
+      const placeholder = 'Search or filter results...';
+      const currentPlaceholder = this.filteredSearchInput.placeholder;
+
+      if (query.length === 0 && currentPlaceholder !== placeholder) {
+        this.filteredSearchInput.placeholder = placeholder;
+      } else if (query.length > 0 && currentPlaceholder !== '') {
+        this.filteredSearchInput.placeholder = '';
+      }
+    }
+
+    removeSelectedToken(e) {
+      // 8 = Backspace Key
+      // 46 = Delete Key
+      if (e.keyCode === 8 || e.keyCode === 46) {
+        gl.FilteredSearchVisualTokens.removeSelectedToken();
+        this.handleInputPlaceholder();
+        this.toggleClearSearchButton();
+      }
+    }
+
+    clearSearch(e) {
+      e.preventDefault();
+
+      this.filteredSearchInput.value = '';
+
+      const removeElements = [];
+
+      [].forEach.call(this.tokensContainer.children, (t) => {
+        if (t.classList.contains('js-visual-token')) {
+          removeElements.push(t);
+        }
+      });
+
+      removeElements.forEach((el) => {
+        el.parentElement.removeChild(el);
+      });
+
+      this.clearSearchButton.classList.add('hidden');
+      this.handleInputPlaceholder();
+
+      this.dropdownManager.resetDropdowns();
+
+      if (this.isHandledAsync) {
+        this.search();
+      }
+    }
+
+    handleInputVisualToken() {
+      const input = this.filteredSearchInput;
+      const { tokens, searchToken }
+        = gl.FilteredSearchTokenizer.processTokens(input.value);
+      const { isLastVisualTokenValid }
+        = gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
+
+      if (isLastVisualTokenValid) {
+        tokens.forEach((t) => {
+          input.value = input.value.replace(`${t.key}:${t.symbol}${t.value}`, '');
+          gl.FilteredSearchVisualTokens.addFilterVisualToken(t.key, `${t.symbol}${t.value}`);
+        });
+
+        const fragments = searchToken.split(':');
+        if (fragments.length > 1) {
+          const inputValues = fragments[0].split(' ');
+          const tokenKey = inputValues.last();
+
+          if (inputValues.length > 1) {
+            inputValues.pop();
+            const searchTerms = inputValues.join(' ');
+
+            input.value = input.value.replace(searchTerms, '');
+            gl.FilteredSearchVisualTokens.addSearchVisualToken(searchTerms);
+          }
+
+          gl.FilteredSearchVisualTokens.addFilterVisualToken(tokenKey);
+          input.value = input.value.replace(`${tokenKey}:`, '');
+        }
+      } else {
+        // Keep listening to token until we determine that the user is done typing the token value
+        const valueCompletedRegex = /([~%@]{0,1}".+")|([~%@]{0,1}'.+')|^((?![~%@]')(?![~%@]")(?!')(?!")).*/g;
+
+        if (searchToken.match(valueCompletedRegex) && input.value[input.value.length - 1] === ' ') {
+          gl.FilteredSearchVisualTokens.addFilterVisualToken(searchToken);
+
+          // Trim the last space as seen in the if statement above
+          input.value = input.value.replace(searchToken, '').trim();
+        }
+      }
+    }
+
+    handleFormSubmit(e) {
+      e.preventDefault();
+      this.search();
+    }
+
+    loadSearchParamsFromURL() {
+      const params = gl.utils.getUrlParamsArray();
+      const usernameParams = this.getUsernameParams();
+      let hasFilteredSearch = false;
+
+      params.forEach((p) => {
+        const split = p.split('=');
+        const keyParam = decodeURIComponent(split[0]);
+        const value = split[1];
+
+        // Check if it matches edge conditions listed in this.filteredSearchTokenKeys
+        const condition = this.filteredSearchTokenKeys.searchByConditionUrl(p);
+
+        if (condition) {
+          hasFilteredSearch = true;
+          gl.FilteredSearchVisualTokens.addFilterVisualToken(condition.tokenKey, condition.value);
+        } else {
+          // Sanitize value since URL converts spaces into +
+          // Replace before decode so that we know what was originally + versus the encoded +
+          const sanitizedValue = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : value;
+          const match = this.filteredSearchTokenKeys.searchByKeyParam(keyParam);
+
+          if (match) {
+            const indexOf = keyParam.indexOf('_');
+            const sanitizedKey = indexOf !== -1 ? keyParam.slice(0, keyParam.indexOf('_')) : keyParam;
+            const symbol = match.symbol;
+            let quotationsToUse = '';
+
+            if (sanitizedValue.indexOf(' ') !== -1) {
+              // Prefer ", but use ' if required
+              quotationsToUse = sanitizedValue.indexOf('"') === -1 ? '"' : '\'';
+            }
+
+            hasFilteredSearch = true;
+            gl.FilteredSearchVisualTokens.addFilterVisualToken(sanitizedKey, `${symbol}${quotationsToUse}${sanitizedValue}${quotationsToUse}`);
+          } else if (!match && keyParam === 'assignee_id') {
+            const id = parseInt(value, 10);
+            if (usernameParams[id]) {
+              hasFilteredSearch = true;
+              gl.FilteredSearchVisualTokens.addFilterVisualToken('assignee', `@${usernameParams[id]}`);
+            }
+          } else if (!match && keyParam === 'author_id') {
+            const id = parseInt(value, 10);
+            if (usernameParams[id]) {
+              hasFilteredSearch = true;
+              gl.FilteredSearchVisualTokens.addFilterVisualToken('author', `@${usernameParams[id]}`);
+            }
+          } else if (!match && keyParam === 'search') {
+            hasFilteredSearch = true;
+            this.filteredSearchInput.value = sanitizedValue;
+          }
+        }
+      });
+
+      if (hasFilteredSearch) {
+        this.clearSearchButton.classList.remove('hidden');
+        this.handleInputPlaceholder();
+      }
+    }
+
+    search() {
+      const paths = [];
+      const { tokens, searchToken }
+        = this.tokenizer.processTokens(gl.DropdownUtils.getSearchQuery());
+      const currentState = gl.utils.getParameterByName('state') || 'opened';
+      paths.push(`state=${currentState}`);
+
+      tokens.forEach((token) => {
+        const condition = this.filteredSearchTokenKeys
+          .searchByConditionKeyValue(token.key, token.value.toLowerCase());
+        const { param } = this.filteredSearchTokenKeys.searchByKey(token.key) || {};
+        const keyParam = param ? `${token.key}_${param}` : token.key;
+        let tokenPath = '';
+
+        if (condition) {
+          tokenPath = condition.url;
+        } else {
+          let tokenValue = token.value;
+
+          if ((tokenValue[0] === '\'' && tokenValue[tokenValue.length - 1] === '\'') ||
+            (tokenValue[0] === '"' && tokenValue[tokenValue.length - 1] === '"')) {
+            tokenValue = tokenValue.slice(1, tokenValue.length - 1);
+          }
+
+          tokenPath = `${keyParam}=${encodeURIComponent(tokenValue)}`;
+        }
+
+        paths.push(tokenPath);
+      });
+
+      if (searchToken) {
+        const sanitized = searchToken.split(' ').map(t => encodeURIComponent(t)).join('+');
+        paths.push(`search=${sanitized}`);
+      }
+
+      const parameterizedUrl = `?scope=all&utf8=%E2%9C%93&${paths.join('&')}`;
+
+      if (this.updateObject) {
+        this.updateObject(parameterizedUrl);
+      } else {
+        gl.utils.visitUrl(parameterizedUrl);
+      }
+    }
+
+    getUsernameParams() {
+      const usernamesById = {};
+      try {
+        const attribute = this.filteredSearchInput.getAttribute('data-username-params');
+        JSON.parse(attribute).forEach((user) => {
+          usernamesById[user.id] = user.username;
+        });
+      } catch (e) {
+        // do nothing
+      }
+      return usernamesById;
+    }
+
+    tokenChange() {
+      const dropdown = this.dropdownManager.mapping[this.dropdownManager.currentDropdown];
+
+      if (dropdown) {
+        const currentDropdownRef = dropdown.reference;
+
+        this.setDropdownWrapper();
+        currentDropdownRef.dispatchInputEvent();
+      }
+    }
+  }
+
+  window.gl = window.gl || {};
+  gl.FilteredSearchManager = FilteredSearchManager;
+})();
diff --git a/app/assets/javascripts/filtered_search/filtered_search_token_keys.js b/app/assets/javascripts/filtered_search/filtered_search_token_keys.js
new file mode 100644
index 00000000000..6d5df86f2a5
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/filtered_search_token_keys.js
@@ -0,0 +1,100 @@
+(() => {
+  const tokenKeys = [{
+    key: 'author',
+    type: 'string',
+    param: 'username',
+    symbol: '@',
+  }, {
+    key: 'assignee',
+    type: 'string',
+    param: 'username',
+    symbol: '@',
+  }, {
+    key: 'milestone',
+    type: 'string',
+    param: 'title',
+    symbol: '%',
+  }, {
+    key: 'label',
+    type: 'array',
+    param: 'name[]',
+    symbol: '~',
+  }];
+
+  const alternativeTokenKeys = [{
+    key: 'label',
+    type: 'string',
+    param: 'name',
+    symbol: '~',
+  }];
+
+  const tokenKeysWithAlternative = tokenKeys.concat(alternativeTokenKeys);
+
+  const conditions = [{
+    url: 'assignee_id=0',
+    tokenKey: 'assignee',
+    value: 'none',
+  }, {
+    url: 'milestone_title=No+Milestone',
+    tokenKey: 'milestone',
+    value: 'none',
+  }, {
+    url: 'milestone_title=%23upcoming',
+    tokenKey: 'milestone',
+    value: 'upcoming',
+  }, {
+    url: 'milestone_title=%23started',
+    tokenKey: 'milestone',
+    value: 'started',
+  }, {
+    url: 'label_name[]=No+Label',
+    tokenKey: 'label',
+    value: 'none',
+  }];
+
+  class FilteredSearchTokenKeys {
+    static get() {
+      return tokenKeys;
+    }
+
+    static getAlternatives() {
+      return alternativeTokenKeys;
+    }
+
+    static getConditions() {
+      return conditions;
+    }
+
+    static searchByKey(key) {
+      return tokenKeys.find(tokenKey => tokenKey.key === key) || null;
+    }
+
+    static searchBySymbol(symbol) {
+      return tokenKeys.find(tokenKey => tokenKey.symbol === symbol) || null;
+    }
+
+    static searchByKeyParam(keyParam) {
+      return tokenKeysWithAlternative.find((tokenKey) => {
+        let tokenKeyParam = tokenKey.key;
+
+        if (tokenKey.param) {
+          tokenKeyParam += `_${tokenKey.param}`;
+        }
+
+        return keyParam === tokenKeyParam;
+      }) || null;
+    }
+
+    static searchByConditionUrl(url) {
+      return conditions.find(condition => condition.url === url) || null;
+    }
+
+    static searchByConditionKeyValue(key, value) {
+      return conditions
+        .find(condition => condition.tokenKey === key && condition.value === value) || null;
+    }
+  }
+
+  window.gl = window.gl || {};
+  gl.FilteredSearchTokenKeys = FilteredSearchTokenKeys;
+})();
diff --git a/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js
new file mode 100644
index 00000000000..a2729dc0e95
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/filtered_search_tokenizer.js
@@ -0,0 +1,58 @@
+require('./filtered_search_token_keys');
+
+(() => {
+  class FilteredSearchTokenizer {
+    static processTokens(input) {
+      const allowedKeys = gl.FilteredSearchTokenKeys.get().map(i => i.key);
+      // Regex extracts `(token):(symbol)(value)`
+      // Values that start with a double quote must end in a double quote (same for single)
+      const tokenRegex = new RegExp(`(${allowedKeys.join('|')}):([~%@]?)(?:('[^']*'{0,1})|("[^"]*"{0,1})|(\\S+))`, 'g');
+      const tokens = [];
+      const tokenIndexes = []; // stores key+value for simple search
+      let lastToken = null;
+      const searchToken = input.replace(tokenRegex, (match, key, symbol, v1, v2, v3) => {
+        let tokenValue = v1 || v2 || v3;
+        let tokenSymbol = symbol;
+        let tokenIndex = '';
+
+        if (tokenValue === '~' || tokenValue === '%' || tokenValue === '@') {
+          tokenSymbol = tokenValue;
+          tokenValue = '';
+        }
+
+        tokenIndex = `${key}:${tokenValue}`;
+
+        // Prevent adding duplicates
+        if (tokenIndexes.indexOf(tokenIndex) === -1) {
+          tokenIndexes.push(tokenIndex);
+
+          tokens.push({
+            key,
+            value: tokenValue || '',
+            symbol: tokenSymbol || '',
+          });
+        }
+
+        return '';
+      }).replace(/\s{2,}/g, ' ').trim() || '';
+
+      if (tokens.length > 0) {
+        const last = tokens[tokens.length - 1];
+        const lastString = `${last.key}:${last.symbol}${last.value}`;
+        lastToken = input.lastIndexOf(lastString) ===
+          input.length - lastString.length ? last : searchToken;
+      } else {
+        lastToken = searchToken;
+      }
+
+      return {
+        tokens,
+        lastToken,
+        searchToken,
+      };
+    }
+  }
+
+  window.gl = window.gl || {};
+  gl.FilteredSearchTokenizer = FilteredSearchTokenizer;
+})();
diff --git a/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js b/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
new file mode 100644
index 00000000000..a5657fc8720
--- /dev/null
+++ b/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js
@@ -0,0 +1,202 @@
+import FilteredSearchContainer from './container';
+
+class FilteredSearchVisualTokens {
+  static getLastVisualTokenBeforeInput() {
+    const inputLi = FilteredSearchContainer.container.querySelector('.input-token');
+    const lastVisualToken = inputLi && inputLi.previousElementSibling;
+
+    return {
+      lastVisualToken,
+      isLastVisualTokenValid: lastVisualToken === null || lastVisualToken.className.indexOf('filtered-search-term') !== -1 || (lastVisualToken && lastVisualToken.querySelector('.value') !== null),
+    };
+  }
+
+  static unselectTokens() {
+    const otherTokens = FilteredSearchContainer.container.querySelectorAll('.js-visual-token .selectable.selected');
+    [].forEach.call(otherTokens, t => t.classList.remove('selected'));
+  }
+
+  static selectToken(tokenButton) {
+    const selected = tokenButton.classList.contains('selected');
+    FilteredSearchVisualTokens.unselectTokens();
+
+    if (!selected) {
+      tokenButton.classList.add('selected');
+    }
+  }
+
+  static removeSelectedToken() {
+    const selected = FilteredSearchContainer.container.querySelector('.js-visual-token .selected');
+
+    if (selected) {
+      const li = selected.closest('.js-visual-token');
+      li.parentElement.removeChild(li);
+    }
+  }
+
+  static createVisualTokenElementHTML() {
+    return `
+      <div class="selectable" role="button">
+        <div class="name"></div>
+        <div class="value"></div>
+      </div>
+    `;
+  }
+
+  static addVisualTokenElement(name, value, isSearchTerm) {
+    const li = document.createElement('li');
+    li.classList.add('js-visual-token');
+    li.classList.add(isSearchTerm ? 'filtered-search-term' : 'filtered-search-token');
+
+    if (value) {
+      li.innerHTML = FilteredSearchVisualTokens.createVisualTokenElementHTML();
+      li.querySelector('.value').innerText = value;
+    } else {
+      li.innerHTML = '<div class="name"></div>';
+    }
+    li.querySelector('.name').innerText = name;
+
+    const tokensContainer = FilteredSearchContainer.container.querySelector('.tokens-container');
+    const input = FilteredSearchContainer.container.querySelector('.filtered-search');
+    tokensContainer.insertBefore(li, input.parentElement);
+  }
+
+  static addValueToPreviousVisualTokenElement(value) {
+    const { lastVisualToken, isLastVisualTokenValid } =
+      FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
+
+    if (!isLastVisualTokenValid && lastVisualToken.classList.contains('filtered-search-token')) {
+      const name = FilteredSearchVisualTokens.getLastTokenPartial();
+      lastVisualToken.innerHTML = FilteredSearchVisualTokens.createVisualTokenElementHTML();
+      lastVisualToken.querySelector('.name').innerText = name;
+      lastVisualToken.querySelector('.value').innerText = value;
+    }
+  }
+
+  static addFilterVisualToken(tokenName, tokenValue) {
+    const { lastVisualToken, isLastVisualTokenValid }
+      = FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
+    const addVisualTokenElement = FilteredSearchVisualTokens.addVisualTokenElement;
+
+    if (isLastVisualTokenValid) {
+      addVisualTokenElement(tokenName, tokenValue, false);
+    } else {
+      const previousTokenName = lastVisualToken.querySelector('.name').innerText;
+      const tokensContainer = FilteredSearchContainer.container.querySelector('.tokens-container');
+      tokensContainer.removeChild(lastVisualToken);
+
+      const value = tokenValue || tokenName;
+      addVisualTokenElement(previousTokenName, value, false);
+    }
+  }
+
+  static addSearchVisualToken(searchTerm) {
+    const { lastVisualToken } = FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
+
+    if (lastVisualToken && lastVisualToken.classList.contains('filtered-search-term')) {
+      lastVisualToken.querySelector('.name').innerText += ` ${searchTerm}`;
+    } else {
+      FilteredSearchVisualTokens.addVisualTokenElement(searchTerm, null, true);
+    }
+  }
+
+  static getLastTokenPartial() {
+    const { lastVisualToken } = FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
+
+    if (!lastVisualToken) return '';
+
+    const value = lastVisualToken.querySelector('.value');
+    const name = lastVisualToken.querySelector('.name');
+
+    const valueText = value ? value.innerText : '';
+    const nameText = name ? name.innerText : '';
+
+    return valueText || nameText;
+  }
+
+  static removeLastTokenPartial() {
+    const { lastVisualToken } = FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
+
+    if (lastVisualToken) {
+      const value = lastVisualToken.querySelector('.value');
+
+      if (value) {
+        const button = lastVisualToken.querySelector('.selectable');
+        button.removeChild(value);
+        lastVisualToken.innerHTML = button.innerHTML;
+      } else {
+        lastVisualToken.closest('.tokens-container').removeChild(lastVisualToken);
+      }
+    }
+  }
+
+  static tokenizeInput() {
+    const input = FilteredSearchContainer.container.querySelector('.filtered-search');
+    const { isLastVisualTokenValid } =
+      gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
+
+    if (input.value) {
+      if (isLastVisualTokenValid) {
+        gl.FilteredSearchVisualTokens.addSearchVisualToken(input.value);
+      } else {
+        FilteredSearchVisualTokens.addValueToPreviousVisualTokenElement(input.value);
+      }
+
+      input.value = '';
+    }
+  }
+
+  static editToken(token) {
+    const input = FilteredSearchContainer.container.querySelector('.filtered-search');
+
+    FilteredSearchVisualTokens.tokenizeInput();
+
+    // Replace token with input field
+    const tokenContainer = token.parentElement;
+    const inputLi = input.parentElement;
+    tokenContainer.replaceChild(inputLi, token);
+
+    const name = token.querySelector('.name');
+    const value = token.querySelector('.value');
+
+    if (token.classList.contains('filtered-search-token') && value) {
+      FilteredSearchVisualTokens.addFilterVisualToken(name.innerText);
+      input.value = value.innerText;
+    } else {
+      // token is a search term
+      input.value = name.innerText;
+    }
+
+    // Opens dropdown
+    const inputEvent = new Event('input');
+    input.dispatchEvent(inputEvent);
+
+    // Adds cursor to input
+    input.focus();
+  }
+
+  static moveInputToTheRight() {
+    const input = FilteredSearchContainer.container.querySelector('.filtered-search');
+    const inputLi = input.parentElement;
+    const tokenContainer = FilteredSearchContainer.container.querySelector('.tokens-container');
+
+    FilteredSearchVisualTokens.tokenizeInput();
+
+    if (!tokenContainer.lastElementChild.isEqualNode(inputLi)) {
+      const { isLastVisualTokenValid } =
+        gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
+
+      if (!isLastVisualTokenValid) {
+        const lastPartial = gl.FilteredSearchVisualTokens.getLastTokenPartial();
+        gl.FilteredSearchVisualTokens.removeLastTokenPartial();
+        gl.FilteredSearchVisualTokens.addSearchVisualToken(lastPartial);
+      }
+
+      tokenContainer.removeChild(inputLi);
+      tokenContainer.appendChild(inputLi);
+    }
+  }
+}
+
+window.gl = window.gl || {};
+gl.FilteredSearchVisualTokens = FilteredSearchVisualTokens;
diff --git a/app/assets/javascripts/flash.js b/app/assets/javascripts/flash.js
index 46e272c3311..eec30624ff2 100644
--- a/app/assets/javascripts/flash.js
+++ b/app/assets/javascripts/flash.js
@@ -1,44 +1,41 @@
-/* eslint-disable */
-(function() {
-  this.Flash = (function() {
-    var hideFlash;
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, one-var, one-var-declaration-per-line, no-param-reassign, quotes, quote-props, prefer-template, comma-dangle, max-len */
 
-    hideFlash = function() {
-      return $(this).fadeOut();
-    };
+window.Flash = (function() {
+  var hideFlash;
 
-    function Flash(message, type, parent) {
-      var flash, textDiv;
-      if (type == null) {
-        type = 'alert';
-      }
-      if (parent == null) {
-        parent = null;
-      }
-      if (parent) {
-        this.flashContainer = parent.find('.flash-container');
-      } else {
-        this.flashContainer = $('.flash-container-page');
-      }
-      this.flashContainer.html('');
-      flash = $('<div/>', {
-        "class": "flash-" + type
-      });
-      flash.on('click', hideFlash);
-      textDiv = $('<div/>', {
-        "class": 'flash-text',
-        text: message
-      });
-      textDiv.appendTo(flash);
-      if (this.flashContainer.parent().hasClass('content-wrapper')) {
-        textDiv.addClass('container-fluid container-limited');
-      }
-      flash.appendTo(this.flashContainer);
-      this.flashContainer.show();
-    }
-
-    return Flash;
+  hideFlash = function() {
+    return $(this).fadeOut();
+  };
 
-  })();
+  function Flash(message, type, parent) {
+    var flash, textDiv;
+    if (type == null) {
+      type = 'alert';
+    }
+    if (parent == null) {
+      parent = null;
+    }
+    if (parent) {
+      this.flashContainer = parent.find('.flash-container');
+    } else {
+      this.flashContainer = $('.flash-container-page');
+    }
+    this.flashContainer.html('');
+    flash = $('<div/>', {
+      "class": "flash-" + type
+    });
+    flash.on('click', hideFlash);
+    textDiv = $('<div/>', {
+      "class": 'flash-text',
+      text: message
+    });
+    textDiv.appendTo(flash);
+    if (this.flashContainer.parent().hasClass('content-wrapper')) {
+      textDiv.addClass('container-fluid container-limited');
+    }
+    flash.appendTo(this.flashContainer);
+    this.flashContainer.show();
+  }
 
-}).call(this);
+  return Flash;
+})();
diff --git a/app/assets/javascripts/gfm_auto_complete.js b/app/assets/javascripts/gfm_auto_complete.js
new file mode 100644
index 00000000000..9ac4c49d697
--- /dev/null
+++ b/app/assets/javascripts/gfm_auto_complete.js
@@ -0,0 +1,390 @@
+/* eslint-disable func-names, space-before-function-paren, no-template-curly-in-string, comma-dangle, object-shorthand, quotes, dot-notation, no-else-return, one-var, no-var, no-underscore-dangle, one-var-declaration-per-line, no-param-reassign, no-useless-escape, prefer-template, consistent-return, wrap-iife, prefer-arrow-callback, camelcase, no-unused-vars, no-useless-return, vars-on-top, max-len */
+
+import emojiMap from 'emojis/digests.json';
+import emojiAliases from 'emojis/aliases.json';
+import { glEmojiTag } from '~/behaviors/gl_emoji';
+
+// Creates the variables for setting up GFM auto-completion
+window.gl = window.gl || {};
+
+function sanitize(str) {
+  return str.replace(/<(?:.|\n)*?>/gm, '');
+}
+
+window.gl.GfmAutoComplete = {
+  dataSources: {},
+  defaultLoadingData: ['loading'],
+  cachedData: {},
+  isLoadingData: {},
+  atTypeMap: {
+    ':': 'emojis',
+    '@': 'members',
+    '#': 'issues',
+    '!': 'mergeRequests',
+    '~': 'labels',
+    '%': 'milestones',
+    '/': 'commands'
+  },
+  // Emoji
+  Emoji: {
+    templateFunction: function(name) {
+      return `<li>
+        ${name} ${glEmojiTag(name)}
+      </li>
+      `;
+    }
+  },
+  // Team Members
+  Members: {
+    template: '<li>${avatarTag} ${username} <small>${title}</small></li>'
+  },
+  Labels: {
+    template: '<li><span class="dropdown-label-box" style="background: ${color}"></span> ${title}</li>'
+  },
+  // Issues and MergeRequests
+  Issues: {
+    template: '<li><small>${id}</small> ${title}</li>'
+  },
+  // Milestones
+  Milestones: {
+    template: '<li>${title}</li>'
+  },
+  Loading: {
+    template: '<li style="pointer-events: none;"><i class="fa fa-refresh fa-spin"></i> Loading...</li>'
+  },
+  DefaultOptions: {
+    sorter: function(query, items, searchKey) {
+      this.setting.highlightFirst = this.setting.alwaysHighlightFirst || query.length > 0;
+      if (gl.GfmAutoComplete.isLoading(items)) {
+        this.setting.highlightFirst = false;
+        return items;
+      }
+      return $.fn.atwho["default"].callbacks.sorter(query, items, searchKey);
+    },
+    filter: function(query, data, searchKey) {
+      if (gl.GfmAutoComplete.isLoading(data)) {
+        gl.GfmAutoComplete.fetchData(this.$inputor, this.at);
+        return data;
+      } else {
+        return $.fn.atwho["default"].callbacks.filter(query, data, searchKey);
+      }
+    },
+    beforeInsert: function(value) {
+      if (value && !this.setting.skipSpecialCharacterTest) {
+        var withoutAt = value.substring(1);
+        if (withoutAt && /[^\w\d]/.test(withoutAt)) value = value.charAt() + '"' + withoutAt + '"';
+      }
+      return value;
+    },
+    matcher: function (flag, subtext) {
+      // The below is taken from At.js source
+      // Tweaked to commands to start without a space only if char before is a non-word character
+      // https://github.com/ichord/At.js
+      var _a, _y, regexp, match, atSymbolsWithBar, atSymbolsWithoutBar;
+      atSymbolsWithBar = Object.keys(this.app.controllers).join('|');
+      atSymbolsWithoutBar = Object.keys(this.app.controllers).join('');
+      subtext = subtext.split(/\s+/g).pop();
+      flag = flag.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
+
+      _a = decodeURI("%C3%80");
+      _y = decodeURI("%C3%BF");
+
+      regexp = new RegExp("^(?:\\B|[^a-zA-Z0-9_" + atSymbolsWithoutBar + "]|\\s)" + flag + "(?!" + atSymbolsWithBar + ")((?:[A-Za-z" + _a + "-" + _y + "0-9_\'\.\+\-]|[^\\x00-\\x7a])*)$", 'gi');
+
+      match = regexp.exec(subtext);
+
+      if (match) {
+        return match[1];
+      } else {
+        return null;
+      }
+    }
+  },
+  setup: function(input) {
+    // Add GFM auto-completion to all input fields, that accept GFM input.
+    this.input = input || $('.js-gfm-input');
+    this.setupLifecycle();
+  },
+  setupLifecycle() {
+    this.input.each((i, input) => {
+      const $input = $(input);
+      $input.off('focus.setupAtWho').on('focus.setupAtWho', this.setupAtWho.bind(this, $input));
+      // This triggers at.js again
+      // Needed for slash commands with suffixes (ex: /label ~)
+      $input.on('inserted-commands.atwho', $input.trigger.bind($input, 'keyup'));
+    });
+  },
+  setupAtWho: function($input) {
+    // Emoji
+    $input.atwho({
+      at: ':',
+      displayTpl: function(value) {
+        return value && value.name ? this.Emoji.templateFunction(value.name) : this.Loading.template;
+      }.bind(this),
+      insertTpl: ':${name}:',
+      skipSpecialCharacterTest: true,
+      data: this.defaultLoadingData,
+      callbacks: {
+        sorter: this.DefaultOptions.sorter,
+        beforeInsert: this.DefaultOptions.beforeInsert,
+        filter: this.DefaultOptions.filter
+      }
+    });
+    // Team Members
+    $input.atwho({
+      at: '@',
+      displayTpl: function(value) {
+        return value.username != null ? this.Members.template : this.Loading.template;
+      }.bind(this),
+      insertTpl: '${atwho-at}${username}',
+      searchKey: 'search',
+      alwaysHighlightFirst: true,
+      skipSpecialCharacterTest: true,
+      data: this.defaultLoadingData,
+      callbacks: {
+        sorter: this.DefaultOptions.sorter,
+        filter: this.DefaultOptions.filter,
+        beforeInsert: this.DefaultOptions.beforeInsert,
+        matcher: this.DefaultOptions.matcher,
+        beforeSave: function(members) {
+          return $.map(members, function(m) {
+            let title = '';
+            if (m.username == null) {
+              return m;
+            }
+            title = m.name;
+            if (m.count) {
+              title += " (" + m.count + ")";
+            }
+
+            const autoCompleteAvatar = m.avatar_url || m.username.charAt(0).toUpperCase();
+            const imgAvatar = `<img src="${m.avatar_url}" alt="${m.username}" class="avatar avatar-inline center s26"/>`;
+            const txtAvatar = `<div class="avatar center avatar-inline s26">${autoCompleteAvatar}</div>`;
+
+            return {
+              username: m.username,
+              avatarTag: autoCompleteAvatar.length === 1 ? txtAvatar : imgAvatar,
+              title: sanitize(title),
+              search: sanitize(m.username + " " + m.name)
+            };
+          });
+        }
+      }
+    });
+    $input.atwho({
+      at: '#',
+      alias: 'issues',
+      searchKey: 'search',
+      displayTpl: function(value) {
+        return value.title != null ? this.Issues.template : this.Loading.template;
+      }.bind(this),
+      data: this.defaultLoadingData,
+      insertTpl: '${atwho-at}${id}',
+      callbacks: {
+        sorter: this.DefaultOptions.sorter,
+        filter: this.DefaultOptions.filter,
+        beforeInsert: this.DefaultOptions.beforeInsert,
+        matcher: this.DefaultOptions.matcher,
+        beforeSave: function(issues) {
+          return $.map(issues, function(i) {
+            if (i.title == null) {
+              return i;
+            }
+            return {
+              id: i.iid,
+              title: sanitize(i.title),
+              search: i.iid + " " + i.title
+            };
+          });
+        }
+      }
+    });
+    $input.atwho({
+      at: '%',
+      alias: 'milestones',
+      searchKey: 'search',
+      insertTpl: '${atwho-at}${title}',
+      displayTpl: function(value) {
+        return value.title != null ? this.Milestones.template : this.Loading.template;
+      }.bind(this),
+      data: this.defaultLoadingData,
+      callbacks: {
+        matcher: this.DefaultOptions.matcher,
+        sorter: this.DefaultOptions.sorter,
+        beforeInsert: this.DefaultOptions.beforeInsert,
+        filter: this.DefaultOptions.filter,
+        beforeSave: function(milestones) {
+          return $.map(milestones, function(m) {
+            if (m.title == null) {
+              return m;
+            }
+            return {
+              id: m.iid,
+              title: sanitize(m.title),
+              search: "" + m.title
+            };
+          });
+        }
+      }
+    });
+    $input.atwho({
+      at: '!',
+      alias: 'mergerequests',
+      searchKey: 'search',
+      displayTpl: function(value) {
+        return value.title != null ? this.Issues.template : this.Loading.template;
+      }.bind(this),
+      data: this.defaultLoadingData,
+      insertTpl: '${atwho-at}${id}',
+      callbacks: {
+        sorter: this.DefaultOptions.sorter,
+        filter: this.DefaultOptions.filter,
+        beforeInsert: this.DefaultOptions.beforeInsert,
+        matcher: this.DefaultOptions.matcher,
+        beforeSave: function(merges) {
+          return $.map(merges, function(m) {
+            if (m.title == null) {
+              return m;
+            }
+            return {
+              id: m.iid,
+              title: sanitize(m.title),
+              search: m.iid + " " + m.title
+            };
+          });
+        }
+      }
+    });
+    $input.atwho({
+      at: '~',
+      alias: 'labels',
+      searchKey: 'search',
+      data: this.defaultLoadingData,
+      displayTpl: function(value) {
+        return this.isLoading(value) ? this.Loading.template : this.Labels.template;
+      }.bind(this),
+      insertTpl: '${atwho-at}${title}',
+      callbacks: {
+        matcher: this.DefaultOptions.matcher,
+        beforeInsert: this.DefaultOptions.beforeInsert,
+        filter: this.DefaultOptions.filter,
+        sorter: this.DefaultOptions.sorter,
+        beforeSave: function(merges) {
+          if (gl.GfmAutoComplete.isLoading(merges)) return merges;
+          var sanitizeLabelTitle;
+          sanitizeLabelTitle = function(title) {
+            if (/[\w\?&]+\s+[\w\?&]+/g.test(title)) {
+              return "\"" + (sanitize(title)) + "\"";
+            } else {
+              return sanitize(title);
+            }
+          };
+          return $.map(merges, function(m) {
+            return {
+              title: sanitize(m.title),
+              color: m.color,
+              search: "" + m.title
+            };
+          });
+        }
+      }
+    });
+    // We don't instantiate the slash commands autocomplete for note and issue/MR edit forms
+    $input.filter('[data-supports-slash-commands="true"]').atwho({
+      at: '/',
+      alias: 'commands',
+      searchKey: 'search',
+      skipSpecialCharacterTest: true,
+      data: this.defaultLoadingData,
+      displayTpl: function(value) {
+        if (this.isLoading(value)) return this.Loading.template;
+        var tpl = '<li>/${name}';
+        if (value.aliases.length > 0) {
+          tpl += ' <small>(or /<%- aliases.join(", /") %>)</small>';
+        }
+        if (value.params.length > 0) {
+          tpl += ' <small><%- params.join(" ") %></small>';
+        }
+        if (value.description !== '') {
+          tpl += '<small class="description"><i><%- description %></i></small>';
+        }
+        tpl += '</li>';
+        return _.template(tpl)(value);
+      }.bind(this),
+      insertTpl: function(value) {
+        var tpl = "/${name} ";
+        var reference_prefix = null;
+        if (value.params.length > 0) {
+          reference_prefix = value.params[0][0];
+          if (/^[@%~]/.test(reference_prefix)) {
+            tpl += '<%- reference_prefix %>';
+          }
+        }
+        return _.template(tpl)({ reference_prefix: reference_prefix });
+      },
+      suffix: '',
+      callbacks: {
+        sorter: this.DefaultOptions.sorter,
+        filter: this.DefaultOptions.filter,
+        beforeInsert: this.DefaultOptions.beforeInsert,
+        beforeSave: function(commands) {
+          if (gl.GfmAutoComplete.isLoading(commands)) return commands;
+          return $.map(commands, function(c) {
+            var search = c.name;
+            if (c.aliases.length > 0) {
+              search = search + " " + c.aliases.join(" ");
+            }
+            return {
+              name: c.name,
+              aliases: c.aliases,
+              params: c.params,
+              description: c.description,
+              search: search
+            };
+          });
+        },
+        matcher: function(flag, subtext, should_startWithSpace, acceptSpaceBar) {
+          var regexp = /(?:^|\n)\/([A-Za-z_]*)$/gi;
+          var match = regexp.exec(subtext);
+          if (match) {
+            return match[1];
+          } else {
+            return null;
+          }
+        }
+      }
+    });
+    return;
+  },
+  fetchData: function($input, at) {
+    if (this.isLoadingData[at]) return;
+    this.isLoadingData[at] = true;
+    if (this.cachedData[at]) {
+      this.loadData($input, at, this.cachedData[at]);
+    } else if (this.atTypeMap[at] === 'emojis') {
+      this.loadData($input, at, Object.keys(emojiMap).concat(Object.keys(emojiAliases)));
+    } else {
+      $.getJSON(this.dataSources[this.atTypeMap[at]], (data) => {
+        this.loadData($input, at, data);
+      }).fail(() => { this.isLoadingData[at] = false; });
+    }
+  },
+  loadData: function($input, at, data) {
+    this.isLoadingData[at] = false;
+    this.cachedData[at] = data;
+    $input.atwho('load', at, data);
+    // This trigger at.js again
+    // otherwise we would be stuck with loading until the user types
+    return $input.trigger('keyup');
+  },
+  isLoading(data) {
+    var dataToInspect = data;
+    if (data && data.length > 0) {
+      dataToInspect = data[0];
+    }
+
+    var loadingState = this.defaultLoadingData[0];
+    return dataToInspect &&
+      (dataToInspect === loadingState || dataToInspect.name === loadingState);
+  }
+};
diff --git a/app/assets/javascripts/gfm_auto_complete.js.es6 b/app/assets/javascripts/gfm_auto_complete.js.es6
deleted file mode 100644
index 824413bf20f..00000000000
--- a/app/assets/javascripts/gfm_auto_complete.js.es6
+++ /dev/null
@@ -1,350 +0,0 @@
-/* eslint-disable */
-// Creates the variables for setting up GFM auto-completion
-(function() {
-  if (window.GitLab == null) {
-    window.GitLab = {};
-  }
-
-  GitLab.GfmAutoComplete = {
-    dataLoading: false,
-    dataLoaded: false,
-    cachedData: {},
-    dataSource: '',
-    // Emoji
-    Emoji: {
-      template: '<li>${name} <img alt="${name}" height="20" src="${path}" width="20" /></li>'
-    },
-    // Team Members
-    Members: {
-      template: '<li>${username} <small>${title}</small></li>'
-    },
-    Labels: {
-      template: '<li><span class="dropdown-label-box" style="background: ${color}"></span> ${title}</li>'
-    },
-    // Issues and MergeRequests
-    Issues: {
-      template: '<li><small>${id}</small> ${title}</li>'
-    },
-    // Milestones
-    Milestones: {
-      template: '<li>${title}</li>'
-    },
-    Loading: {
-      template: '<li><i class="fa fa-refresh fa-spin"></i> Loading...</li>'
-    },
-    DefaultOptions: {
-      sorter: function(query, items, searchKey) {
-        if ((items[0].name != null) && items[0].name === 'loading') {
-          return items;
-        }
-        return $.fn.atwho["default"].callbacks.sorter(query, items, searchKey);
-      },
-      filter: function(query, data, searchKey) {
-        if (data[0] === 'loading') {
-          return data;
-        }
-        return $.fn.atwho["default"].callbacks.filter(query, data, searchKey);
-      },
-      beforeInsert: function(value) {
-        if (!GitLab.GfmAutoComplete.dataLoaded) {
-          return this.at;
-        } else {
-          return value;
-        }
-      }
-    },
-    setup: _.debounce(function(input) {
-      // Add GFM auto-completion to all input fields, that accept GFM input.
-      this.input = input || $('.js-gfm-input');
-      // destroy previous instances
-      this.destroyAtWho();
-      // set up instances
-      this.setupAtWho();
-
-      if (this.dataSource && !this.dataLoading && !this.cachedData) {
-        this.dataLoading = true;
-        return this.fetchData(this.dataSource)
-          .done((data) => {
-            this.dataLoading = false;
-            this.loadData(data);
-          });
-        };
-
-      if (this.cachedData != null) {
-        return this.loadData(this.cachedData);
-      }
-    }, 1000),
-    setupAtWho: function() {
-      // Emoji
-      this.input.atwho({
-        at: ':',
-        displayTpl: (function(_this) {
-          return function(value) {
-            if (value.path != null) {
-              return _this.Emoji.template;
-            } else {
-              return _this.Loading.template;
-            }
-          };
-        })(this),
-        insertTpl: ':${name}:',
-        data: ['loading'],
-        callbacks: {
-          sorter: this.DefaultOptions.sorter,
-          filter: this.DefaultOptions.filter,
-          beforeInsert: this.DefaultOptions.beforeInsert
-        }
-      });
-      // Team Members
-      this.input.atwho({
-        at: '@',
-        displayTpl: (function(_this) {
-          return function(value) {
-            if (value.username != null) {
-              return _this.Members.template;
-            } else {
-              return _this.Loading.template;
-            }
-          };
-        })(this),
-        insertTpl: '${atwho-at}${username}',
-        searchKey: 'search',
-        data: ['loading'],
-        callbacks: {
-          sorter: this.DefaultOptions.sorter,
-          filter: this.DefaultOptions.filter,
-          beforeInsert: this.DefaultOptions.beforeInsert,
-          beforeSave: function(members) {
-            return $.map(members, function(m) {
-              var title;
-              if (m.username == null) {
-                return m;
-              }
-              title = m.name;
-              if (m.count) {
-                title += " (" + m.count + ")";
-              }
-              return {
-                username: m.username,
-                title: gl.utils.sanitize(title),
-                search: gl.utils.sanitize(m.username + " " + m.name)
-              };
-            });
-          }
-        }
-      });
-      this.input.atwho({
-        at: '#',
-        alias: 'issues',
-        searchKey: 'search',
-        displayTpl: (function(_this) {
-          return function(value) {
-            if (value.title != null) {
-              return _this.Issues.template;
-            } else {
-              return _this.Loading.template;
-            }
-          };
-        })(this),
-        data: ['loading'],
-        insertTpl: '${atwho-at}${id}',
-        callbacks: {
-          sorter: this.DefaultOptions.sorter,
-          filter: this.DefaultOptions.filter,
-          beforeInsert: this.DefaultOptions.beforeInsert,
-          beforeSave: function(issues) {
-            return $.map(issues, function(i) {
-              if (i.title == null) {
-                return i;
-              }
-              return {
-                id: i.iid,
-                title: gl.utils.sanitize(i.title),
-                search: i.iid + " " + i.title
-              };
-            });
-          }
-        }
-      });
-      this.input.atwho({
-        at: '%',
-        alias: 'milestones',
-        searchKey: 'search',
-        displayTpl: (function(_this) {
-          return function(value) {
-            if (value.title != null) {
-              return _this.Milestones.template;
-            } else {
-              return _this.Loading.template;
-            }
-          };
-        })(this),
-        insertTpl: '${atwho-at}"${title}"',
-        data: ['loading'],
-        callbacks: {
-          beforeSave: function(milestones) {
-            return $.map(milestones, function(m) {
-              if (m.title == null) {
-                return m;
-              }
-              return {
-                id: m.iid,
-                title: gl.utils.sanitize(m.title),
-                search: "" + m.title
-              };
-            });
-          }
-        }
-      });
-      this.input.atwho({
-        at: '!',
-        alias: 'mergerequests',
-        searchKey: 'search',
-        displayTpl: (function(_this) {
-          return function(value) {
-            if (value.title != null) {
-              return _this.Issues.template;
-            } else {
-              return _this.Loading.template;
-            }
-          };
-        })(this),
-        data: ['loading'],
-        insertTpl: '${atwho-at}${id}',
-        callbacks: {
-          sorter: this.DefaultOptions.sorter,
-          filter: this.DefaultOptions.filter,
-          beforeInsert: this.DefaultOptions.beforeInsert,
-          beforeSave: function(merges) {
-            return $.map(merges, function(m) {
-              if (m.title == null) {
-                return m;
-              }
-              return {
-                id: m.iid,
-                title: gl.utils.sanitize(m.title),
-                search: m.iid + " " + m.title
-              };
-            });
-          }
-        }
-      });
-      this.input.atwho({
-        at: '~',
-        alias: 'labels',
-        searchKey: 'search',
-        displayTpl: this.Labels.template,
-        insertTpl: '${atwho-at}${title}',
-        callbacks: {
-          beforeSave: function(merges) {
-            var sanitizeLabelTitle;
-            sanitizeLabelTitle = function(title) {
-              if (/[\w\?&]+\s+[\w\?&]+/g.test(title)) {
-                return "\"" + (gl.utils.sanitize(title)) + "\"";
-              } else {
-                return gl.utils.sanitize(title);
-              }
-            };
-            return $.map(merges, function(m) {
-              return {
-                title: sanitizeLabelTitle(m.title),
-                color: m.color,
-                search: "" + m.title
-              };
-            });
-          }
-        }
-      });
-      // We don't instantiate the slash commands autocomplete for note and issue/MR edit forms
-      this.input.filter('[data-supports-slash-commands="true"]').atwho({
-        at: '/',
-        alias: 'commands',
-        searchKey: 'search',
-        displayTpl: function(value) {
-          var tpl = '<li>/${name}';
-          if (value.aliases.length > 0) {
-            tpl += ' <small>(or /<%- aliases.join(", /") %>)</small>';
-          }
-          if (value.params.length > 0) {
-            tpl += ' <small><%- params.join(" ") %></small>';
-          }
-          if (value.description !== '') {
-            tpl += '<small class="description"><i><%- description %></i></small>';
-          }
-          tpl += '</li>';
-          return _.template(tpl)(value);
-        },
-        insertTpl: function(value) {
-          var tpl = "/${name} ";
-          var reference_prefix = null;
-          if (value.params.length > 0) {
-            reference_prefix = value.params[0][0];
-            if (/^[@%~]/.test(reference_prefix)) {
-              tpl += '<%- reference_prefix %>';
-            }
-          }
-          return _.template(tpl)({ reference_prefix: reference_prefix });
-        },
-        suffix: '',
-        callbacks: {
-          sorter: this.DefaultOptions.sorter,
-          filter: this.DefaultOptions.filter,
-          beforeInsert: this.DefaultOptions.beforeInsert,
-          beforeSave: function(commands) {
-            return $.map(commands, function(c) {
-              var search = c.name;
-              if (c.aliases.length > 0) {
-                search = search + " " + c.aliases.join(" ");
-              }
-              return {
-                name: c.name,
-                aliases: c.aliases,
-                params: c.params,
-                description: c.description,
-                search: search
-              };
-            });
-          },
-          matcher: function(flag, subtext, should_startWithSpace, acceptSpaceBar) {
-            var regexp = /(?:^|\n)\/([A-Za-z_]*)$/gi
-            var match = regexp.exec(subtext);
-            if (match) {
-              return match[1];
-            } else {
-              return null;
-            }
-          }
-        }
-      });
-      return;
-    },
-    destroyAtWho: function() {
-      return this.input.atwho('destroy');
-    },
-    fetchData: function(dataSource) {
-      return $.getJSON(dataSource);
-    },
-    loadData: function(data) {
-      this.cachedData = data;
-      this.dataLoaded = true;
-      // load members
-      this.input.atwho('load', '@', data.members);
-      // load issues
-      this.input.atwho('load', 'issues', data.issues);
-      // load milestones
-      this.input.atwho('load', 'milestones', data.milestones);
-      // load merge requests
-      this.input.atwho('load', 'mergerequests', data.mergerequests);
-      // load emojis
-      this.input.atwho('load', ':', data.emojis);
-      // load labels
-      this.input.atwho('load', '~', data.labels);
-      // load commands
-      this.input.atwho('load', '/', data.commands);
-      // This trigger at.js again
-      // otherwise we would be stuck with loading until the user types
-      return $(':focus').trigger('keyup');
-    }
-  };
-
-}).call(this);
diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js
index 98e43c4d088..a03f1202a6d 100644
--- a/app/assets/javascripts/gl_dropdown.js
+++ b/app/assets/javascripts/gl_dropdown.js
@@ -1,841 +1,848 @@
-/* eslint-disable */
-(function() {
-  var GitLabDropdown, GitLabDropdownFilter, GitLabDropdownRemote,
-    bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
-    indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
-
-  GitLabDropdownFilter = (function() {
-    var ARROW_KEY_CODES, BLUR_KEYCODES, HAS_VALUE_CLASS;
-
-    BLUR_KEYCODES = [27, 40];
-
-    ARROW_KEY_CODES = [38, 40];
-
-    HAS_VALUE_CLASS = "has-value";
-
-    function GitLabDropdownFilter(input, options) {
-      var $clearButton, $inputContainer, ref, timeout;
-      this.input = input;
-      this.options = options;
-      this.filterInputBlur = (ref = this.options.filterInputBlur) != null ? ref : true;
-      $inputContainer = this.input.parent();
-      $clearButton = $inputContainer.find('.js-dropdown-input-clear');
-      this.indeterminateIds = [];
-      $clearButton.on('click', (function(_this) {
-        // Clear click
-        return function(e) {
+/* eslint-disable func-names, space-before-function-paren, no-var, one-var, one-var-declaration-per-line, prefer-rest-params, max-len, vars-on-top, wrap-iife, no-unused-vars, quotes, no-shadow, no-cond-assign, prefer-arrow-callback, no-return-assign, no-else-return, camelcase, comma-dangle, no-lonely-if, guard-for-in, no-restricted-syntax, consistent-return, prefer-template, no-param-reassign, no-loop-func, no-mixed-operators */
+/* global fuzzaldrinPlus */
+
+var GitLabDropdown, GitLabDropdownFilter, GitLabDropdownRemote,
+  bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; },
+  indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i += 1) { if (i in this && this[i] === item) return i; } return -1; };
+
+GitLabDropdownFilter = (function() {
+  var ARROW_KEY_CODES, BLUR_KEYCODES, HAS_VALUE_CLASS;
+
+  BLUR_KEYCODES = [27, 40];
+
+  ARROW_KEY_CODES = [38, 40];
+
+  HAS_VALUE_CLASS = "has-value";
+
+  function GitLabDropdownFilter(input, options) {
+    var $clearButton, $inputContainer, ref, timeout;
+    this.input = input;
+    this.options = options;
+    this.filterInputBlur = (ref = this.options.filterInputBlur) != null ? ref : true;
+    $inputContainer = this.input.parent();
+    $clearButton = $inputContainer.find('.js-dropdown-input-clear');
+    $clearButton.on('click', (function(_this) {
+      // Clear click
+      return function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        return _this.input.val('').trigger('input').focus();
+      };
+    })(this));
+    // Key events
+    timeout = "";
+    this.input
+      .on('keydown', function (e) {
+        var keyCode = e.which;
+        if (keyCode === 13 && !options.elIsInput) {
           e.preventDefault();
-          e.stopPropagation();
-          return _this.input.val('').trigger('input').focus();
-        };
-      })(this));
-      // Key events
-      timeout = "";
-      this.input
-        .on('keydown', function (e) {
-          var keyCode = e.which;
-          if (keyCode === 13 && !options.elIsInput) {
-            e.preventDefault()
-          }
-        })
-        .on('input', function() {
-          if (this.input.val() !== "" && !$inputContainer.hasClass(HAS_VALUE_CLASS)) {
-            $inputContainer.addClass(HAS_VALUE_CLASS);
-          } else if (this.input.val() === "" && $inputContainer.hasClass(HAS_VALUE_CLASS)) {
-            $inputContainer.removeClass(HAS_VALUE_CLASS);
-          }
-          // Only filter asynchronously only if option remote is set
-          if (this.options.remote) {
-            clearTimeout(timeout);
-            return timeout = setTimeout(function() {
-              return this.options.query(this.input.val(), function(data) {
-                return this.options.callback(data);
-              }.bind(this));
-            }.bind(this), 250);
-          } else {
-            return this.filter(this.input.val());
-          }
-        }.bind(this));
-    }
+        }
+      })
+      .on('input', function() {
+        if (this.input.val() !== "" && !$inputContainer.hasClass(HAS_VALUE_CLASS)) {
+          $inputContainer.addClass(HAS_VALUE_CLASS);
+        } else if (this.input.val() === "" && $inputContainer.hasClass(HAS_VALUE_CLASS)) {
+          $inputContainer.removeClass(HAS_VALUE_CLASS);
+        }
+        // Only filter asynchronously only if option remote is set
+        if (this.options.remote) {
+          clearTimeout(timeout);
+          return timeout = setTimeout(function() {
+            $inputContainer.parent().addClass('is-loading');
+
+            return this.options.query(this.input.val(), function(data) {
+              $inputContainer.parent().removeClass('is-loading');
+              return this.options.callback(data);
+            }.bind(this));
+          }.bind(this), 250);
+        } else {
+          return this.filter(this.input.val());
+        }
+      }.bind(this));
+  }
 
-    GitLabDropdownFilter.prototype.shouldBlur = function(keyCode) {
-      return BLUR_KEYCODES.indexOf(keyCode) >= 0;
-    };
+  GitLabDropdownFilter.prototype.shouldBlur = function(keyCode) {
+    return BLUR_KEYCODES.indexOf(keyCode) !== -1;
+  };
 
-    GitLabDropdownFilter.prototype.filter = function(search_text) {
-      var data, elements, group, key, results, tmp;
-      if (this.options.onFilter) {
-        this.options.onFilter(search_text);
-      }
-      data = this.options.data();
-      if ((data != null) && !this.options.filterByText) {
-        results = data;
-        if (search_text !== '') {
-          // When data is an array of objects therefore [object Array] e.g.
-          // [
-          //   { prop: 'foo' },
-          //   { prop: 'baz' }
-          // ]
-          if (_.isArray(data)) {
-            results = fuzzaldrinPlus.filter(data, search_text, {
-              key: this.options.keys
-            });
-          } else {
-            // If data is grouped therefore an [object Object]. e.g.
-            // {
-            //   groupName1: [
-            //     { prop: 'foo' },
-            //     { prop: 'baz' }
-            //   ],
-            //   groupName2: [
-            //     { prop: 'abc' },
-            //     { prop: 'def' }
-            //   ]
-            // }
-            if (gl.utils.isObject(data)) {
-              results = {};
-              for (key in data) {
-                group = data[key];
-                tmp = fuzzaldrinPlus.filter(group, search_text, {
-                  key: this.options.keys
+  GitLabDropdownFilter.prototype.filter = function(search_text) {
+    var data, elements, group, key, results, tmp;
+    if (this.options.onFilter) {
+      this.options.onFilter(search_text);
+    }
+    data = this.options.data();
+    if ((data != null) && !this.options.filterByText) {
+      results = data;
+      if (search_text !== '') {
+        // When data is an array of objects therefore [object Array] e.g.
+        // [
+        //   { prop: 'foo' },
+        //   { prop: 'baz' }
+        // ]
+        if (_.isArray(data)) {
+          results = fuzzaldrinPlus.filter(data, search_text, {
+            key: this.options.keys
+          });
+        } else {
+          // If data is grouped therefore an [object Object]. e.g.
+          // {
+          //   groupName1: [
+          //     { prop: 'foo' },
+          //     { prop: 'baz' }
+          //   ],
+          //   groupName2: [
+          //     { prop: 'abc' },
+          //     { prop: 'def' }
+          //   ]
+          // }
+          if (gl.utils.isObject(data)) {
+            results = {};
+            for (key in data) {
+              group = data[key];
+              tmp = fuzzaldrinPlus.filter(group, search_text, {
+                key: this.options.keys
+              });
+              if (tmp.length) {
+                results[key] = tmp.map(function(item) {
+                  return item;
                 });
-                if (tmp.length) {
-                  results[key] = tmp.map(function(item) {
-                    return item;
-                  });
-                }
               }
             }
           }
         }
-        return this.options.callback(results);
-      } else {
-        elements = this.options.elements();
-        if (search_text) {
-          return elements.each(function() {
-            var $el, matches;
-            $el = $(this);
-            matches = fuzzaldrinPlus.match($el.text().trim(), search_text);
-            if (!$el.is('.dropdown-header')) {
-              if (matches.length) {
-                return $el.show().removeClass('option-hidden');
-              } else {
-                return $el.hide().addClass('option-hidden');
-              }
+      }
+      return this.options.callback(results);
+    } else {
+      elements = this.options.elements();
+      if (search_text) {
+        return elements.each(function() {
+          var $el, matches;
+          $el = $(this);
+          matches = fuzzaldrinPlus.match($el.text().trim(), search_text);
+          if (!$el.is('.dropdown-header')) {
+            if (matches.length) {
+              return $el.show().removeClass('option-hidden');
+            } else {
+              return $el.hide().addClass('option-hidden');
             }
-          });
-        } else {
-          return elements.show().removeClass('option-hidden');
-        }
+          }
+        });
+      } else {
+        return elements.show().removeClass('option-hidden');
       }
-    };
+    }
+  };
 
-    return GitLabDropdownFilter;
+  return GitLabDropdownFilter;
+})();
+
+GitLabDropdownRemote = (function() {
+  function GitLabDropdownRemote(dataEndpoint, options) {
+    this.dataEndpoint = dataEndpoint;
+    this.options = options;
+  }
+
+  GitLabDropdownRemote.prototype.execute = function() {
+    if (typeof this.dataEndpoint === "string") {
+      return this.fetchData();
+    } else if (typeof this.dataEndpoint === "function") {
+      if (this.options.beforeSend) {
+        this.options.beforeSend();
+      }
+      return this.dataEndpoint("", (function(_this) {
+        // Fetch the data by calling the data funcfion
+        return function(data) {
+          if (_this.options.success) {
+            _this.options.success(data);
+          }
+          if (_this.options.beforeSend) {
+            return _this.options.beforeSend();
+          }
+        };
+      })(this));
+    }
+  };
 
-  })();
+  GitLabDropdownRemote.prototype.fetchData = function() {
+    return $.ajax({
+      url: this.dataEndpoint,
+      dataType: this.options.dataType,
+      beforeSend: (function(_this) {
+        return function() {
+          if (_this.options.beforeSend) {
+            return _this.options.beforeSend();
+          }
+        };
+      })(this),
+      success: (function(_this) {
+        return function(data) {
+          if (_this.options.success) {
+            return _this.options.success(data);
+          }
+        };
+      })(this)
+    });
+  // Fetch the data through ajax if the data is a string
+  };
 
-  GitLabDropdownRemote = (function() {
-    function GitLabDropdownRemote(dataEndpoint, options) {
-      this.dataEndpoint = dataEndpoint;
-      this.options = options;
-    }
+  return GitLabDropdownRemote;
+})();
 
-    GitLabDropdownRemote.prototype.execute = function() {
-      if (typeof this.dataEndpoint === "string") {
-        return this.fetchData();
-      } else if (typeof this.dataEndpoint === "function") {
-        if (this.options.beforeSend) {
-          this.options.beforeSend();
-        }
-        return this.dataEndpoint("", (function(_this) {
-          // Fetch the data by calling the data funcfion
-          return function(data) {
-            if (_this.options.success) {
-              _this.options.success(data);
-            }
-            if (_this.options.beforeSend) {
-              return _this.options.beforeSend();
-            }
-          };
-        })(this));
-      }
-    };
+GitLabDropdown = (function() {
+  var ACTIVE_CLASS, FILTER_INPUT, INDETERMINATE_CLASS, LOADING_CLASS, PAGE_TWO_CLASS, NON_SELECTABLE_CLASSES, SELECTABLE_CLASSES, CURSOR_SELECT_SCROLL_PADDING, currentIndex;
 
-    GitLabDropdownRemote.prototype.fetchData = function() {
-      return $.ajax({
-        url: this.dataEndpoint,
-        dataType: this.options.dataType,
-        beforeSend: (function(_this) {
-          return function() {
-            if (_this.options.beforeSend) {
-              return _this.options.beforeSend();
-            }
-          };
-        })(this),
-        success: (function(_this) {
-          return function(data) {
-            if (_this.options.success) {
-              return _this.options.success(data);
-            }
-          };
-        })(this)
-      });
-    // Fetch the data through ajax if the data is a string
-    };
+  LOADING_CLASS = "is-loading";
 
-    return GitLabDropdownRemote;
+  PAGE_TWO_CLASS = "is-page-two";
 
-  })();
+  ACTIVE_CLASS = "is-active";
 
-  GitLabDropdown = (function() {
-    var ACTIVE_CLASS, FILTER_INPUT, INDETERMINATE_CLASS, LOADING_CLASS, PAGE_TWO_CLASS, NON_SELECTABLE_CLASSES, SELECTABLE_CLASSES, currentIndex;
+  INDETERMINATE_CLASS = "is-indeterminate";
 
-    LOADING_CLASS = "is-loading";
+  currentIndex = -1;
 
-    PAGE_TWO_CLASS = "is-page-two";
+  NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-link';
 
-    ACTIVE_CLASS = "is-active";
+  SELECTABLE_CLASSES = ".dropdown-content li:not(" + NON_SELECTABLE_CLASSES + ", .option-hidden)";
 
-    INDETERMINATE_CLASS = "is-indeterminate";
+  CURSOR_SELECT_SCROLL_PADDING = 5;
 
-    currentIndex = -1;
+  FILTER_INPUT = '.dropdown-input .dropdown-input-field';
 
-    NON_SELECTABLE_CLASSES = '.divider, .separator, .dropdown-header, .dropdown-menu-empty-link';
-
-    SELECTABLE_CLASSES = ".dropdown-content li:not(" + NON_SELECTABLE_CLASSES + ", .option-hidden)";
-
-    CURSOR_SELECT_SCROLL_PADDING = 5
-
-    FILTER_INPUT = '.dropdown-input .dropdown-input-field';
-
-    function GitLabDropdown(el1, options) {
-      var searchFields, selector, self;
-      this.el = el1;
-      this.options = options;
-      this.updateLabel = bind(this.updateLabel, this);
-      this.hidden = bind(this.hidden, this);
-      this.opened = bind(this.opened, this);
-      this.shouldPropagate = bind(this.shouldPropagate, this);
-      self = this;
-      selector = $(this.el).data("target");
-      this.dropdown = selector != null ? $(selector) : $(this.el).parent();
-      // Set Defaults
-      this.filterInput = this.options.filterInput || this.getElement(FILTER_INPUT);
-      this.highlight = !!this.options.highlight
-      this.filterInputBlur = this.options.filterInputBlur != null
-        ? this.options.filterInputBlur
-        : true;
-      // If no input is passed create a default one
-      self = this;
-      // If selector was passed
-      if (_.isString(this.filterInput)) {
-        this.filterInput = this.getElement(this.filterInput);
-      }
-      searchFields = this.options.search ? this.options.search.fields : [];
-      if (this.options.data) {
-        // If we provided data
-        // data could be an array of objects or a group of arrays
-        if (_.isObject(this.options.data) && !_.isFunction(this.options.data)) {
-          this.fullData = this.options.data;
-          currentIndex = -1;
-          this.parseData(this.options.data);
-          this.focusTextInput();
-        } else {
-          this.remote = new GitLabDropdownRemote(this.options.data, {
-            dataType: this.options.dataType,
-            beforeSend: this.toggleLoading.bind(this),
-            success: (function(_this) {
-              return function(data) {
-                _this.fullData = data;
-                _this.parseData(_this.fullData);
-                _this.focusTextInput();
-                if (_this.options.filterable && _this.filter && _this.filter.input) {
-                  return _this.filter.input.trigger('input');
-                }
-              };
-            // Remote data
-            })(this)
-          });
-        }
-      }
-      // Init filterable
-      if (this.options.filterable) {
-        this.filter = new GitLabDropdownFilter(this.filterInput, {
-          elIsInput: $(this.el).is('input'),
-          filterInputBlur: this.filterInputBlur,
-          filterByText: this.options.filterByText,
-          onFilter: this.options.onFilter,
-          remote: this.options.filterRemote,
-          query: this.options.data,
-          keys: searchFields,
-          elements: (function(_this) {
-            return function() {
-              selector = '.dropdown-content li:not(' + NON_SELECTABLE_CLASSES + ')';
-              if (_this.dropdown.find('.dropdown-toggle-page').length) {
-                selector = ".dropdown-page-one " + selector;
-              }
-              return $(selector);
-            };
-          })(this),
-          data: (function(_this) {
-            return function() {
-              return _this.fullData;
-            };
-          })(this),
-          callback: (function(_this) {
+  function GitLabDropdown(el1, options) {
+    var searchFields, selector, self;
+    this.el = el1;
+    this.options = options;
+    this.updateLabel = bind(this.updateLabel, this);
+    this.hidden = bind(this.hidden, this);
+    this.opened = bind(this.opened, this);
+    this.shouldPropagate = bind(this.shouldPropagate, this);
+    self = this;
+    selector = $(this.el).data("target");
+    this.dropdown = selector != null ? $(selector) : $(this.el).parent();
+    // Set Defaults
+    this.filterInput = this.options.filterInput || this.getElement(FILTER_INPUT);
+    this.highlight = !!this.options.highlight;
+    this.filterInputBlur = this.options.filterInputBlur != null
+      ? this.options.filterInputBlur
+      : true;
+    // If no input is passed create a default one
+    self = this;
+    // If selector was passed
+    if (_.isString(this.filterInput)) {
+      this.filterInput = this.getElement(this.filterInput);
+    }
+    searchFields = this.options.search ? this.options.search.fields : [];
+    if (this.options.data) {
+      // If we provided data
+      // data could be an array of objects or a group of arrays
+      if (_.isObject(this.options.data) && !_.isFunction(this.options.data)) {
+        this.fullData = this.options.data;
+        currentIndex = -1;
+        this.parseData(this.options.data);
+        this.focusTextInput();
+      } else {
+        this.remote = new GitLabDropdownRemote(this.options.data, {
+          dataType: this.options.dataType,
+          beforeSend: this.toggleLoading.bind(this),
+          success: (function(_this) {
             return function(data) {
-              _this.parseData(data);
-              if (_this.filterInput.val() !== '') {
-                selector = SELECTABLE_CLASSES;
-                if (_this.dropdown.find('.dropdown-toggle-page').length) {
-                  selector = ".dropdown-page-one " + selector;
-                }
-                if ($(_this.el).is('input')) {
-                  currentIndex = -1;
-                } else {
-                  $(selector, _this.dropdown).first().find('a').addClass('is-focused');
-                  currentIndex = 0;
-                }
+              _this.fullData = data;
+              _this.parseData(_this.fullData);
+              _this.focusTextInput();
+              if (_this.options.filterable && _this.filter && _this.filter.input && _this.filter.input.val() && _this.filter.input.val().trim() !== '') {
+                return _this.filter.input.trigger('input');
               }
             };
+          // Remote data
           })(this)
         });
       }
-      // Event listeners
-      this.dropdown.on("shown.bs.dropdown", this.opened);
-      this.dropdown.on("hidden.bs.dropdown", this.hidden);
-      $(this.el).on("update.label", this.updateLabel);
-      this.dropdown.on("click", ".dropdown-menu, .dropdown-menu-close", this.shouldPropagate);
-      this.dropdown.on('keyup', (function(_this) {
-        return function(e) {
-          // Escape key
-          if (e.which === 27) {
-            return $('.dropdown-menu-close', _this.dropdown).trigger('click');
-          }
-        };
-      })(this));
-      this.dropdown.on('blur', 'a', (function(_this) {
-        return function(e) {
-          var $dropdownMenu, $relatedTarget;
-          if (e.relatedTarget != null) {
-            $relatedTarget = $(e.relatedTarget);
-            $dropdownMenu = $relatedTarget.closest('.dropdown-menu');
-            if ($dropdownMenu.length === 0) {
-              return _this.dropdown.removeClass('open');
+    }
+    // Init filterable
+    if (this.options.filterable) {
+      this.filter = new GitLabDropdownFilter(this.filterInput, {
+        elIsInput: $(this.el).is('input'),
+        filterInputBlur: this.filterInputBlur,
+        filterByText: this.options.filterByText,
+        onFilter: this.options.onFilter,
+        remote: this.options.filterRemote,
+        query: this.options.data,
+        keys: searchFields,
+        elements: (function(_this) {
+          return function() {
+            selector = '.dropdown-content li:not(' + NON_SELECTABLE_CLASSES + ')';
+            if (_this.dropdown.find('.dropdown-toggle-page').length) {
+              selector = ".dropdown-page-one " + selector;
+            }
+            return $(selector);
+          };
+        })(this),
+        data: (function(_this) {
+          return function() {
+            return _this.fullData;
+          };
+        })(this),
+        callback: (function(_this) {
+          return function(data) {
+            _this.parseData(data);
+            if (_this.filterInput.val() !== '') {
+              selector = SELECTABLE_CLASSES;
+              if (_this.dropdown.find('.dropdown-toggle-page').length) {
+                selector = ".dropdown-page-one " + selector;
+              }
+              if ($(_this.el).is('input')) {
+                currentIndex = -1;
+              } else {
+                $(selector, _this.dropdown).first().find('a').addClass('is-focused');
+                currentIndex = 0;
+              }
             }
+          };
+        })(this)
+      });
+    }
+    // Event listeners
+    this.dropdown.on("shown.bs.dropdown", this.opened);
+    this.dropdown.on("hidden.bs.dropdown", this.hidden);
+    $(this.el).on("update.label", this.updateLabel);
+    this.dropdown.on("click", ".dropdown-menu, .dropdown-menu-close", this.shouldPropagate);
+    this.dropdown.on('keyup', (function(_this) {
+      return function(e) {
+        // Escape key
+        if (e.which === 27) {
+          return $('.dropdown-menu-close', _this.dropdown).trigger('click');
+        }
+      };
+    })(this));
+    this.dropdown.on('blur', 'a', (function(_this) {
+      return function(e) {
+        var $dropdownMenu, $relatedTarget;
+        if (e.relatedTarget != null) {
+          $relatedTarget = $(e.relatedTarget);
+          $dropdownMenu = $relatedTarget.closest('.dropdown-menu');
+          if ($dropdownMenu.length === 0) {
+            return _this.dropdown.removeClass('open');
           }
+        }
+      };
+    })(this));
+    if (this.dropdown.find(".dropdown-toggle-page").length) {
+      this.dropdown.find(".dropdown-toggle-page, .dropdown-menu-back").on("click", (function(_this) {
+        return function(e) {
+          e.preventDefault();
+          e.stopPropagation();
+          return _this.togglePage();
         };
       })(this));
+    }
+    if (this.options.selectable) {
+      selector = ".dropdown-content a";
       if (this.dropdown.find(".dropdown-toggle-page").length) {
-        this.dropdown.find(".dropdown-toggle-page, .dropdown-menu-back").on("click", (function(_this) {
-          return function(e) {
-            e.preventDefault();
-            e.stopPropagation();
-            return _this.togglePage();
-          };
-        })(this));
-      }
-      if (this.options.selectable) {
-        selector = ".dropdown-content a";
-        if (this.dropdown.find(".dropdown-toggle-page").length) {
-          selector = ".dropdown-page-one .dropdown-content a";
+        selector = ".dropdown-page-one .dropdown-content a";
+      }
+      this.dropdown.on("click", selector, function(e) {
+        var $el, selected, selectedObj, isMarking;
+        $el = $(this);
+        selected = self.rowClicked($el);
+        selectedObj = selected ? selected[0] : null;
+        isMarking = selected ? selected[1] : null;
+        if (self.options.clicked) {
+          self.options.clicked(selectedObj, $el, e, isMarking);
         }
-        this.dropdown.on("click", selector, function(e) {
-          var $el, selected;
-          $el = $(this);
-          selected = self.rowClicked($el);
-          if (self.options.clicked) {
-            self.options.clicked(selected, $el, e);
-          }
 
-          // Update label right after all modifications in dropdown has been done
-          if (self.options.toggleLabel) {
-            self.updateLabel(selected, $el, self);
-          }
+        // Update label right after all modifications in dropdown has been done
+        if (self.options.toggleLabel) {
+          self.updateLabel(selectedObj, $el, self);
+        }
 
-          $el.trigger('blur');
-        });
-      }
+        $el.trigger('blur');
+      });
     }
+  }
 
-    // Finds an element inside wrapper element
-    GitLabDropdown.prototype.getElement = function(selector) {
-      return this.dropdown.find(selector);
-    };
+  // Finds an element inside wrapper element
+  GitLabDropdown.prototype.getElement = function(selector) {
+    return this.dropdown.find(selector);
+  };
 
-    GitLabDropdown.prototype.toggleLoading = function() {
-      return $('.dropdown-menu', this.dropdown).toggleClass(LOADING_CLASS);
-    };
+  GitLabDropdown.prototype.toggleLoading = function() {
+    return $('.dropdown-menu', this.dropdown).toggleClass(LOADING_CLASS);
+  };
 
-    GitLabDropdown.prototype.togglePage = function() {
-      var menu;
-      menu = $('.dropdown-menu', this.dropdown);
-      if (menu.hasClass(PAGE_TWO_CLASS)) {
-        if (this.remote) {
-          this.remote.execute();
-        }
-      }
-      menu.toggleClass(PAGE_TWO_CLASS);
-      // Focus first visible input on active page
-      return this.dropdown.find('[class^="dropdown-page-"]:visible :text:visible:first').focus();
-    };
-
-    GitLabDropdown.prototype.parseData = function(data) {
-      var full_html, groupData, html, name;
-      this.renderedData = data;
-      if (this.options.filterable && data.length === 0) {
-        // render no matching results
-        html = [this.noResults()];
-      } else {
-        // Handle array groups
-        if (gl.utils.isObject(data)) {
-          html = [];
-          for (name in data) {
-            groupData = data[name];
-            html.push(this.renderItem({
-              header: name
-            // Add header for each group
-            }, name));
-            this.renderData(groupData, name).map(function(item) {
-              return html.push(item);
-            });
-          }
-        } else {
-          // Render each row
-          html = this.renderData(data);
-        }
-      }
-      // Render the full menu
-      full_html = this.renderMenu(html);
-      return this.appendMenu(full_html);
-    };
-
-    GitLabDropdown.prototype.renderData = function(data, group) {
-      if (group == null) {
-        group = false;
+  GitLabDropdown.prototype.togglePage = function() {
+    var menu;
+    menu = $('.dropdown-menu', this.dropdown);
+    if (menu.hasClass(PAGE_TWO_CLASS)) {
+      if (this.remote) {
+        this.remote.execute();
       }
-      return data.map((function(_this) {
-        return function(obj, index) {
-          return _this.renderItem(obj, group, index);
-        };
-      })(this));
-    };
-
-    GitLabDropdown.prototype.shouldPropagate = function(e) {
-      var $target;
-      if (this.options.multiSelect) {
-        $target = $(e.target);
-        if ($target && !$target.hasClass('dropdown-menu-close') &&
-                       !$target.hasClass('dropdown-menu-close-icon') &&
-                       !$target.data('is-link')) {
-          e.stopPropagation();
-          return false;
-        } else {
-          return true;
+    }
+    menu.toggleClass(PAGE_TWO_CLASS);
+    // Focus first visible input on active page
+    return this.dropdown.find('[class^="dropdown-page-"]:visible :text:visible:first').focus();
+  };
+
+  GitLabDropdown.prototype.parseData = function(data) {
+    var full_html, groupData, html, name;
+    this.renderedData = data;
+    if (this.options.filterable && data.length === 0) {
+      // render no matching results
+      html = [this.noResults()];
+    } else {
+      // Handle array groups
+      if (gl.utils.isObject(data)) {
+        html = [];
+        for (name in data) {
+          groupData = data[name];
+          html.push(this.renderItem({
+            header: name
+          // Add header for each group
+          }, name));
+          this.renderData(groupData, name).map(function(item) {
+            return html.push(item);
+          });
         }
+      } else {
+        // Render each row
+        html = this.renderData(data);
       }
-    };
+    }
+    // Render the full menu
+    full_html = this.renderMenu(html);
+    return this.appendMenu(full_html);
+  };
 
-    GitLabDropdown.prototype.opened = function() {
-      var contentHtml;
-      this.resetRows();
-      this.addArrowKeyEvent();
+  GitLabDropdown.prototype.renderData = function(data, group) {
+    if (group == null) {
+      group = false;
+    }
+    return data.map((function(_this) {
+      return function(obj, index) {
+        return _this.renderItem(obj, group, index);
+      };
+    })(this));
+  };
 
-      if (this.options.setIndeterminateIds) {
-        this.options.setIndeterminateIds.call(this);
-      }
-      if (this.options.setActiveIds) {
-        this.options.setActiveIds.call(this);
-      }
-      // Makes indeterminate items effective
-      if (this.fullData && this.dropdown.find('.dropdown-menu-toggle').hasClass('js-filter-bulk-update')) {
-        this.parseData(this.fullData);
-      }
-      contentHtml = $('.dropdown-content', this.dropdown).html();
-      if (this.remote && contentHtml === "") {
-        this.remote.execute();
+  GitLabDropdown.prototype.shouldPropagate = function(e) {
+    var $target;
+    if (this.options.multiSelect) {
+      $target = $(e.target);
+      if ($target && !$target.hasClass('dropdown-menu-close') &&
+                     !$target.hasClass('dropdown-menu-close-icon') &&
+                     !$target.data('is-link')) {
+        e.stopPropagation();
+        return false;
       } else {
-        this.focusTextInput();
+        return true;
       }
+    }
+  };
 
-      if (this.options.showMenuAbove) {
-        this.positionMenuAbove();
-      }
+  GitLabDropdown.prototype.opened = function(e) {
+    var contentHtml;
+    this.resetRows();
+    this.addArrowKeyEvent();
 
-      return this.dropdown.trigger('shown.gl.dropdown');
-    };
+    // Makes indeterminate items effective
+    if (this.fullData && this.dropdown.find('.dropdown-menu-toggle').hasClass('js-filter-bulk-update')) {
+      this.parseData(this.fullData);
+    }
+    contentHtml = $('.dropdown-content', this.dropdown).html();
+    if (this.remote && contentHtml === "") {
+      this.remote.execute();
+    } else {
+      this.focusTextInput();
+    }
 
-    GitLabDropdown.prototype.positionMenuAbove = function() {
-      var $button = $(this.el);
-      var $menu = this.dropdown.find('.dropdown-menu');
+    if (this.options.showMenuAbove) {
+      this.positionMenuAbove();
+    }
 
-      $menu.css('top', ($button.height() + $menu.height()) * -1);
-    };
+    if (this.options.opened) {
+      this.options.opened.call(this, e);
+    }
 
-    GitLabDropdown.prototype.hidden = function(e) {
-      var $input;
-      this.resetRows();
-      this.removeArrayKeyEvent();
-      $input = this.dropdown.find(".dropdown-input-field");
-      if (this.options.filterable) {
-        $input.blur().val("");
-      }
-      // Triggering 'keyup' will re-render the dropdown which is not always required
-      // specially if we want to keep the state of the dropdown needed for bulk-assignment
-      if (!this.options.persistWhenHide) {
-        $input.trigger("input");
-      }
-      if (this.dropdown.find(".dropdown-toggle-page").length) {
-        $('.dropdown-menu', this.dropdown).removeClass(PAGE_TWO_CLASS);
-      }
-      if (this.options.hidden) {
-        this.options.hidden.call(this, e);
-      }
-      return this.dropdown.trigger('hidden.gl.dropdown');
-    };
+    return this.dropdown.trigger('shown.gl.dropdown');
+  };
 
-    // Render the full menu
-    GitLabDropdown.prototype.renderMenu = function(html) {
-      if (this.options.renderMenu) {
-        return this.options.renderMenu(html);
-      } else {
-        var ul = document.createElement('ul');
+  GitLabDropdown.prototype.positionMenuAbove = function() {
+    var $button = $(this.el);
+    var $menu = this.dropdown.find('.dropdown-menu');
 
-        for (var i = 0; i < html.length; i++) {
-          var el = html[i];
+    $menu.css('top', ($button.height() + $menu.height()) * -1);
+  };
 
-          if (el instanceof jQuery) {
-            el = el.get(0);
-          }
+  GitLabDropdown.prototype.hidden = function(e) {
+    var $input;
+    this.resetRows();
+    this.removeArrayKeyEvent();
+    $input = this.dropdown.find(".dropdown-input-field");
+    if (this.options.filterable) {
+      $input.blur();
+    }
+    if (this.dropdown.find(".dropdown-toggle-page").length) {
+      $('.dropdown-menu', this.dropdown).removeClass(PAGE_TWO_CLASS);
+    }
+    if (this.options.hidden) {
+      this.options.hidden.call(this, e);
+    }
+    return this.dropdown.trigger('hidden.gl.dropdown');
+  };
 
-          if (typeof el === 'string') {
-            ul.innerHTML += el;
-          } else {
-            ul.appendChild(el);
-          }
+  // Render the full menu
+  GitLabDropdown.prototype.renderMenu = function(html) {
+    if (this.options.renderMenu) {
+      return this.options.renderMenu(html);
+    } else {
+      var ul = document.createElement('ul');
+
+      for (var i = 0; i < html.length; i += 1) {
+        var el = html[i];
+
+        if (el instanceof jQuery) {
+          el = el.get(0);
         }
 
-        return ul;
+        if (typeof el === 'string') {
+          ul.innerHTML += el;
+        } else {
+          ul.appendChild(el);
+        }
       }
-    };
 
-    // Append the menu into the dropdown
-    GitLabDropdown.prototype.appendMenu = function(html) {
-      var selector;
-      selector = '.dropdown-content';
-      if (this.dropdown.find(".dropdown-toggle-page").length) {
-        selector = ".dropdown-page-one .dropdown-content";
-      }
-      return $(selector, this.dropdown).empty().append(html);
-    };
+      return ul;
+    }
+  };
+
+  // Append the menu into the dropdown
+  GitLabDropdown.prototype.appendMenu = function(html) {
+    return this.clearMenu().append(html);
+  };
+
+  GitLabDropdown.prototype.clearMenu = function() {
+    var selector;
+    selector = '.dropdown-content';
+    if (this.dropdown.find(".dropdown-toggle-page").length) {
+      selector = ".dropdown-page-one .dropdown-content";
+    }
+
+    return $(selector, this.dropdown).empty();
+  };
 
-    GitLabDropdown.prototype.renderItem = function(data, group, index) {
-      var field, fieldName, html, selected, text, url, value;
-      if (group == null) {
-        group = false;
+  GitLabDropdown.prototype.renderItem = function(data, group, index) {
+    var field, fieldName, html, selected, text, url, value;
+    if (group == null) {
+      group = false;
+    }
+    if (index == null) {
+      // Render the row
+      index = false;
+    }
+    html = document.createElement('li');
+    if (data === 'divider' || data === 'separator') {
+      html.className = data;
+      return html;
+    }
+    // Header
+    if (data.header != null) {
+      html.className = 'dropdown-header';
+      html.innerHTML = data.header;
+      return html;
+    }
+    if (this.options.renderRow) {
+      // Call the render function
+      html = this.options.renderRow.call(this.options, data, this);
+    } else {
+      if (!selected) {
+        value = this.options.id ? this.options.id(data) : data.id;
+        fieldName = this.options.fieldName;
+
+        if (value) { value = value.toString().replace(/'/g, '\\\''); }
+
+        field = this.dropdown.parent().find("input[name='" + fieldName + "'][value='" + value + "']");
+        if (field.length) {
+          selected = true;
+        }
       }
-      if (index == null) {
-        // Render the row
-        index = false;
+      // Set URL
+      if (this.options.url != null) {
+        url = this.options.url(data);
+      } else {
+        url = data.url != null ? data.url : '#';
       }
-      html = document.createElement('li');
-      if (data === 'divider' || data === 'separator') {
-        html.className = data;
-        return html;
+      // Set Text
+      if (this.options.text != null) {
+        text = this.options.text(data);
+      } else {
+        text = data.text != null ? data.text : '';
       }
-      // Header
-      if (data.header != null) {
-        html.className = 'dropdown-header';
-        html.innerHTML = data.header;
-        return html;
+      if (this.highlight) {
+        text = this.highlightTextMatches(text, this.filterInput.val());
       }
-      if (this.options.renderRow) {
-        // Call the render function
-        html = this.options.renderRow.call(this.options, data, this);
-      } else {
-        if (!selected) {
-          value = this.options.id ? this.options.id(data) : data.id;
-          fieldName = this.options.fieldName;
-
-          if (value) { value = value.toString().replace(/'/g, '\\\'') };
+      // Create the list item & the link
+      var link = document.createElement('a');
 
-          field = this.dropdown.parent().find("input[name='" + fieldName + "'][value='" + value + "']");
-          if (field.length) {
-            selected = true;
-          }
-        }
-        // Set URL
-        if (this.options.url != null) {
-          url = this.options.url(data);
-        } else {
-          url = data.url != null ? data.url : '#';
-        }
-        // Set Text
-        if (this.options.text != null) {
-          text = this.options.text(data);
-        } else {
-          text = data.text != null ? data.text : '';
-        }
-        if (this.highlight) {
-          text = this.highlightTextMatches(text, this.filterInput.val());
-        }
-        // Create the list item & the link
-        var link = document.createElement('a');
+      link.href = url;
+      link.innerHTML = text;
 
-        link.href = url;
-        link.innerHTML = text;
+      if (selected) {
+        link.className = 'is-active';
+      }
 
-        if (selected) {
-          link.className = 'is-active';
-        }
+      if (group) {
+        link.dataset.group = group;
+        link.dataset.index = index;
+      }
 
-        if (group) {
-          link.dataset.group = group;
-          link.dataset.index = index;
-        }
+      html.appendChild(link);
+    }
+    return html;
+  };
 
-        html.appendChild(link);
-      }
-      return html;
-    };
-
-    GitLabDropdown.prototype.highlightTextMatches = function(text, term) {
-      var occurrences;
-      occurrences = fuzzaldrinPlus.match(text, term);
-      return text.split('').map(function(character, i) {
-        if (indexOf.call(occurrences, i) >= 0) {
-          return "<b>" + character + "</b>";
-        } else {
-          return character;
-        }
-      }).join('');
-    };
-
-    GitLabDropdown.prototype.noResults = function() {
-      var html;
-      return html = "<li class='dropdown-menu-empty-link'> <a href='#' class='is-focused'> No matching results. </a> </li>";
-    };
-
-    GitLabDropdown.prototype.rowClicked = function(el) {
-      var field, fieldName, groupName, isInput, selectedIndex, selectedObject, value;
-      fieldName = this.options.fieldName;
-      isInput = $(this.el).is('input');
-      if (this.renderedData) {
-        groupName = el.data('group');
-        if (groupName) {
-          selectedIndex = el.data('index');
-          selectedObject = this.renderedData[groupName][selectedIndex];
-        } else {
-          selectedIndex = el.closest('li').index();
-          selectedObject = this.renderedData[selectedIndex];
-        }
+  GitLabDropdown.prototype.highlightTextMatches = function(text, term) {
+    var occurrences;
+    occurrences = fuzzaldrinPlus.match(text, term);
+    return text.split('').map(function(character, i) {
+      if (indexOf.call(occurrences, i) !== -1) {
+        return "<b>" + character + "</b>";
+      } else {
+        return character;
       }
+    }).join('');
+  };
 
-      if (this.options.vue) {
-        if (el.hasClass(ACTIVE_CLASS)) {
-          el.removeClass(ACTIVE_CLASS);
-        } else {
-          el.addClass(ACTIVE_CLASS);
-        }
+  GitLabDropdown.prototype.noResults = function() {
+    var html;
+    return html = "<li class='dropdown-menu-empty-link'> <a href='#' class='is-focused'> No matching results. </a> </li>";
+  };
 
-        return selectedObject;
-      }
+  GitLabDropdown.prototype.rowClicked = function(el) {
+    var field, fieldName, groupName, isInput, selectedIndex, selectedObject, value, isMarking;
 
-      field = [];
-      value = this.options.id
-        ? this.options.id(selectedObject, el)
-        : selectedObject.id;
-      if (isInput) {
-        field = $(this.el);
-      } else if(value) {
-        field = this.dropdown.parent().find("input[name='" + fieldName + "'][value='" + value.toString().replace(/'/g, '\\\'') + "']");
+    fieldName = this.options.fieldName;
+    isInput = $(this.el).is('input');
+    if (this.renderedData) {
+      groupName = el.data('group');
+      if (groupName) {
+        selectedIndex = el.data('index');
+        selectedObject = this.renderedData[groupName][selectedIndex];
+      } else {
+        selectedIndex = el.closest('li').index();
+        selectedObject = this.renderedData[selectedIndex];
       }
+    }
+
+    if (this.options.vue) {
       if (el.hasClass(ACTIVE_CLASS)) {
         el.removeClass(ACTIVE_CLASS);
-        if (field && field.length) {
-          if (isInput) {
-            field.val('');
-          } else {
-            field.remove();
-          }
-        }
-      } else if (el.hasClass(INDETERMINATE_CLASS)) {
-        el.addClass(ACTIVE_CLASS);
-        el.removeClass(INDETERMINATE_CLASS);
-        if (field && field.length && value == null) {
-          field.remove();
-        }
-        if ((!field || !field.length) && fieldName) {
-          this.addInput(fieldName, value, selectedObject);
-        }
       } else {
-        if (!this.options.multiSelect || el.hasClass('dropdown-clear-active')) {
-          this.dropdown.find("." + ACTIVE_CLASS).removeClass(ACTIVE_CLASS);
-          if (!isInput) {
-            this.dropdown.parent().find("input[name='" + fieldName + "']").remove();
-          }
-        }
-        if (field && field.length && value == null) {
-          field.remove();
-        }
-        // Toggle active class for the tick mark
         el.addClass(ACTIVE_CLASS);
-        if (value != null) {
-          if ((!field || !field.length) && fieldName) {
-            this.addInput(fieldName, value, selectedObject);
-          } else if (field && field.length) {
-            field.val(value).trigger('change');
-          }
-        }
       }
 
-      return selectedObject;
-    };
+      return [selectedObject];
+    }
 
-    GitLabDropdown.prototype.focusTextInput = function() {
-      if (this.options.filterable) { this.filterInput.focus() }
+    field = [];
+    value = this.options.id
+      ? this.options.id(selectedObject, el)
+      : selectedObject.id;
+    if (isInput) {
+      field = $(this.el);
+    } else if (value) {
+      field = this.dropdown.parent().find("input[name='" + fieldName + "'][value='" + value.toString().replace(/'/g, '\\\'') + "']");
     }
 
-    GitLabDropdown.prototype.addInput = function(fieldName, value, selectedObject) {
-      var $input;
-      // Create hidden input for form
-      $input = $('<input>').attr('type', 'hidden').attr('name', fieldName).val(value);
-      if (this.options.inputId != null) {
-        $input.attr('id', this.options.inputId);
-      }
-      return this.dropdown.before($input);
-    };
-
-    GitLabDropdown.prototype.selectRowAtIndex = function(index) {
-      var $el, selector;
-      // If we pass an option index
-      if (typeof index !== "undefined") {
-        selector = SELECTABLE_CLASSES + ":eq(" + index + ") a";
-      } else {
-        selector = ".dropdown-content .is-focused";
+    if (this.options.isSelectable && !this.options.isSelectable(selectedObject, el)) {
+      return;
+    }
+
+    if (el.hasClass(ACTIVE_CLASS)) {
+      isMarking = false;
+      el.removeClass(ACTIVE_CLASS);
+      if (field && field.length) {
+        this.clearField(field, isInput);
+      }
+    } else if (el.hasClass(INDETERMINATE_CLASS)) {
+      isMarking = true;
+      el.addClass(ACTIVE_CLASS);
+      el.removeClass(INDETERMINATE_CLASS);
+      if (field && field.length && value == null) {
+        this.clearField(field, isInput);
+      }
+      if ((!field || !field.length) && fieldName) {
+        this.addInput(fieldName, value, selectedObject);
+      }
+    } else {
+      isMarking = true;
+      if (!this.options.multiSelect || el.hasClass('dropdown-clear-active')) {
+        this.dropdown.find("." + ACTIVE_CLASS).removeClass(ACTIVE_CLASS);
+        if (!isInput) {
+          this.dropdown.parent().find("input[name='" + fieldName + "']").remove();
+        }
       }
-      if (this.dropdown.find(".dropdown-toggle-page").length) {
-        selector = ".dropdown-page-one " + selector;
+      if (field && field.length && value == null) {
+        this.clearField(field, isInput);
       }
-      // simulate a click on the first link
-      $el = $(selector, this.dropdown);
-      if ($el.length) {
-        var href = $el.attr('href');
-        if (href && href !== '#') {
-          Turbolinks.visit(href);
-        } else {
-          $el.first().trigger('click');
+      // Toggle active class for the tick mark
+      el.addClass(ACTIVE_CLASS);
+      if (value != null) {
+        if ((!field || !field.length) && fieldName) {
+          this.addInput(fieldName, value, selectedObject);
+        } else if (field && field.length) {
+          field.val(value).trigger('change');
         }
       }
-    };
+    }
 
-    GitLabDropdown.prototype.addArrowKeyEvent = function() {
-      var $input, ARROW_KEY_CODES, selector;
-      ARROW_KEY_CODES = [38, 40];
-      $input = this.dropdown.find(".dropdown-input-field");
-      selector = SELECTABLE_CLASSES;
-      if (this.dropdown.find(".dropdown-toggle-page").length) {
-        selector = ".dropdown-page-one " + selector;
+    return [selectedObject, isMarking];
+  };
+
+  GitLabDropdown.prototype.focusTextInput = function() {
+    if (this.options.filterable) { this.filterInput.focus(); }
+  };
+
+  GitLabDropdown.prototype.addInput = function(fieldName, value, selectedObject) {
+    var $input;
+    // Create hidden input for form
+    $input = $('<input>').attr('type', 'hidden').attr('name', fieldName).val(value);
+    if (this.options.inputId != null) {
+      $input.attr('id', this.options.inputId);
+    }
+    return this.dropdown.before($input);
+  };
+
+  GitLabDropdown.prototype.selectRowAtIndex = function(index) {
+    var $el, selector;
+    // If we pass an option index
+    if (typeof index !== "undefined") {
+      selector = SELECTABLE_CLASSES + ":eq(" + index + ") a";
+    } else {
+      selector = ".dropdown-content .is-focused";
+    }
+    if (this.dropdown.find(".dropdown-toggle-page").length) {
+      selector = ".dropdown-page-one " + selector;
+    }
+    // simulate a click on the first link
+    $el = $(selector, this.dropdown);
+    if ($el.length) {
+      var href = $el.attr('href');
+      if (href && href !== '#') {
+        gl.utils.visitUrl(href);
+      } else {
+        $el.first().trigger('click');
       }
-      return $('body').on('keydown', (function(_this) {
-        return function(e) {
-          var $listItems, PREV_INDEX, currentKeyCode;
-          currentKeyCode = e.which;
-          if (ARROW_KEY_CODES.indexOf(currentKeyCode) >= 0) {
-            e.preventDefault();
-            e.stopImmediatePropagation();
-            PREV_INDEX = currentIndex;
-            $listItems = $(selector, _this.dropdown);
-            // if @options.filterable
-            //   $input.blur()
-            if (currentKeyCode === 40) {
-              // Move down
-              if (currentIndex < ($listItems.length - 1)) {
-                currentIndex += 1;
-              }
-            } else if (currentKeyCode === 38) {
-              // Move up
-              if (currentIndex > 0) {
-                currentIndex -= 1;
-              }
+    }
+  };
+
+  GitLabDropdown.prototype.addArrowKeyEvent = function() {
+    var $input, ARROW_KEY_CODES, selector;
+    ARROW_KEY_CODES = [38, 40];
+    $input = this.dropdown.find(".dropdown-input-field");
+    selector = SELECTABLE_CLASSES;
+    if (this.dropdown.find(".dropdown-toggle-page").length) {
+      selector = ".dropdown-page-one " + selector;
+    }
+    return $('body').on('keydown', (function(_this) {
+      return function(e) {
+        var $listItems, PREV_INDEX, currentKeyCode;
+        currentKeyCode = e.which;
+        if (ARROW_KEY_CODES.indexOf(currentKeyCode) !== -1) {
+          e.preventDefault();
+          e.stopImmediatePropagation();
+          PREV_INDEX = currentIndex;
+          $listItems = $(selector, _this.dropdown);
+          // if @options.filterable
+          //   $input.blur()
+          if (currentKeyCode === 40) {
+            // Move down
+            if (currentIndex < ($listItems.length - 1)) {
+              currentIndex += 1;
             }
-            if (currentIndex !== PREV_INDEX) {
-              _this.highlightRowAtIndex($listItems, currentIndex);
+          } else if (currentKeyCode === 38) {
+            // Move up
+            if (currentIndex > 0) {
+              currentIndex -= 1;
             }
-            return false;
           }
-          if (currentKeyCode === 13 && currentIndex !== -1) {
-            e.preventDefault();
-            _this.selectRowAtIndex();
+          if (currentIndex !== PREV_INDEX) {
+            _this.highlightRowAtIndex($listItems, currentIndex);
           }
-        };
-      })(this));
-    };
-
-    GitLabDropdown.prototype.removeArrayKeyEvent = function() {
-      return $('body').off('keydown');
-    };
-
-    GitLabDropdown.prototype.resetRows = function resetRows() {
-      currentIndex = -1;
-      $('.is-focused', this.dropdown).removeClass('is-focused');
-    };
-
-    GitLabDropdown.prototype.highlightRowAtIndex = function($listItems, index) {
-      var $dropdownContent, $listItem, dropdownContentBottom, dropdownContentHeight, dropdownContentTop, dropdownScrollTop, listItemBottom, listItemHeight, listItemTop;
-      // Remove the class for the previously focused row
-      $('.is-focused', this.dropdown).removeClass('is-focused');
-      // Update the class for the row at the specific index
-      $listItem = $listItems.eq(index);
-      $listItem.find('a:first-child').addClass("is-focused");
-      // Dropdown content scroll area
-      $dropdownContent = $listItem.closest('.dropdown-content');
-      dropdownScrollTop = $dropdownContent.scrollTop();
-      dropdownContentHeight = $dropdownContent.outerHeight();
-      dropdownContentTop = $dropdownContent.prop('offsetTop');
-      dropdownContentBottom = dropdownContentTop + dropdownContentHeight;
-      // Get the offset bottom of the list item
-      listItemHeight = $listItem.outerHeight();
-      listItemTop = $listItem.prop('offsetTop');
-      listItemBottom = listItemTop + listItemHeight;
-      if (!index) {
-        // Scroll the dropdown content to the top
-        $dropdownContent.scrollTop(0)
-      } else if (index === ($listItems.length - 1)) {
-        // Scroll the dropdown content to the bottom
-        $dropdownContent.scrollTop($dropdownContent.prop('scrollHeight'));
-      } else if (listItemBottom > (dropdownContentBottom + dropdownScrollTop)) {
-        // Scroll the dropdown content down
-        $dropdownContent.scrollTop(listItemBottom - dropdownContentBottom + CURSOR_SELECT_SCROLL_PADDING);
-      } else if (listItemTop < (dropdownContentTop + dropdownScrollTop)) {
-        // Scroll the dropdown content up
-        return $dropdownContent.scrollTop(listItemTop - dropdownContentTop - CURSOR_SELECT_SCROLL_PADDING);
-      }
-    };
+          return false;
+        }
+        if (currentKeyCode === 13 && currentIndex !== -1) {
+          e.preventDefault();
+          _this.selectRowAtIndex();
+        }
+      };
+    })(this));
+  };
 
-    GitLabDropdown.prototype.updateLabel = function(selected, el, instance) {
-      if (selected == null) {
-        selected = null;
-      }
-      if (el == null) {
-        el = null;
-      }
-      if (instance == null) {
-        instance = null;
-      }
-      return $(this.el).find(".dropdown-toggle-text").text(this.options.toggleLabel(selected, el, instance));
-    };
+  GitLabDropdown.prototype.removeArrayKeyEvent = function() {
+    return $('body').off('keydown');
+  };
 
-    return GitLabDropdown;
+  GitLabDropdown.prototype.resetRows = function resetRows() {
+    currentIndex = -1;
+    $('.is-focused', this.dropdown).removeClass('is-focused');
+  };
+
+  GitLabDropdown.prototype.highlightRowAtIndex = function($listItems, index) {
+    var $dropdownContent, $listItem, dropdownContentBottom, dropdownContentHeight, dropdownContentTop, dropdownScrollTop, listItemBottom, listItemHeight, listItemTop;
+    // Remove the class for the previously focused row
+    $('.is-focused', this.dropdown).removeClass('is-focused');
+    // Update the class for the row at the specific index
+    $listItem = $listItems.eq(index);
+    $listItem.find('a:first-child').addClass("is-focused");
+    // Dropdown content scroll area
+    $dropdownContent = $listItem.closest('.dropdown-content');
+    dropdownScrollTop = $dropdownContent.scrollTop();
+    dropdownContentHeight = $dropdownContent.outerHeight();
+    dropdownContentTop = $dropdownContent.prop('offsetTop');
+    dropdownContentBottom = dropdownContentTop + dropdownContentHeight;
+    // Get the offset bottom of the list item
+    listItemHeight = $listItem.outerHeight();
+    listItemTop = $listItem.prop('offsetTop');
+    listItemBottom = listItemTop + listItemHeight;
+    if (!index) {
+      // Scroll the dropdown content to the top
+      $dropdownContent.scrollTop(0);
+    } else if (index === ($listItems.length - 1)) {
+      // Scroll the dropdown content to the bottom
+      $dropdownContent.scrollTop($dropdownContent.prop('scrollHeight'));
+    } else if (listItemBottom > (dropdownContentBottom + dropdownScrollTop)) {
+      // Scroll the dropdown content down
+      $dropdownContent.scrollTop(listItemBottom - dropdownContentBottom + CURSOR_SELECT_SCROLL_PADDING);
+    } else if (listItemTop < (dropdownContentTop + dropdownScrollTop)) {
+      // Scroll the dropdown content up
+      return $dropdownContent.scrollTop(listItemTop - dropdownContentTop - CURSOR_SELECT_SCROLL_PADDING);
+    }
+  };
 
-  })();
+  GitLabDropdown.prototype.updateLabel = function(selected, el, instance) {
+    if (selected == null) {
+      selected = null;
+    }
+    if (el == null) {
+      el = null;
+    }
+    if (instance == null) {
+      instance = null;
+    }
+    return $(this.el).find(".dropdown-toggle-text").text(this.options.toggleLabel(selected, el, instance));
+  };
 
-  $.fn.glDropdown = function(opts) {
-    return this.each(function() {
-      if (!$.data(this, 'glDropdown')) {
-        return $.data(this, 'glDropdown', new GitLabDropdown(this, opts));
-      }
-    });
+  GitLabDropdown.prototype.clearField = function(field, isInput) {
+    return isInput ? field.val('') : field.remove();
   };
 
-}).call(this);
+  return GitLabDropdown;
+})();
+
+$.fn.glDropdown = function(opts) {
+  return this.each(function() {
+    if (!$.data(this, 'glDropdown')) {
+      return $.data(this, 'glDropdown', new GitLabDropdown(this, opts));
+    }
+  });
+};
diff --git a/app/assets/javascripts/gl_field_error.js b/app/assets/javascripts/gl_field_error.js
new file mode 100644
index 00000000000..76de249ac3b
--- /dev/null
+++ b/app/assets/javascripts/gl_field_error.js
@@ -0,0 +1,162 @@
+/**
+ * This class overrides the browser's validation error bubbles, displaying custom
+ * error messages for invalid fields instead. To begin validating any form, add the
+ * class `gl-show-field-errors` to the form element, and ensure error messages are
+ * declared in each inputs' `title` attribute. If no title is declared for an invalid
+ * field the user attempts to submit, "This field is required." will be shown by default.
+ *
+ * Opt not to validate certain fields by adding the class `gl-field-error-ignore` to the input.
+ *
+ * Set a custom error anchor for error message to be injected after with the
+ * class `gl-field-error-anchor`
+ *
+ * Examples:
+ *
+ * Basic:
+ *
+ * <form class='gl-show-field-errors'>
+ *  <input type='text' name='username' title='Username is required.'/>
+ * </form>
+ *
+ * Ignore specific inputs (e.g. UsernameValidator):
+ *
+ * <form class='gl-show-field-errors'>
+ *   <div class="form-group>
+ *     <input type='text' class='gl-field-errors-ignore' pattern='[a-zA-Z0-9-_]+'/>
+ *   </div>
+ *   <div class="form-group">
+ *      <input type='text' name='username' title='Username is required.'/>
+ *    </div>
+ * </form>
+ *
+ * Custom Error Anchor (allows error message to be injected after specified element):
+ *
+ * <form class='gl-show-field-errors'>
+ *  <div class="form-group gl-field-error-anchor">
+ *    <input type='text' name='username' title='Username is required.'/>
+ *    // Error message typically injected here
+ *  </div>
+ *  // Error message now injected here
+ * </form>
+ *
+ */
+
+/**
+ * Regex Patterns in use:
+ *
+ * Only alphanumeric: : "[a-zA-Z0-9]+"
+ * No special characters : "[a-zA-Z0-9-_]+",
+ *
+ */
+
+const errorMessageClass = 'gl-field-error';
+const inputErrorClass = 'gl-field-error-outline';
+const errorAnchorSelector = '.gl-field-error-anchor';
+const ignoreInputSelector = '.gl-field-error-ignore';
+
+class GlFieldError {
+  constructor({ input, formErrors }) {
+    this.inputElement = $(input);
+    this.inputDomElement = this.inputElement.get(0);
+    this.form = formErrors;
+    this.errorMessage = this.inputElement.attr('title') || 'This field is required.';
+    this.fieldErrorElement = $(`<p class='${errorMessageClass} hide'>${this.errorMessage}</p>`);
+
+    this.state = {
+      valid: false,
+      empty: true,
+    };
+
+    this.initFieldValidation();
+  }
+
+  initFieldValidation() {
+    const customErrorAnchor = this.inputElement.parents(errorAnchorSelector);
+    const errorAnchor = customErrorAnchor.length ? customErrorAnchor : this.inputElement;
+
+    // hidden when injected into DOM
+    errorAnchor.after(this.fieldErrorElement);
+    this.inputElement.off('invalid').on('invalid', this.handleInvalidSubmit.bind(this));
+    this.scopedSiblings = this.safelySelectSiblings();
+  }
+
+  safelySelectSiblings() {
+    // Apply `ignoreSelector` in markup to siblings whose visibility should not be toggled
+    const unignoredSiblings = this.inputElement.siblings(`p:not(${ignoreInputSelector})`);
+    const parentContainer = this.inputElement.parent('.form-group');
+
+    // Only select siblings when they're scoped within a form-group with one input
+    const safelyScoped = parentContainer.length && parentContainer.find('input').length === 1;
+
+    return safelyScoped ? unignoredSiblings : this.fieldErrorElement;
+  }
+
+  renderValidity() {
+    this.renderClear();
+
+    if (this.state.valid) {
+      this.renderValid();
+    } else if (this.state.empty) {
+      this.renderEmpty();
+    } else if (!this.state.valid) {
+      this.renderInvalid();
+    }
+  }
+
+  handleInvalidSubmit(event) {
+    event.preventDefault();
+    const currentValue = this.accessCurrentValue();
+    this.state.valid = false;
+    this.state.empty = currentValue === '';
+
+    this.renderValidity();
+    this.form.focusOnFirstInvalid.apply(this.form);
+    // For UX, wait til after first invalid submission to check each keyup
+    this.inputElement.off('keyup.fieldValidator')
+      .on('keyup.fieldValidator', this.updateValidity.bind(this));
+  }
+
+  /* Get or set current input value */
+  accessCurrentValue(newVal) {
+    return newVal ? this.inputElement.val(newVal) : this.inputElement.val();
+  }
+
+  getInputValidity() {
+    return this.inputDomElement.validity.valid;
+  }
+
+  updateValidity() {
+    const inputVal = this.accessCurrentValue();
+    this.state.empty = !inputVal.length;
+    this.state.valid = this.getInputValidity();
+    this.renderValidity();
+  }
+
+  renderValid() {
+    return this.renderClear();
+  }
+
+  renderEmpty() {
+    return this.renderInvalid();
+  }
+
+  renderInvalid() {
+    this.inputElement.addClass(inputErrorClass);
+    this.scopedSiblings.hide();
+    return this.fieldErrorElement.show();
+  }
+
+  renderClear() {
+    const inputVal = this.accessCurrentValue();
+    if (!inputVal.split(' ').length) {
+      const trimmedInput = inputVal.trim();
+      this.accessCurrentValue(trimmedInput);
+    }
+    this.inputElement.removeClass(inputErrorClass);
+    this.scopedSiblings.hide();
+    this.fieldErrorElement.hide();
+  }
+}
+
+window.gl = window.gl || {};
+window.gl.GlFieldError = GlFieldError;
diff --git a/app/assets/javascripts/gl_field_error.js.es6 b/app/assets/javascripts/gl_field_error.js.es6
deleted file mode 100644
index f7cbecc0385..00000000000
--- a/app/assets/javascripts/gl_field_error.js.es6
+++ /dev/null
@@ -1,164 +0,0 @@
-/* eslint-disable no-param-reassign */
-((global) => {
-  /*
-   * This class overrides the browser's validation error bubbles, displaying custom
-   * error messages for invalid fields instead. To begin validating any form, add the
-   * class `gl-show-field-errors` to the form element, and ensure error messages are
-   * declared in each inputs' `title` attribute. If no title is declared for an invalid
-   * field the user attempts to submit, "This field is required." will be shown by default.
-   *
-   * Opt not to validate certain fields by adding the class `gl-field-error-ignore` to the input.
-   *
-   * Set a custom error anchor for error message to be injected after with the
-   * class `gl-field-error-anchor`
-   *
-   * Examples:
-   *
-   * Basic:
-   *
-   * <form class='gl-show-field-errors'>
-   *  <input type='text' name='username' title='Username is required.'/>
-   * </form>
-   *
-   * Ignore specific inputs (e.g. UsernameValidator):
-   *
-   * <form class='gl-show-field-errors'>
-   *   <div class="form-group>
-   *     <input type='text' class='gl-field-errors-ignore' pattern='[a-zA-Z0-9-_]+'/>
-   *   </div>
-   *   <div class="form-group">
-   *      <input type='text' name='username' title='Username is required.'/>
-   *    </div>
-   * </form>
-   *
-   * Custom Error Anchor (allows error message to be injected after specified element):
-   *
-   * <form class='gl-show-field-errors'>
-   *  <div class="form-group gl-field-error-anchor">
-   *    <input type='text' name='username' title='Username is required.'/>
-   *    // Error message typically injected here
-   *  </div>
-   *  // Error message now injected here
-   * </form>
-   *
-    * */
-
-  /*
-    * Regex Patterns in use:
-    *
-    * Only alphanumeric: : "[a-zA-Z0-9]+"
-    * No special characters : "[a-zA-Z0-9-_]+",
-    *
-    * */
-
-  const errorMessageClass = 'gl-field-error';
-  const inputErrorClass = 'gl-field-error-outline';
-  const errorAnchorSelector = '.gl-field-error-anchor';
-  const ignoreInputSelector = '.gl-field-error-ignore';
-
-  class GlFieldError {
-    constructor({ input, formErrors }) {
-      this.inputElement = $(input);
-      this.inputDomElement = this.inputElement.get(0);
-      this.form = formErrors;
-      this.errorMessage = this.inputElement.attr('title') || 'This field is required.';
-      this.fieldErrorElement = $(`<p class='${errorMessageClass} hide'>${this.errorMessage}</p>`);
-
-      this.state = {
-        valid: false,
-        empty: true,
-      };
-
-      this.initFieldValidation();
-    }
-
-    initFieldValidation() {
-      const customErrorAnchor = this.inputElement.parents(errorAnchorSelector);
-      const errorAnchor = customErrorAnchor.length ? customErrorAnchor : this.inputElement;
-
-      // hidden when injected into DOM
-      errorAnchor.after(this.fieldErrorElement);
-      this.inputElement.off('invalid').on('invalid', this.handleInvalidSubmit.bind(this));
-      this.scopedSiblings = this.safelySelectSiblings();
-    }
-
-    safelySelectSiblings() {
-      // Apply `ignoreSelector` in markup to siblings whose visibility should not be toggled
-      const unignoredSiblings = this.inputElement.siblings(`p:not(${ignoreInputSelector})`);
-      const parentContainer = this.inputElement.parent('.form-group');
-
-      // Only select siblings when they're scoped within a form-group with one input
-      const safelyScoped = parentContainer.length && parentContainer.find('input').length === 1;
-
-      return safelyScoped ? unignoredSiblings : this.fieldErrorElement;
-    }
-
-    renderValidity() {
-      this.renderClear();
-
-      if (this.state.valid) {
-        this.renderValid();
-      } else if (this.state.empty) {
-        this.renderEmpty();
-      } else if (!this.state.valid) {
-        this.renderInvalid();
-      }
-    }
-
-    handleInvalidSubmit(event) {
-      event.preventDefault();
-      const currentValue = this.accessCurrentValue();
-      this.state.valid = false;
-      this.state.empty = currentValue === '';
-
-      this.renderValidity();
-      this.form.focusOnFirstInvalid.apply(this.form);
-      // For UX, wait til after first invalid submission to check each keyup
-      this.inputElement.off('keyup.fieldValidator')
-        .on('keyup.fieldValidator', this.updateValidity.bind(this));
-    }
-
-    /* Get or set current input value */
-    accessCurrentValue(newVal) {
-      return newVal ? this.inputElement.val(newVal) : this.inputElement.val();
-    }
-
-    getInputValidity() {
-      return this.inputDomElement.validity.valid;
-    }
-
-    updateValidity() {
-      const inputVal = this.accessCurrentValue();
-      this.state.empty = !inputVal.length;
-      this.state.valid = this.getInputValidity();
-      this.renderValidity();
-    }
-
-    renderValid() {
-      return this.renderClear();
-    }
-
-    renderEmpty() {
-      return this.renderInvalid();
-    }
-
-    renderInvalid() {
-      this.inputElement.addClass(inputErrorClass);
-      this.scopedSiblings.hide();
-      return this.fieldErrorElement.show();
-    }
-
-    renderClear() {
-      const inputVal = this.accessCurrentValue();
-      if (!inputVal.split(' ').length) {
-        const trimmedInput = inputVal.trim();
-        this.accessCurrentValue(trimmedInput);
-      }
-      this.inputElement.removeClass(inputErrorClass);
-      this.scopedSiblings.hide();
-      this.fieldErrorElement.hide();
-    }
-  }
-
-  global.GlFieldError = GlFieldError;
-})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/gl_field_errors.js b/app/assets/javascripts/gl_field_errors.js
new file mode 100644
index 00000000000..636258ec555
--- /dev/null
+++ b/app/assets/javascripts/gl_field_errors.js
@@ -0,0 +1,47 @@
+/* eslint-disable comma-dangle, class-methods-use-this, max-len, space-before-function-paren, arrow-parens, no-param-reassign */
+
+require('./gl_field_error');
+
+const customValidationFlag = 'gl-field-error-ignore';
+
+class GlFieldErrors {
+  constructor(form) {
+    this.form = $(form);
+    this.state = {
+      inputs: [],
+      valid: false
+    };
+    this.initValidators();
+  }
+
+  initValidators () {
+    // register selectors here as needed
+    const validateSelectors = [':text', ':password', '[type=email]']
+      .map((selector) => `input${selector}`).join(',');
+
+    this.state.inputs = this.form.find(validateSelectors).toArray()
+      .filter((input) => !input.classList.contains(customValidationFlag))
+      .map((input) => new window.gl.GlFieldError({ input, formErrors: this }));
+
+    this.form.on('submit', this.catchInvalidFormSubmit);
+  }
+
+  /* Neccessary to prevent intercept and override invalid form submit
+   * because Safari & iOS quietly allow form submission when form is invalid
+   * and prevents disabling of invalid submit button by application.js */
+
+  catchInvalidFormSubmit (event) {
+    if (!event.currentTarget.checkValidity()) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+
+  focusOnFirstInvalid () {
+    const firstInvalid = this.state.inputs.filter((input) => !input.inputDomElement.validity.valid)[0];
+    firstInvalid.inputElement.focus();
+  }
+}
+
+window.gl = window.gl || {};
+window.gl.GlFieldErrors = GlFieldErrors;
diff --git a/app/assets/javascripts/gl_field_errors.js.es6 b/app/assets/javascripts/gl_field_errors.js.es6
deleted file mode 100644
index 6ce392d2a5b..00000000000
--- a/app/assets/javascripts/gl_field_errors.js.es6
+++ /dev/null
@@ -1,49 +0,0 @@
-/* eslint-disable */
-
-//= require gl_field_error
-
-((global) => {
-  const customValidationFlag = 'gl-field-error-ignore';
-
-  class GlFieldErrors {
-    constructor(form) {
-      this.form = $(form);
-      this.state = {
-        inputs: [],
-        valid: false
-      };
-      this.initValidators();
-    }
-
-    initValidators () {
-      // register selectors here as needed
-      const validateSelectors = [':text', ':password', '[type=email]']
-        .map((selector) => `input${selector}`).join(',');
-
-      this.state.inputs = this.form.find(validateSelectors).toArray()
-        .filter((input) => !input.classList.contains(customValidationFlag))
-        .map((input) => new global.GlFieldError({ input, formErrors: this }));
-
-      this.form.on('submit', this.catchInvalidFormSubmit);
-    }
-
-    /* Neccessary to prevent intercept and override invalid form submit
-     * because Safari & iOS quietly allow form submission when form is invalid
-     * and prevents disabling of invalid submit button by application.js */
-
-    catchInvalidFormSubmit (event) {
-      if (!event.currentTarget.checkValidity()) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-    }
-
-    focusOnFirstInvalid () {
-      const firstInvalid = this.state.inputs.filter((input) => !input.inputDomElement.validity.valid)[0];
-      firstInvalid.inputElement.focus();
-    }
-  }
-
-  global.GlFieldErrors = GlFieldErrors;
-
-})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/gl_form.js b/app/assets/javascripts/gl_form.js
index ce54c34492d..e7c98e16581 100644
--- a/app/assets/javascripts/gl_form.js
+++ b/app/assets/javascripts/gl_form.js
@@ -1,60 +1,90 @@
-/* eslint-disable */
-(function() {
-  this.GLForm = (function() {
-    function GLForm(form) {
-      this.form = form;
-      this.textarea = this.form.find('textarea.js-gfm-input');
-      // Before we start, we should clean up any previous data for this form
-      this.destroy();
-      // Setup the form
-      this.setupForm();
-      this.form.data('gl-form', this);
-    }
-
-    GLForm.prototype.destroy = function() {
-      // Clean form listeners
-      this.clearEventListeners();
-      return this.form.data('gl-form', null);
-    };
-
-    GLForm.prototype.setupForm = function() {
-      var isNewForm;
-      isNewForm = this.form.is(':not(.gfm-form)');
-      this.form.removeClass('js-new-note-form');
-      if (isNewForm) {
-        this.form.find('.div-dropzone').remove();
-        this.form.addClass('gfm-form');
-        // remove notify commit author checkbox for non-commit notes
-        gl.utils.disableButtonIfEmptyField(this.form.find('.js-note-text'), this.form.find('.js-comment-button'));
-        GitLab.GfmAutoComplete.setup(this.form.find('.js-gfm-input'));
-        new DropzoneInput(this.form);
-        autosize(this.textarea);
-        // form and textarea event listeners
-        this.addEventListeners();
-        gl.text.init(this.form);
-      }
-      // hide discard button
-      this.form.find('.js-note-discard').hide();
-      return this.form.show();
-    };
-
-    GLForm.prototype.clearEventListeners = function() {
-      this.textarea.off('focus');
-      this.textarea.off('blur');
-      return gl.text.removeListeners(this.form);
-    };
-
-    GLForm.prototype.addEventListeners = function() {
-      this.textarea.on('focus', function() {
-        return $(this).closest('.md-area').addClass('is-focused');
-      });
-      return this.textarea.on('blur', function() {
-        return $(this).closest('.md-area').removeClass('is-focused');
-      });
-    };
-
-    return GLForm;
-
-  })();
-
-}).call(this);
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-new, max-len */
+/* global GitLab */
+/* global DropzoneInput */
+/* global autosize */
+
+window.gl = window.gl || {};
+
+function GLForm(form) {
+  this.form = form;
+  this.textarea = this.form.find('textarea.js-gfm-input');
+  // Before we start, we should clean up any previous data for this form
+  this.destroy();
+  // Setup the form
+  this.setupForm();
+  this.form.data('gl-form', this);
+}
+
+GLForm.prototype.destroy = function() {
+  // Clean form listeners
+  this.clearEventListeners();
+  return this.form.data('gl-form', null);
+};
+
+GLForm.prototype.setupForm = function() {
+  var isNewForm;
+  isNewForm = this.form.is(':not(.gfm-form)');
+  this.form.removeClass('js-new-note-form');
+  if (isNewForm) {
+    this.form.find('.div-dropzone').remove();
+    this.form.addClass('gfm-form');
+    // remove notify commit author checkbox for non-commit notes
+    gl.utils.disableButtonIfEmptyField(this.form.find('.js-note-text'), this.form.find('.js-comment-button'));
+    gl.GfmAutoComplete.setup(this.form.find('.js-gfm-input'));
+    new DropzoneInput(this.form);
+    autosize(this.textarea);
+    // form and textarea event listeners
+    this.addEventListeners();
+  }
+  gl.text.init(this.form);
+  // hide discard button
+  this.form.find('.js-note-discard').hide();
+  this.form.show();
+  if (this.isAutosizeable) this.setupAutosize();
+};
+
+GLForm.prototype.setupAutosize = function () {
+  this.textarea.off('autosize:resized')
+    .on('autosize:resized', this.setHeightData.bind(this));
+
+  this.textarea.off('mouseup.autosize')
+    .on('mouseup.autosize', this.destroyAutosize.bind(this));
+
+  setTimeout(() => {
+    autosize(this.textarea);
+    this.textarea.css('resize', 'vertical');
+  }, 0);
+};
+
+GLForm.prototype.setHeightData = function () {
+  this.textarea.data('height', this.textarea.outerHeight());
+};
+
+GLForm.prototype.destroyAutosize = function () {
+  const outerHeight = this.textarea.outerHeight();
+
+  if (this.textarea.data('height') === outerHeight) return;
+
+  autosize.destroy(this.textarea);
+
+  this.textarea.data('height', outerHeight);
+  this.textarea.outerHeight(outerHeight);
+  this.textarea.css('max-height', window.outerHeight);
+};
+
+GLForm.prototype.clearEventListeners = function() {
+  this.textarea.off('focus');
+  this.textarea.off('blur');
+  return gl.text.removeListeners(this.form);
+};
+
+GLForm.prototype.addEventListeners = function() {
+  this.textarea.on('focus', function() {
+    return $(this).closest('.md-area').addClass('is-focused');
+  });
+  return this.textarea.on('blur', function() {
+    return $(this).closest('.md-area').removeClass('is-focused');
+  });
+};
+
+window.gl.GLForm = GLForm;
diff --git a/app/assets/javascripts/graphs/graphs_bundle.js b/app/assets/javascripts/graphs/graphs_bundle.js
index e103748d499..a433c7ba8f0 100644
--- a/app/assets/javascripts/graphs/graphs_bundle.js
+++ b/app/assets/javascripts/graphs/graphs_bundle.js
@@ -1,12 +1,6 @@
-/* eslint-disable */
-// This is a manifest file that'll be compiled into including all the files listed below.
-// Add new JavaScript code in separate files in this directory and they'll automatically
-// be included in the compiled file accessible from http://example.com/assets/application.js
-// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
-// the compiled file.
-//
-/*= require_tree . */
+import Chart from 'vendor/Chart';
+import ContributorsStatGraph from './stat_graph_contributors';
 
-(function() {
-
-}).call(this);
+// export to global scope
+window.Chart = Chart;
+window.ContributorsStatGraph = ContributorsStatGraph;
diff --git a/app/assets/javascripts/graphs/stat_graph.js b/app/assets/javascripts/graphs/stat_graph.js
deleted file mode 100644
index b796a9abb49..00000000000
--- a/app/assets/javascripts/graphs/stat_graph.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/* eslint-disable */
-(function() {
-  this.StatGraph = (function() {
-    function StatGraph() {}
-
-    StatGraph.log = {};
-
-    StatGraph.get_log = function() {
-      return this.log;
-    };
-
-    StatGraph.set_log = function(data) {
-      return this.log = data;
-    };
-
-    return StatGraph;
-
-  })();
-
-}).call(this);
diff --git a/app/assets/javascripts/graphs/stat_graph_contributors.js b/app/assets/javascripts/graphs/stat_graph_contributors.js
index 818bff0c413..c6be4c9e8fe 100644
--- a/app/assets/javascripts/graphs/stat_graph_contributors.js
+++ b/app/assets/javascripts/graphs/stat_graph_contributors.js
@@ -1,113 +1,111 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, one-var, camelcase, one-var-declaration-per-line, quotes, no-param-reassign, quote-props, comma-dangle, prefer-template, max-len, no-return-assign, no-shadow */
 
-/*= require d3 */
+import d3 from 'd3';
+import { ContributorsGraph, ContributorsAuthorGraph, ContributorsMasterGraph } from './stat_graph_contributors_graph';
+import ContributorsStatGraphUtil from './stat_graph_contributors_util';
 
-(function() {
-  this.ContributorsStatGraph = (function() {
-    function ContributorsStatGraph() {}
+export default (function() {
+  function ContributorsStatGraph() {}
 
-    ContributorsStatGraph.prototype.init = function(log) {
-      var author_commits, total_commits;
-      this.parsed_log = ContributorsStatGraphUtil.parse_log(log);
-      this.set_current_field("commits");
-      total_commits = ContributorsStatGraphUtil.get_total_data(this.parsed_log, this.field);
-      author_commits = ContributorsStatGraphUtil.get_author_data(this.parsed_log, this.field);
-      this.add_master_graph(total_commits);
-      this.add_authors_graph(author_commits);
-      return this.change_date_header();
-    };
+  ContributorsStatGraph.prototype.init = function(log) {
+    var author_commits, total_commits;
+    this.parsed_log = ContributorsStatGraphUtil.parse_log(log);
+    this.set_current_field("commits");
+    total_commits = ContributorsStatGraphUtil.get_total_data(this.parsed_log, this.field);
+    author_commits = ContributorsStatGraphUtil.get_author_data(this.parsed_log, this.field);
+    this.add_master_graph(total_commits);
+    this.add_authors_graph(author_commits);
+    return this.change_date_header();
+  };
 
-    ContributorsStatGraph.prototype.add_master_graph = function(total_data) {
-      this.master_graph = new ContributorsMasterGraph(total_data);
-      return this.master_graph.draw();
-    };
+  ContributorsStatGraph.prototype.add_master_graph = function(total_data) {
+    this.master_graph = new ContributorsMasterGraph(total_data);
+    return this.master_graph.draw();
+  };
 
-    ContributorsStatGraph.prototype.add_authors_graph = function(author_data) {
-      var limited_author_data;
-      this.authors = [];
-      limited_author_data = author_data.slice(0, 100);
-      return _.each(limited_author_data, (function(_this) {
-        return function(d) {
-          var author_graph, author_header;
-          author_header = _this.create_author_header(d);
-          $(".contributors-list").append(author_header);
-          _this.authors[d.author_name] = author_graph = new ContributorsAuthorGraph(d.dates);
-          return author_graph.draw();
-        };
-      })(this));
-    };
+  ContributorsStatGraph.prototype.add_authors_graph = function(author_data) {
+    var limited_author_data;
+    this.authors = [];
+    limited_author_data = author_data.slice(0, 100);
+    return _.each(limited_author_data, (function(_this) {
+      return function(d) {
+        var author_graph, author_header;
+        author_header = _this.create_author_header(d);
+        $(".contributors-list").append(author_header);
+        _this.authors[d.author_name] = author_graph = new ContributorsAuthorGraph(d.dates);
+        return author_graph.draw();
+      };
+    })(this));
+  };
 
-    ContributorsStatGraph.prototype.format_author_commit_info = function(author) {
-      var commits;
-      commits = $('<span/>', {
-        "class": 'graph-author-commits-count'
-      });
-      commits.text(author.commits + " commits");
-      return $('<span/>').append(commits);
-    };
+  ContributorsStatGraph.prototype.format_author_commit_info = function(author) {
+    var commits;
+    commits = $('<span/>', {
+      "class": 'graph-author-commits-count'
+    });
+    commits.text(author.commits + " commits");
+    return $('<span/>').append(commits);
+  };
 
-    ContributorsStatGraph.prototype.create_author_header = function(author) {
-      var author_commit_info, author_commit_info_span, author_email, author_name, list_item;
-      list_item = $('<li/>', {
-        "class": 'person',
-        style: 'display: block;'
-      });
-      author_name = $('<h4>' + author.author_name + '</h4>');
-      author_email = $('<p class="graph-author-email">' + author.author_email + '</p>');
-      author_commit_info_span = $('<span/>', {
-        "class": 'commits'
-      });
-      author_commit_info = this.format_author_commit_info(author);
-      author_commit_info_span.html(author_commit_info);
-      list_item.append(author_name);
-      list_item.append(author_email);
-      list_item.append(author_commit_info_span);
-      return list_item;
-    };
+  ContributorsStatGraph.prototype.create_author_header = function(author) {
+    var author_commit_info, author_commit_info_span, author_email, author_name, list_item;
+    list_item = $('<li/>', {
+      "class": 'person',
+      style: 'display: block;'
+    });
+    author_name = $('<h4>' + author.author_name + '</h4>');
+    author_email = $('<p class="graph-author-email">' + author.author_email + '</p>');
+    author_commit_info_span = $('<span/>', {
+      "class": 'commits'
+    });
+    author_commit_info = this.format_author_commit_info(author);
+    author_commit_info_span.html(author_commit_info);
+    list_item.append(author_name);
+    list_item.append(author_email);
+    list_item.append(author_commit_info_span);
+    return list_item;
+  };
 
-    ContributorsStatGraph.prototype.redraw_master = function() {
-      var total_data;
-      total_data = ContributorsStatGraphUtil.get_total_data(this.parsed_log, this.field);
-      this.master_graph.set_data(total_data);
-      return this.master_graph.redraw();
-    };
+  ContributorsStatGraph.prototype.redraw_master = function() {
+    var total_data;
+    total_data = ContributorsStatGraphUtil.get_total_data(this.parsed_log, this.field);
+    this.master_graph.set_data(total_data);
+    return this.master_graph.redraw();
+  };
 
-    ContributorsStatGraph.prototype.redraw_authors = function() {
-      var author_commits, x_domain;
-      $("ol").html("");
-      x_domain = ContributorsGraph.prototype.x_domain;
-      author_commits = ContributorsStatGraphUtil.get_author_data(this.parsed_log, this.field, x_domain);
-      return _.each(author_commits, (function(_this) {
-        return function(d) {
-          _this.redraw_author_commit_info(d);
-          $(_this.authors[d.author_name].list_item).appendTo("ol");
-          _this.authors[d.author_name].set_data(d.dates);
-          return _this.authors[d.author_name].redraw();
-        };
-      })(this));
-    };
+  ContributorsStatGraph.prototype.redraw_authors = function() {
+    var author_commits, x_domain;
+    $("ol").html("");
+    x_domain = ContributorsGraph.prototype.x_domain;
+    author_commits = ContributorsStatGraphUtil.get_author_data(this.parsed_log, this.field, x_domain);
+    return _.each(author_commits, (function(_this) {
+      return function(d) {
+        _this.redraw_author_commit_info(d);
+        $(_this.authors[d.author_name].list_item).appendTo("ol");
+        _this.authors[d.author_name].set_data(d.dates);
+        return _this.authors[d.author_name].redraw();
+      };
+    })(this));
+  };
 
-    ContributorsStatGraph.prototype.set_current_field = function(field) {
-      return this.field = field;
-    };
+  ContributorsStatGraph.prototype.set_current_field = function(field) {
+    return this.field = field;
+  };
 
-    ContributorsStatGraph.prototype.change_date_header = function() {
-      var print, print_date_format, x_domain;
-      x_domain = ContributorsGraph.prototype.x_domain;
-      print_date_format = d3.time.format("%B %e %Y");
-      print = print_date_format(x_domain[0]) + " - " + print_date_format(x_domain[1]);
-      return $("#date_header").text(print);
-    };
+  ContributorsStatGraph.prototype.change_date_header = function() {
+    var print, print_date_format, x_domain;
+    x_domain = ContributorsGraph.prototype.x_domain;
+    print_date_format = d3.time.format("%B %e %Y");
+    print = print_date_format(x_domain[0]) + " - " + print_date_format(x_domain[1]);
+    return $("#date_header").text(print);
+  };
 
-    ContributorsStatGraph.prototype.redraw_author_commit_info = function(author) {
-      var author_commit_info, author_list_item;
-      author_list_item = $(this.authors[author.author_name].list_item);
-      author_commit_info = this.format_author_commit_info(author);
-      return author_list_item.find("span").html(author_commit_info);
-    };
+  ContributorsStatGraph.prototype.redraw_author_commit_info = function(author) {
+    var author_commit_info, author_list_item;
+    author_list_item = $(this.authors[author.author_name].list_item);
+    author_commit_info = this.format_author_commit_info(author);
+    return author_list_item.find("span").html(author_commit_info);
+  };
 
-    return ContributorsStatGraph;
-
-  })();
-
-}).call(this);
+  return ContributorsStatGraph;
+})();
diff --git a/app/assets/javascripts/graphs/stat_graph_contributors_graph.js b/app/assets/javascripts/graphs/stat_graph_contributors_graph.js
index dea26a3f1e1..521bc77db66 100644
--- a/app/assets/javascripts/graphs/stat_graph_contributors_graph.js
+++ b/app/assets/javascripts/graphs/stat_graph_contributors_graph.js
@@ -1,278 +1,272 @@
-/* eslint-disable */
-
-/*= require d3 */
-
-(function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
-    extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
-    hasProp = {}.hasOwnProperty;
-
-  this.ContributorsGraph = (function() {
-    function ContributorsGraph() {}
-
-    ContributorsGraph.prototype.MARGIN = {
-      top: 20,
-      right: 20,
-      bottom: 30,
-      left: 50
-    };
-
-    ContributorsGraph.prototype.x_domain = null;
-
-    ContributorsGraph.prototype.y_domain = null;
-
-    ContributorsGraph.prototype.dates = [];
-
-    ContributorsGraph.set_x_domain = function(data) {
-      return ContributorsGraph.prototype.x_domain = data;
-    };
-
-    ContributorsGraph.set_y_domain = function(data) {
-      return ContributorsGraph.prototype.y_domain = [
-        0, d3.max(data, function(d) {
-          return d.commits = d.commits || d.additions || d.deletions;
-        })
-      ];
-    };
-
-    ContributorsGraph.init_x_domain = function(data) {
-      return ContributorsGraph.prototype.x_domain = d3.extent(data, function(d) {
-        return d.date;
-      });
-    };
-
-    ContributorsGraph.init_y_domain = function(data) {
-      return ContributorsGraph.prototype.y_domain = [
-        0, d3.max(data, function(d) {
-          return d.commits = d.commits || d.additions || d.deletions;
-        })
-      ];
-    };
-
-    ContributorsGraph.init_domain = function(data) {
-      ContributorsGraph.init_x_domain(data);
-      return ContributorsGraph.init_y_domain(data);
-    };
-
-    ContributorsGraph.set_dates = function(data) {
-      return ContributorsGraph.prototype.dates = data;
-    };
-
-    ContributorsGraph.prototype.set_x_domain = function() {
-      return this.x.domain(this.x_domain);
-    };
-
-    ContributorsGraph.prototype.set_y_domain = function() {
-      return this.y.domain(this.y_domain);
-    };
-
-    ContributorsGraph.prototype.set_domain = function() {
-      this.set_x_domain();
-      return this.set_y_domain();
-    };
-
-    ContributorsGraph.prototype.create_scale = function(width, height) {
-      this.x = d3.time.scale().range([0, width]).clamp(true);
-      return this.y = d3.scale.linear().range([height, 0]).nice();
-    };
-
-    ContributorsGraph.prototype.draw_x_axis = function() {
-      return this.svg.append("g").attr("class", "x axis").attr("transform", "translate(0, " + this.height + ")").call(this.x_axis);
-    };
-
-    ContributorsGraph.prototype.draw_y_axis = function() {
-      return this.svg.append("g").attr("class", "y axis").call(this.y_axis);
-    };
-
-    ContributorsGraph.prototype.set_data = function(data) {
-      return this.data = data;
-    };
-
-    return ContributorsGraph;
-
-  })();
-
-  this.ContributorsMasterGraph = (function(superClass) {
-    extend(ContributorsMasterGraph, superClass);
-
-    function ContributorsMasterGraph(data1) {
-      this.data = data1;
-      this.update_content = bind(this.update_content, this);
-      this.width = $('.content').width() - 70;
-      this.height = 200;
-      this.x = null;
-      this.y = null;
-      this.x_axis = null;
-      this.y_axis = null;
-      this.area = null;
-      this.svg = null;
-      this.brush = null;
-      this.x_max_domain = null;
+/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, max-len, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, comma-dangle, no-return-assign, prefer-arrow-callback, quotes, prefer-template, newline-per-chained-call, no-else-return, no-shadow */
+
+import d3 from 'd3';
+
+const bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
+const extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
+const hasProp = {}.hasOwnProperty;
+
+export const ContributorsGraph = (function() {
+  function ContributorsGraph() {}
+
+  ContributorsGraph.prototype.MARGIN = {
+    top: 20,
+    right: 20,
+    bottom: 30,
+    left: 50
+  };
+
+  ContributorsGraph.prototype.x_domain = null;
+
+  ContributorsGraph.prototype.y_domain = null;
+
+  ContributorsGraph.prototype.dates = [];
+
+  ContributorsGraph.set_x_domain = function(data) {
+    return ContributorsGraph.prototype.x_domain = data;
+  };
+
+  ContributorsGraph.set_y_domain = function(data) {
+    return ContributorsGraph.prototype.y_domain = [
+      0, d3.max(data, function(d) {
+        return d.commits = d.commits || d.additions || d.deletions;
+      })
+    ];
+  };
+
+  ContributorsGraph.init_x_domain = function(data) {
+    return ContributorsGraph.prototype.x_domain = d3.extent(data, function(d) {
+      return d.date;
+    });
+  };
+
+  ContributorsGraph.init_y_domain = function(data) {
+    return ContributorsGraph.prototype.y_domain = [
+      0, d3.max(data, function(d) {
+        return d.commits = d.commits || d.additions || d.deletions;
+      })
+    ];
+  };
+
+  ContributorsGraph.init_domain = function(data) {
+    ContributorsGraph.init_x_domain(data);
+    return ContributorsGraph.init_y_domain(data);
+  };
+
+  ContributorsGraph.set_dates = function(data) {
+    return ContributorsGraph.prototype.dates = data;
+  };
+
+  ContributorsGraph.prototype.set_x_domain = function() {
+    return this.x.domain(this.x_domain);
+  };
+
+  ContributorsGraph.prototype.set_y_domain = function() {
+    return this.y.domain(this.y_domain);
+  };
+
+  ContributorsGraph.prototype.set_domain = function() {
+    this.set_x_domain();
+    return this.set_y_domain();
+  };
+
+  ContributorsGraph.prototype.create_scale = function(width, height) {
+    this.x = d3.time.scale().range([0, width]).clamp(true);
+    return this.y = d3.scale.linear().range([height, 0]).nice();
+  };
+
+  ContributorsGraph.prototype.draw_x_axis = function() {
+    return this.svg.append("g").attr("class", "x axis").attr("transform", "translate(0, " + this.height + ")").call(this.x_axis);
+  };
+
+  ContributorsGraph.prototype.draw_y_axis = function() {
+    return this.svg.append("g").attr("class", "y axis").call(this.y_axis);
+  };
+
+  ContributorsGraph.prototype.set_data = function(data) {
+    return this.data = data;
+  };
+
+  return ContributorsGraph;
+})();
+
+export const ContributorsMasterGraph = (function(superClass) {
+  extend(ContributorsMasterGraph, superClass);
+
+  function ContributorsMasterGraph(data1) {
+    this.data = data1;
+    this.update_content = bind(this.update_content, this);
+    this.width = $('.content').width() - 70;
+    this.height = 200;
+    this.x = null;
+    this.y = null;
+    this.x_axis = null;
+    this.y_axis = null;
+    this.area = null;
+    this.svg = null;
+    this.brush = null;
+    this.x_max_domain = null;
+  }
+
+  ContributorsMasterGraph.prototype.process_dates = function(data) {
+    var dates;
+    dates = this.get_dates(data);
+    this.parse_dates(data);
+    return ContributorsGraph.set_dates(dates);
+  };
+
+  ContributorsMasterGraph.prototype.get_dates = function(data) {
+    return _.pluck(data, 'date');
+  };
+
+  ContributorsMasterGraph.prototype.parse_dates = function(data) {
+    var parseDate;
+    parseDate = d3.time.format("%Y-%m-%d").parse;
+    return data.forEach(function(d) {
+      return d.date = parseDate(d.date);
+    });
+  };
+
+  ContributorsMasterGraph.prototype.create_scale = function() {
+    return ContributorsMasterGraph.__super__.create_scale.call(this, this.width, this.height);
+  };
+
+  ContributorsMasterGraph.prototype.create_axes = function() {
+    this.x_axis = d3.svg.axis().scale(this.x).orient("bottom");
+    return this.y_axis = d3.svg.axis().scale(this.y).orient("left").ticks(5);
+  };
+
+  ContributorsMasterGraph.prototype.create_svg = function() {
+    return this.svg = d3.select("#contributors-master").append("svg").attr("width", this.width + this.MARGIN.left + this.MARGIN.right).attr("height", this.height + this.MARGIN.top + this.MARGIN.bottom).attr("class", "tint-box").append("g").attr("transform", "translate(" + this.MARGIN.left + "," + this.MARGIN.top + ")");
+  };
+
+  ContributorsMasterGraph.prototype.create_area = function(x, y) {
+    return this.area = d3.svg.area().x(function(d) {
+      return x(d.date);
+    }).y0(this.height).y1(function(d) {
+      d.commits = d.commits || d.additions || d.deletions;
+      return y(d.commits);
+    }).interpolate("basis");
+  };
+
+  ContributorsMasterGraph.prototype.create_brush = function() {
+    return this.brush = d3.svg.brush().x(this.x).on("brushend", this.update_content);
+  };
+
+  ContributorsMasterGraph.prototype.draw_path = function(data) {
+    return this.svg.append("path").datum(data).attr("class", "area").attr("d", this.area);
+  };
+
+  ContributorsMasterGraph.prototype.add_brush = function() {
+    return this.svg.append("g").attr("class", "selection").call(this.brush).selectAll("rect").attr("height", this.height);
+  };
+
+  ContributorsMasterGraph.prototype.update_content = function() {
+    ContributorsGraph.set_x_domain(this.brush.empty() ? this.x_max_domain : this.brush.extent());
+    return $("#brush_change").trigger('change');
+  };
+
+  ContributorsMasterGraph.prototype.draw = function() {
+    this.process_dates(this.data);
+    this.create_scale();
+    this.create_axes();
+    ContributorsGraph.init_domain(this.data);
+    this.x_max_domain = this.x_domain;
+    this.set_domain();
+    this.create_area(this.x, this.y);
+    this.create_svg();
+    this.create_brush();
+    this.draw_path(this.data);
+    this.draw_x_axis();
+    this.draw_y_axis();
+    return this.add_brush();
+  };
+
+  ContributorsMasterGraph.prototype.redraw = function() {
+    this.process_dates(this.data);
+    ContributorsGraph.set_y_domain(this.data);
+    this.set_y_domain();
+    this.svg.select("path").datum(this.data);
+    this.svg.select("path").attr("d", this.area);
+    return this.svg.select(".y.axis").call(this.y_axis);
+  };
+
+  return ContributorsMasterGraph;
+})(ContributorsGraph);
+
+export const ContributorsAuthorGraph = (function(superClass) {
+  extend(ContributorsAuthorGraph, superClass);
+
+  function ContributorsAuthorGraph(data1) {
+    this.data = data1;
+    // Don't split graph size in half for mobile devices.
+    if ($(window).width() < 768) {
+      this.width = $('.content').width() - 80;
+    } else {
+      this.width = ($('.content').width() / 2) - 100;
     }
-
-    ContributorsMasterGraph.prototype.process_dates = function(data) {
-      var dates;
-      dates = this.get_dates(data);
-      this.parse_dates(data);
-      return ContributorsGraph.set_dates(dates);
-    };
-
-    ContributorsMasterGraph.prototype.get_dates = function(data) {
-      return _.pluck(data, 'date');
-    };
-
-    ContributorsMasterGraph.prototype.parse_dates = function(data) {
+    this.height = 200;
+    this.x = null;
+    this.y = null;
+    this.x_axis = null;
+    this.y_axis = null;
+    this.area = null;
+    this.svg = null;
+    this.list_item = null;
+  }
+
+  ContributorsAuthorGraph.prototype.create_scale = function() {
+    return ContributorsAuthorGraph.__super__.create_scale.call(this, this.width, this.height);
+  };
+
+  ContributorsAuthorGraph.prototype.create_axes = function() {
+    this.x_axis = d3.svg.axis().scale(this.x).orient("bottom").ticks(8);
+    return this.y_axis = d3.svg.axis().scale(this.y).orient("left").ticks(5);
+  };
+
+  ContributorsAuthorGraph.prototype.create_area = function(x, y) {
+    return this.area = d3.svg.area().x(function(d) {
       var parseDate;
       parseDate = d3.time.format("%Y-%m-%d").parse;
-      return data.forEach(function(d) {
-        return d.date = parseDate(d.date);
-      });
-    };
-
-    ContributorsMasterGraph.prototype.create_scale = function() {
-      return ContributorsMasterGraph.__super__.create_scale.call(this, this.width, this.height);
-    };
-
-    ContributorsMasterGraph.prototype.create_axes = function() {
-      this.x_axis = d3.svg.axis().scale(this.x).orient("bottom");
-      return this.y_axis = d3.svg.axis().scale(this.y).orient("left").ticks(5);
-    };
-
-    ContributorsMasterGraph.prototype.create_svg = function() {
-      return this.svg = d3.select("#contributors-master").append("svg").attr("width", this.width + this.MARGIN.left + this.MARGIN.right).attr("height", this.height + this.MARGIN.top + this.MARGIN.bottom).attr("class", "tint-box").append("g").attr("transform", "translate(" + this.MARGIN.left + "," + this.MARGIN.top + ")");
-    };
-
-    ContributorsMasterGraph.prototype.create_area = function(x, y) {
-      return this.area = d3.svg.area().x(function(d) {
-        return x(d.date);
-      }).y0(this.height).y1(function(d) {
-        d.commits = d.commits || d.additions || d.deletions;
-        return y(d.commits);
-      }).interpolate("basis");
-    };
-
-    ContributorsMasterGraph.prototype.create_brush = function() {
-      return this.brush = d3.svg.brush().x(this.x).on("brushend", this.update_content);
-    };
-
-    ContributorsMasterGraph.prototype.draw_path = function(data) {
-      return this.svg.append("path").datum(data).attr("class", "area").attr("d", this.area);
-    };
-
-    ContributorsMasterGraph.prototype.add_brush = function() {
-      return this.svg.append("g").attr("class", "selection").call(this.brush).selectAll("rect").attr("height", this.height);
-    };
-
-    ContributorsMasterGraph.prototype.update_content = function() {
-      ContributorsGraph.set_x_domain(this.brush.empty() ? this.x_max_domain : this.brush.extent());
-      return $("#brush_change").trigger('change');
-    };
-
-    ContributorsMasterGraph.prototype.draw = function() {
-      this.process_dates(this.data);
-      this.create_scale();
-      this.create_axes();
-      ContributorsGraph.init_domain(this.data);
-      this.x_max_domain = this.x_domain;
-      this.set_domain();
-      this.create_area(this.x, this.y);
-      this.create_svg();
-      this.create_brush();
-      this.draw_path(this.data);
-      this.draw_x_axis();
-      this.draw_y_axis();
-      return this.add_brush();
-    };
-
-    ContributorsMasterGraph.prototype.redraw = function() {
-      this.process_dates(this.data);
-      ContributorsGraph.set_y_domain(this.data);
-      this.set_y_domain();
-      this.svg.select("path").datum(this.data);
-      this.svg.select("path").attr("d", this.area);
-      return this.svg.select(".y.axis").call(this.y_axis);
-    };
-
-    return ContributorsMasterGraph;
-
-  })(ContributorsGraph);
-
-  this.ContributorsAuthorGraph = (function(superClass) {
-    extend(ContributorsAuthorGraph, superClass);
-
-    function ContributorsAuthorGraph(data1) {
-      this.data = data1;
-      // Don't split graph size in half for mobile devices.
-      if ($(window).width() < 768) {
-        this.width = $('.content').width() - 80;
-      } else {
-        this.width = ($('.content').width() / 2) - 100;
-      }
-      this.height = 200;
-      this.x = null;
-      this.y = null;
-      this.x_axis = null;
-      this.y_axis = null;
-      this.area = null;
-      this.svg = null;
-      this.list_item = null;
-    }
-
-    ContributorsAuthorGraph.prototype.create_scale = function() {
-      return ContributorsAuthorGraph.__super__.create_scale.call(this, this.width, this.height);
-    };
-
-    ContributorsAuthorGraph.prototype.create_axes = function() {
-      this.x_axis = d3.svg.axis().scale(this.x).orient("bottom").ticks(8);
-      return this.y_axis = d3.svg.axis().scale(this.y).orient("left").ticks(5);
-    };
-
-    ContributorsAuthorGraph.prototype.create_area = function(x, y) {
-      return this.area = d3.svg.area().x(function(d) {
-        var parseDate;
-        parseDate = d3.time.format("%Y-%m-%d").parse;
-        return x(parseDate(d));
-      }).y0(this.height).y1((function(_this) {
-        return function(d) {
-          if (_this.data[d] != null) {
-            return y(_this.data[d]);
-          } else {
-            return y(0);
-          }
-        };
-      })(this)).interpolate("basis");
-    };
-
-    ContributorsAuthorGraph.prototype.create_svg = function() {
-      this.list_item = d3.selectAll(".person")[0].pop();
-      return this.svg = d3.select(this.list_item).append("svg").attr("width", this.width + this.MARGIN.left + this.MARGIN.right).attr("height", this.height + this.MARGIN.top + this.MARGIN.bottom).attr("class", "spark").append("g").attr("transform", "translate(" + this.MARGIN.left + "," + this.MARGIN.top + ")");
-    };
-
-    ContributorsAuthorGraph.prototype.draw_path = function(data) {
-      return this.svg.append("path").datum(data).attr("class", "area-contributor").attr("d", this.area);
-    };
-
-    ContributorsAuthorGraph.prototype.draw = function() {
-      this.create_scale();
-      this.create_axes();
-      this.set_domain();
-      this.create_area(this.x, this.y);
-      this.create_svg();
-      this.draw_path(this.dates);
-      this.draw_x_axis();
-      return this.draw_y_axis();
-    };
-
-    ContributorsAuthorGraph.prototype.redraw = function() {
-      this.set_domain();
-      this.svg.select("path").datum(this.dates);
-      this.svg.select("path").attr("d", this.area);
-      this.svg.select(".x.axis").call(this.x_axis);
-      return this.svg.select(".y.axis").call(this.y_axis);
-    };
-
-    return ContributorsAuthorGraph;
-
-  })(ContributorsGraph);
-
-}).call(this);
+      return x(parseDate(d));
+    }).y0(this.height).y1((function(_this) {
+      return function(d) {
+        if (_this.data[d] != null) {
+          return y(_this.data[d]);
+        } else {
+          return y(0);
+        }
+      };
+    })(this)).interpolate("basis");
+  };
+
+  ContributorsAuthorGraph.prototype.create_svg = function() {
+    this.list_item = d3.selectAll(".person")[0].pop();
+    return this.svg = d3.select(this.list_item).append("svg").attr("width", this.width + this.MARGIN.left + this.MARGIN.right).attr("height", this.height + this.MARGIN.top + this.MARGIN.bottom).attr("class", "spark").append("g").attr("transform", "translate(" + this.MARGIN.left + "," + this.MARGIN.top + ")");
+  };
+
+  ContributorsAuthorGraph.prototype.draw_path = function(data) {
+    return this.svg.append("path").datum(data).attr("class", "area-contributor").attr("d", this.area);
+  };
+
+  ContributorsAuthorGraph.prototype.draw = function() {
+    this.create_scale();
+    this.create_axes();
+    this.set_domain();
+    this.create_area(this.x, this.y);
+    this.create_svg();
+    this.draw_path(this.dates);
+    this.draw_x_axis();
+    return this.draw_y_axis();
+  };
+
+  ContributorsAuthorGraph.prototype.redraw = function() {
+    this.set_domain();
+    this.svg.select("path").datum(this.dates);
+    this.svg.select("path").attr("d", this.area);
+    this.svg.select(".x.axis").call(this.x_axis);
+    return this.svg.select(".y.axis").call(this.y_axis);
+  };
+
+  return ContributorsAuthorGraph;
+})(ContributorsGraph);
diff --git a/app/assets/javascripts/graphs/stat_graph_contributors_util.js b/app/assets/javascripts/graphs/stat_graph_contributors_util.js
index 362a77e868f..c583757f3f2 100644
--- a/app/assets/javascripts/graphs/stat_graph_contributors_util.js
+++ b/app/assets/javascripts/graphs/stat_graph_contributors_util.js
@@ -1,136 +1,137 @@
-/* eslint-disable */
-(function() {
-  window.ContributorsStatGraphUtil = {
-    parse_log: function(log) {
-      var by_author, by_email, data, entry, i, len, total;
-      total = {};
-      by_author = {};
-      by_email = {};
-      for (i = 0, len = log.length; i < len; i++) {
-        entry = log[i];
-        if (total[entry.date] == null) {
-          this.add_date(entry.date, total);
-        }
-        data = by_author[entry.author_name] || by_email[entry.author_email];
-        if (data == null) {
-          data = this.add_author(entry, by_author, by_email);
-        }
-        if (!data[entry.date]) {
-          this.add_date(entry.date, data);
-        }
-        this.store_data(entry, total[entry.date], data[entry.date]);
-      }
-      total = _.toArray(total);
-      by_author = _.toArray(by_author);
-      return {
-        total: total,
-        by_author: by_author
-      };
-    },
-    add_date: function(date, collection) {
-      collection[date] = {};
-      return collection[date].date = date;
-    },
-    add_author: function(author, by_author, by_email) {
-      var data;
-      data = {};
-      data.author_name = author.author_name;
-      data.author_email = author.author_email;
-      by_author[author.author_name] = data;
-      return by_email[author.author_email] = data;
-    },
-    store_data: function(entry, total, by_author) {
-      this.store_commits(total, by_author);
-      this.store_additions(entry, total, by_author);
-      return this.store_deletions(entry, total, by_author);
-    },
-    store_commits: function(total, by_author) {
-      this.add(total, "commits", 1);
-      return this.add(by_author, "commits", 1);
-    },
-    add: function(collection, field, value) {
-      if (collection[field] == null) {
-        collection[field] = 0;
-      }
-      return collection[field] += value;
-    },
-    store_additions: function(entry, total, by_author) {
-      if (entry.additions == null) {
-        entry.additions = 0;
-      }
-      this.add(total, "additions", entry.additions);
-      return this.add(by_author, "additions", entry.additions);
-    },
-    store_deletions: function(entry, total, by_author) {
-      if (entry.deletions == null) {
-        entry.deletions = 0;
+/* eslint-disable func-names, space-before-function-paren, object-shorthand, no-var, one-var, camelcase, one-var-declaration-per-line, comma-dangle, no-param-reassign, no-return-assign, quotes, prefer-arrow-callback, wrap-iife, consistent-return, no-unused-vars, max-len, no-cond-assign, no-else-return, max-len */
+
+export default {
+  parse_log: function(log) {
+    var by_author, by_email, data, entry, i, len, total, normalized_email;
+    total = {};
+    by_author = {};
+    by_email = {};
+    for (i = 0, len = log.length; i < len; i += 1) {
+      entry = log[i];
+      if (total[entry.date] == null) {
+        this.add_date(entry.date, total);
       }
-      this.add(total, "deletions", entry.deletions);
-      return this.add(by_author, "deletions", entry.deletions);
-    },
-    get_total_data: function(parsed_log, field) {
-      var log, total_data;
-      log = parsed_log.total;
-      total_data = this.pick_field(log, field);
-      return _.sortBy(total_data, function(d) {
-        return d.date;
-      });
-    },
-    pick_field: function(log, field) {
-      var total_data;
-      total_data = [];
-      _.each(log, function(d) {
-        return total_data.push(_.pick(d, [field, 'date']));
-      });
-      return total_data;
-    },
-    get_author_data: function(parsed_log, field, date_range) {
-      var author_data, log;
-      if (date_range == null) {
-        date_range = null;
+      normalized_email = entry.author_email.toLowerCase();
+      data = by_author[entry.author_name] || by_email[normalized_email];
+      if (data == null) {
+        data = this.add_author(entry, by_author, by_email);
       }
-      log = parsed_log.by_author;
-      author_data = [];
-      _.each(log, (function(_this) {
-        return function(log_entry) {
-          var parsed_log_entry;
-          parsed_log_entry = _this.parse_log_entry(log_entry, field, date_range);
-          if (!_.isEmpty(parsed_log_entry.dates)) {
-            return author_data.push(parsed_log_entry);
-          }
-        };
-      })(this));
-      return _.sortBy(author_data, function(d) {
-        return d[field];
-      }).reverse();
-    },
-    parse_log_entry: function(log_entry, field, date_range) {
-      var parsed_entry;
-      parsed_entry = {};
-      parsed_entry.author_name = log_entry.author_name;
-      parsed_entry.author_email = log_entry.author_email;
-      parsed_entry.dates = {};
-      parsed_entry.commits = parsed_entry.additions = parsed_entry.deletions = 0;
-      _.each(_.omit(log_entry, 'author_name', 'author_email'), (function(_this) {
-        return function(value, key) {
-          if (_this.in_range(value.date, date_range)) {
-            parsed_entry.dates[value.date] = value[field];
-            parsed_entry.commits += value.commits;
-            parsed_entry.additions += value.additions;
-            return parsed_entry.deletions += value.deletions;
-          }
-        };
-      })(this));
-      return parsed_entry;
-    },
-    in_range: function(date, date_range) {
-      var ref;
-      if (date_range === null || (date_range[0] <= (ref = new Date(date)) && ref <= date_range[1])) {
-        return true;
-      } else {
-        return false;
+      if (!data[entry.date]) {
+        this.add_date(entry.date, data);
       }
+      this.store_data(entry, total[entry.date], data[entry.date]);
     }
-  };
-
-}).call(this);
+    total = _.toArray(total);
+    by_author = _.toArray(by_author);
+    return {
+      total: total,
+      by_author: by_author
+    };
+  },
+  add_date: function(date, collection) {
+    collection[date] = {};
+    return collection[date].date = date;
+  },
+  add_author: function(author, by_author, by_email) {
+    var data, normalized_email;
+    data = {};
+    data.author_name = author.author_name;
+    data.author_email = author.author_email;
+    normalized_email = author.author_email.toLowerCase();
+    by_author[author.author_name] = data;
+    by_email[normalized_email] = data;
+    return data;
+  },
+  store_data: function(entry, total, by_author) {
+    this.store_commits(total, by_author);
+    this.store_additions(entry, total, by_author);
+    return this.store_deletions(entry, total, by_author);
+  },
+  store_commits: function(total, by_author) {
+    this.add(total, "commits", 1);
+    return this.add(by_author, "commits", 1);
+  },
+  add: function(collection, field, value) {
+    if (collection[field] == null) {
+      collection[field] = 0;
+    }
+    return collection[field] += value;
+  },
+  store_additions: function(entry, total, by_author) {
+    if (entry.additions == null) {
+      entry.additions = 0;
+    }
+    this.add(total, "additions", entry.additions);
+    return this.add(by_author, "additions", entry.additions);
+  },
+  store_deletions: function(entry, total, by_author) {
+    if (entry.deletions == null) {
+      entry.deletions = 0;
+    }
+    this.add(total, "deletions", entry.deletions);
+    return this.add(by_author, "deletions", entry.deletions);
+  },
+  get_total_data: function(parsed_log, field) {
+    var log, total_data;
+    log = parsed_log.total;
+    total_data = this.pick_field(log, field);
+    return _.sortBy(total_data, function(d) {
+      return d.date;
+    });
+  },
+  pick_field: function(log, field) {
+    var total_data;
+    total_data = [];
+    _.each(log, function(d) {
+      return total_data.push(_.pick(d, [field, 'date']));
+    });
+    return total_data;
+  },
+  get_author_data: function(parsed_log, field, date_range) {
+    var author_data, log;
+    if (date_range == null) {
+      date_range = null;
+    }
+    log = parsed_log.by_author;
+    author_data = [];
+    _.each(log, (function(_this) {
+      return function(log_entry) {
+        var parsed_log_entry;
+        parsed_log_entry = _this.parse_log_entry(log_entry, field, date_range);
+        if (!_.isEmpty(parsed_log_entry.dates)) {
+          return author_data.push(parsed_log_entry);
+        }
+      };
+    })(this));
+    return _.sortBy(author_data, function(d) {
+      return d[field];
+    }).reverse();
+  },
+  parse_log_entry: function(log_entry, field, date_range) {
+    var parsed_entry;
+    parsed_entry = {};
+    parsed_entry.author_name = log_entry.author_name;
+    parsed_entry.author_email = log_entry.author_email;
+    parsed_entry.dates = {};
+    parsed_entry.commits = parsed_entry.additions = parsed_entry.deletions = 0;
+    _.each(_.omit(log_entry, 'author_name', 'author_email'), (function(_this) {
+      return function(value, key) {
+        if (_this.in_range(value.date, date_range)) {
+          parsed_entry.dates[value.date] = value[field];
+          parsed_entry.commits += value.commits;
+          parsed_entry.additions += value.additions;
+          return parsed_entry.deletions += value.deletions;
+        }
+      };
+    })(this));
+    return parsed_entry;
+  },
+  in_range: function(date, date_range) {
+    var ref;
+    if (date_range === null || (date_range[0] <= (ref = new Date(date)) && ref <= date_range[1])) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+};
diff --git a/app/assets/javascripts/group_avatar.js b/app/assets/javascripts/group_avatar.js
index 774477dc7a9..f03b47b1c1d 100644
--- a/app/assets/javascripts/group_avatar.js
+++ b/app/assets/javascripts/group_avatar.js
@@ -1,22 +1,19 @@
-/* eslint-disable */
-(function() {
-  this.GroupAvatar = (function() {
-    function GroupAvatar() {
-      $('.js-choose-group-avatar-button').bind("click", function() {
-        var form;
-        form = $(this).closest("form");
-        return form.find(".js-group-avatar-input").click();
-      });
-      $('.js-group-avatar-input').bind("change", function() {
-        var filename, form;
-        form = $(this).closest("form");
-        filename = $(this).val().replace(/^.*[\\\/]/, '');
-        return form.find(".js-avatar-filename").text(filename);
-      });
-    }
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, quotes, no-var, one-var, one-var-declaration-per-line, no-useless-escape, max-len */
 
-    return GroupAvatar;
+window.GroupAvatar = (function() {
+  function GroupAvatar() {
+    $('.js-choose-group-avatar-button').on("click", function() {
+      var form;
+      form = $(this).closest("form");
+      return form.find(".js-group-avatar-input").click();
+    });
+    $('.js-group-avatar-input').on("change", function() {
+      var filename, form;
+      form = $(this).closest("form");
+      filename = $(this).val().replace(/^.*[\\\/]/, '');
+      return form.find(".js-avatar-filename").text(filename);
+    });
+  }
 
-  })();
-
-}).call(this);
+  return GroupAvatar;
+})();
diff --git a/app/assets/javascripts/group_label_subscription.js b/app/assets/javascripts/group_label_subscription.js
new file mode 100644
index 00000000000..7dc9ce898e8
--- /dev/null
+++ b/app/assets/javascripts/group_label_subscription.js
@@ -0,0 +1,52 @@
+/* eslint-disable func-names, object-shorthand, comma-dangle, wrap-iife, space-before-function-paren, no-param-reassign, max-len */
+
+class GroupLabelSubscription {
+  constructor(container) {
+    const $container = $(container);
+    this.$dropdown = $container.find('.dropdown');
+    this.$subscribeButtons = $container.find('.js-subscribe-button');
+    this.$unsubscribeButtons = $container.find('.js-unsubscribe-button');
+
+    this.$subscribeButtons.on('click', this.subscribe.bind(this));
+    this.$unsubscribeButtons.on('click', this.unsubscribe.bind(this));
+  }
+
+  unsubscribe(event) {
+    event.preventDefault();
+
+    const url = this.$unsubscribeButtons.attr('data-url');
+
+    $.ajax({
+      type: 'POST',
+      url: url
+    }).done(() => {
+      this.toggleSubscriptionButtons();
+      this.$unsubscribeButtons.removeAttr('data-url');
+    });
+  }
+
+  subscribe(event) {
+    event.preventDefault();
+
+    const $btn = $(event.currentTarget);
+    const url = $btn.attr('data-url');
+
+    this.$unsubscribeButtons.attr('data-url', url);
+
+    $.ajax({
+      type: 'POST',
+      url: url
+    }).done(() => {
+      this.toggleSubscriptionButtons();
+    });
+  }
+
+  toggleSubscriptionButtons() {
+    this.$dropdown.toggleClass('hidden');
+    this.$subscribeButtons.toggleClass('hidden');
+    this.$unsubscribeButtons.toggleClass('hidden');
+  }
+}
+
+window.gl = window.gl || {};
+window.gl.GroupLabelSubscription = GroupLabelSubscription;
diff --git a/app/assets/javascripts/group_name.js b/app/assets/javascripts/group_name.js
new file mode 100644
index 00000000000..62675d7e67e
--- /dev/null
+++ b/app/assets/javascripts/group_name.js
@@ -0,0 +1,64 @@
+
+import _ from 'underscore';
+
+export default class GroupName {
+  constructor() {
+    this.titleContainer = document.querySelector('.title-container');
+    this.title = document.querySelector('.title');
+    this.titleWidth = this.title.offsetWidth;
+    this.groupTitle = document.querySelector('.group-title');
+    this.groups = document.querySelectorAll('.group-path');
+    this.toggle = null;
+    this.isHidden = false;
+    this.init();
+  }
+
+  init() {
+    if (this.groups.length > 0) {
+      this.groups[this.groups.length - 1].classList.remove('hidable');
+      this.toggleHandler();
+      window.addEventListener('resize', _.debounce(this.toggleHandler.bind(this), 100));
+    }
+    this.render();
+  }
+
+  toggleHandler() {
+    if (this.titleWidth > this.titleContainer.offsetWidth) {
+      if (!this.toggle) this.createToggle();
+      this.showToggle();
+    } else if (this.toggle) {
+      this.hideToggle();
+    }
+  }
+
+  createToggle() {
+    this.toggle = document.createElement('button');
+    this.toggle.className = 'text-expander group-name-toggle';
+    this.toggle.setAttribute('aria-label', 'Toggle full path');
+    this.toggle.innerHTML = '...';
+    this.toggle.addEventListener('click', this.toggleGroups.bind(this));
+    this.titleContainer.insertBefore(this.toggle, this.title);
+    this.toggleGroups();
+  }
+
+  showToggle() {
+    this.title.classList.add('wrap');
+    this.toggle.classList.remove('hidden');
+    if (this.isHidden) this.groupTitle.classList.add('is-hidden');
+  }
+
+  hideToggle() {
+    this.title.classList.remove('wrap');
+    this.toggle.classList.add('hidden');
+    if (this.isHidden) this.groupTitle.classList.remove('is-hidden');
+  }
+
+  toggleGroups() {
+    this.isHidden = !this.isHidden;
+    this.groupTitle.classList.toggle('is-hidden');
+  }
+
+  render() {
+    this.title.classList.remove('initializing');
+  }
+}
diff --git a/app/assets/javascripts/groups_list.js b/app/assets/javascripts/groups_list.js
new file mode 100644
index 00000000000..56a8cbf6d03
--- /dev/null
+++ b/app/assets/javascripts/groups_list.js
@@ -0,0 +1,18 @@
+import FilterableList from './filterable_list';
+
+/**
+ * Makes search request for groups when user types a value in the search input.
+ * Updates the html content of the page with the received one.
+ */
+export default class GroupsList {
+  constructor() {
+    const form = document.querySelector('form#group-filter-form');
+    const filter = document.querySelector('.js-groups-list-filter');
+    const holder = document.querySelector('.js-groups-list-holder');
+
+    if (form && filter && holder) {
+      const list = new FilterableList(form, filter, holder);
+      list.initSearch();
+    }
+  }
+}
diff --git a/app/assets/javascripts/groups_select.js b/app/assets/javascripts/groups_select.js
index e3c39c895ba..602a3b78189 100644
--- a/app/assets/javascripts/groups_select.js
+++ b/app/assets/javascripts/groups_select.js
@@ -1,71 +1,117 @@
-/* eslint-disable */
-(function() {
-  var slice = [].slice;
+/* eslint-disable func-names, space-before-function-paren, no-var, wrap-iife, one-var, camelcase, one-var-declaration-per-line, quotes, object-shorthand, prefer-arrow-callback, comma-dangle, consistent-return, yoda, prefer-rest-params, prefer-spread, no-unused-vars, prefer-template, max-len */
+/* global Api */
 
-  this.GroupsSelect = (function() {
-    function GroupsSelect() {
-      $('.ajax-groups-select').each((function(_this) {
-        return function(i, select) {
-          var all_available, skip_groups;
-          all_available = $(select).data('all-available');
-          skip_groups = $(select).data('skip-groups') || [];
-          return $(select).select2({
-            placeholder: "Search for a group",
-            multiple: $(select).hasClass('multiselect'),
-            minimumInputLength: 0,
-            query: function(query) {
-              options = { all_available: all_available, skip_groups: skip_groups };
-              return Api.groups(query.term, options, function(groups) {
-                var data;
-                data = {
-                  results: groups
+var slice = [].slice;
+
+window.GroupsSelect = (function() {
+  function GroupsSelect() {
+    $('.ajax-groups-select').each((function(_this) {
+      const self = _this;
+
+      return function(i, select) {
+        var all_available, skip_groups;
+        const $select = $(select);
+        all_available = $select.data('all-available');
+        skip_groups = $select.data('skip-groups') || [];
+
+        $select.select2({
+          placeholder: "Search for a group",
+          multiple: $select.hasClass('multiselect'),
+          minimumInputLength: 0,
+          ajax: {
+            url: Api.buildUrl(Api.groupsPath),
+            dataType: 'json',
+            quietMillis: 250,
+            transport: function (params) {
+              $.ajax(params).then((data, status, xhr) => {
+                const results = data || [];
+
+                const headers = gl.utils.normalizeCRLFHeaders(xhr.getAllResponseHeaders());
+                const currentPage = parseInt(headers['X-PAGE'], 10) || 0;
+                const totalPages = parseInt(headers['X-TOTAL-PAGES'], 10) || 0;
+                const more = currentPage < totalPages;
+
+                return {
+                  results,
+                  pagination: {
+                    more,
+                  },
                 };
-                return query.callback(data);
-              });
-            },
-            initSelection: function(element, callback) {
-              var id;
-              id = $(element).val();
-              if (id !== "") {
-                return Api.group(id, callback);
-              }
+              }).then(params.success).fail(params.error);
             },
-            formatResult: function() {
-              var args;
-              args = 1 <= arguments.length ? slice.call(arguments, 0) : [];
-              return _this.formatResult.apply(_this, args);
+            data: function (search, page) {
+              return {
+                search,
+                page,
+                per_page: GroupsSelect.PER_PAGE,
+                all_available,
+                skip_groups,
+              };
             },
-            formatSelection: function() {
-              var args;
-              args = 1 <= arguments.length ? slice.call(arguments, 0) : [];
-              return _this.formatSelection.apply(_this, args);
+            results: function (data, page) {
+              if (data.length) return { results: [] };
+
+              const results = data.length ? data : data.results || [];
+              const more = data.pagination ? data.pagination.more : false;
+
+              return {
+                results,
+                page,
+                more,
+              };
             },
-            dropdownCssClass: "ajax-groups-dropdown",
-            // we do not want to escape markup since we are displaying html in results
-            escapeMarkup: function(m) {
-              return m;
+          },
+          initSelection: function(element, callback) {
+            var id;
+            id = $(element).val();
+            if (id !== "") {
+              return Api.group(id, callback);
             }
-          });
-        };
-      })(this));
-    }
+          },
+          formatResult: function() {
+            var args;
+            args = 1 <= arguments.length ? slice.call(arguments, 0) : [];
+            return self.formatResult.apply(self, args);
+          },
+          formatSelection: function() {
+            var args;
+            args = 1 <= arguments.length ? slice.call(arguments, 0) : [];
+            return self.formatSelection.apply(self, args);
+          },
+          dropdownCssClass: "ajax-groups-dropdown select2-infinite",
+          // we do not want to escape markup since we are displaying html in results
+          escapeMarkup: function(m) {
+            return m;
+          }
+        });
 
-    GroupsSelect.prototype.formatResult = function(group) {
-      var avatar;
-      if (group.avatar_url) {
-        avatar = group.avatar_url;
-      } else {
-        avatar = gon.default_avatar_url;
-      }
-      return "<div class='group-result'> <div class='group-name'>" + group.name + "</div> <div class='group-path'>" + group.path + "</div> </div>";
-    };
+        self.dropdown = document.querySelector('.select2-infinite .select2-results');
+
+        $select.on('select2-loaded', self.forceOverflow.bind(self));
+      };
+    })(this));
+  }
+
+  GroupsSelect.prototype.formatResult = function(group) {
+    var avatar;
+    if (group.avatar_url) {
+      avatar = group.avatar_url;
+    } else {
+      avatar = gon.default_avatar_url;
+    }
+    return "<div class='group-result'> <div class='group-name'>" + group.full_name + "</div> <div class='group-path'>" + group.full_path + "</div> </div>";
+  };
 
-    GroupsSelect.prototype.formatSelection = function(group) {
-      return group.name;
-    };
+  GroupsSelect.prototype.formatSelection = function(group) {
+    return group.full_name;
+  };
 
-    return GroupsSelect;
+  GroupsSelect.prototype.forceOverflow = function (e) {
+    const itemHeight = this.dropdown.querySelector('.select2-result:first-child').clientHeight;
+    this.dropdown.style.height = `${Math.floor(this.dropdown.scrollHeight - (itemHeight * 0.9))}px`;
+  };
 
-  })();
+  GroupsSelect.PER_PAGE = 20;
 
-}).call(this);
+  return GroupsSelect;
+})();
diff --git a/app/assets/javascripts/header.js b/app/assets/javascripts/header.js
index 81fcaf06430..dc170c60456 100644
--- a/app/assets/javascripts/header.js
+++ b/app/assets/javascripts/header.js
@@ -1,10 +1,7 @@
-/* eslint-disable */
-(function() {
+/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, no-var */
 
-  $(document).on('todo:toggle', function(e, count) {
-    var $todoPendingCount = $('.todos-pending-count');
-    $todoPendingCount.text(gl.text.addDelimiter(count));
-    $todoPendingCount.toggleClass('hidden', count === 0);
-  });
-
-})();
+$(document).on('todo:toggle', function(e, count) {
+  var $todoPendingCount = $('.todos-count');
+  $todoPendingCount.text(gl.text.highCountTrim(count));
+  $todoPendingCount.toggleClass('hidden', count === 0);
+});
diff --git a/app/assets/javascripts/importer_status.js b/app/assets/javascripts/importer_status.js
index c53f7c88aa2..34e4a257ff9 100644
--- a/app/assets/javascripts/importer_status.js
+++ b/app/assets/javascripts/importer_status.js
@@ -1,6 +1,7 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, camelcase, no-var, one-var, one-var-declaration-per-line, prefer-template, quotes, object-shorthand, comma-dangle, no-unused-vars, prefer-arrow-callback, no-else-return, vars-on-top, no-new, max-len */
+
 (function() {
-  this.ImporterStatus = (function() {
+  window.ImporterStatus = (function() {
     function ImporterStatus(jobs_url, import_url) {
       this.jobs_url = jobs_url;
       this.import_url = import_url;
@@ -67,7 +68,6 @@
     };
 
     return ImporterStatus;
-
   })();
 
   $(function() {
@@ -75,7 +75,7 @@
       var jobsImportPath = $('.js-importer-status').data('jobs-import-path');
       var importPath = $('.js-importer-status').data('import-path');
 
-      new ImporterStatus(jobsImportPath, importPath);
+      new window.ImporterStatus(jobsImportPath, importPath);
     }
   });
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/issuable.js b/app/assets/javascripts/issuable.js
new file mode 100644
index 00000000000..3bfce32768a
--- /dev/null
+++ b/app/assets/javascripts/issuable.js
@@ -0,0 +1,188 @@
+/* eslint-disable no-param-reassign, func-names, no-var, camelcase, no-unused-vars, object-shorthand, space-before-function-paren, no-return-assign, comma-dangle, consistent-return, one-var, one-var-declaration-per-line, quotes, prefer-template, prefer-arrow-callback, wrap-iife, max-len */
+/* global Issuable */
+
+((global) => {
+  var issuable_created;
+
+  issuable_created = false;
+
+  global.Issuable = {
+    init: function() {
+      Issuable.initTemplates();
+      Issuable.initSearch();
+      Issuable.initChecks();
+      Issuable.initResetFilters();
+      Issuable.resetIncomingEmailToken();
+      return Issuable.initLabelFilterRemove();
+    },
+    initTemplates: function() {
+      return Issuable.labelRow = _.template('<% _.each(labels, function(label){ %> <span class="label-row btn-group" role="group" aria-label="<%- label.title %>" style="color: <%- label.text_color %>;"> <a href="#" class="btn btn-transparent has-tooltip" style="background-color: <%- label.color %>;" title="<%- label.description %>" data-container="body"> <%- label.title %> </a> <button type="button" class="btn btn-transparent label-remove js-label-filter-remove" style="background-color: <%- label.color %>;" data-label="<%- label.title %>"> <i class="fa fa-times"></i> </button> </span> <% }); %>');
+    },
+    initSearch: function() {
+      const $searchInput = $('#issuable_search');
+
+      Issuable.initSearchState($searchInput);
+
+      // `immediate` param set to false debounces on the `trailing` edge, lets user finish typing
+      const debouncedExecSearch = _.debounce(Issuable.executeSearch, 1000, false);
+
+      $searchInput.off('keyup').on('keyup', debouncedExecSearch);
+
+      // ensures existing filters are preserved when manually submitted
+      $('#issuable_search_form').on('submit', (e) => {
+        e.preventDefault();
+        debouncedExecSearch(e);
+      });
+    },
+    initSearchState: function($searchInput) {
+      const currentSearchVal = $searchInput.val();
+
+      Issuable.searchState = {
+        elem: $searchInput,
+        current: currentSearchVal
+      };
+
+      Issuable.maybeFocusOnSearch();
+    },
+    accessSearchPristine: function(set) {
+      // store reference to previous value to prevent search on non-mutating keyup
+      const state = Issuable.searchState;
+      const currentSearchVal = state.elem.val();
+
+      if (set) {
+        state.current = currentSearchVal;
+      } else {
+        return state.current === currentSearchVal;
+      }
+    },
+    maybeFocusOnSearch: function() {
+      const currentSearchVal = Issuable.searchState.current;
+      if (currentSearchVal && currentSearchVal !== '') {
+        const queryLength = currentSearchVal.length;
+        const $searchInput = Issuable.searchState.elem;
+
+      /* The following ensures that the cursor is initially placed at
+        * the end of search input when focus is applied. It accounts
+        * for differences in browser implementations of `setSelectionRange`
+        * and cursor placement for elements in focus.
+      */
+        $searchInput.focus();
+        if ($searchInput.setSelectionRange) {
+          $searchInput.setSelectionRange(queryLength, queryLength);
+        } else {
+          $searchInput.val(currentSearchVal);
+        }
+      }
+    },
+    executeSearch: function(e) {
+      const $search = $('#issuable_search');
+      const $searchName = $search.attr('name');
+      const $searchValue = $search.val();
+      const $filtersForm = $('.js-filter-form');
+      const $input = $(`input[name='${$searchName}']`, $filtersForm);
+      const isPristine = Issuable.accessSearchPristine();
+
+      if (isPristine) {
+        return;
+      }
+
+      if (!$input.length) {
+        $filtersForm.append(`<input type='hidden' name='${$searchName}' value='${_.escape($searchValue)}'/>`);
+      } else {
+        $input.val($searchValue);
+      }
+
+      Issuable.filterResults($filtersForm);
+    },
+    initLabelFilterRemove: function() {
+      return $(document).off('click', '.js-label-filter-remove').on('click', '.js-label-filter-remove', function(e) {
+        var $button;
+        $button = $(this);
+        // Remove the label input box
+        $('input[name="label_name[]"]').filter(function() {
+          return this.value === $button.data('label');
+        }).remove();
+        // Submit the form to get new data
+        Issuable.filterResults($('.filter-form'));
+      });
+    },
+    filterResults: (function(_this) {
+      return function(form) {
+        var formAction, formData, issuesUrl;
+        formData = form.serializeArray();
+        formData = formData.filter(function(data) {
+          return data.value !== '';
+        });
+        formData = $.param(formData);
+        formAction = form.attr('action');
+        issuesUrl = formAction;
+        issuesUrl += "" + (formAction.indexOf('?') === -1 ? '?' : '&');
+        issuesUrl += formData;
+        return gl.utils.visitUrl(issuesUrl);
+      };
+    })(this),
+    initResetFilters: function() {
+      $('.reset-filters').on('click', function(e) {
+        e.preventDefault();
+        const target = e.target;
+        const $form = $(target).parents('.js-filter-form');
+        const baseIssuesUrl = target.href;
+
+        $form.attr('action', baseIssuesUrl);
+        gl.utils.visitUrl(baseIssuesUrl);
+      });
+    },
+    initChecks: function() {
+      this.issuableBulkActions = $('.bulk-update').data('bulkActions');
+      $('.check_all_issues').off('click').on('click', function() {
+        $('.selected_issue').prop('checked', this.checked);
+        return Issuable.checkChanged();
+      });
+      return $('.selected_issue').off('change').on('change', Issuable.checkChanged.bind(this));
+    },
+    checkChanged: function() {
+      const $checkedIssues = $('.selected_issue:checked');
+      const $updateIssuesIds = $('#update_issuable_ids');
+      const $issuesOtherFilters = $('.issues-other-filters');
+      const $issuesBulkUpdate = $('.issues_bulk_update');
+
+      this.issuableBulkActions.willUpdateLabels = false;
+      this.issuableBulkActions.setOriginalDropdownData();
+
+      if ($checkedIssues.length > 0) {
+        const ids = $.map($checkedIssues, function(value) {
+          return $(value).data('id');
+        });
+        $updateIssuesIds.val(ids);
+        $issuesOtherFilters.hide();
+        $issuesBulkUpdate.show();
+      } else {
+        $updateIssuesIds.val([]);
+        $issuesBulkUpdate.hide();
+        $issuesOtherFilters.show();
+      }
+      return true;
+    },
+
+    resetIncomingEmailToken: function() {
+      $('.incoming-email-token-reset').on('click', function(e) {
+        e.preventDefault();
+
+        $.ajax({
+          type: 'PUT',
+          url: $('.incoming-email-token-reset').attr('href'),
+          dataType: 'json',
+          success: function(response) {
+            $('#issue_email').val(response.new_issue_address).focus();
+          },
+          beforeSend: function() {
+            $('.incoming-email-token-reset').text('resetting...');
+          },
+          complete: function() {
+            $('.incoming-email-token-reset').text('reset it');
+          }
+        });
+      });
+    }
+  };
+})(window);
diff --git a/app/assets/javascripts/issuable.js.es6 b/app/assets/javascripts/issuable.js.es6
deleted file mode 100644
index 8fc498be27d..00000000000
--- a/app/assets/javascripts/issuable.js.es6
+++ /dev/null
@@ -1,160 +0,0 @@
-/* eslint-disable */
-(function() {
-  var issuable_created;
-
-  issuable_created = false;
-
-  this.Issuable = {
-    init: function() {
-      Issuable.initTemplates();
-      Issuable.initSearch();
-      Issuable.initChecks();
-      Issuable.initResetFilters();
-      return Issuable.initLabelFilterRemove();
-    },
-    initTemplates: function() {
-      return Issuable.labelRow = _.template('<% _.each(labels, function(label){ %> <span class="label-row btn-group" role="group" aria-label="<%- label.title %>" style="color: <%- label.text_color %>;"> <a href="#" class="btn btn-transparent has-tooltip" style="background-color: <%- label.color %>;" title="<%- label.description %>" data-container="body"> <%- label.title %> </a> <button type="button" class="btn btn-transparent label-remove js-label-filter-remove" style="background-color: <%- label.color %>;" data-label="<%- label.title %>"> <i class="fa fa-times"></i> </button> </span> <% }); %>');
-    },
-    initSearch: function() {
-      const $searchInput = $('#issuable_search');
-
-      Issuable.initSearchState($searchInput);
-
-      // `immediate` param set to false debounces on the `trailing` edge, lets user finish typing
-      const debouncedExecSearch = _.debounce(Issuable.executeSearch, 1000, false);
-
-      $searchInput.off('keyup').on('keyup', debouncedExecSearch);
-
-      // ensures existing filters are preserved when manually submitted
-      $('#issuable_search_form').on('submit', (e) => {
-        e.preventDefault();
-        debouncedExecSearch(e);
-      });
-
-    },
-    initSearchState: function($searchInput) {
-      const currentSearchVal = $searchInput.val();
-
-      Issuable.searchState = {
-        elem: $searchInput,
-        current: currentSearchVal
-      };
-
-      Issuable.maybeFocusOnSearch();
-    },
-    accessSearchPristine: function(set) {
-      // store reference to previous value to prevent search on non-mutating keyup
-      const state = Issuable.searchState;
-      const currentSearchVal = state.elem.val();
-
-      if (set) {
-        state.current = currentSearchVal;
-      } else {
-        return state.current === currentSearchVal;
-      }
-    },
-    maybeFocusOnSearch: function() {
-      const currentSearchVal = Issuable.searchState.current;
-      if (currentSearchVal && currentSearchVal !== '') {
-        const queryLength = currentSearchVal.length;
-        const $searchInput = Issuable.searchState.elem;
-
-      /* The following ensures that the cursor is initially placed at
-        * the end of search input when focus is applied. It accounts
-        * for differences in browser implementations of `setSelectionRange`
-        * and cursor placement for elements in focus.
-      */
-        $searchInput.focus();
-        if ($searchInput.setSelectionRange) {
-          $searchInput.setSelectionRange(queryLength, queryLength);
-        } else {
-          $searchInput.val(currentSearchVal);
-        }
-      }
-    },
-    executeSearch: function(e) {
-      const $search = $('#issuable_search');
-      const $searchName = $search.attr('name');
-      const $searchValue = $search.val();
-      const $filtersForm = $('.js-filter-form');
-      const $input = $(`input[name='${$searchName}']`, $filtersForm);
-      const isPristine = Issuable.accessSearchPristine();
-
-      if (isPristine) {
-        return;
-      }
-
-      if (!$input.length) {
-        $filtersForm.append(`<input type='hidden' name='${$searchName}' value='${_.escape($searchValue)}'/>`);
-      } else {
-        $input.val($searchValue);
-      }
-
-      Issuable.filterResults($filtersForm);
-    },
-    initLabelFilterRemove: function() {
-      return $(document).off('click', '.js-label-filter-remove').on('click', '.js-label-filter-remove', function(e) {
-        var $button;
-        $button = $(this);
-        // Remove the label input box
-        $('input[name="label_name[]"]').filter(function() {
-          return this.value === $button.data('label');
-        }).remove();
-        // Submit the form to get new data
-        Issuable.filterResults($('.filter-form'));
-      });
-    },
-    filterResults: (function(_this) {
-      return function(form) {
-        var formAction, formData, issuesUrl;
-        formData = form.serialize();
-        formAction = form.attr('action');
-        issuesUrl = formAction;
-        issuesUrl += "" + (formAction.indexOf('?') < 0 ? '?' : '&');
-        issuesUrl += formData;
-        return Turbolinks.visit(issuesUrl);
-      };
-    })(this),
-    initResetFilters: function() {
-      $('.reset-filters').on('click', function(e) {
-        e.preventDefault();
-        const target = e.target;
-        const $form = $(target).parents('.js-filter-form');
-        const baseIssuesUrl = target.href;
-
-        $form.attr('action', baseIssuesUrl);
-        Turbolinks.visit(baseIssuesUrl);
-      });
-    },
-    initChecks: function() {
-      this.issuableBulkActions = $('.bulk-update').data('bulkActions');
-      $('.check_all_issues').off('click').on('click', function() {
-        $('.selected_issue').prop('checked', this.checked);
-        return Issuable.checkChanged();
-      });
-      return $('.selected_issue').off('change').on('change', Issuable.checkChanged.bind(this));
-    },
-    checkChanged: function() {
-      const $checkedIssues = $('.selected_issue:checked');
-      const $updateIssuesIds = $('#update_issuable_ids');
-      const $issuesOtherFilters = $('.issues-other-filters');
-      const $issuesBulkUpdate = $('.issues_bulk_update');
-
-      if ($checkedIssues.length > 0) {
-        let ids = $.map($checkedIssues, function(value) {
-          return $(value).data('id');
-        });
-        $updateIssuesIds.val(ids);
-        $issuesOtherFilters.hide();
-        $issuesBulkUpdate.show();
-      } else {
-        $updateIssuesIds.val([]);
-        $issuesBulkUpdate.hide();
-        $issuesOtherFilters.show();
-        this.issuableBulkActions.willUpdateLabels = false;
-      }
-      return true;
-    }
-  };
-
-}).call(this);
diff --git a/app/assets/javascripts/issuable/issuable_bundle.js b/app/assets/javascripts/issuable/issuable_bundle.js
new file mode 100644
index 00000000000..e927cc0077c
--- /dev/null
+++ b/app/assets/javascripts/issuable/issuable_bundle.js
@@ -0,0 +1 @@
+require('./time_tracking/time_tracking_bundle');
diff --git a/app/assets/javascripts/issuable/time_tracking/components/collapsed_state.js b/app/assets/javascripts/issuable/time_tracking/components/collapsed_state.js
new file mode 100644
index 00000000000..aec13e78f42
--- /dev/null
+++ b/app/assets/javascripts/issuable/time_tracking/components/collapsed_state.js
@@ -0,0 +1,42 @@
+import Vue from 'vue';
+import stopwatchSvg from 'icons/_icon_stopwatch.svg';
+
+require('../../../lib/utils/pretty_time');
+
+(() => {
+  Vue.component('time-tracking-collapsed-state', {
+    name: 'time-tracking-collapsed-state',
+    props: [
+      'showComparisonState',
+      'showSpentOnlyState',
+      'showEstimateOnlyState',
+      'showNoTimeTrackingState',
+      'timeSpentHumanReadable',
+      'timeEstimateHumanReadable',
+    ],
+    methods: {
+      abbreviateTime(timeStr) {
+        return gl.utils.prettyTime.abbreviateTime(timeStr);
+      },
+    },
+    template: `
+      <div class='sidebar-collapsed-icon'>
+        ${stopwatchSvg}
+        <div class='time-tracking-collapsed-summary'>
+          <div class='compare' v-if='showComparisonState'>
+            <span>{{ abbreviateTime(timeSpentHumanReadable) }} / {{ abbreviateTime(timeEstimateHumanReadable) }}</span>
+          </div>
+          <div class='estimate-only' v-if='showEstimateOnlyState'>
+            <span class='bold'>-- / {{ abbreviateTime(timeEstimateHumanReadable) }}</span>
+          </div>
+          <div class='spend-only' v-if='showSpentOnlyState'>
+            <span class='bold'>{{ abbreviateTime(timeSpentHumanReadable) }} / --</span>
+          </div>
+          <div class='no-tracking' v-if='showNoTimeTrackingState'>
+            <span class='no-value'>None</span>
+          </div>
+        </div>
+      </div>
+      `,
+  });
+})();
diff --git a/app/assets/javascripts/issuable/time_tracking/components/comparison_pane.js b/app/assets/javascripts/issuable/time_tracking/components/comparison_pane.js
new file mode 100644
index 00000000000..c55e263f6f4
--- /dev/null
+++ b/app/assets/javascripts/issuable/time_tracking/components/comparison_pane.js
@@ -0,0 +1,70 @@
+import Vue from 'vue';
+
+require('../../../lib/utils/pretty_time');
+
+(() => {
+  const prettyTime = gl.utils.prettyTime;
+
+  Vue.component('time-tracking-comparison-pane', {
+    name: 'time-tracking-comparison-pane',
+    props: [
+      'timeSpent',
+      'timeEstimate',
+      'timeSpentHumanReadable',
+      'timeEstimateHumanReadable',
+    ],
+    computed: {
+      parsedRemaining() {
+        const diffSeconds = this.timeEstimate - this.timeSpent;
+        return prettyTime.parseSeconds(diffSeconds);
+      },
+      timeRemainingHumanReadable() {
+        return prettyTime.stringifyTime(this.parsedRemaining);
+      },
+      timeRemainingTooltip() {
+        const prefix = this.timeRemainingMinutes < 0 ? 'Over by' : 'Time remaining:';
+        return `${prefix} ${this.timeRemainingHumanReadable}`;
+      },
+      /* Diff values for comparison meter */
+      timeRemainingMinutes() {
+        return this.timeEstimate - this.timeSpent;
+      },
+      timeRemainingPercent() {
+        return `${Math.floor((this.timeSpent / this.timeEstimate) * 100)}%`;
+      },
+      timeRemainingStatusClass() {
+        return this.timeEstimate >= this.timeSpent ? 'within_estimate' : 'over_estimate';
+      },
+      /* Parsed time values */
+      parsedEstimate() {
+        return prettyTime.parseSeconds(this.timeEstimate);
+      },
+      parsedSpent() {
+        return prettyTime.parseSeconds(this.timeSpent);
+      },
+    },
+    template: `
+      <div class='time-tracking-comparison-pane'>
+        <div class='compare-meter' data-toggle='tooltip' data-placement='top' role='timeRemainingDisplay'
+          :aria-valuenow='timeRemainingTooltip'
+          :title='timeRemainingTooltip'
+          :data-original-title='timeRemainingTooltip'
+          :class='timeRemainingStatusClass'>
+          <div class='meter-container' role='timeSpentPercent' :aria-valuenow='timeRemainingPercent'>
+            <div :style='{ width: timeRemainingPercent }' class='meter-fill'></div>
+          </div>
+          <div class='compare-display-container'>
+            <div class='compare-display pull-left'>
+              <span class='compare-label'>Spent</span>
+              <span class='compare-value spent'>{{ timeSpentHumanReadable }}</span>
+            </div>
+            <div class='compare-display estimated pull-right'>
+              <span class='compare-label'>Est</span>
+              <span class='compare-value'>{{ timeEstimateHumanReadable }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/issuable/time_tracking/components/estimate_only_pane.js b/app/assets/javascripts/issuable/time_tracking/components/estimate_only_pane.js
new file mode 100644
index 00000000000..a7fbd704c40
--- /dev/null
+++ b/app/assets/javascripts/issuable/time_tracking/components/estimate_only_pane.js
@@ -0,0 +1,14 @@
+import Vue from 'vue';
+
+(() => {
+  Vue.component('time-tracking-estimate-only-pane', {
+    name: 'time-tracking-estimate-only-pane',
+    props: ['timeEstimateHumanReadable'],
+    template: `
+      <div class='time-tracking-estimate-only-pane'>
+        <span class='bold'>Estimated:</span>
+        {{ timeEstimateHumanReadable }}
+      </div>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/issuable/time_tracking/components/help_state.js b/app/assets/javascripts/issuable/time_tracking/components/help_state.js
new file mode 100644
index 00000000000..344b29ebea4
--- /dev/null
+++ b/app/assets/javascripts/issuable/time_tracking/components/help_state.js
@@ -0,0 +1,25 @@
+import Vue from 'vue';
+
+(() => {
+  Vue.component('time-tracking-help-state', {
+    name: 'time-tracking-help-state',
+    props: ['docsUrl'],
+    template: `
+      <div class='time-tracking-help-state'>
+        <div class='time-tracking-info'>
+          <h4>Track time with slash commands</h4>
+          <p>Slash commands can be used in the issues description and comment boxes.</p>
+          <p>
+            <code>/estimate</code>
+            will update the estimated time with the latest command.
+          </p>
+          <p>
+            <code>/spend</code>
+            will update the sum of the time spent.
+          </p>
+          <a class='btn btn-default learn-more-button' :href='docsUrl'>Learn more</a>
+        </div>
+      </div>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/issuable/time_tracking/components/no_tracking_pane.js b/app/assets/javascripts/issuable/time_tracking/components/no_tracking_pane.js
new file mode 100644
index 00000000000..b081adf5e64
--- /dev/null
+++ b/app/assets/javascripts/issuable/time_tracking/components/no_tracking_pane.js
@@ -0,0 +1,12 @@
+import Vue from 'vue';
+
+(() => {
+  Vue.component('time-tracking-no-tracking-pane', {
+    name: 'time-tracking-no-tracking-pane',
+    template: `
+      <div class='time-tracking-no-tracking-pane'>
+        <span class='no-value'>No estimate or time spent</span>
+      </div>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/issuable/time_tracking/components/spent_only_pane.js b/app/assets/javascripts/issuable/time_tracking/components/spent_only_pane.js
new file mode 100644
index 00000000000..edb9169112f
--- /dev/null
+++ b/app/assets/javascripts/issuable/time_tracking/components/spent_only_pane.js
@@ -0,0 +1,14 @@
+import Vue from 'vue';
+
+(() => {
+  Vue.component('time-tracking-spent-only-pane', {
+    name: 'time-tracking-spent-only-pane',
+    props: ['timeSpentHumanReadable'],
+    template: `
+      <div class='time-tracking-spend-only-pane'>
+        <span class='bold'>Spent:</span>
+        {{ timeSpentHumanReadable }}
+      </div>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/issuable/time_tracking/components/time_tracker.js b/app/assets/javascripts/issuable/time_tracking/components/time_tracker.js
new file mode 100644
index 00000000000..0213522f551
--- /dev/null
+++ b/app/assets/javascripts/issuable/time_tracking/components/time_tracker.js
@@ -0,0 +1,117 @@
+import Vue from 'vue';
+
+require('./help_state');
+require('./collapsed_state');
+require('./spent_only_pane');
+require('./no_tracking_pane');
+require('./estimate_only_pane');
+require('./comparison_pane');
+
+(() => {
+  Vue.component('issuable-time-tracker', {
+    name: 'issuable-time-tracker',
+    props: [
+      'time_estimate',
+      'time_spent',
+      'human_time_estimate',
+      'human_time_spent',
+      'docsUrl',
+    ],
+    data() {
+      return {
+        showHelp: false,
+      };
+    },
+    computed: {
+      timeSpent() {
+        return this.time_spent;
+      },
+      timeEstimate() {
+        return this.time_estimate;
+      },
+      timeEstimateHumanReadable() {
+        return this.human_time_estimate;
+      },
+      timeSpentHumanReadable() {
+        return this.human_time_spent;
+      },
+      hasTimeSpent() {
+        return !!this.timeSpent;
+      },
+      hasTimeEstimate() {
+        return !!this.timeEstimate;
+      },
+      showComparisonState() {
+        return this.hasTimeEstimate && this.hasTimeSpent;
+      },
+      showEstimateOnlyState() {
+        return this.hasTimeEstimate && !this.hasTimeSpent;
+      },
+      showSpentOnlyState() {
+        return this.hasTimeSpent && !this.hasTimeEstimate;
+      },
+      showNoTimeTrackingState() {
+        return !this.hasTimeEstimate && !this.hasTimeSpent;
+      },
+      showHelpState() {
+        return !!this.showHelp;
+      },
+    },
+    methods: {
+      toggleHelpState(show) {
+        this.showHelp = show;
+      },
+    },
+    template: `
+      <div class='time_tracker time-tracking-component-wrap' v-cloak>
+        <time-tracking-collapsed-state
+          :show-comparison-state='showComparisonState'
+          :show-help-state='showHelpState'
+          :show-spent-only-state='showSpentOnlyState'
+          :show-estimate-only-state='showEstimateOnlyState'
+          :time-spent-human-readable='timeSpentHumanReadable'
+          :time-estimate-human-readable='timeEstimateHumanReadable'>
+        </time-tracking-collapsed-state>
+        <div class='title hide-collapsed'>
+          Time tracking
+          <div class='help-button pull-right'
+            v-if='!showHelpState'
+            @click='toggleHelpState(true)'>
+            <i class='fa fa-question-circle' aria-hidden='true'></i>
+          </div>
+          <div class='close-help-button pull-right'
+            v-if='showHelpState'
+            @click='toggleHelpState(false)'>
+            <i class='fa fa-close' aria-hidden='true'></i>
+          </div>
+        </div>
+        <div class='time-tracking-content hide-collapsed'>
+          <time-tracking-estimate-only-pane
+            v-if='showEstimateOnlyState'
+            :time-estimate-human-readable='timeEstimateHumanReadable'>
+          </time-tracking-estimate-only-pane>
+          <time-tracking-spent-only-pane
+            v-if='showSpentOnlyState'
+            :time-spent-human-readable='timeSpentHumanReadable'>
+          </time-tracking-spent-only-pane>
+          <time-tracking-no-tracking-pane
+            v-if='showNoTimeTrackingState'>
+          </time-tracking-no-tracking-pane>
+          <time-tracking-comparison-pane
+            v-if='showComparisonState'
+            :time-estimate='timeEstimate'
+            :time-spent='timeSpent'
+            :time-spent-human-readable='timeSpentHumanReadable'
+            :time-estimate-human-readable='timeEstimateHumanReadable'>
+          </time-tracking-comparison-pane>
+          <transition name='help-state-toggle'>
+            <time-tracking-help-state
+              v-if='showHelpState'
+              :docs-url='docsUrl'>
+            </time-tracking-help-state>
+          </transition>
+        </div>
+      </div>
+    `,
+  });
+})();
diff --git a/app/assets/javascripts/issuable/time_tracking/time_tracking_bundle.js b/app/assets/javascripts/issuable/time_tracking/time_tracking_bundle.js
new file mode 100644
index 00000000000..1689a69e1ed
--- /dev/null
+++ b/app/assets/javascripts/issuable/time_tracking/time_tracking_bundle.js
@@ -0,0 +1,66 @@
+import Vue from 'vue';
+import VueResource from 'vue-resource';
+
+require('./components/time_tracker');
+require('../../smart_interval');
+require('../../subbable_resource');
+
+Vue.use(VueResource);
+
+(() => {
+  /* This Vue instance represents what will become the parent instance for the
+    * sidebar. It will be responsible for managing `issuable` state and propagating
+    * changes to sidebar components. We will want to create a separate service to
+    * interface with the server at that point.
+   */
+
+  class IssuableTimeTracking {
+    constructor(issuableJSON) {
+      const parsedIssuable = JSON.parse(issuableJSON);
+      return this.initComponent(parsedIssuable);
+    }
+
+    initComponent(parsedIssuable) {
+      this.parentInstance = new Vue({
+        el: '#issuable-time-tracker',
+        data: {
+          issuable: parsedIssuable,
+        },
+        methods: {
+          fetchIssuable() {
+            return gl.IssuableResource.get.call(gl.IssuableResource, {
+              type: 'GET',
+              url: gl.IssuableResource.endpoint,
+            });
+          },
+          updateState(data) {
+            this.issuable = data;
+          },
+          subscribeToUpdates() {
+            gl.IssuableResource.subscribe(data => this.updateState(data));
+          },
+          listenForSlashCommands() {
+            $(document).on('ajax:success', '.gfm-form', (e, data) => {
+              const subscribedCommands = ['spend_time', 'time_estimate'];
+              const changedCommands = data.commands_changes
+                ? Object.keys(data.commands_changes)
+                : [];
+              if (changedCommands && _.intersection(subscribedCommands, changedCommands).length) {
+                this.fetchIssuable();
+              }
+            });
+          },
+        },
+        created() {
+          this.fetchIssuable();
+        },
+        mounted() {
+          this.subscribeToUpdates();
+          this.listenForSlashCommands();
+        },
+      });
+    }
+  }
+
+  gl.IssuableTimeTracking = IssuableTimeTracking;
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/issuable_context.js b/app/assets/javascripts/issuable_context.js
index fae49ee6144..834b98e8601 100644
--- a/app/assets/javascripts/issuable_context.js
+++ b/app/assets/javascripts/issuable_context.js
@@ -1,4 +1,9 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-new, comma-dangle, quotes, prefer-arrow-callback, consistent-return, one-var, no-var, one-var-declaration-per-line, no-underscore-dangle, max-len */
+/* global UsersSelect */
+/* global bp */
+
+import Cookies from 'js-cookie';
+
 (function() {
   this.IssuableContext = (function() {
     function IssuableContext(currentUser) {
@@ -35,6 +40,13 @@
           }, 0);
         }
       });
+      window.addEventListener('beforeunload', function() {
+        // collapsed_gutter cookie hides the sidebar
+        var bpBreakpoint = bp.getBreakpointSize();
+        if (bpBreakpoint === 'xs' || bpBreakpoint === 'sm') {
+          Cookies.set('collapsed_gutter', true);
+        }
+      });
       $(".right-sidebar").niceScroll();
     }
 
@@ -64,7 +76,5 @@
     };
 
     return IssuableContext;
-
   })();
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/issuable_form.js b/app/assets/javascripts/issuable_form.js
index 849b45756ee..de184ab2675 100644
--- a/app/assets/javascripts/issuable_form.js
+++ b/app/assets/javascripts/issuable_form.js
@@ -1,6 +1,13 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-use-before-define, no-useless-escape, no-new, quotes, object-shorthand, no-unused-vars, comma-dangle, no-alert, consistent-return, no-else-return, prefer-template, one-var, one-var-declaration-per-line, curly, max-len */
+/* global GitLab */
+/* global UsersSelect */
+/* global ZenMode */
+/* global Autosave */
+/* global dateFormat */
+/* global Pikaday */
+
 (function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
 
   this.IssuableForm = (function() {
     IssuableForm.prototype.issueMoveConfirmMsg = 'Are you sure you want to move this issue to another project?';
@@ -8,13 +15,13 @@
     IssuableForm.prototype.wipRegex = /^\s*(\[WIP\]\s*|WIP:\s*|WIP\s+)+\s*/i;
 
     function IssuableForm(form) {
-      var $issuableDueDate;
+      var $issuableDueDate, calendar;
       this.form = form;
       this.toggleWip = bind(this.toggleWip, this);
       this.renderWipExplanation = bind(this.renderWipExplanation, this);
       this.resetAutosave = bind(this.resetAutosave, this);
       this.handleSubmit = bind(this.handleSubmit, this);
-      GitLab.GfmAutoComplete.setup();
+      gl.GfmAutoComplete.setup();
       new UsersSelect();
       new ZenMode();
       this.titleField = this.form.find("input[name*='[title]']");
@@ -30,12 +37,15 @@
       this.initMoveDropdown();
       $issuableDueDate = $('#issuable-due-date');
       if ($issuableDueDate.length) {
-        $('.datepicker').datepicker({
-          dateFormat: 'yy-mm-dd',
-          onSelect: function(dateText, inst) {
-            return $issuableDueDate.val(dateText);
+        calendar = new Pikaday({
+          field: $issuableDueDate.get(0),
+          theme: 'gitlab-theme',
+          format: 'yyyy-mm-dd',
+          onSelect: function(dateText) {
+            $issuableDueDate.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
           }
-        }).datepicker('setDate', $.datepicker.parseDate('yy-mm-dd', $issuableDueDate.val()));
+        });
+        calendar.setDate(new Date($issuableDueDate.val()));
       }
     }
 
@@ -46,7 +56,7 @@
 
     IssuableForm.prototype.handleSubmit = function() {
       var fieldId = (this.issueMoveField != null) ? this.issueMoveField.val() : null;
-      if ((parseInt(fieldId) || 0) > 0) {
+      if ((parseInt(fieldId, 10) || 0) > 0) {
         if (!confirm(this.issueMoveConfirmMsg)) {
           return false;
         }
@@ -145,7 +155,5 @@
     };
 
     return IssuableForm;
-
   })();
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/issue.js b/app/assets/javascripts/issue.js
index 67ace697936..47e675f537e 100644
--- a/app/assets/javascripts/issue.js
+++ b/app/assets/javascripts/issue.js
@@ -1,159 +1,131 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, one-var, no-underscore-dangle, one-var-declaration-per-line, object-shorthand, no-unused-vars, no-new, comma-dangle, consistent-return, quotes, dot-notation, quote-props, prefer-arrow-callback, max-len */
+/* global Flash */
 
-/*= require flash */
-/*= require jquery.waitforimages */
-/*= require task_list */
+require('./flash');
+require('~/lib/utils/text_utility');
+require('vendor/jquery.waitforimages');
+require('./task_list');
 
-(function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
-
-  this.Issue = (function() {
-    function Issue() {
-      this.submitNoteForm = bind(this.submitNoteForm, this);
-      // Prevent duplicate event bindings
-      this.disableTaskList();
-      if ($('a.btn-close').length) {
-        this.initTaskList();
-        this.initIssueBtnEventListeners();
-      }
-      this.initMergeRequests();
-      this.initRelatedBranches();
-      this.initCanCreateBranch();
-    }
-
-    Issue.prototype.initTaskList = function() {
-      $('.detail-page-description .js-task-list-container').taskList('enable');
-      return $(document).on('tasklist:changed', '.detail-page-description .js-task-list-container', this.updateTaskList);
-    };
-
-    Issue.prototype.initIssueBtnEventListeners = function() {
-      var _this, issueFailMessage;
-      _this = this;
-      issueFailMessage = 'Unable to update this issue at this time.';
-      return $('a.btn-close, a.btn-reopen').on('click', function(e) {
-        var $this, isClose, shouldSubmit, url;
-        e.preventDefault();
-        e.stopImmediatePropagation();
-        $this = $(this);
-        isClose = $this.hasClass('btn-close');
-        shouldSubmit = $this.hasClass('btn-comment');
-        if (shouldSubmit) {
-          _this.submitNoteForm($this.closest('form'));
+class Issue {
+  constructor() {
+    if ($('a.btn-close').length) {
+      this.taskList = new gl.TaskList({
+        dataType: 'issue',
+        fieldName: 'description',
+        selector: '.detail-page-description',
+        onSuccess: (result) => {
+          document.querySelector('#task_status').innerText = result.task_status;
+          document.querySelector('#task_status_short').innerText = result.task_status_short;
         }
-        $this.prop('disabled', true);
-        url = $this.attr('href');
-        return $.ajax({
-          type: 'PUT',
-          url: url,
-          error: function(jqXHR, textStatus, errorThrown) {
-            var issueStatus;
-            issueStatus = isClose ? 'close' : 'open';
-            return new Flash(issueFailMessage, 'alert');
-          },
-          success: function(data, textStatus, jqXHR) {
-            if ('id' in data) {
-              $(document).trigger('issuable:change');
-              if (isClose) {
-                $('a.btn-close').addClass('hidden');
-                $('a.btn-reopen').removeClass('hidden');
-                $('div.status-box-closed').removeClass('hidden');
-                $('div.status-box-open').addClass('hidden');
-              } else {
-                $('a.btn-reopen').addClass('hidden');
-                $('a.btn-close').removeClass('hidden');
-                $('div.status-box-closed').addClass('hidden');
-                $('div.status-box-open').removeClass('hidden');
-              }
-            } else {
-              new Flash(issueFailMessage, 'alert');
-            }
-            return $this.prop('disabled', false);
-          }
-        });
       });
-    };
+      Issue.initIssueBtnEventListeners();
+    }
+    Issue.initMergeRequests();
+    Issue.initRelatedBranches();
+    Issue.initCanCreateBranch();
+  }
 
-    Issue.prototype.submitNoteForm = function(form) {
-      var noteText;
-      noteText = form.find("textarea.js-note-text").val();
-      if (noteText.trim().length > 0) {
-        return form.submit();
+  static initIssueBtnEventListeners() {
+    var issueFailMessage;
+    issueFailMessage = 'Unable to update this issue at this time.';
+    return $('a.btn-close, a.btn-reopen').on('click', function(e) {
+      var $this, isClose, shouldSubmit, url;
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      $this = $(this);
+      isClose = $this.hasClass('btn-close');
+      shouldSubmit = $this.hasClass('btn-comment');
+      if (shouldSubmit) {
+        Issue.submitNoteForm($this.closest('form'));
       }
-    };
-
-    Issue.prototype.disableTaskList = function() {
-      $('.detail-page-description .js-task-list-container').taskList('disable');
-      return $(document).off('tasklist:changed', '.detail-page-description .js-task-list-container');
-    };
-
-    Issue.prototype.updateTaskList = function() {
-      var patchData;
-      patchData = {};
-      patchData['issue'] = {
-        'description': $('.js-task-list-field', this).val()
-      };
+      $this.prop('disabled', true);
+      url = $this.attr('href');
       return $.ajax({
-        type: 'PATCH',
-        url: $('form.js-issuable-update').attr('action'),
-        data: patchData,
-        success: function(issue) {
-          document.querySelector('#task_status').innerText = issue.task_status;
-          document.querySelector('#task_status_short').innerText = issue.task_status_short;
-        }
-      });
-    // TODO (rspeicher): Make the issue description inline-editable like a note so
-    // that we can re-use its form here
-    };
-
-    Issue.prototype.initMergeRequests = function() {
-      var $container;
-      $container = $('#merge-requests');
-      return $.getJSON($container.data('url')).error(function() {
-        return new Flash('Failed to load referenced merge requests', 'alert');
-      }).success(function(data) {
-        if ('html' in data) {
-          return $container.html(data.html);
+        type: 'PUT',
+        url: url,
+        error: function(jqXHR, textStatus, errorThrown) {
+          var issueStatus;
+          issueStatus = isClose ? 'close' : 'open';
+          return new Flash(issueFailMessage, 'alert');
+        },
+        success: function(data, textStatus, jqXHR) {
+          if ('id' in data) {
+            $(document).trigger('issuable:change');
+            let total = Number($('.issue_counter').text().replace(/[^\d]/, ''));
+            if (isClose) {
+              $('a.btn-close').addClass('hidden');
+              $('a.btn-reopen').removeClass('hidden');
+              $('div.status-box-closed').removeClass('hidden');
+              $('div.status-box-open').addClass('hidden');
+              total -= 1;
+            } else {
+              $('a.btn-reopen').addClass('hidden');
+              $('a.btn-close').removeClass('hidden');
+              $('div.status-box-closed').addClass('hidden');
+              $('div.status-box-open').removeClass('hidden');
+              total += 1;
+            }
+            $('.issue_counter').text(gl.text.addDelimiter(total));
+          } else {
+            new Flash(issueFailMessage, 'alert');
+          }
+          return $this.prop('disabled', false);
         }
       });
-    };
+    });
+  }
 
-    Issue.prototype.initRelatedBranches = function() {
-      var $container;
-      $container = $('#related-branches');
-      return $.getJSON($container.data('url')).error(function() {
-        return new Flash('Failed to load related branches', 'alert');
-      }).success(function(data) {
-        if ('html' in data) {
-          return $container.html(data.html);
-        }
-      });
-    };
+  static submitNoteForm(form) {
+    var noteText;
+    noteText = form.find("textarea.js-note-text").val();
+    if (noteText.trim().length > 0) {
+      return form.submit();
+    }
+  }
 
-    Issue.prototype.initCanCreateBranch = function() {
-      var $container;
-      $container = $('#new-branch');
-      // If the user doesn't have the required permissions the container isn't
-      // rendered at all.
-      if ($container.length === 0) {
-        return;
+  static initMergeRequests() {
+    var $container;
+    $container = $('#merge-requests');
+    return $.getJSON($container.data('url')).error(function() {
+      return new Flash('Failed to load referenced merge requests', 'alert');
+    }).success(function(data) {
+      if ('html' in data) {
+        return $container.html(data.html);
       }
-      return $.getJSON($container.data('path')).error(function() {
-        $container.find('.checking').hide();
-        $container.find('.unavailable').show();
-        return new Flash('Failed to check if a new branch can be created.', 'alert');
-      }).success(function(data) {
-        if (data.can_create_branch) {
-          $container.find('.checking').hide();
-          $container.find('.available').show();
-        } else {
-          $container.find('.checking').hide();
-          return $container.find('.unavailable').show();
-        }
-      });
-    };
+    });
+  }
 
-    return Issue;
+  static initRelatedBranches() {
+    var $container;
+    $container = $('#related-branches');
+    return $.getJSON($container.data('url')).error(function() {
+      return new Flash('Failed to load related branches', 'alert');
+    }).success(function(data) {
+      if ('html' in data) {
+        return $container.html(data.html);
+      }
+    });
+  }
 
-  })();
+  static initCanCreateBranch() {
+    var $container;
+    $container = $('#new-branch');
+    // If the user doesn't have the required permissions the container isn't
+    // rendered at all.
+    if ($container.length === 0) {
+      return;
+    }
+    return $.getJSON($container.data('path')).error(function() {
+      $container.find('.unavailable').show();
+      return new Flash('Failed to check if a new branch can be created.', 'alert');
+    }).success(function(data) {
+      if (data.can_create_branch) {
+        $container.find('.available').show();
+      } else {
+        return $container.find('.unavailable').show();
+      }
+    });
+  }
+}
 
-}).call(this);
+export default Issue;
diff --git a/app/assets/javascripts/issue_status_select.js b/app/assets/javascripts/issue_status_select.js
index d7262e5eb74..b2cfd3ef2a3 100644
--- a/app/assets/javascripts/issue_status_select.js
+++ b/app/assets/javascripts/issue_status_select.js
@@ -1,4 +1,4 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, quotes, object-shorthand, no-unused-vars, no-shadow, one-var, one-var-declaration-per-line, comma-dangle, max-len */
 (function() {
   this.IssueStatusSelect = (function() {
     function IssueStatusSelect() {
@@ -30,7 +30,5 @@
     }
 
     return IssueStatusSelect;
-
   })();
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/issues_bulk_assignment.js b/app/assets/javascripts/issues_bulk_assignment.js
new file mode 100644
index 00000000000..e0ebd36a65c
--- /dev/null
+++ b/app/assets/javascripts/issues_bulk_assignment.js
@@ -0,0 +1,163 @@
+/* eslint-disable comma-dangle, quotes, consistent-return, func-names, array-callback-return, space-before-function-paren, prefer-arrow-callback, max-len, no-unused-expressions, no-sequences, no-underscore-dangle, no-unused-vars, no-param-reassign */
+/* global Issuable */
+/* global Flash */
+
+((global) => {
+  class IssuableBulkActions {
+    constructor({ container, form, issues, prefixId } = {}) {
+      this.prefixId = prefixId || 'issue_';
+      this.form = form || this.getElement('.bulk-update');
+      this.$labelDropdown = this.form.find('.js-label-select');
+      this.issues = issues || this.getElement('.issues-list .issue');
+      this.form.data('bulkActions', this);
+      this.willUpdateLabels = false;
+      this.bindEvents();
+      // Fixes bulk-assign not working when navigating through pages
+      Issuable.initChecks();
+    }
+
+    bindEvents() {
+      return this.form.off('submit').on('submit', this.onFormSubmit.bind(this));
+    }
+
+    onFormSubmit(e) {
+      e.preventDefault();
+      return this.submit();
+    }
+
+    submit() {
+      const _this = this;
+      const xhr = $.ajax({
+        url: this.form.attr('action'),
+        method: this.form.attr('method'),
+        dataType: 'JSON',
+        data: this.getFormDataAsObject()
+      });
+      xhr.done(() => window.location.reload());
+      xhr.fail(() => new Flash("Issue update failed"));
+      return xhr.always(this.onFormSubmitAlways.bind(this));
+    }
+
+    onFormSubmitAlways() {
+      return this.form.find('[type="submit"]').enable();
+    }
+
+    getSelectedIssues() {
+      return this.issues.has('.selected_issue:checked');
+    }
+
+    getLabelsFromSelection() {
+      const labels = [];
+      this.getSelectedIssues().map(function() {
+        const labelsData = $(this).data('labels');
+        if (labelsData) {
+          return labelsData.map(function(labelId) {
+            if (labels.indexOf(labelId) === -1) {
+              return labels.push(labelId);
+            }
+          });
+        }
+      });
+      return labels;
+    }
+
+    /**
+     * Will return only labels that were marked previously and the user has unmarked
+     * @return {Array} Label IDs
+     */
+
+    getUnmarkedIndeterminedLabels() {
+      const result = [];
+      const labelsToKeep = this.$labelDropdown.data('indeterminate');
+
+      this.getLabelsFromSelection().forEach((id) => {
+        if (labelsToKeep.indexOf(id) === -1) {
+          result.push(id);
+        }
+      });
+
+      return result;
+    }
+
+    /**
+     * Simple form serialization, it will return just what we need
+     * Returns key/value pairs from form data
+     */
+
+    getFormDataAsObject() {
+      const formData = {
+        update: {
+          state_event: this.form.find('input[name="update[state_event]"]').val(),
+          assignee_id: this.form.find('input[name="update[assignee_id]"]').val(),
+          milestone_id: this.form.find('input[name="update[milestone_id]"]').val(),
+          issuable_ids: this.form.find('input[name="update[issuable_ids]"]').val(),
+          subscription_event: this.form.find('input[name="update[subscription_event]"]').val(),
+          add_label_ids: [],
+          remove_label_ids: []
+        }
+      };
+      if (this.willUpdateLabels) {
+        formData.update.add_label_ids = this.$labelDropdown.data('marked');
+        formData.update.remove_label_ids = this.$labelDropdown.data('unmarked');
+      }
+      return formData;
+    }
+
+    setOriginalDropdownData() {
+      const $labelSelect = $('.bulk-update .js-label-select');
+      $labelSelect.data('common', this.getOriginalCommonIds());
+      $labelSelect.data('marked', this.getOriginalMarkedIds());
+      $labelSelect.data('indeterminate', this.getOriginalIndeterminateIds());
+    }
+
+    // From issuable's initial bulk selection
+    getOriginalCommonIds() {
+      const labelIds = [];
+
+      this.getElement('.selected_issue:checked').each((i, el) => {
+        labelIds.push(this.getElement(`#${this.prefixId}${el.dataset.id}`).data('labels'));
+      });
+      return _.intersection.apply(this, labelIds);
+    }
+
+    // From issuable's initial bulk selection
+    getOriginalMarkedIds() {
+      const labelIds = [];
+      this.getElement('.selected_issue:checked').each((i, el) => {
+        labelIds.push(this.getElement(`#${this.prefixId}${el.dataset.id}`).data('labels'));
+      });
+      return _.intersection.apply(this, labelIds);
+    }
+
+    // From issuable's initial bulk selection
+    getOriginalIndeterminateIds() {
+      const uniqueIds = [];
+      const labelIds = [];
+      let issuableLabels = [];
+
+      // Collect unique label IDs for all checked issues
+      this.getElement('.selected_issue:checked').each((i, el) => {
+        issuableLabels = this.getElement(`#${this.prefixId}${el.dataset.id}`).data('labels');
+        issuableLabels.forEach((labelId) => {
+          // Store unique IDs
+          if (uniqueIds.indexOf(labelId) === -1) {
+            uniqueIds.push(labelId);
+          }
+        });
+        // Store array of IDs per issuable
+        labelIds.push(issuableLabels);
+      });
+      // Add uniqueIds to add it as argument for _.intersection
+      labelIds.unshift(uniqueIds);
+      // Return IDs that are present but not in all selected issueables
+      return _.difference(uniqueIds, _.intersection.apply(this, labelIds));
+    }
+
+    getElement(selector) {
+      this.scopeEl = this.scopeEl || $('.content');
+      return this.scopeEl.find(selector);
+    }
+  }
+
+  global.IssuableBulkActions = IssuableBulkActions;
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/issues_bulk_assignment.js.es6 b/app/assets/javascripts/issues_bulk_assignment.js.es6
deleted file mode 100644
index 9697fb33566..00000000000
--- a/app/assets/javascripts/issues_bulk_assignment.js.es6
+++ /dev/null
@@ -1,150 +0,0 @@
-/* eslint-disable */
-((global) => {
-
-  class IssuableBulkActions {
-    constructor({ container, form, issues } = {}) {
-      this.container = container || $('.content'),
-      this.form = form || this.getElement('.bulk-update');
-      this.issues = issues || this.getElement('.issues-list .issue');
-      this.form.data('bulkActions', this);
-      this.willUpdateLabels = false;
-      this.bindEvents();
-      // Fixes bulk-assign not working when navigating through pages
-      Issuable.initChecks();
-    }
-
-    getElement(selector) {
-      return this.container.find(selector);
-    }
-
-    bindEvents() {
-      return this.form.off('submit').on('submit', this.onFormSubmit.bind(this));
-    }
-
-    onFormSubmit(e) {
-      e.preventDefault();
-      return this.submit();
-    }
-
-    submit() {
-      const _this = this;
-      const xhr = $.ajax({
-        url: this.form.attr('action'),
-        method: this.form.attr('method'),
-        dataType: 'JSON',
-        data: this.getFormDataAsObject()
-      });
-      xhr.done(() => window.location.reload());
-      xhr.fail(() => new Flash("Issue update failed"));
-      return xhr.always(this.onFormSubmitAlways.bind(this));
-    }
-
-    onFormSubmitAlways() {
-      return this.form.find('[type="submit"]').enable();
-    }
-
-    getSelectedIssues() {
-      return this.issues.has('.selected_issue:checked');
-    }
-
-    getLabelsFromSelection() {
-      const labels = [];
-      this.getSelectedIssues().map(function() {
-        const labelsData = $(this).data('labels');
-        if (labelsData) {
-          return labelsData.map(function(labelId) {
-            if (labels.indexOf(labelId) === -1) {
-              return labels.push(labelId);
-            }
-          });
-        }
-      });
-      return labels;
-    }
-
-
-    /**
-     * Will return only labels that were marked previously and the user has unmarked
-     * @return {Array} Label IDs
-     */
-
-    getUnmarkedIndeterminedLabels() {
-      const result = [];
-      const labelsToKeep = [];
-
-      this.getElement('.labels-filter .is-indeterminate')
-        .each((i, el) => labelsToKeep.push($(el).data('labelId')));
-
-      this.getLabelsFromSelection().forEach((id) => {
-        if (labelsToKeep.indexOf(id) === -1) {
-          result.push(id);
-        }
-      });
-
-      return result;
-    }
-
-
-    /**
-     * Simple form serialization, it will return just what we need
-     * Returns key/value pairs from form data
-     */
-
-    getFormDataAsObject() {
-      const formData = {
-        update: {
-          state_event: this.form.find('input[name="update[state_event]"]').val(),
-          assignee_id: this.form.find('input[name="update[assignee_id]"]').val(),
-          milestone_id: this.form.find('input[name="update[milestone_id]"]').val(),
-          issuable_ids: this.form.find('input[name="update[issuable_ids]"]').val(),
-          subscription_event: this.form.find('input[name="update[subscription_event]"]').val(),
-          add_label_ids: [],
-          remove_label_ids: []
-        }
-      };
-      if (this.willUpdateLabels) {
-        this.getLabelsToApply().map(function(id) {
-          return formData.update.add_label_ids.push(id);
-        });
-        this.getLabelsToRemove().map(function(id) {
-          return formData.update.remove_label_ids.push(id);
-        });
-      }
-      return formData;
-    }
-
-    getLabelsToApply() {
-      const labelIds = [];
-      const $labels = this.form.find('.labels-filter input[name="update[label_ids][]"]');
-      $labels.each(function(k, label) {
-        if (label) {
-          return labelIds.push(parseInt($(label).val()));
-        }
-      });
-      return labelIds;
-    }
-
-
-    /**
-     * Returns Label IDs that will be removed from issue selection
-     * @return {Array} Array of labels IDs
-     */
-
-    getLabelsToRemove() {
-      const result = [];
-      const indeterminatedLabels = this.getUnmarkedIndeterminedLabels();
-      const labelsToApply = this.getLabelsToApply();
-      indeterminatedLabels.map(function(id) {
-        // We need to exclude label IDs that will be applied
-        // By not doing this will cause issues from selection to not add labels at all
-        if (labelsToApply.indexOf(id) === -1) {
-          return result.push(id);
-        }
-      });
-      return result;
-    }
-  }
-
-  global.IssuableBulkActions = IssuableBulkActions;
-
-})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/label_manager.js b/app/assets/javascripts/label_manager.js
new file mode 100644
index 00000000000..38b2eb9ff14
--- /dev/null
+++ b/app/assets/javascripts/label_manager.js
@@ -0,0 +1,118 @@
+/* eslint-disable comma-dangle, class-methods-use-this, no-underscore-dangle, no-param-reassign, no-unused-vars, consistent-return, func-names, space-before-function-paren, max-len */
+/* global Flash */
+/* global Sortable */
+
+((global) => {
+  class LabelManager {
+    constructor({ togglePriorityButton, prioritizedLabels, otherLabels } = {}) {
+      this.togglePriorityButton = togglePriorityButton || $('.js-toggle-priority');
+      this.prioritizedLabels = prioritizedLabels || $('.js-prioritized-labels');
+      this.otherLabels = otherLabels || $('.js-other-labels');
+      this.errorMessage = 'Unable to update label prioritization at this time';
+      this.emptyState = document.querySelector('#js-priority-labels-empty-state');
+      this.sortable = Sortable.create(this.prioritizedLabels.get(0), {
+        filter: '.empty-message',
+        forceFallback: true,
+        fallbackClass: 'is-dragging',
+        dataIdAttr: 'data-id',
+        onUpdate: this.onPrioritySortUpdate.bind(this),
+      });
+      this.bindEvents();
+    }
+
+    bindEvents() {
+      return this.togglePriorityButton.on('click', this, this.onTogglePriorityClick);
+    }
+
+    onTogglePriorityClick(e) {
+      e.preventDefault();
+      const _this = e.data;
+      const $btn = $(e.currentTarget);
+      const $label = $(`#${$btn.data('domId')}`);
+      const action = $btn.parents('.js-prioritized-labels').length ? 'remove' : 'add';
+      const $tooltip = $(`#${$btn.find('.has-tooltip:visible').attr('aria-describedby')}`);
+      $tooltip.tooltip('destroy');
+      _this.toggleLabelPriority($label, action);
+      _this.toggleEmptyState($label, $btn, action);
+    }
+
+    toggleEmptyState($label, $btn, action) {
+      this.emptyState.classList.toggle('hidden', !!this.prioritizedLabels[0].querySelector(':scope > li'));
+    }
+
+    toggleLabelPriority($label, action, persistState) {
+      if (persistState == null) {
+        persistState = true;
+      }
+      let xhr;
+      const _this = this;
+      const url = $label.find('.js-toggle-priority').data('url');
+      let $target = this.prioritizedLabels;
+      let $from = this.otherLabels;
+      if (action === 'remove') {
+        $target = this.otherLabels;
+        $from = this.prioritizedLabels;
+      }
+      $label.detach().appendTo($target);
+      if ($from.find('li').length) {
+        $from.find('.empty-message').removeClass('hidden');
+      }
+      if ($target.find('> li:not(.empty-message)').length) {
+        $target.find('.empty-message').addClass('hidden');
+      }
+      // Return if we are not persisting state
+      if (!persistState) {
+        return;
+      }
+      if (action === 'remove') {
+        xhr = $.ajax({
+          url,
+          type: 'DELETE'
+        });
+        // Restore empty message
+        if (!$from.find('li').length) {
+          $from.find('.empty-message').removeClass('hidden');
+        }
+      } else {
+        xhr = this.savePrioritySort($label, action);
+      }
+      return xhr.fail(this.rollbackLabelPosition.bind(this, $label, action));
+    }
+
+    onPrioritySortUpdate() {
+      const xhr = this.savePrioritySort();
+      return xhr.fail(function() {
+        return new Flash(this.errorMessage, 'alert');
+      });
+    }
+
+    savePrioritySort() {
+      return $.post({
+        url: this.prioritizedLabels.data('url'),
+        data: {
+          label_ids: this.getSortedLabelsIds()
+        }
+      });
+    }
+
+    rollbackLabelPosition($label, originalAction) {
+      const action = originalAction === 'remove' ? 'add' : 'remove';
+      this.toggleLabelPriority($label, action, false);
+      return new Flash(this.errorMessage, 'alert');
+    }
+
+    getSortedLabelsIds() {
+      const sortedIds = [];
+      this.prioritizedLabels.find('> li').each(function() {
+        const id = $(this).data('id');
+
+        if (id) {
+          sortedIds.push(id);
+        }
+      });
+      return sortedIds;
+    }
+  }
+
+  gl.LabelManager = LabelManager;
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/label_manager.js.es6 b/app/assets/javascripts/label_manager.js.es6
deleted file mode 100644
index 175623e7448..00000000000
--- a/app/assets/javascripts/label_manager.js.es6
+++ /dev/null
@@ -1,107 +0,0 @@
-/* eslint-disable */
-((global) => {
-
-  class LabelManager {
-    constructor({ togglePriorityButton, prioritizedLabels, otherLabels } = {}) {
-      this.togglePriorityButton = togglePriorityButton || $('.js-toggle-priority');
-      this.prioritizedLabels = prioritizedLabels || $('.js-prioritized-labels');
-      this.otherLabels = otherLabels || $('.js-other-labels');
-      this.errorMessage = 'Unable to update label prioritization at this time';
-      this.prioritizedLabels.sortable({
-        items: 'li',
-        placeholder: 'list-placeholder',
-        axis: 'y',
-        update: this.onPrioritySortUpdate.bind(this)
-      });
-      this.bindEvents();
-    }
-
-    bindEvents() {
-      return this.togglePriorityButton.on('click', this, this.onTogglePriorityClick);
-    }
-
-    onTogglePriorityClick(e) {
-      e.preventDefault();
-      const _this = e.data;
-      const $btn = $(e.currentTarget);
-      const $label = $(`#${$btn.data('domId')}`);
-      const action = $btn.parents('.js-prioritized-labels').length ? 'remove' : 'add';
-      const $tooltip = $(`#${$btn.find('.has-tooltip:visible').attr('aria-describedby')}`);
-      $tooltip.tooltip('destroy');
-      return _this.toggleLabelPriority($label, action);
-    }
-
-    toggleLabelPriority($label, action, persistState) {
-      if (persistState == null) {
-        persistState = true;
-      }
-      let xhr;
-      const _this = this;
-      const url = $label.find('.js-toggle-priority').data('url');
-      let $target = this.prioritizedLabels;
-      let $from = this.otherLabels;
-      if (action === 'remove') {
-        $target = this.otherLabels;
-        $from = this.prioritizedLabels;
-      }
-      if ($from.find('li').length === 1) {
-        $from.find('.empty-message').removeClass('hidden');
-      }
-      if (!$target.find('li').length) {
-        $target.find('.empty-message').addClass('hidden');
-      }
-      $label.detach().appendTo($target);
-      // Return if we are not persisting state
-      if (!persistState) {
-        return;
-      }
-      if (action === 'remove') {
-        xhr = $.ajax({
-          url,
-          type: 'DELETE'
-        });
-        // Restore empty message
-        if (!$from.find('li').length) {
-          $from.find('.empty-message').removeClass('hidden');
-        }
-      } else {
-        xhr = this.savePrioritySort($label, action);
-      }
-      return xhr.fail(this.rollbackLabelPosition.bind(this, $label, action));
-    }
-
-    onPrioritySortUpdate() {
-      const xhr = this.savePrioritySort();
-      return xhr.fail(function() {
-        return new Flash(this.errorMessage, 'alert');
-      });
-    }
-
-    savePrioritySort() {
-      return $.post({
-        url: this.prioritizedLabels.data('url'),
-        data: {
-          label_ids: this.getSortedLabelsIds()
-        }
-      });
-    }
-
-    rollbackLabelPosition($label, originalAction) {
-      const action = originalAction === 'remove' ? 'add' : 'remove';
-      this.toggleLabelPriority($label, action, false);
-      return new Flash(this.errorMessage, 'alert');
-    }
-
-    getSortedLabelsIds() {
-      const sortedIds = [];
-      this.prioritizedLabels.find('li').each(function() {
-        sortedIds.push($(this).data('id'));
-      });
-      return sortedIds;
-    }
-  }
-
-  gl.LabelManager = LabelManager;
-
-})(window.gl || (window.gl = {}));
-
diff --git a/app/assets/javascripts/labels.js b/app/assets/javascripts/labels.js
index 3033e8ca5c2..17a3fc1b1e4 100644
--- a/app/assets/javascripts/labels.js
+++ b/app/assets/javascripts/labels.js
@@ -1,6 +1,6 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, vars-on-top, no-unused-vars, max-len */
 (function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
 
   this.Labels = (function() {
     function Labels() {
@@ -42,7 +42,5 @@
     };
 
     return Labels;
-
   })();
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/labels_select.js b/app/assets/javascripts/labels_select.js
index c334e3e0c02..443fb3e0ca9 100644
--- a/app/assets/javascripts/labels_select.js
+++ b/app/assets/javascripts/labels_select.js
@@ -1,12 +1,23 @@
-/* eslint-disable */
+/* eslint-disable no-useless-return, func-names, space-before-function-paren, wrap-iife, no-var, no-underscore-dangle, prefer-arrow-callback, max-len, one-var, no-unused-vars, one-var-declaration-per-line, prefer-template, no-new, consistent-return, object-shorthand, comma-dangle, no-shadow, no-param-reassign, brace-style, vars-on-top, quotes, no-lonely-if, no-else-return, dot-notation, no-empty, no-return-assign, camelcase, prefer-spread */
+/* global Issuable */
+/* global ListLabel */
+
 (function() {
   this.LabelsSelect = (function() {
-    function LabelsSelect() {
-      var _this;
+    function LabelsSelect(els) {
+      var _this, $els;
       _this = this;
-      $('.js-label-select').each(function(i, dropdown) {
-        var $block, $colorPreview, $dropdown, $form, $loading, $selectbox, $sidebarCollapsedValue, $value, abilityName, defaultLabel, enableLabelCreateButton, issueURLSplit, issueUpdateURL, labelHTMLTemplate, labelNoneHTMLTemplate, labelUrl, namespacePath, projectPath, saveLabelData, selectedLabel, showAny, showNo, $sidebarLabelTooltip, initialSelected, $toggleText, fieldName, useId, propertyName, showMenuAbove;
+
+      $els = $(els);
+
+      if (!els) {
+        $els = $('.js-label-select');
+      }
+
+      $els.each(function(i, dropdown) {
+        var $block, $colorPreview, $dropdown, $form, $loading, $selectbox, $sidebarCollapsedValue, $value, abilityName, defaultLabel, enableLabelCreateButton, issueURLSplit, issueUpdateURL, labelHTMLTemplate, labelNoneHTMLTemplate, labelUrl, namespacePath, projectPath, saveLabelData, selectedLabel, showAny, showNo, $sidebarLabelTooltip, initialSelected, $toggleText, fieldName, useId, propertyName, showMenuAbove, $container, $dropdownContainer;
         $dropdown = $(dropdown);
+        $dropdownContainer = $dropdown.closest('.labels-filter');
         $toggleText = $dropdown.find('.dropdown-toggle-text');
         namespacePath = $dropdown.data('namespace-path');
         projectPath = $dropdown.data('project-path');
@@ -65,7 +76,7 @@
           if (!selected.length) {
             data[abilityName].label_ids = [''];
           }
-          $loading.fadeIn();
+          $loading.removeClass('hidden').fadeIn();
           $dropdown.trigger('loading.gl.dropdown');
           return $.ajax({
             type: 'PUT',
@@ -122,7 +133,7 @@
             });
           });
         };
-        return $dropdown.glDropdown({
+        $dropdown.glDropdown({
           showMenuAbove: showMenuAbove,
           data: function(term, callback) {
             return $.ajax({
@@ -169,33 +180,40 @@
             });
           },
           renderRow: function(label, instance) {
-            var $a, $li, active, color, colorEl, indeterminate, removesAll, selectedClass, spacing;
+            var $a, $li, color, colorEl, indeterminate, removesAll, selectedClass, spacing, i, marked, dropdownName, dropdownValue;
             $li = $('<li>');
             $a = $('<a href="#">');
             selectedClass = [];
             removesAll = label.id <= 0 || (label.id == null);
             if ($dropdown.hasClass('js-filter-bulk-update')) {
-              indeterminate = instance.indeterminateIds;
-              active = instance.activeIds;
+              indeterminate = $dropdown.data('indeterminate') || [];
+              marked = $dropdown.data('marked') || [];
+
               if (indeterminate.indexOf(label.id) !== -1) {
                 selectedClass.push('is-indeterminate');
               }
-              if (active.indexOf(label.id) !== -1) {
+
+              if (marked.indexOf(label.id) !== -1) {
                 // Remove is-indeterminate class if the item will be marked as active
                 i = selectedClass.indexOf('is-indeterminate');
                 if (i !== -1) {
                   selectedClass.splice(i, 1);
                 }
                 selectedClass.push('is-active');
-                // Add input manually
-                instance.addInput(this.fieldName, label.id);
               }
-            }
-            if (this.id(label) && $form.find("input[type='hidden'][name='" + ($dropdown.data('fieldName')) + "'][value='" + this.id(label).toString().replace(/'/g, '\\\'') + "']").length) {
-              selectedClass.push('is-active');
-            }
-            if ($dropdown.hasClass('js-multiselect') && removesAll) {
-              selectedClass.push('dropdown-clear-active');
+            } else {
+              if (this.id(label)) {
+                dropdownName = $dropdown.data('fieldName');
+                dropdownValue = this.id(label).toString().replace(/'/g, '\\\'');
+
+                if ($form.find("input[type='hidden'][name='" + dropdownName + "'][value='" + dropdownValue + "']").length) {
+                  selectedClass.push('is-active');
+                }
+              }
+
+              if ($dropdown.hasClass('js-multiselect') && removesAll) {
+                selectedClass.push('dropdown-clear-active');
+              }
             }
             if (label.duplicate) {
               spacing = 100 / label.color.length;
@@ -231,7 +249,6 @@
             // Return generated html
             return $li.html($a).prop('outerHTML');
           },
-          persistWhenHide: $dropdown.data('persistWhenHide'),
           search: {
             fields: ['title']
           },
@@ -310,48 +327,43 @@
                 }
               }
             }
-            if ($dropdown.hasClass('js-filter-bulk-update')) {
-              // If we are persisting state we need the classes
-              if (!this.options.persistWhenHide) {
-                return $dropdown.parent().find('.is-active, .is-indeterminate').removeClass();
-              }
-            }
           },
           multiSelect: $dropdown.hasClass('js-multiselect'),
           vue: $dropdown.hasClass('js-issue-board-sidebar'),
-          clicked: function(label, $el, e) {
-            var isIssueIndex, isMRIndex, page;
-            _this.enableBulkLabelDropdown();
+          clicked: function(label, $el, e, isMarking) {
+            var isIssueIndex, isMRIndex, page, boardsModel;
+
+            page = $('body').data('page');
+            isIssueIndex = page === 'projects:issues:index';
+            isMRIndex = page === 'projects:merge_requests:index';
 
             if ($dropdown.parent().find('.is-active:not(.dropdown-clear-active)').length) {
               $dropdown.parent()
                 .find('.dropdown-clear-active')
-                .removeClass('is-active')
+                .removeClass('is-active');
             }
 
-            if ($dropdown.hasClass('js-filter-bulk-update') || $dropdown.hasClass('js-issuable-form-dropdown')) {
+            if ($dropdown.hasClass('js-issuable-form-dropdown')) {
               return;
             }
 
-            page = $('body').data('page');
-            isIssueIndex = page === 'projects:issues:index';
-            isMRIndex = page === 'projects:merge_requests:index';
-            if ($('html').hasClass('issue-boards-page') && !$dropdown.hasClass('js-issue-board-sidebar')) {
+            if ($dropdown.hasClass('js-filter-bulk-update')) {
+              _this.enableBulkLabelDropdown();
+              _this.setDropdownData($dropdown, isMarking, this.id(label));
+              return;
+            }
+
+            if ($dropdown.closest('.add-issues-modal').length) {
+              boardsModel = gl.issueBoards.ModalStore.store.filter;
+            }
+
+            if (boardsModel) {
               if (label.isAny) {
-                gl.issueBoards.BoardsStore.state.filters['label_name'] = [];
-              }
-              else if ($el.hasClass('is-active')) {
-                gl.issueBoards.BoardsStore.state.filters['label_name'].push(label.title);
-              }
-              else {
-                var filters = gl.issueBoards.BoardsStore.state.filters['label_name'];
-                filters = filters.filter(function (filteredLabel) {
-                  return filteredLabel !== label.title;
-                });
-                gl.issueBoards.BoardsStore.state.filters['label_name'] = filters;
+                boardsModel['label_name'] = [];
+              } else if ($el.hasClass('is-active')) {
+                boardsModel['label_name'].push(label.title);
               }
 
-              gl.issueBoards.BoardsStore.updateFiltersUrl();
               e.preventDefault();
               return;
             }
@@ -397,17 +409,10 @@
               }
             }
           },
-          setIndeterminateIds: function() {
-            if (this.dropdown.find('.dropdown-menu-toggle').hasClass('js-filter-bulk-update')) {
-              return this.indeterminateIds = _this.getIndeterminateIds();
-            }
-          },
-          setActiveIds: function() {
-            if (this.dropdown.find('.dropdown-menu-toggle').hasClass('js-filter-bulk-update')) {
-              return this.activeIds = _this.getActiveIds();
-            }
-          }
         });
+
+        // Set dropdown data
+        _this.setOriginalDropdownData($dropdownContainer, $dropdown);
       });
       this.bindEvents();
     }
@@ -420,34 +425,9 @@
       if ($('.selected_issue:checked').length) {
         return;
       }
-      // Remove inputs
-      $('.issues_bulk_update .labels-filter input[type="hidden"]').remove();
-      // Also restore button text
       return $('.issues_bulk_update .labels-filter .dropdown-toggle-text').text('Label');
     };
 
-    LabelsSelect.prototype.getIndeterminateIds = function() {
-      var label_ids;
-      label_ids = [];
-      $('.selected_issue:checked').each(function(i, el) {
-        var issue_id;
-        issue_id = $(el).data('id');
-        return label_ids.push($("#issue_" + issue_id).data('labels'));
-      });
-      return _.flatten(label_ids);
-    };
-
-    LabelsSelect.prototype.getActiveIds = function() {
-      var label_ids;
-      label_ids = [];
-      $('.selected_issue:checked').each(function(i, el) {
-        var issue_id;
-        issue_id = $(el).data('id');
-        return label_ids.push($("#issue_" + issue_id).data('labels'));
-      });
-      return _.intersection.apply(_, label_ids);
-    };
-
     LabelsSelect.prototype.enableBulkLabelDropdown = function() {
       var issuableBulkActions;
       if ($('.selected_issue:checked').length) {
@@ -456,8 +436,58 @@
       }
     };
 
-    return LabelsSelect;
+    LabelsSelect.prototype.setDropdownData = function($dropdown, isMarking, value) {
+      var i, markedIds, unmarkedIds, indeterminateIds;
+      var issuableBulkActions = $('.bulk-update').data('bulkActions');
 
-  })();
+      markedIds = $dropdown.data('marked') || [];
+      unmarkedIds = $dropdown.data('unmarked') || [];
+      indeterminateIds = $dropdown.data('indeterminate') || [];
 
-}).call(this);
+      if (isMarking) {
+        markedIds.push(value);
+
+        i = indeterminateIds.indexOf(value);
+        if (i > -1) {
+          indeterminateIds.splice(i, 1);
+        }
+
+        i = unmarkedIds.indexOf(value);
+        if (i > -1) {
+          unmarkedIds.splice(i, 1);
+        }
+      } else {
+        // If marked item (not common) is unmarked
+        i = markedIds.indexOf(value);
+        if (i > -1) {
+          markedIds.splice(i, 1);
+        }
+
+        // If an indeterminate item is being unmarked
+        if (issuableBulkActions.getOriginalIndeterminateIds().indexOf(value) > -1) {
+          unmarkedIds.push(value);
+        }
+
+        // If a marked item is being unmarked
+        // (a marked item could also be a label that is present in all selection)
+        if (issuableBulkActions.getOriginalCommonIds().indexOf(value) > -1) {
+          unmarkedIds.push(value);
+        }
+      }
+
+      $dropdown.data('marked', markedIds);
+      $dropdown.data('unmarked', unmarkedIds);
+      $dropdown.data('indeterminate', indeterminateIds);
+    };
+
+    LabelsSelect.prototype.setOriginalDropdownData = function($container, $dropdown) {
+      var labels = [];
+      $container.find('[name="label_name[]"]').map(function() {
+        return labels.push(this.value);
+      });
+      $dropdown.data('marked', labels);
+    };
+
+    return LabelsSelect;
+  })();
+}).call(window);
diff --git a/app/assets/javascripts/layout_nav.js b/app/assets/javascripts/layout_nav.js
index 6b4edf02f4d..a5f99bcdd8f 100644
--- a/app/assets/javascripts/layout_nav.js
+++ b/app/assets/javascripts/layout_nav.js
@@ -1,4 +1,5 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, no-var, prefer-arrow-callback, no-unused-vars, one-var, one-var-declaration-per-line, vars-on-top, max-len */
+
 (function() {
   var hideEndFade;
 
@@ -10,8 +11,9 @@
     });
   };
 
-  $(function() {
-    var $scrollingTabs = $('.scrolling-tabs');
+  $(document).on('init.scrolling-tabs', () => {
+    const $scrollingTabs = $('.scrolling-tabs').not('.is-initialized');
+    $scrollingTabs.addClass('is-initialized');
 
     hideEndFade($scrollingTabs);
     $(window).off('resize.nav').on('resize.nav', function() {
@@ -27,10 +29,10 @@
     });
 
     $scrollingTabs.each(function () {
-      var $this = $(this),
-          scrollingTabWidth = $this.width(),
-          $active = $this.find('.active'),
-          activeWidth = $active.width();
+      var $this = $(this);
+      var scrollingTabWidth = $this.width();
+      var $active = $this.find('.active');
+      var activeWidth = $active.width();
 
       if ($active.length) {
         var offset = $active.offset().left + activeWidth;
@@ -43,5 +45,4 @@
       }
     });
   });
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/lib/ace.js b/app/assets/javascripts/lib/ace.js
index b1718e89d3d..9cdc0309503 100644
--- a/app/assets/javascripts/lib/ace.js
+++ b/app/assets/javascripts/lib/ace.js
@@ -1,3 +1,3 @@
-/* eslint-disable */
-/*= require ace-rails-ap */
+/*= require ace/ace */
 /*= require ace/ext-searchbox */
+/*= require ./ace/ace_config_paths */
diff --git a/app/assets/javascripts/lib/ace/ace_config_paths.js.erb b/app/assets/javascripts/lib/ace/ace_config_paths.js.erb
new file mode 100644
index 00000000000..976769ba84a
--- /dev/null
+++ b/app/assets/javascripts/lib/ace/ace_config_paths.js.erb
@@ -0,0 +1,34 @@
+<%
+ace_gem_path = Bundler.rubygems.find_name('ace-rails-ap').first.full_gem_path
+ace_workers = Dir[ace_gem_path + '/vendor/assets/javascripts/ace/worker-*.js'].sort.map do |file|
+  File.basename(file, '.js').sub(/^worker-/, '')
+end
+ace_modes = Dir[ace_gem_path + '/vendor/assets/javascripts/ace/mode-*.js'].sort.map do |file|
+  File.basename(file, '.js').sub(/^mode-/, '')
+end
+%>
+// Lazy-load configuration when ace.edit is called
+(function() {
+  var basePath;
+  var ace = window.ace;
+  var edit = ace.edit;
+  ace.edit = function() {
+    window.gon = window.gon || {};
+    basePath = (window.gon.relative_url_root || '').replace(/\/$/, '') + '/assets/ace';
+    ace.config.set('basePath', basePath);
+
+    // configure paths for all worker modules
+<% ace_workers.each do |worker| %>
+    ace.config.setModuleUrl('ace/mode/<%= worker %>_worker', basePath + '/<%= File.basename(asset_path("ace/worker-#{worker}.js")) %>');
+<% end %>
+
+    // configure paths for all mode modules
+<% ace_modes.each do |mode| %>
+    ace.config.setModuleUrl('ace/mode/<%= mode %>', basePath + '/<%= File.basename(asset_path("ace/mode-#{mode}.js")) %>');
+<% end %>
+
+    // restore original method
+    ace.edit = edit;
+    return ace.edit.apply(ace, arguments);
+  };
+})();
diff --git a/app/assets/javascripts/lib/chart.js b/app/assets/javascripts/lib/chart.js
deleted file mode 100644
index e1dfdae97de..00000000000
--- a/app/assets/javascripts/lib/chart.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/* eslint-disable */
-
-/*= require Chart */
-
-(function() {
-
-}).call(this);
diff --git a/app/assets/javascripts/lib/cropper.js b/app/assets/javascripts/lib/cropper.js
deleted file mode 100644
index 155e30cc462..00000000000
--- a/app/assets/javascripts/lib/cropper.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/* eslint-disable */
-
-/*= require cropper */
-
-(function() {
-
-}).call(this);
diff --git a/app/assets/javascripts/lib/d3.js b/app/assets/javascripts/lib/d3.js
deleted file mode 100644
index 0c9c2787077..00000000000
--- a/app/assets/javascripts/lib/d3.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/* eslint-disable */
-
-/*= require d3 */
-
-(function() {
-
-}).call(this);
diff --git a/app/assets/javascripts/lib/raphael.js b/app/assets/javascripts/lib/raphael.js
deleted file mode 100644
index cc445db274b..00000000000
--- a/app/assets/javascripts/lib/raphael.js
+++ /dev/null
@@ -1,9 +0,0 @@
-/* eslint-disable */
-
-/*= require raphael */
-/*= require g.raphael */
-/*= require g.bar */
-
-(function() {
-
-}).call(this);
diff --git a/app/assets/javascripts/lib/utils/animate.js b/app/assets/javascripts/lib/utils/animate.js
index a68edab2aad..d93c1d0da59 100644
--- a/app/assets/javascripts/lib/utils/animate.js
+++ b/app/assets/javascripts/lib/utils/animate.js
@@ -1,4 +1,4 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-param-reassign, no-void, prefer-template, no-var, new-cap, prefer-arrow-callback, consistent-return, max-len */
 (function() {
   (function(w) {
     if (w.gl == null) {
@@ -46,5 +46,4 @@
       return dfd.promise();
     };
   })(window);
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/lib/utils/bootstrap_linked_tabs.js b/app/assets/javascripts/lib/utils/bootstrap_linked_tabs.js
new file mode 100644
index 00000000000..2955bda1a36
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/bootstrap_linked_tabs.js
@@ -0,0 +1,112 @@
+/**
+ * Linked Tabs
+ *
+ * Handles persisting and restores the current tab selection and content.
+ * Reusable component for static content.
+ *
+ * ### Example Markup
+ *
+ *  <ul class="nav-links tab-links">
+ *    <li class="active">
+ *      <a data-action="tab1" data-target="#tab1" data-toggle="tab" href="/path/tab1">
+ *        Tab 1
+ *      </a>
+ *    </li>
+ *    <li class="groups-tab">
+ *      <a data-action="tab2" data-target="#tab2" data-toggle="tab" href="/path/tab2">
+ *        Tab 2
+ *      </a>
+ *    </li>
+ *
+ *
+ *  <div class="tab-content">
+ *    <div class="tab-pane" id="tab1">
+ *      Tab 1 Content
+ *    </div>
+ *    <div class="tab-pane" id="tab2">
+ *      Tab 2 Content
+ *    </div>
+ * </div>
+ *
+ *
+ * ### How to use
+ *
+ *  new window.gl.LinkedTabs({
+ *    action: "#{controller.action_name}",
+ *    defaultAction: 'tab1',
+ *    parentEl: '.tab-links'
+ *  });
+ */
+
+(() => {
+  window.gl = window.gl || {};
+
+  window.gl.LinkedTabs = class LinkedTabs {
+    /**
+     * Binds the events and activates de default tab.
+     *
+     * @param  {Object} options
+     */
+    constructor(options) {
+      this.options = options || {};
+
+      this.defaultAction = this.options.defaultAction;
+      this.action = this.options.action || this.defaultAction;
+
+      if (this.action === 'show') {
+        this.action = this.defaultAction;
+      }
+
+      this.currentLocation = window.location;
+
+      const tabSelector = `${this.options.parentEl} a[data-toggle="tab"]`;
+
+      // since this is a custom event we need jQuery :(
+      $(document)
+        .off('shown.bs.tab', tabSelector)
+        .on('shown.bs.tab', tabSelector, e => this.tabShown(e));
+
+      this.activateTab(this.action);
+    }
+
+    /**
+     * Handles the `shown.bs.tab` event to set the currect url action.
+     *
+     * @param  {type} evt
+     * @return {Function}
+     */
+    tabShown(evt) {
+      const source = evt.target.getAttribute('href');
+
+      return this.setCurrentAction(source);
+    }
+
+    /**
+     * Updates the URL with the path that matched the given action.
+     *
+     * @param  {String} source
+     * @return {String}
+     */
+    setCurrentAction(source) {
+      const copySource = source;
+
+      copySource.replace(/\/+$/, '');
+
+      const newState = `${copySource}${this.currentLocation.search}${this.currentLocation.hash}`;
+
+      history.replaceState({
+        url: newState,
+      }, document.title, newState);
+      return newState;
+    }
+
+    /**
+     * Given the current action activates the correct tab.
+     * http://getbootstrap.com/javascript/#tab-show
+     * Note: Will trigger `shown.bs.tab`
+     */
+    activateTab() {
+      return $(`${this.options.parentEl} a[data-action='${this.action}']`).tab('show');
+    }
+  };
+})();
diff --git a/app/assets/javascripts/lib/utils/common_utils.js b/app/assets/javascripts/lib/utils/common_utils.js
index 8447421195d..46b80c04e20 100644
--- a/app/assets/javascripts/lib/utils/common_utils.js
+++ b/app/assets/javascripts/lib/utils/common_utils.js
@@ -1,4 +1,4 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-unused-expressions, no-param-reassign, no-else-return, quotes, object-shorthand, comma-dangle, camelcase, one-var, vars-on-top, one-var-declaration-per-line, no-return-assign, consistent-return, max-len, prefer-template */
 (function() {
   (function(w) {
     var base;
@@ -33,10 +33,6 @@
       });
     };
 
-    w.gl.utils.split = function(val) {
-      return val.split(/,\s*/);
-    };
-
     w.gl.utils.extractLast = function(term) {
       return this.split(term).pop();
     };
@@ -67,83 +63,303 @@
       });
     };
 
-    w.gl.utils.disableButtonIfAnyEmptyField = function(form, form_selector, button_selector) {
-      var closest_submit, updateButtons;
-      closest_submit = form.find(button_selector);
-      updateButtons = function() {
-        var filled;
-        filled = true;
-        form.find('input').filter(form_selector).each(function() {
-          return filled = this.rstrip($(this).val()) !== "" || !$(this).attr('required');
-        });
-        if (filled) {
-          return closest_submit.enable();
-        } else {
-          return closest_submit.disable();
+    // automatically adjust scroll position for hash urls taking the height of the navbar into account
+    // https://github.com/twitter/bootstrap/issues/1768
+    w.gl.utils.handleLocationHash = function() {
+      var hash = w.gl.utils.getLocationHash();
+      if (!hash) return;
+
+      // This is required to handle non-unicode characters in hash
+      hash = decodeURIComponent(hash);
+
+      // scroll to user-generated markdown anchor if we cannot find a match
+      if (document.getElementById(hash) === null) {
+        var target = document.getElementById('user-content-' + hash);
+        if (target && target.scrollIntoView) {
+          target.scrollIntoView(true);
+        }
+      } else {
+        // only adjust for fixedTabs when not targeting user-generated content
+        var fixedTabs = document.querySelector('.js-tabs-affix');
+        if (fixedTabs) {
+          window.scrollBy(0, -fixedTabs.offsetHeight);
         }
-      };
-      updateButtons();
-      return form.keyup(updateButtons);
+      }
     };
 
-    w.gl.utils.sanitize = function(str) {
-      return str.replace(/<(?:.|\n)*?>/gm, '');
+    // Check if element scrolled into viewport from above or below
+    // Courtesy http://stackoverflow.com/a/7557433/414749
+    w.gl.utils.isInViewport = function(el) {
+      var rect = el.getBoundingClientRect();
+
+      return (
+        rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <= window.innerHeight &&
+        rect.right <= window.innerWidth
+      );
     };
 
-    w.gl.utils.unbindEvents = function() {
-      return $(document).off('scroll');
+    gl.utils.getPagePath = function(index) {
+      index = index || 0;
+      return $('body').data('page').split(':')[index];
     };
 
-    w.gl.utils.shiftWindow = function() {
-      return w.scrollBy(0, -100);
+    gl.utils.parseUrl = function (url) {
+      var parser = document.createElement('a');
+      parser.href = url;
+      return parser;
     };
 
+    gl.utils.parseUrlPathname = function (url) {
+      var parsedUrl = gl.utils.parseUrl(url);
+      // parsedUrl.pathname will return an absolute path for Firefox and a relative path for IE11
+      // We have to make sure we always have an absolute path.
+      return parsedUrl.pathname.charAt(0) === '/' ? parsedUrl.pathname : '/' + parsedUrl.pathname;
+    };
 
-    gl.utils.updateTooltipTitle = function($tooltipEl, newTitle) {
-      return $tooltipEl.tooltip('destroy').attr('title', newTitle).tooltip('fixTitle');
+    gl.utils.getUrlParamsArray = function () {
+      // We can trust that each param has one & since values containing & will be encoded
+      // Remove the first character of search as it is always ?
+      return window.location.search.slice(1).split('&');
     };
-    gl.utils.preventDisabledButtons = function() {
-      return $('.btn').click(function(e) {
-        if ($(this).hasClass('disabled')) {
-          e.preventDefault();
-          e.stopImmediatePropagation();
-          return false;
-        }
-      });
+
+    gl.utils.isMetaKey = function(e) {
+      return e.metaKey || e.ctrlKey || e.altKey || e.shiftKey;
     };
-    gl.utils.getPagePath = function() {
-      return $('body').data('page').split(':')[0];
+
+    gl.utils.isMetaClick = function(e) {
+      // Identify following special clicks
+      // 1) Cmd + Click on Mac (e.metaKey)
+      // 2) Ctrl + Click on PC (e.ctrlKey)
+      // 3) Middle-click or Mouse Wheel Click (e.which is 2)
+      return e.metaKey || e.ctrlKey || e.which === 2;
     };
-    gl.utils.parseUrl = function (url) {
-      var parser = document.createElement('a');
-      parser.href = url;
-      return parser;
+
+    gl.utils.scrollToElement = function($el) {
+      var top = $el.offset().top;
+      gl.mrTabsHeight = gl.mrTabsHeight || $('.merge-request-tabs').height();
+
+      return $('body, html').animate({
+        scrollTop: top - (gl.mrTabsHeight)
+      }, 200);
     };
 
-    gl.utils.cleanupBeforeFetch = function() {
-      // Unbind scroll events
-      $(document).off('scroll');
-      // Close any open tooltips
-      $('.has-tooltip, [data-toggle="tooltip"]').tooltip('destroy');
+    /**
+      this will take in the `name` of the param you want to parse in the url
+      if the name does not exist this function will return `null`
+      otherwise it will return the value of the param key provided
+    */
+    w.gl.utils.getParameterByName = (name) => {
+      const url = window.location.href;
+      name = name.replace(/[[\]]/g, '\\$&');
+      const regex = new RegExp(`[?&]${name}(=([^&#]*)|&|#|$)`);
+      const results = regex.exec(url);
+      if (!results) return null;
+      if (!results[2]) return '';
+      return decodeURIComponent(results[2].replace(/\+/g, ' '));
     };
 
-    return jQuery.timefor = function(time, suffix, expiredLabel) {
-      var suffixFromNow, timefor;
-      if (!time) {
-        return '';
+    w.gl.utils.getSelectedFragment = () => {
+      const selection = window.getSelection();
+      if (selection.rangeCount === 0) return null;
+      const documentFragment = selection.getRangeAt(0).cloneContents();
+      if (documentFragment.textContent.length === 0) return null;
+
+      return documentFragment;
+    };
+
+    w.gl.utils.insertText = (target, text) => {
+      // Firefox doesn't support `document.execCommand('insertText', false, text)` on textareas
+
+      const selectionStart = target.selectionStart;
+      const selectionEnd = target.selectionEnd;
+      const value = target.value;
+
+      const textBefore = value.substring(0, selectionStart);
+      const textAfter = value.substring(selectionEnd, value.length);
+      const newText = textBefore + text + textAfter;
+
+      target.value = newText;
+      target.selectionStart = target.selectionEnd = selectionStart + text.length;
+
+      // Trigger autosave
+      $(target).trigger('input');
+
+      // Trigger autosize
+      var event = document.createEvent('Event');
+      event.initEvent('autosize:update', true, false);
+      target.dispatchEvent(event);
+    };
+
+    w.gl.utils.nodeMatchesSelector = (node, selector) => {
+      const matches = Element.prototype.matches ||
+        Element.prototype.matchesSelector ||
+        Element.prototype.mozMatchesSelector ||
+        Element.prototype.msMatchesSelector ||
+        Element.prototype.oMatchesSelector ||
+        Element.prototype.webkitMatchesSelector;
+
+      if (matches) {
+        return matches.call(node, selector);
       }
-      suffix || (suffix = 'remaining');
-      expiredLabel || (expiredLabel = 'Past due');
-      jQuery.timeago.settings.allowFuture = true;
-      suffixFromNow = jQuery.timeago.settings.strings.suffixFromNow;
-      jQuery.timeago.settings.strings.suffixFromNow = suffix;
-      timefor = $.timeago(time);
-      if (timefor.indexOf('ago') > -1) {
-        timefor = expiredLabel;
+
+      // IE11 doesn't support `node.matches(selector)`
+
+      let parentNode = node.parentNode;
+      if (!parentNode) {
+        parentNode = document.createElement('div');
+        node = node.cloneNode(true);
+        parentNode.appendChild(node);
       }
-      jQuery.timeago.settings.strings.suffixFromNow = suffixFromNow;
-      return timefor;
+
+      const matchingNodes = parentNode.querySelectorAll(selector);
+      return Array.prototype.indexOf.call(matchingNodes, node) !== -1;
     };
-  })(window);
 
-}).call(this);
+    /**
+      this will take in the headers from an API response and normalize them
+      this way we don't run into production issues when nginx gives us lowercased header keys
+    */
+    w.gl.utils.normalizeHeaders = (headers) => {
+      const upperCaseHeaders = {};
+
+      Object.keys(headers).forEach((e) => {
+        upperCaseHeaders[e.toUpperCase()] = headers[e];
+      });
+
+      return upperCaseHeaders;
+    };
+
+    /**
+      this will take in the getAllResponseHeaders result and normalize them
+      this way we don't run into production issues when nginx gives us lowercased header keys
+    */
+    w.gl.utils.normalizeCRLFHeaders = (headers) => {
+      const headersObject = {};
+      const headersArray = headers.split('\n');
+
+      headersArray.forEach((header) => {
+        const keyValue = header.split(': ');
+        headersObject[keyValue[0]] = keyValue[1];
+      });
+
+      return w.gl.utils.normalizeHeaders(headersObject);
+    };
+
+    /**
+     * Parses pagination object string values into numbers.
+     *
+     * @param {Object} paginationInformation
+     * @returns {Object}
+     */
+    w.gl.utils.parseIntPagination = paginationInformation => ({
+      perPage: parseInt(paginationInformation['X-PER-PAGE'], 10),
+      page: parseInt(paginationInformation['X-PAGE'], 10),
+      total: parseInt(paginationInformation['X-TOTAL'], 10),
+      totalPages: parseInt(paginationInformation['X-TOTAL-PAGES'], 10),
+      nextPage: parseInt(paginationInformation['X-NEXT-PAGE'], 10),
+      previousPage: parseInt(paginationInformation['X-PREV-PAGE'], 10),
+    });
+
+    /**
+     * Updates the search parameter of a URL given the parameter and value provided.
+     *
+     * If no search params are present we'll add it.
+     * If param for page is already present, we'll update it
+     * If there are params but not for the given one, we'll add it at the end.
+     * Returns the new search parameters.
+     *
+     * @param {String} param
+     * @param {Number|String|Undefined|Null} value
+     * @return {String}
+     */
+    w.gl.utils.setParamInURL = (param, value) => {
+      let search;
+      const locationSearch = window.location.search;
+
+      if (locationSearch.length) {
+        const parameters = locationSearch.substring(1, locationSearch.length)
+          .split('&')
+          .reduce((acc, element) => {
+            const val = element.split('=');
+            acc[val[0]] = decodeURIComponent(val[1]);
+            return acc;
+          }, {});
+
+        parameters[param] = value;
+
+        const toString = Object.keys(parameters)
+          .map(val => `${val}=${encodeURIComponent(parameters[val])}`)
+          .join('&');
+
+        search = `?${toString}`;
+      } else {
+        search = `?${param}=${value}`;
+      }
+
+      return search;
+    };
+
+    /**
+     * Converts permission provided as strings to booleans.
+     *
+     * @param  {String} string
+     * @returns {Boolean}
+     */
+    w.gl.utils.convertPermissionToBoolean = permission => permission === 'true';
+
+    /**
+     * Back Off exponential algorithm
+     * backOff :: (Function<next, stop>, Number) -> Promise<Any, Error>
+     *
+     * @param {Function<next, stop>} fn function to be called
+     * @param {Number} timeout
+     * @return {Promise<Any, Error>}
+     * @example
+     * ```
+     *  backOff(function (next, stop) {
+     *    // Let's perform this function repeatedly for 60s or for the timeout provided.
+     *
+     *    ourFunction()
+     *      .then(function (result) {
+     *        // continue if result is not what we need
+     *        next();
+     *
+     *        // when result is what we need let's stop with the repetions and jump out of the cycle
+     *        stop(result);
+     *      })
+     *      .catch(function (error) {
+     *        // if there is an error, we need to stop this with an error.
+     *        stop(error);
+     *      })
+     *  }, 60000)
+     *  .then(function (result) {})
+     *  .catch(function (error) {
+     *    // deal with errors passed to stop()
+     *  })
+     * ```
+     */
+    w.gl.utils.backOff = (fn, timeout = 60000) => {
+      const maxInterval = 32000;
+      let nextInterval = 2000;
+
+      const startTime = Date.now();
+
+      return new Promise((resolve, reject) => {
+        const stop = arg => ((arg instanceof Error) ? reject(arg) : resolve(arg));
+
+        const next = () => {
+          if (Date.now() - startTime < timeout) {
+            setTimeout(fn.bind(null, next, stop), nextInterval);
+            nextInterval = Math.min(nextInterval + nextInterval, maxInterval);
+          } else {
+            reject(new Error('BACKOFF_TIMEOUT'));
+          }
+        };
+
+        fn(next, stop);
+      });
+    };
+  })(window);
+}).call(window);
diff --git a/app/assets/javascripts/lib/utils/datetime_utility.js b/app/assets/javascripts/lib/utils/datetime_utility.js
index 59e526ed623..82dcbdc26c8 100644
--- a/app/assets/javascripts/lib/utils/datetime_utility.js
+++ b/app/assets/javascripts/lib/utils/datetime_utility.js
@@ -1,7 +1,15 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-param-reassign, no-cond-assign, comma-dangle, no-unused-expressions, prefer-template, max-len */
+/* global timeago */
+/* global dateFormat */
+
+window.timeago = require('timeago.js');
+window.dateFormat = require('vendor/date.format');
+
 (function() {
   (function(w) {
     var base;
+    var timeagoInstance;
+
     if (w.gl == null) {
       w.gl = {};
     }
@@ -18,55 +26,93 @@
       return this.days[date.getDay()];
     };
 
-    w.gl.utils.localTimeAgo = function($timeagoEls, setTimeago) {
-      if (setTimeago == null) {
-        setTimeago = true;
-      }
-      $timeagoEls.each(function() {
-        var $el;
-        $el = $(this);
-        return $el.attr('title', gl.utils.formatDate($el.attr('datetime')));
+    w.gl.utils.localTimeAgo = function($timeagoEls, setTimeago = true) {
+      $timeagoEls.each((i, el) => {
+        el.setAttribute('title', gl.utils.formatDate(el.getAttribute('datetime')));
+
+        if (setTimeago) {
+          // Recreate with custom template
+          $(el).tooltip({
+            template: '<div class="tooltip local-timeago" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
+          });
+        }
+
+        el.classList.add('js-timeago-render');
       });
-      if (setTimeago) {
-        $timeagoEls.timeago();
-        $timeagoEls.tooltip('destroy');
-        // Recreate with custom template
-        return $timeagoEls.tooltip({
-          template: '<div class="tooltip local-timeago" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
-        });
+
+      gl.utils.renderTimeago($timeagoEls);
+    };
+
+    w.gl.utils.getTimeago = function() {
+      var locale;
+
+      if (!timeagoInstance) {
+        locale = function(number, index) {
+          return [
+            ['less than a minute ago', 'a while'],
+            ['less than a minute ago', 'in %s seconds'],
+            ['about a minute ago', 'in 1 minute'],
+            ['%s minutes ago', 'in %s minutes'],
+            ['about an hour ago', 'in 1 hour'],
+            ['about %s hours ago', 'in %s hours'],
+            ['a day ago', 'in 1 day'],
+            ['%s days ago', 'in %s days'],
+            ['a week ago', 'in 1 week'],
+            ['%s weeks ago', 'in %s weeks'],
+            ['a month ago', 'in 1 month'],
+            ['%s months ago', 'in %s months'],
+            ['a year ago', 'in 1 year'],
+            ['%s years ago', 'in %s years']
+          ][index];
+        };
+
+        timeago.register('gl_en', locale);
+        timeagoInstance = timeago();
       }
+
+      return timeagoInstance;
     };
 
-    w.gl.utils.shortTimeAgo = function($el) {
-      var shortLocale, tmpLocale;
-      shortLocale = {
-        prefixAgo: null,
-        prefixFromNow: null,
-        suffixAgo: 'ago',
-        suffixFromNow: 'from now',
-        seconds: '1 min',
-        minute: '1 min',
-        minutes: '%d mins',
-        hour: '1 hr',
-        hours: '%d hrs',
-        day: '1 day',
-        days: '%d days',
-        month: '1 month',
-        months: '%d months',
-        year: '1 year',
-        years: '%d years',
-        wordSeparator: ' ',
-        numbers: []
-      };
-      tmpLocale = $.timeago.settings.strings;
-      $el.each(function(el) {
-        var $el1;
-        $el1 = $(this);
-        return $el1.attr('title', gl.utils.formatDate($el.attr('datetime')));
-      });
-      $.timeago.settings.strings = shortLocale;
-      $el.timeago();
-      $.timeago.settings.strings = tmpLocale;
+    w.gl.utils.timeFor = function(time, suffix, expiredLabel) {
+      var timefor;
+      if (!time) {
+        return '';
+      }
+      suffix || (suffix = 'remaining');
+      expiredLabel || (expiredLabel = 'Past due');
+      timefor = gl.utils.getTimeago().format(time).replace('in', '');
+      if (timefor.indexOf('ago') > -1) {
+        timefor = expiredLabel;
+      } else {
+        timefor = timefor.trim() + ' ' + suffix;
+      }
+      return timefor;
+    };
+
+    w.gl.utils.cachedTimeagoElements = [];
+    w.gl.utils.renderTimeago = function($els) {
+      if (!$els && !w.gl.utils.cachedTimeagoElements.length) {
+        w.gl.utils.cachedTimeagoElements = [].slice.call(document.querySelectorAll('.js-timeago-render'));
+      } else if ($els) {
+        w.gl.utils.cachedTimeagoElements = w.gl.utils.cachedTimeagoElements.concat($els.toArray());
+      }
+
+      w.gl.utils.cachedTimeagoElements.forEach(gl.utils.updateTimeagoText);
+    };
+
+    w.gl.utils.updateTimeagoText = function(el) {
+      const timeago = gl.utils.getTimeago();
+      const formattedDate = timeago.format(el.getAttribute('datetime'), 'gl_en');
+
+      if (el.textContent !== formattedDate) {
+        el.textContent = formattedDate;
+      }
+    };
+
+    w.gl.utils.initTimeagoTimeout = function() {
+      gl.utils.renderTimeago();
+
+      gl.utils.timeagoTimeout = setTimeout(gl.utils.initTimeagoTimeout, 1000);
     };
 
     w.gl.utils.getDayDifference = function(a, b) {
@@ -75,8 +121,6 @@
       var date2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());
 
       return Math.floor((date2 - date1) / millisecondsPerDay);
-    }
-
+    };
   })(window);
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/lib/utils/emoji_aliases.js.erb b/app/assets/javascripts/lib/utils/emoji_aliases.js.erb
deleted file mode 100644
index aeb86c9fa5b..00000000000
--- a/app/assets/javascripts/lib/utils/emoji_aliases.js.erb
+++ /dev/null
@@ -1,6 +0,0 @@
-(function() {
-  gl.emojiAliases = function() {
-    return JSON.parse('<%= Gitlab::AwardEmoji.aliases.to_json %>');
-  };
-
-}).call(this);
diff --git a/app/assets/javascripts/lib/utils/http_status.js b/app/assets/javascripts/lib/utils/http_status.js
new file mode 100644
index 00000000000..bc109a69c20
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/http_status.js
@@ -0,0 +1,10 @@
+/**
+ * exports HTTP status codes
+ */
+
+const statusCodes = {
+  NO_CONTENT: 204,
+  OK: 200,
+};
+
+module.exports = statusCodes;
diff --git a/app/assets/javascripts/lib/utils/notify.js b/app/assets/javascripts/lib/utils/notify.js
index dafc006d2e5..66f39122a66 100644
--- a/app/assets/javascripts/lib/utils/notify.js
+++ b/app/assets/javascripts/lib/utils/notify.js
@@ -1,4 +1,5 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, one-var, one-var-declaration-per-line, consistent-return, prefer-arrow-callback, no-return-assign, object-shorthand, comma-dangle, no-param-reassign, max-len */
+
 (function() {
   (function(w) {
     var notificationGranted, notifyMe, notifyPermissions;
@@ -43,5 +44,4 @@
     w.notify = notifyMe;
     return w.notifyPermissions = notifyPermissions;
   })(window);
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/lib/utils/poll.js b/app/assets/javascripts/lib/utils/poll.js
new file mode 100644
index 00000000000..5c22aea51cd
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/poll.js
@@ -0,0 +1,100 @@
+import httpStatusCodes from './http_status';
+
+/**
+ * Polling utility for handling realtime updates.
+ * Service for vue resouce and method need to be provided as props
+ *
+ * @example
+ * new Poll({
+ *   resource: resource,
+ *   method: 'name',
+ *   data: {page: 1, scope: 'all'}, // optional
+ *   successCallback: () => {},
+ *   errorCallback: () => {},
+ *   notificationCallback: () => {}, // optional
+ * }).makeRequest();
+ *
+ * Usage in pipelines table with visibility lib:
+ *
+ * const poll = new Poll({
+ *  resource: this.service,
+ *  method: 'getPipelines',
+ *  data: { page: pageNumber, scope },
+ *  successCallback: this.successCallback,
+ *  errorCallback: this.errorCallback,
+ *  notificationCallback: this.updateLoading,
+ * });
+ *
+ * if (!Visibility.hidden()) {
+ *  poll.makeRequest();
+ *  }
+ *
+ * Visibility.change(() => {
+ *  if (!Visibility.hidden()) {
+ *   poll.restart();
+ *  } else {
+ *   poll.stop();
+ *  }
+* });
+ *
+ * 1. Checks for response and headers before start polling
+ * 2. Interval is provided by `Poll-Interval` header.
+ * 3. If `Poll-Interval` is -1, we stop polling
+ * 4. If HTTP response is 200, we poll.
+ * 5. If HTTP response is different from 200, we stop polling.
+ *
+ */
+export default class Poll {
+  constructor(options = {}) {
+    this.options = options;
+    this.options.data = options.data || {};
+    this.options.notificationCallback = options.notificationCallback ||
+      function notificationCallback() {};
+
+    this.intervalHeader = 'POLL-INTERVAL';
+    this.timeoutID = null;
+    this.canPoll = true;
+  }
+
+  checkConditions(response) {
+    const headers = gl.utils.normalizeHeaders(response.headers);
+    const pollInterval = parseInt(headers[this.intervalHeader], 10);
+
+    if (pollInterval > 0 && response.status === httpStatusCodes.OK && this.canPoll) {
+      this.timeoutID = setTimeout(() => {
+        this.makeRequest();
+      }, pollInterval);
+    }
+
+    this.options.successCallback(response);
+  }
+
+  makeRequest() {
+    const { resource, method, data, errorCallback, notificationCallback } = this.options;
+
+    // It's called everytime a new request is made. Useful to update the status.
+    notificationCallback(true);
+
+    return resource[method](data)
+      .then(response => this.checkConditions(response))
+      .catch(error => errorCallback(error));
+  }
+
+  /**
+   * Stops the polling recursive chain
+   * and guarantees if the timeout is already running it won't make another request by
+   * cancelling the previously established timeout.
+   */
+  stop() {
+    this.canPoll = false;
+    clearTimeout(this.timeoutID);
+  }
+
+  /**
+   * Restarts polling after it has been stoped
+   */
+  restart() {
+    this.canPoll = true;
+    this.makeRequest();
+  }
+}
diff --git a/app/assets/javascripts/lib/utils/pretty_time.js b/app/assets/javascripts/lib/utils/pretty_time.js
new file mode 100644
index 00000000000..ae397212e55
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/pretty_time.js
@@ -0,0 +1,65 @@
+(() => {
+  /*
+   * TODO: Make these methods more configurable (e.g. parseSeconds timePeriodContstraints,
+   * stringifyTime condensed or non-condensed, abbreviateTimelengths)
+   * */
+
+  const utils = window.gl.utils = gl.utils || {};
+  const prettyTime = utils.prettyTime = {
+    /*
+     * Accepts seconds and returns a timeObject { weeks: #, days: #, hours: #, minutes: # }
+     * Seconds can be negative or positive, zero or non-zero.
+    */
+    parseSeconds(seconds) {
+      const DAYS_PER_WEEK = 5;
+      const HOURS_PER_DAY = 8;
+      const MINUTES_PER_HOUR = 60;
+      const MINUTES_PER_WEEK = DAYS_PER_WEEK * HOURS_PER_DAY * MINUTES_PER_HOUR;
+      const MINUTES_PER_DAY = HOURS_PER_DAY * MINUTES_PER_HOUR;
+
+      const timePeriodConstraints = {
+        weeks: MINUTES_PER_WEEK,
+        days: MINUTES_PER_DAY,
+        hours: MINUTES_PER_HOUR,
+        minutes: 1,
+      };
+
+      let unorderedMinutes = prettyTime.secondsToMinutes(seconds);
+
+      return _.mapObject(timePeriodConstraints, (minutesPerPeriod) => {
+        const periodCount = Math.floor(unorderedMinutes / minutesPerPeriod);
+
+        unorderedMinutes -= (periodCount * minutesPerPeriod);
+
+        return periodCount;
+      });
+    },
+
+    /*
+    * Accepts a timeObject and returns a condensed string representation of it
+    * (e.g. '1w 2d 3h 1m' or '1h 30m'). Zero value units are not included.
+    */
+
+    stringifyTime(timeObject) {
+      const reducedTime = _.reduce(timeObject, (memo, unitValue, unitName) => {
+        const isNonZero = !!unitValue;
+        return isNonZero ? `${memo} ${unitValue}${unitName.charAt(0)}` : memo;
+      }, '').trim();
+      return reducedTime.length ? reducedTime : '0m';
+    },
+
+    /*
+    * Accepts a time string of any size (e.g. '1w 2d 3h 5m' or '1w 2d') and returns
+    *  the first non-zero unit/value pair.
+    */
+
+    abbreviateTime(timeStr) {
+      return timeStr.split(' ')
+        .filter(unitStr => unitStr.charAt(0) !== '0')[0];
+    },
+
+    secondsToMinutes(seconds) {
+      return Math.abs(seconds / 60);
+    },
+  };
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/lib/utils/text_utility.js b/app/assets/javascripts/lib/utils/text_utility.js
index 98f9815ff05..2e5f8a09fc1 100644
--- a/app/assets/javascripts/lib/utils/text_utility.js
+++ b/app/assets/javascripts/lib/utils/text_utility.js
@@ -1,4 +1,7 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-param-reassign, no-cond-assign, quotes, one-var, one-var-declaration-per-line, operator-assignment, no-else-return, prefer-template, prefer-arrow-callback, no-empty, max-len, consistent-return, no-unused-vars, no-return-assign, max-len */
+
+require('vendor/latinise');
+
 (function() {
   (function(w) {
     var base;
@@ -10,13 +13,31 @@
     }
     gl.text.addDelimiter = function(text) {
       return text ? text.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : text;
-    }
+    };
+    gl.text.highCountTrim = function(count) {
+      return count > 99 ? '99+' : count;
+    };
     gl.text.randomString = function() {
       return Math.random().toString(36).substring(7);
     };
     gl.text.replaceRange = function(s, start, end, substitute) {
       return s.substring(0, start) + substitute + s.substring(end);
     };
+    gl.text.getTextWidth = function(text, font) {
+      /**
+      * Uses canvas.measureText to compute and return the width of the given text of given font in pixels.
+      *
+      * @param {String} text The text to be rendered.
+      * @param {String} font The css font descriptor that text is to be rendered with (e.g. "bold 14px verdana").
+      *
+      * @see http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393
+      */
+      // re-use canvas object for better performance
+      var canvas = gl.text.getTextWidth.canvas || (gl.text.getTextWidth.canvas = document.createElement('canvas'));
+      var context = canvas.getContext('2d');
+      context.font = font;
+      return context.measureText(text).width;
+    };
     gl.text.selectedText = function(text, textarea) {
       return text.substring(textarea.selectionStart, textarea.selectionEnd);
     };
@@ -44,9 +65,36 @@
       }
     };
     gl.text.insertText = function(textArea, text, tag, blockTag, selected, wrap) {
-      var insertText, inserted, selectedSplit, startChar;
+      var insertText, inserted, selectedSplit, startChar, removedLastNewLine, removedFirstNewLine, currentLineEmpty, lastNewLine;
+      removedLastNewLine = false;
+      removedFirstNewLine = false;
+      currentLineEmpty = false;
+
+      // Remove the first newline
+      if (selected.indexOf('\n') === 0) {
+        removedFirstNewLine = true;
+        selected = selected.replace(/\n+/, '');
+      }
+
+      // Remove the last newline
+      if (textArea.selectionEnd - textArea.selectionStart > selected.replace(/\n$/, '').length) {
+        removedLastNewLine = true;
+        selected = selected.replace(/\n$/, '');
+      }
+
       selectedSplit = selected.split('\n');
-      startChar = !wrap && textArea.selectionStart > 0 ? '\n' : '';
+
+      if (!wrap) {
+        lastNewLine = textArea.value.substr(0, textArea.selectionStart).lastIndexOf('\n');
+
+        // Check whether the current line is empty or consists only of spaces(=handle as empty)
+        if (/^\s*$/.test(textArea.value.substring(lastNewLine, textArea.selectionStart))) {
+          currentLineEmpty = true;
+        }
+      }
+
+      startChar = !wrap && !currentLineEmpty && textArea.selectionStart > 0 ? '\n' : '';
+
       if (selectedSplit.length > 1 && (!wrap || (blockTag != null))) {
         if (blockTag != null) {
           insertText = this.blockTagText(text, textArea, blockTag, selected);
@@ -62,6 +110,15 @@
       } else {
         insertText = "" + startChar + tag + selected + (wrap ? tag : ' ');
       }
+
+      if (removedFirstNewLine) {
+        insertText = '\n' + insertText;
+      }
+
+      if (removedLastNewLine) {
+        insertText += '\n';
+      }
+
       if (document.queryCommandSupported('insertText')) {
         inserted = document.execCommand('insertText', false, insertText);
       }
@@ -74,9 +131,9 @@
           document.execCommand("ms-endUndoUnit");
         } catch (error) {}
       }
-      return this.moveCursor(textArea, tag, wrap);
+      return this.moveCursor(textArea, tag, wrap, removedLastNewLine);
     };
-    gl.text.moveCursor = function(textArea, tag, wrapped) {
+    gl.text.moveCursor = function(textArea, tag, wrapped, removedLastNewLine) {
       var pos;
       if (!textArea.setSelectionRange) {
         return;
@@ -87,13 +144,17 @@
         } else {
           pos = textArea.selectionStart;
         }
+
+        if (removedLastNewLine) {
+          pos -= 1;
+        }
+
         return textArea.setSelectionRange(pos, pos);
       }
     };
     gl.text.updateText = function(textArea, tag, blockTag, wrap) {
-      var $textArea, oldVal, selected, text;
+      var $textArea, selected, text;
       $textArea = $(textArea);
-      oldVal = $textArea.val();
       textArea = $textArea.get(0);
       text = $textArea.val();
       selected = this.selectedText(text, textArea);
@@ -112,9 +173,20 @@
     gl.text.removeListeners = function(form) {
       return $('.js-md', form).off();
     };
-    return gl.text.truncate = function(string, maxLength) {
+    gl.text.humanize = function(string) {
+      return string.charAt(0).toUpperCase() + string.replace(/_/g, ' ').slice(1);
+    };
+    gl.text.pluralize = function(str, count) {
+      return str + (count > 1 || count === 0 ? 's' : '');
+    };
+    gl.text.truncate = function(string, maxLength) {
       return string.substr(0, (maxLength - 3)) + '...';
     };
+    gl.text.dasherize = function(str) {
+      return str.replace(/[_\s]+/g, '-');
+    };
+    gl.text.slugify = function(str) {
+      return str.trim().toLowerCase().latinise();
+    };
   })(window);
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/lib/utils/type_utility.js b/app/assets/javascripts/lib/utils/type_utility.js
index 4fd1e3fc1d3..db62e0be324 100644
--- a/app/assets/javascripts/lib/utils/type_utility.js
+++ b/app/assets/javascripts/lib/utils/type_utility.js
@@ -1,4 +1,4 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-param-reassign, no-cond-assign, no-return-assign, max-len */
 (function() {
   (function(w) {
     var base;
@@ -12,5 +12,4 @@
       return (obj != null) && (obj.constructor === Object);
     };
   })(window);
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/lib/utils/url_utility.js b/app/assets/javascripts/lib/utils/url_utility.js
index 44a66a915e3..09c4261b318 100644
--- a/app/assets/javascripts/lib/utils/url_utility.js
+++ b/app/assets/javascripts/lib/utils/url_utility.js
@@ -1,4 +1,4 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-param-reassign, no-cond-assign, one-var, one-var-declaration-per-line, no-void, guard-for-in, no-restricted-syntax, prefer-template, quotes, max-len */
 (function() {
   (function(w) {
     var base;
@@ -22,7 +22,7 @@
         if (sParameterName[0] === sParam) {
           values.push(sParameterName[1].replace(/\+/g, ' '));
         }
-        i++;
+        i += 1;
       }
       return values;
     };
@@ -57,7 +57,7 @@
       return ((function() {
         var j, len, results;
         results = [];
-        for (j = 0, len = urlVariables.length; j < len; j++) {
+        for (j = 0, len = urlVariables.length; j < len; j += 1) {
           variables = urlVariables[j];
           if (variables.indexOf(param) === -1) {
             results.push(variables);
@@ -66,6 +66,13 @@
         return results;
       })()).join('&');
     };
+    w.gl.utils.removeParams = (params) => {
+      const url = new URL(window.location.href);
+      params.forEach((param) => {
+        url.search = w.gl.utils.removeParamQueryString(url.search, param);
+      });
+      return url.href;
+    };
     w.gl.utils.getLocationHash = function(url) {
       var hashIndex;
       if (typeof url === 'undefined') {
@@ -76,6 +83,11 @@
       hashIndex = url.indexOf('#');
       return hashIndex === -1 ? null : url.substring(hashIndex + 1);
     };
-  })(window);
 
-}).call(this);
+    w.gl.utils.refreshCurrentPage = () => gl.utils.visitUrl(document.location.href);
+
+    w.gl.utils.visitUrl = (url) => {
+      document.location.href = url;
+    };
+  })(window);
+}).call(window);
diff --git a/app/assets/javascripts/line_highlighter.js b/app/assets/javascripts/line_highlighter.js
index ea5a60bb78e..1821ca18053 100644
--- a/app/assets/javascripts/line_highlighter.js
+++ b/app/assets/javascripts/line_highlighter.js
@@ -1,9 +1,10 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-use-before-define, no-underscore-dangle, no-param-reassign, prefer-template, quotes, comma-dangle, prefer-arrow-callback, consistent-return, one-var, one-var-declaration-per-line, no-else-return, max-len */
+
 // LineHighlighter
 //
 // Handles single- and multi-line selection and highlight for blob views.
 //
-/*= require jquery.scrollTo */
+require('vendor/jquery.scrollTo');
 
 //
 // ### Example Markup
@@ -30,7 +31,7 @@
 //   </div>
 //
 (function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
 
   this.LineHighlighter = (function() {
     // CSS class applied to highlighted lines
@@ -66,16 +67,7 @@
     }
 
     LineHighlighter.prototype.bindEvents = function() {
-      $('#blob-content-holder').on('mousedown', 'a[data-line-number]', this.clickHandler);
-      // While it may seem odd to bind to the mousedown event and then throw away
-      // the click event, there is a method to our madness.
-      //
-      // If not done this way, the line number anchor will sometimes keep its
-      // active state even when the event is cancelled, resulting in an ugly border
-      // around the link and/or a persisted underline text decoration.
-      return $('#blob-content-holder').on('click', 'a[data-line-number]', function(event) {
-        return event.preventDefault();
-      });
+      $('#blob-content-holder').on('click', 'a[data-line-number]', this.clickHandler);
     };
 
     LineHighlighter.prototype.clickHandler = function(event) {
@@ -118,11 +110,11 @@
     // Returns an Array
     LineHighlighter.prototype.hashToRange = function(hash) {
       var first, last, matches;
-      //?L(\d+)(?:-(\d+))?$/)
+      // ?L(\d+)(?:-(\d+))?$/)
       matches = hash.match(/^#?L(\d+)(?:-(\d+))?$/);
       if (matches && matches.length) {
-        first = parseInt(matches[1]);
-        last = matches[2] ? parseInt(matches[2]) : null;
+        first = parseInt(matches[1], 10);
+        last = matches[2] ? parseInt(matches[2], 10) : null;
         return [first, last];
       } else {
         return [null, null];
@@ -143,7 +135,7 @@
       var i, lineNumber, ref, ref1, results;
       if (range[1]) {
         results = [];
-        for (lineNumber = i = ref = range[0], ref1 = range[1]; ref <= ref1 ? i <= ref1 : i >= ref1; lineNumber = ref <= ref1 ? ++i : --i) {
+        for (lineNumber = i = ref = range[0], ref1 = range[1]; ref <= ref1 ? i <= ref1 : i >= ref1; lineNumber = ref <= ref1 ? (i += 1) : (i -= 1)) {
           results.push(this.highlightLine(lineNumber));
         }
         return results;
@@ -169,7 +161,6 @@
     // This method is stubbed in tests.
     LineHighlighter.prototype.__setLocationHash__ = function(value) {
       return history.pushState({
-        turbolinks: false,
         url: value
       // We're using pushState instead of assigning location.hash directly to
       // prevent the page from scrolling on the hashchange event
@@ -177,7 +168,5 @@
     };
 
     return LineHighlighter;
-
   })();
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/logo.js b/app/assets/javascripts/logo.js
index d4f86534f0c..729baa2e1a7 100644
--- a/app/assets/javascripts/logo.js
+++ b/app/assets/javascripts/logo.js
@@ -1,13 +1,7 @@
-/* eslint-disable */
-(function() {
-  Turbolinks.enableProgressBar();
+/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback */
 
-  $(document).on('page:fetch', function() {
+(function() {
+  window.addEventListener('beforeunload', function() {
     $('.tanuki-logo').addClass('animate');
   });
-
-  $(document).on('page:change', function() {
-    $('.tanuki-logo').removeClass('animate');
-  });
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
new file mode 100644
index 00000000000..665a59f3183
--- /dev/null
+++ b/app/assets/javascripts/main.js
@@ -0,0 +1,375 @@
+/* eslint-disable func-names, space-before-function-paren, no-var, quotes, consistent-return, prefer-arrow-callback, comma-dangle, object-shorthand, no-new, max-len, no-multi-spaces, import/newline-after-import, import/first */
+/* global bp */
+/* global Flash */
+/* global ConfirmDangerModal */
+/* global Aside */
+
+import jQuery from 'jquery';
+import _ from 'underscore';
+import Cookies from 'js-cookie';
+import Pikaday from 'pikaday';
+import Dropzone from 'dropzone';
+import Sortable from 'vendor/Sortable';
+
+// libraries with import side-effects
+import 'mousetrap';
+import 'mousetrap/plugins/pause/mousetrap-pause';
+import 'vendor/fuzzaldrin-plus';
+
+// extensions
+import './extensions/array';
+
+// expose common libraries as globals (TODO: remove these)
+window.jQuery = jQuery;
+window.$ = jQuery;
+window._ = _;
+window.Pikaday = Pikaday;
+window.Dropzone = Dropzone;
+window.Sortable = Sortable;
+
+// shortcuts
+import './shortcuts';
+import './shortcuts_blob';
+import './shortcuts_dashboard_navigation';
+import './shortcuts_navigation';
+import './shortcuts_find_file';
+import './shortcuts_issuable';
+import './shortcuts_network';
+
+// behaviors
+import './behaviors/autosize';
+import './behaviors/details_behavior';
+import './behaviors/quick_submit';
+import './behaviors/requires_input';
+import './behaviors/toggler_behavior';
+import './behaviors/bind_in_out';
+import { installGlEmojiElement } from './behaviors/gl_emoji';
+installGlEmojiElement();
+
+// blob
+import './blob/create_branch_dropdown';
+import './blob/target_branch_dropdown';
+
+// templates
+import './templates/issuable_template_selector';
+import './templates/issuable_template_selectors';
+
+// commit
+import './commit/file';
+import './commit/image_file';
+
+// lib/utils
+import './lib/utils/animate';
+import './lib/utils/bootstrap_linked_tabs';
+import './lib/utils/common_utils';
+import './lib/utils/datetime_utility';
+import './lib/utils/notify';
+import './lib/utils/pretty_time';
+import './lib/utils/text_utility';
+import './lib/utils/type_utility';
+import './lib/utils/url_utility';
+
+// u2f
+import './u2f/authenticate';
+import './u2f/error';
+import './u2f/register';
+import './u2f/util';
+
+// droplab
+import './droplab/droplab';
+import './droplab/droplab_ajax';
+import './droplab/droplab_ajax_filter';
+import './droplab/droplab_filter';
+
+// everything else
+import './abuse_reports';
+import './activities';
+import './admin';
+import './ajax_loading_spinner';
+import './api';
+import './aside';
+import './autosave';
+import AwardsHandler from './awards_handler';
+import './breakpoints';
+import './broadcast_message';
+import './build';
+import './build_artifacts';
+import './build_variables';
+import './ci_lint_editor';
+import './commit';
+import './commits';
+import './compare';
+import './compare_autocomplete';
+import './confirm_danger_modal';
+import './copy_as_gfm';
+import './copy_to_clipboard';
+import './create_label';
+import './diff';
+import './dispatcher';
+import './dropzone_input';
+import './due_date_select';
+import './files_comment_button';
+import './flash';
+import './gfm_auto_complete';
+import './gl_dropdown';
+import './gl_field_error';
+import './gl_field_errors';
+import './gl_form';
+import './group_avatar';
+import './group_label_subscription';
+import './groups_select';
+import './header';
+import './importer_status';
+import './issuable';
+import './issuable_context';
+import './issuable_form';
+import './issue';
+import './issue_status_select';
+import './issues_bulk_assignment';
+import './label_manager';
+import './labels';
+import './labels_select';
+import './layout_nav';
+import './line_highlighter';
+import './logo';
+import './member_expiration_date';
+import './members';
+import './merge_request';
+import './merge_request_tabs';
+import './merge_request_widget';
+import './merged_buttons';
+import './milestone';
+import './milestone_select';
+import './mini_pipeline_graph_dropdown';
+import './namespace_select';
+import './new_branch_form';
+import './new_commit_form';
+import './notes';
+import './notifications_dropdown';
+import './notifications_form';
+import './pager';
+import './pipelines';
+import './preview_markdown';
+import './project';
+import './project_avatar';
+import './project_find_file';
+import './project_fork';
+import './project_import';
+import './project_label_subscription';
+import './project_new';
+import './project_select';
+import './project_show';
+import './project_variables';
+import './projects_list';
+import './render_gfm';
+import './render_math';
+import './right_sidebar';
+import './search';
+import './search_autocomplete';
+import './signin_tabs_memoizer';
+import './single_file_diff';
+import './smart_interval';
+import './snippets_list';
+import './star';
+import './subbable_resource';
+import './subscription';
+import './subscription_select';
+import './syntax_highlight';
+import './task_list';
+import './todos';
+import './tree';
+import './user';
+import './user_tabs';
+import './username_validator';
+import './users_select';
+import './version_check_image';
+import './visibility_select';
+import './wikis';
+import './zen_mode';
+
+document.addEventListener('beforeunload', function () {
+  // Unbind scroll events
+  $(document).off('scroll');
+  // Close any open tooltips
+  $('.has-tooltip, [data-toggle="tooltip"]').tooltip('destroy');
+});
+
+window.addEventListener('hashchange', gl.utils.handleLocationHash);
+window.addEventListener('load', function onLoad() {
+  window.removeEventListener('load', onLoad, false);
+  gl.utils.handleLocationHash();
+}, false);
+
+$(function () {
+  var $body = $('body');
+  var $document = $(document);
+  var $window = $(window);
+  var $sidebarGutterToggle = $('.js-sidebar-toggle');
+  var $flash = $('.flash-container');
+  var bootstrapBreakpoint = bp.getBreakpointSize();
+  var fitSidebarForSize;
+
+  // Set the default path for all cookies to GitLab's root directory
+  Cookies.defaults.path = gon.relative_url_root || '/';
+
+  // `hashchange` is not triggered when link target is already in window.location
+  $body.on('click', 'a[href^="#"]', function() {
+    var href = this.getAttribute('href');
+    if (href.substr(1) === gl.utils.getLocationHash()) {
+      setTimeout(gl.utils.handleLocationHash, 1);
+    }
+  });
+
+  // prevent default action for disabled buttons
+  $('.btn').click(function(e) {
+    if ($(this).hasClass('disabled')) {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      return false;
+    }
+  });
+
+  $('.js-select-on-focus').on('focusin', function () {
+    return $(this).select().one('mouseup', function (e) {
+      return e.preventDefault();
+    });
+  // Click a .js-select-on-focus field, select the contents
+  // Prevent a mouseup event from deselecting the input
+  });
+  $('.remove-row').bind('ajax:success', function () {
+    $(this).tooltip('destroy')
+      .closest('li')
+      .fadeOut();
+  });
+  $('.js-remove-tr').bind('ajax:before', function () {
+    return $(this).hide();
+  });
+  $('.js-remove-tr').bind('ajax:success', function () {
+    return $(this).closest('tr').fadeOut();
+  });
+  $('select.select2').select2({
+    width: 'resolve',
+    // Initialize select2 selects
+    dropdownAutoWidth: true
+  });
+  $('.js-select2').bind('select2-close', function () {
+    return setTimeout((function () {
+      $('.select2-container-active').removeClass('select2-container-active');
+      return $(':focus').blur();
+    }), 1);
+  // Close select2 on escape
+  });
+  // Initialize tooltips
+  $.fn.tooltip.Constructor.DEFAULTS.trigger = 'hover';
+  $body.tooltip({
+    selector: '.has-tooltip, [data-toggle="tooltip"]',
+    placement: function (tip, el) {
+      return $(el).data('placement') || 'bottom';
+    }
+  });
+  $('.trigger-submit').on('change', function () {
+    return $(this).parents('form').submit();
+  // Form submitter
+  });
+  gl.utils.localTimeAgo($('abbr.timeago, .js-timeago'), true);
+  // Flash
+  if ($flash.length > 0) {
+    $flash.click(function () {
+      return $(this).fadeOut();
+    });
+    $flash.show();
+  }
+  // Disable form buttons while a form is submitting
+  $body.on('ajax:complete, ajax:beforeSend, submit', 'form', function (e) {
+    var buttons;
+    buttons = $('[type="submit"]', this);
+    switch (e.type) {
+      case 'ajax:beforeSend':
+      case 'submit':
+        return buttons.disable();
+      default:
+        return buttons.enable();
+    }
+  });
+  $(document).ajaxError(function (e, xhrObj) {
+    var ref = xhrObj.status;
+    if (xhrObj.status === 401) {
+      return new Flash('You need to be logged in.', 'alert');
+    } else if (ref === 404 || ref === 500) {
+      return new Flash('Something went wrong on our end.', 'alert');
+    }
+  });
+  $('.account-box').hover(function () {
+    // Show/Hide the profile menu when hovering the account box
+    return $(this).toggleClass('hover');
+  });
+  $document.on('click', '.diff-content .js-show-suppressed-diff', function () {
+    var $container;
+    $container = $(this).parent();
+    $container.next('table').show();
+    return $container.remove();
+  // Commit show suppressed diff
+  });
+  $('.navbar-toggle').on('click', function () {
+    $('.header-content .title').toggle();
+    $('.header-content .header-logo').toggle();
+    $('.header-content .navbar-collapse').toggle();
+    return $('.navbar-toggle').toggleClass('active');
+  });
+  // Show/hide comments on diff
+  $body.on('click', '.js-toggle-diff-comments', function (e) {
+    var $this = $(this);
+    var notesHolders = $this.closest('.diff-file').find('.notes_holder');
+    $this.toggleClass('active');
+    if ($this.hasClass('active')) {
+      notesHolders.show().find('.hide, .content').show();
+    } else {
+      notesHolders.hide().find('.content').hide();
+    }
+    $(document).trigger('toggle.comments');
+    return e.preventDefault();
+  });
+  $document.off('click', '.js-confirm-danger');
+  $document.on('click', '.js-confirm-danger', function (e) {
+    var btn = $(e.target);
+    var form = btn.closest('form');
+    var text = btn.data('confirm-danger-message');
+    e.preventDefault();
+    return new ConfirmDangerModal(form, text);
+  });
+  $('input[type="search"]').each(function () {
+    var $this = $(this);
+    $this.attr('value', $this.val());
+  });
+  $document.off('keyup', 'input[type="search"]').on('keyup', 'input[type="search"]', function () {
+    var $this;
+    $this = $(this);
+    return $this.attr('value', $this.val());
+  });
+  $document.off('breakpoint:change').on('breakpoint:change', function (e, breakpoint) {
+    var $gutterIcon;
+    if (breakpoint === 'sm' || breakpoint === 'xs') {
+      $gutterIcon = $sidebarGutterToggle.find('i');
+      if ($gutterIcon.hasClass('fa-angle-double-right')) {
+        return $sidebarGutterToggle.trigger('click');
+      }
+    }
+  });
+  fitSidebarForSize = function () {
+    var oldBootstrapBreakpoint;
+    oldBootstrapBreakpoint = bootstrapBreakpoint;
+    bootstrapBreakpoint = bp.getBreakpointSize();
+    if (bootstrapBreakpoint !== oldBootstrapBreakpoint) {
+      return $document.trigger('breakpoint:change', [bootstrapBreakpoint]);
+    }
+  };
+  $window.off('resize.app').on('resize.app', function () {
+    return fitSidebarForSize();
+  });
+  gl.awardsHandler = new AwardsHandler();
+  new Aside();
+
+  gl.utils.initTimeagoTimeout();
+
+  $(document).trigger('init.scrolling-tabs');
+});
diff --git a/app/assets/javascripts/member_expiration_date.js b/app/assets/javascripts/member_expiration_date.js
index 0bd90c57396..129d2dc5f0a 100644
--- a/app/assets/javascripts/member_expiration_date.js
+++ b/app/assets/javascripts/member_expiration_date.js
@@ -1,32 +1,47 @@
-/* eslint-disable */
-(function() {
+/* global Pikaday */
+/* global dateFormat */
+(() => {
   // Add datepickers to all `js-access-expiration-date` elements. If those elements are
   // children of an element with the `clearable-input` class, and have a sibling
   // `js-clear-input` element, then show that element when there is a value in the
   // datepicker, and make clicking on that element clear the field.
   //
-  gl.MemberExpirationDate = function() {
+  window.gl = window.gl || {};
+  gl.MemberExpirationDate = (selector = '.js-access-expiration-date') => {
     function toggleClearInput() {
       $(this).closest('.clearable-input').toggleClass('has-value', $(this).val() !== '');
     }
+    const inputs = $(selector);
 
-    var inputs = $('.js-access-expiration-date');
+    inputs.each((i, el) => {
+      const $input = $(el);
 
-    inputs.datepicker({
-      dateFormat: 'yy-mm-dd',
-      minDate: 1,
-      onSelect: function () {
-        $(this).trigger('change');
-        toggleClearInput.call(this);
-      }
+      const calendar = new Pikaday({
+        field: $input.get(0),
+        theme: 'gitlab-theme',
+        format: 'yyyy-mm-dd',
+        minDate: new Date(),
+        onSelect(dateText) {
+          $input.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
+
+          $input.trigger('change');
+
+          toggleClearInput.call($input);
+        },
+      });
+
+      calendar.setDate(new Date($input.val()));
+      $input.data('pikaday', calendar);
     });
 
-    inputs.next('.js-clear-input').on('click', function(event) {
+    inputs.next('.js-clear-input').on('click', function clicked(event) {
       event.preventDefault();
 
-      var input = $(this).closest('.clearable-input').find('.js-access-expiration-date');
-      input.datepicker('setDate', null)
-        .trigger('change');
+      const input = $(this).closest('.clearable-input').find(selector);
+      const calendar = input.data('pikaday');
+
+      calendar.setDate(null);
+      input.trigger('change');
       toggleClearInput.call(input);
     });
 
@@ -34,4 +49,4 @@
 
     inputs.each(toggleClearInput);
   };
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/members.js b/app/assets/javascripts/members.js
new file mode 100644
index 00000000000..e3f367a11eb
--- /dev/null
+++ b/app/assets/javascripts/members.js
@@ -0,0 +1,81 @@
+/* eslint-disable class-methods-use-this */
+(() => {
+  window.gl = window.gl || {};
+
+  class Members {
+    constructor() {
+      this.addListeners();
+      this.initGLDropdown();
+    }
+
+    addListeners() {
+      $('.project_member, .group_member').off('ajax:success').on('ajax:success', this.removeRow);
+      $('.js-member-update-control').off('change').on('change', this.formSubmit.bind(this));
+      $('.js-edit-member-form').off('ajax:success').on('ajax:success', this.formSuccess.bind(this));
+      gl.utils.disableButtonIfEmptyField('#user_ids', 'input[name=commit]', 'change');
+    }
+
+    initGLDropdown() {
+      $('.js-member-permissions-dropdown').each((i, btn) => {
+        const $btn = $(btn);
+
+        $btn.glDropdown({
+          selectable: true,
+          isSelectable(selected, $el) {
+            return !$el.hasClass('is-active');
+          },
+          fieldName: $btn.data('field-name'),
+          id(selected, $el) {
+            return $el.data('id');
+          },
+          toggleLabel(selected, $el) {
+            return $el.text();
+          },
+          clicked: (selected, $link) => {
+            this.formSubmit(null, $link);
+          },
+        });
+      });
+    }
+
+    removeRow(e) {
+      const $target = $(e.target);
+
+      if ($target.hasClass('btn-remove')) {
+        $target.closest('.member')
+          .fadeOut(function fadeOutMemberRow() {
+            $(this).remove();
+          });
+      }
+    }
+
+    formSubmit(e, $el = null) {
+      const $this = e ? $(e.currentTarget) : $el;
+      const { $toggle, $dateInput } = this.getMemberListItems($this);
+
+      $this.closest('form').trigger('submit.rails');
+
+      $toggle.disable();
+      $dateInput.disable();
+    }
+
+    formSuccess(e) {
+      const { $toggle, $dateInput } = this.getMemberListItems($(e.currentTarget).closest('.member'));
+
+      $toggle.enable();
+      $dateInput.enable();
+    }
+
+    getMemberListItems($el) {
+      const $memberListItem = $el.is('.member') ? $el : $(`#${$el.data('el-id')}`);
+
+      return {
+        $memberListItem,
+        $toggle: $memberListItem.find('.dropdown-menu-toggle'),
+        $dateInput: $memberListItem.find('.js-access-expiration-date'),
+      };
+    }
+  }
+
+  gl.Members = Members;
+})();
diff --git a/app/assets/javascripts/members.js.es6 b/app/assets/javascripts/members.js.es6
deleted file mode 100644
index 895bc10784f..00000000000
--- a/app/assets/javascripts/members.js.es6
+++ /dev/null
@@ -1,38 +0,0 @@
-/* eslint-disable */
-((w) => {
-  w.gl = w.gl || {};
-
-  class Members {
-    constructor() {
-      this.addListeners();
-    }
-
-    addListeners() {
-      $('.project_member, .group_member').off('ajax:success').on('ajax:success', this.removeRow);
-      $('.js-member-update-control').off('change').on('change', this.formSubmit);
-      $('.js-edit-member-form').off('ajax:success').on('ajax:success', this.formSuccess);
-      gl.utils.disableButtonIfEmptyField('#user_ids', 'input[name=commit]', 'change');
-    }
-
-    removeRow(e) {
-      const $target = $(e.target);
-
-      if ($target.hasClass('btn-remove')) {
-        $target.closest('.member')
-          .fadeOut(function () {
-            $(this).remove();
-          });
-      }
-    }
-
-    formSubmit() {
-      $(this).closest('form').trigger("submit.rails").end().disable();
-    }
-
-    formSuccess() {
-      $(this).find('.js-member-update-control').enable();
-    }
-  }
-
-  gl.Members = Members;
-})(window);
diff --git a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js
new file mode 100644
index 00000000000..645045fea88
--- /dev/null
+++ b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js
@@ -0,0 +1,97 @@
+/* eslint-disable comma-dangle, quote-props, no-useless-computed-key, object-shorthand, no-new, no-param-reassign, max-len */
+/* global ace */
+/* global Flash */
+
+import Vue from 'vue';
+
+((global) => {
+  global.mergeConflicts = global.mergeConflicts || {};
+
+  global.mergeConflicts.diffFileEditor = Vue.extend({
+    props: {
+      file: Object,
+      onCancelDiscardConfirmation: Function,
+      onAcceptDiscardConfirmation: Function
+    },
+    data() {
+      return {
+        saved: false,
+        loading: false,
+        fileLoaded: false,
+        originalContent: '',
+      };
+    },
+    computed: {
+      classObject() {
+        return {
+          'saved': this.saved,
+          'is-loading': this.loading
+        };
+      }
+    },
+    watch: {
+      ['file.showEditor'](val) {
+        this.resetEditorContent();
+
+        if (!val || this.fileLoaded || this.loading) {
+          return;
+        }
+
+        this.loadEditor();
+      }
+    },
+    mounted() {
+      if (this.file.loadEditor) {
+        this.loadEditor();
+      }
+    },
+    methods: {
+      loadEditor() {
+        this.loading = true;
+
+        $.get(this.file.content_path)
+          .done((file) => {
+            const content = this.$el.querySelector('pre');
+            const fileContent = document.createTextNode(file.content);
+
+            content.textContent = fileContent.textContent;
+
+            this.originalContent = file.content;
+            this.fileLoaded = true;
+            this.editor = ace.edit(content);
+            this.editor.$blockScrolling = Infinity; // Turn off annoying warning
+            this.editor.getSession().setMode(`ace/mode/${file.blob_ace_mode}`);
+            this.editor.on('change', () => {
+              this.saveDiffResolution();
+            });
+            this.saveDiffResolution();
+          })
+          .fail(() => {
+            new Flash('Failed to load the file, please try again.');
+          })
+          .always(() => {
+            this.loading = false;
+          });
+      },
+      saveDiffResolution() {
+        this.saved = true;
+
+        // This probably be better placed in the data provider
+        this.file.content = this.editor.getValue();
+        this.file.resolveEditChanged = this.file.content !== this.originalContent;
+        this.file.promptDiscardConfirmation = false;
+      },
+      resetEditorContent() {
+        if (this.fileLoaded) {
+          this.editor.setValue(this.originalContent, -1);
+        }
+      },
+      cancelDiscardConfirmation(file) {
+        this.onCancelDiscardConfirmation(file);
+      },
+      acceptDiscardConfirmation(file) {
+        this.onAcceptDiscardConfirmation(file);
+      }
+    }
+  });
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js.es6 b/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js.es6
deleted file mode 100644
index 6da3942ea52..00000000000
--- a/app/assets/javascripts/merge_conflicts/components/diff_file_editor.js.es6
+++ /dev/null
@@ -1,94 +0,0 @@
-/* eslint-disable */
-((global) => {
-
-  global.mergeConflicts = global.mergeConflicts || {};
-
-  global.mergeConflicts.diffFileEditor = Vue.extend({
-    props: {
-      file: Object,
-      onCancelDiscardConfirmation: Function,
-      onAcceptDiscardConfirmation: Function
-    },
-    data() {
-      return {
-        saved: false,
-        loading: false,
-        fileLoaded: false,
-        originalContent: '',
-      }
-    },
-    computed: {
-      classObject() {
-        return {
-          'saved': this.saved,
-          'is-loading': this.loading
-        };
-      }
-    },
-    watch: {
-      ['file.showEditor'](val) {
-        this.resetEditorContent();
-
-        if (!val || this.fileLoaded || this.loading) {
-          return;
-        }
-
-        this.loadEditor();
-      }
-    },
-    ready() {
-      if (this.file.loadEditor) {
-        this.loadEditor();
-      }
-    },
-    methods: {
-      loadEditor() {
-        this.loading = true;
-
-        $.get(this.file.content_path)
-          .done((file) => {
-            let content = this.$el.querySelector('pre');
-            let fileContent = document.createTextNode(file.content);
-
-            content.textContent = fileContent.textContent;
-
-            this.originalContent = file.content;
-            this.fileLoaded = true;
-            this.editor = ace.edit(content);
-            this.editor.$blockScrolling = Infinity; // Turn off annoying warning
-            this.editor.getSession().setMode(`ace/mode/${file.blob_ace_mode}`);
-            this.editor.on('change', () => {
-              this.saveDiffResolution();
-            });
-            this.saveDiffResolution();
-          })
-          .fail(() => {
-            new Flash('Failed to load the file, please try again.');
-          })
-          .always(() => {
-            this.loading = false;
-          });
-      },
-      saveDiffResolution() {
-        this.saved = true;
-
-        // This probably be better placed in the data provider
-        this.file.content = this.editor.getValue();
-        this.file.resolveEditChanged = this.file.content !== this.originalContent;
-        this.file.promptDiscardConfirmation = false;
-      },
-      resetEditorContent() {
-        if (this.fileLoaded) {
-          this.editor.setValue(this.originalContent, -1);
-        }
-      },
-      cancelDiscardConfirmation(file) {
-        this.onCancelDiscardConfirmation(file);
-      },
-      acceptDiscardConfirmation(file) {
-        this.onAcceptDiscardConfirmation(file);
-      }
-    }
-  });
-
-})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.js b/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.js
new file mode 100644
index 00000000000..56d6678e1bd
--- /dev/null
+++ b/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.js
@@ -0,0 +1,14 @@
+/* eslint-disable no-param-reassign, comma-dangle */
+
+import Vue from 'vue';
+
+((global) => {
+  global.mergeConflicts = global.mergeConflicts || {};
+
+  global.mergeConflicts.inlineConflictLines = Vue.extend({
+    props: {
+      file: Object
+    },
+    mixins: [global.mergeConflicts.utils, global.mergeConflicts.actions],
+  });
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.js.es6 b/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.js.es6
deleted file mode 100644
index 23c4618af70..00000000000
--- a/app/assets/javascripts/merge_conflicts/components/inline_conflict_lines.js.es6
+++ /dev/null
@@ -1,13 +0,0 @@
-/* eslint-disable */
-((global) => {
-
-  global.mergeConflicts = global.mergeConflicts || {};
-
-  global.mergeConflicts.inlineConflictLines = Vue.extend({
-    props: {
-      file: Object
-    },
-    mixins: [global.mergeConflicts.utils, global.mergeConflicts.actions],
-  });
-
-})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/merge_conflicts/components/parallel_conflict_line.js.es6 b/app/assets/javascripts/merge_conflicts/components/parallel_conflict_line.js.es6
deleted file mode 100644
index 797850262cc..00000000000
--- a/app/assets/javascripts/merge_conflicts/components/parallel_conflict_line.js.es6
+++ /dev/null
@@ -1,15 +0,0 @@
-/* eslint-disable */
-((global) => {
-
-  global.mergeConflicts = global.mergeConflicts || {};
-
-  global.mergeConflicts.parallelConflictLine = Vue.extend({
-    props: {
-      file: Object,
-      line: Object
-    },
-    mixins: [global.mergeConflicts.utils, global.mergeConflicts.actions],
-    template: '#parallel-conflict-line'
-  });
-
-})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js b/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js
new file mode 100644
index 00000000000..0fc4a13450a
--- /dev/null
+++ b/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js
@@ -0,0 +1,29 @@
+/* eslint-disable no-param-reassign, comma-dangle */
+
+import Vue from 'vue';
+
+((global) => {
+  global.mergeConflicts = global.mergeConflicts || {};
+
+  global.mergeConflicts.parallelConflictLines = Vue.extend({
+    props: {
+      file: Object
+    },
+    mixins: [global.mergeConflicts.utils, global.mergeConflicts.actions],
+    template: `
+      <table>
+        <tr class="line_holder parallel" v-for="section in file.parallelLines">
+          <template v-for="line in section">
+            <td class="diff-line-num header" :class="lineCssClass(line)" v-if="line.isHeader"></td>
+            <td class="line_content header" :class="lineCssClass(line)" v-if="line.isHeader">
+              <strong>{{line.richText}}</strong>
+              <button class="btn" @click="handleSelected(file, line.id, line.section)">{{line.buttonTitle}}</button>
+            </td>
+            <td class="diff-line-num old_line" :class="lineCssClass(line)" v-if="!line.isHeader">{{line.lineNumber}}</td>
+            <td class="line_content parallel" :class="lineCssClass(line)" v-if="!line.isHeader" v-html="line.richText"></td>
+          </template>
+        </tr>
+      </table>
+    `,
+  });
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js.es6 b/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js.es6
deleted file mode 100644
index 1b3e9901f1e..00000000000
--- a/app/assets/javascripts/merge_conflicts/components/parallel_conflict_lines.js.es6
+++ /dev/null
@@ -1,16 +0,0 @@
-/* eslint-disable */
-((global) => {
-
-  global.mergeConflicts = global.mergeConflicts || {};
-
-  global.mergeConflicts.parallelConflictLines = Vue.extend({
-    props: {
-      file: Object
-    },
-    mixins: [global.mergeConflicts.utils],
-    components: {
-      'parallel-conflict-line': gl.mergeConflicts.parallelConflictLine
-    }
-  });
-
-})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/merge_conflicts/merge_conflict_service.js b/app/assets/javascripts/merge_conflicts/merge_conflict_service.js
new file mode 100644
index 00000000000..c012b77e0bf
--- /dev/null
+++ b/app/assets/javascripts/merge_conflicts/merge_conflict_service.js
@@ -0,0 +1,31 @@
+/* eslint-disable no-param-reassign, comma-dangle */
+
+((global) => {
+  global.mergeConflicts = global.mergeConflicts || {};
+
+  class mergeConflictsService {
+    constructor(options) {
+      this.conflictsPath = options.conflictsPath;
+      this.resolveConflictsPath = options.resolveConflictsPath;
+    }
+
+    fetchConflictsData() {
+      return $.ajax({
+        dataType: 'json',
+        url: this.conflictsPath
+      });
+    }
+
+    submitResolveConflicts(data) {
+      return $.ajax({
+        url: this.resolveConflictsPath,
+        data: JSON.stringify(data),
+        contentType: 'application/json',
+        dataType: 'json',
+        method: 'POST'
+      });
+    }
+  }
+
+  global.mergeConflicts.mergeConflictsService = mergeConflictsService;
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/merge_conflicts/merge_conflict_service.js.es6 b/app/assets/javascripts/merge_conflicts/merge_conflict_service.js.es6
deleted file mode 100644
index 8a7519b0786..00000000000
--- a/app/assets/javascripts/merge_conflicts/merge_conflict_service.js.es6
+++ /dev/null
@@ -1,31 +0,0 @@
-/* eslint-disable */
-((global) => {
-  global.mergeConflicts = global.mergeConflicts || {};
-
-  class mergeConflictsService {
-    constructor(options) {
-      this.conflictsPath = options.conflictsPath;
-      this.resolveConflictsPath = options.resolveConflictsPath;
-    }
-
-    fetchConflictsData() {
-      return $.ajax({
-        dataType: 'json',
-        url: this.conflictsPath
-      });
-    }
-
-    submitResolveConflicts(data) {
-      return $.ajax({
-        url: this.resolveConflictsPath,
-        data: JSON.stringify(data),
-        contentType: 'application/json',
-        dataType: 'json',
-        method: 'POST'
-      });
-    }
-  };
-
-  global.mergeConflicts.mergeConflictsService = mergeConflictsService;
-
-})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/merge_conflicts/merge_conflict_store.js b/app/assets/javascripts/merge_conflicts/merge_conflict_store.js
new file mode 100644
index 00000000000..c4e379a4a0b
--- /dev/null
+++ b/app/assets/javascripts/merge_conflicts/merge_conflict_store.js
@@ -0,0 +1,434 @@
+/* eslint-disable comma-dangle, object-shorthand, no-param-reassign, camelcase, no-nested-ternary, no-continue, max-len */
+
+import Vue from 'vue';
+import Cookies from 'js-cookie';
+
+((global) => {
+  global.mergeConflicts = global.mergeConflicts || {};
+
+  const diffViewType = Cookies.get('diff_view');
+  const HEAD_HEADER_TEXT = 'HEAD//our changes';
+  const ORIGIN_HEADER_TEXT = 'origin//their changes';
+  const HEAD_BUTTON_TITLE = 'Use ours';
+  const ORIGIN_BUTTON_TITLE = 'Use theirs';
+  const INTERACTIVE_RESOLVE_MODE = 'interactive';
+  const EDIT_RESOLVE_MODE = 'edit';
+  const DEFAULT_RESOLVE_MODE = INTERACTIVE_RESOLVE_MODE;
+  const VIEW_TYPES = {
+    INLINE: 'inline',
+    PARALLEL: 'parallel'
+  };
+  const CONFLICT_TYPES = {
+    TEXT: 'text',
+    TEXT_EDITOR: 'text-editor'
+  };
+
+  global.mergeConflicts.mergeConflictsStore = {
+    state: {
+      isLoading: true,
+      hasError: false,
+      isSubmitting: false,
+      isParallel: diffViewType === VIEW_TYPES.PARALLEL,
+      diffViewType: diffViewType,
+      conflictsData: {}
+    },
+
+    setConflictsData(data) {
+      this.decorateFiles(data.files);
+
+      this.state.conflictsData = {
+        files: data.files,
+        commitMessage: data.commit_message,
+        sourceBranch: data.source_branch,
+        targetBranch: data.target_branch,
+        shortCommitSha: data.commit_sha.slice(0, 7),
+      };
+    },
+
+    decorateFiles(files) {
+      files.forEach((file) => {
+        file.content = '';
+        file.resolutionData = {};
+        file.promptDiscardConfirmation = false;
+        file.resolveMode = DEFAULT_RESOLVE_MODE;
+        file.filePath = this.getFilePath(file);
+        file.iconClass = `fa-${file.blob_icon}`;
+        file.blobPath = file.blob_path;
+
+        if (file.type === CONFLICT_TYPES.TEXT) {
+          file.showEditor = false;
+          file.loadEditor = false;
+
+          this.setInlineLine(file);
+          this.setParallelLine(file);
+        } else if (file.type === CONFLICT_TYPES.TEXT_EDITOR) {
+          file.showEditor = true;
+          file.loadEditor = true;
+        }
+      });
+    },
+
+    setInlineLine(file) {
+      file.inlineLines = [];
+
+      file.sections.forEach((section) => {
+        let currentLineType = 'new';
+        const { conflict, lines, id } = section;
+
+        if (conflict) {
+          file.inlineLines.push(this.getHeadHeaderLine(id));
+        }
+
+        lines.forEach((line) => {
+          const { type } = line;
+
+          if ((type === 'new' || type === 'old') && currentLineType !== type) {
+            currentLineType = type;
+            file.inlineLines.push({ lineType: 'emptyLine', richText: '' });
+          }
+
+          this.decorateLineForInlineView(line, id, conflict);
+          file.inlineLines.push(line);
+        });
+
+        if (conflict) {
+          file.inlineLines.push(this.getOriginHeaderLine(id));
+        }
+      });
+    },
+
+    setParallelLine(file) {
+      file.parallelLines = [];
+      const linesObj = { left: [], right: [] };
+
+      file.sections.forEach((section) => {
+        const { conflict, lines, id } = section;
+
+        if (conflict) {
+          linesObj.left.push(this.getOriginHeaderLine(id));
+          linesObj.right.push(this.getHeadHeaderLine(id));
+        }
+
+        lines.forEach((line) => {
+          const { type } = line;
+
+          if (conflict) {
+            if (type === 'old') {
+              linesObj.left.push(this.getLineForParallelView(line, id, 'conflict'));
+            } else if (type === 'new') {
+              linesObj.right.push(this.getLineForParallelView(line, id, 'conflict', true));
+            }
+          } else {
+            const lineType = type || 'context';
+
+            linesObj.left.push(this.getLineForParallelView(line, id, lineType));
+            linesObj.right.push(this.getLineForParallelView(line, id, lineType, true));
+          }
+        });
+
+        this.checkLineLengths(linesObj);
+      });
+
+      for (let i = 0, len = linesObj.left.length; i < len; i += 1) {
+        file.parallelLines.push([
+          linesObj.right[i],
+          linesObj.left[i]
+        ]);
+      }
+    },
+
+    setLoadingState(state) {
+      this.state.isLoading = state;
+    },
+
+    setErrorState(state) {
+      this.state.hasError = state;
+    },
+
+    setFailedRequest(message) {
+      this.state.hasError = true;
+      this.state.conflictsData.errorMessage = message;
+    },
+
+    getConflictsCount() {
+      if (!this.state.conflictsData.files.length) {
+        return 0;
+      }
+
+      const files = this.state.conflictsData.files;
+      let count = 0;
+
+      files.forEach((file) => {
+        if (file.type === CONFLICT_TYPES.TEXT) {
+          file.sections.forEach((section) => {
+            if (section.conflict) {
+              count += 1;
+            }
+          });
+        } else {
+          count += 1;
+        }
+      });
+
+      return count;
+    },
+
+    getConflictsCountText() {
+      const count = this.getConflictsCount();
+      const text = count ? 'conflicts' : 'conflict';
+
+      return `${count} ${text}`;
+    },
+
+    setViewType(viewType) {
+      this.state.diffView = viewType;
+      this.state.isParallel = viewType === VIEW_TYPES.PARALLEL;
+
+      Cookies.set('diff_view', viewType);
+    },
+
+    getHeadHeaderLine(id) {
+      return {
+        id: id,
+        richText: HEAD_HEADER_TEXT,
+        buttonTitle: HEAD_BUTTON_TITLE,
+        type: 'new',
+        section: 'head',
+        isHeader: true,
+        isHead: true,
+        isSelected: false,
+        isUnselected: false
+      };
+    },
+
+    decorateLineForInlineView(line, id, conflict) {
+      const { type } = line;
+      line.id = id;
+      line.hasConflict = conflict;
+      line.isHead = type === 'new';
+      line.isOrigin = type === 'old';
+      line.hasMatch = type === 'match';
+      line.richText = line.rich_text;
+      line.isSelected = false;
+      line.isUnselected = false;
+    },
+
+    getLineForParallelView(line, id, lineType, isHead) {
+      const { old_line, new_line, rich_text } = line;
+      const hasConflict = lineType === 'conflict';
+
+      return {
+        id,
+        lineType,
+        hasConflict,
+        isHead: hasConflict && isHead,
+        isOrigin: hasConflict && !isHead,
+        hasMatch: lineType === 'match',
+        lineNumber: isHead ? new_line : old_line,
+        section: isHead ? 'head' : 'origin',
+        richText: rich_text,
+        isSelected: false,
+        isUnselected: false
+      };
+    },
+
+    getOriginHeaderLine(id) {
+      return {
+        id: id,
+        richText: ORIGIN_HEADER_TEXT,
+        buttonTitle: ORIGIN_BUTTON_TITLE,
+        type: 'old',
+        section: 'origin',
+        isHeader: true,
+        isOrigin: true,
+        isSelected: false,
+        isUnselected: false
+      };
+    },
+
+    getFilePath(file) {
+      const { old_path, new_path } = file;
+      return old_path === new_path ? new_path : `${old_path} → ${new_path}`;
+    },
+
+    checkLineLengths(linesObj) {
+      const { left, right } = linesObj;
+
+      if (left.length !== right.length) {
+        if (left.length > right.length) {
+          const diff = left.length - right.length;
+          for (let i = 0; i < diff; i += 1) {
+            right.push({ lineType: 'emptyLine', richText: '' });
+          }
+        } else {
+          const diff = right.length - left.length;
+          for (let i = 0; i < diff; i += 1) {
+            left.push({ lineType: 'emptyLine', richText: '' });
+          }
+        }
+      }
+    },
+
+    setPromptConfirmationState(file, state) {
+      file.promptDiscardConfirmation = state;
+    },
+
+    setFileResolveMode(file, mode) {
+      if (mode === INTERACTIVE_RESOLVE_MODE) {
+        file.showEditor = false;
+      } else if (mode === EDIT_RESOLVE_MODE) {
+        // Restore Interactive mode when switching to Edit mode
+        file.showEditor = true;
+        file.loadEditor = true;
+        file.resolutionData = {};
+
+        this.restoreFileLinesState(file);
+      }
+
+      file.resolveMode = mode;
+    },
+
+    restoreFileLinesState(file) {
+      file.inlineLines.forEach((line) => {
+        if (line.hasConflict || line.isHeader) {
+          line.isSelected = false;
+          line.isUnselected = false;
+        }
+      });
+
+      file.parallelLines.forEach((lines) => {
+        const left = lines[0];
+        const right = lines[1];
+        const isLeftMatch = left.hasConflict || left.isHeader;
+        const isRightMatch = right.hasConflict || right.isHeader;
+
+        if (isLeftMatch || isRightMatch) {
+          left.isSelected = false;
+          left.isUnselected = false;
+          right.isSelected = false;
+          right.isUnselected = false;
+        }
+      });
+    },
+
+    isReadyToCommit() {
+      const files = this.state.conflictsData.files;
+      const hasCommitMessage = $.trim(this.state.conflictsData.commitMessage).length;
+      let unresolved = 0;
+
+      for (let i = 0, l = files.length; i < l; i += 1) {
+        const file = files[i];
+
+        if (file.resolveMode === INTERACTIVE_RESOLVE_MODE) {
+          let numberConflicts = 0;
+          const resolvedConflicts = Object.keys(file.resolutionData).length;
+
+          // We only check for conflicts type 'text'
+          // since conflicts `text_editor` can´t be resolved in interactive mode
+          if (file.type === CONFLICT_TYPES.TEXT) {
+            for (let j = 0, k = file.sections.length; j < k; j += 1) {
+              if (file.sections[j].conflict) {
+                numberConflicts += 1;
+              }
+            }
+
+            if (resolvedConflicts !== numberConflicts) {
+              unresolved += 1;
+            }
+          }
+        } else if (file.resolveMode === EDIT_RESOLVE_MODE) {
+          // Unlikely to happen since switching to Edit mode saves content automatically.
+          // Checking anyway in case the save strategy changes in the future
+          if (!file.content) {
+            unresolved += 1;
+            continue;
+          }
+        }
+      }
+
+      return !this.state.isSubmitting && hasCommitMessage && !unresolved;
+    },
+
+    getCommitButtonText() {
+      const initial = 'Commit conflict resolution';
+      const inProgress = 'Committing...';
+
+      return this.state ? this.state.isSubmitting ? inProgress : initial : initial;
+    },
+
+    getCommitData() {
+      let commitData = {};
+
+      commitData = {
+        commit_message: this.state.conflictsData.commitMessage,
+        files: []
+      };
+
+      this.state.conflictsData.files.forEach((file) => {
+        const addFile = {
+          old_path: file.old_path,
+          new_path: file.new_path
+        };
+
+        if (file.type === CONFLICT_TYPES.TEXT) {
+          // Submit only one data for type of editing
+          if (file.resolveMode === INTERACTIVE_RESOLVE_MODE) {
+            addFile.sections = file.resolutionData;
+          } else if (file.resolveMode === EDIT_RESOLVE_MODE) {
+            addFile.content = file.content;
+          }
+        } else if (file.type === CONFLICT_TYPES.TEXT_EDITOR) {
+          addFile.content = file.content;
+        }
+
+        commitData.files.push(addFile);
+      });
+
+      return commitData;
+    },
+
+    handleSelected(file, sectionId, selection) {
+      Vue.set(file.resolutionData, sectionId, selection);
+
+      file.inlineLines.forEach((line) => {
+        if (line.id === sectionId && (line.hasConflict || line.isHeader)) {
+          this.markLine(line, selection);
+        }
+      });
+
+      file.parallelLines.forEach((lines) => {
+        const left = lines[0];
+        const right = lines[1];
+        const hasSameId = right.id === sectionId || left.id === sectionId;
+        const isLeftMatch = left.hasConflict || left.isHeader;
+        const isRightMatch = right.hasConflict || right.isHeader;
+
+        if (hasSameId && (isLeftMatch || isRightMatch)) {
+          this.markLine(left, selection);
+          this.markLine(right, selection);
+        }
+      });
+    },
+
+    markLine(line, selection) {
+      if (selection === 'head' && line.isHead) {
+        line.isSelected = true;
+        line.isUnselected = false;
+      } else if (selection === 'origin' && line.isOrigin) {
+        line.isSelected = true;
+        line.isUnselected = false;
+      } else {
+        line.isSelected = false;
+        line.isUnselected = true;
+      }
+    },
+
+    setSubmitState(state) {
+      this.state.isSubmitting = state;
+    },
+
+    fileTextTypePresent() {
+      return this.state.conflictsData.files.some(f => f.type === CONFLICT_TYPES.TEXT);
+    }
+  };
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/merge_conflicts/merge_conflict_store.js.es6 b/app/assets/javascripts/merge_conflicts/merge_conflict_store.js.es6
deleted file mode 100644
index f94e51e783c..00000000000
--- a/app/assets/javascripts/merge_conflicts/merge_conflict_store.js.es6
+++ /dev/null
@@ -1,436 +0,0 @@
-/* eslint-disable */
-((global) => {
-  global.mergeConflicts = global.mergeConflicts || {};
-
-  const diffViewType = Cookies.get('diff_view');
-  const HEAD_HEADER_TEXT = 'HEAD//our changes';
-  const ORIGIN_HEADER_TEXT = 'origin//their changes';
-  const HEAD_BUTTON_TITLE = 'Use ours';
-  const ORIGIN_BUTTON_TITLE = 'Use theirs';
-  const INTERACTIVE_RESOLVE_MODE = 'interactive';
-  const EDIT_RESOLVE_MODE = 'edit';
-  const DEFAULT_RESOLVE_MODE = INTERACTIVE_RESOLVE_MODE;
-  const VIEW_TYPES = {
-    INLINE: 'inline',
-    PARALLEL: 'parallel'
-  };
-  const CONFLICT_TYPES = {
-    TEXT: 'text',
-    TEXT_EDITOR: 'text-editor'
-  };
-
-  global.mergeConflicts.mergeConflictsStore = {
-    state: {
-      isLoading: true,
-      hasError: false,
-      isSubmitting: false,
-      isParallel: diffViewType === VIEW_TYPES.PARALLEL,
-      diffViewType: diffViewType,
-      conflictsData: {}
-    },
-
-    setConflictsData(data) {
-      this.decorateFiles(data.files);
-
-      this.state.conflictsData = {
-        files: data.files,
-        commitMessage: data.commit_message,
-        sourceBranch: data.source_branch,
-        targetBranch: data.target_branch,
-        commitMessage: data.commit_message,
-        shortCommitSha: data.commit_sha.slice(0, 7),
-      };
-    },
-
-    decorateFiles(files) {
-      files.forEach((file) => {
-        file.content = '';
-        file.resolutionData = {};
-        file.promptDiscardConfirmation = false;
-        file.resolveMode = DEFAULT_RESOLVE_MODE;
-        file.filePath = this.getFilePath(file);
-        file.iconClass = `fa-${file.blob_icon}`;
-        file.blobPath = file.blob_path;
-
-        if (file.type === CONFLICT_TYPES.TEXT) {
-          file.showEditor = false;
-          file.loadEditor = false;
-
-          this.setInlineLine(file);
-          this.setParallelLine(file);
-        } else if (file.type === CONFLICT_TYPES.TEXT_EDITOR) {
-          file.showEditor = true;
-          file.loadEditor = true;
-        }
-      });
-    },
-
-    setInlineLine(file) {
-      file.inlineLines = [];
-
-      file.sections.forEach((section) => {
-        let currentLineType = 'new';
-        const { conflict, lines, id } = section;
-
-        if (conflict) {
-          file.inlineLines.push(this.getHeadHeaderLine(id));
-        }
-
-        lines.forEach((line) => {
-          const { type } = line;
-
-          if ((type === 'new' || type === 'old') && currentLineType !== type) {
-            currentLineType = type;
-            file.inlineLines.push({ lineType: 'emptyLine', richText: '' });
-          }
-
-          this.decorateLineForInlineView(line, id, conflict);
-          file.inlineLines.push(line);
-        })
-
-        if (conflict) {
-          file.inlineLines.push(this.getOriginHeaderLine(id));
-        }
-      });
-    },
-
-    setParallelLine(file) {
-      file.parallelLines = [];
-      const linesObj = { left: [], right: [] };
-
-      file.sections.forEach((section) => {
-        const { conflict, lines, id } = section;
-
-        if (conflict) {
-          linesObj.left.push(this.getOriginHeaderLine(id));
-          linesObj.right.push(this.getHeadHeaderLine(id));
-        }
-
-        lines.forEach((line) => {
-          const { type } = line;
-
-          if (conflict) {
-            if (type === 'old') {
-              linesObj.left.push(this.getLineForParallelView(line, id, 'conflict'));
-            } else if (type === 'new') {
-              linesObj.right.push(this.getLineForParallelView(line, id, 'conflict', true));
-            }
-          } else {
-            const lineType = type || 'context';
-
-            linesObj.left.push (this.getLineForParallelView(line, id, lineType));
-            linesObj.right.push(this.getLineForParallelView(line, id, lineType, true));
-          }
-        });
-
-        this.checkLineLengths(linesObj);
-      });
-
-      for (let i = 0, len = linesObj.left.length; i < len; i++) {
-        file.parallelLines.push([
-          linesObj.right[i],
-          linesObj.left[i]
-        ]);
-      }
-    },
-
-    setLoadingState(state) {
-      this.state.isLoading = state;
-    },
-
-    setErrorState(state) {
-      this.state.hasError = state;
-    },
-
-    setFailedRequest(message) {
-      this.state.hasError = true;
-      this.state.conflictsData.errorMessage = message;
-    },
-
-    getConflictsCount() {
-      if (!this.state.conflictsData.files.length) {
-        return 0;
-      }
-
-      const files = this.state.conflictsData.files;
-      let count = 0;
-
-      files.forEach((file) => {
-        if (file.type === CONFLICT_TYPES.TEXT) {
-          file.sections.forEach((section) => {
-            if (section.conflict) {
-              count++;
-            }
-          });
-        } else {
-          count++;
-        }
-      });
-
-      return count;
-    },
-
-    getConflictsCountText() {
-      const count = this.getConflictsCount();
-      const text = count ? 'conflicts' : 'conflict';
-
-      return `${count} ${text}`;
-    },
-
-    setViewType(viewType) {
-      this.state.diffView = viewType;
-      this.state.isParallel = viewType === VIEW_TYPES.PARALLEL;
-
-      Cookies.set('diff_view', viewType);
-    },
-
-    getHeadHeaderLine(id) {
-      return {
-        id: id,
-        richText: HEAD_HEADER_TEXT,
-        buttonTitle: HEAD_BUTTON_TITLE,
-        type: 'new',
-        section: 'head',
-        isHeader: true,
-        isHead: true,
-        isSelected: false,
-        isUnselected: false
-      };
-    },
-
-    decorateLineForInlineView(line, id, conflict) {
-      const { type } = line;
-      line.id = id;
-      line.hasConflict = conflict;
-      line.isHead = type === 'new';
-      line.isOrigin = type === 'old';
-      line.hasMatch = type === 'match';
-      line.richText = line.rich_text;
-      line.isSelected = false;
-      line.isUnselected = false;
-    },
-
-    getLineForParallelView(line, id, lineType, isHead) {
-      const { old_line, new_line, rich_text } = line;
-      const hasConflict = lineType === 'conflict';
-
-      return {
-        id,
-        lineType,
-        hasConflict,
-        isHead: hasConflict && isHead,
-        isOrigin: hasConflict && !isHead,
-        hasMatch: lineType === 'match',
-        lineNumber: isHead ? new_line : old_line,
-        section: isHead ? 'head' : 'origin',
-        richText: rich_text,
-        isSelected: false,
-        isUnselected: false
-      };
-    },
-
-    getOriginHeaderLine(id) {
-      return {
-        id: id,
-        richText: ORIGIN_HEADER_TEXT,
-        buttonTitle: ORIGIN_BUTTON_TITLE,
-        type: 'old',
-        section: 'origin',
-        isHeader: true,
-        isOrigin: true,
-        isSelected: false,
-        isUnselected: false
-      };
-    },
-
-    getFilePath(file) {
-      const { old_path, new_path } = file;
-      return old_path === new_path ? new_path : `${old_path} → ${new_path}`;
-    },
-
-    checkLineLengths(linesObj) {
-      let { left, right } = linesObj;
-
-      if (left.length !== right.length) {
-        if (left.length > right.length) {
-          const diff = left.length - right.length;
-          for (let i = 0; i < diff; i++) {
-            right.push({ lineType: 'emptyLine', richText: '' });
-          }
-        } else {
-          const diff = right.length - left.length;
-          for (let i = 0; i < diff; i++) {
-            left.push({ lineType: 'emptyLine', richText: '' });
-          }
-        }
-      }
-    },
-
-    setPromptConfirmationState(file, state) {
-      file.promptDiscardConfirmation = state;
-    },
-
-    setFileResolveMode(file, mode) {
-      if (mode === INTERACTIVE_RESOLVE_MODE) {
-        file.showEditor = false;
-      } else if (mode === EDIT_RESOLVE_MODE) {
-        // Restore Interactive mode when switching to Edit mode
-        file.showEditor = true;
-        file.loadEditor = true;
-        file.resolutionData = {};
-
-        this.restoreFileLinesState(file);
-      }
-
-      file.resolveMode = mode;
-    },
-
-    restoreFileLinesState(file) {
-      file.inlineLines.forEach((line) => {
-        if (line.hasConflict || line.isHeader) {
-          line.isSelected = false;
-          line.isUnselected = false;
-        }
-      });
-
-      file.parallelLines.forEach((lines) => {
-        const left = lines[0];
-        const right = lines[1];
-        const isLeftMatch = left.hasConflict || left.isHeader;
-        const isRightMatch = right.hasConflict || right.isHeader;
-
-        if (isLeftMatch || isRightMatch) {
-          left.isSelected = false;
-          left.isUnselected = false;
-          right.isSelected = false;
-          right.isUnselected = false;
-        }
-      });
-    },
-
-    isReadyToCommit() {
-      const files = this.state.conflictsData.files;
-      const hasCommitMessage = $.trim(this.state.conflictsData.commitMessage).length;
-      let unresolved = 0;
-
-      for (let i = 0, l = files.length; i < l; i++) {
-        let file = files[i];
-
-        if (file.resolveMode === INTERACTIVE_RESOLVE_MODE) {
-          let numberConflicts = 0;
-          let resolvedConflicts = Object.keys(file.resolutionData).length
-
-          // We only check for conflicts type 'text'
-          // since conflicts `text_editor` can´t be resolved in interactive mode
-          if (file.type === CONFLICT_TYPES.TEXT) {
-            for (let j = 0, k = file.sections.length; j < k; j++) {
-              if (file.sections[j].conflict) {
-                numberConflicts++;
-              }
-            }
-
-            if (resolvedConflicts !== numberConflicts) {
-              unresolved++;
-            }
-          }
-        } else if (file.resolveMode === EDIT_RESOLVE_MODE) {
-
-          // Unlikely to happen since switching to Edit mode saves content automatically.
-          // Checking anyway in case the save strategy changes in the future
-          if (!file.content) {
-            unresolved++;
-            continue;
-          }
-        }
-      }
-
-      return !this.state.isSubmitting && hasCommitMessage && !unresolved;
-    },
-
-    getCommitButtonText() {
-      const initial = 'Commit conflict resolution';
-      const inProgress = 'Committing...';
-
-      return this.state ? this.state.isSubmitting ? inProgress : initial : initial;
-    },
-
-    getCommitData() {
-      let commitData = {};
-
-      commitData = {
-        commit_message: this.state.conflictsData.commitMessage,
-        files: []
-      };
-
-      this.state.conflictsData.files.forEach((file) => {
-        let addFile;
-
-        addFile = {
-          old_path: file.old_path,
-          new_path: file.new_path
-        };
-
-        if (file.type === CONFLICT_TYPES.TEXT) {
-
-          // Submit only one data for type of editing
-          if (file.resolveMode === INTERACTIVE_RESOLVE_MODE) {
-            addFile.sections = file.resolutionData;
-          } else if (file.resolveMode === EDIT_RESOLVE_MODE) {
-            addFile.content = file.content;
-          }
-        } else if (file.type === CONFLICT_TYPES.TEXT_EDITOR) {
-          addFile.content = file.content;
-        }
-
-        commitData.files.push(addFile);
-      });
-
-      return commitData;
-    },
-
-    handleSelected(file, sectionId, selection) {
-      Vue.set(file.resolutionData, sectionId, selection);
-
-      file.inlineLines.forEach((line) => {
-        if (line.id === sectionId && (line.hasConflict || line.isHeader)) {
-          this.markLine(line, selection);
-        }
-      });
-
-      file.parallelLines.forEach((lines) => {
-        const left = lines[0];
-        const right = lines[1];
-        const hasSameId = right.id === sectionId || left.id === sectionId;
-        const isLeftMatch = left.hasConflict || left.isHeader;
-        const isRightMatch = right.hasConflict || right.isHeader;
-
-        if (hasSameId && (isLeftMatch || isRightMatch)) {
-          this.markLine(left, selection);
-          this.markLine(right, selection);
-        }
-      });
-    },
-
-    markLine(line, selection) {
-      if (selection === 'head' && line.isHead) {
-        line.isSelected = true;
-        line.isUnselected = false;
-      } else if (selection === 'origin' && line.isOrigin) {
-        line.isSelected = true;
-        line.isUnselected = false;
-      } else {
-        line.isSelected = false;
-        line.isUnselected = true;
-      }
-    },
-
-    setSubmitState(state) {
-      this.state.isSubmitting = state;
-    },
-
-    fileTextTypePresent() {
-      return this.state.conflictsData.files.some(f => f.type === CONFLICT_TYPES.TEXT);
-    }
-  };
-
-})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js b/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js
new file mode 100644
index 00000000000..15992460146
--- /dev/null
+++ b/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js
@@ -0,0 +1,92 @@
+/* eslint-disable new-cap, comma-dangle, no-new */
+/* global Flash */
+
+import Vue from 'vue';
+
+require('./merge_conflict_store');
+require('./merge_conflict_service');
+require('./mixins/line_conflict_utils');
+require('./mixins/line_conflict_actions');
+require('./components/diff_file_editor');
+require('./components/inline_conflict_lines');
+require('./components/parallel_conflict_lines');
+
+$(() => {
+  const INTERACTIVE_RESOLVE_MODE = 'interactive';
+  const conflictsEl = document.querySelector('#conflicts');
+  const mergeConflictsStore = gl.mergeConflicts.mergeConflictsStore;
+  const mergeConflictsService = new gl.mergeConflicts.mergeConflictsService({
+    conflictsPath: conflictsEl.dataset.conflictsPath,
+    resolveConflictsPath: conflictsEl.dataset.resolveConflictsPath
+  });
+
+  gl.MergeConflictsResolverApp = new Vue({
+    el: '#conflicts',
+    data: mergeConflictsStore.state,
+    components: {
+      'diff-file-editor': gl.mergeConflicts.diffFileEditor,
+      'inline-conflict-lines': gl.mergeConflicts.inlineConflictLines,
+      'parallel-conflict-lines': gl.mergeConflicts.parallelConflictLines
+    },
+    computed: {
+      conflictsCountText() { return mergeConflictsStore.getConflictsCountText(); },
+      readyToCommit() { return mergeConflictsStore.isReadyToCommit(); },
+      commitButtonText() { return mergeConflictsStore.getCommitButtonText(); },
+      showDiffViewTypeSwitcher() { return mergeConflictsStore.fileTextTypePresent(); }
+    },
+    created() {
+      mergeConflictsService
+        .fetchConflictsData()
+        .done((data) => {
+          if (data.type === 'error') {
+            mergeConflictsStore.setFailedRequest(data.message);
+          } else {
+            mergeConflictsStore.setConflictsData(data);
+          }
+        })
+        .error(() => {
+          mergeConflictsStore.setFailedRequest();
+        })
+        .always(() => {
+          mergeConflictsStore.setLoadingState(false);
+
+          this.$nextTick(() => {
+            $('.js-syntax-highlight').syntaxHighlight();
+          });
+        });
+    },
+    methods: {
+      handleViewTypeChange(viewType) {
+        mergeConflictsStore.setViewType(viewType);
+      },
+      onClickResolveModeButton(file, mode) {
+        if (mode === INTERACTIVE_RESOLVE_MODE && file.resolveEditChanged) {
+          mergeConflictsStore.setPromptConfirmationState(file, true);
+          return;
+        }
+
+        mergeConflictsStore.setFileResolveMode(file, mode);
+      },
+      acceptDiscardConfirmation(file) {
+        mergeConflictsStore.setPromptConfirmationState(file, false);
+        mergeConflictsStore.setFileResolveMode(file, INTERACTIVE_RESOLVE_MODE);
+      },
+      cancelDiscardConfirmation(file) {
+        mergeConflictsStore.setPromptConfirmationState(file, false);
+      },
+      commit() {
+        mergeConflictsStore.setSubmitState(true);
+
+        mergeConflictsService
+          .submitResolveConflicts(mergeConflictsStore.getCommitData())
+          .done((data) => {
+            window.location.href = data.redirect_to;
+          })
+          .error(() => {
+            mergeConflictsStore.setSubmitState(false);
+            new Flash('Failed to save merge conflicts resolutions. Please try again!');
+          });
+      }
+    }
+  });
+});
diff --git a/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js.es6 b/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js.es6
deleted file mode 100644
index 222a5dcfc2e..00000000000
--- a/app/assets/javascripts/merge_conflicts/merge_conflicts_bundle.js.es6
+++ /dev/null
@@ -1,90 +0,0 @@
-/* eslint-disable */
-//= require vue
-//= require ./merge_conflict_store
-//= require ./merge_conflict_service
-//= require ./mixins/line_conflict_utils
-//= require ./mixins/line_conflict_actions
-//= require ./components/diff_file_editor
-//= require ./components/inline_conflict_lines
-//= require ./components/parallel_conflict_line
-//= require ./components/parallel_conflict_lines
-
-$(() => {
-  const INTERACTIVE_RESOLVE_MODE = 'interactive';
-  const conflictsEl = document.querySelector('#conflicts');
-  const mergeConflictsStore = gl.mergeConflicts.mergeConflictsStore;
-  const mergeConflictsService = new gl.mergeConflicts.mergeConflictsService({
-    conflictsPath: conflictsEl.dataset.conflictsPath,
-    resolveConflictsPath: conflictsEl.dataset.resolveConflictsPath
-  });
-
-  gl.MergeConflictsResolverApp = new Vue({
-    el: '#conflicts',
-    data: mergeConflictsStore.state,
-    components: {
-      'diff-file-editor': gl.mergeConflicts.diffFileEditor,
-      'inline-conflict-lines': gl.mergeConflicts.inlineConflictLines,
-      'parallel-conflict-lines': gl.mergeConflicts.parallelConflictLines
-    },
-    computed: {
-      conflictsCountText() { return mergeConflictsStore.getConflictsCountText() },
-      readyToCommit() { return mergeConflictsStore.isReadyToCommit() },
-      commitButtonText() { return mergeConflictsStore.getCommitButtonText() },
-      showDiffViewTypeSwitcher() { return mergeConflictsStore.fileTextTypePresent() }
-    },
-    created() {
-      mergeConflictsService
-        .fetchConflictsData()
-        .done((data) => {
-          if (data.type === 'error') {
-            mergeConflictsStore.setFailedRequest(data.message);
-          } else {
-            mergeConflictsStore.setConflictsData(data);
-          }
-        })
-        .error(() => {
-          mergeConflictsStore.setFailedRequest();
-        })
-        .always(() => {
-          mergeConflictsStore.setLoadingState(false);
-
-          this.$nextTick(() => {
-            $(conflictsEl.querySelectorAll('.js-syntax-highlight')).syntaxHighlight();
-          });
-        });
-    },
-    methods: {
-      handleViewTypeChange(viewType) {
-        mergeConflictsStore.setViewType(viewType);
-      },
-      onClickResolveModeButton(file, mode) {
-        if (mode === INTERACTIVE_RESOLVE_MODE && file.resolveEditChanged) {
-          mergeConflictsStore.setPromptConfirmationState(file, true);
-          return;
-        }
-
-        mergeConflictsStore.setFileResolveMode(file, mode);
-      },
-      acceptDiscardConfirmation(file) {
-        mergeConflictsStore.setPromptConfirmationState(file, false);
-        mergeConflictsStore.setFileResolveMode(file, INTERACTIVE_RESOLVE_MODE);
-      },
-      cancelDiscardConfirmation(file) {
-        mergeConflictsStore.setPromptConfirmationState(file, false);
-      },
-      commit() {
-        mergeConflictsStore.setSubmitState(true);
-
-        mergeConflictsService
-          .submitResolveConflicts(mergeConflictsStore.getCommitData())
-          .done((data) => {
-            window.location.href = data.redirect_to;
-          })
-          .error(() => {
-            mergeConflictsStore.setSubmitState(false);
-            new Flash('Failed to save merge conflicts resolutions. Please try again!');
-          });
-      }
-    }
-  })
-});
diff --git a/app/assets/javascripts/merge_conflicts/mixins/line_conflict_actions.js b/app/assets/javascripts/merge_conflicts/mixins/line_conflict_actions.js
new file mode 100644
index 00000000000..53e000d7e9e
--- /dev/null
+++ b/app/assets/javascripts/merge_conflicts/mixins/line_conflict_actions.js
@@ -0,0 +1,13 @@
+/* eslint-disable no-param-reassign, comma-dangle */
+
+((global) => {
+  global.mergeConflicts = global.mergeConflicts || {};
+
+  global.mergeConflicts.actions = {
+    methods: {
+      handleSelected(file, sectionId, selection) {
+        gl.mergeConflicts.mergeConflictsStore.handleSelected(file, sectionId, selection);
+      }
+    }
+  };
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/merge_conflicts/mixins/line_conflict_actions.js.es6 b/app/assets/javascripts/merge_conflicts/mixins/line_conflict_actions.js.es6
deleted file mode 100644
index c8de586aa21..00000000000
--- a/app/assets/javascripts/merge_conflicts/mixins/line_conflict_actions.js.es6
+++ /dev/null
@@ -1,13 +0,0 @@
-/* eslint-disable */
-((global) => {
-  global.mergeConflicts = global.mergeConflicts || {};
-
-  global.mergeConflicts.actions = {
-    methods: {
-      handleSelected(file, sectionId, selection) {
-        gl.mergeConflicts.mergeConflictsStore.handleSelected(file, sectionId, selection);
-      }
-    }
-  };
-
-})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/merge_conflicts/mixins/line_conflict_utils.js b/app/assets/javascripts/merge_conflicts/mixins/line_conflict_utils.js
new file mode 100644
index 00000000000..0f475f62ee6
--- /dev/null
+++ b/app/assets/javascripts/merge_conflicts/mixins/line_conflict_utils.js
@@ -0,0 +1,19 @@
+/* eslint-disable no-param-reassign, quote-props, comma-dangle */
+
+((global) => {
+  global.mergeConflicts = global.mergeConflicts || {};
+
+  global.mergeConflicts.utils = {
+    methods: {
+      lineCssClass(line) {
+        return {
+          'head': line.isHead,
+          'origin': line.isOrigin,
+          'match': line.hasMatch,
+          'selected': line.isSelected,
+          'unselected': line.isUnselected
+        };
+      }
+    }
+  };
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/merge_conflicts/mixins/line_conflict_utils.js.es6 b/app/assets/javascripts/merge_conflicts/mixins/line_conflict_utils.js.es6
deleted file mode 100644
index 88c3a20ce13..00000000000
--- a/app/assets/javascripts/merge_conflicts/mixins/line_conflict_utils.js.es6
+++ /dev/null
@@ -1,19 +0,0 @@
-/* eslint-disable */
-((global) => {
-  global.mergeConflicts = global.mergeConflicts || {};
-
-  global.mergeConflicts.utils = {
-    methods: {
-      lineCssClass(line) {
-        return {
-          'head': line.isHead,
-          'origin': line.isOrigin,
-          'match': line.hasMatch,
-          'selected': line.isSelected,
-          'unselected': line.isUnselected
-        };
-      }
-    }
-  };
-
-})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/merge_request.js b/app/assets/javascripts/merge_request.js
index d3bd1e846c1..5e01aacf2ba 100644
--- a/app/assets/javascripts/merge_request.js
+++ b/app/assets/javascripts/merge_request.js
@@ -1,11 +1,12 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, quotes, no-underscore-dangle, one-var, one-var-declaration-per-line, consistent-return, dot-notation, quote-props, comma-dangle, object-shorthand, max-len, prefer-arrow-callback */
+/* global MergeRequestTabs */
 
-/*= require jquery.waitforimages */
-/*= require task_list */
-/*= require merge_request_tabs */
+require('vendor/jquery.waitforimages');
+require('./task_list');
+require('./merge_request_tabs');
 
 (function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
 
   this.MergeRequest = (function() {
     function MergeRequest(opts) {
@@ -23,11 +24,18 @@
         };
       })(this));
       this.initTabs();
-      // Prevent duplicate event bindings
-      this.disableTaskList();
       this.initMRBtnListeners();
+      this.initCommitMessageListeners();
       if ($("a.btn-close").length) {
-        this.initTaskList();
+        this.taskList = new gl.TaskList({
+          dataType: 'merge_request',
+          fieldName: 'description',
+          selector: '.detail-page-description',
+          onSuccess: (result) => {
+            document.querySelector('#task_status').innerText = result.task_status;
+            document.querySelector('#task_status_short').innerText = result.task_status_short;
+          }
+        });
       }
     }
 
@@ -40,7 +48,7 @@
       if (window.mrTabs) {
         window.mrTabs.unbindEvents();
       }
-      window.mrTabs = new MergeRequestTabs(this.opts);
+      window.mrTabs = new gl.MergeRequestTabs(this.opts);
     };
 
     MergeRequest.prototype.showAllCommits = function() {
@@ -48,11 +56,6 @@
       return this.$('.all-commits').removeClass('hide');
     };
 
-    MergeRequest.prototype.initTaskList = function() {
-      $('.detail-page-description .js-task-list-container').taskList('enable');
-      return $(document).on('tasklist:changed', '.detail-page-description .js-task-list-container', this.updateTaskList);
-    };
-
     MergeRequest.prototype.initMRBtnListeners = function() {
       var _this;
       _this = this;
@@ -83,32 +86,26 @@
       }
     };
 
-    MergeRequest.prototype.disableTaskList = function() {
-      $('.detail-page-description .js-task-list-container').taskList('disable');
-      return $(document).off('tasklist:changed', '.detail-page-description .js-task-list-container');
-    };
+    MergeRequest.prototype.initCommitMessageListeners = function() {
+      $(document).on('click', 'a.js-with-description-link', function(e) {
+        var textarea = $('textarea.js-commit-message');
+        e.preventDefault();
 
-    MergeRequest.prototype.updateTaskList = function() {
-      var patchData;
-      patchData = {};
-      patchData['merge_request'] = {
-        'description': $('.js-task-list-field', this).val()
-      };
-      return $.ajax({
-        type: 'PATCH',
-        url: $('form.js-issuable-update').attr('action'),
-        data: patchData,
-        success: function(mergeRequest) {
-          document.querySelector('#task_status').innerText = mergeRequest.task_status;
-          document.querySelector('#task_status_short').innerText = mergeRequest.task_status_short;
-        }
+        textarea.val(textarea.data('messageWithDescription'));
+        $('.js-with-description-hint').hide();
+        $('.js-without-description-hint').show();
+      });
+
+      $(document).on('click', 'a.js-without-description-link', function(e) {
+        var textarea = $('textarea.js-commit-message');
+        e.preventDefault();
+
+        textarea.val(textarea.data('messageWithoutDescription'));
+        $('.js-with-description-hint').show();
+        $('.js-without-description-hint').hide();
       });
-    // TODO (rspeicher): Make the merge request description inline-editable like a
-    // note so that we can re-use its form here
     };
 
     return MergeRequest;
-
   })();
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index 860ee5df57e..3c4e6102469 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -1,12 +1,20 @@
-/* eslint-disable */
+/* eslint-disable no-new, class-methods-use-this */
+/* global Breakpoints */
+/* global Flash */
+
+import Cookies from 'js-cookie';
+
+import CommitPipelinesTable from './commit/pipelines/pipelines_table';
+
+import './breakpoints';
+import './flash';
+
+/* eslint-disable max-len */
 // MergeRequestTabs
 //
 // Handles persisting and restoring the current tab selection and lazily-loading
 // content on the MergeRequests#show page.
 //
-/*= require js.cookie */
-
-//
 // ### Example Markup
 //
 //   <ul class="nav-links merge-request-tabs">
@@ -45,108 +53,117 @@
 //     </div>
 //   </div>
 //
-(function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+/* eslint-enable max-len */
 
-  this.MergeRequestTabs = (function() {
-    MergeRequestTabs.prototype.diffsLoaded = false;
+(() => {
+  // Store the `location` object, allowing for easier stubbing in tests
+  let location = window.location;
 
-    MergeRequestTabs.prototype.buildsLoaded = false;
+  class MergeRequestTabs {
 
-    MergeRequestTabs.prototype.pipelinesLoaded = false;
+    constructor({ action, setUrl, stubLocation } = {}) {
+      this.diffsLoaded = false;
+      this.pipelinesLoaded = false;
+      this.commitsLoaded = false;
+      this.fixedLayoutPref = null;
 
-    MergeRequestTabs.prototype.commitsLoaded = false;
+      this.setUrl = setUrl !== undefined ? setUrl : true;
+      this.setCurrentAction = this.setCurrentAction.bind(this);
+      this.tabShown = this.tabShown.bind(this);
+      this.showTab = this.showTab.bind(this);
 
-    MergeRequestTabs.prototype.fixedLayoutPref = null;
-
-    function MergeRequestTabs(opts) {
-      this.opts = opts != null ? opts : {};
-      this.opts.setUrl = this.opts.setUrl !== undefined ? this.opts.setUrl : true;
-
-      this.buildsLoaded = this.opts.buildsLoaded || false;
+      if (stubLocation) {
+        location = stubLocation;
+      }
 
-      this.setCurrentAction = bind(this.setCurrentAction, this);
-      this.tabShown = bind(this.tabShown, this);
-      this.showTab = bind(this.showTab, this);
-      // Store the `location` object, allowing for easier stubbing in tests
-      this._location = location;
       this.bindEvents();
-      this.activateTab(this.opts.action);
+      this.activateTab(action);
       this.initAffix();
     }
 
-    MergeRequestTabs.prototype.bindEvents = function() {
-      $(document).on('shown.bs.tab', '.merge-request-tabs a[data-toggle="tab"]', this.tabShown);
-      $(document).on('click', '.js-show-tab', this.showTab);
-    };
-
-    MergeRequestTabs.prototype.unbindEvents = function() {
-      $(document).off('shown.bs.tab', '.merge-request-tabs a[data-toggle="tab"]', this.tabShown);
-      $(document).off('click', '.js-show-tab', this.showTab);
-    };
-
-    MergeRequestTabs.prototype.showTab = function(event) {
-      event.preventDefault();
-      return this.activateTab($(event.target).data('action'));
-    };
-
-    MergeRequestTabs.prototype.tabShown = function(event) {
-      var $target, action, navBarHeight;
-      $target = $(event.target);
-      action = $target.data('action');
+    bindEvents() {
+      $(document)
+        .on('shown.bs.tab', '.merge-request-tabs a[data-toggle="tab"]', this.tabShown)
+        .on('click', '.js-show-tab', this.showTab);
+
+      $('.merge-request-tabs a[data-toggle="tab"]')
+        .on('click', this.clickTab);
+    }
+
+    unbindEvents() {
+      $(document)
+        .off('shown.bs.tab', '.merge-request-tabs a[data-toggle="tab"]', this.tabShown)
+        .off('click', '.js-show-tab', this.showTab);
+
+      $('.merge-request-tabs a[data-toggle="tab"]')
+        .off('click', this.clickTab);
+    }
+
+    destroy() {
+      this.unbindEvents();
+      if (this.commitPipelinesTable) {
+        this.commitPipelinesTable.$destroy();
+      }
+    }
+
+    showTab(e) {
+      e.preventDefault();
+      this.activateTab($(e.target).data('action'));
+    }
+
+    clickTab(e) {
+      if (e.currentTarget && gl.utils.isMetaClick(e)) {
+        const targetLink = e.currentTarget.getAttribute('href');
+        e.stopImmediatePropagation();
+        e.preventDefault();
+        window.open(targetLink, '_blank');
+      }
+    }
+
+    tabShown(e) {
+      const $target = $(e.target);
+      const action = $target.data('action');
+
       if (action === 'commits') {
         this.loadCommits($target.attr('href'));
         this.expandView();
         this.resetViewContainer();
       } else if (this.isDiffAction(action)) {
         this.loadDiff($target.attr('href'));
-        if ((typeof bp !== "undefined" && bp !== null) && bp.getBreakpointSize() !== 'lg') {
+        if (Breakpoints.get().getBreakpointSize() !== 'lg') {
           this.shrinkView();
         }
         if (this.diffViewType() === 'parallel') {
           this.expandViewContainer();
         }
-        navBarHeight = $('.navbar-gitlab').outerHeight();
-        $.scrollTo(".merge-request-details .merge-request-tabs", {
-          offset: -navBarHeight
-        });
-      } else if (action === 'builds') {
-        this.loadBuilds($target.attr('href'));
-        this.expandView();
-        this.resetViewContainer();
       } else if (action === 'pipelines') {
-        this.loadPipelines($target.attr('href'));
-        this.expandView();
         this.resetViewContainer();
+        this.loadPipelines();
       } else {
         this.expandView();
         this.resetViewContainer();
       }
-      if (this.opts.setUrl) {
+      if (this.setUrl) {
         this.setCurrentAction(action);
       }
-    };
+    }
 
-    MergeRequestTabs.prototype.scrollToElement = function(container) {
-      var $el, navBarHeight;
-      if (window.location.hash) {
-        navBarHeight = $('.navbar-gitlab').outerHeight() + $('.layout-nav').outerHeight();
-        $el = $(container + " " + window.location.hash + ":not(.match)");
+    scrollToElement(container) {
+      if (location.hash) {
+        const offset = -$('.js-tabs-affix').outerHeight();
+        const $el = $(`${container} ${location.hash}:not(.match)`);
         if ($el.length) {
-          return $.scrollTo(container + " " + window.location.hash + ":not(.match)", {
-            offset: -navBarHeight
-          });
+          $.scrollTo($el[0], { offset });
         }
       }
-    };
+    }
 
     // Activate a tab based on the current action
-    MergeRequestTabs.prototype.activateTab = function(action) {
-      if (action === 'show') {
-        action = 'notes';
-      }
-      $(".merge-request-tabs a[data-action='" + action + "']").tab('show').trigger('shown.bs.tab');
-    };
+    activateTab(action) {
+      const activate = action === 'show' ? 'notes' : action;
+      // important note: the .tab('show') method triggers 'shown.bs.tab' event itself
+      $(`.merge-request-tabs a[data-action='${activate}']`).tab('show');
+    }
 
     // Replaces the current Merge Request-specific action in the URL with a new one
     //
@@ -168,274 +185,188 @@
     //   location.pathname # => "/namespace/project/merge_requests/1/commits"
     //
     // Returns the new URL String
-    MergeRequestTabs.prototype.setCurrentAction = function(action) {
-      var new_state;
-      // Normalize action, just to be safe
-      if (action === 'show') {
-        action = 'notes';
-      }
-      this.currentAction = action;
-      // Remove a trailing '/commits' '/diffs' '/builds' '/pipelines' '/new' '/new/diffs'
-      new_state = this._location.pathname.replace(/\/(commits|diffs|builds|pipelines|new|new\/diffs)(\.html)?\/?$/, '');
+    setCurrentAction(action) {
+      this.currentAction = action === 'show' ? 'notes' : action;
+
+      // Remove a trailing '/commits' '/diffs' '/pipelines' '/new' '/new/diffs'
+      let newState = location.pathname.replace(/\/(commits|diffs|pipelines|new|new\/diffs)(\.html)?\/?$/, '');
 
       // Append the new action if we're on a tab other than 'notes'
-      if (action !== 'notes') {
-        new_state += "/" + action;
+      if (this.currentAction !== 'notes') {
+        newState += `/${this.currentAction}`;
       }
+
       // Ensure parameters and hash come along for the ride
-      new_state += this._location.search + this._location.hash;
-      history.replaceState({
-        turbolinks: true,
-        url: new_state
+      newState += location.search + location.hash;
+
+      // TODO: Consider refactoring in light of turbolinks removal.
+
       // Replace the current history state with the new one without breaking
       // Turbolinks' history.
       //
       // See https://github.com/rails/turbolinks/issues/363
-      }, document.title, new_state);
-      return new_state;
-    };
+      window.history.replaceState({
+        url: newState,
+      }, document.title, newState);
+
+      return newState;
+    }
 
-    MergeRequestTabs.prototype.loadCommits = function(source) {
+    loadCommits(source) {
       if (this.commitsLoaded) {
         return;
       }
-      return this._get({
-        url: source + ".json",
-        success: (function(_this) {
-          return function(data) {
-            document.querySelector("div#commits").innerHTML = data.html;
-            gl.utils.localTimeAgo($('.js-timeago', 'div#commits'));
-            _this.commitsLoaded = true;
-            return _this.scrollToElement("#commits");
-          };
-        })(this)
+      this.ajaxGet({
+        url: `${source}.json`,
+        success: (data) => {
+          document.querySelector('div#commits').innerHTML = data.html;
+          gl.utils.localTimeAgo($('.js-timeago', 'div#commits'));
+          this.commitsLoaded = true;
+          this.scrollToElement('#commits');
+        },
       });
-    };
+    }
+
+    loadPipelines() {
+      if (this.pipelinesLoaded) {
+        return;
+      }
+      const pipelineTableViewEl = document.querySelector('#commit-pipeline-table-view');
+      // Could already be mounted from the `pipelines_bundle`
+      if (pipelineTableViewEl) {
+        this.commitPipelinesTable = new CommitPipelinesTable().$mount(pipelineTableViewEl);
+      }
+      this.pipelinesLoaded = true;
+    }
 
-    MergeRequestTabs.prototype.loadDiff = function(source) {
+    loadDiff(source) {
       if (this.diffsLoaded) {
         return;
       }
 
       // We extract pathname for the current Changes tab anchor href
       // some pages like MergeRequestsController#new has query parameters on that anchor
-      var url = gl.utils.parseUrl(source);
-
-      return this._get({
-        url: (url.pathname + ".json") + this._location.search,
-        success: (function(_this) {
-          return function(data) {
-            $('#diffs').html(data.html);
-
-            if (typeof DiffNotesApp !== 'undefined') {
-              DiffNotesApp.compileComponents();
-            }
-
-            gl.utils.localTimeAgo($('.js-timeago', 'div#diffs'));
-            $('#diffs .js-syntax-highlight').syntaxHighlight();
-            $('#diffs .diff-file').singleFileDiff();
-            if (_this.diffViewType() === 'parallel' && (_this.isDiffAction(_this.currentAction)) ) {
-              _this.expandViewContainer();
-            }
-            _this.diffsLoaded = true;
-            var anchoredDiff = gl.utils.getLocationHash();
-            if (anchoredDiff) _this.openAnchoredDiff(anchoredDiff, function() {
-              _this.scrollToElement("#diffs");
-              _this.highlighSelectedLine();
-            });
-            _this.filesCommentButton = $('.files .diff-file').filesCommentButton();
-            return $(document).off('click', '.diff-line-num a').on('click', '.diff-line-num a', function(e) {
-              e.preventDefault();
-              window.location.hash = $(e.currentTarget).attr('href');
-              _this.highlighSelectedLine();
-              return _this.scrollToElement("#diffs");
-            });
-          };
-        })(this)
-      });
-    };
-
-    MergeRequestTabs.prototype.openAnchoredDiff = function(anchoredDiff, cb) {
-      var diffTitle = $('#file-path-' + anchoredDiff);
-      var diffFile = diffTitle.closest('.diff-file');
-      var nothingHereBlock = $('.nothing-here-block:visible', diffFile);
-      if (nothingHereBlock.length) {
-        diffFile.singleFileDiff(true, cb);
-      } else {
-        cb();
-      }
-    };
-
-    MergeRequestTabs.prototype.highlighSelectedLine = function() {
-      var $diffLine, diffLineTop, hashClassString, locationHash, navBarHeight;
-      $('.hll').removeClass('hll');
-      locationHash = window.location.hash;
-      if (locationHash !== '') {
-        dataLineString = '[data-line-code="' + locationHash.replace('#', '') + '"]';
-        $diffLine = $(locationHash + ":not(.match)", $('#diffs'));
-        if (!$diffLine.is('tr')) {
-          $diffLine = $('#diffs').find("td" + locationHash + ", td" + dataLineString);
-        } else {
-          $diffLine = $diffLine.find('td');
-        }
-        if ($diffLine.length) {
-          $diffLine.addClass('hll');
-          diffLineTop = $diffLine.offset().top;
-          return navBarHeight = $('.navbar-gitlab').outerHeight();
-        }
-      }
-    };
+      const urlPathname = gl.utils.parseUrlPathname(source);
 
-    MergeRequestTabs.prototype.loadBuilds = function(source) {
-      if (this.buildsLoaded) {
-        return;
-      }
-      return this._get({
-        url: source + ".json",
-        success: (function(_this) {
-          return function(data) {
-            document.querySelector("div#builds").innerHTML = data.html;
-            gl.utils.localTimeAgo($('.js-timeago', 'div#builds'));
-            _this.buildsLoaded = true;
-            if (!this.pipelines) this.pipelines = new gl.Pipelines();
-            return _this.scrollToElement("#builds");
-          };
-        })(this)
-      });
-    };
+      this.ajaxGet({
+        url: `${urlPathname}.json${location.search}`,
+        success: (data) => {
+          $('#diffs').html(data.html);
 
-    MergeRequestTabs.prototype.loadPipelines = function(source) {
-      if (this.pipelinesLoaded) {
-        return;
-      }
-      return this._get({
-        url: source + ".json",
-        success: function(data) {
-          $('#pipelines').html(data.html);
-          gl.utils.localTimeAgo($('.js-timeago', '#pipelines'));
-          this.pipelinesLoaded = true;
-          return this.scrollToElement("#pipelines");
-        }.bind(this)
+          if (typeof gl.diffNotesCompileComponents !== 'undefined') {
+            gl.diffNotesCompileComponents();
+          }
+
+          gl.utils.localTimeAgo($('.js-timeago', 'div#diffs'));
+          $('#diffs .js-syntax-highlight').syntaxHighlight();
+
+          if (this.diffViewType() === 'parallel' && this.isDiffAction(this.currentAction)) {
+            this.expandViewContainer();
+          }
+          this.diffsLoaded = true;
+
+          new gl.Diff();
+          this.scrollToElement('#diffs');
+        },
       });
-    };
+    }
 
     // Show or hide the loading spinner
     //
     // status - Boolean, true to show, false to hide
-    MergeRequestTabs.prototype.toggleLoading = function(status) {
-      return $('.mr-loading-status .loading').toggle(status);
-    };
-
-    MergeRequestTabs.prototype._get = function(options) {
-      var defaults;
-      defaults = {
-        beforeSend: (function(_this) {
-          return function() {
-            return _this.toggleLoading(true);
-          };
-        })(this),
-        complete: (function(_this) {
-          return function() {
-            return _this.toggleLoading(false);
-          };
-        })(this),
+    toggleLoading(status) {
+      $('.mr-loading-status .loading').toggle(status);
+    }
+
+    ajaxGet(options) {
+      const defaults = {
+        beforeSend: () => this.toggleLoading(true),
+        error: () => new Flash('An error occurred while fetching this tab.', 'alert'),
+        complete: () => this.toggleLoading(false),
         dataType: 'json',
-        type: 'GET'
+        type: 'GET',
       };
-      options = $.extend({}, defaults, options);
-      return $.ajax(options);
-    };
+      $.ajax($.extend({}, defaults, options));
+    }
 
-    MergeRequestTabs.prototype.diffViewType = function() {
+    diffViewType() {
       return $('.inline-parallel-buttons a.active').data('view-type');
-    };
+    }
 
-    MergeRequestTabs.prototype.isDiffAction = function(action) {
-      return action === 'diffs' || action === 'new/diffs'
-    };
+    isDiffAction(action) {
+      return action === 'diffs' || action === 'new/diffs';
+    }
 
-    MergeRequestTabs.prototype.expandViewContainer = function() {
-      var $wrapper = $('.content-wrapper .container-fluid');
+    expandViewContainer() {
+      const $wrapper = $('.content-wrapper .container-fluid');
       if (this.fixedLayoutPref === null) {
         this.fixedLayoutPref = $wrapper.hasClass('container-limited');
       }
       $wrapper.removeClass('container-limited');
-    };
+    }
 
-    MergeRequestTabs.prototype.resetViewContainer = function() {
+    resetViewContainer() {
       if (this.fixedLayoutPref !== null) {
         $('.content-wrapper .container-fluid')
           .toggleClass('container-limited', this.fixedLayoutPref);
       }
-    };
+    }
+
+    shrinkView() {
+      const $gutterIcon = $('.js-sidebar-toggle i:visible');
 
-    MergeRequestTabs.prototype.shrinkView = function() {
-      var $gutterIcon;
-      $gutterIcon = $('.js-sidebar-toggle i:visible');
-      return setTimeout(function() {
+      // Wait until listeners are set
+      setTimeout(() => {
+        // Only when sidebar is expanded
         if ($gutterIcon.is('.fa-angle-double-right')) {
-          return $gutterIcon.closest('a').trigger('click', [true]);
+          $gutterIcon.closest('a').trigger('click', [true]);
         }
-      // Wait until listeners are set
-      // Only when sidebar is expanded
       }, 0);
-    };
+    }
 
-    MergeRequestTabs.prototype.expandView = function() {
-      var $gutterIcon;
+    // Expand the issuable sidebar unless the user explicitly collapsed it
+    expandView() {
       if (Cookies.get('collapsed_gutter') === 'true') {
         return;
       }
-      $gutterIcon = $('.js-sidebar-toggle i:visible');
-      return setTimeout(function() {
+      const $gutterIcon = $('.js-sidebar-toggle i:visible');
+
+      // Wait until listeners are set
+      setTimeout(() => {
+        // Only when sidebar is collapsed
         if ($gutterIcon.is('.fa-angle-double-left')) {
-          return $gutterIcon.closest('a').trigger('click', [true]);
+          $gutterIcon.closest('a').trigger('click', [true]);
         }
       }, 0);
-    // Expand the issuable sidebar unless the user explicitly collapsed it
-    // Wait until listeners are set
-    // Only when sidebar is collapsed
-    };
+    }
 
-    MergeRequestTabs.prototype.initAffix = function () {
-      var $tabs = $('.js-tabs-affix');
+    initAffix() {
+      const $tabs = $('.js-tabs-affix');
 
       // Screen space on small screens is usually very sparse
       // So we dont affix the tabs on these
       if (Breakpoints.get().getBreakpointSize() === 'xs' || !$tabs.length) return;
 
-      var $diffTabs = $('#diff-notes-app'),
-        $fixedNav = $('.navbar-fixed-top'),
-        $layoutNav = $('.layout-nav');
+      const $diffTabs = $('#diff-notes-app');
 
       $tabs.off('affix.bs.affix affix-top.bs.affix')
         .affix({
           offset: {
-            top: function () {
-              var tabsTop = $diffTabs.offset().top - $tabs.height();
-              tabsTop = tabsTop - ($fixedNav.height() + $layoutNav.height());
-
-              return tabsTop;
-            }
-          }
-        }).on('affix.bs.affix', function () {
-          $diffTabs.css({
-            marginTop: $tabs.height()
-          });
-        }).on('affix-top.bs.affix', function () {
-          $diffTabs.css({
-            marginTop: ''
-          });
-        });
+            top: () => (
+              $diffTabs.offset().top - $tabs.height()
+            ),
+          },
+        })
+        .on('affix.bs.affix', () => $diffTabs.css({ marginTop: $tabs.height() }))
+        .on('affix-top.bs.affix', () => $diffTabs.css({ marginTop: '' }));
 
       // Fix bug when reloading the page already scrolling
       if ($tabs.hasClass('affix')) {
         $tabs.trigger('affix.bs.affix');
       }
-    };
-
-    return MergeRequestTabs;
-
-  })();
+    }
+  }
 
-}).call(this);
+  window.gl = window.gl || {};
+  window.gl.MergeRequestTabs = MergeRequestTabs;
+})();
diff --git a/app/assets/javascripts/merge_request_widget.js b/app/assets/javascripts/merge_request_widget.js
new file mode 100644
index 00000000000..0e2af3df071
--- /dev/null
+++ b/app/assets/javascripts/merge_request_widget.js
@@ -0,0 +1,296 @@
+/* eslint-disable max-len, no-var, func-names, space-before-function-paren, vars-on-top, comma-dangle, no-return-assign, consistent-return, no-param-reassign, one-var, one-var-declaration-per-line, quotes, prefer-template, no-else-return, prefer-arrow-callback, no-unused-vars, no-underscore-dangle, no-shadow, no-mixed-operators, camelcase, default-case, wrap-iife */
+/* global notify */
+/* global notifyPermissions */
+/* global merge_request_widget */
+
+import './smart_interval';
+import MiniPipelineGraph from './mini_pipeline_graph_dropdown';
+
+((global) => {
+  var indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i += 1) { if (i in this && this[i] === item) return i; } return -1; };
+
+  const DEPLOYMENT_TEMPLATE = `<div class="mr-widget-heading" id="<%- id %>">
+       <div class="ci_widget ci-success">
+         <%= ci_success_icon %>
+         <span>
+           Deployed to
+           <a href="<%- url %>" target="_blank" rel="noopener noreferrer" class="environment">
+             <%- name %>
+           </a>
+           <span class="js-environment-timeago" data-toggle="tooltip" data-placement="top" data-title="<%- deployed_at_formatted %>">
+             <%- deployed_at %>
+           </span>
+           <a class="js-environment-link" href="<%- external_url %>" target="_blank" rel="noopener noreferrer">
+             <i class="fa fa-external-link"></i>
+             View on <%- external_url_formatted %>
+           </a>
+         </span>
+         <span class="stop-env-container js-stop-env-link">
+          <a href="<%- stop_url %>" class="close-evn-link" data-method="post" rel="nofollow" data-confirm="Are you sure you want to stop this environment?">
+            <i class="fa fa-stop-circle-o"/>
+            Stop environment
+          </a>
+         </span>
+       </div>
+     </div>`;
+
+  global.MergeRequestWidget = (function() {
+    function MergeRequestWidget(opts) {
+      // Initialize MergeRequestWidget behavior
+      //
+      //   check_enable           - Boolean, whether to check automerge status
+      //   merge_check_url - String, URL to use to check automerge status
+      //   ci_status_url        - String, URL to use to check CI status
+      //
+      this.opts = opts;
+      this.$widgetBody = $('.mr-widget-body');
+      $('#modal_merge_info').modal({
+        show: false
+      });
+      this.clearEventListeners();
+      this.addEventListeners();
+      this.getCIStatus(false);
+      this.retrieveSuccessIcon();
+
+      this.initMiniPipelineGraph();
+
+      this.ciStatusInterval = new global.SmartInterval({
+        callback: this.getCIStatus.bind(this, true),
+        startingInterval: 10000,
+        maxInterval: 30000,
+        hiddenInterval: 120000,
+        incrementByFactorOf: 5000,
+      });
+      this.ciEnvironmentStatusInterval = new global.SmartInterval({
+        callback: this.getCIEnvironmentsStatus.bind(this),
+        startingInterval: 30000,
+        maxInterval: 120000,
+        hiddenInterval: 240000,
+        incrementByFactorOf: 15000,
+        immediateExecution: true,
+      });
+
+      notifyPermissions();
+    }
+
+    MergeRequestWidget.prototype.clearEventListeners = function() {
+      return $(document).off('DOMContentLoaded');
+    };
+
+    MergeRequestWidget.prototype.addEventListeners = function() {
+      var allowedPages;
+      allowedPages = ['show', 'commits', 'pipelines', 'changes'];
+      $(document).on('DOMContentLoaded', (function(_this) {
+        return function() {
+          var page;
+          page = $('body').data('page').split(':').last();
+          if (allowedPages.indexOf(page) === -1) {
+            return _this.clearEventListeners();
+          }
+        };
+      })(this));
+    };
+
+    MergeRequestWidget.prototype.retrieveSuccessIcon = function() {
+      const $ciSuccessIcon = $('.js-success-icon');
+      this.$ciSuccessIcon = $ciSuccessIcon.html();
+      $ciSuccessIcon.remove();
+    };
+
+    MergeRequestWidget.prototype.mergeInProgress = function(deleteSourceBranch) {
+      if (deleteSourceBranch == null) {
+        deleteSourceBranch = false;
+      }
+      return $.ajax({
+        type: 'GET',
+        url: $('.merge-request').data('url'),
+        success: (function(_this) {
+          return function(data) {
+            var callback, urlSuffix;
+            if (data.state === "merged") {
+              urlSuffix = deleteSourceBranch ? '?deleted_source_branch=true' : '';
+              return window.location.href = window.location.pathname + urlSuffix;
+            } else if (data.merge_error) {
+              return $('.mr-widget-body').html("<h4>" + data.merge_error + "</h4>");
+            } else {
+              callback = function() {
+                return merge_request_widget.mergeInProgress(deleteSourceBranch);
+              };
+              return setTimeout(callback, 2000);
+            }
+          };
+        })(this),
+        dataType: 'json'
+      });
+    };
+
+    MergeRequestWidget.prototype.cancelPolling = function () {
+      this.ciStatusInterval.cancel();
+      this.ciEnvironmentStatusInterval.cancel();
+    };
+
+    MergeRequestWidget.prototype.getMergeStatus = function() {
+      return $.get(this.opts.merge_check_url, (data) => {
+        var $html = $(data);
+        this.updateMergeButton(this.status, this.hasCi, $html);
+        $('.mr-widget-body').replaceWith($html.find('.mr-widget-body'));
+        $('.mr-widget-footer').replaceWith($html.find('.mr-widget-footer'));
+      });
+    };
+
+    MergeRequestWidget.prototype.ciLabelForStatus = function(status) {
+      switch (status) {
+        case 'success':
+          return 'passed';
+        case 'success_with_warnings':
+          return 'passed with warnings';
+        default:
+          return status;
+      }
+    };
+
+    MergeRequestWidget.prototype.getCIStatus = function(showNotification) {
+      var _this;
+      _this = this;
+      $('.ci-widget-fetching').show();
+      return $.getJSON(this.opts.ci_status_url, (function(_this) {
+        return function(data) {
+          var message, status, title;
+          _this.status = data.status;
+          _this.hasCi = data.has_ci;
+          _this.updateMergeButton(_this.status, _this.hasCi);
+          if (data.environments && data.environments.length) _this.renderEnvironments(data.environments);
+          if (data.status !== _this.opts.ci_status ||
+              data.sha !== _this.opts.ci_sha ||
+              data.pipeline !== _this.opts.ci_pipeline) {
+            _this.opts.ci_status = data.status;
+            _this.showCIStatus(data.status);
+            if (data.coverage) {
+              _this.showCICoverage(data.coverage);
+            }
+            if (data.pipeline) {
+              _this.opts.ci_pipeline = data.pipeline;
+              _this.updatePipelineUrls(data.pipeline);
+            }
+            if (data.sha) {
+              _this.opts.ci_sha = data.sha;
+              _this.updateCommitUrls(data.sha);
+            }
+            if (showNotification && data.status) {
+              status = _this.ciLabelForStatus(data.status);
+              if (status === "preparing") {
+                title = _this.opts.ci_title.preparing;
+                status = status.charAt(0).toUpperCase() + status.slice(1);
+                message = _this.opts.ci_message.preparing.replace('{{status}}', status);
+              } else {
+                title = _this.opts.ci_title.normal;
+                message = _this.opts.ci_message.normal.replace('{{status}}', status);
+              }
+              title = title.replace('{{status}}', status);
+              message = message.replace('{{sha}}', data.sha);
+              message = message.replace('{{title}}', data.title);
+              notify(title, message, _this.opts.gitlab_icon, function() {
+                this.close();
+              });
+            }
+          }
+        };
+      })(this));
+    };
+
+    MergeRequestWidget.prototype.getCIEnvironmentsStatus = function() {
+      $.getJSON(this.opts.ci_environments_status_url, (environments) => {
+        if (environments && environments.length) this.renderEnvironments(environments);
+      });
+    };
+
+    MergeRequestWidget.prototype.renderEnvironments = function(environments) {
+      for (let i = 0; i < environments.length; i += 1) {
+        const environment = environments[i];
+        if ($(`.mr-state-widget #${environment.id}`).length) return;
+        const $template = $(DEPLOYMENT_TEMPLATE);
+        if (!environment.external_url || !environment.external_url_formatted) $('.js-environment-link', $template).remove();
+
+        if (!environment.stop_url) {
+          $('.js-stop-env-link', $template).remove();
+        }
+
+        if (environment.deployed_at && environment.deployed_at_formatted) {
+          environment.deployed_at = gl.utils.getTimeago().format(environment.deployed_at, 'gl_en') + '.';
+        } else {
+          $('.js-environment-timeago', $template).remove();
+          environment.name += '.';
+        }
+        environment.ci_success_icon = this.$ciSuccessIcon;
+        const templateString = _.unescape($template[0].outerHTML);
+        const template = _.template(templateString)(environment);
+        this.$widgetBody.before(template);
+      }
+    };
+
+    MergeRequestWidget.prototype.showCIStatus = function(state) {
+      var allowed_states;
+      if (state == null) {
+        return;
+      }
+      $('.ci_widget').hide();
+      $('.ci_widget.ci-' + state).show();
+
+      this.initMiniPipelineGraph();
+    };
+
+    MergeRequestWidget.prototype.showCICoverage = function(coverage) {
+      var text = `Coverage ${coverage}%`;
+      return $('.ci_widget:visible .ci-coverage').text(text);
+    };
+
+    MergeRequestWidget.prototype.updateMergeButton = function(state, hasCi, $html) {
+      const allowed_states = ["failed", "canceled", "running", "pending", "success", "success_with_warnings", "skipped", "not_found"];
+      let stateClass = 'btn-danger';
+      if (!hasCi) {
+        stateClass = 'btn-create';
+      } else if (indexOf.call(allowed_states, state) !== -1) {
+        switch (state) {
+          case "failed":
+          case "canceled":
+          case "not_found":
+            stateClass = 'btn-danger';
+            break;
+          case "running":
+            stateClass = 'btn-info';
+            break;
+          case "success":
+          case "success_with_warnings":
+            stateClass = 'btn-create';
+        }
+      } else {
+        $('.ci_widget.ci-error').show();
+        stateClass = 'btn-danger';
+      }
+
+      this.setMergeButtonClass(stateClass, $html);
+    };
+
+    MergeRequestWidget.prototype.setMergeButtonClass = function(css_class, $html = $('.mr-state-widget')) {
+      return $html.find('.js-merge-button').removeClass('btn-danger btn-info btn-create').addClass(css_class);
+    };
+
+    MergeRequestWidget.prototype.updatePipelineUrls = function(id) {
+      const pipelineUrl = this.opts.pipeline_path;
+      $('.pipeline').text(`#${id}`).attr('href', [pipelineUrl, id].join('/'));
+    };
+
+    MergeRequestWidget.prototype.updateCommitUrls = function(id) {
+      const commitsUrl = this.opts.commits_path;
+      $('.js-commit-link').text(`#${id}`).attr('href', [commitsUrl, id].join('/'));
+    };
+
+    MergeRequestWidget.prototype.initMiniPipelineGraph = function() {
+      new MiniPipelineGraph({
+        container: '.js-pipeline-inline-mr-widget-graph:visible',
+      }).bindEvents();
+    };
+
+    return MergeRequestWidget;
+  })();
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/merge_request_widget.js.es6 b/app/assets/javascripts/merge_request_widget.js.es6
deleted file mode 100644
index 3a2fe454b68..00000000000
--- a/app/assets/javascripts/merge_request_widget.js.es6
+++ /dev/null
@@ -1,273 +0,0 @@
-/* eslint-disable */
- ((global) => {
-  var indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
-
-  const DEPLOYMENT_TEMPLATE = `<div class="mr-widget-heading" id="<%- id %>">
-       <div class="ci_widget ci-success">
-         <%= ci_success_icon %>
-         <span>
-           Deployed to
-           <a href="<%- url %>" target="_blank" class="environment">
-             <%- name %>
-           </a>
-           <span class="js-environment-timeago" data-toggle="tooltip" data-placement="top" data-title="<%- deployed_at_formatted %>">
-             <%- deployed_at %>
-           </span>
-           <a class="js-environment-link" href="<%- external_url %>" target="_blank">
-             <i class="fa fa-external-link"></i>
-             View on <%- external_url_formatted %>
-           </a>
-         </span>
-         <span class="stop-env-container js-stop-env-link">
-          <a href="<%- stop_url %>" class="close-evn-link" data-method="post" rel="nofollow" data-confirm="Are you sure you want to stop this environment?">
-            <i class="fa fa-stop-circle-o"/>
-            Stop environment
-          </a>
-         </span>
-       </div>
-     </div>`;
-
-   global.MergeRequestWidget = (function() {
-    function MergeRequestWidget(opts) {
-      // Initialize MergeRequestWidget behavior
-      //
-      //   check_enable           - Boolean, whether to check automerge status
-      //   merge_check_url - String, URL to use to check automerge status
-      //   ci_status_url        - String, URL to use to check CI status
-      //
-      this.opts = opts;
-      this.$widgetBody = $('.mr-widget-body');
-      $('#modal_merge_info').modal({
-        show: false
-      });
-      this.firstCICheck = true;
-      this.readyForCICheck = false;
-      this.readyForCIEnvironmentCheck = false;
-      this.cancel = false;
-      clearInterval(this.fetchBuildStatusInterval);
-      clearInterval(this.fetchBuildEnvironmentStatusInterval);
-      this.clearEventListeners();
-      this.addEventListeners();
-      this.getCIStatus(false);
-      this.getCIEnvironmentsStatus();
-      this.retrieveSuccessIcon();
-      this.pollCIStatus();
-      this.pollCIEnvironmentsStatus();
-      notifyPermissions();
-    }
-
-    MergeRequestWidget.prototype.clearEventListeners = function() {
-      return $(document).off('page:change.merge_request');
-    };
-
-    MergeRequestWidget.prototype.cancelPolling = function() {
-      return this.cancel = true;
-    };
-
-    MergeRequestWidget.prototype.addEventListeners = function() {
-      var allowedPages;
-      allowedPages = ['show', 'commits', 'builds', 'pipelines', 'changes'];
-      return $(document).on('page:change.merge_request', (function(_this) {
-        return function() {
-          var page;
-          page = $('body').data('page').split(':').last();
-          if (allowedPages.indexOf(page) < 0) {
-            clearInterval(_this.fetchBuildStatusInterval);
-            clearInterval(_this.fetchBuildEnvironmentStatusInterval);
-            _this.cancelPolling();
-            return _this.clearEventListeners();
-          }
-        };
-      })(this));
-    };
-
-    MergeRequestWidget.prototype.retrieveSuccessIcon = function() {
-       const $ciSuccessIcon = $('.js-success-icon');
-       this.$ciSuccessIcon = $ciSuccessIcon.html();
-       $ciSuccessIcon.remove();
-     }
-
-    MergeRequestWidget.prototype.mergeInProgress = function(deleteSourceBranch) {
-      if (deleteSourceBranch == null) {
-        deleteSourceBranch = false;
-      }
-      return $.ajax({
-        type: 'GET',
-        url: $('.merge-request').data('url'),
-        success: (function(_this) {
-          return function(data) {
-            var callback, urlSuffix;
-            if (data.state === "merged") {
-              urlSuffix = deleteSourceBranch ? '?deleted_source_branch=true' : '';
-              return window.location.href = window.location.pathname + urlSuffix;
-            } else if (data.merge_error) {
-              return this.$widgetBody.html("<h4>" + data.merge_error + "</h4>");
-            } else {
-              callback = function() {
-                return merge_request_widget.mergeInProgress(deleteSourceBranch);
-              };
-              return setTimeout(callback, 2000);
-            }
-          };
-        })(this),
-        dataType: 'json'
-      });
-    };
-
-    MergeRequestWidget.prototype.getMergeStatus = function() {
-      return $.get(this.opts.merge_check_url, function(data) {
-        return $('.mr-state-widget').replaceWith(data);
-      });
-    };
-
-    MergeRequestWidget.prototype.ciLabelForStatus = function(status) {
-      switch (status) {
-        case 'success':
-          return 'passed';
-        case 'success_with_warnings':
-          return 'passed with warnings';
-        default:
-          return status;
-      }
-    };
-
-    MergeRequestWidget.prototype.pollCIStatus = function() {
-      return this.fetchBuildStatusInterval = setInterval(((function(_this) {
-        return function() {
-          if (!_this.readyForCICheck) {
-            return;
-          }
-          _this.getCIStatus(true);
-          return _this.readyForCICheck = false;
-        };
-      })(this)), 10000);
-    };
-
-    MergeRequestWidget.prototype.getCIStatus = function(showNotification) {
-      var _this;
-      _this = this;
-      $('.ci-widget-fetching').show();
-      return $.getJSON(this.opts.ci_status_url, (function(_this) {
-        return function(data) {
-          var message, status, title;
-          if (_this.cancel) {
-            return;
-          }
-          _this.readyForCICheck = true;
-          if (data.status === '') {
-            return;
-          }
-          if (data.environments && data.environments.length) _this.renderEnvironments(data.environments);
-          if (_this.firstCICheck || data.status !== _this.opts.ci_status && (data.status != null)) {
-            _this.opts.ci_status = data.status;
-            _this.showCIStatus(data.status);
-            if (data.coverage) {
-              _this.showCICoverage(data.coverage);
-            }
-            // The first check should only update the UI, a notification
-            // should only be displayed on status changes
-            if (showNotification && !_this.firstCICheck) {
-              status = _this.ciLabelForStatus(data.status);
-              if (status === "preparing") {
-                title = _this.opts.ci_title.preparing;
-                status = status.charAt(0).toUpperCase() + status.slice(1);
-                message = _this.opts.ci_message.preparing.replace('{{status}}', status);
-              } else {
-                title = _this.opts.ci_title.normal;
-                message = _this.opts.ci_message.normal.replace('{{status}}', status);
-              }
-              title = title.replace('{{status}}', status);
-              message = message.replace('{{sha}}', data.sha);
-              message = message.replace('{{title}}', data.title);
-              notify(title, message, _this.opts.gitlab_icon, function() {
-                this.close();
-                return Turbolinks.visit(_this.opts.builds_path);
-              });
-            }
-            return _this.firstCICheck = false;
-          }
-        };
-      })(this));
-    };
-
-    MergeRequestWidget.prototype.pollCIEnvironmentsStatus = function() {
-      this.fetchBuildEnvironmentStatusInterval = setInterval(() => {
-        if (!this.readyForCIEnvironmentCheck) return;
-        this.getCIEnvironmentsStatus();
-        this.readyForCIEnvironmentCheck = false;
-      }, 300000);
-    };
-
-    MergeRequestWidget.prototype.getCIEnvironmentsStatus = function() {
-      $.getJSON(this.opts.ci_environments_status_url, (environments) => {
-        if (this.cancel) return;
-        this.readyForCIEnvironmentCheck = true;
-        if (environments && environments.length) this.renderEnvironments(environments);
-      });
-    };
-
-    MergeRequestWidget.prototype.renderEnvironments = function(environments) {
-      for (let i = 0; i < environments.length; i++) {
-        const environment = environments[i];
-        if ($(`.mr-state-widget #${ environment.id }`).length) return;
-        const $template = $(DEPLOYMENT_TEMPLATE);
-        if (!environment.external_url || !environment.external_url_formatted) $('.js-environment-link', $template).remove();
-        
-        if (!environment.stop_url) {
-          $('.js-stop-env-link', $template).remove();
-        }
-        
-        if (environment.deployed_at && environment.deployed_at_formatted) {
-          environment.deployed_at = $.timeago(environment.deployed_at) + '.';
-        } else {
-          $('.js-environment-timeago', $template).remove();
-          environment.name += '.';
-        }
-        environment.ci_success_icon = this.$ciSuccessIcon;
-        const templateString = _.unescape($template[0].outerHTML);
-        const template = _.template(templateString)(environment)
-        this.$widgetBody.before(template);
-      }
-     };
-
-    MergeRequestWidget.prototype.showCIStatus = function(state) {
-      var allowed_states;
-      if (state == null) {
-        return;
-      }
-      $('.ci_widget').hide();
-      allowed_states = ["failed", "canceled", "running", "pending", "success", "success_with_warnings", "skipped", "not_found"];
-      if (indexOf.call(allowed_states, state) >= 0) {
-        $('.ci_widget.ci-' + state).show();
-        switch (state) {
-          case "failed":
-          case "canceled":
-          case "not_found":
-            return this.setMergeButtonClass('btn-danger');
-          case "running":
-            return this.setMergeButtonClass('btn-warning');
-          case "success":
-          case "success_with_warnings":
-            return this.setMergeButtonClass('btn-create');
-        }
-      } else {
-        $('.ci_widget.ci-error').show();
-        return this.setMergeButtonClass('btn-danger');
-      }
-    };
-
-    MergeRequestWidget.prototype.showCICoverage = function(coverage) {
-      var text;
-      text = 'Coverage ' + coverage + '%';
-      return $('.ci_widget:visible .ci-coverage').text(text);
-    };
-
-    MergeRequestWidget.prototype.setMergeButtonClass = function(css_class) {
-      return $('.js-merge-button,.accept-action .dropdown-toggle').removeClass('btn-danger btn-warning btn-create').addClass(css_class);
-    };
-
-    return MergeRequestWidget;
-
-  })();
-
- })(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/merge_request_widget/ci_bundle.js b/app/assets/javascripts/merge_request_widget/ci_bundle.js
new file mode 100644
index 00000000000..21d7c3e168e
--- /dev/null
+++ b/app/assets/javascripts/merge_request_widget/ci_bundle.js
@@ -0,0 +1,53 @@
+/* global merge_request_widget */
+
+(() => {
+  $(() => {
+    /* TODO: This needs a better home, or should be refactored. It was previously contained
+     * in a script tag in app/views/projects/merge_requests/widget/open/_accept.html.haml,
+     * but Vue chokes on script tags and prevents their execution. So it was moved here
+     * temporarily.
+     * */
+
+    $(document)
+    .off('ajax:send', '.accept-mr-form')
+    .on('ajax:send', '.accept-mr-form', () => {
+      $('.accept-mr-form :input').disable();
+    });
+
+    $(document)
+    .off('click', '.accept-merge-request')
+    .on('click', '.accept-merge-request', () => {
+      $('.js-merge-button, .js-merge-when-pipeline-succeeds-button').html('<i class="fa fa-spinner fa-spin"></i> Merge in progress');
+    });
+
+    $(document)
+    .off('click', '.merge-when-pipeline-succeeds')
+    .on('click', '.merge-when-pipeline-succeeds', () => {
+      $('#merge_when_pipeline_succeeds').val('1');
+    });
+
+    $(document)
+    .off('click', '.js-merge-dropdown a')
+    .on('click', '.js-merge-dropdown a', (e) => {
+      e.preventDefault();
+      $(e.target).closest('form').submit();
+    });
+    if ($('.rebase-in-progress').length) {
+      merge_request_widget.rebaseInProgress();
+    } else if ($('.rebase-mr-form').length) {
+      $(document)
+      .off('ajax:send', '.rebase-mr-form')
+      .on('ajax:send', '.rebase-mr-form', () => {
+        $('.rebase-mr-form :input').disable();
+      });
+
+      $(document)
+      .off('click', '.js-rebase-button')
+      .on('click', '.js-rebase-button', () => {
+        $('.js-rebase-button').html("<i class='fa fa-spinner fa-spin'></i> Rebase in progress");
+      });
+    } else {
+      setTimeout(() => merge_request_widget.getMergeStatus(), 200);
+    }
+  });
+})();
diff --git a/app/assets/javascripts/merged_buttons.js b/app/assets/javascripts/merged_buttons.js
index 7ad86d8c084..9548a98f499 100644
--- a/app/assets/javascripts/merged_buttons.js
+++ b/app/assets/javascripts/merged_buttons.js
@@ -1,6 +1,7 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, max-len */
+
 (function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
 
   this.MergedButtons = (function() {
     function MergedButtons() {
@@ -40,7 +41,5 @@
     };
 
     return MergedButtons;
-
   })();
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/milestone.js b/app/assets/javascripts/milestone.js
index 9299c96e8ea..38c673e8907 100644
--- a/app/assets/javascripts/milestone.js
+++ b/app/assets/javascripts/milestone.js
@@ -1,4 +1,7 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-use-before-define, camelcase, quotes, object-shorthand, no-shadow, no-unused-vars, comma-dangle, no-var, prefer-template, no-underscore-dangle, consistent-return, one-var, one-var-declaration-per-line, default-case, prefer-arrow-callback, max-len */
+/* global Flash */
+/* global Sortable */
+
 (function() {
   this.Milestone = (function() {
     Milestone.updateIssue = function(li, issue_url, data) {
@@ -6,11 +9,9 @@
         type: "PUT",
         url: issue_url,
         data: data,
-        success: (function(_this) {
-          return function(_data) {
-            return _this.successCallback(_data, li);
-          };
-        })(this),
+        success: function(_data) {
+          return Milestone.successCallback(_data, li);
+        },
         error: function(data) {
           return new Flash("Issue update failed", 'alert');
         },
@@ -25,11 +26,9 @@
         type: "PUT",
         url: sort_issues_url,
         data: data,
-        success: (function(_this) {
-          return function(_data) {
-            return _this.successCallback(_data);
-          };
-        })(this),
+        success: function(_data) {
+          return Milestone.successCallback(_data);
+        },
         error: function() {
           return new Flash("Issues update failed", 'alert');
         },
@@ -44,11 +43,9 @@
         type: "PUT",
         url: sort_mr_url,
         data: data,
-        success: (function(_this) {
-          return function(_data) {
-            return _this.successCallback(_data);
-          };
-        })(this),
+        success: function(_data) {
+          return Milestone.successCallback(_data);
+        },
         error: function(data) {
           return new Flash("Issue update failed", 'alert');
         },
@@ -61,11 +58,9 @@
         type: "PUT",
         url: merge_request_url,
         data: data,
-        success: (function(_this) {
-          return function(_data) {
-            return _this.successCallback(_data, li);
-          };
-        })(this),
+        success: function(_data) {
+          return Milestone.successCallback(_data, li);
+        },
         error: function(data) {
           return new Flash("Issue update failed", 'alert');
         },
@@ -79,65 +74,29 @@
         img_tag = $('<img/>');
         img_tag.attr('src', data.assignee.avatar_url);
         img_tag.addClass('avatar s16');
-        $(element).find('.assignee-icon').html(img_tag);
+        $(element).find('.assignee-icon img').replaceWith(img_tag);
       } else {
-        $(element).find('.assignee-icon').html('');
+        $(element).find('.assignee-icon').empty();
       }
-      return $(element).effect('highlight');
     };
 
     function Milestone() {
       var oldMouseStart;
-      oldMouseStart = $.ui.sortable.prototype._mouseStart;
-      $.ui.sortable.prototype._mouseStart = function(event, overrideHandle, noActivation) {
-        this._trigger("beforeStart", event, this._uiHash());
-        return oldMouseStart.apply(this, [event, overrideHandle, noActivation]);
-      };
       this.bindIssuesSorting();
       this.bindMergeRequestSorting();
       this.bindTabsSwitching();
     }
 
     Milestone.prototype.bindIssuesSorting = function() {
-      return $("#issues-list-unassigned, #issues-list-ongoing, #issues-list-closed").sortable({
-        connectWith: ".issues-sortable-list",
-        dropOnEmpty: true,
-        items: "li:not(.ui-sort-disabled)",
-        beforeStart: function(event, ui) {
-          return $(".issues-sortable-list").css("min-height", ui.item.outerHeight());
-        },
-        stop: function(event, ui) {
-          return $(".issues-sortable-list").css("min-height", "0px");
-        },
-        update: function(event, ui) {
-          var data;
-          // Prevents sorting from container which element has been removed.
-          if ($(this).find(ui.item).length > 0) {
-            data = $(this).sortable("serialize");
-            return Milestone.sortIssues(data);
-          }
-        },
-        receive: function(event, ui) {
-          var data, issue_id, issue_url, new_state;
-          new_state = $(this).data('state');
-          issue_id = ui.item.data('iid');
-          issue_url = ui.item.data('url');
-          data = (function() {
-            switch (new_state) {
-              case 'ongoing':
-                return "issue[assignee_id]=" + gon.current_user_id;
-              case 'unassigned':
-                return "issue[assignee_id]=";
-              case 'closed':
-                return "issue[state_event]=close";
-            }
-          })();
-          if ($(ui.sender).data('state') === "closed") {
-            data += "&issue[state_event]=reopen";
-          }
-          return Milestone.updateIssue(ui.item, issue_url, data);
-        }
-      }).disableSelection();
+      $('#issues-list-unassigned, #issues-list-ongoing, #issues-list-closed').each(function (i, el) {
+        this.createSortable(el, {
+          group: 'issue-list',
+          listEls: $('.issues-sortable-list'),
+          fieldName: 'issue',
+          sortCallback: Milestone.sortIssues,
+          updateCallback: Milestone.updateIssue,
+        });
+      }.bind(this));
     };
 
     Milestone.prototype.bindTabsSwitching = function() {
@@ -152,46 +111,64 @@
     };
 
     Milestone.prototype.bindMergeRequestSorting = function() {
-      return $("#merge_requests-list-unassigned, #merge_requests-list-ongoing, #merge_requests-list-closed").sortable({
-        connectWith: ".merge_requests-sortable-list",
-        dropOnEmpty: true,
-        items: "li:not(.ui-sort-disabled)",
-        beforeStart: function(event, ui) {
-          return $(".merge_requests-sortable-list").css("min-height", ui.item.outerHeight());
+      $("#merge_requests-list-unassigned, #merge_requests-list-ongoing, #merge_requests-list-closed").each(function (i, el) {
+        this.createSortable(el, {
+          group: 'merge-request-list',
+          listEls: $(".merge_requests-sortable-list:not(#merge_requests-list-merged)"),
+          fieldName: 'merge_request',
+          sortCallback: Milestone.sortMergeRequests,
+          updateCallback: Milestone.updateMergeRequest,
+        });
+      }.bind(this));
+    };
+
+    Milestone.prototype.createSortable = function(el, opts) {
+      return Sortable.create(el, {
+        group: opts.group,
+        filter: '.is-disabled',
+        forceFallback: true,
+        onStart: function(e) {
+          opts.listEls.css('min-height', e.item.offsetHeight);
         },
-        stop: function(event, ui) {
-          return $(".merge_requests-sortable-list").css("min-height", "0px");
+        onEnd: function () {
+          opts.listEls.css("min-height", "0px");
         },
-        update: function(event, ui) {
-          var data;
-          data = $(this).sortable("serialize");
-          return Milestone.sortMergeRequests(data);
+        onUpdate: function(e) {
+          var ids = this.toArray(),
+            data;
+
+          if (ids.length) {
+            data = ids.map(function(id) {
+              return 'sortable_' + opts.fieldName + '[]=' + id;
+            }).join('&');
+
+            opts.sortCallback(data);
+          }
         },
-        receive: function(event, ui) {
-          var data, merge_request_id, merge_request_url, new_state;
-          new_state = $(this).data('state');
-          merge_request_id = ui.item.data('iid');
-          merge_request_url = ui.item.data('url');
+        onAdd: function (e) {
+          var data, issuableId, issuableUrl, newState;
+          newState = e.to.dataset.state;
+          issuableUrl = e.item.dataset.url;
           data = (function() {
-            switch (new_state) {
+            switch (newState) {
               case 'ongoing':
-                return "merge_request[assignee_id]=" + gon.current_user_id;
+                return opts.fieldName + '[assignee_id]=' + gon.current_user_id;
               case 'unassigned':
-                return "merge_request[assignee_id]=";
+                return opts.fieldName + '[assignee_id]=';
               case 'closed':
-                return "merge_request[state_event]=close";
+                return opts.fieldName + '[state_event]=close';
             }
           })();
-          if ($(ui.sender).data('state') === "closed") {
-            data += "&merge_request[state_event]=reopen";
+          if (e.from.dataset.state === 'closed') {
+            data += '&' + opts.fieldName + '[state_event]=reopen';
           }
-          return Milestone.updateMergeRequest(ui.item, merge_request_url, data);
+
+          opts.updateCallback(e.item, issuableUrl, data);
+          this.options.onUpdate.call(this, e);
         }
-      }).disableSelection();
+      });
     };
 
     return Milestone;
-
   })();
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/milestone_select.js b/app/assets/javascripts/milestone_select.js
index c909b53dc21..ac4fad88fe5 100644
--- a/app/assets/javascripts/milestone_select.js
+++ b/app/assets/javascripts/milestone_select.js
@@ -1,14 +1,26 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-underscore-dangle, prefer-arrow-callback, max-len, one-var, one-var-declaration-per-line, no-unused-vars, object-shorthand, comma-dangle, no-else-return, no-self-compare, consistent-return, no-param-reassign, no-shadow */
+/* global Issuable */
+/* global ListMilestone */
+
+import Vue from 'vue';
+
 (function() {
   this.MilestoneSelect = (function() {
-    function MilestoneSelect(currentProject) {
-      var _this;
+    function MilestoneSelect(currentProject, els) {
+      var _this, $els;
       if (currentProject != null) {
         _this = this;
         this.currentProject = JSON.parse(currentProject);
       }
-      $('.js-milestone-select').each(function(i, dropdown) {
-        var $block, $dropdown, $loading, $selectbox, $sidebarCollapsedValue, $value, abilityName, collapsedSidebarLabelTemplate, defaultLabel, issuableId, issueUpdateURL, milestoneLinkNoneTemplate, milestoneLinkTemplate, milestonesUrl, projectId, selectedMilestone, showAny, showNo, showUpcoming, useId, showMenuAbove;
+
+      $els = $(els);
+
+      if (!els) {
+        $els = $('.js-milestone-select');
+      }
+
+      $els.each(function(i, dropdown) {
+        var $block, $dropdown, $loading, $selectbox, $sidebarCollapsedValue, $value, abilityName, collapsedSidebarLabelTemplate, defaultLabel, issuableId, issueUpdateURL, milestoneLinkNoneTemplate, milestoneLinkTemplate, milestonesUrl, projectId, selectedMilestone, showAny, showNo, showUpcoming, showStarted, useId, showMenuAbove;
         $dropdown = $(dropdown);
         projectId = $dropdown.data('project-id');
         milestonesUrl = $dropdown.data('milestones');
@@ -18,6 +30,7 @@
         showAny = $dropdown.data('show-any');
         showMenuAbove = $dropdown.data('showMenuAbove');
         showUpcoming = $dropdown.data('show-upcoming');
+        showStarted = $dropdown.data('show-started');
         useId = $dropdown.data('use-id');
         defaultLabel = $dropdown.data('default-label');
         issuableId = $dropdown.data('issuable-id');
@@ -28,7 +41,7 @@
         $value = $block.find('.value');
         $loading = $block.find('.block-loading').fadeOut();
         if (issueUpdateURL) {
-          milestoneLinkTemplate = _.template('<a href="/<%- namespace %>/<%- path %>/milestones/<%- iid %>" class="bold has-tooltip" data-container="body" title="<%- remaining %>"><%- title %></a>');
+          milestoneLinkTemplate = _.template('<a href="/<%- full_path %>/milestones/<%- iid %>" class="bold has-tooltip" data-container="body" title="<%- remaining %>"><%- title %></a>');
           milestoneLinkNoneTemplate = '<span class="no-value">None</span>';
           collapsedSidebarLabelTemplate = _.template('<span class="has-tooltip" data-container="body" title="<%- remaining %>" data-placement="left"> <%- title %> </span>');
         }
@@ -60,6 +73,13 @@
                   title: 'Upcoming'
                 });
               }
+              if (showStarted) {
+                extraOptions.push({
+                  id: -3,
+                  name: '#started',
+                  title: 'Started'
+                });
+              }
               if (extraOptions.length) {
                 extraOptions.push('divider');
               }
@@ -104,7 +124,7 @@
           },
           vue: $dropdown.hasClass('js-issue-board-sidebar'),
           clicked: function(selected, $el, e) {
-            var data, isIssueIndex, isMRIndex, page;
+            var data, isIssueIndex, isMRIndex, page, boardsStore;
             page = $('body').data('page');
             isIssueIndex = page === 'projects:issues:index';
             isMRIndex = (page === page && page === 'projects:merge_requests:index');
@@ -112,9 +132,13 @@
               e.preventDefault();
               return;
             }
-            if ($('html').hasClass('issue-boards-page') && !$dropdown.hasClass('js-issue-board-sidebar')) {
-              gl.issueBoards.BoardsStore.state.filters[$dropdown.data('field-name')] = selected.name;
-              gl.issueBoards.BoardsStore.updateFiltersUrl();
+
+            if ($dropdown.closest('.add-issues-modal').length) {
+              boardsStore = gl.issueBoards.ModalStore.store.filter;
+            }
+
+            if (boardsStore) {
+              boardsStore[$dropdown.data('field-name')] = selected.name;
               e.preventDefault();
             } else if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) {
               if (selected.name != null) {
@@ -136,7 +160,7 @@
               }
 
               $dropdown.trigger('loading.gl.dropdown');
-              $loading.fadeIn();
+              $loading.removeClass('hidden').fadeIn();
 
               gl.issueBoards.BoardsStore.detail.issue.update($dropdown.attr('data-issue-update'))
                 .then(function () {
@@ -148,7 +172,7 @@
               data = {};
               data[abilityName] = {};
               data[abilityName].milestone_id = selected != null ? selected : null;
-              $loading.fadeIn();
+              $loading.removeClass('hidden').fadeIn();
               $dropdown.trigger('loading.gl.dropdown');
               return $.ajax({
                 type: 'PUT',
@@ -160,9 +184,8 @@
                 $selectbox.hide();
                 $value.css('display', '');
                 if (data.milestone != null) {
-                  data.milestone.namespace = _this.currentProject.namespace;
-                  data.milestone.path = _this.currentProject.path;
-                  data.milestone.remaining = $.timefor(data.milestone.due_date);
+                  data.milestone.full_path = _this.currentProject.full_path;
+                  data.milestone.remaining = gl.utils.timeFor(data.milestone.due_date);
                   $value.html(milestoneLinkTemplate(data.milestone));
                   return $sidebarCollapsedValue.find('span').html(collapsedSidebarLabelTemplate(data.milestone));
                 } else {
@@ -177,7 +200,5 @@
     }
 
     return MilestoneSelect;
-
   })();
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/mini_pipeline_graph_dropdown.js b/app/assets/javascripts/mini_pipeline_graph_dropdown.js
new file mode 100644
index 00000000000..9c58c465001
--- /dev/null
+++ b/app/assets/javascripts/mini_pipeline_graph_dropdown.js
@@ -0,0 +1,110 @@
+/* eslint-disable no-new */
+/* global Flash */
+
+/**
+ * In each pipelines table we have a mini pipeline graph for each pipeline.
+ *
+ * When we click in a pipeline stage, we need to make an API call to get the
+ * builds list to render in a dropdown.
+ *
+ * The container should be the table element.
+ *
+ * The stage icon clicked needs to have the following HTML structure:
+ * <div class="dropdown">
+ *   <button class="dropdown js-builds-dropdown-button" data-toggle="dropdown"></button>
+ *   <div class="js-builds-dropdown-container dropdown-menu"></div>
+ * </div>
+ */
+
+export default class MiniPipelineGraph {
+  constructor(opts = {}) {
+    this.container = opts.container || '';
+    this.dropdownListSelector = '.js-builds-dropdown-container';
+    this.getBuildsList = this.getBuildsList.bind(this);
+  }
+
+  /**
+   * Adds the event listener when the dropdown is opened.
+   * All dropdown events are fired at the .dropdown-menu's parent element.
+   */
+  bindEvents() {
+    $(document).off('shown.bs.dropdown', this.container).on('shown.bs.dropdown', this.container, this.getBuildsList);
+  }
+
+  /**
+   * When the user right clicks or cmd/ctrl + click in the job name
+   * the dropdown should not be closed and the link should open in another tab,
+   * so we stop propagation of the click event inside the dropdown.
+   *
+   * Since this component is rendered multiple times per page we need to guarantee we only
+   * target the click event of this component.
+   */
+  stopDropdownClickPropagation() {
+    $(document).on(
+      'click',
+      `${this.container} .js-builds-dropdown-list a.mini-pipeline-graph-dropdown-item`,
+      (e) => {
+        e.stopPropagation();
+      },
+    );
+  }
+
+  /**
+   * For the clicked stage, renders the given data in the dropdown list.
+   *
+   * @param  {HTMLElement} stageContainer
+   * @param  {Object} data
+   */
+  renderBuildsList(stageContainer, data) {
+    const dropdownContainer = stageContainer.parentElement.querySelector(
+      `${this.dropdownListSelector} .js-builds-dropdown-list`,
+    );
+
+    dropdownContainer.innerHTML = data;
+  }
+
+  /**
+   * For the clicked stage, gets the list of builds.
+   *
+   * All dropdown events have a relatedTarget property,
+   * whose value is the toggling anchor element.
+   *
+   * @param  {Object} e bootstrap dropdown event
+   * @return {Promise}
+   */
+  getBuildsList(e) {
+    const button = e.relatedTarget;
+    const endpoint = button.dataset.stageEndpoint;
+
+    return $.ajax({
+      dataType: 'json',
+      type: 'GET',
+      url: endpoint,
+      beforeSend: () => {
+        this.renderBuildsList(button, '');
+        this.toggleLoading(button);
+      },
+      success: (data) => {
+        this.toggleLoading(button);
+        this.renderBuildsList(button, data.html);
+        this.stopDropdownClickPropagation();
+      },
+      error: () => {
+        this.toggleLoading(button);
+        new Flash('An error occurred while fetching the builds.', 'alert');
+      },
+    });
+  }
+
+  /**
+   * Toggles the visibility of the loading icon.
+   *
+   * @param  {HTMLElement} stageContainer
+   * @return {type}
+   */
+  toggleLoading(stageContainer) {
+    stageContainer.parentElement.querySelector(
+      `${this.dropdownListSelector} .js-builds-dropdown-loading`,
+    ).classList.toggle('hidden');
+  }
+}
diff --git a/app/assets/javascripts/monitoring/monitoring_bundle.js b/app/assets/javascripts/monitoring/monitoring_bundle.js
new file mode 100644
index 00000000000..b3ce9310417
--- /dev/null
+++ b/app/assets/javascripts/monitoring/monitoring_bundle.js
@@ -0,0 +1,6 @@
+import PrometheusGraph from './prometheus_graph';
+
+document.addEventListener('DOMContentLoaded', function onLoad() {
+  document.removeEventListener('DOMContentLoaded', onLoad, false);
+  return new PrometheusGraph();
+}, false);
diff --git a/app/assets/javascripts/monitoring/prometheus_graph.js b/app/assets/javascripts/monitoring/prometheus_graph.js
new file mode 100644
index 00000000000..844a0785bc9
--- /dev/null
+++ b/app/assets/javascripts/monitoring/prometheus_graph.js
@@ -0,0 +1,335 @@
+/* eslint-disable no-new*/
+/* global Flash */
+
+import d3 from 'd3';
+import statusCodes from '~/lib/utils/http_status';
+import '../lib/utils/common_utils';
+import '../flash';
+
+const prometheusGraphsContainer = '.prometheus-graph';
+const metricsEndpoint = 'metrics.json';
+const timeFormat = d3.time.format('%H:%M');
+const dayFormat = d3.time.format('%b %e, %a');
+const bisectDate = d3.bisector(d => d.time).left;
+const extraAddedWidthParent = 100;
+
+class PrometheusGraph {
+
+  constructor() {
+    this.margin = { top: 80, right: 180, bottom: 80, left: 100 };
+    this.marginLabelContainer = { top: 40, right: 0, bottom: 40, left: 0 };
+    const parentContainerWidth = $(prometheusGraphsContainer).parent().width() +
+    extraAddedWidthParent;
+    this.originalWidth = parentContainerWidth;
+    this.originalHeight = 400;
+    this.width = parentContainerWidth - this.margin.left - this.margin.right;
+    this.height = 400 - this.margin.top - this.margin.bottom;
+    this.backOffRequestCounter = 0;
+    this.configureGraph();
+    this.init();
+  }
+
+  createGraph() {
+    Object.keys(this.data).forEach((key) => {
+      const value = this.data[key];
+      if (value.length > 0) {
+        this.plotValues(value, key);
+      }
+    });
+  }
+
+  init() {
+    this.getData().then((metricsResponse) => {
+      if (Object.keys(metricsResponse).length === 0) {
+        new Flash('Empty metrics', 'alert');
+      } else {
+        this.transformData(metricsResponse);
+        this.createGraph();
+      }
+    });
+  }
+
+  plotValues(valuesToPlot, key) {
+    const x = d3.time.scale()
+        .range([0, this.width]);
+
+    const y = d3.scale.linear()
+        .range([this.height, 0]);
+
+    const prometheusGraphContainer = `${prometheusGraphsContainer}[graph-type=${key}]`;
+
+    const graphSpecifics = this.graphSpecificProperties[key];
+
+    const chart = d3.select(prometheusGraphContainer)
+        .attr('width', this.width + this.margin.left + this.margin.right)
+        .attr('height', this.height + this.margin.bottom + this.margin.top)
+        .append('g')
+          .attr('transform', `translate(${this.margin.left},${this.margin.top})`);
+
+    const axisLabelContainer = d3.select(prometheusGraphContainer)
+      .attr('width', this.originalWidth + this.marginLabelContainer.left + this.marginLabelContainer.right)
+      .attr('height', this.originalHeight + this.marginLabelContainer.bottom + this.marginLabelContainer.top)
+      .append('g')
+        .attr('transform', `translate(${this.marginLabelContainer.left},${this.marginLabelContainer.top})`);
+
+    x.domain(d3.extent(valuesToPlot, d => d.time));
+    y.domain([0, d3.max(valuesToPlot.map(metricValue => metricValue.value))]);
+
+    const xAxis = d3.svg.axis()
+        .scale(x)
+        .ticks(this.commonGraphProperties.axis_no_ticks)
+        .orient('bottom');
+
+    const yAxis = d3.svg.axis()
+        .scale(y)
+        .ticks(this.commonGraphProperties.axis_no_ticks)
+        .tickSize(-this.width)
+        .orient('left');
+
+    this.createAxisLabelContainers(axisLabelContainer, key);
+
+    chart.append('g')
+        .attr('class', 'x-axis')
+        .attr('transform', `translate(0,${this.height})`)
+        .call(xAxis);
+
+    chart.append('g')
+        .attr('class', 'y-axis')
+        .call(yAxis);
+
+    const area = d3.svg.area()
+      .x(d => x(d.time))
+      .y0(this.height)
+      .y1(d => y(d.value))
+      .interpolate('linear');
+
+    const line = d3.svg.line()
+    .x(d => x(d.time))
+    .y(d => y(d.value));
+
+    chart.append('path')
+    .datum(valuesToPlot)
+    .attr('d', area)
+    .attr('class', 'metric-area')
+    .attr('fill', graphSpecifics.area_fill_color);
+
+    chart.append('path')
+      .datum(valuesToPlot)
+      .attr('class', 'metric-line')
+      .attr('stroke', graphSpecifics.line_color)
+      .attr('fill', 'none')
+      .attr('stroke-width', this.commonGraphProperties.area_stroke_width)
+      .attr('d', line);
+
+    // Overlay area for the mouseover events
+    chart.append('rect')
+      .attr('class', 'prometheus-graph-overlay')
+      .attr('width', this.width)
+      .attr('height', this.height)
+      .on('mousemove', this.handleMouseOverGraph.bind(this, x, y, valuesToPlot, chart, prometheusGraphContainer, key));
+  }
+
+  // The legends from the metric
+  createAxisLabelContainers(axisLabelContainer, key) {
+    const graphSpecifics = this.graphSpecificProperties[key];
+
+    axisLabelContainer.append('line')
+        .attr('class', 'label-x-axis-line')
+        .attr('stroke', '#000000')
+        .attr('stroke-width', '1')
+        .attr({
+          x1: 0,
+          y1: this.originalHeight - this.marginLabelContainer.top,
+          x2: this.originalWidth - this.margin.right,
+          y2: this.originalHeight - this.marginLabelContainer.top,
+        });
+
+    axisLabelContainer.append('line')
+          .attr('class', 'label-y-axis-line')
+          .attr('stroke', '#000000')
+          .attr('stroke-width', '1')
+          .attr({
+            x1: 0,
+            y1: 0,
+            x2: 0,
+            y2: this.originalHeight - this.marginLabelContainer.top,
+          });
+
+    axisLabelContainer.append('text')
+          .attr('class', 'label-axis-text')
+          .attr('text-anchor', 'middle')
+          .attr('transform', `translate(15, ${(this.originalHeight - this.marginLabelContainer.top) / 2}) rotate(-90)`)
+          .text(graphSpecifics.graph_legend_title);
+
+    axisLabelContainer.append('rect')
+          .attr('class', 'rect-axis-text')
+          .attr('x', (this.originalWidth / 2) - this.margin.right)
+          .attr('y', this.originalHeight - this.marginLabelContainer.top - 20)
+          .attr('width', 30)
+          .attr('height', 80);
+
+    axisLabelContainer.append('text')
+          .attr('class', 'label-axis-text')
+          .attr('x', (this.originalWidth / 2) - this.margin.right)
+          .attr('y', this.originalHeight - this.marginLabelContainer.top)
+          .attr('dy', '.35em')
+          .text('Time');
+
+    // Legends
+
+    // Metric Usage
+    axisLabelContainer.append('rect')
+          .attr('x', this.originalWidth - 170)
+          .attr('y', (this.originalHeight / 2) - 60)
+          .style('fill', graphSpecifics.area_fill_color)
+          .attr('width', 20)
+          .attr('height', 35);
+
+    axisLabelContainer.append('text')
+          .attr('class', 'label-axis-text')
+          .attr('x', this.originalWidth - 140)
+          .attr('y', (this.originalHeight / 2) - 50)
+          .text('Average');
+
+    axisLabelContainer.append('text')
+            .attr('class', 'text-metric-usage')
+            .attr('x', this.originalWidth - 140)
+            .attr('y', (this.originalHeight / 2) - 25);
+  }
+
+  handleMouseOverGraph(x, y, valuesToPlot, chart, prometheusGraphContainer, key) {
+    const rectOverlay = document.querySelector(`${prometheusGraphContainer} .prometheus-graph-overlay`);
+    const timeValueFromOverlay = x.invert(d3.mouse(rectOverlay)[0]);
+    const timeValueIndex = bisectDate(valuesToPlot, timeValueFromOverlay, 1);
+    const d0 = valuesToPlot[timeValueIndex - 1];
+    const d1 = valuesToPlot[timeValueIndex];
+    const currentData = timeValueFromOverlay - d0.time > d1.time - timeValueFromOverlay ? d1 : d0;
+    const maxValueMetric = y(d3.max(valuesToPlot.map(metricValue => metricValue.value)));
+    const currentTimeCoordinate = x(currentData.time);
+    const graphSpecifics = this.graphSpecificProperties[key];
+    // Remove the current selectors
+    d3.selectAll(`${prometheusGraphContainer} .selected-metric-line`).remove();
+    d3.selectAll(`${prometheusGraphContainer} .circle-metric`).remove();
+    d3.selectAll(`${prometheusGraphContainer} .rect-text-metric`).remove();
+    d3.selectAll(`${prometheusGraphContainer} .text-metric`).remove();
+
+    chart.append('line')
+    .attr('class', 'selected-metric-line')
+    .attr({
+      x1: currentTimeCoordinate,
+      y1: y(0),
+      x2: currentTimeCoordinate,
+      y2: maxValueMetric,
+    });
+
+    chart.append('circle')
+    .attr('class', 'circle-metric')
+    .attr('fill', graphSpecifics.line_color)
+    .attr('cx', currentTimeCoordinate)
+    .attr('cy', y(currentData.value))
+    .attr('r', this.commonGraphProperties.circle_radius_metric);
+
+    // The little box with text
+    const rectTextMetric = chart.append('g')
+    .attr('class', 'rect-text-metric')
+    .attr('translate', `(${currentTimeCoordinate}, ${y(currentData.value)})`);
+
+    rectTextMetric.append('rect')
+    .attr('class', 'rect-metric')
+    .attr('x', currentTimeCoordinate + 10)
+    .attr('y', maxValueMetric)
+    .attr('width', this.commonGraphProperties.rect_text_width)
+    .attr('height', this.commonGraphProperties.rect_text_height);
+
+    rectTextMetric.append('text')
+    .attr('class', 'text-metric')
+    .attr('x', currentTimeCoordinate + 35)
+    .attr('y', maxValueMetric + 35)
+    .text(timeFormat(currentData.time));
+
+    rectTextMetric.append('text')
+    .attr('class', 'text-metric-date')
+    .attr('x', currentTimeCoordinate + 15)
+    .attr('y', maxValueMetric + 15)
+    .text(dayFormat(currentData.time));
+
+    // Update the text
+    d3.select(`${prometheusGraphContainer} .text-metric-usage`)
+      .text(currentData.value.substring(0, 8));
+  }
+
+  configureGraph() {
+    this.graphSpecificProperties = {
+      cpu_values: {
+        area_fill_color: '#edf3fc',
+        line_color: '#5b99f7',
+        graph_legend_title: 'CPU utilization (%)',
+      },
+      memory_values: {
+        area_fill_color: '#fca326',
+        line_color: '#fc6d26',
+        graph_legend_title: 'Memory usage (MB)',
+      },
+    };
+
+    this.commonGraphProperties = {
+      area_stroke_width: 2,
+      median_total_characters: 8,
+      circle_radius_metric: 5,
+      rect_text_width: 90,
+      rect_text_height: 40,
+      axis_no_ticks: 3,
+    };
+  }
+
+  getData() {
+    const maxNumberOfRequests = 3;
+    return gl.utils.backOff((next, stop) => {
+      $.ajax({
+        url: metricsEndpoint,
+        dataType: 'json',
+      })
+      .done((data, statusText, resp) => {
+        if (resp.status === statusCodes.NO_CONTENT) {
+          this.backOffRequestCounter = this.backOffRequestCounter += 1;
+          if (this.backOffRequestCounter < maxNumberOfRequests) {
+            next();
+          } else {
+            stop({
+              status: resp.status,
+              metrics: data,
+            });
+          }
+        } else {
+          stop({
+            status: resp.status,
+            metrics: data,
+          });
+        }
+      }).fail(stop);
+    })
+    .then((resp) => {
+      if (resp.status === statusCodes.NO_CONTENT) {
+        return {};
+      }
+      return resp.metrics;
+    })
+    .catch(() => new Flash('An error occurred while fetching metrics.', 'alert'));
+  }
+
+  transformData(metricsResponse) {
+    const metricTypes = {};
+    Object.keys(metricsResponse.metrics).forEach((key) => {
+      if (key === 'cpu_values' || key === 'memory_values') {
+        const metricValues = (metricsResponse.metrics[key])[0];
+        metricTypes[key] = metricValues.values.map(metric => ({
+          time: new Date(metric[0] * 1000),
+          value: metric[1],
+        }));
+      }
+    });
+    this.data = metricTypes;
+  }
+}
+
+export default PrometheusGraph;
diff --git a/app/assets/javascripts/namespace_select.js b/app/assets/javascripts/namespace_select.js
index d1168227b77..b98e6121967 100644
--- a/app/assets/javascripts/namespace_select.js
+++ b/app/assets/javascripts/namespace_select.js
@@ -1,8 +1,10 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, one-var, vars-on-top, one-var-declaration-per-line, comma-dangle, object-shorthand, no-else-return, prefer-template, quotes, prefer-arrow-callback, no-param-reassign, no-cond-assign, max-len */
+/* global Api */
+
 (function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
 
-  this.NamespaceSelect = (function() {
+  window.NamespaceSelect = (function() {
     function NamespaceSelect(opts) {
       this.onSelectItem = bind(this.onSelectItem, this);
       var fieldName, showAny;
@@ -27,7 +29,7 @@
           if (selected.id == null) {
             return selected.text;
           } else {
-            return selected.kind + ": " + selected.path;
+            return selected.kind + ": " + selected.full_path;
           }
         },
         data: function(term, dataCallback) {
@@ -48,7 +50,7 @@
           if (namespace.id == null) {
             return namespace.text;
           } else {
-            return namespace.kind + ": " + namespace.path;
+            return namespace.kind + ": " + namespace.full_path;
           }
         },
         renderRow: this.renderRow,
@@ -61,10 +63,9 @@
     };
 
     return NamespaceSelect;
-
   })();
 
-  this.NamespaceSelects = (function() {
+  window.NamespaceSelects = (function() {
     function NamespaceSelects(opts) {
       var ref;
       if (opts == null) {
@@ -74,14 +75,12 @@
       this.$dropdowns.each(function(i, dropdown) {
         var $dropdown;
         $dropdown = $(dropdown);
-        return new NamespaceSelect({
+        return new window.NamespaceSelect({
           dropdown: $dropdown
         });
       });
     }
 
     return NamespaceSelects;
-
   })();
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/network/branch_graph.js b/app/assets/javascripts/network/branch_graph.js
index 74dbeb94741..5aad3908eb6 100644
--- a/app/assets/javascripts/network/branch_graph.js
+++ b/app/assets/javascripts/network/branch_graph.js
@@ -1,418 +1,347 @@
-/* eslint-disable */
-(function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+/* eslint-disable func-names, space-before-function-paren, no-var, wrap-iife, quotes, comma-dangle, one-var, one-var-declaration-per-line, no-mixed-operators, no-loop-func, no-floating-decimal, consistent-return, no-unused-vars, prefer-template, prefer-arrow-callback, camelcase, max-len */
 
-  this.BranchGraph = (function() {
-    function BranchGraph(element1, options1) {
-      this.element = element1;
-      this.options = options1;
-      this.scrollTop = bind(this.scrollTop, this);
-      this.scrollBottom = bind(this.scrollBottom, this);
-      this.scrollRight = bind(this.scrollRight, this);
-      this.scrollLeft = bind(this.scrollLeft, this);
-      this.scrollUp = bind(this.scrollUp, this);
-      this.scrollDown = bind(this.scrollDown, this);
-      this.preparedCommits = {};
-      this.mtime = 0;
-      this.mspace = 0;
-      this.parents = {};
-      this.colors = ["#000"];
-      this.offsetX = 150;
-      this.offsetY = 20;
-      this.unitTime = 30;
-      this.unitSpace = 10;
-      this.prev_start = -1;
-      this.load();
-    }
+import Raphael from './raphael';
 
-    BranchGraph.prototype.load = function() {
-      return $.ajax({
-        url: this.options.url,
-        method: "get",
-        dataType: "json",
-        success: $.proxy(function(data) {
-          $(".loading", this.element).hide();
-          this.prepareData(data.days, data.commits);
-          return this.buildGraph();
-        }, this)
-      });
-    };
+export default (function() {
+  function BranchGraph(element1, options1) {
+    this.element = element1;
+    this.options = options1;
+    this.scrollTop = this.scrollTop.bind(this);
+    this.scrollBottom = this.scrollBottom.bind(this);
+    this.scrollRight = this.scrollRight.bind(this);
+    this.scrollLeft = this.scrollLeft.bind(this);
+    this.scrollUp = this.scrollUp.bind(this);
+    this.scrollDown = this.scrollDown.bind(this);
+    this.preparedCommits = {};
+    this.mtime = 0;
+    this.mspace = 0;
+    this.parents = {};
+    this.colors = ["#000"];
+    this.offsetX = 150;
+    this.offsetY = 20;
+    this.unitTime = 30;
+    this.unitSpace = 10;
+    this.prev_start = -1;
+    this.load();
+  }
 
-    BranchGraph.prototype.prepareData = function(days, commits) {
-      var c, ch, cw, j, len, ref;
-      this.days = days;
-      this.commits = commits;
-      this.collectParents();
-      this.graphHeight = $(this.element).height();
-      this.graphWidth = $(this.element).width();
-      ch = Math.max(this.graphHeight, this.offsetY + this.unitTime * this.mtime + 150);
-      cw = Math.max(this.graphWidth, this.offsetX + this.unitSpace * this.mspace + 300);
-      this.r = Raphael(this.element.get(0), cw, ch);
-      this.top = this.r.set();
-      this.barHeight = Math.max(this.graphHeight, this.unitTime * this.days.length + 320);
-      ref = this.commits;
-      for (j = 0, len = ref.length; j < len; j++) {
-        c = ref[j];
-        if (c.id in this.parents) {
-          c.isParent = true;
-        }
-        this.preparedCommits[c.id] = c;
-        this.markCommit(c);
-      }
-      return this.collectColors();
-    };
-
-    BranchGraph.prototype.collectParents = function() {
-      var c, j, len, p, ref, results;
-      ref = this.commits;
-      results = [];
-      for (j = 0, len = ref.length; j < len; j++) {
-        c = ref[j];
-        this.mtime = Math.max(this.mtime, c.time);
-        this.mspace = Math.max(this.mspace, c.space);
-        results.push((function() {
-          var l, len1, ref1, results1;
-          ref1 = c.parents;
-          results1 = [];
-          for (l = 0, len1 = ref1.length; l < len1; l++) {
-            p = ref1[l];
-            this.parents[p[0]] = true;
-            results1.push(this.mspace = Math.max(this.mspace, p[1]));
-          }
-          return results1;
-        }).call(this));
-      }
-      return results;
-    };
+  BranchGraph.prototype.load = function() {
+    return $.ajax({
+      url: this.options.url,
+      method: "get",
+      dataType: "json",
+      success: $.proxy(function(data) {
+        $(".loading", this.element).hide();
+        this.prepareData(data.days, data.commits);
+        return this.buildGraph();
+      }, this)
+    });
+  };
 
-    BranchGraph.prototype.collectColors = function() {
-      var k, results;
-      k = 0;
-      results = [];
-      while (k < this.mspace) {
-        this.colors.push(Raphael.getColor(.8));
-        // Skipping a few colors in the spectrum to get more contrast between colors
-        Raphael.getColor();
-        Raphael.getColor();
-        results.push(k++);
+  BranchGraph.prototype.prepareData = function(days, commits) {
+    var c, ch, cw, j, len, ref;
+    this.days = days;
+    this.commits = commits;
+    this.collectParents();
+    this.graphHeight = $(this.element).height();
+    this.graphWidth = $(this.element).width();
+    ch = Math.max(this.graphHeight, this.offsetY + this.unitTime * this.mtime + 150);
+    cw = Math.max(this.graphWidth, this.offsetX + this.unitSpace * this.mspace + 300);
+    this.r = Raphael(this.element.get(0), cw, ch);
+    this.top = this.r.set();
+    this.barHeight = Math.max(this.graphHeight, this.unitTime * this.days.length + 320);
+    ref = this.commits;
+    for (j = 0, len = ref.length; j < len; j += 1) {
+      c = ref[j];
+      if (c.id in this.parents) {
+        c.isParent = true;
       }
-      return results;
-    };
+      this.preparedCommits[c.id] = c;
+      this.markCommit(c);
+    }
+    return this.collectColors();
+  };
 
-    BranchGraph.prototype.buildGraph = function() {
-      var cuday, cumonth, day, j, len, mm, r, ref;
-      r = this.r;
-      cuday = 0;
-      cumonth = "";
-      r.rect(0, 0, 40, this.barHeight).attr({
-        fill: "#222"
-      });
-      r.rect(40, 0, 30, this.barHeight).attr({
-        fill: "#444"
-      });
-      ref = this.days;
-      for (mm = j = 0, len = ref.length; j < len; mm = ++j) {
-        day = ref[mm];
-        if (cuday !== day[0] || cumonth !== day[1]) {
-          // Dates
-          r.text(55, this.offsetY + this.unitTime * mm, day[0]).attr({
-            font: "12px Monaco, monospace",
-            fill: "#BBB"
-          });
-          cuday = day[0];
+  BranchGraph.prototype.collectParents = function() {
+    var c, j, len, p, ref, results;
+    ref = this.commits;
+    results = [];
+    for (j = 0, len = ref.length; j < len; j += 1) {
+      c = ref[j];
+      this.mtime = Math.max(this.mtime, c.time);
+      this.mspace = Math.max(this.mspace, c.space);
+      results.push((function() {
+        var l, len1, ref1, results1;
+        ref1 = c.parents;
+        results1 = [];
+        for (l = 0, len1 = ref1.length; l < len1; l += 1) {
+          p = ref1[l];
+          this.parents[p[0]] = true;
+          results1.push(this.mspace = Math.max(this.mspace, p[1]));
         }
-        if (cumonth !== day[1]) {
-          // Months
-          r.text(20, this.offsetY + this.unitTime * mm, day[1]).attr({
-            font: "12px Monaco, monospace",
-            fill: "#EEE"
-          });
-          cumonth = day[1];
-        }
-      }
-      this.renderPartialGraph();
-      return this.bindEvents();
-    };
+        return results1;
+      }).call(this));
+    }
+    return results;
+  };
+
+  BranchGraph.prototype.collectColors = function() {
+    var k, results;
+    k = 0;
+    results = [];
+    while (k < this.mspace) {
+      this.colors.push(Raphael.getColor(.8));
+      // Skipping a few colors in the spectrum to get more contrast between colors
+      Raphael.getColor();
+      Raphael.getColor();
+      results.push(k += 1);
+    }
+    return results;
+  };
 
-    BranchGraph.prototype.renderPartialGraph = function() {
-      var commit, end, i, isGraphEdge, start, x, y;
-      start = Math.floor((this.element.scrollTop() - this.offsetY) / this.unitTime) - 10;
-      if (start < 0) {
-        isGraphEdge = true;
-        start = 0;
+  BranchGraph.prototype.buildGraph = function() {
+    var cuday, cumonth, day, j, len, mm, r, ref;
+    r = this.r;
+    cuday = 0;
+    cumonth = "";
+    r.rect(0, 0, 40, this.barHeight).attr({
+      fill: "#222"
+    });
+    r.rect(40, 0, 30, this.barHeight).attr({
+      fill: "#444"
+    });
+    ref = this.days;
+    for (mm = j = 0, len = ref.length; j < len; mm = (j += 1)) {
+      day = ref[mm];
+      if (cuday !== day[0] || cumonth !== day[1]) {
+        // Dates
+        r.text(55, this.offsetY + this.unitTime * mm, day[0]).attr({
+          font: "12px Monaco, monospace",
+          fill: "#BBB"
+        });
+        cuday = day[0];
       }
-      end = start + 40;
-      if (this.commits.length < end) {
-        isGraphEdge = true;
-        end = this.commits.length;
+      if (cumonth !== day[1]) {
+        // Months
+        r.text(20, this.offsetY + this.unitTime * mm, day[1]).attr({
+          font: "12px Monaco, monospace",
+          fill: "#EEE"
+        });
+        cumonth = day[1];
       }
-      if (this.prev_start === -1 || Math.abs(this.prev_start - start) > 10 || isGraphEdge) {
-        i = start;
-        this.prev_start = start;
-        while (i < end) {
-          commit = this.commits[i];
-          i += 1;
-          if (commit.hasDrawn !== true) {
-            x = this.offsetX + this.unitSpace * (this.mspace - commit.space);
-            y = this.offsetY + this.unitTime * commit.time;
-            this.drawDot(x, y, commit);
-            this.drawLines(x, y, commit);
-            this.appendLabel(x, y, commit);
-            this.appendAnchor(x, y, commit);
-            commit.hasDrawn = true;
-          }
+    }
+    this.renderPartialGraph();
+    return this.bindEvents();
+  };
+
+  BranchGraph.prototype.renderPartialGraph = function() {
+    var commit, end, i, isGraphEdge, start, x, y;
+    start = Math.floor((this.element.scrollTop() - this.offsetY) / this.unitTime) - 10;
+    if (start < 0) {
+      isGraphEdge = true;
+      start = 0;
+    }
+    end = start + 40;
+    if (this.commits.length < end) {
+      isGraphEdge = true;
+      end = this.commits.length;
+    }
+    if (this.prev_start === -1 || Math.abs(this.prev_start - start) > 10 || isGraphEdge) {
+      i = start;
+      this.prev_start = start;
+      while (i < end) {
+        commit = this.commits[i];
+        i += 1;
+        if (commit.hasDrawn !== true) {
+          x = this.offsetX + this.unitSpace * (this.mspace - commit.space);
+          y = this.offsetY + this.unitTime * commit.time;
+          this.drawDot(x, y, commit);
+          this.drawLines(x, y, commit);
+          this.appendLabel(x, y, commit);
+          this.appendAnchor(x, y, commit);
+          commit.hasDrawn = true;
         }
-        return this.top.toFront();
       }
-    };
-
-    BranchGraph.prototype.bindEvents = function() {
-      var element;
-      element = this.element;
-      return $(element).scroll((function(_this) {
-        return function(event) {
-          return _this.renderPartialGraph();
-        };
-      })(this));
-    };
-
-    BranchGraph.prototype.scrollDown = function() {
-      this.element.scrollTop(this.element.scrollTop() + 50);
-      return this.renderPartialGraph();
-    };
-
-    BranchGraph.prototype.scrollUp = function() {
-      this.element.scrollTop(this.element.scrollTop() - 50);
-      return this.renderPartialGraph();
-    };
-
-    BranchGraph.prototype.scrollLeft = function() {
-      this.element.scrollLeft(this.element.scrollLeft() - 50);
-      return this.renderPartialGraph();
-    };
-
-    BranchGraph.prototype.scrollRight = function() {
-      this.element.scrollLeft(this.element.scrollLeft() + 50);
-      return this.renderPartialGraph();
-    };
-
-    BranchGraph.prototype.scrollBottom = function() {
-      return this.element.scrollTop(this.element.find('svg').height());
-    };
-
-    BranchGraph.prototype.scrollTop = function() {
-      return this.element.scrollTop(0);
-    };
+      return this.top.toFront();
+    }
+  };
 
-    BranchGraph.prototype.appendLabel = function(x, y, commit) {
-      var label, r, rect, shortrefs, text, textbox, triangle;
-      if (!commit.refs) {
-        return;
-      }
-      r = this.r;
-      shortrefs = commit.refs;
-      // Truncate if longer than 15 chars
-      if (shortrefs.length > 17) {
-        shortrefs = shortrefs.substr(0, 15) + "…";
-      }
-      text = r.text(x + 4, y, shortrefs).attr({
-        "text-anchor": "start",
-        font: "10px Monaco, monospace",
-        fill: "#FFF",
-        title: commit.refs
-      });
-      textbox = text.getBBox();
-      // Create rectangle based on the size of the textbox
-      rect = r.rect(x, y - 7, textbox.width + 5, textbox.height + 5, 4).attr({
-        fill: "#000",
-        "fill-opacity": .5,
-        stroke: "none"
-      });
-      triangle = r.path(["M", x - 5, y, "L", x - 15, y - 4, "L", x - 15, y + 4, "Z"]).attr({
-        fill: "#000",
-        "fill-opacity": .5,
-        stroke: "none"
-      });
-      label = r.set(rect, text);
-      label.transform(["t", -rect.getBBox().width - 15, 0]);
-      // Set text to front
-      return text.toFront();
-    };
+  BranchGraph.prototype.bindEvents = function() {
+    var element;
+    element = this.element;
+    return $(element).scroll((function(_this) {
+      return function(event) {
+        return _this.renderPartialGraph();
+      };
+    })(this));
+  };
 
-    BranchGraph.prototype.appendAnchor = function(x, y, commit) {
-      var anchor, options, r, top;
-      r = this.r;
-      top = this.top;
-      options = this.options;
-      anchor = r.circle(x, y, 10).attr({
-        fill: "#000",
-        opacity: 0,
-        cursor: "pointer"
-      }).click(function() {
-        return window.open(options.commit_url.replace("%s", commit.id), "_blank");
-      }).hover(function() {
-        this.tooltip = r.commitTooltip(x + 5, y, commit);
-        return top.push(this.tooltip.insertBefore(this));
-      }, function() {
-        return this.tooltip && this.tooltip.remove() && delete this.tooltip;
-      });
-      return top.push(anchor);
-    };
+  BranchGraph.prototype.scrollDown = function() {
+    this.element.scrollTop(this.element.scrollTop() + 50);
+    return this.renderPartialGraph();
+  };
 
-    BranchGraph.prototype.drawDot = function(x, y, commit) {
-      var avatar_box_x, avatar_box_y, r;
-      r = this.r;
-      r.circle(x, y, 3).attr({
-        fill: this.colors[commit.space],
-        stroke: "none"
-      });
-      avatar_box_x = this.offsetX + this.unitSpace * this.mspace + 10;
-      avatar_box_y = y - 10;
-      r.rect(avatar_box_x, avatar_box_y, 20, 20).attr({
-        stroke: this.colors[commit.space],
-        "stroke-width": 2
-      });
-      r.image(commit.author.icon, avatar_box_x, avatar_box_y, 20, 20);
-      return r.text(this.offsetX + this.unitSpace * this.mspace + 35, y, commit.message.split("\n")[0]).attr({
-        "text-anchor": "start",
-        font: "14px Monaco, monospace"
-      });
-    };
+  BranchGraph.prototype.scrollUp = function() {
+    this.element.scrollTop(this.element.scrollTop() - 50);
+    return this.renderPartialGraph();
+  };
 
-    BranchGraph.prototype.drawLines = function(x, y, commit) {
-      var arrow, color, i, j, len, offset, parent, parentCommit, parentX1, parentX2, parentY, r, ref, results, route;
-      r = this.r;
-      ref = commit.parents;
-      results = [];
-      for (i = j = 0, len = ref.length; j < len; i = ++j) {
-        parent = ref[i];
-        parentCommit = this.preparedCommits[parent[0]];
-        parentY = this.offsetY + this.unitTime * parentCommit.time;
-        parentX1 = this.offsetX + this.unitSpace * (this.mspace - parentCommit.space);
-        parentX2 = this.offsetX + this.unitSpace * (this.mspace - parent[1]);
-        // Set line color
-        if (parentCommit.space <= commit.space) {
-          color = this.colors[commit.space];
-        } else {
-          color = this.colors[parentCommit.space];
-        }
-        // Build line shape
-        if (parent[1] === commit.space) {
-          offset = [0, 5];
-          arrow = "l-2,5,4,0,-2,-5,0,5";
-        } else if (parent[1] < commit.space) {
-          offset = [3, 3];
-          arrow = "l5,0,-2,4,-3,-4,4,2";
-        } else {
-          offset = [-3, 3];
-          arrow = "l-5,0,2,4,3,-4,-4,2";
-        }
-        // Start point
-        route = ["M", x + offset[0], y + offset[1]];
-        // Add arrow if not first parent
-        if (i > 0) {
-          route.push(arrow);
-        }
-        // Circumvent if overlap
-        if (commit.space !== parentCommit.space || commit.space !== parent[1]) {
-          route.push("L", parentX2, y + 10, "L", parentX2, parentY - 5);
-        }
-        // End point
-        route.push("L", parentX1, parentY);
-        results.push(r.path(route).attr({
-          stroke: color,
-          "stroke-width": 2
-        }));
-      }
-      return results;
-    };
+  BranchGraph.prototype.scrollLeft = function() {
+    this.element.scrollLeft(this.element.scrollLeft() - 50);
+    return this.renderPartialGraph();
+  };
 
-    BranchGraph.prototype.markCommit = function(commit) {
-      var r, x, y;
-      if (commit.id === this.options.commit_id) {
-        r = this.r;
-        x = this.offsetX + this.unitSpace * (this.mspace - commit.space);
-        y = this.offsetY + this.unitTime * commit.time;
-        r.path(["M", x + 5, y, "L", x + 15, y + 4, "L", x + 15, y - 4, "Z"]).attr({
-          fill: "#000",
-          "fill-opacity": .5,
-          stroke: "none"
-        });
-        // Displayed in the center
-        return this.element.scrollTop(y - this.graphHeight / 2);
-      }
-    };
+  BranchGraph.prototype.scrollRight = function() {
+    this.element.scrollLeft(this.element.scrollLeft() + 50);
+    return this.renderPartialGraph();
+  };
 
-    return BranchGraph;
+  BranchGraph.prototype.scrollBottom = function() {
+    return this.element.scrollTop(this.element.find('svg').height());
+  };
 
-  })();
+  BranchGraph.prototype.scrollTop = function() {
+    return this.element.scrollTop(0);
+  };
 
-  Raphael.prototype.commitTooltip = function(x, y, commit) {
-    var boxHeight, boxWidth, icon, idText, messageText, nameText, rect, textSet, tooltip;
-    boxWidth = 300;
-    boxHeight = 200;
-    icon = this.image(gon.relative_url_root + commit.author.icon, x, y, 20, 20);
-    nameText = this.text(x + 25, y + 10, commit.author.name);
-    idText = this.text(x, y + 35, commit.id);
-    messageText = this.text(x, y + 50, commit.message);
-    textSet = this.set(icon, nameText, idText, messageText).attr({
+  BranchGraph.prototype.appendLabel = function(x, y, commit) {
+    var label, r, rect, shortrefs, text, textbox, triangle;
+    if (!commit.refs) {
+      return;
+    }
+    r = this.r;
+    shortrefs = commit.refs;
+    // Truncate if longer than 15 chars
+    if (shortrefs.length > 17) {
+      shortrefs = shortrefs.substr(0, 15) + "…";
+    }
+    text = r.text(x + 4, y, shortrefs).attr({
       "text-anchor": "start",
-      font: "12px Monaco, monospace"
-    });
-    nameText.attr({
-      font: "14px Arial",
-      "font-weight": "bold"
+      font: "10px Monaco, monospace",
+      fill: "#FFF",
+      title: commit.refs
     });
-    idText.attr({
-      fill: "#AAA"
+    textbox = text.getBBox();
+    // Create rectangle based on the size of the textbox
+    rect = r.rect(x, y - 7, textbox.width + 5, textbox.height + 5, 4).attr({
+      fill: "#000",
+      "fill-opacity": .5,
+      stroke: "none"
     });
-    this.textWrap(messageText, boxWidth - 50);
-    rect = this.rect(x - 10, y - 10, boxWidth, 100, 4).attr({
-      fill: "#FFF",
-      stroke: "#000",
-      "stroke-linecap": "round",
-      "stroke-width": 2
+    triangle = r.path(["M", x - 5, y, "L", x - 15, y - 4, "L", x - 15, y + 4, "Z"]).attr({
+      fill: "#000",
+      "fill-opacity": .5,
+      stroke: "none"
     });
-    tooltip = this.set(rect, textSet);
-    rect.attr({
-      height: tooltip.getBBox().height + 10,
-      width: tooltip.getBBox().width + 10
+    label = r.set(rect, text);
+    label.transform(["t", -rect.getBBox().width - 15, 0]);
+    // Set text to front
+    return text.toFront();
+  };
+
+  BranchGraph.prototype.appendAnchor = function(x, y, commit) {
+    var anchor, options, r, top;
+    r = this.r;
+    top = this.top;
+    options = this.options;
+    anchor = r.circle(x, y, 10).attr({
+      fill: "#000",
+      opacity: 0,
+      cursor: "pointer"
+    }).click(function() {
+      return window.open(options.commit_url.replace("%s", commit.id), "_blank");
+    }).hover(function() {
+      this.tooltip = r.commitTooltip(x + 5, y, commit);
+      return top.push(this.tooltip.insertBefore(this));
+    }, function() {
+      return this.tooltip && this.tooltip.remove() && delete this.tooltip;
     });
-    tooltip.transform(["t", 20, 20]);
-    return tooltip;
+    return top.push(anchor);
   };
 
-  Raphael.prototype.textWrap = function(t, width) {
-    var abc, b, content, h, j, len, letterWidth, s, word, words, x;
-    content = t.attr("text");
-    abc = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
-    t.attr({
-      text: abc
+  BranchGraph.prototype.drawDot = function(x, y, commit) {
+    var avatar_box_x, avatar_box_y, r;
+    r = this.r;
+    r.circle(x, y, 3).attr({
+      fill: this.colors[commit.space],
+      stroke: "none"
     });
-    letterWidth = t.getBBox().width / abc.length;
-    t.attr({
-      text: content
+    avatar_box_x = this.offsetX + this.unitSpace * this.mspace + 10;
+    avatar_box_y = y - 10;
+    r.rect(avatar_box_x, avatar_box_y, 20, 20).attr({
+      stroke: this.colors[commit.space],
+      "stroke-width": 2
     });
-    words = content.split(" ");
-    x = 0;
-    s = [];
-    for (j = 0, len = words.length; j < len; j++) {
-      word = words[j];
-      if (x + (word.length * letterWidth) > width) {
-        s.push("\n");
-        x = 0;
+    r.image(commit.author.icon, avatar_box_x, avatar_box_y, 20, 20);
+    return r.text(this.offsetX + this.unitSpace * this.mspace + 35, y, commit.message.split("\n")[0]).attr({
+      "text-anchor": "start",
+      font: "14px Monaco, monospace"
+    });
+  };
+
+  BranchGraph.prototype.drawLines = function(x, y, commit) {
+    var arrow, color, i, j, len, offset, parent, parentCommit, parentX1, parentX2, parentY, r, ref, results, route;
+    r = this.r;
+    ref = commit.parents;
+    results = [];
+    for (i = j = 0, len = ref.length; j < len; i = (j += 1)) {
+      parent = ref[i];
+      parentCommit = this.preparedCommits[parent[0]];
+      parentY = this.offsetY + this.unitTime * parentCommit.time;
+      parentX1 = this.offsetX + this.unitSpace * (this.mspace - parentCommit.space);
+      parentX2 = this.offsetX + this.unitSpace * (this.mspace - parent[1]);
+      // Set line color
+      if (parentCommit.space <= commit.space) {
+        color = this.colors[commit.space];
+      } else {
+        color = this.colors[parentCommit.space];
+      }
+      // Build line shape
+      if (parent[1] === commit.space) {
+        offset = [0, 5];
+        arrow = "l-2,5,4,0,-2,-5,0,5";
+      } else if (parent[1] < commit.space) {
+        offset = [3, 3];
+        arrow = "l5,0,-2,4,-3,-4,4,2";
+      } else {
+        offset = [-3, 3];
+        arrow = "l-5,0,2,4,3,-4,-4,2";
+      }
+      // Start point
+      route = ["M", x + offset[0], y + offset[1]];
+      // Add arrow if not first parent
+      if (i > 0) {
+        route.push(arrow);
       }
-      x += word.length * letterWidth;
-      s.push(word + " ");
+      // Circumvent if overlap
+      if (commit.space !== parentCommit.space || commit.space !== parent[1]) {
+        route.push("L", parentX2, y + 10, "L", parentX2, parentY - 5);
+      }
+      // End point
+      route.push("L", parentX1, parentY);
+      results.push(r.path(route).attr({
+        stroke: color,
+        "stroke-width": 2
+      }));
+    }
+    return results;
+  };
+
+  BranchGraph.prototype.markCommit = function(commit) {
+    var r, x, y;
+    if (commit.id === this.options.commit_id) {
+      r = this.r;
+      x = this.offsetX + this.unitSpace * (this.mspace - commit.space);
+      y = this.offsetY + this.unitTime * commit.time;
+      r.path(["M", x + 5, y, "L", x + 15, y + 4, "L", x + 15, y - 4, "Z"]).attr({
+        fill: "#000",
+        "fill-opacity": .5,
+        stroke: "none"
+      });
+      // Displayed in the center
+      return this.element.scrollTop(y - this.graphHeight / 2);
     }
-    t.attr({
-      text: s.join("")
-    });
-    b = t.getBBox();
-    h = Math.abs(b.y2) - Math.abs(b.y) + 1;
-    return t.attr({
-      y: b.y + h
-    });
   };
 
-}).call(this);
+  return BranchGraph;
+})();
diff --git a/app/assets/javascripts/network/network.js b/app/assets/javascripts/network/network.js
index 8898e7ace43..a3fd22aff2a 100644
--- a/app/assets/javascripts/network/network.js
+++ b/app/assets/javascripts/network/network.js
@@ -1,20 +1,19 @@
-/* eslint-disable */
-(function() {
-  this.Network = (function() {
-    function Network(opts) {
-      var vph;
-      $("#filter_ref").click(function() {
-        return $(this).closest('form').submit();
-      });
-      this.branch_graph = new BranchGraph($(".network-graph"), opts);
-      vph = $(window).height() - 250;
-      $('.network-graph').css({
-        'height': vph + 'px'
-      });
-    }
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, quotes, quote-props, prefer-template, comma-dangle, max-len */
 
-    return Network;
+import BranchGraph from './branch_graph';
 
-  })();
+export default (function() {
+  function Network(opts) {
+    var vph;
+    $("#filter_ref").click(function() {
+      return $(this).closest('form').submit();
+    });
+    this.branch_graph = new BranchGraph($(".network-graph"), opts);
+    vph = $(window).height() - 250;
+    $('.network-graph').css({
+      'height': vph + 'px'
+    });
+  }
 
-}).call(this);
+  return Network;
+})();
diff --git a/app/assets/javascripts/network/network_bundle.js b/app/assets/javascripts/network/network_bundle.js
index 42d6799c82f..8aae2ad201c 100644
--- a/app/assets/javascripts/network/network_bundle.js
+++ b/app/assets/javascripts/network/network_bundle.js
@@ -1,22 +1,17 @@
-/* eslint-disable */
-// This is a manifest file that'll be compiled into including all the files listed below.
-// Add new JavaScript code in separate files in this directory and they'll automatically
-// be included in the compiled file accessible from http://example.com/assets/application.js
-// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
-// the compiled file.
-//
-/*= require_tree . */
+/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, quotes, no-var, vars-on-top, camelcase, comma-dangle, consistent-return, max-len */
+/* global ShortcutsNetwork */
 
-(function() {
-  $(function() {
-    var network_graph;
-    network_graph = new Network({
-      url: $(".network-graph").attr('data-url'),
-      commit_url: $(".network-graph").attr('data-commit-url'),
-      ref: $(".network-graph").attr('data-ref'),
-      commit_id: $(".network-graph").attr('data-commit-id')
-    });
-    return new ShortcutsNetwork(network_graph.branch_graph);
-  });
+import Network from './network';
+
+$(function() {
+  if (!$(".network-graph").length) return;
 
-}).call(this);
+  var network_graph;
+  network_graph = new Network({
+    url: $(".network-graph").attr('data-url'),
+    commit_url: $(".network-graph").attr('data-commit-url'),
+    ref: $(".network-graph").attr('data-ref'),
+    commit_id: $(".network-graph").attr('data-commit-id')
+  });
+  return new ShortcutsNetwork(network_graph.branch_graph);
+});
diff --git a/app/assets/javascripts/network/raphael.js b/app/assets/javascripts/network/raphael.js
new file mode 100644
index 00000000000..09dcf716148
--- /dev/null
+++ b/app/assets/javascripts/network/raphael.js
@@ -0,0 +1,74 @@
+import Raphael from 'raphael/raphael';
+
+Raphael.prototype.commitTooltip = function commitTooltip(x, y, commit) {
+  const boxWidth = 300;
+  const icon = this.image(gon.relative_url_root + commit.author.icon, x, y, 20, 20);
+  const nameText = this.text(x + 25, y + 10, commit.author.name);
+  const idText = this.text(x, y + 35, commit.id);
+  const messageText = this.text(x, y + 50, commit.message.replace(/\r?\n/g, ' \n '));
+  const textSet = this.set(icon, nameText, idText, messageText).attr({
+    'text-anchor': 'start',
+    font: '12px Monaco, monospace',
+  });
+  nameText.attr({
+    font: '14px Arial',
+    'font-weight': 'bold',
+  });
+  idText.attr({
+    fill: '#AAA',
+  });
+  messageText.node.style['white-space'] = 'pre';
+  this.textWrap(messageText, boxWidth - 50);
+  const rect = this.rect(x - 10, y - 10, boxWidth, 100, 4).attr({
+    fill: '#FFF',
+    stroke: '#000',
+    'stroke-linecap': 'round',
+    'stroke-width': 2,
+  });
+  const tooltip = this.set(rect, textSet);
+  rect.attr({
+    height: tooltip.getBBox().height + 10,
+    width: tooltip.getBBox().width + 10,
+  });
+  tooltip.transform(['t', 20, 20]);
+  return tooltip;
+};
+
+Raphael.prototype.textWrap = function testWrap(t, width) {
+  const content = t.attr('text');
+  const abc = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+  t.attr({
+    text: abc,
+  });
+  const letterWidth = t.getBBox().width / abc.length;
+  t.attr({
+    text: content,
+  });
+  const words = content.split(' ');
+  let x = 0;
+  const s = [];
+  for (let j = 0, len = words.length; j < len; j += 1) {
+    const word = words[j];
+    if (x + (word.length * letterWidth) > width) {
+      s.push('\n');
+      x = 0;
+    }
+    if (word === '\n') {
+      s.push('\n');
+      x = 0;
+    } else {
+      s.push(`${word} `);
+      x += word.length * letterWidth;
+    }
+  }
+  t.attr({
+    text: s.join('').trim(),
+  });
+  const b = t.getBBox();
+  const h = Math.abs(b.y2) + 1;
+  return t.attr({
+    y: h,
+  });
+};
+
+export default Raphael;
diff --git a/app/assets/javascripts/new_branch_form.js b/app/assets/javascripts/new_branch_form.js
index 0e643b0ff14..5828f460a23 100644
--- a/app/assets/javascripts/new_branch_form.js
+++ b/app/assets/javascripts/new_branch_form.js
@@ -1,7 +1,7 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, no-var, one-var, prefer-rest-params, max-len, vars-on-top, wrap-iife, consistent-return, comma-dangle, one-var-declaration-per-line, quotes, no-return-assign, prefer-arrow-callback, prefer-template, no-shadow, no-else-return, max-len, object-shorthand */
 (function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
-    indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
+  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; },
+    indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i += 1) { if (i in this && this[i] === item) return i; } return -1; };
 
   this.NewBranchForm = (function() {
     function NewBranchForm(form, availableRefs) {
@@ -20,15 +20,35 @@
     };
 
     NewBranchForm.prototype.init = function() {
-      if (this.name.val().length > 0) {
+      if (this.name.length && this.name.val().length > 0) {
         return this.name.trigger('blur');
       }
     };
 
     NewBranchForm.prototype.setupAvailableRefs = function(availableRefs) {
-      return this.ref.autocomplete({
-        source: availableRefs,
-        minLength: 1
+      var $branchSelect = $('.js-branch-select');
+
+      $branchSelect.glDropdown({
+        data: availableRefs,
+        filterable: true,
+        filterByText: true,
+        remote: false,
+        fieldName: $branchSelect.data('field-name'),
+        selectable: true,
+        isSelectable: function(branch, $el) {
+          return !$el.hasClass('is-active');
+        },
+        text: function(branch) {
+          return branch;
+        },
+        id: function(branch) {
+          return branch;
+        },
+        toggleLabel: function(branch) {
+          if (branch) {
+            return branch;
+          }
+        }
       });
     };
 
@@ -61,7 +81,7 @@
       var errorMessage, errors, formatter, unique, validator;
       this.branchNameError.empty();
       unique = function(values, value) {
-        if (indexOf.call(values, value) < 0) {
+        if (indexOf.call(values, value) === -1) {
           values.push(value);
         }
         return values;
@@ -99,7 +119,5 @@
     };
 
     return NewBranchForm;
-
   })();
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/new_commit_form.js b/app/assets/javascripts/new_commit_form.js
index acb529023fa..ad36f08840d 100644
--- a/app/assets/javascripts/new_commit_form.js
+++ b/app/assets/javascripts/new_commit_form.js
@@ -1,21 +1,25 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-return-assign, max-len */
 (function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
 
   this.NewCommitForm = (function() {
-    function NewCommitForm(form) {
+    function NewCommitForm(form, targetBranchName = 'target_branch') {
+      this.form = form;
+      this.targetBranchName = targetBranchName;
       this.renderDestination = bind(this.renderDestination, this);
-      this.newBranch = form.find('.js-target-branch');
+      this.targetBranchDropdown = form.find('button.js-target-branch');
       this.originalBranch = form.find('.js-original-branch');
       this.createMergeRequest = form.find('.js-create-merge-request');
       this.createMergeRequestContainer = form.find('.js-create-merge-request-container');
+      this.targetBranchDropdown.on('change.branch', this.renderDestination);
       this.renderDestination();
-      this.newBranch.keyup(this.renderDestination);
     }
 
     NewCommitForm.prototype.renderDestination = function() {
       var different;
-      different = this.newBranch.val() !== this.originalBranch.val();
+      var targetBranch = this.form.find(`input[name="${this.targetBranchName}"]`);
+
+      different = targetBranch.val() !== this.originalBranch.val();
       if (different) {
         this.createMergeRequestContainer.show();
         if (!this.wasDifferent) {
@@ -29,7 +33,5 @@
     };
 
     return NewCommitForm;
-
   })();
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 4976eef2896..1d563c63f39 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -1,18 +1,25 @@
-/* eslint-disable */
-
-/*= require autosave */
-/*= require autosize */
-/*= require dropzone */
-/*= require dropzone_input */
-/*= require gfm_auto_complete */
-/*= require jquery.atwho */
-/*= require task_list */
+/* eslint-disable no-restricted-properties, func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-use-before-define, camelcase, no-unused-expressions, quotes, max-len, one-var, one-var-declaration-per-line, default-case, prefer-template, consistent-return, no-alert, no-return-assign, no-param-reassign, prefer-arrow-callback, no-else-return, comma-dangle, no-new, brace-style, no-lonely-if, vars-on-top, no-unused-vars, no-sequences, no-shadow, newline-per-chained-call, no-useless-escape */
+/* global Flash */
+/* global Autosave */
+/* global ResolveService */
+/* global mrRefreshWidgetUrl */
+
+import Cookies from 'js-cookie';
+
+require('./autosave');
+window.autosize = require('vendor/autosize');
+window.Dropzone = require('dropzone');
+require('./dropzone_input');
+require('./gfm_auto_complete');
+require('vendor/jquery.caret'); // required by jquery.atwho
+require('vendor/jquery.atwho');
+require('./task_list');
 
 (function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
 
   this.Notes = (function() {
-    var isMetaKey;
+    const MAX_VISIBLE_COMMIT_LIST_COUNT = 3;
 
     Notes.interval = null;
 
@@ -33,10 +40,10 @@
       this.resetMainTargetForm = bind(this.resetMainTargetForm, this);
       this.refresh = bind(this.refresh, this);
       this.keydownNoteText = bind(this.keydownNoteText, this);
+      this.toggleCommitList = bind(this.toggleCommitList, this);
       this.notes_url = notes_url;
       this.note_ids = note_ids;
       this.last_fetched_at = last_fetched_at;
-      this.view = view;
       this.noteable_url = document.URL;
       this.notesCountBadge || (this.notesCountBadge = $(".issuable-details").find(".notes-tab .badge"));
       this.basePollingInterval = 15000;
@@ -45,9 +52,25 @@
       this.addBinding();
       this.setPollingInterval();
       this.setupMainTargetNoteForm();
-      this.initTaskList();
+      this.taskList = new gl.TaskList({
+        dataType: 'note',
+        fieldName: 'note',
+        selector: '.notes'
+      });
+      this.collapseLongCommitList();
+      this.setViewType(view);
+
+      // We are in the Merge Requests page so we need another edit form for Changes tab
+      if (gl.utils.getPagePath(1) === 'merge_requests') {
+        $('.note-edit-form').clone()
+          .addClass('mr-note-edit-form').insertAfter('.note-edit-form');
+      }
     }
 
+    Notes.prototype.setViewType = function(view) {
+      this.view = Cookies.get('diff_view') || view;
+    };
+
     Notes.prototype.addBinding = function() {
       // add note to UI after creation
       $(document).on("ajax:success", ".js-main-target-form", this.addNote);
@@ -57,7 +80,7 @@
       // change note in UI after update
       $(document).on("ajax:success", "form.edit-note", this.updateNote);
       // Edit note link
-      $(document).on("click", ".js-note-edit", this.showEditForm);
+      $(document).on("click", ".js-note-edit", this.showEditForm.bind(this));
       $(document).on("click", ".note-edit-cancel", this.cancelEdit);
       // Reopen and close actions for Issue/MR combined with note form submit
       $(document).on("click", ".js-comment-button", this.updateCloseButton);
@@ -81,10 +104,13 @@
       $(document).on("click", ".js-add-diff-note-button", this.addDiffNote);
       // hide diff note form
       $(document).on("click", ".js-close-discussion-note-form", this.cancelDiscussionForm);
+      // toggle commit list
+      $(document).on("click", '.system-note-commit-list-toggler', this.toggleCommitList);
       // fetch notes when tab becomes visible
       $(document).on("visibilitychange", this.visibilityChange);
       // when issue status changes, we need to refresh data
       $(document).on("issuable:change", this.refresh);
+
       // when a key is clicked on the notes
       return $(document).on("keydown", ".js-note-text", this.keydownNoteText);
     };
@@ -108,15 +134,15 @@
       $(document).off("click", ".js-note-discard");
       $(document).off("keydown", ".js-note-text");
       $(document).off('click', '.js-comment-resolve-button');
-      $('.note .js-task-list-container').taskList('disable');
-      return $(document).off('tasklist:changed', '.note .js-task-list-container');
+      $(document).off("click", '.system-note-commit-list-toggler');
     };
 
     Notes.prototype.keydownNoteText = function(e) {
       var $textarea, discussionNoteForm, editNote, myLastNote, myLastNoteEditBtn, newText, originalText;
-      if (isMetaKey(e)) {
+      if (gl.utils.isMetaKey(e)) {
         return;
       }
+
       $textarea = $(e.target);
       // Edit previous note when UP arrow is hit
       switch (e.which) {
@@ -156,10 +182,6 @@
       }
     };
 
-    isMetaKey = function(e) {
-      return e.metaKey || e.ctrlKey || e.altKey || e.shiftKey;
-    };
-
     Notes.prototype.initRefresh = function() {
       clearInterval(Notes.interval);
       return Notes.interval = setInterval((function(_this) {
@@ -182,7 +204,7 @@
       this.refreshing = true;
       return $.ajax({
         url: this.notes_url,
-        data: "last_fetched_at=" + this.last_fetched_at,
+        headers: { "X-Last-Fetched-At": this.last_fetched_at },
         dataType: "json",
         success: (function(_this) {
           return function(data) {
@@ -206,7 +228,6 @@
       })(this));
     };
 
-
     /*
     Increase @pollingInterval up to 120 seconds on every function call,
     if `shouldReset` has a truthy value, 'null' or 'undefined' the variable
@@ -230,6 +251,24 @@
       return this.initRefresh();
     };
 
+    Notes.prototype.handleCreateChanges = function(note) {
+      var votesBlock;
+      if (typeof note === 'undefined') {
+        return;
+      }
+
+      if (note.commands_changes) {
+        if ('merge' in note.commands_changes) {
+          $.get(mrRefreshWidgetUrl);
+        }
+
+        if ('emoji_award' in note.commands_changes) {
+          votesBlock = $('.js-awards-block').eq(0);
+          gl.awardsHandler.addAwardToEmojiBar(votesBlock, note.commands_changes.emoji_award);
+          return gl.awardsHandler.scrollToAwards();
+        }
+      }
+    };
 
     /*
     Render note in main comments area.
@@ -238,38 +277,28 @@
      */
 
     Notes.prototype.renderNote = function(note) {
-      var $notesList, votesBlock;
+      var $notesList;
       if (!note.valid) {
-        if (note.award) {
-          new Flash('You have already awarded this emoji!', 'alert', this.parentTimeline);
-        }
-        else {
-          if (note.errors.commands_only) {
-            new Flash(note.errors.commands_only, 'notice', this.parentTimeline);
-            this.refresh();
-          }
+        if (note.errors.commands_only) {
+          new Flash(note.errors.commands_only, 'notice', this.parentTimeline);
+          this.refresh();
         }
         return;
       }
-      if (note.award) {
-        votesBlock = $('.js-awards-block').eq(0);
-        gl.awardsHandler.addAwardToEmojiBar(votesBlock, note.name);
-        return gl.awardsHandler.scrollToAwards();
-      // render note if it not present in loaded list
-      // or skip if rendered
-      } else if (this.isNewNote(note)) {
+
+      if (this.isNewNote(note)) {
         this.note_ids.push(note.id);
         $notesList = $('ul.main-notes-list');
         $notesList.append(note.html).syntaxHighlight();
         // Update datetime format on the recent note
         gl.utils.localTimeAgo($notesList.find("#note_" + note.id + " .js-timeago"), false);
-        this.initTaskList();
+        this.collapseLongCommitList();
+        this.taskList.init();
         this.refresh();
         return this.updateNotesCount(1);
       }
     };
 
-
     /*
     Check if note does not exists on page
      */
@@ -279,10 +308,9 @@
     };
 
     Notes.prototype.isParallelView = function() {
-      return this.view === 'parallel';
+      return Cookies.get('diff_view') === 'parallel';
     };
 
-
     /*
     Render note in discussion area.
 
@@ -290,7 +318,7 @@
      */
 
     Notes.prototype.renderDiscussionNote = function(note) {
-      var discussionContainer, form, note_html, row;
+      var discussionContainer, form, note_html, row, lineType, diffAvatarContainer;
       if (!this.isNewNote(note)) {
         return;
       }
@@ -300,39 +328,82 @@
         form = $("#new-discussion-note-form-" + note.original_discussion_id);
       }
       row = form.closest("tr");
+      lineType = this.isParallelView() ? form.find('#line_type').val() : 'old';
+      diffAvatarContainer = row.prevAll('.line_holder').first().find('.js-avatar-container.' + lineType + '_line');
       note_html = $(note.html);
-      note_html.syntaxHighlight();
+      note_html.renderGFM();
       // is this the first note of discussion?
       discussionContainer = $(".notes[data-discussion-id='" + note.discussion_id + "']");
       if ((note.original_discussion_id != null) && discussionContainer.length === 0) {
         discussionContainer = $(".notes[data-discussion-id='" + note.original_discussion_id + "']");
       }
       if (discussionContainer.length === 0) {
-        // insert the note and the reply button after the temp row
-        row.after(note.diff_discussion_html);
-        // remove the note (will be added again below)
-        row.next().find(".note").remove();
+        if (!this.isParallelView() || row.hasClass('js-temp-notes-holder')) {
+          // insert the note and the reply button after the temp row
+          row.after(note.diff_discussion_html);
+
+          // remove the note (will be added again below)
+          row.next().find(".note").remove();
+        } else {
+          // Merge new discussion HTML in
+          var $discussion = $(note.diff_discussion_html);
+          var $notes = $discussion.find('.notes[data-discussion-id="' + note.discussion_id + '"]');
+          var contentContainerClass = '.' + $notes.closest('.notes_content')
+            .attr('class')
+            .split(' ')
+            .join('.');
+
+          // remove the note (will be added again below)
+          $notes.find('.note').remove();
+
+          row.find(contentContainerClass + ' .content').append($notes.closest('.content').children());
+        }
         // Before that, the container didn't exist
         discussionContainer = $(".notes[data-discussion-id='" + note.discussion_id + "']");
         // Add note to 'Changes' page discussions
         discussionContainer.append(note_html);
         // Init discussion on 'Discussion' page if it is merge request page
         if ($('body').attr('data-page').indexOf('projects:merge_request') === 0) {
-          $('ul.main-notes-list').append(note.discussion_html).syntaxHighlight();
+          $('ul.main-notes-list').append(note.discussion_html).renderGFM();
         }
       } else {
         // append new note to all matching discussions
         discussionContainer.append(note_html);
       }
 
-      if (typeof DiffNotesApp !== 'undefined') {
-        DiffNotesApp.compileComponents();
+      if (typeof gl.diffNotesCompileComponents !== 'undefined' && note.discussion_id) {
+        gl.diffNotesCompileComponents();
+        this.renderDiscussionAvatar(diffAvatarContainer, note);
       }
 
-      gl.utils.localTimeAgo($('.js-timeago', note_html), false);
+      gl.utils.localTimeAgo($('.js-timeago'), false);
       return this.updateNotesCount(1);
     };
 
+    Notes.prototype.getLineHolder = function(changesDiscussionContainer) {
+      return $(changesDiscussionContainer).closest('.notes_holder')
+        .prevAll('.line_holder')
+        .first()
+        .get(0);
+    };
+
+    Notes.prototype.renderDiscussionAvatar = function(diffAvatarContainer, note) {
+      var commentButton = diffAvatarContainer.find('.js-add-diff-note-button');
+      var avatarHolder = diffAvatarContainer.find('.diff-comment-avatar-holders');
+
+      if (!avatarHolder.length) {
+        avatarHolder = document.createElement('diff-note-avatars');
+        avatarHolder.setAttribute('discussion-id', note.discussion_id);
+
+        diffAvatarContainer.append(avatarHolder);
+
+        gl.diffNotesCompileComponents();
+      }
+
+      if (commentButton.length) {
+        commentButton.remove();
+      }
+    };
 
     /*
     Called in response the main target form has been successfully submitted.
@@ -365,7 +436,6 @@
       return form.find(".js-note-text").trigger("input");
     };
 
-
     /*
     Shows the main form and does some setup on it.
 
@@ -390,7 +460,6 @@
       return this.parentTimeline = form.parents('.timeline');
     };
 
-
     /*
     General note form setup.
 
@@ -402,12 +471,11 @@
 
     Notes.prototype.setupNoteForm = function(form) {
       var textarea;
-      new GLForm(form);
+      new gl.GLForm(form);
       textarea = form.find(".js-note-text");
       return new Autosave(textarea, ["Note", form.find("#note_noteable_type").val(), form.find("#note_noteable_id").val(), form.find("#note_commit_id").val(), form.find("#note_type").val(), form.find("#note_line_code").val(), form.find("#note_position").val()]);
     };
 
-
     /*
     Called in response to the new note form being submitted
 
@@ -415,6 +483,7 @@
      */
 
     Notes.prototype.addNote = function(xhr, note, status) {
+      this.handleCreateChanges(note);
       return this.renderNote(note);
     };
 
@@ -422,7 +491,6 @@
       return new Flash('Your comment could not be submitted! Please check your network connection and try again.', 'alert', this.parentTimeline);
     };
 
-
     /*
     Called in response to the new note form being submitted
 
@@ -433,12 +501,12 @@
       var $form = $(xhr.target);
 
       if ($form.attr('data-resolve-all') != null) {
-        var projectPath = $form.data('project-path')
-            discussionId = $form.data('discussion-id'),
-            mergeRequestId = $form.data('noteable-iid');
+        var projectPath = $form.data('project-path');
+        var discussionId = $form.data('discussion-id');
+        var mergeRequestId = $form.data('noteable-iid');
 
         if (ResolveService != null) {
-          ResolveService.toggleResolveForDiscussion(projectPath, mergeRequestId, discussionId);
+          ResolveService.toggleResolveForDiscussion(mergeRequestId, discussionId);
         }
       }
 
@@ -447,7 +515,6 @@
       this.removeDiscussionNoteForm($form);
     };
 
-
     /*
     Called in response to the edit note form being submitted
 
@@ -458,64 +525,70 @@
       var $html, $note_li;
       // Convert returned HTML to a jQuery object so we can modify it further
       $html = $(note.html);
+      this.revertNoteEditForm();
       gl.utils.localTimeAgo($('.js-timeago', $html));
-      $html.syntaxHighlight();
+      $html.renderGFM();
       $html.find('.js-task-list-container').taskList('enable');
       // Find the note's `li` element by ID and replace it with the updated HTML
       $note_li = $('.note-row-' + note.id);
 
       $note_li.replaceWith($html);
 
-      if (typeof DiffNotesApp !== 'undefined') {
-        DiffNotesApp.compileComponents();
+      if (typeof gl.diffNotesCompileComponents !== 'undefined') {
+        gl.diffNotesCompileComponents();
       }
     };
 
+    Notes.prototype.checkContentToAllowEditing = function($el) {
+      var initialContent = $el.find('.original-note-content').text().trim();
+      var currentContent = $el.find('.note-textarea').val();
+      var isAllowed = true;
+
+      if (currentContent === initialContent) {
+        this.removeNoteEditForm($el);
+      }
+      else {
+        var $buttons = $el.find('.note-form-actions');
+        var isWidgetVisible = gl.utils.isInViewport($el.get(0));
+
+        if (!isWidgetVisible) {
+          gl.utils.scrollToElement($el);
+        }
+
+        $el.find('.js-edit-warning').show();
+        isAllowed = false;
+      }
+
+      return isAllowed;
+    };
 
     /*
     Called in response to clicking the edit note link
 
     Replaces the note text with the note edit form
     Adds a data attribute to the form with the original content of the note for cancellations
-     */
-
+    */
     Notes.prototype.showEditForm = function(e, scrollTo, myLastNote) {
-      var $noteText, done, form, note;
       e.preventDefault();
-      note = $(this).closest(".note");
-      note.addClass("is-editting");
-      form = note.find(".note-edit-form");
-      form.addClass('current-note-edit-form');
-      // Show the attachment delete link
-      note.find(".js-note-attachment-delete").show();
-      done = function($noteText) {
-        var noteTextVal;
-        // Neat little trick to put the cursor at the end
-        noteTextVal = $noteText.val();
-        // Store the original note text in a data attribute to retrieve if a user cancels edit.
-        form.find('form.edit-note').data('original-note', noteTextVal);
-        return $noteText.val('').val(noteTextVal);
-      };
-      new GLForm(form);
-      if ((scrollTo != null) && (myLastNote != null)) {
-        // scroll to the bottom
-        // so the open of the last element doesn't make a jump
-        $('html, body').scrollTop($(document).height());
-        return $('html, body').animate({
-          scrollTop: myLastNote.offset().top - 150
-        }, 500, function() {
-          var $noteText;
-          $noteText = form.find(".js-note-text");
-          $noteText.focus();
-          return done($noteText);
-        });
-      } else {
-        $noteText = form.find('.js-note-text');
-        $noteText.focus();
-        return done($noteText);
+
+      var $target = $(e.target);
+      var $editForm = $(this.getEditFormSelector($target));
+      var $note = $target.closest('.note');
+      var $currentlyEditing = $('.note.is-editting:visible');
+
+      if ($currentlyEditing.length) {
+        var isEditAllowed = this.checkContentToAllowEditing($currentlyEditing);
+
+        if (!isEditAllowed) {
+          return;
+        }
       }
-    };
 
+      $note.find('.js-note-attachment-delete').show();
+      $editForm.addClass('current-note-edit-form');
+      $note.addClass('is-editting');
+      this.putEditFormInPlace($target);
+    };
 
     /*
     Called in response to clicking the edit note link
@@ -524,22 +597,43 @@
      */
 
     Notes.prototype.cancelEdit = function(e) {
-      var note;
       e.preventDefault();
-      note = $(e.target).closest('.note');
+      var $target = $(e.target);
+      var note = $target.closest('.note');
+      note.find('.js-edit-warning').hide();
+      this.revertNoteEditForm($target);
       return this.removeNoteEditForm(note);
     };
 
+    Notes.prototype.revertNoteEditForm = function($target) {
+      $target = $target || $('.note.is-editting:visible');
+      var selector = this.getEditFormSelector($target);
+      var $editForm = $(selector);
+
+      $editForm.insertBefore('.notes-form');
+      $editForm.find('.js-comment-button').enable();
+      $editForm.find('.js-edit-warning').hide();
+    };
+
+    Notes.prototype.getEditFormSelector = function($el) {
+      var selector = '.note-edit-form:not(.mr-note-edit-form)';
+
+      if ($el.parents('#diffs').length) {
+        selector = '.note-edit-form.mr-note-edit-form';
+      }
+
+      return selector;
+    };
+
     Notes.prototype.removeNoteEditForm = function(note) {
-      var form;
-      form = note.find(".current-note-edit-form");
-      note.removeClass("is-editting");
-      form.removeClass("current-note-edit-form");
+      var form = note.find('.current-note-edit-form');
+      note.removeClass('is-editting');
+      form.removeClass('current-note-edit-form');
+      form.find('.js-edit-warning').hide();
       // Replace markdown textarea text with original note text.
-      return form.find(".js-note-text").val(form.find('form.edit-note').data('original-note'));
+      return form.find('.js-note-text').val(form.find('form.edit-note').data('original-note'));
     };
 
-
     /*
     Called in response to deleting a note of any kind.
 
@@ -548,9 +642,14 @@
      */
 
     Notes.prototype.removeNote = function(e) {
-      var noteId;
-      noteId = $(e.currentTarget).closest(".note").attr("id");
-      $(".note[id='" + noteId + "']").each((function(_this) {
+      var noteElId, noteId, dataNoteId, $note, lineHolder;
+      $note = $(e.currentTarget).closest('.note');
+      noteElId = $note.attr('id');
+      noteId = $note.attr('data-note-id');
+      lineHolder = $(e.currentTarget).closest('.notes[data-discussion-id]')
+        .closest('.notes_holder')
+        .prev('.line_holder');
+      $(".note[id='" + noteElId + "']").each((function(_this) {
         // A same note appears in the "Discussion" and in the "Changes" tab, we have
         // to remove all. Using $(".note[id='noteId']") ensure we get all the notes,
         // where $("#noteId") would return only one.
@@ -559,20 +658,27 @@
           note = $(el);
           notes = note.closest(".notes");
 
-          if (typeof DiffNotesApp !== "undefined" && DiffNotesApp !== null) {
-            ref = DiffNotesApp.$refs[noteId];
-
-            if (ref) {
-              ref.$destroy(true);
+          if (typeof gl.diffNotesCompileComponents !== 'undefined') {
+            if (gl.diffNoteApps[noteElId]) {
+              gl.diffNoteApps[noteElId].$destroy();
             }
           }
 
+          note.remove();
+
           // check if this is the last note for this line
-          if (notes.find(".note").length === 1) {
+          if (notes.find(".note").length === 0) {
+            var notesTr = notes.closest("tr");
+
             // "Discussions" tab
             notes.closest(".timeline-entry").remove();
-            // "Changes" tab / commit view
-            notes.closest("tr").remove();
+
+            if (!_this.isParallelView() || notesTr.find('.note').length === 0) {
+              // "Changes" tab / commit view
+              notesTr.remove();
+            } else {
+              notes.closest('.content').empty();
+            }
           }
           return note.remove();
         };
@@ -581,7 +687,6 @@
       return this.updateNotesCount(-1);
     };
 
-
     /*
     Called in response to clicking the delete attachment link
 
@@ -598,7 +703,6 @@
       return note.find(".current-note-edit-form").remove();
     };
 
-
     /*
     Called when clicking on the "reply" button for a diff line.
 
@@ -618,7 +722,6 @@
       return this.setupDiscussionNoteForm(replyLink, form);
     };
 
-
     /*
     Shows the diff or discussion form and does some setup on it.
 
@@ -643,11 +746,12 @@
       form.find('.js-note-target-close').remove();
       this.setupNoteForm(form);
 
-      if (typeof DiffNotesApp !== 'undefined') {
+      if (typeof gl.diffNotesCompileComponents !== 'undefined') {
         var $commentBtn = form.find('comment-and-resolve-btn');
         $commentBtn
           .attr(':discussion-id', "'" + dataHolder.data('discussionId') + "'");
-        DiffNotesApp.$compile($commentBtn.get(0));
+
+        gl.diffNotesCompileComponents();
       }
 
       form.find(".js-note-text").focus();
@@ -659,7 +763,6 @@
         .addClass("discussion-form js-discussion-note-form");
     };
 
-
     /*
     Called when clicking on the "add a comment" button on the side of a diff line.
 
@@ -668,15 +771,16 @@
      */
 
     Notes.prototype.addDiffNote = function(e) {
-      var $link, addForm, hasNotes, lineType, newForm, nextRow, noteForm, notesContent, replyButton, row, rowCssToAdd, targetContent;
+      var $link, addForm, hasNotes, lineType, newForm, nextRow, noteForm, notesContent, notesContentSelector, replyButton, row, rowCssToAdd, targetContent, isDiffCommentAvatar;
       e.preventDefault();
-      $link = $(e.currentTarget);
+      $link = $(e.currentTarget || e.target);
       row = $link.closest("tr");
       nextRow = row.next();
       hasNotes = nextRow.is(".notes_holder");
       addForm = false;
       notesContentSelector = ".notes_content";
       rowCssToAdd = "<tr class=\"notes_holder js-temp-notes-holder\"><td class=\"notes_line\" colspan=\"2\"></td><td class=\"notes_content\"><div class=\"content\"></div></td></tr>";
+      isDiffCommentAvatar = $link.hasClass('js-diff-comment-avatar');
       // In parallel view, look inside the correct left/right pane
       if (this.isParallelView()) {
         lineType = $link.data("lineType");
@@ -684,7 +788,9 @@
         rowCssToAdd = "<tr class=\"notes_holder js-temp-notes-holder\"><td class=\"notes_line old\"></td><td class=\"notes_content parallel old\"><div class=\"content\"></div></td><td class=\"notes_line new\"></td><td class=\"notes_content parallel new\"><div class=\"content\"></div></td></tr>";
       }
       notesContentSelector += " .content";
-      if (hasNotes) {
+      notesContent = nextRow.find(notesContentSelector);
+
+      if (hasNotes && !isDiffCommentAvatar) {
         nextRow.show();
         notesContent = nextRow.find(notesContentSelector);
         if (notesContent.length) {
@@ -701,13 +807,21 @@
             }
           }
         }
-      } else {
+      } else if (!isDiffCommentAvatar) {
         // add a notes row and insert the form
         row.after(rowCssToAdd);
         nextRow = row.next();
         notesContent = nextRow.find(notesContentSelector);
         addForm = true;
+      } else {
+        nextRow.show();
+        notesContent.toggle(!notesContent.is(':visible'));
+
+        if (!nextRow.find('.content:not(:empty)').is(':visible')) {
+          nextRow.hide();
+        }
       }
+
       if (addForm) {
         newForm = this.formClone.clone();
         newForm.appendTo(notesContent);
@@ -716,7 +830,6 @@
       }
     };
 
-
     /*
     Called in response to "cancel" on a diff note form.
 
@@ -750,7 +863,6 @@
       return this.removeDiscussionNoteForm(form);
     };
 
-
     /*
     Called after an attachment file has been selected.
 
@@ -765,7 +877,6 @@
       return form.find(".js-attachment-filename").text(filename);
     };
 
-
     /*
     Called when the tab visibility changes
      */
@@ -828,26 +939,37 @@
       }
     };
 
-    Notes.prototype.initTaskList = function() {
-      this.enableTaskList();
-      return $(document).on('tasklist:changed', '.note .js-task-list-container', this.updateTaskList);
-    };
+    Notes.prototype.putEditFormInPlace = function($el) {
+      var $editForm = $(this.getEditFormSelector($el));
+      var $note = $el.closest('.note');
 
-    Notes.prototype.enableTaskList = function() {
-      return $('.note .js-task-list-container').taskList('enable');
-    };
+      $editForm.insertAfter($note.find('.note-text'));
+
+      var $originalContentEl = $note.find('.original-note-content');
+      var originalContent = $originalContentEl.text().trim();
+      var postUrl = $originalContentEl.data('post-url');
+      var targetId = $originalContentEl.data('target-id');
+      var targetType = $originalContentEl.data('target-type');
+
+      new gl.GLForm($editForm.find('form'));
 
-    Notes.prototype.updateTaskList = function() {
-      return $('form', this).submit();
+      $editForm.find('form')
+        .attr('action', postUrl)
+        .attr('data-remote', 'true');
+      $editForm.find('.js-form-target-id').val(targetId);
+      $editForm.find('.js-form-target-type').val(targetType);
+      $editForm.find('.js-note-text').focus().val(originalContent);
+      $editForm.find('.js-md-write-button').trigger('click');
+      $editForm.find('.referenced-users').hide();
     };
 
     Notes.prototype.updateNotesCount = function(updateCount) {
-      return this.notesCountBadge.text(parseInt(this.notesCountBadge.text()) + updateCount);
+      return this.notesCountBadge.text(parseInt(this.notesCountBadge.text(), 10) + updateCount);
     };
 
-    Notes.prototype.resolveDiscussion = function () {
-      var $this = $(this),
-          discussionId = $this.attr('data-discussion-id');
+    Notes.prototype.resolveDiscussion = function() {
+      var $this = $(this);
+      var discussionId = $this.attr('data-discussion-id');
 
       $this
         .closest('form')
@@ -856,8 +978,37 @@
         .attr('data-project-path', $this.attr('data-project-path'));
     };
 
-    return Notes;
+    Notes.prototype.toggleCommitList = function(e) {
+      const $element = $(e.currentTarget);
+      const $closestSystemCommitList = $element.siblings('.system-note-commit-list');
 
-  })();
+      $element.find('.fa').toggleClass('fa-angle-down').toggleClass('fa-angle-up');
+      $closestSystemCommitList.toggleClass('hide-shade');
+    };
+
+    /**
+    Scans system notes with `ul` elements in system note body
+    then collapse long commit list pushed by user to make it less
+    intrusive.
+     */
+    Notes.prototype.collapseLongCommitList = function() {
+      const systemNotes = $('#notes-list').find('li.system-note').has('ul');
+
+      $.each(systemNotes, function(index, systemNote) {
+        const $systemNote = $(systemNote);
+        const headerMessage = $systemNote.find('.note-text').find('p:first').text().replace(':', '');
 
-}).call(this);
+        $systemNote.find('.note-header .system-note-message').html(headerMessage);
+
+        if ($systemNote.find('li').length > MAX_VISIBLE_COMMIT_LIST_COUNT) {
+          $systemNote.find('.note-text').addClass('system-note-commit-list');
+          $systemNote.find('.system-note-commit-list-toggler').show();
+        } else {
+          $systemNote.find('.note-text').addClass('system-note-commit-list hide-shade');
+        }
+      });
+    };
+
+    return Notes;
+  })();
+}).call(window);
diff --git a/app/assets/javascripts/notifications_dropdown.js b/app/assets/javascripts/notifications_dropdown.js
index ef3f2c6ae73..838356133cd 100644
--- a/app/assets/javascripts/notifications_dropdown.js
+++ b/app/assets/javascripts/notifications_dropdown.js
@@ -1,4 +1,6 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, one-var, no-var, one-var-declaration-per-line, no-unused-vars, consistent-return, prefer-arrow-callback, no-else-return, max-len */
+/* global Flash */
+
 (function() {
   this.NotificationsDropdown = (function() {
     function NotificationsDropdown() {
@@ -17,7 +19,7 @@
       });
       $(document).off('ajax:success', '.notification-form').on('ajax:success', '.notification-form', function(e, data) {
         if (data.saved) {
-          return $(e.currentTarget).closest('.notification-dropdown').replaceWith(data.html);
+          return $(e.currentTarget).closest('.js-notification-dropdown').replaceWith(data.html);
         } else {
           return new Flash('Failed to save new settings', 'alert');
         }
@@ -25,7 +27,5 @@
     }
 
     return NotificationsDropdown;
-
   })();
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/notifications_form.js b/app/assets/javascripts/notifications_form.js
index 6fbec8efe9b..5005af90d48 100644
--- a/app/assets/javascripts/notifications_form.js
+++ b/app/assets/javascripts/notifications_form.js
@@ -1,6 +1,6 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, one-var, one-var-declaration-per-line, newline-per-chained-call, comma-dangle, consistent-return, prefer-arrow-callback, max-len */
 (function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
 
   this.NotificationsForm = (function() {
     function NotificationsForm() {
@@ -53,7 +53,5 @@
     };
 
     return NotificationsForm;
-
   })();
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/pager.js b/app/assets/javascripts/pager.js
index 2e4dc62273e..5f6bc902cf8 100644
--- a/app/assets/javascripts/pager.js
+++ b/app/assets/javascripts/pager.js
@@ -1,64 +1,77 @@
-/* eslint-disable */
-(function() {
-  this.Pager = {
-    init: function(limit, preload, disable, callback) {
-      this.limit = limit != null ? limit : 0;
-      this.disable = disable != null ? disable : false;
-      this.callback = callback != null ? callback : $.noop;
+require('~/lib/utils/common_utils');
+require('~/lib/utils/url_utility');
+
+(() => {
+  const ENDLESS_SCROLL_BOTTOM_PX = 400;
+  const ENDLESS_SCROLL_FIRE_DELAY_MS = 1000;
+
+  const Pager = {
+    init(limit = 0, preload = false, disable = false, callback = $.noop) {
+      this.url = $('.content_list').data('href') || gl.utils.removeParams(['limit', 'offset']);
+      this.limit = limit;
+      this.offset = parseInt(gl.utils.getParameterByName('offset'), 10) || this.limit;
+      this.disable = disable;
+      this.callback = callback;
       this.loading = $('.loading').first();
       if (preload) {
         this.offset = 0;
         this.getOld();
-      } else {
-        this.offset = this.limit;
       }
-      return this.initLoadMore();
+      this.initLoadMore();
     },
-    getOld: function() {
+
+    getOld() {
       this.loading.show();
-      return $.ajax({
-        type: "GET",
-        url: $(".content_list").data('href') || location.href,
-        data: "limit=" + this.limit + "&offset=" + this.offset,
-        complete: (function(_this) {
-          return function() {
-            return _this.loading.hide();
-          };
-        })(this),
-        success: function(data) {
-          Pager.append(data.count, data.html);
-          return Pager.callback();
+      $.ajax({
+        type: 'GET',
+        url: this.url,
+        data: `limit=${this.limit}&offset=${this.offset}`,
+        dataType: 'json',
+        error: () => this.loading.hide(),
+        success: (data) => {
+          this.append(data.count, data.html);
+          this.callback();
+
+          // keep loading until we've filled the viewport height
+          if (!this.disable && !this.isScrollable()) {
+            this.getOld();
+          } else {
+            this.loading.hide();
+          }
         },
-        dataType: "json"
       });
     },
-    append: function(count, html) {
-      $(".content_list").append(html);
+
+    append(count, html) {
+      $('.content_list').append(html);
       if (count > 0) {
-        return this.offset += count;
+        this.offset += count;
       } else {
-        return this.disable = true;
+        this.disable = true;
       }
     },
-    initLoadMore: function() {
+
+    isScrollable() {
+      const $w = $(window);
+      return $(document).height() > $w.height() + $w.scrollTop() + ENDLESS_SCROLL_BOTTOM_PX;
+    },
+
+    initLoadMore() {
       $(document).unbind('scroll');
-      return $(document).endlessScroll({
-        bottomPixels: 400,
-        fireDelay: 1000,
+      $(document).endlessScroll({
+        bottomPixels: ENDLESS_SCROLL_BOTTOM_PX,
+        fireDelay: ENDLESS_SCROLL_FIRE_DELAY_MS,
         fireOnce: true,
-        ceaseFire: function() {
-          return Pager.disable;
+        ceaseFire: () => this.disable === true,
+        callback: () => {
+          if (!this.loading.is(':visible')) {
+            this.loading.show();
+            this.getOld();
+          }
         },
-        callback: (function(_this) {
-          return function(i) {
-            if (!_this.loading.is(':visible')) {
-              _this.loading.show();
-              return Pager.getOld();
-            }
-          };
-        })(this)
       });
-    }
+    },
   };
 
-}).call(this);
+  window.Pager = Pager;
+})();
diff --git a/app/assets/javascripts/pipelines.js b/app/assets/javascripts/pipelines.js
new file mode 100644
index 00000000000..9203abefbbc
--- /dev/null
+++ b/app/assets/javascripts/pipelines.js
@@ -0,0 +1,38 @@
+/* eslint-disable no-new, guard-for-in, no-restricted-syntax, no-continue, no-param-reassign, max-len */
+
+require('./lib/utils/bootstrap_linked_tabs');
+
+((global) => {
+  class Pipelines {
+    constructor(options = {}) {
+      if (options.initTabs && options.tabsOptions) {
+        new global.LinkedTabs(options.tabsOptions);
+      }
+
+      this.addMarginToBuildColumns();
+    }
+
+    addMarginToBuildColumns() {
+      this.pipelineGraph = document.querySelector('.js-pipeline-graph');
+
+      const secondChildBuildNodes = this.pipelineGraph.querySelectorAll('.build:nth-child(2)');
+
+      for (const buildNodeIndex in secondChildBuildNodes) {
+        const buildNode = secondChildBuildNodes[buildNodeIndex];
+        const firstChildBuildNode = buildNode.previousElementSibling;
+        if (!firstChildBuildNode || !firstChildBuildNode.matches('.build')) continue;
+        const multiBuildColumn = buildNode.closest('.stage-column');
+        const previousColumn = multiBuildColumn.previousElementSibling;
+        if (!previousColumn || !previousColumn.matches('.stage-column')) continue;
+        multiBuildColumn.classList.add('left-margin');
+        firstChildBuildNode.classList.add('left-connector');
+        const columnBuilds = previousColumn.querySelectorAll('.build');
+        if (columnBuilds.length === 1) previousColumn.classList.add('no-margin');
+      }
+
+      this.pipelineGraph.classList.remove('hidden');
+    }
+  }
+
+  global.Pipelines = Pipelines;
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/pipelines.js.es6 b/app/assets/javascripts/pipelines.js.es6
deleted file mode 100644
index e6fada5c84c..00000000000
--- a/app/assets/javascripts/pipelines.js.es6
+++ /dev/null
@@ -1,44 +0,0 @@
-/* eslint-disable */
-((global) => {
-
-  class Pipelines {
-    constructor() {
-      this.initGraphToggle();
-      this.addMarginToBuildColumns();
-    }
-
-    initGraphToggle() {
-      this.pipelineGraph = document.querySelector('.pipeline-graph');
-      this.toggleButton = document.querySelector('.toggle-pipeline-btn');
-      this.toggleButtonText = this.toggleButton.querySelector('.toggle-btn-text');
-      this.toggleButton.addEventListener('click', this.toggleGraph.bind(this));
-    }
-
-    toggleGraph() {
-      const graphCollapsed = this.pipelineGraph.classList.contains('graph-collapsed');
-      this.toggleButton.classList.toggle('graph-collapsed');
-      this.pipelineGraph.classList.toggle('graph-collapsed');
-      this.toggleButtonText.textContent = graphCollapsed ? 'Hide' : 'Expand';
-    }
-
-    addMarginToBuildColumns() {
-      const secondChildBuildNodes = this.pipelineGraph.querySelectorAll('.build:nth-child(2)');
-      for (buildNodeIndex in secondChildBuildNodes) {
-        const buildNode = secondChildBuildNodes[buildNodeIndex];
-        const firstChildBuildNode = buildNode.previousElementSibling;
-        if (!firstChildBuildNode || !firstChildBuildNode.matches('.build')) continue;
-        const multiBuildColumn = buildNode.closest('.stage-column');
-        const previousColumn = multiBuildColumn.previousElementSibling;
-        if (!previousColumn || !previousColumn.matches('.stage-column')) continue;
-        multiBuildColumn.classList.add('left-margin');
-        firstChildBuildNode.classList.add('left-connector');
-        const columnBuilds = previousColumn.querySelectorAll('.build');
-        if (columnBuilds.length === 1) previousColumn.classList.add('no-margin');
-      }
-      this.pipelineGraph.classList.remove('hidden');
-    }
-  }
-
-  global.Pipelines = Pipelines;
-
-})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/preview_markdown.js b/app/assets/javascripts/preview_markdown.js
index f2a45a18bed..07eea98e737 100644
--- a/app/assets/javascripts/preview_markdown.js
+++ b/app/assets/javascripts/preview_markdown.js
@@ -1,13 +1,18 @@
-/* eslint-disable */
+/* eslint-disable func-names, no-var, object-shorthand, comma-dangle, prefer-arrow-callback */
+
 // MarkdownPreview
 //
 // Handles toggling the "Write" and "Preview" tab clicks, rendering the preview,
 // and showing a warning when more than `x` users are referenced.
 //
-(function() {
-  var lastTextareaPreviewed, markdownPreview, previewButtonSelector, writeButtonSelector;
-
-  this.MarkdownPreview = (function() {
+(function () {
+  var lastTextareaPreviewed;
+  var lastTextareaHeight = null;
+  var markdownPreview;
+  var previewButtonSelector;
+  var writeButtonSelector;
+
+  window.MarkdownPreview = (function () {
     function MarkdownPreview() {}
 
     // Minimum number of users referenced before triggering a warning
@@ -15,75 +20,73 @@
 
     MarkdownPreview.prototype.ajaxCache = {};
 
-    MarkdownPreview.prototype.showPreview = function(form) {
-      var mdText, preview;
-      preview = form.find('.js-md-preview');
-      mdText = form.find('textarea.markdown-area').val();
+    MarkdownPreview.prototype.showPreview = function ($form) {
+      var mdText;
+      var preview = $form.find('.js-md-preview');
+      if (preview.hasClass('md-preview-loading')) {
+        return;
+      }
+      mdText = $form.find('textarea.markdown-area').val();
+
       if (mdText.trim().length === 0) {
         preview.text('Nothing to preview.');
-        return this.hideReferencedUsers(form);
+        this.hideReferencedUsers($form);
       } else {
-        preview.text('Loading...');
-        return this.renderMarkdown(mdText, (function(_this) {
-          return function(response) {
-            preview.html(response.body);
-            preview.syntaxHighlight();
-            return _this.renderReferencedUsers(response.references.users, form);
-          };
-        })(this));
+        preview.addClass('md-preview-loading').text('Loading...');
+        this.fetchMarkdownPreview(mdText, (function (response) {
+          preview.removeClass('md-preview-loading').html(response.body);
+          preview.renderGFM();
+          this.renderReferencedUsers(response.references.users, $form);
+        }).bind(this));
       }
     };
 
-    MarkdownPreview.prototype.renderMarkdown = function(text, success) {
+    MarkdownPreview.prototype.fetchMarkdownPreview = function (text, success) {
       if (!window.preview_markdown_path) {
         return;
       }
       if (text === this.ajaxCache.text) {
-        return success(this.ajaxCache.response);
+        success(this.ajaxCache.response);
+        return;
       }
-      return $.ajax({
+      $.ajax({
         type: 'POST',
         url: window.preview_markdown_path,
         data: {
           text: text
         },
         dataType: 'json',
-        success: (function(_this) {
-          return function(response) {
-            _this.ajaxCache = {
-              text: text,
-              response: response
-            };
-            return success(response);
+        success: (function (response) {
+          this.ajaxCache = {
+            text: text,
+            response: response
           };
-        })(this)
+          success(response);
+        }).bind(this)
       });
     };
 
-    MarkdownPreview.prototype.hideReferencedUsers = function(form) {
-      var referencedUsers;
-      referencedUsers = form.find('.referenced-users');
-      return referencedUsers.hide();
+    MarkdownPreview.prototype.hideReferencedUsers = function ($form) {
+      $form.find('.referenced-users').hide();
     };
 
-    MarkdownPreview.prototype.renderReferencedUsers = function(users, form) {
+    MarkdownPreview.prototype.renderReferencedUsers = function (users, $form) {
       var referencedUsers;
-      referencedUsers = form.find('.referenced-users');
+      referencedUsers = $form.find('.referenced-users');
       if (referencedUsers.length) {
         if (users.length >= this.referenceThreshold) {
           referencedUsers.show();
-          return referencedUsers.find('.js-referenced-users-count').text(users.length);
+          referencedUsers.find('.js-referenced-users-count').text(users.length);
         } else {
-          return referencedUsers.hide();
+          referencedUsers.hide();
         }
       }
     };
 
     return MarkdownPreview;
+  }());
 
-  })();
-
-  markdownPreview = new MarkdownPreview();
+  markdownPreview = new window.MarkdownPreview();
 
   previewButtonSelector = '.js-md-preview-button';
 
@@ -91,71 +94,75 @@
 
   lastTextareaPreviewed = null;
 
-  $.fn.setupMarkdownPreview = function() {
-    var $form, form_textarea;
-    $form = $(this);
-    form_textarea = $form.find('textarea.markdown-area');
-    form_textarea.on('input', function() {
-      return markdownPreview.hideReferencedUsers($form);
-    });
-    return form_textarea.on('blur', function() {
-      return markdownPreview.showPreview($form);
+  $.fn.setupMarkdownPreview = function () {
+    var $form = $(this);
+    $form.find('textarea.markdown-area').on('input', function () {
+      markdownPreview.hideReferencedUsers($form);
     });
   };
 
-  $(document).on('markdown-preview:show', function(e, $form) {
+  $(document).on('markdown-preview:show', function (e, $form) {
     if (!$form) {
       return;
     }
+
     lastTextareaPreviewed = $form.find('textarea.markdown-area');
+    lastTextareaHeight = lastTextareaPreviewed.height();
+
     // toggle tabs
     $form.find(writeButtonSelector).parent().removeClass('active');
     $form.find(previewButtonSelector).parent().addClass('active');
+
     // toggle content
     $form.find('.md-write-holder').hide();
     $form.find('.md-preview-holder').show();
-    return markdownPreview.showPreview($form);
+    markdownPreview.showPreview($form);
   });
 
-  $(document).on('markdown-preview:hide', function(e, $form) {
+  $(document).on('markdown-preview:hide', function (e, $form) {
     if (!$form) {
       return;
     }
     lastTextareaPreviewed = null;
+
+    if (lastTextareaHeight) {
+      $form.find('textarea.markdown-area').height(lastTextareaHeight);
+    }
+
     // toggle tabs
     $form.find(writeButtonSelector).parent().addClass('active');
     $form.find(previewButtonSelector).parent().removeClass('active');
+
     // toggle content
     $form.find('.md-write-holder').show();
     $form.find('textarea.markdown-area').focus();
-    return $form.find('.md-preview-holder').hide();
+    $form.find('.md-preview-holder').hide();
   });
 
-  $(document).on('markdown-preview:toggle', function(e, keyboardEvent) {
+  $(document).on('markdown-preview:toggle', function (e, keyboardEvent) {
     var $target;
     $target = $(keyboardEvent.target);
     if ($target.is('textarea.markdown-area')) {
       $(document).triggerHandler('markdown-preview:show', [$target.closest('form')]);
-      return keyboardEvent.preventDefault();
+      keyboardEvent.preventDefault();
     } else if (lastTextareaPreviewed) {
       $target = lastTextareaPreviewed;
       $(document).triggerHandler('markdown-preview:hide', [$target.closest('form')]);
-      return keyboardEvent.preventDefault();
+      keyboardEvent.preventDefault();
     }
   });
 
-  $(document).on('click', previewButtonSelector, function(e) {
+  $(document).on('click', previewButtonSelector, function (e) {
     var $form;
     e.preventDefault();
     $form = $(this).closest('form');
-    return $(document).triggerHandler('markdown-preview:show', [$form]);
+    $(document).triggerHandler('markdown-preview:show', [$form]);
   });
 
-  $(document).on('click', writeButtonSelector, function(e) {
+  $(document).on('click', writeButtonSelector, function (e) {
     var $form;
     e.preventDefault();
     $form = $(this).closest('form');
-    return $(document).triggerHandler('markdown-preview:hide', [$form]);
+    $(document).triggerHandler('markdown-preview:hide', [$form]);
   });
-
-}).call(this);
+}());
diff --git a/app/assets/javascripts/profile/gl_crop.js b/app/assets/javascripts/profile/gl_crop.js
new file mode 100644
index 00000000000..cf1566eeb87
--- /dev/null
+++ b/app/assets/javascripts/profile/gl_crop.js
@@ -0,0 +1,173 @@
+/* eslint-disable no-useless-escape, max-len, quotes, no-var, no-underscore-dangle, func-names, space-before-function-paren, no-unused-vars, no-return-assign, object-shorthand, one-var, one-var-declaration-per-line, comma-dangle, consistent-return, class-methods-use-this, new-parens */
+
+import 'vendor/cropper';
+
+((global) => {
+  // Matches everything but the file name
+  const FILENAMEREGEX = /^.*[\\\/]/;
+
+  class GitLabCrop {
+    constructor(input, { filename, previewImage, modalCrop, pickImageEl, uploadImageBtn, modalCropImg,
+        exportWidth = 200, exportHeight = 200, cropBoxWidth = 200, cropBoxHeight = 200 } = {}) {
+      this.onUploadImageBtnClick = this.onUploadImageBtnClick.bind(this);
+      this.onModalHide = this.onModalHide.bind(this);
+      this.onModalShow = this.onModalShow.bind(this);
+      this.onPickImageClick = this.onPickImageClick.bind(this);
+      this.fileInput = $(input);
+      this.modalCropImg = _.isString(this.modalCropImg) ? $(this.modalCropImg) : this.modalCropImg;
+      this.fileInput.attr('name', `${this.fileInput.attr('name')}-trigger`).attr('id', `${this.fileInput.attr('id')}-trigger`);
+      this.exportWidth = exportWidth;
+      this.exportHeight = exportHeight;
+      this.cropBoxWidth = cropBoxWidth;
+      this.cropBoxHeight = cropBoxHeight;
+      this.form = this.fileInput.parents('form');
+      this.filename = filename;
+      this.previewImage = previewImage;
+      this.modalCrop = modalCrop;
+      this.pickImageEl = pickImageEl;
+      this.uploadImageBtn = uploadImageBtn;
+      this.modalCropImg = modalCropImg;
+      this.filename = this.getElement(filename);
+      this.previewImage = this.getElement(previewImage);
+      this.pickImageEl = this.getElement(pickImageEl);
+      this.modalCrop = _.isString(modalCrop) ? $(modalCrop) : modalCrop;
+      this.uploadImageBtn = _.isString(uploadImageBtn) ? $(uploadImageBtn) : uploadImageBtn;
+      this.modalCropImg = _.isString(modalCropImg) ? $(modalCropImg) : modalCropImg;
+      this.cropActionsBtn = this.modalCrop.find('[data-method]');
+      this.bindEvents();
+    }
+
+    getElement(selector) {
+      return $(selector, this.form);
+    }
+
+    bindEvents() {
+      var _this;
+      _this = this;
+      this.fileInput.on('change', function(e) {
+        return _this.onFileInputChange(e, this);
+      });
+      this.pickImageEl.on('click', this.onPickImageClick);
+      this.modalCrop.on('shown.bs.modal', this.onModalShow);
+      this.modalCrop.on('hidden.bs.modal', this.onModalHide);
+      this.uploadImageBtn.on('click', this.onUploadImageBtnClick);
+      this.cropActionsBtn.on('click', function(e) {
+        var btn;
+        btn = this;
+        return _this.onActionBtnClick(btn);
+      });
+      return this.croppedImageBlob = null;
+    }
+
+    onPickImageClick() {
+      return this.fileInput.trigger('click');
+    }
+
+    onModalShow() {
+      var _this;
+      _this = this;
+      return this.modalCropImg.cropper({
+        viewMode: 1,
+        center: false,
+        aspectRatio: 1,
+        modal: true,
+        scalable: false,
+        rotatable: false,
+        zoomable: true,
+        dragMode: 'move',
+        guides: false,
+        zoomOnTouch: false,
+        zoomOnWheel: false,
+        cropBoxMovable: false,
+        cropBoxResizable: false,
+        toggleDragModeOnDblclick: false,
+        built: function() {
+          var $image, container, cropBoxHeight, cropBoxWidth;
+          $image = $(this);
+          container = $image.cropper('getContainerData');
+          cropBoxWidth = _this.cropBoxWidth;
+          cropBoxHeight = _this.cropBoxHeight;
+          return $image.cropper('setCropBoxData', {
+            width: cropBoxWidth,
+            height: cropBoxHeight,
+            left: (container.width - cropBoxWidth) / 2,
+            top: (container.height - cropBoxHeight) / 2
+          });
+        }
+      });
+    }
+
+    onModalHide() {
+      return this.modalCropImg.attr('src', '').cropper('destroy');
+    }
+
+    onUploadImageBtnClick(e) {
+      e.preventDefault();
+      this.setBlob();
+      this.setPreview();
+      this.modalCrop.modal('hide');
+      return this.fileInput.val('');
+    }
+
+    onActionBtnClick(btn) {
+      var data, result;
+      data = $(btn).data();
+      if (this.modalCropImg.data('cropper') && data.method) {
+        return result = this.modalCropImg.cropper(data.method, data.option);
+      }
+    }
+
+    onFileInputChange(e, input) {
+      return this.readFile(input);
+    }
+
+    readFile(input) {
+      var _this, reader;
+      _this = this;
+      reader = new FileReader;
+      reader.onload = () => {
+        _this.modalCropImg.attr('src', reader.result);
+        return _this.modalCrop.modal('show');
+      };
+      return reader.readAsDataURL(input.files[0]);
+    }
+
+    dataURLtoBlob(dataURL) {
+      var array, binary, i, k, len, v;
+      binary = atob(dataURL.split(',')[1]);
+      array = [];
+      for (k = i = 0, len = binary.length; i < len; k = (i += 1)) {
+        v = binary[k];
+        array.push(binary.charCodeAt(k));
+      }
+      return new Blob([new Uint8Array(array)], {
+        type: 'image/png'
+      });
+    }
+
+    setPreview() {
+      var filename;
+      this.previewImage.attr('src', this.dataURL);
+      filename = this.fileInput.val().replace(FILENAMEREGEX, '');
+      return this.filename.text(filename);
+    }
+
+    setBlob() {
+      this.dataURL = this.modalCropImg.cropper('getCroppedCanvas', {
+        width: 200,
+        height: 200
+      }).toDataURL('image/png');
+      return this.croppedImageBlob = this.dataURLtoBlob(this.dataURL);
+    }
+
+    getBlob() {
+      return this.croppedImageBlob;
+    }
+  }
+
+  $.fn.glCrop = function(opts) {
+    return this.each(function() {
+      return $(this).data('glcrop', new GitLabCrop(this, opts));
+    });
+  };
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/profile/gl_crop.js.es6 b/app/assets/javascripts/profile/gl_crop.js.es6
deleted file mode 100644
index 6da6c1d0295..00000000000
--- a/app/assets/javascripts/profile/gl_crop.js.es6
+++ /dev/null
@@ -1,173 +0,0 @@
-/* eslint-disable */
-((global) => {
-
-  // Matches everything but the file name
-  const FILENAMEREGEX = /^.*[\\\/]/;
-
-  class GitLabCrop {
-    constructor(input, { filename, previewImage, modalCrop, pickImageEl, uploadImageBtn, modalCropImg,
-        exportWidth = 200, exportHeight = 200, cropBoxWidth = 200, cropBoxHeight = 200 } = {}) {
-
-      this.onUploadImageBtnClick = this.onUploadImageBtnClick.bind(this);
-      this.onModalHide = this.onModalHide.bind(this);
-      this.onModalShow = this.onModalShow.bind(this);
-      this.onPickImageClick = this.onPickImageClick.bind(this);
-      this.fileInput = $(input);
-      this.modalCropImg = _.isString(this.modalCropImg) ? $(this.modalCropImg) : this.modalCropImg;
-      this.fileInput.attr('name', `${this.fileInput.attr('name')}-trigger`).attr('id', `this.fileInput.attr('id')-trigger`);
-      this.exportWidth = exportWidth;
-      this.exportHeight = exportHeight;
-      this.cropBoxWidth = cropBoxWidth;
-      this.cropBoxHeight = cropBoxHeight;
-      this.form = this.fileInput.parents('form');
-      this.filename = filename;
-      this.previewImage = previewImage;
-      this.modalCrop = modalCrop;
-      this.pickImageEl = pickImageEl;
-      this.uploadImageBtn = uploadImageBtn;
-      this.modalCropImg = modalCropImg;
-      this.filename = this.getElement(filename);
-      this.previewImage = this.getElement(previewImage);
-      this.pickImageEl = this.getElement(pickImageEl);
-      this.modalCrop = _.isString(modalCrop) ? $(modalCrop) : modalCrop;
-      this.uploadImageBtn = _.isString(uploadImageBtn) ? $(uploadImageBtn) : uploadImageBtn;
-      this.modalCropImg = _.isString(modalCropImg) ? $(modalCropImg) : modalCropImg;
-      this.cropActionsBtn = this.modalCrop.find('[data-method]');
-      this.bindEvents();
-    }
-
-    getElement(selector) {
-      return $(selector, this.form);
-    }
-
-    bindEvents() {
-      var _this;
-      _this = this;
-      this.fileInput.on('change', function(e) {
-        return _this.onFileInputChange(e, this);
-      });
-      this.pickImageEl.on('click', this.onPickImageClick);
-      this.modalCrop.on('shown.bs.modal', this.onModalShow);
-      this.modalCrop.on('hidden.bs.modal', this.onModalHide);
-      this.uploadImageBtn.on('click', this.onUploadImageBtnClick);
-      this.cropActionsBtn.on('click', function(e) {
-        var btn;
-        btn = this;
-        return _this.onActionBtnClick(btn);
-      });
-      return this.croppedImageBlob = null;
-    }
-
-    onPickImageClick() {
-      return this.fileInput.trigger('click');
-    }
-
-    onModalShow() {
-      var _this;
-      _this = this;
-      return this.modalCropImg.cropper({
-        viewMode: 1,
-        center: false,
-        aspectRatio: 1,
-        modal: true,
-        scalable: false,
-        rotatable: false,
-        zoomable: true,
-        dragMode: 'move',
-        guides: false,
-        zoomOnTouch: false,
-        zoomOnWheel: false,
-        cropBoxMovable: false,
-        cropBoxResizable: false,
-        toggleDragModeOnDblclick: false,
-        built: function() {
-          var $image, container, cropBoxHeight, cropBoxWidth;
-          $image = $(this);
-          container = $image.cropper('getContainerData');
-          cropBoxWidth = _this.cropBoxWidth;
-          cropBoxHeight = _this.cropBoxHeight;
-          return $image.cropper('setCropBoxData', {
-            width: cropBoxWidth,
-            height: cropBoxHeight,
-            left: (container.width - cropBoxWidth) / 2,
-            top: (container.height - cropBoxHeight) / 2
-          });
-        }
-      });
-    }
-
-    onModalHide() {
-      return this.modalCropImg.attr('src', '').cropper('destroy');
-    }
-
-    onUploadImageBtnClick(e) {
-      e.preventDefault();
-      this.setBlob();
-      this.setPreview();
-      this.modalCrop.modal('hide');
-      return this.fileInput.val('');
-    }
-
-    onActionBtnClick(btn) {
-      var data, result;
-      data = $(btn).data();
-      if (this.modalCropImg.data('cropper') && data.method) {
-        return result = this.modalCropImg.cropper(data.method, data.option);
-      }
-    }
-
-    onFileInputChange(e, input) {
-      return this.readFile(input);
-    }
-
-    readFile(input) {
-      var _this, reader;
-      _this = this;
-      reader = new FileReader;
-      reader.onload = () => {
-        _this.modalCropImg.attr('src', reader.result);
-        return _this.modalCrop.modal('show');
-      };
-      return reader.readAsDataURL(input.files[0]);
-    }
-
-    dataURLtoBlob(dataURL) {
-      var array, binary, i, k, len, v;
-      binary = atob(dataURL.split(',')[1]);
-      array = [];
-      for (k = i = 0, len = binary.length; i < len; k = ++i) {
-        v = binary[k];
-        array.push(binary.charCodeAt(k));
-      }
-      return new Blob([new Uint8Array(array)], {
-        type: 'image/png'
-      });
-    }
-
-    setPreview() {
-      var filename;
-      this.previewImage.attr('src', this.dataURL);
-      filename = this.fileInput.val().replace(FILENAMEREGEX, '');
-      return this.filename.text(filename);
-    }
-
-    setBlob() {
-      this.dataURL = this.modalCropImg.cropper('getCroppedCanvas', {
-        width: 200,
-        height: 200
-      }).toDataURL('image/png');
-      return this.croppedImageBlob = this.dataURLtoBlob(this.dataURL);
-    }
-
-    getBlob() {
-      return this.croppedImageBlob;
-    }
-  }
-
-  $.fn.glCrop = function(opts) {
-    return this.each(function() {
-      return $(this).data('glcrop', new GitLabCrop(this, opts));
-    });
-  }
-
-})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/profile/profile.js b/app/assets/javascripts/profile/profile.js
new file mode 100644
index 00000000000..4ccea0624ee
--- /dev/null
+++ b/app/assets/javascripts/profile/profile.js
@@ -0,0 +1,100 @@
+/* eslint-disable comma-dangle, no-unused-vars, class-methods-use-this, quotes, consistent-return, func-names, prefer-arrow-callback, space-before-function-paren, max-len */
+/* global Flash */
+
+((global) => {
+  class Profile {
+    constructor({ form } = {}) {
+      this.onSubmitForm = this.onSubmitForm.bind(this);
+      this.form = form || $('.edit-user');
+      this.bindEvents();
+      this.initAvatarGlCrop();
+    }
+
+    initAvatarGlCrop() {
+      const cropOpts = {
+        filename: '.js-avatar-filename',
+        previewImage: '.avatar-image .avatar',
+        modalCrop: '.modal-profile-crop',
+        pickImageEl: '.js-choose-user-avatar-button',
+        uploadImageBtn: '.js-upload-user-avatar',
+        modalCropImg: '.modal-profile-crop-image'
+      };
+      this.avatarGlCrop = $('.js-user-avatar-input').glCrop(cropOpts).data('glcrop');
+    }
+
+    bindEvents() {
+      $('.js-preferences-form').on('change.preference', 'input[type=radio]', this.submitForm);
+      $('#user_notification_email').on('change', this.submitForm);
+      $('#user_notified_of_own_activity').on('change', this.submitForm);
+      $('.update-username').on('ajax:before', this.beforeUpdateUsername);
+      $('.update-username').on('ajax:complete', this.afterUpdateUsername);
+      $('.update-notifications').on('ajax:success', this.onUpdateNotifs);
+      this.form.on('submit', this.onSubmitForm);
+    }
+
+    submitForm() {
+      return $(this).parents('form').submit();
+    }
+
+    onSubmitForm(e) {
+      e.preventDefault();
+      return this.saveForm();
+    }
+
+    beforeUpdateUsername() {
+      $('.loading-username', this).removeClass('hidden');
+    }
+
+    afterUpdateUsername() {
+      $('.loading-username', this).addClass('hidden');
+      $('button[type=submit]', this).enable();
+    }
+
+    onUpdateNotifs(e, data) {
+      return data.saved ?
+        new Flash("Notification settings saved", "notice") :
+        new Flash("Failed to save new settings", "alert");
+    }
+
+    saveForm() {
+      const self = this;
+      const formData = new FormData(this.form[0]);
+      const avatarBlob = this.avatarGlCrop.getBlob();
+
+      if (avatarBlob != null) {
+        formData.append('user[avatar]', avatarBlob, 'avatar.png');
+      }
+
+      return $.ajax({
+        url: this.form.attr('action'),
+        type: this.form.attr('method'),
+        data: formData,
+        dataType: "json",
+        processData: false,
+        contentType: false,
+        success: response => new Flash(response.message, 'notice'),
+        error: jqXHR => new Flash(jqXHR.responseJSON.message, 'alert'),
+        complete: () => {
+          window.scrollTo(0, 0);
+          // Enable submit button after requests ends
+          return self.form.find(':input[disabled]').enable();
+        }
+      });
+    }
+  }
+
+  $(function() {
+    $(document).on('input.ssh_key', '#key_key', function() {
+      const $title = $('#key_title');
+      const comment = $(this).val().match(/^\S+ \S+ (.+)\n?$/);
+
+      // Extract the SSH Key title from its comment
+      if (comment && comment.length > 1) {
+        return $title.val(comment[1]).change();
+      }
+    });
+    if (global.utils.getPagePath() === 'profiles') {
+      return new Profile();
+    }
+  });
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/profile/profile.js.es6 b/app/assets/javascripts/profile/profile.js.es6
deleted file mode 100644
index 73858388261..00000000000
--- a/app/assets/javascripts/profile/profile.js.es6
+++ /dev/null
@@ -1,101 +0,0 @@
-/* eslint-disable */
-((global) => {
-
-  class Profile {
-    constructor({ form } = {}) {
-      this.onSubmitForm = this.onSubmitForm.bind(this);
-      this.form = form || $('.edit-user');
-      this.bindEvents();
-      this.initAvatarGlCrop();
-    }
-
-    initAvatarGlCrop() {
-      const cropOpts = {
-        filename: '.js-avatar-filename',
-        previewImage: '.avatar-image .avatar',
-        modalCrop: '.modal-profile-crop',
-        pickImageEl: '.js-choose-user-avatar-button',
-        uploadImageBtn: '.js-upload-user-avatar',
-        modalCropImg: '.modal-profile-crop-image'
-      };
-      this.avatarGlCrop = $('.js-user-avatar-input').glCrop(cropOpts).data('glcrop');
-    }
-
-    bindEvents() {
-      $('.js-preferences-form').on('change.preference', 'input[type=radio]', this.submitForm);
-      $('#user_notification_email').on('change', this.submitForm);
-      $('.update-username').on('ajax:before', this.beforeUpdateUsername);
-      $('.update-username').on('ajax:complete', this.afterUpdateUsername);
-      $('.update-notifications').on('ajax:success', this.onUpdateNotifs);
-      this.form.on('submit', this.onSubmitForm);
-    }
-
-    submitForm() {
-      return $(this).parents('form').submit();
-    }
-
-    onSubmitForm(e) {
-      e.preventDefault();
-      return this.saveForm();
-    }
-
-    beforeUpdateUsername() {
-      $('.loading-username').show();
-      $(this).find('.update-success').hide();
-      return $(this).find('.update-failed').hide();
-    }
-
-    afterUpdateUsername() {
-      $('.loading-username').hide();
-      $(this).find('.btn-save').enable();
-      return $(this).find('.loading-gif').hide();
-    }
-
-    onUpdateNotifs(e, data) {
-      return data.saved ?
-        new Flash("Notification settings saved", "notice") :
-        new Flash("Failed to save new settings", "alert");
-    }
-
-    saveForm() {
-      const self = this;
-      const formData = new FormData(this.form[0]);
-      const avatarBlob = this.avatarGlCrop.getBlob();
-
-      if (avatarBlob != null) {
-        formData.append('user[avatar]', avatarBlob, 'avatar.png');
-      }
-
-      return $.ajax({
-        url: this.form.attr('action'),
-        type: this.form.attr('method'),
-        data: formData,
-        dataType: "json",
-        processData: false,
-        contentType: false,
-        success: response => new Flash(response.message, 'notice'),
-        error: jqXHR => new Flash(jqXHR.responseJSON.message, 'alert'),
-        complete: () => {
-          window.scrollTo(0, 0);
-          // Enable submit button after requests ends
-          return self.form.find(':input[disabled]').enable();
-        }
-      });
-    }
-  }
-
-  $(function() {
-    $(document).on('focusout.ssh_key', '#key_key', function() {
-      const $title = $('#key_title');
-      const comment = $(this).val().match(/^\S+ \S+ (.+)\n?$/);
-      if (comment && comment.length > 1 && $title.val() === '') {
-        return $title.val(comment[1]).change();
-      }
-    // Extract the SSH Key title from its comment
-    });
-    if (global.utils.getPagePath() === 'profiles') {
-      return new Profile();
-    }
-  });
-
-})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/profile/profile_bundle.js b/app/assets/javascripts/profile/profile_bundle.js
index 22bee0f6187..15d32825583 100644
--- a/app/assets/javascripts/profile/profile_bundle.js
+++ b/app/assets/javascripts/profile/profile_bundle.js
@@ -1,7 +1,2 @@
-/* eslint-disable */
-
-/*= require_tree . */
-
-(function() {
-
-}).call(this);
+require('./gl_crop');
+require('./profile');
diff --git a/app/assets/javascripts/project.js b/app/assets/javascripts/project.js
index 2d0c6b16699..f944fcc5a58 100644
--- a/app/assets/javascripts/project.js
+++ b/app/assets/javascripts/project.js
@@ -1,4 +1,8 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, quotes, consistent-return, no-new, prefer-arrow-callback, no-return-assign, one-var, one-var-declaration-per-line, object-shorthand, comma-dangle, no-else-return, newline-per-chained-call, no-shadow, vars-on-top, prefer-template, max-len */
+/* global ProjectSelect */
+
+import Cookies from 'js-cookie';
+
 (function() {
   this.Project = (function() {
     function Project() {
@@ -54,6 +58,11 @@
     };
 
     Project.prototype.initRefSwitcher = function() {
+      var refListItem = document.createElement('li');
+      var refLink = document.createElement('a');
+
+      refLink.href = '#';
+
       return $('.js-project-refs-dropdown').each(function() {
         var $dropdown, selected;
         $dropdown = $(this);
@@ -63,7 +72,8 @@
             return $.ajax({
               url: $dropdown.data('refs-url'),
               data: {
-                ref: $dropdown.data('ref')
+                ref: $dropdown.data('ref'),
+                search: term
               },
               dataType: "json"
             }).done(function(refs) {
@@ -72,16 +82,29 @@
           },
           selectable: true,
           filterable: true,
+          filterRemote: true,
           filterByText: true,
           fieldName: $dropdown.data('field-name'),
           renderRow: function(ref) {
-            var link;
+            var li = refListItem.cloneNode(false);
+
             if (ref.header != null) {
-              return $('<li />').addClass('dropdown-header').text(ref.header);
+              li.className = 'dropdown-header';
+              li.textContent = ref.header;
             } else {
-              link = $('<a />').attr('href', '#').addClass(ref === selected ? 'is-active' : '').text(ref).attr('data-ref', ref);
-              return $('<li />').append(link);
+              var link = refLink.cloneNode(false);
+
+              if (ref === selected) {
+                link.className = 'is-active';
+              }
+
+              link.textContent = ref;
+              link.dataset.ref = ref;
+
+              li.appendChild(link);
             }
+
+            return li;
           },
           id: function(obj, $el) {
             return $el.attr('data-ref');
@@ -90,12 +113,12 @@
             return $el.text().trim();
           },
           clicked: function(selected, $el, e) {
-            e.preventDefault()
+            e.preventDefault();
             if ($('input[name="ref"]').length) {
-              var $form = $dropdown.closest('form'),
-                  action = $form.attr('action'),
-                  divider = action.indexOf('?') < 0 ? '?' : '&';
-              Turbolinks.visit(action + '' + divider + '' + $form.serialize());
+              var $form = $dropdown.closest('form');
+              var action = $form.attr('action');
+              var divider = action.indexOf('?') === -1 ? '?' : '&';
+              gl.utils.visitUrl(action + '' + divider + '' + $form.serialize());
             }
           }
         });
@@ -103,7 +126,5 @@
     };
 
     return Project;
-
   })();
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/project_avatar.js b/app/assets/javascripts/project_avatar.js
index 61877c6616d..aabdfbf65e2 100644
--- a/app/assets/javascripts/project_avatar.js
+++ b/app/assets/javascripts/project_avatar.js
@@ -1,4 +1,4 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, one-var, one-var-declaration-per-line, no-useless-escape, max-len */
 (function() {
   this.ProjectAvatar = (function() {
     function ProjectAvatar() {
@@ -16,7 +16,5 @@
     }
 
     return ProjectAvatar;
-
   })();
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/project_find_file.js b/app/assets/javascripts/project_find_file.js
index ddac5ed83e1..e01668eabef 100644
--- a/app/assets/javascripts/project_find_file.js
+++ b/app/assets/javascripts/project_find_file.js
@@ -1,6 +1,8 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, quotes, consistent-return, one-var, one-var-declaration-per-line, no-cond-assign, max-len, object-shorthand, no-param-reassign, comma-dangle, prefer-template, no-unused-vars, no-return-assign */
+/* global fuzzaldrinPlus */
+
 (function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
 
   this.ProjectFindFile = (function() {
     var highlighter;
@@ -69,7 +71,7 @@
       var blobItemUrl, filePath, html, i, j, len, matches, results;
       this.element.find(".tree-table > tbody").empty();
       results = [];
-      for (i = j = 0, len = filePaths.length; j < len; i = ++j) {
+      for (i = j = 0, len = filePaths.length; j < len; i = (j += 1)) {
         filePath = filePaths[i];
         if (i === 20) {
           break;
@@ -90,7 +92,7 @@
       lastIndex = 0;
       highlightText = "";
       matchedChars = [];
-      for (j = 0, len = matches.length; j < len; j++) {
+      for (j = 0, len = matches.length; j < len; j += 1) {
         matchIndex = matches[j];
         unmatched = text.substring(lastIndex, matchIndex);
         if (unmatched) {
@@ -165,7 +167,5 @@
     };
 
     return ProjectFindFile;
-
   })();
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/project_fork.js b/app/assets/javascripts/project_fork.js
index fd95f8f2c19..47197db39d3 100644
--- a/app/assets/javascripts/project_fork.js
+++ b/app/assets/javascripts/project_fork.js
@@ -1,4 +1,4 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, prefer-arrow-callback, max-len */
 (function() {
   this.ProjectFork = (function() {
     function ProjectFork() {
@@ -9,7 +9,5 @@
     }
 
     return ProjectFork;
-
   })();
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/project_import.js b/app/assets/javascripts/project_import.js
index f1c4a9fe542..08334bf1ec5 100644
--- a/app/assets/javascripts/project_import.js
+++ b/app/assets/javascripts/project_import.js
@@ -1,14 +1,13 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, prefer-arrow-callback, max-len */
+
 (function() {
   this.ProjectImport = (function() {
     function ProjectImport() {
       setTimeout(function() {
-        return Turbolinks.visit(location.href);
+        return gl.utils.visitUrl(location.href);
       }, 5000);
     }
 
     return ProjectImport;
-
   })();
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/project_label_subscription.js b/app/assets/javascripts/project_label_subscription.js
new file mode 100644
index 00000000000..0a811627600
--- /dev/null
+++ b/app/assets/javascripts/project_label_subscription.js
@@ -0,0 +1,55 @@
+/* eslint-disable wrap-iife, func-names, space-before-function-paren, object-shorthand, comma-dangle, one-var, one-var-declaration-per-line, no-restricted-syntax, max-len, no-param-reassign */
+
+(function(global) {
+  class ProjectLabelSubscription {
+    constructor(container) {
+      this.$container = $(container);
+      this.$buttons = this.$container.find('.js-subscribe-button');
+
+      this.$buttons.on('click', this.toggleSubscription.bind(this));
+    }
+
+    toggleSubscription(event) {
+      event.preventDefault();
+
+      const $btn = $(event.currentTarget);
+      const $span = $btn.find('span');
+      const url = $btn.attr('data-url');
+      const oldStatus = $btn.attr('data-status');
+
+      $btn.addClass('disabled');
+      $span.toggleClass('hidden');
+
+      $.ajax({
+        type: 'POST',
+        url: url
+      }).done(() => {
+        let newStatus, newAction;
+
+        if (oldStatus === 'unsubscribed') {
+          [newStatus, newAction] = ['subscribed', 'Unsubscribe'];
+        } else {
+          [newStatus, newAction] = ['unsubscribed', 'Subscribe'];
+        }
+
+        $span.toggleClass('hidden');
+        $btn.removeClass('disabled');
+
+        this.$buttons.attr('data-status', newStatus);
+        this.$buttons.find('> span').text(newAction);
+
+        this.$buttons.map((button) => {
+          const $button = $(button);
+
+          if ($button.attr('data-original-title')) {
+            $button.tooltip('hide').attr('data-original-title', newAction).tooltip('fixTitle');
+          }
+
+          return button;
+        });
+      });
+    }
+  }
+
+  global.ProjectLabelSubscription = ProjectLabelSubscription;
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/project_new.js b/app/assets/javascripts/project_new.js
index 0d3fb31a9cf..e9927c1bf51 100644
--- a/app/assets/javascripts/project_new.js
+++ b/app/assets/javascripts/project_new.js
@@ -1,6 +1,7 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-unused-vars, one-var, no-underscore-dangle, prefer-template, no-else-return, prefer-arrow-callback, max-len */
+
 (function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
 
   this.ProjectNew = (function() {
     function ProjectNew() {
@@ -14,18 +15,29 @@
           return $('.save-project-loader').show();
         };
       })(this));
+
+      this.initVisibilitySelect();
+
       this.toggleSettings();
       this.toggleSettingsOnclick();
       this.toggleRepoVisibility();
     }
 
+    ProjectNew.prototype.initVisibilitySelect = function() {
+      const visibilityContainer = document.querySelector('.js-visibility-select');
+      if (!visibilityContainer) return;
+      const visibilitySelect = new gl.VisibilitySelect(visibilityContainer);
+      visibilitySelect.init();
+    };
+
     ProjectNew.prototype.toggleSettings = function() {
       var self = this;
 
       this.$selects.each(function () {
-        var $select = $(this),
-            className = $select.data('field').replace(/_/g, '-')
-              .replace('access-level', 'feature');
+        var $select = $(this);
+        var className = $select.data('field')
+          .replace(/_/g, '-')
+          .replace('access-level', 'feature');
         self._showOrHide($select, '.' + className);
       });
     };
@@ -45,9 +57,9 @@
     };
 
     ProjectNew.prototype.toggleRepoVisibility = function () {
-      var $repoAccessLevel = $('.js-repo-access-level select'),
-          containerRegistry = document.querySelectorAll('.js-container-registry')[0],
-          containerRegistryCheckbox = document.getElementById('project_container_registry_enabled');
+      var $repoAccessLevel = $('.js-repo-access-level select');
+      var containerRegistry = document.querySelectorAll('.js-container-registry')[0];
+      var containerRegistryCheckbox = document.getElementById('project_container_registry_enabled');
 
       this.$repoSelects.find("option[value='" + $repoAccessLevel.val() + "']")
         .nextAll()
@@ -55,11 +67,11 @@
 
       $repoAccessLevel.off('change')
         .on('change', function () {
-          var selectedVal = parseInt($repoAccessLevel.val());
+          var selectedVal = parseInt($repoAccessLevel.val(), 10);
 
           this.$repoSelects.each(function () {
-            var $this = $(this),
-                repoSelectVal = parseInt($this.val());
+            var $this = $(this);
+            var repoSelectVal = parseInt($this.val(), 10);
 
             $this.find('option').show();
 
@@ -88,7 +100,5 @@
     };
 
     return ProjectNew;
-
   })();
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/project_select.js b/app/assets/javascripts/project_select.js
index e1acf3c8232..3c1c1e7dceb 100644
--- a/app/assets/javascripts/project_select.js
+++ b/app/assets/javascripts/project_select.js
@@ -1,4 +1,6 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, prefer-arrow-callback, no-var, comma-dangle, object-shorthand, one-var, one-var-declaration-per-line, no-else-return, quotes, max-len */
+/* global Api */
+
 (function() {
   this.ProjectSelect = (function() {
     function ProjectSelect() {
@@ -13,6 +15,7 @@
           },
           data: function(term, callback) {
             var finalCallback, projectsCallback;
+            var orderBy = $dropdown.data('order-by');
             finalCallback = function(projects) {
               return callback(projects);
             };
@@ -32,7 +35,7 @@
             if (this.groupId) {
               return Api.groupProjects(this.groupId, term, projectsCallback);
             } else {
-              return Api.projects(term, this.orderBy, projectsCallback);
+              return Api.projects(term, { order_by: orderBy }, projectsCallback);
             }
           },
           url: function(project) {
@@ -81,7 +84,7 @@
               if (_this.groupId) {
                 return Api.groupProjects(_this.groupId, query.term, projectsCallback);
               } else {
-                return Api.projects(query.term, _this.orderBy, projectsCallback);
+                return Api.projects(query.term, { order_by: _this.orderBy }, projectsCallback);
               }
             };
           })(this),
@@ -97,7 +100,5 @@
     }
 
     return ProjectSelect;
-
   })();
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/project_show.js b/app/assets/javascripts/project_show.js
index 21650f5f67a..3a51c1f26ac 100644
--- a/app/assets/javascripts/project_show.js
+++ b/app/assets/javascripts/project_show.js
@@ -1,12 +1,11 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife */
+
 (function() {
   this.ProjectShow = (function() {
     function ProjectShow() {}
 
     return ProjectShow;
-
   })();
-
-}).call(this);
+}).call(window);
 
 // I kept class for future
diff --git a/app/assets/javascripts/project_variables.js b/app/assets/javascripts/project_variables.js
new file mode 100644
index 00000000000..4ee2e49306d
--- /dev/null
+++ b/app/assets/javascripts/project_variables.js
@@ -0,0 +1,43 @@
+(() => {
+  const HIDDEN_VALUE_TEXT = '******';
+
+  class ProjectVariables {
+    constructor() {
+      this.$revealBtn = $('.js-btn-toggle-reveal-values');
+      this.$revealBtn.on('click', this.toggleRevealState.bind(this));
+    }
+
+    toggleRevealState(e) {
+      e.preventDefault();
+
+      const oldStatus = this.$revealBtn.attr('data-status');
+      let newStatus = 'hidden';
+      let newAction = 'Reveal Values';
+
+      if (oldStatus === 'hidden') {
+        newStatus = 'revealed';
+        newAction = 'Hide Values';
+      }
+
+      this.$revealBtn.attr('data-status', newStatus);
+
+      const $variables = $('.variable-value');
+
+      $variables.each((_, variable) => {
+        const $variable = $(variable);
+        let newText = HIDDEN_VALUE_TEXT;
+
+        if (newStatus === 'revealed') {
+          newText = $variable.attr('data-value');
+        }
+
+        $variable.text(newText);
+      });
+
+      this.$revealBtn.text(newAction);
+    }
+  }
+
+  window.gl = window.gl || {};
+  window.gl.ProjectVariables = ProjectVariables;
+})();
diff --git a/app/assets/javascripts/projects_list.js b/app/assets/javascripts/projects_list.js
index 3458cd89ae2..c67d59d2be5 100644
--- a/app/assets/javascripts/projects_list.js
+++ b/app/assets/javascripts/projects_list.js
@@ -1,50 +1,18 @@
-/* eslint-disable */
-(function() {
-  this.ProjectsList = {
-    init: function() {
-      $(".projects-list-filter").off('keyup');
-      this.initSearch();
-      return this.initPagination();
-    },
-    initSearch: function() {
-      var debounceFilter, projectsListFilter;
-      projectsListFilter = $('.projects-list-filter');
-      debounceFilter = _.debounce(ProjectsList.filterResults, 500);
-      return projectsListFilter.on('keyup', function(e) {
-        if (projectsListFilter.val() !== '') {
-          return debounceFilter();
-        }
-      });
-    },
-    filterResults: function() {
-      var form, project_filter_url, search;
-      $('.projects-list-holder').fadeTo(250, 0.5);
-      form = null;
-      form = $("form#project-filter-form");
-      search = $(".projects-list-filter").val();
-      project_filter_url = form.attr('action') + '?' + form.serialize();
-      return $.ajax({
-        type: "GET",
-        url: form.attr('action'),
-        data: form.serialize(),
-        complete: function() {
-          return $('.projects-list-holder').fadeTo(250, 1);
-        },
-        success: function(data) {
-          $('.projects-list-holder').replaceWith(data.html);
-          return history.replaceState({
-            page: project_filter_url
-          // Change url so if user reload a page - search results are saved
-          }, document.title, project_filter_url);
-        },
-        dataType: "json"
-      });
-    },
-    initPagination: function() {
-      return $('.projects-list-holder .pagination').on('ajax:success', function(e, data) {
-        return $('.projects-list-holder').replaceWith(data.html);
-      });
-    }
-  };
+import FilterableList from './filterable_list';
+
+/**
+ * Makes search request for projects when user types a value in the search input.
+ * Updates the html content of the page with the received one.
+ */
+export default class ProjectsList {
+  constructor() {
+    const form = document.querySelector('form#project-filter-form');
+    const filter = document.querySelector('.js-projects-list-filter');
+    const holder = document.querySelector('.js-projects-list-holder');
 
-}).call(this);
+    if (form && filter && holder) {
+      const list = new FilterableList(form, filter, holder);
+      list.initSearch();
+    }
+  }
+}
diff --git a/app/assets/javascripts/protected_branches/protected_branch_access_dropdown.js b/app/assets/javascripts/protected_branches/protected_branch_access_dropdown.js
new file mode 100644
index 00000000000..e7fff57ff45
--- /dev/null
+++ b/app/assets/javascripts/protected_branches/protected_branch_access_dropdown.js
@@ -0,0 +1,29 @@
+/* eslint-disable arrow-parens, no-param-reassign, object-shorthand, no-else-return, comma-dangle, max-len */
+
+(global => {
+  global.gl = global.gl || {};
+
+  gl.ProtectedBranchAccessDropdown = class {
+    constructor(options) {
+      const { $dropdown, data, onSelect } = options;
+
+      $dropdown.glDropdown({
+        data: data,
+        selectable: true,
+        inputId: $dropdown.data('input-id'),
+        fieldName: $dropdown.data('field-name'),
+        toggleLabel(item, el) {
+          if (el.is('.is-active')) {
+            return item.text;
+          } else {
+            return 'Select';
+          }
+        },
+        clicked(item, $el, e) {
+          e.preventDefault();
+          onSelect();
+        }
+      });
+    }
+  };
+})(window);
diff --git a/app/assets/javascripts/protected_branches/protected_branch_access_dropdown.js.es6 b/app/assets/javascripts/protected_branches/protected_branch_access_dropdown.js.es6
deleted file mode 100644
index 2d60947a666..00000000000
--- a/app/assets/javascripts/protected_branches/protected_branch_access_dropdown.js.es6
+++ /dev/null
@@ -1,29 +0,0 @@
-/* eslint-disable */
-(global => {
-  global.gl = global.gl || {};
-
-  gl.ProtectedBranchAccessDropdown = class {
-    constructor(options) {
-      const { $dropdown, data, onSelect } = options;
-
-      $dropdown.glDropdown({
-        data: data,
-        selectable: true,
-        inputId: $dropdown.data('input-id'),
-        fieldName: $dropdown.data('field-name'),
-        toggleLabel(item, el) {
-          if (el.is('.is-active')) {
-            return item.text;
-          } else {
-            return 'Select';
-          }
-        },
-        clicked(item, $el, e) {
-          e.preventDefault();
-          onSelect();
-        }
-      });
-    }
-  }
-
-})(window);
diff --git a/app/assets/javascripts/protected_branches/protected_branch_create.js b/app/assets/javascripts/protected_branches/protected_branch_create.js
new file mode 100644
index 00000000000..57ea2f52814
--- /dev/null
+++ b/app/assets/javascripts/protected_branches/protected_branch_create.js
@@ -0,0 +1,55 @@
+/* eslint-disable no-new, arrow-parens, no-param-reassign, comma-dangle, max-len */
+/* global ProtectedBranchDropdown */
+
+(global => {
+  global.gl = global.gl || {};
+
+  gl.ProtectedBranchCreate = class {
+    constructor() {
+      this.$wrap = this.$form = $('#new_protected_branch');
+      this.buildDropdowns();
+    }
+
+    buildDropdowns() {
+      const $allowedToMergeDropdown = this.$wrap.find('.js-allowed-to-merge');
+      const $allowedToPushDropdown = this.$wrap.find('.js-allowed-to-push');
+
+      // Cache callback
+      this.onSelectCallback = this.onSelect.bind(this);
+
+      // Allowed to Merge dropdown
+      new gl.ProtectedBranchAccessDropdown({
+        $dropdown: $allowedToMergeDropdown,
+        data: gon.merge_access_levels,
+        onSelect: this.onSelectCallback
+      });
+
+      // Allowed to Push dropdown
+      new gl.ProtectedBranchAccessDropdown({
+        $dropdown: $allowedToPushDropdown,
+        data: gon.push_access_levels,
+        onSelect: this.onSelectCallback
+      });
+
+      // Select default
+      $allowedToPushDropdown.data('glDropdown').selectRowAtIndex(0);
+      $allowedToMergeDropdown.data('glDropdown').selectRowAtIndex(0);
+
+      // Protected branch dropdown
+      new ProtectedBranchDropdown({
+        $dropdown: this.$wrap.find('.js-protected-branch-select'),
+        onSelect: this.onSelectCallback
+      });
+    }
+
+    // This will run after clicked callback
+    onSelect() {
+      // Enable submit button
+      const $branchInput = this.$wrap.find('input[name="protected_branch[name]"]');
+      const $allowedToMergeInput = this.$wrap.find('input[name="protected_branch[merge_access_levels_attributes][0][access_level]"]');
+      const $allowedToPushInput = this.$wrap.find('input[name="protected_branch[push_access_levels_attributes][0][access_level]"]');
+
+      this.$form.find('input[type="submit"]').attr('disabled', !($branchInput.val() && $allowedToMergeInput.length && $allowedToPushInput.length));
+    }
+  };
+})(window);
diff --git a/app/assets/javascripts/protected_branches/protected_branch_create.js.es6 b/app/assets/javascripts/protected_branches/protected_branch_create.js.es6
deleted file mode 100644
index c45c9d8ff22..00000000000
--- a/app/assets/javascripts/protected_branches/protected_branch_create.js.es6
+++ /dev/null
@@ -1,55 +0,0 @@
-/* eslint-disable */
-(global => {
-  global.gl = global.gl || {};
-
-  gl.ProtectedBranchCreate = class {
-    constructor() {
-      this.$wrap = this.$form = $('#new_protected_branch');
-      this.buildDropdowns();
-    }
-
-    buildDropdowns() {
-      const $allowedToMergeDropdown = this.$wrap.find('.js-allowed-to-merge');
-      const $allowedToPushDropdown = this.$wrap.find('.js-allowed-to-push');
-
-      // Cache callback
-      this.onSelectCallback = this.onSelect.bind(this);
-
-      // Allowed to Merge dropdown
-      new gl.ProtectedBranchAccessDropdown({
-        $dropdown: $allowedToMergeDropdown,
-        data: gon.merge_access_levels,
-        onSelect: this.onSelectCallback
-      });
-
-      // Allowed to Push dropdown
-      new gl.ProtectedBranchAccessDropdown({
-        $dropdown: $allowedToPushDropdown,
-        data: gon.push_access_levels,
-        onSelect: this.onSelectCallback
-      });
-
-      // Select default
-      $allowedToPushDropdown.data('glDropdown').selectRowAtIndex(0);
-      $allowedToMergeDropdown.data('glDropdown').selectRowAtIndex(0);
-
-      // Protected branch dropdown
-      new ProtectedBranchDropdown({
-        $dropdown: this.$wrap.find('.js-protected-branch-select'),
-        onSelect: this.onSelectCallback
-      });
-    }
-
-    // This will run after clicked callback
-    onSelect() {
-
-      // Enable submit button
-      const $branchInput = this.$wrap.find('input[name="protected_branch[name]"]');
-      const $allowedToMergeInput = this.$wrap.find('input[name="protected_branch[merge_access_levels_attributes][0][access_level]"]');
-      const $allowedToPushInput = this.$wrap.find('input[name="protected_branch[push_access_levels_attributes][0][access_level]"]');
-
-      this.$form.find('input[type="submit"]').attr('disabled', !($branchInput.val() && $allowedToMergeInput.length && $allowedToPushInput.length));
-    }
-  }
-
-})(window);
diff --git a/app/assets/javascripts/protected_branches/protected_branch_dropdown.js b/app/assets/javascripts/protected_branches/protected_branch_dropdown.js
new file mode 100644
index 00000000000..1d4bb8a13d6
--- /dev/null
+++ b/app/assets/javascripts/protected_branches/protected_branch_dropdown.js
@@ -0,0 +1,82 @@
+/* eslint-disable comma-dangle, no-unused-vars */
+
+class ProtectedBranchDropdown {
+  constructor(options) {
+    this.onSelect = options.onSelect;
+    this.$dropdown = options.$dropdown;
+    this.$dropdownContainer = this.$dropdown.parent();
+    this.$dropdownFooter = this.$dropdownContainer.find('.dropdown-footer');
+    this.$protectedBranch = this.$dropdownContainer.find('.js-create-new-protected-branch');
+
+    this.buildDropdown();
+    this.bindEvents();
+
+    // Hide footer
+    this.$dropdownFooter.addClass('hidden');
+  }
+
+  buildDropdown() {
+    this.$dropdown.glDropdown({
+      data: this.getProtectedBranches.bind(this),
+      filterable: true,
+      remote: false,
+      search: {
+        fields: ['title']
+      },
+      selectable: true,
+      toggleLabel(selected) {
+        return (selected && 'id' in selected) ? selected.title : 'Protected Branch';
+      },
+      fieldName: 'protected_branch[name]',
+      text(protectedBranch) {
+        return _.escape(protectedBranch.title);
+      },
+      id(protectedBranch) {
+        return _.escape(protectedBranch.id);
+      },
+      onFilter: this.toggleCreateNewButton.bind(this),
+      clicked: (item, $el, e) => {
+        e.preventDefault();
+        this.onSelect();
+      }
+    });
+  }
+
+  bindEvents() {
+    this.$protectedBranch.on('click', this.onClickCreateWildcard.bind(this));
+  }
+
+  onClickCreateWildcard(e) {
+    e.preventDefault();
+
+    // Refresh the dropdown's data, which ends up calling `getProtectedBranches`
+    this.$dropdown.data('glDropdown').remote.execute();
+    this.$dropdown.data('glDropdown').selectRowAtIndex();
+  }
+
+  getProtectedBranches(term, callback) {
+    if (this.selectedBranch) {
+      callback(gon.open_branches.concat(this.selectedBranch));
+    } else {
+      callback(gon.open_branches);
+    }
+  }
+
+  toggleCreateNewButton(branchName) {
+    this.selectedBranch = {
+      title: branchName,
+      id: branchName,
+      text: branchName
+    };
+
+    if (branchName) {
+      this.$dropdownContainer
+        .find('.js-create-new-protected-branch code')
+        .text(branchName);
+    }
+
+    this.$dropdownFooter.toggleClass('hidden', !branchName);
+  }
+}
+
+window.ProtectedBranchDropdown = ProtectedBranchDropdown;
diff --git a/app/assets/javascripts/protected_branches/protected_branch_dropdown.js.es6 b/app/assets/javascripts/protected_branches/protected_branch_dropdown.js.es6
deleted file mode 100644
index e3f226e9a2a..00000000000
--- a/app/assets/javascripts/protected_branches/protected_branch_dropdown.js.es6
+++ /dev/null
@@ -1,77 +0,0 @@
-/* eslint-disable */
-class ProtectedBranchDropdown {
-  constructor(options) {
-    this.onSelect = options.onSelect;
-    this.$dropdown = options.$dropdown;
-    this.$dropdownContainer = this.$dropdown.parent();
-    this.$dropdownFooter = this.$dropdownContainer.find('.dropdown-footer');
-    this.$protectedBranch = this.$dropdownContainer.find('.create-new-protected-branch');
-
-    this.buildDropdown();
-    this.bindEvents();
-
-    // Hide footer
-    this.$dropdownFooter.addClass('hidden');
-  }
-
-  buildDropdown() {
-    this.$dropdown.glDropdown({
-      data: this.getProtectedBranches.bind(this),
-      filterable: true,
-      remote: false,
-      search: {
-        fields: ['title']
-      },
-      selectable: true,
-      toggleLabel(selected) {
-        return (selected && 'id' in selected) ? selected.title : 'Protected Branch';
-      },
-      fieldName: 'protected_branch[name]',
-      text(protectedBranch) {
-        return _.escape(protectedBranch.title);
-      },
-      id(protectedBranch) {
-        return _.escape(protectedBranch.id);
-      },
-      onFilter: this.toggleCreateNewButton.bind(this),
-      clicked: (item, $el, e) => {
-        e.preventDefault();
-        this.onSelect();
-      }
-    });
-  }
-
-  bindEvents() {
-    this.$protectedBranch.on('click', this.onClickCreateWildcard.bind(this));
-  }
-
-  onClickCreateWildcard() {
-    // Refresh the dropdown's data, which ends up calling `getProtectedBranches`
-    this.$dropdown.data('glDropdown').remote.execute();
-    this.$dropdown.data('glDropdown').selectRowAtIndex(0);
-  }
-
-  getProtectedBranches(term, callback) {
-    if (this.selectedBranch) {
-      callback(gon.open_branches.concat(this.selectedBranch));
-    } else {
-      callback(gon.open_branches);
-    }
-  }
-
-  toggleCreateNewButton(branchName) {
-    this.selectedBranch = {
-      title: branchName,
-      id: branchName,
-      text: branchName
-    };
-
-    if (branchName) {
-      this.$dropdownContainer
-        .find('.create-new-protected-branch code')
-        .text(branchName);
-    }
-
-    this.$dropdownFooter.toggleClass('hidden', !branchName);
-  }
-}
diff --git a/app/assets/javascripts/protected_branches/protected_branch_edit.js b/app/assets/javascripts/protected_branches/protected_branch_edit.js
new file mode 100644
index 00000000000..6ef59e94384
--- /dev/null
+++ b/app/assets/javascripts/protected_branches/protected_branch_edit.js
@@ -0,0 +1,69 @@
+/* eslint-disable no-new, arrow-parens, no-param-reassign, comma-dangle, max-len */
+/* global Flash */
+
+(global => {
+  global.gl = global.gl || {};
+
+  gl.ProtectedBranchEdit = class {
+    constructor(options) {
+      this.$wrap = options.$wrap;
+      this.$allowedToMergeDropdown = this.$wrap.find('.js-allowed-to-merge');
+      this.$allowedToPushDropdown = this.$wrap.find('.js-allowed-to-push');
+
+      this.buildDropdowns();
+    }
+
+    buildDropdowns() {
+      // Allowed to merge dropdown
+      new gl.ProtectedBranchAccessDropdown({
+        $dropdown: this.$allowedToMergeDropdown,
+        data: gon.merge_access_levels,
+        onSelect: this.onSelect.bind(this)
+      });
+
+      // Allowed to push dropdown
+      new gl.ProtectedBranchAccessDropdown({
+        $dropdown: this.$allowedToPushDropdown,
+        data: gon.push_access_levels,
+        onSelect: this.onSelect.bind(this)
+      });
+    }
+
+    onSelect() {
+      const $allowedToMergeInput = this.$wrap.find(`input[name="${this.$allowedToMergeDropdown.data('fieldName')}"]`);
+      const $allowedToPushInput = this.$wrap.find(`input[name="${this.$allowedToPushDropdown.data('fieldName')}"]`);
+
+      // Do not update if one dropdown has not selected any option
+      if (!($allowedToMergeInput.length && $allowedToPushInput.length)) return;
+
+      this.$allowedToMergeDropdown.disable();
+      this.$allowedToPushDropdown.disable();
+
+      $.ajax({
+        type: 'POST',
+        url: this.$wrap.data('url'),
+        dataType: 'json',
+        data: {
+          _method: 'PATCH',
+          protected_branch: {
+            merge_access_levels_attributes: [{
+              id: this.$allowedToMergeDropdown.data('access-level-id'),
+              access_level: $allowedToMergeInput.val()
+            }],
+            push_access_levels_attributes: [{
+              id: this.$allowedToPushDropdown.data('access-level-id'),
+              access_level: $allowedToPushInput.val()
+            }]
+          }
+        },
+        error() {
+          $.scrollTo(0);
+          new Flash('Failed to update branch!');
+        }
+      }).always(() => {
+        this.$allowedToMergeDropdown.enable();
+        this.$allowedToPushDropdown.enable();
+      });
+    }
+  };
+})(window);
diff --git a/app/assets/javascripts/protected_branches/protected_branch_edit.js.es6 b/app/assets/javascripts/protected_branches/protected_branch_edit.js.es6
deleted file mode 100644
index ac3142ffb07..00000000000
--- a/app/assets/javascripts/protected_branches/protected_branch_edit.js.es6
+++ /dev/null
@@ -1,66 +0,0 @@
-/* eslint-disable */
-(global => {
-  global.gl = global.gl || {};
-
-  gl.ProtectedBranchEdit = class {
-    constructor(options) {
-      this.$wrap = options.$wrap;
-      this.$allowedToMergeDropdown = this.$wrap.find('.js-allowed-to-merge');
-      this.$allowedToPushDropdown = this.$wrap.find('.js-allowed-to-push');
-
-      this.buildDropdowns();
-    }
-
-    buildDropdowns() {
-
-      // Allowed to merge dropdown
-      new gl.ProtectedBranchAccessDropdown({
-        $dropdown: this.$allowedToMergeDropdown,
-        data: gon.merge_access_levels,
-        onSelect: this.onSelect.bind(this)
-      });
-
-      // Allowed to push dropdown
-      new gl.ProtectedBranchAccessDropdown({
-        $dropdown: this.$allowedToPushDropdown,
-        data: gon.push_access_levels,
-        onSelect: this.onSelect.bind(this)
-      });
-    }
-
-    onSelect() {
-      const $allowedToMergeInput = this.$wrap.find(`input[name="${this.$allowedToMergeDropdown.data('fieldName')}"]`);
-      const $allowedToPushInput = this.$wrap.find(`input[name="${this.$allowedToPushDropdown.data('fieldName')}"]`);
-
-      // Do not update if one dropdown has not selected any option
-      if (!($allowedToMergeInput.length && $allowedToPushInput.length)) return; 
-
-      $.ajax({
-        type: 'POST',
-        url: this.$wrap.data('url'),
-        dataType: 'json',
-        data: {
-          _method: 'PATCH',
-          protected_branch: {
-            merge_access_levels_attributes: [{
-              id: this.$allowedToMergeDropdown.data('access-level-id'),
-              access_level: $allowedToMergeInput.val()
-            }],
-            push_access_levels_attributes: [{
-              id: this.$allowedToPushDropdown.data('access-level-id'),
-              access_level: $allowedToPushInput.val()
-            }]
-          }
-        },
-        success: () => {
-          this.$wrap.effect('highlight');
-        },
-        error() {
-          $.scrollTo(0);
-          new Flash('Failed to update branch!');
-        }
-      });
-    }
-  }
-
-})(window);
diff --git a/app/assets/javascripts/protected_branches/protected_branch_edit_list.js b/app/assets/javascripts/protected_branches/protected_branch_edit_list.js
new file mode 100644
index 00000000000..336fa6c57a7
--- /dev/null
+++ b/app/assets/javascripts/protected_branches/protected_branch_edit_list.js
@@ -0,0 +1,18 @@
+/* eslint-disable arrow-parens, no-param-reassign, no-new, comma-dangle */
+
+(global => {
+  global.gl = global.gl || {};
+
+  gl.ProtectedBranchEditList = class {
+    constructor() {
+      this.$wrap = $('.protected-branches-list');
+
+      // Build edit forms
+      this.$wrap.find('.js-protected-branch-edit-form').each((i, el) => {
+        new gl.ProtectedBranchEdit({
+          $wrap: $(el)
+        });
+      });
+    }
+  };
+})(window);
diff --git a/app/assets/javascripts/protected_branches/protected_branch_edit_list.js.es6 b/app/assets/javascripts/protected_branches/protected_branch_edit_list.js.es6
deleted file mode 100644
index 705378a364d..00000000000
--- a/app/assets/javascripts/protected_branches/protected_branch_edit_list.js.es6
+++ /dev/null
@@ -1,18 +0,0 @@
-/* eslint-disable */
-(global => {
-  global.gl = global.gl || {};
-
-  gl.ProtectedBranchEditList = class {
-    constructor() {
-      this.$wrap = $('.protected-branches-list');
-
-      // Build edit forms
-      this.$wrap.find('.js-protected-branch-edit-form').each((i, el) => {
-        new gl.ProtectedBranchEdit({
-          $wrap: $(el)
-        });
-      });
-    }
-  }
-
-})(window);
diff --git a/app/assets/javascripts/protected_branches/protected_branches_bundle.js b/app/assets/javascripts/protected_branches/protected_branches_bundle.js
index 17e34163831..849c1e31623 100644
--- a/app/assets/javascripts/protected_branches/protected_branches_bundle.js
+++ b/app/assets/javascripts/protected_branches/protected_branches_bundle.js
@@ -1,2 +1,5 @@
-/* eslint-disable */
-/*= require_tree . */
+require('./protected_branch_access_dropdown');
+require('./protected_branch_create');
+require('./protected_branch_dropdown');
+require('./protected_branch_edit');
+require('./protected_branch_edit_list');
diff --git a/app/assets/javascripts/render_gfm.js b/app/assets/javascripts/render_gfm.js
new file mode 100644
index 00000000000..ea91aaa10a6
--- /dev/null
+++ b/app/assets/javascripts/render_gfm.js
@@ -0,0 +1,16 @@
+/* eslint-disable func-names, space-before-function-paren, consistent-return, no-var, no-else-return, prefer-arrow-callback, max-len */
+
+// Render Gitlab flavoured Markdown
+//
+// Delegates to syntax highlight and render math
+//
+(function() {
+  $.fn.renderGFM = function() {
+    this.find('.js-syntax-highlight').syntaxHighlight();
+    this.find('.js-render-math').renderMath();
+  };
+
+  $(document).on('ready load', function() {
+    return $('body').renderGFM();
+  });
+}).call(window);
diff --git a/app/assets/javascripts/render_math.js b/app/assets/javascripts/render_math.js
new file mode 100644
index 00000000000..8b3fee49cb9
--- /dev/null
+++ b/app/assets/javascripts/render_math.js
@@ -0,0 +1,56 @@
+/* eslint-disable func-names, space-before-function-paren, consistent-return, no-var, no-else-return, prefer-arrow-callback, max-len, no-console */
+/* global katex */
+
+// Renders math using KaTeX in any element with the
+// `js-render-math` class
+//
+// ### Example Markup
+//
+//   <code class="js-render-math"></div>
+//
+(function() {
+  // Only load once
+  var katexLoaded = false;
+
+  // Loop over all math elements and render math
+  var renderWithKaTeX = function (elements) {
+    elements.each(function () {
+      var mathNode = $('<span></span>');
+      var $this = $(this);
+
+      var display = $this.attr('data-math-style') === 'display';
+      try {
+        katex.render($this.text(), mathNode.get(0), { displayMode: display });
+        mathNode.insertAfter($this);
+        $this.remove();
+      } catch (err) {
+        // What can we do??
+        console.log(err.message);
+      }
+    });
+  };
+
+  $.fn.renderMath = function() {
+    var $this = this;
+    if ($this.length === 0) return;
+
+    if (katexLoaded) renderWithKaTeX($this);
+    else {
+      // Request CSS file so it is in the cache
+      $.get(gon.katex_css_url, function() {
+        var css = $('<link>',
+          { rel: 'stylesheet',
+            type: 'text/css',
+            href: gon.katex_css_url,
+          });
+        css.appendTo('head');
+
+        // Load KaTeX js
+        $.getScript(gon.katex_js_url, function() {
+          katexLoaded = true;
+          renderWithKaTeX($this); // Run KaTeX
+        });
+      });
+    }
+  };
+}).call(window);
diff --git a/app/assets/javascripts/right_sidebar.js b/app/assets/javascripts/right_sidebar.js
index df38937858f..a9b3de281e1 100644
--- a/app/assets/javascripts/right_sidebar.js
+++ b/app/assets/javascripts/right_sidebar.js
@@ -1,6 +1,9 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-unused-vars, consistent-return, one-var, one-var-declaration-per-line, quotes, prefer-template, object-shorthand, comma-dangle, no-else-return, no-param-reassign, max-len */
+
+import Cookies from 'js-cookie';
+
 (function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
 
   this.Sidebar = (function() {
     function Sidebar(currentUser) {
@@ -16,14 +19,19 @@
       $('.dropdown').off('loading.gl.dropdown');
       $('.dropdown').off('loaded.gl.dropdown');
       $(document).off('click', '.js-sidebar-toggle');
-    }
+    };
 
     Sidebar.prototype.addEventListeners = function() {
+      const $document = $(document);
+      const throttledSetSidebarHeight = _.throttle(this.setSidebarHeight, 10);
+
       this.sidebar.on('click', '.sidebar-collapsed-icon', this, this.sidebarCollapseClicked);
       $('.dropdown').on('hidden.gl.dropdown', this, this.onSidebarDropdownHidden);
       $('.dropdown').on('loading.gl.dropdown', this.sidebarDropdownLoading);
       $('.dropdown').on('loaded.gl.dropdown', this.sidebarDropdownLoaded);
-      $(document).on('click', '.js-sidebar-toggle', function(e, triggered) {
+      $(window).on('resize', () => throttledSetSidebarHeight());
+      $document.on('scroll', () => throttledSetSidebarHeight());
+      $document.on('click', '.js-sidebar-toggle', function(e, triggered) {
         var $allGutterToggleIcons, $this, $thisIcon;
         e.preventDefault();
         $this = $(this);
@@ -48,14 +56,15 @@
     Sidebar.prototype.toggleTodo = function(e) {
       var $btnText, $this, $todoLoading, ajaxType, url;
       $this = $(e.currentTarget);
-      $todoLoading = $('.js-issuable-todo-loading');
-      $btnText = $('.js-issuable-todo-text', $this);
       ajaxType = $this.attr('data-delete-path') ? 'DELETE' : 'POST';
       if ($this.attr('data-delete-path')) {
         url = "" + ($this.attr('data-delete-path'));
       } else {
         url = "" + ($this.data('url'));
       }
+
+      $this.tooltip('hide');
+
       return $.ajax({
         url: url,
         type: ajaxType,
@@ -66,34 +75,44 @@
         },
         beforeSend: (function(_this) {
           return function() {
-            return _this.beforeTodoSend($this, $todoLoading);
+            $('.js-issuable-todo').disable()
+              .addClass('is-loading');
           };
         })(this)
       }).done((function(_this) {
         return function(data) {
-          return _this.todoUpdateDone(data, $this, $btnText, $todoLoading);
+          return _this.todoUpdateDone(data);
         };
       })(this));
     };
 
-    Sidebar.prototype.beforeTodoSend = function($btn, $todoLoading) {
-      $btn.disable();
-      return $todoLoading.removeClass('hidden');
-    };
+    Sidebar.prototype.todoUpdateDone = function(data) {
+      const deletePath = data.delete_path ? data.delete_path : null;
+      const attrPrefix = deletePath ? 'mark' : 'todo';
+      const $todoBtns = $('.js-issuable-todo');
 
-    Sidebar.prototype.todoUpdateDone = function(data, $btn, $btnText, $todoLoading) {
       $(document).trigger('todo:toggle', data.count);
 
-      $btn.enable();
-      $todoLoading.addClass('hidden');
+      $todoBtns.each((i, el) => {
+        const $el = $(el);
+        const $elText = $el.find('.js-issuable-todo-inner');
 
-      if (data.delete_path != null) {
-        $btn.attr('aria-label', $btn.data('mark-text')).attr('data-delete-path', data.delete_path);
-        return $btnText.text($btn.data('mark-text'));
-      } else {
-        $btn.attr('aria-label', $btn.data('todo-text')).removeAttr('data-delete-path');
-        return $btnText.text($btn.data('todo-text'));
-      }
+        $el.removeClass('is-loading')
+          .enable()
+          .attr('aria-label', $el.data(`${attrPrefix}-text`))
+          .attr('data-delete-path', deletePath)
+          .attr('title', $el.data(`${attrPrefix}-text`));
+
+        if ($el.hasClass('has-tooltip')) {
+          $el.tooltip('fixTitle');
+        }
+
+        if ($el.data(`${attrPrefix}-icon`)) {
+          $elText.html($el.data(`${attrPrefix}-icon`));
+        } else {
+          $elText.text($el.data(`${attrPrefix}-text`));
+        }
+      });
     };
 
     Sidebar.prototype.sidebarDropdownLoading = function(e) {
@@ -189,6 +208,17 @@
       }
     };
 
+    Sidebar.prototype.setSidebarHeight = function() {
+      const $navHeight = $('.navbar-gitlab').outerHeight() + $('.layout-nav').outerHeight() + $('.sub-nav-scroll').outerHeight();
+      const $rightSidebar = $('.js-right-sidebar');
+      const diff = $navHeight - $(window).scrollTop();
+      if (diff > 0) {
+        $rightSidebar.outerHeight($(window).height() - diff);
+      } else {
+        $rightSidebar.outerHeight('100%');
+      }
+    };
+
     Sidebar.prototype.isOpen = function() {
       return this.sidebar.is('.right-sidebar-expanded');
     };
@@ -198,7 +228,5 @@
     };
 
     return Sidebar;
-
   })();
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/search.js b/app/assets/javascripts/search.js
index d79e6f014f6..15f5963353a 100644
--- a/app/assets/javascripts/search.js
+++ b/app/assets/javascripts/search.js
@@ -1,4 +1,6 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, one-var, one-var-declaration-per-line, object-shorthand, prefer-arrow-callback, comma-dangle, prefer-template, quotes, no-else-return, max-len */
+/* global Api */
+
 (function() {
   this.Search = (function() {
     function Search() {
@@ -10,10 +12,13 @@
         selectable: true,
         filterable: true,
         fieldName: 'group_id',
+        search: {
+          fields: ['full_name']
+        },
         data: function(term, callback) {
           return Api.groups(term, {}, function(data) {
             data.unshift({
-              name: 'Any'
+              full_name: 'Any'
             });
             data.splice(1, 0, 'divider');
             return callback(data);
@@ -23,10 +28,10 @@
           return obj.id;
         },
         text: function(obj) {
-          return obj.name;
+          return obj.full_name;
         },
         toggleLabel: function(obj) {
-          return ($groupDropdown.data('default-label')) + " " + obj.name;
+          return ($groupDropdown.data('default-label')) + " " + obj.full_name;
         },
         clicked: (function(_this) {
           return function() {
@@ -38,8 +43,11 @@
         selectable: true,
         filterable: true,
         fieldName: 'project_id',
+        search: {
+          fields: ['name']
+        },
         data: function(term, callback) {
-          return Api.projects(term, 'id', function(data) {
+          return Api.projects(term, { order_by: 'id' }, function(data) {
             data.unshift({
               name_with_namespace: 'Any'
             });
@@ -88,7 +96,5 @@
     };
 
     return Search;
-
   })();
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/search_autocomplete.js b/app/assets/javascripts/search_autocomplete.js
new file mode 100644
index 00000000000..6fd5345a0a6
--- /dev/null
+++ b/app/assets/javascripts/search_autocomplete.js
@@ -0,0 +1,432 @@
+/* eslint-disable comma-dangle, no-return-assign, one-var, no-var, no-underscore-dangle, one-var-declaration-per-line, no-unused-vars, no-cond-assign, consistent-return, object-shorthand, prefer-arrow-callback, func-names, space-before-function-paren, prefer-template, quotes, class-methods-use-this, no-unused-expressions, no-sequences, wrap-iife, no-lonely-if, no-else-return, no-param-reassign, vars-on-top, max-len */
+
+((global) => {
+  const KEYCODE = {
+    ESCAPE: 27,
+    BACKSPACE: 8,
+    ENTER: 13,
+    UP: 38,
+    DOWN: 40
+  };
+
+  class SearchAutocomplete {
+    constructor({ wrap, optsEl, autocompletePath, projectId, projectRef } = {}) {
+      this.bindEventContext();
+      this.wrap = wrap || $('.search');
+      this.optsEl = optsEl || this.wrap.find('.search-autocomplete-opts');
+      this.autocompletePath = autocompletePath || this.optsEl.data('autocomplete-path');
+      this.projectId = projectId || (this.optsEl.data('autocomplete-project-id') || '');
+      this.projectRef = projectRef || (this.optsEl.data('autocomplete-project-ref') || '');
+      this.dropdown = this.wrap.find('.dropdown');
+      this.dropdownContent = this.dropdown.find('.dropdown-content');
+      this.locationBadgeEl = this.getElement('.location-badge');
+      this.scopeInputEl = this.getElement('#scope');
+      this.searchInput = this.getElement('.search-input');
+      this.projectInputEl = this.getElement('#search_project_id');
+      this.groupInputEl = this.getElement('#group_id');
+      this.searchCodeInputEl = this.getElement('#search_code');
+      this.repositoryInputEl = this.getElement('#repository_ref');
+      this.clearInput = this.getElement('.js-clear-input');
+      this.saveOriginalState();
+      // Only when user is logged in
+      if (gon.current_user_id) {
+        this.createAutocomplete();
+      }
+      this.searchInput.addClass('disabled');
+      this.saveTextLength();
+      this.bindEvents();
+    }
+
+    // Finds an element inside wrapper element
+    bindEventContext() {
+      this.onSearchInputBlur = this.onSearchInputBlur.bind(this);
+      this.onClearInputClick = this.onClearInputClick.bind(this);
+      this.onSearchInputFocus = this.onSearchInputFocus.bind(this);
+      this.onSearchInputClick = this.onSearchInputClick.bind(this);
+      this.onSearchInputKeyUp = this.onSearchInputKeyUp.bind(this);
+      this.onSearchInputKeyDown = this.onSearchInputKeyDown.bind(this);
+    }
+    getElement(selector) {
+      return this.wrap.find(selector);
+    }
+
+    saveOriginalState() {
+      return this.originalState = this.serializeState();
+    }
+
+    saveTextLength() {
+      return this.lastTextLength = this.searchInput.val().length;
+    }
+
+    createAutocomplete() {
+      return this.searchInput.glDropdown({
+        filterInputBlur: false,
+        filterable: true,
+        filterRemote: true,
+        highlight: true,
+        enterCallback: false,
+        filterInput: 'input#search',
+        search: {
+          fields: ['text']
+        },
+        id: this.getSearchText,
+        data: this.getData.bind(this),
+        selectable: true,
+        clicked: this.onClick.bind(this)
+      });
+    }
+
+    getSearchText(selectedObject, el) {
+      return selectedObject.id ? selectedObject.text : '';
+    }
+
+    getData(term, callback) {
+      var _this, contents, jqXHR;
+      _this = this;
+      if (!term) {
+        if (contents = this.getCategoryContents()) {
+          this.searchInput.data('glDropdown').filter.options.callback(contents);
+          this.enableAutocomplete();
+        }
+        return;
+      }
+      // Prevent multiple ajax calls
+      if (this.loadingSuggestions) {
+        return;
+      }
+      this.loadingSuggestions = true;
+      return jqXHR = $.get(this.autocompletePath, {
+        project_id: this.projectId,
+        project_ref: this.projectRef,
+        term: term
+      }, function(response) {
+        var data, firstCategory, i, lastCategory, len, suggestion;
+        // Hide dropdown menu if no suggestions returns
+        if (!response.length) {
+          _this.disableAutocomplete();
+          return;
+        }
+        data = [];
+        // List results
+        firstCategory = true;
+        for (i = 0, len = response.length; i < len; i += 1) {
+          suggestion = response[i];
+          // Add group header before list each group
+          if (lastCategory !== suggestion.category) {
+            if (!firstCategory) {
+              data.push('separator');
+            }
+            if (firstCategory) {
+              firstCategory = false;
+            }
+            data.push({
+              header: suggestion.category
+            });
+            lastCategory = suggestion.category;
+          }
+          data.push({
+            id: (suggestion.category.toLowerCase()) + "-" + suggestion.id,
+            category: suggestion.category,
+            text: suggestion.label,
+            url: suggestion.url
+          });
+        }
+        // Add option to proceed with the search
+        if (data.length) {
+          data.push('separator');
+          data.push({
+            text: "Result name contains \"" + term + "\"",
+            url: "/search?search=" + term + "&project_id=" + (_this.projectInputEl.val()) + "&group_id=" + (_this.groupInputEl.val())
+          });
+        }
+        return callback(data);
+      }).always(function() {
+        return _this.loadingSuggestions = false;
+      });
+    }
+
+    getCategoryContents() {
+      var dashboardOptions, groupOptions, issuesPath, items, mrPath, name, options, projectOptions, userId, userName, utils;
+      userId = gon.current_user_id;
+      userName = gon.current_username;
+      utils = gl.utils, projectOptions = gl.projectOptions, groupOptions = gl.groupOptions, dashboardOptions = gl.dashboardOptions;
+      if (utils.isInGroupsPage() && groupOptions) {
+        options = groupOptions[utils.getGroupSlug()];
+      } else if (utils.isInProjectPage() && projectOptions) {
+        options = projectOptions[utils.getProjectSlug()];
+      } else if (dashboardOptions) {
+        options = dashboardOptions;
+      }
+      issuesPath = options.issuesPath, mrPath = options.mrPath, name = options.name;
+      items = [
+        {
+          header: "" + name
+        }, {
+          text: 'Issues assigned to me',
+          url: issuesPath + "/?assignee_username=" + userName
+        }, {
+          text: "Issues I've created",
+          url: issuesPath + "/?author_username=" + userName
+        }, 'separator', {
+          text: 'Merge requests assigned to me',
+          url: mrPath + "/?assignee_username=" + userName
+        }, {
+          text: "Merge requests I've created",
+          url: mrPath + "/?author_username=" + userName
+        }
+      ];
+      if (!name) {
+        items.splice(0, 1);
+      }
+      return items;
+    }
+
+    serializeState() {
+      return {
+        // Search Criteria
+        search_project_id: this.projectInputEl.val(),
+        group_id: this.groupInputEl.val(),
+        search_code: this.searchCodeInputEl.val(),
+        repository_ref: this.repositoryInputEl.val(),
+        scope: this.scopeInputEl.val(),
+        // Location badge
+        _location: this.locationBadgeEl.text()
+      };
+    }
+
+    bindEvents() {
+      this.searchInput.on('keydown', this.onSearchInputKeyDown);
+      this.searchInput.on('keyup', this.onSearchInputKeyUp);
+      this.searchInput.on('click', this.onSearchInputClick);
+      this.searchInput.on('focus', this.onSearchInputFocus);
+      this.searchInput.on('blur', this.onSearchInputBlur);
+      this.clearInput.on('click', this.onClearInputClick);
+      return this.locationBadgeEl.on('click', (function(_this) {
+        return function() {
+          return _this.searchInput.focus();
+        };
+      })(this));
+    }
+
+    enableAutocomplete() {
+      var _this;
+      // No need to enable anything if user is not logged in
+      if (!gon.current_user_id) {
+        return;
+      }
+      if (!this.dropdown.hasClass('open')) {
+        _this = this;
+        this.loadingSuggestions = false;
+        this.dropdown.addClass('open').trigger('shown.bs.dropdown');
+        return this.searchInput.removeClass('disabled');
+      }
+    }
+
+      // Saves last length of the entered text
+    onSearchInputKeyDown() {
+      return this.saveTextLength();
+    }
+
+    onSearchInputKeyUp(e) {
+      switch (e.keyCode) {
+        case KEYCODE.BACKSPACE:
+          // when trying to remove the location badge
+          if (this.lastTextLength === 0 && this.badgePresent()) {
+            this.removeLocationBadge();
+          }
+          // When removing the last character and no badge is present
+          if (this.lastTextLength === 1) {
+            this.disableAutocomplete();
+          }
+          // When removing any character from existin value
+          if (this.lastTextLength > 1) {
+            this.enableAutocomplete();
+          }
+          break;
+        case KEYCODE.ESCAPE:
+          this.restoreOriginalState();
+          break;
+        case KEYCODE.ENTER:
+          this.disableAutocomplete();
+          break;
+        case KEYCODE.UP:
+        case KEYCODE.DOWN:
+          return;
+        default:
+          // Handle the case when deleting the input value other than backspace
+          // e.g. Pressing ctrl + backspace or ctrl + x
+          if (this.searchInput.val() === '') {
+            this.disableAutocomplete();
+          } else {
+            // We should display the menu only when input is not empty
+            if (e.keyCode !== KEYCODE.ENTER) {
+              this.enableAutocomplete();
+            }
+          }
+      }
+      this.wrap.toggleClass('has-value', !!e.target.value);
+    }
+
+    // Avoid falsy value to be returned
+    onSearchInputClick(e) {
+      return e.stopImmediatePropagation();
+    }
+
+    onSearchInputFocus() {
+      this.isFocused = true;
+      this.wrap.addClass('search-active');
+      if (this.getValue() === '') {
+        return this.getData();
+      }
+    }
+
+    getValue() {
+      return this.searchInput.val();
+    }
+
+    onClearInputClick(e) {
+      e.preventDefault();
+      return this.searchInput.val('').focus();
+    }
+
+    onSearchInputBlur(e) {
+      this.isFocused = false;
+      this.wrap.removeClass('search-active');
+      // If input is blank then restore state
+      if (this.searchInput.val() === '') {
+        return this.restoreOriginalState();
+      }
+    }
+
+    addLocationBadge(item) {
+      var badgeText, category, value;
+      category = item.category != null ? item.category + ": " : '';
+      value = item.value != null ? item.value : '';
+      badgeText = "" + category + value;
+      this.locationBadgeEl.text(badgeText).show();
+      return this.wrap.addClass('has-location-badge');
+    }
+
+    hasLocationBadge() {
+      return this.wrap.is('.has-location-badge');
+    }
+
+    restoreOriginalState() {
+      var i, input, inputs, len;
+      inputs = Object.keys(this.originalState);
+      for (i = 0, len = inputs.length; i < len; i += 1) {
+        input = inputs[i];
+        this.getElement("#" + input).val(this.originalState[input]);
+      }
+      if (this.originalState._location === '') {
+        return this.locationBadgeEl.hide();
+      } else {
+        return this.addLocationBadge({
+          value: this.originalState._location
+        });
+      }
+    }
+
+    badgePresent() {
+      return this.locationBadgeEl.length;
+    }
+
+    resetSearchState() {
+      var i, input, inputs, len, results;
+      inputs = Object.keys(this.originalState);
+      results = [];
+      for (i = 0, len = inputs.length; i < len; i += 1) {
+        input = inputs[i];
+        // _location isnt a input
+        if (input === '_location') {
+          break;
+        }
+        results.push(this.getElement("#" + input).val(''));
+      }
+      return results;
+    }
+
+    removeLocationBadge() {
+      this.locationBadgeEl.hide();
+      this.resetSearchState();
+      this.wrap.removeClass('has-location-badge');
+      return this.disableAutocomplete();
+    }
+
+    disableAutocomplete() {
+      if (!this.searchInput.hasClass('disabled') && this.dropdown.hasClass('open')) {
+        this.searchInput.addClass('disabled');
+        this.dropdown.removeClass('open').trigger('hidden.bs.dropdown');
+        this.restoreMenu();
+      }
+    }
+
+    restoreMenu() {
+      var html;
+      html = "<ul> <li><a class='dropdown-menu-empty-link is-focused'>Loading...</a></li> </ul>";
+      return this.dropdownContent.html(html);
+    }
+
+    onClick(item, $el, e) {
+      if (location.pathname.indexOf(item.url) !== -1) {
+        if (!e.metaKey) e.preventDefault();
+        if (!this.badgePresent) {
+          if (item.category === 'Projects') {
+            this.projectInputEl.val(item.id);
+            this.addLocationBadge({
+              value: 'This project'
+            });
+          }
+          if (item.category === 'Groups') {
+            this.groupInputEl.val(item.id);
+            this.addLocationBadge({
+              value: 'This group'
+            });
+          }
+        }
+        $el.removeClass('is-active');
+        this.disableAutocomplete();
+        return this.searchInput.val('').focus();
+      }
+    }
+  }
+
+  global.SearchAutocomplete = SearchAutocomplete;
+
+  $(function() {
+    var $projectOptionsDataEl = $('.js-search-project-options');
+    var $groupOptionsDataEl = $('.js-search-group-options');
+    var $dashboardOptionsDataEl = $('.js-search-dashboard-options');
+
+    if ($projectOptionsDataEl.length) {
+      gl.projectOptions = gl.projectOptions || {};
+
+      var projectPath = $projectOptionsDataEl.data('project-path');
+
+      gl.projectOptions[projectPath] = {
+        name: $projectOptionsDataEl.data('name'),
+        issuesPath: $projectOptionsDataEl.data('issues-path'),
+        mrPath: $projectOptionsDataEl.data('mr-path')
+      };
+    }
+
+    if ($groupOptionsDataEl.length) {
+      gl.groupOptions = gl.groupOptions || {};
+
+      var groupPath = $groupOptionsDataEl.data('group-path');
+
+      gl.groupOptions[groupPath] = {
+        name: $groupOptionsDataEl.data('name'),
+        issuesPath: $groupOptionsDataEl.data('issues-path'),
+        mrPath: $groupOptionsDataEl.data('mr-path')
+      };
+    }
+
+    if ($dashboardOptionsDataEl.length) {
+      gl.dashboardOptions = {
+        issuesPath: $dashboardOptionsDataEl.data('issues-path'),
+        mrPath: $dashboardOptionsDataEl.data('mr-path')
+      };
+    }
+  });
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/search_autocomplete.js.es6 b/app/assets/javascripts/search_autocomplete.js.es6
deleted file mode 100644
index 5fa94556501..00000000000
--- a/app/assets/javascripts/search_autocomplete.js.es6
+++ /dev/null
@@ -1,428 +0,0 @@
-/* eslint-disable */
-((global) => {
-
-  const KEYCODE = {
-    ESCAPE: 27,
-    BACKSPACE: 8,
-    ENTER: 13,
-    UP: 38,
-    DOWN: 40
-  };
-
-  class SearchAutocomplete {
-    constructor({ wrap, optsEl, autocompletePath, projectId, projectRef } = {}) {
-      this.bindEventContext();
-      this.wrap = wrap || $('.search');
-      this.optsEl = optsEl || this.wrap.find('.search-autocomplete-opts');
-      this.autocompletePath = autocompletePath || this.optsEl.data('autocomplete-path');
-      this.projectId = projectId || (this.optsEl.data('autocomplete-project-id') || '');
-      this.projectRef = projectRef || (this.optsEl.data('autocomplete-project-ref') || '');
-      this.dropdown = this.wrap.find('.dropdown');
-      this.dropdownContent = this.dropdown.find('.dropdown-content');
-      this.locationBadgeEl = this.getElement('.location-badge');
-      this.scopeInputEl = this.getElement('#scope');
-      this.searchInput = this.getElement('.search-input');
-      this.projectInputEl = this.getElement('#search_project_id');
-      this.groupInputEl = this.getElement('#group_id');
-      this.searchCodeInputEl = this.getElement('#search_code');
-      this.repositoryInputEl = this.getElement('#repository_ref');
-      this.clearInput = this.getElement('.js-clear-input');
-      this.saveOriginalState();
-      // Only when user is logged in
-      if (gon.current_user_id) {
-        this.createAutocomplete();
-      }
-      this.searchInput.addClass('disabled');
-      this.saveTextLength();
-      this.bindEvents();
-    }
-
-    // Finds an element inside wrapper element
-    bindEventContext() {
-      this.onSearchInputBlur = this.onSearchInputBlur.bind(this);
-      this.onClearInputClick = this.onClearInputClick.bind(this);
-      this.onSearchInputFocus = this.onSearchInputFocus.bind(this);
-      this.onSearchInputClick = this.onSearchInputClick.bind(this);
-      this.onSearchInputKeyUp = this.onSearchInputKeyUp.bind(this);
-      this.onSearchInputKeyDown = this.onSearchInputKeyDown.bind(this);
-    }
-    getElement(selector) {
-      return this.wrap.find(selector);
-    }
-
-    saveOriginalState() {
-      return this.originalState = this.serializeState();
-    }
-
-    saveTextLength() {
-      return this.lastTextLength = this.searchInput.val().length;
-    }
-
-    createAutocomplete() {
-      return this.searchInput.glDropdown({
-        filterInputBlur: false,
-        filterable: true,
-        filterRemote: true,
-        highlight: true,
-        enterCallback: false,
-        filterInput: 'input#search',
-        search: {
-          fields: ['text']
-        },
-        data: this.getData.bind(this),
-        selectable: true,
-        clicked: this.onClick.bind(this)
-      });
-    }
-
-    getData(term, callback) {
-      var _this, contents, jqXHR;
-      _this = this;
-      if (!term) {
-        if (contents = this.getCategoryContents()) {
-          this.searchInput.data('glDropdown').filter.options.callback(contents);
-          this.enableAutocomplete();
-        }
-        return;
-      }
-      // Prevent multiple ajax calls
-      if (this.loadingSuggestions) {
-        return;
-      }
-      this.loadingSuggestions = true;
-      return jqXHR = $.get(this.autocompletePath, {
-        project_id: this.projectId,
-        project_ref: this.projectRef,
-        term: term
-      }, function(response) {
-        var data, firstCategory, i, lastCategory, len, suggestion;
-        // Hide dropdown menu if no suggestions returns
-        if (!response.length) {
-          _this.disableAutocomplete();
-          return;
-        }
-        data = [];
-        // List results
-        firstCategory = true;
-        for (i = 0, len = response.length; i < len; i++) {
-          suggestion = response[i];
-          // Add group header before list each group
-          if (lastCategory !== suggestion.category) {
-            if (!firstCategory) {
-              data.push('separator');
-            }
-            if (firstCategory) {
-              firstCategory = false;
-            }
-            data.push({
-              header: suggestion.category
-            });
-            lastCategory = suggestion.category;
-          }
-          data.push({
-            id: (suggestion.category.toLowerCase()) + "-" + suggestion.id,
-            category: suggestion.category,
-            text: suggestion.label,
-            url: suggestion.url
-          });
-        }
-        // Add option to proceed with the search
-        if (data.length) {
-          data.push('separator');
-          data.push({
-            text: "Result name contains \"" + term + "\"",
-            url: "/search?search=" + term + "&project_id=" + (_this.projectInputEl.val()) + "&group_id=" + (_this.groupInputEl.val())
-          });
-        }
-        return callback(data);
-      }).always(function() {
-        return _this.loadingSuggestions = false;
-      });
-    }
-
-    getCategoryContents() {
-      var dashboardOptions, groupOptions, issuesPath, items, mrPath, name, options, projectOptions, userId, utils;
-      userId = gon.current_user_id;
-      utils = gl.utils, projectOptions = gl.projectOptions, groupOptions = gl.groupOptions, dashboardOptions = gl.dashboardOptions;
-      if (utils.isInGroupsPage() && groupOptions) {
-        options = groupOptions[utils.getGroupSlug()];
-      } else if (utils.isInProjectPage() && projectOptions) {
-        options = projectOptions[utils.getProjectSlug()];
-      } else if (dashboardOptions) {
-        options = dashboardOptions;
-      }
-      issuesPath = options.issuesPath, mrPath = options.mrPath, name = options.name;
-      items = [
-        {
-          header: "" + name
-        }, {
-          text: 'Issues assigned to me',
-          url: issuesPath + "/?assignee_id=" + userId
-        }, {
-          text: "Issues I've created",
-          url: issuesPath + "/?author_id=" + userId
-        }, 'separator', {
-          text: 'Merge requests assigned to me',
-          url: mrPath + "/?assignee_id=" + userId
-        }, {
-          text: "Merge requests I've created",
-          url: mrPath + "/?author_id=" + userId
-        }
-      ];
-      if (!name) {
-        items.splice(0, 1);
-      }
-      return items;
-    }
-
-    serializeState() {
-      return {
-        // Search Criteria
-        search_project_id: this.projectInputEl.val(),
-        group_id: this.groupInputEl.val(),
-        search_code: this.searchCodeInputEl.val(),
-        repository_ref: this.repositoryInputEl.val(),
-        scope: this.scopeInputEl.val(),
-        // Location badge
-        _location: this.locationBadgeEl.text()
-      };
-    }
-
-    bindEvents() {
-      this.searchInput.on('keydown', this.onSearchInputKeyDown);
-      this.searchInput.on('keyup', this.onSearchInputKeyUp);
-      this.searchInput.on('click', this.onSearchInputClick);
-      this.searchInput.on('focus', this.onSearchInputFocus);
-      this.searchInput.on('blur', this.onSearchInputBlur);
-      this.clearInput.on('click', this.onClearInputClick);
-      return this.locationBadgeEl.on('click', (function(_this) {
-        return function() {
-          return _this.searchInput.focus();
-        };
-      })(this));
-    }
-
-    enableAutocomplete() {
-      var _this;
-      // No need to enable anything if user is not logged in
-      if (!gon.current_user_id) {
-        return;
-      }
-      if (!this.dropdown.hasClass('open')) {
-        _this = this;
-        this.loadingSuggestions = false;
-        this.dropdown.addClass('open').trigger('shown.bs.dropdown');
-        return this.searchInput.removeClass('disabled');
-      }
-    };
-
-      // Saves last length of the entered text
-    onSearchInputKeyDown() {
-      return this.saveTextLength();
-    }
-
-    onSearchInputKeyUp(e) {
-      switch (e.keyCode) {
-        case KEYCODE.BACKSPACE:
-          // when trying to remove the location badge
-          if (this.lastTextLength === 0 && this.badgePresent()) {
-            this.removeLocationBadge();
-          }
-          // When removing the last character and no badge is present
-          if (this.lastTextLength === 1) {
-            this.disableAutocomplete();
-          }
-          // When removing any character from existin value
-          if (this.lastTextLength > 1) {
-            this.enableAutocomplete();
-          }
-          break;
-        case KEYCODE.ESCAPE:
-          this.restoreOriginalState();
-          break;
-        case KEYCODE.ENTER:
-          this.disableAutocomplete();
-          break;
-        case KEYCODE.UP:
-        case KEYCODE.DOWN:
-          return;
-        default:
-          // Handle the case when deleting the input value other than backspace
-          // e.g. Pressing ctrl + backspace or ctrl + x
-          if (this.searchInput.val() === '') {
-            this.disableAutocomplete();
-          } else {
-            // We should display the menu only when input is not empty
-            if (e.keyCode !== KEYCODE.ENTER) {
-              this.enableAutocomplete();
-            }
-          }
-      }
-      this.wrap.toggleClass('has-value', !!e.target.value);
-    }
-
-    // Avoid falsy value to be returned
-    onSearchInputClick(e) {
-      return e.stopImmediatePropagation();
-    }
-
-    onSearchInputFocus() {
-      this.isFocused = true;
-      this.wrap.addClass('search-active');
-      if (this.getValue() === '') {
-        return this.getData();
-      }
-    }
-
-    getValue() {
-      return this.searchInput.val();
-    }
-
-   onClearInputClick(e) {
-      e.preventDefault();
-      return this.searchInput.val('').focus();
-    }
-
-   onSearchInputBlur(e) {
-      this.isFocused = false;
-      this.wrap.removeClass('search-active');
-      // If input is blank then restore state
-      if (this.searchInput.val() === '') {
-        return this.restoreOriginalState();
-      }
-    }
-
-    addLocationBadge(item) {
-      var badgeText, category, value;
-      category = item.category != null ? item.category + ": " : '';
-      value = item.value != null ? item.value : '';
-      badgeText = "" + category + value;
-      this.locationBadgeEl.text(badgeText).show();
-      return this.wrap.addClass('has-location-badge');
-    }
-
-    hasLocationBadge() {
-      return this.wrap.is('.has-location-badge');
-    };
-
-    restoreOriginalState() {
-      var i, input, inputs, len;
-      inputs = Object.keys(this.originalState);
-      for (i = 0, len = inputs.length; i < len; i++) {
-        input = inputs[i];
-        this.getElement("#" + input).val(this.originalState[input]);
-      }
-      if (this.originalState._location === '') {
-        return this.locationBadgeEl.hide();
-      } else {
-        return this.addLocationBadge({
-          value: this.originalState._location
-        });
-      }
-    }
-
-    badgePresent() {
-      return this.locationBadgeEl.length;
-    }
-
-    resetSearchState() {
-      var i, input, inputs, len, results;
-      inputs = Object.keys(this.originalState);
-      results = [];
-      for (i = 0, len = inputs.length; i < len; i++) {
-        input = inputs[i];
-        // _location isnt a input
-        if (input === '_location') {
-          break;
-        }
-        results.push(this.getElement("#" + input).val(''));
-      }
-      return results;
-    }
-
-    removeLocationBadge() {
-      this.locationBadgeEl.hide();
-      this.resetSearchState();
-      this.wrap.removeClass('has-location-badge');
-      return this.disableAutocomplete();
-    }
-
-    disableAutocomplete() {
-      if (!this.searchInput.hasClass('disabled') && this.dropdown.hasClass('open')) {
-        this.searchInput.addClass('disabled');
-        this.dropdown.removeClass('open').trigger('hidden.bs.dropdown');
-        this.restoreMenu();
-      }
-    }
-
-    restoreMenu() {
-      var html;
-      html = "<ul> <li><a class='dropdown-menu-empty-link is-focused'>Loading...</a></li> </ul>";
-      return this.dropdownContent.html(html);
-    };
-
-    onClick(item, $el, e) {
-      if (location.pathname.indexOf(item.url) !== -1) {
-        e.preventDefault();
-        if (!this.badgePresent) {
-          if (item.category === 'Projects') {
-            this.projectInputEl.val(item.id);
-            this.addLocationBadge({
-              value: 'This project'
-            });
-          }
-          if (item.category === 'Groups') {
-            this.groupInputEl.val(item.id);
-            this.addLocationBadge({
-              value: 'This group'
-            });
-          }
-        }
-        $el.removeClass('is-active');
-        this.disableAutocomplete();
-        return this.searchInput.val('').focus();
-      }
-    };
-
-  }
-
-  global.SearchAutocomplete = SearchAutocomplete;
-
-  $(function() {
-    var $projectOptionsDataEl = $('.js-search-project-options');
-    var $groupOptionsDataEl = $('.js-search-group-options');
-    var $dashboardOptionsDataEl = $('.js-search-dashboard-options');
-
-    if ($projectOptionsDataEl.length) {
-      gl.projectOptions = gl.projectOptions || {};
-
-      var projectPath = $projectOptionsDataEl.data('project-path');
-
-      gl.projectOptions[projectPath] = {
-        name: $projectOptionsDataEl.data('name'),
-        issuesPath: $projectOptionsDataEl.data('issues-path'),
-        mrPath: $projectOptionsDataEl.data('mr-path')
-      };
-    }
-
-    if ($groupOptionsDataEl.length) {
-      gl.groupOptions = gl.groupOptions || {};
-
-      var groupPath = $groupOptionsDataEl.data('group-path');
-
-      gl.groupOptions[groupPath] = {
-        name: $groupOptionsDataEl.data('name'),
-        issuesPath: $groupOptionsDataEl.data('issues-path'),
-        mrPath: $groupOptionsDataEl.data('mr-path')
-      };
-    }
-
-    if ($dashboardOptionsDataEl.length) {
-      gl.dashboardOptions = {
-        issuesPath: $dashboardOptionsDataEl.data('issues-path'),
-        mrPath: $dashboardOptionsDataEl.data('mr-path')
-      };
-    }
-  });
-
-})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/shortcuts.js b/app/assets/javascripts/shortcuts.js
index 8d8ab6dda5e..fd5097696ad 100644
--- a/app/assets/javascripts/shortcuts.js
+++ b/app/assets/javascripts/shortcuts.js
@@ -1,6 +1,9 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, quotes, prefer-arrow-callback, consistent-return, object-shorthand, no-unused-vars, one-var, one-var-declaration-per-line, no-else-return, comma-dangle, max-len */
+/* global Mousetrap */
+/* global findFileURL */
+
 (function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
 
   this.Shortcuts = (function() {
     function Shortcuts(skipResetBindings) {
@@ -19,7 +22,7 @@
       Mousetrap.bind(['ctrl+shift+p', 'command+shift+p'], this.toggleMarkdownPreview);
       if (typeof findFileURL !== "undefined" && findFileURL !== null) {
         Mousetrap.bind('t', function() {
-          return Turbolinks.visit(findFileURL);
+          return gl.utils.visitUrl(findFileURL);
         });
       }
     }
@@ -30,6 +33,10 @@
     };
 
     Shortcuts.prototype.toggleMarkdownPreview = function(e) {
+      // Check if short-cut was triggered while in Write Mode
+      if ($(e.target).hasClass('js-note-text')) {
+        $('.js-md-preview-button').focus();
+      }
       return $(document).triggerHandler('markdown-preview:toggle', [e]);
     };
 
@@ -47,7 +54,7 @@
           var i, l, len, results;
           if (location && location.length > 0) {
             results = [];
-            for (i = 0, len = location.length; i < len; i++) {
+            for (i = 0, len = location.length; i < len; i += 1) {
               l = location[i];
               results.push($(l).show());
             }
@@ -74,7 +81,6 @@
     };
 
     return Shortcuts;
-
   })();
 
   $(document).on('click.more_help', '.js-more-help-button', function(e) {
@@ -95,5 +101,4 @@
       }
     };
   })();
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/shortcuts_blob.js b/app/assets/javascripts/shortcuts_blob.js
index 704a8bd3a57..bfe90aef71e 100644
--- a/app/assets/javascripts/shortcuts_blob.js
+++ b/app/assets/javascripts/shortcuts_blob.js
@@ -1,29 +1,29 @@
-/* eslint-disable */
-
-/*= require shortcuts */
-
-(function() {
-  var extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
-    hasProp = {}.hasOwnProperty;
-
-  this.ShortcutsBlob = (function(superClass) {
-    extend(ShortcutsBlob, superClass);
-
-    function ShortcutsBlob(skipResetBindings) {
-      ShortcutsBlob.__super__.constructor.call(this, skipResetBindings);
-      Mousetrap.bind('y', ShortcutsBlob.copyToClipboard);
+/* global Mousetrap */
+/* global Shortcuts */
+
+require('./shortcuts');
+
+const defaults = {
+  skipResetBindings: false,
+  fileBlobPermalinkUrl: null,
+};
+
+class ShortcutsBlob extends Shortcuts {
+  constructor(opts) {
+    const options = Object.assign({}, defaults, opts);
+    super(options.skipResetBindings);
+    this.options = options;
+
+    Mousetrap.bind('y', this.moveToFilePermalink.bind(this));
+  }
+
+  moveToFilePermalink() {
+    if (this.options.fileBlobPermalinkUrl) {
+      const hash = gl.utils.getLocationHash();
+      const hashUrlString = hash ? `#${hash}` : '';
+      gl.utils.visitUrl(`${this.options.fileBlobPermalinkUrl}${hashUrlString}`);
     }
+  }
+}
 
-    ShortcutsBlob.copyToClipboard = function() {
-      var clipboardButton;
-      clipboardButton = $('.btn-clipboard');
-      if (clipboardButton) {
-        return clipboardButton.click();
-      }
-    };
-
-    return ShortcutsBlob;
-
-  })(Shortcuts);
-
-}).call(this);
+module.exports = ShortcutsBlob;
diff --git a/app/assets/javascripts/shortcuts_dashboard_navigation.js b/app/assets/javascripts/shortcuts_dashboard_navigation.js
index befe4eccdba..4f1a19924a4 100644
--- a/app/assets/javascripts/shortcuts_dashboard_navigation.js
+++ b/app/assets/javascripts/shortcuts_dashboard_navigation.js
@@ -1,6 +1,8 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, max-len, one-var, no-var, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, prefer-arrow-callback, consistent-return, no-return-assign */
+/* global Mousetrap */
+/* global Shortcuts */
 
-/*= require shortcuts */
+require('./shortcuts');
 
 (function() {
   var extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
@@ -20,6 +22,9 @@
       Mousetrap.bind('g m', function() {
         return ShortcutsDashboardNavigation.findAndFollowLink('.dashboard-shortcuts-merge_requests');
       });
+      Mousetrap.bind('g t', function() {
+        return ShortcutsDashboardNavigation.findAndFollowLink('.shortcuts-todos');
+      });
       Mousetrap.bind('g p', function() {
         return ShortcutsDashboardNavigation.findAndFollowLink('.dashboard-shortcuts-projects');
       });
@@ -34,7 +39,5 @@
     };
 
     return ShortcutsDashboardNavigation;
-
   })(Shortcuts);
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/shortcuts_find_file.js b/app/assets/javascripts/shortcuts_find_file.js
index 90ed4267661..a27ac264a5c 100644
--- a/app/assets/javascripts/shortcuts_find_file.js
+++ b/app/assets/javascripts/shortcuts_find_file.js
@@ -1,6 +1,8 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, max-len, one-var, no-var, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife */
+/* global Mousetrap */
+/* global ShortcutsNavigation */
 
-/*= require shortcuts_navigation */
+require('./shortcuts_navigation');
 
 (function() {
   var extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
@@ -32,7 +34,5 @@
     }
 
     return ShortcutsFindFile;
-
   })(ShortcutsNavigation);
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/shortcuts_issuable.js b/app/assets/javascripts/shortcuts_issuable.js
index 25ec7dbc067..fe58e98cee5 100644
--- a/app/assets/javascripts/shortcuts_issuable.js
+++ b/app/assets/javascripts/shortcuts_issuable.js
@@ -1,7 +1,10 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, max-len, no-var, one-var, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, one-var-declaration-per-line, quotes, prefer-arrow-callback, consistent-return, prefer-template, no-mixed-operators */
+/* global Mousetrap */
+/* global ShortcutsNavigation */
+/* global sidebar */
 
-/*= require mousetrap */
-/*= require shortcuts_navigation */
+require('mousetrap');
+require('./shortcuts_navigation');
 
 (function() {
   var extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
@@ -35,35 +38,48 @@
     }
 
     ShortcutsIssuable.prototype.replyWithSelectedText = function() {
-      var quote, replyField, selected, separator;
-      if (window.getSelection) {
-        selected = window.getSelection().toString();
-        replyField = $('.js-main-target-form #note_note');
-        if (selected.trim() === "") {
-          return;
-        }
-        // Put a '>' character before each non-empty line in the selection
-        quote = _.map(selected.split("\n"), function(val) {
-          if (val.trim() !== '') {
-            return "> " + val + "\n";
-          }
-        });
-        // If replyField already has some content, add a newline before our quote
-        separator = replyField.val().trim() !== "" && "\n" || '';
-        replyField.val(function(_, current) {
-          return current + separator + quote.join('') + "\n";
-        });
-        // Trigger autosave for the added text
-        replyField.trigger('input');
-        // Focus the input field
-        return replyField.focus();
+      var quote, documentFragment, selected, separator;
+      var replyField = $('.js-main-target-form #note_note');
+
+      documentFragment = window.gl.utils.getSelectedFragment();
+      if (!documentFragment) {
+        replyField.focus();
+        return;
+      }
+
+      // If the documentFragment contains more than just Markdown, don't copy as GFM.
+      if (documentFragment.querySelector('.md, .wiki')) return;
+
+      selected = window.gl.CopyAsGFM.nodeToGFM(documentFragment);
+
+      if (selected.trim() === "") {
+        return;
       }
+      quote = _.map(selected.split("\n"), function(val) {
+        return ("> " + val).trim() + "\n";
+      });
+      // If replyField already has some content, add a newline before our quote
+      separator = replyField.val().trim() !== "" && "\n\n" || '';
+      replyField.val(function(_, current) {
+        return current + separator + quote.join('') + "\n";
+      });
+
+      // Trigger autosave
+      replyField.trigger('input');
+
+      // Trigger autosize
+      var event = document.createEvent('Event');
+      event.initEvent('autosize:update', true, false);
+      replyField.get(0).dispatchEvent(event);
+
+      // Focus the input field
+      return replyField.focus();
     };
 
     ShortcutsIssuable.prototype.editIssue = function() {
       var $editBtn;
       $editBtn = $('.issuable-edit');
-      return Turbolinks.visit($editBtn.attr('href'));
+      return gl.utils.visitUrl($editBtn.attr('href'));
     };
 
     ShortcutsIssuable.prototype.openSidebarDropdown = function(name) {
@@ -72,7 +88,5 @@
     };
 
     return ShortcutsIssuable;
-
   })(ShortcutsNavigation);
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/shortcuts_navigation.js b/app/assets/javascripts/shortcuts_navigation.js
index 19c6b7d30ab..3f5d6724417 100644
--- a/app/assets/javascripts/shortcuts_navigation.js
+++ b/app/assets/javascripts/shortcuts_navigation.js
@@ -1,6 +1,8 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, max-len, no-var, one-var, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, prefer-arrow-callback, consistent-return, no-return-assign */
+/* global Mousetrap */
+/* global Shortcuts */
 
-/*= require shortcuts */
+require('./shortcuts');
 
 (function() {
   var extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
@@ -30,7 +32,7 @@
         return ShortcutsNavigation.findAndFollowLink('.shortcuts-network');
       });
       Mousetrap.bind('g g', function() {
-        return ShortcutsNavigation.findAndFollowLink('.shortcuts-graphs');
+        return ShortcutsNavigation.findAndFollowLink('.shortcuts-repository-charts');
       });
       Mousetrap.bind('g i', function() {
         return ShortcutsNavigation.findAndFollowLink('.shortcuts-issues');
@@ -41,6 +43,9 @@
       Mousetrap.bind('g m', function() {
         return ShortcutsNavigation.findAndFollowLink('.shortcuts-merge_requests');
       });
+      Mousetrap.bind('g t', function() {
+        return ShortcutsNavigation.findAndFollowLink('.shortcuts-todos');
+      });
       Mousetrap.bind('g w', function() {
         return ShortcutsNavigation.findAndFollowLink('.shortcuts-wiki');
       });
@@ -62,7 +67,5 @@
     };
 
     return ShortcutsNavigation;
-
   })(Shortcuts);
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/shortcuts_network.js b/app/assets/javascripts/shortcuts_network.js
index 002e979a2c6..4c2bf8bf001 100644
--- a/app/assets/javascripts/shortcuts_network.js
+++ b/app/assets/javascripts/shortcuts_network.js
@@ -1,6 +1,8 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, max-len, no-var, one-var, no-restricted-syntax, vars-on-top, no-use-before-define, no-param-reassign, new-cap, no-underscore-dangle, wrap-iife, max-len */
+/* global Mousetrap */
+/* global ShortcutsNavigation */
 
-/*= require shortcuts_navigation */
+require('./shortcuts_navigation');
 
 (function() {
   var extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
@@ -22,7 +24,5 @@
     }
 
     return ShortcutsNetwork;
-
   })(ShortcutsNavigation);
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/sidebar.js.es6 b/app/assets/javascripts/sidebar.js.es6
deleted file mode 100644
index a23ca449c4b..00000000000
--- a/app/assets/javascripts/sidebar.js.es6
+++ /dev/null
@@ -1,96 +0,0 @@
-/* eslint-disable */
-((global) => {
-  let singleton;
-
-  const pinnedStateCookie = 'pin_nav';
-  const sidebarBreakpoint = 1024;
-
-  const pageSelector = '.page-with-sidebar';
-  const navbarSelector = '.navbar-fixed-top';
-  const sidebarWrapperSelector = '.sidebar-wrapper';
-  const sidebarContentSelector = '.nav-sidebar';
-
-  const pinnedToggleSelector = '.js-nav-pin';
-  const sidebarToggleSelector = '.toggle-nav-collapse, .side-nav-toggle';
-
-  const pinnedPageClass = 'page-sidebar-pinned';
-  const expandedPageClass = 'page-sidebar-expanded';
-
-  const pinnedNavbarClass = 'header-sidebar-pinned';
-  const expandedNavbarClass = 'header-sidebar-expanded';
-
-  class Sidebar {
-    constructor() {
-      if (!singleton) {
-        singleton = this;
-        singleton.init();
-      }
-      return singleton;
-    }
-
-    init() {
-      this.isPinned = Cookies.get(pinnedStateCookie) === 'true';
-      this.isExpanded = (
-        window.innerWidth >= sidebarBreakpoint &&
-        $(pageSelector).hasClass(expandedPageClass)
-      );
-      $(document)
-        .on('click', sidebarToggleSelector, () => this.toggleSidebar())
-        .on('click', pinnedToggleSelector, () => this.togglePinnedState())
-        .on('click', 'html, body', (e) => this.handleClickEvent(e))
-        .on('page:change', () => this.renderState())
-        .on('todo:toggle', (e, count) => this.updateTodoCount(count));
-      this.renderState();
-    }
-
-    handleClickEvent(e) {
-      if (this.isExpanded && (!this.isPinned || window.innerWidth < sidebarBreakpoint)) {
-        const $target = $(e.target);
-        const targetIsToggle = $target.closest(sidebarToggleSelector).length > 0;
-        const targetIsSidebar = $target.closest(sidebarWrapperSelector).length > 0;
-        if (!targetIsToggle && (!targetIsSidebar || $target.closest('a'))) {
-          this.toggleSidebar();
-        }
-      }
-    }
-
-    updateTodoCount(count) {
-      $('.js-todos-count').text(gl.text.addDelimiter(count));
-    }
-
-    toggleSidebar() {
-      this.isExpanded = !this.isExpanded;
-      this.renderState();
-    }
-
-    togglePinnedState() {
-      this.isPinned = !this.isPinned;
-      if (!this.isPinned) {
-        this.isExpanded = false;
-      }
-      Cookies.set(pinnedStateCookie, this.isPinned ? 'true' : 'false', { expires: 3650 });
-      this.renderState();
-    }
-
-    renderState() {
-      $(pageSelector)
-        .toggleClass(pinnedPageClass, this.isPinned && this.isExpanded)
-        .toggleClass(expandedPageClass, this.isExpanded);
-      $(navbarSelector)
-        .toggleClass(pinnedNavbarClass, this.isPinned && this.isExpanded)
-        .toggleClass(expandedNavbarClass, this.isExpanded);
-
-      const $pinnedToggle = $(pinnedToggleSelector);
-      const tooltipText = this.isPinned ? 'Unpin navigation' : 'Pin navigation';
-      const tooltipState = $pinnedToggle.attr('aria-describedby') && this.isExpanded ? 'show' : 'hide';
-      $pinnedToggle.attr('title', tooltipText).tooltip('fixTitle').tooltip(tooltipState);
-
-      if (this.isExpanded) {
-        setTimeout(() => $(sidebarContentSelector).niceScroll().updateScrollBar(), 200);
-      }
-    }
-  }
-
-  global.Sidebar = Sidebar;
-
-})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/signin_tabs_memoizer.js b/app/assets/javascripts/signin_tabs_memoizer.js
new file mode 100644
index 00000000000..d811d1cd53a
--- /dev/null
+++ b/app/assets/javascripts/signin_tabs_memoizer.js
@@ -0,0 +1,49 @@
+/* eslint no-param-reassign: ["error", { "props": false }]*/
+/* eslint no-new: "off" */
+((global) => {
+  /**
+   * Memorize the last selected tab after reloading a page.
+   * Does that setting the current selected tab in the localStorage
+   */
+  class ActiveTabMemoizer {
+    constructor({ currentTabKey = 'current_signin_tab', tabSelector = 'ul.nav-tabs' } = {}) {
+      this.currentTabKey = currentTabKey;
+      this.tabSelector = tabSelector;
+      this.bootstrap();
+    }
+
+    bootstrap() {
+      const tabs = document.querySelectorAll(this.tabSelector);
+      if (tabs.length > 0) {
+        tabs[0].addEventListener('click', (e) => {
+          if (e.target && e.target.nodeName === 'A') {
+            const anchorName = e.target.getAttribute('href');
+            this.saveData(anchorName);
+          }
+        });
+      }
+
+      this.showTab();
+    }
+
+    showTab() {
+      const anchorName = this.readData();
+      if (anchorName) {
+        const tab = document.querySelector(`${this.tabSelector} a[href="${anchorName}"]`);
+        if (tab) {
+          tab.click();
+        }
+      }
+    }
+
+    saveData(val) {
+      localStorage.setItem(this.currentTabKey, val);
+    }
+
+    readData() {
+      return localStorage.getItem(this.currentTabKey);
+    }
+  }
+
+  global.ActiveTabMemoizer = ActiveTabMemoizer;
+})(window);
diff --git a/app/assets/javascripts/single_file_diff.js b/app/assets/javascripts/single_file_diff.js
index 8e54ca4f0dc..294d087554e 100644
--- a/app/assets/javascripts/single_file_diff.js
+++ b/app/assets/javascripts/single_file_diff.js
@@ -1,8 +1,9 @@
-/* eslint-disable */
+/* eslint-disable func-names, prefer-arrow-callback, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, one-var, one-var-declaration-per-line, consistent-return, no-param-reassign, max-len */
+
 (function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
 
-  this.SingleFileDiff = (function() {
+  window.SingleFileDiff = (function() {
     var COLLAPSED_HTML, ERROR_HTML, LOADING_HTML, WRAPPER;
 
     WRAPPER = '<div class="diff-content diff-wrap-lines"></div>';
@@ -13,7 +14,7 @@
 
     COLLAPSED_HTML = '<div class="nothing-here-block diff-collapsed">This diff is collapsed. <a class="click-to-expand">Click to expand it.</a></div>';
 
-    function SingleFileDiff(file, forceLoad, cb) {
+    function SingleFileDiff(file) {
       this.file = file;
       this.toggleDiff = bind(this.toggleDiff, this);
       this.content = $('.diff-content', this.file);
@@ -31,29 +32,28 @@
         this.content.after(this.collapsedContent);
         this.$toggleIcon.addClass('fa-caret-down');
       }
-      $('.file-title, .click-to-expand', this.file).on('click', this.toggleDiff);
-      if (forceLoad) {
-        this.toggleDiff(null, cb);
-      }
+
+      $('.js-file-title, .click-to-expand', this.file).on('click', (function (e) {
+        this.toggleDiff($(e.target));
+      }).bind(this));
     }
 
-    SingleFileDiff.prototype.toggleDiff = function(e, cb) {
-      var $target = $(e.target);
-      if (!$target.hasClass('file-title') && !$target.hasClass('click-to-expand') && !$target.hasClass('diff-toggle-caret')) return;
+    SingleFileDiff.prototype.toggleDiff = function($target, cb) {
+      if (!$target.hasClass('js-file-title') && !$target.hasClass('click-to-expand') && !$target.hasClass('diff-toggle-caret')) return;
       this.isOpen = !this.isOpen;
       if (!this.isOpen && !this.hasError) {
         this.content.hide();
         this.$toggleIcon.addClass('fa-caret-right').removeClass('fa-caret-down');
         this.collapsedContent.show();
-        if (typeof DiffNotesApp !== 'undefined') {
-          DiffNotesApp.compileComponents();
+        if (typeof gl.diffNotesCompileComponents !== 'undefined') {
+          gl.diffNotesCompileComponents();
         }
       } else if (this.content) {
         this.collapsedContent.hide();
         this.content.show();
         this.$toggleIcon.addClass('fa-caret-down').removeClass('fa-caret-right');
-        if (typeof DiffNotesApp !== 'undefined') {
-          DiffNotesApp.compileComponents();
+        if (typeof gl.diffNotesCompileComponents !== 'undefined') {
+          gl.diffNotesCompileComponents();
         }
       } else {
         this.$toggleIcon.addClass('fa-caret-down').removeClass('fa-caret-right');
@@ -76,8 +76,8 @@
           }
           _this.collapsedContent.after(_this.content);
 
-          if (typeof DiffNotesApp !== 'undefined') {
-            DiffNotesApp.compileComponents();
+          if (typeof gl.diffNotesCompileComponents !== 'undefined') {
+            gl.diffNotesCompileComponents();
           }
 
           if (cb) cb();
@@ -86,15 +86,13 @@
     };
 
     return SingleFileDiff;
-
   })();
 
-  $.fn.singleFileDiff = function(forceLoad, cb) {
+  $.fn.singleFileDiff = function() {
     return this.each(function() {
-      if (!$.data(this, 'singleFileDiff') || forceLoad) {
-        return $.data(this, 'singleFileDiff', new SingleFileDiff(this, forceLoad, cb));
+      if (!$.data(this, 'singleFileDiff')) {
+        return $.data(this, 'singleFileDiff', new window.SingleFileDiff(this));
       }
     });
   };
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/smart_interval.js b/app/assets/javascripts/smart_interval.js
new file mode 100644
index 00000000000..d1bdc353be2
--- /dev/null
+++ b/app/assets/javascripts/smart_interval.js
@@ -0,0 +1,158 @@
+/*
+* Instances of SmartInterval extend the functionality of `setInterval`, make it configurable
+* and controllable by a public API.
+*
+* */
+
+(() => {
+  class SmartInterval {
+    /**
+      * @param { function } opts.callback Function to be called on each iteration (required)
+      * @param { milliseconds } opts.startingInterval `currentInterval` is set to this initially
+      * @param { milliseconds } opts.maxInterval `currentInterval` will be incremented to this
+      * @param { milliseconds } opts.hiddenInterval `currentInterval` is set to this
+      *                         when the page is hidden
+      * @param { integer } opts.incrementByFactorOf `currentInterval` is incremented by this factor
+      * @param { boolean } opts.lazyStart Configure if timer is initialized on
+      *                    instantiation or lazily
+      * @param { boolean } opts.immediateExecution Configure if callback should
+      *                    be executed before the first interval.
+      */
+    constructor(opts = {}) {
+      this.cfg = {
+        callback: opts.callback,
+        startingInterval: opts.startingInterval,
+        maxInterval: opts.maxInterval,
+        hiddenInterval: opts.hiddenInterval,
+        incrementByFactorOf: opts.incrementByFactorOf,
+        lazyStart: opts.lazyStart,
+        immediateExecution: opts.immediateExecution,
+      };
+
+      this.state = {
+        intervalId: null,
+        currentInterval: this.cfg.startingInterval,
+        pageVisibility: 'visible',
+      };
+
+      this.initInterval();
+    }
+    /* public */
+
+    start() {
+      const cfg = this.cfg;
+      const state = this.state;
+
+      if (cfg.immediateExecution) {
+        cfg.immediateExecution = false;
+        cfg.callback();
+      }
+
+      state.intervalId = window.setInterval(() => {
+        cfg.callback();
+
+        if (this.getCurrentInterval() === cfg.maxInterval) {
+          return;
+        }
+
+        this.incrementInterval();
+        this.resume();
+      }, this.getCurrentInterval());
+    }
+
+    // cancel the existing timer, setting the currentInterval back to startingInterval
+    cancel() {
+      this.setCurrentInterval(this.cfg.startingInterval);
+      this.stopTimer();
+    }
+
+    onVisibilityHidden() {
+      if (this.cfg.hiddenInterval) {
+        this.setCurrentInterval(this.cfg.hiddenInterval);
+        this.resume();
+      } else {
+        this.cancel();
+      }
+    }
+
+    // start a timer, using the existing interval
+    resume() {
+      this.stopTimer(); // stop exsiting timer, in case timer was not previously stopped
+      this.start();
+    }
+
+    onVisibilityVisible() {
+      this.cancel();
+      this.start();
+    }
+
+    destroy() {
+      this.cancel();
+      document.removeEventListener('visibilitychange', this.handleVisibilityChange);
+      $(document).off('visibilitychange').off('beforeunload');
+    }
+
+    /* private */
+
+    initInterval() {
+      const cfg = this.cfg;
+
+      if (!cfg.lazyStart) {
+        this.start();
+      }
+
+      this.initVisibilityChangeHandling();
+      this.initPageUnloadHandling();
+    }
+
+    initVisibilityChangeHandling() {
+      // cancel interval when tab no longer shown (prevents cached pages from polling)
+      document.addEventListener('visibilitychange', this.handleVisibilityChange.bind(this));
+    }
+
+    initPageUnloadHandling() {
+      // TODO: Consider refactoring in light of turbolinks removal.
+      // prevent interval continuing after page change, when kept in cache by Turbolinks
+      $(document).on('beforeunload', () => this.cancel());
+    }
+
+    handleVisibilityChange(e) {
+      this.state.pageVisibility = e.target.visibilityState;
+      const intervalAction = this.isPageVisible() ?
+        this.onVisibilityVisible :
+        this.onVisibilityHidden;
+
+      intervalAction.apply(this);
+    }
+
+    getCurrentInterval() {
+      return this.state.currentInterval;
+    }
+
+    setCurrentInterval(newInterval) {
+      this.state.currentInterval = newInterval;
+    }
+
+    incrementInterval() {
+      const cfg = this.cfg;
+      const currentInterval = this.getCurrentInterval();
+      if (cfg.hiddenInterval && !this.isPageVisible()) return;
+      let nextInterval = currentInterval * cfg.incrementByFactorOf;
+
+      if (nextInterval > cfg.maxInterval) {
+        nextInterval = cfg.maxInterval;
+      }
+
+      this.setCurrentInterval(nextInterval);
+    }
+
+    isPageVisible() { return this.state.pageVisibility === 'visible'; }
+
+    stopTimer() {
+      const state = this.state;
+
+      state.intervalId = window.clearInterval(state.intervalId);
+    }
+  }
+  gl.SmartInterval = SmartInterval;
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/snippet/snippet_bundle.js b/app/assets/javascripts/snippet/snippet_bundle.js
index 083dc23c796..a98403f4cf2 100644
--- a/app/assets/javascripts/snippet/snippet_bundle.js
+++ b/app/assets/javascripts/snippet/snippet_bundle.js
@@ -1,13 +1,12 @@
-/* eslint-disable */
-/*= require_tree . */
+/* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, no-var, quotes, max-len */
+/* global ace */
 
 (function() {
   $(function() {
-    var editor = ace.edit("editor")
+    var editor = ace.edit("editor");
 
     $(".snippet-form-holder form").on('submit', function() {
       $(".snippet-file-content").val(editor.getValue());
     });
   });
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/snippets_list.js b/app/assets/javascripts/snippets_list.js
new file mode 100644
index 00000000000..2128007113f
--- /dev/null
+++ b/app/assets/javascripts/snippets_list.js
@@ -0,0 +1,13 @@
+/* eslint-disable arrow-parens, no-param-reassign, space-before-function-paren, func-names, no-var, max-len */
+
+(global => {
+  global.gl = global.gl || {};
+
+  gl.SnippetsList = function() {
+    var $holder = $('.snippets-list-holder');
+
+    $holder.find('.pagination').on('ajax:success', (e, data) => {
+      $holder.replaceWith(data.html);
+    });
+  };
+})(window);
diff --git a/app/assets/javascripts/snippets_list.js.es6 b/app/assets/javascripts/snippets_list.js.es6
deleted file mode 100644
index c3afc3f2246..00000000000
--- a/app/assets/javascripts/snippets_list.js.es6
+++ /dev/null
@@ -1,12 +0,0 @@
-/* eslint-disable */
-(global => {
-  global.gl = global.gl || {};
-
-  gl.SnippetsList = function() {
-    var $holder = $('.snippets-list-holder');
-
-    $holder.find('.pagination').on('ajax:success', (e, data) => {
-      $holder.replaceWith(data.html);
-    });
-  }
-})(window);
diff --git a/app/assets/javascripts/star.js b/app/assets/javascripts/star.js
index cfd1e2204d5..c75b44cc2fd 100644
--- a/app/assets/javascripts/star.js
+++ b/app/assets/javascripts/star.js
@@ -1,4 +1,6 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-unused-vars, one-var, no-var, one-var-declaration-per-line, prefer-arrow-callback, no-new, max-len */
+/* global Flash */
+
 (function() {
   this.Star = (function() {
     function Star() {
@@ -24,7 +26,5 @@
     }
 
     return Star;
-
   })();
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/subbable_resource.js b/app/assets/javascripts/subbable_resource.js
new file mode 100644
index 00000000000..d8191605128
--- /dev/null
+++ b/app/assets/javascripts/subbable_resource.js
@@ -0,0 +1,51 @@
+(() => {
+/*
+*   SubbableResource can be extended to provide a pubsub-style service for one-off REST
+*   calls. Subscribe by passing a callback or render method you will use to handle responses.
+ *
+* */
+
+  class SubbableResource {
+    constructor(resourcePath) {
+      this.endpoint = resourcePath;
+
+      // TODO: Switch to axios.create
+      this.resource = $.ajax;
+      this.subscribers = [];
+    }
+
+    subscribe(callback) {
+      this.subscribers.push(callback);
+    }
+
+    publish(newResponse) {
+      const responseCopy = _.extend({}, newResponse);
+      this.subscribers.forEach((fn) => {
+        fn(responseCopy);
+      });
+      return newResponse;
+    }
+
+    get(payload) {
+      return this.resource(payload)
+        .then(data => this.publish(data));
+    }
+
+    post(payload) {
+      return this.resource(payload)
+        .then(data => this.publish(data));
+    }
+
+    put(payload) {
+      return this.resource(payload)
+        .then(data => this.publish(data));
+    }
+
+    delete(payload) {
+      return this.resource(payload)
+        .then(data => this.publish(data));
+    }
+  }
+
+  gl.SubbableResource = SubbableResource;
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/subscription.js b/app/assets/javascripts/subscription.js
index f9915593657..9c307915ec4 100644
--- a/app/assets/javascripts/subscription.js
+++ b/app/assets/javascripts/subscription.js
@@ -1,52 +1,50 @@
-/* eslint-disable */
-(function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
-
-  this.Subscription = (function() {
-    function Subscription(container) {
-      this.toggleSubscription = bind(this.toggleSubscription, this);
-      var $container;
-      this.$container = $(container);
-      this.url = this.$container.attr('data-url');
-      this.subscribe_button = this.$container.find('.js-subscribe-button');
-      this.subscription_status = this.$container.find('.subscription-status');
-      this.subscribe_button.unbind('click').click(this.toggleSubscription);
+import Vue from 'vue';
+
+(() => {
+  class Subscription {
+    constructor(containerElm) {
+      this.containerElm = containerElm;
+
+      const subscribeButton = containerElm.querySelector('.js-subscribe-button');
+      if (subscribeButton) {
+        // remove class so we don't bind twice
+        subscribeButton.classList.remove('js-subscribe-button');
+        subscribeButton.addEventListener('click', this.toggleSubscription.bind(this));
+      }
     }
 
-    Subscription.prototype.toggleSubscription = function(event) {
-      var action, btn, current_status;
-      btn = $(event.currentTarget);
-      action = btn.find('span').text();
-      current_status = this.subscription_status.attr('data-status');
-      btn.addClass('disabled');
-
-      if ($('html').hasClass('issue-boards-page')) {
-        this.url = this.$container.attr('data-url');
+    toggleSubscription(event) {
+      const button = event.currentTarget;
+      const buttonSpan = button.querySelector('span');
+      if (!buttonSpan || button.classList.contains('disabled')) {
+        return;
       }
+      button.classList.add('disabled');
+
+      const isSubscribed = buttonSpan.innerHTML.trim().toLowerCase() !== 'subscribe';
+      const toggleActionUrl = this.containerElm.dataset.url;
+
+      $.post(toggleActionUrl, () => {
+        button.classList.remove('disabled');
+
+        // hack to allow this to work with the issue boards Vue object
+        if (document.querySelector('html').classList.contains('issue-boards-page')) {
+          Vue.set(
+            gl.issueBoards.BoardsStore.detail.issue,
+            'subscribed',
+            !gl.issueBoards.BoardsStore.detail.issue.subscribed,
+          );
+        } else {
+          buttonSpan.innerHTML = isSubscribed ? 'Subscribe' : 'Unsubscribe';
+        }
+      });
+    }
+
+    static bindAll(selector) {
+      [].forEach.call(document.querySelectorAll(selector), elm => new Subscription(elm));
+    }
+  }
 
-      return $.post(this.url, (function(_this) {
-        return function() {
-          var status;
-          btn.removeClass('disabled');
-
-          if ($('html').hasClass('issue-boards-page')) {
-            Vue.set(gl.issueBoards.BoardsStore.detail.issue, 'subscribed', !gl.issueBoards.BoardsStore.detail.issue.subscribed);
-          } else {
-            status = current_status === 'subscribed' ? 'unsubscribed' : 'subscribed';
-            _this.subscription_status.attr('data-status', status);
-            action = status === 'subscribed' ? 'Unsubscribe' : 'Subscribe';
-            btn.find('span').text(action);
-            _this.subscription_status.find('>div').toggleClass('hidden');
-            if (btn.attr('data-original-title')) {
-              return btn.tooltip('hide').attr('data-original-title', action).tooltip('fixTitle');
-            }
-          }
-        };
-      })(this));
-    };
-
-    return Subscription;
-
-  })();
-
-}).call(this);
+  window.gl = window.gl || {};
+  window.gl.Subscription = Subscription;
+})();
diff --git a/app/assets/javascripts/subscription_select.js b/app/assets/javascripts/subscription_select.js
index 2ca65cb762d..8b25f43ffc7 100644
--- a/app/assets/javascripts/subscription_select.js
+++ b/app/assets/javascripts/subscription_select.js
@@ -1,4 +1,4 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, quotes, object-shorthand, no-unused-vars, no-shadow, one-var, one-var-declaration-per-line, comma-dangle, max-len */
 (function() {
   this.SubscriptionSelect = (function() {
     function SubscriptionSelect() {
@@ -30,7 +30,5 @@
     }
 
     return SubscriptionSelect;
-
   })();
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/syntax_highlight.js b/app/assets/javascripts/syntax_highlight.js
index 77ad4f30b7a..7c063fae045 100644
--- a/app/assets/javascripts/syntax_highlight.js
+++ b/app/assets/javascripts/syntax_highlight.js
@@ -1,4 +1,5 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, consistent-return, no-var, no-else-return, prefer-arrow-callback, max-len */
+
 // Syntax Highlighter
 //
 // Applies a syntax highlighting color scheme CSS class to any element with the
@@ -11,6 +12,7 @@
 (function() {
   $.fn.syntaxHighlight = function() {
     var $children;
+
     if ($(this).hasClass('js-syntax-highlight')) {
       // Given the element itself, apply highlighting
       return $(this).addClass(gon.user_color_scheme);
@@ -22,9 +24,4 @@
       }
     }
   };
-
-  $(document).on('ready page:load', function() {
-    return $('.js-syntax-highlight').syntaxHighlight();
-  });
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/task_list.js b/app/assets/javascripts/task_list.js
new file mode 100644
index 00000000000..b1402c0a880
--- /dev/null
+++ b/app/assets/javascripts/task_list.js
@@ -0,0 +1,52 @@
+/* global Flash */
+require('vendor/task_list');
+
+class TaskList {
+  constructor(options = {}) {
+    this.selector = options.selector;
+    this.dataType = options.dataType;
+    this.fieldName = options.fieldName;
+    this.onSuccess = options.onSuccess || (() => {});
+    this.onError = function showFlash(response) {
+      let errorMessages = '';
+
+      if (response.responseJSON) {
+        errorMessages = response.responseJSON.errors.join(' ');
+      }
+
+      return new Flash(errorMessages || 'Update failed', 'alert');
+    };
+
+    this.init();
+  }
+
+  init() {
+    // Prevent duplicate event bindings
+    this.disable();
+    $(`${this.selector} .js-task-list-container`).taskList('enable');
+    $(document).on('tasklist:changed', `${this.selector} .js-task-list-container`, this.update.bind(this));
+  }
+
+  disable() {
+    $(`${this.selector} .js-task-list-container`).taskList('disable');
+    $(document).off('tasklist:changed', `${this.selector} .js-task-list-container`);
+  }
+
+  update(e) {
+    const $target = $(e.target);
+    const patchData = {};
+    patchData[this.dataType] = {
+      [this.fieldName]: $target.val(),
+    };
+    return $.ajax({
+      type: 'PATCH',
+      url: $target.data('update-url') || $('form.js-issuable-update').attr('action'),
+      data: patchData,
+      success: this.onSuccess,
+      error: this.onError,
+    });
+  }
+}
+
+window.gl = window.gl || {};
+window.gl.TaskList = TaskList;
diff --git a/app/assets/javascripts/templates/issuable_template_selector.js b/app/assets/javascripts/templates/issuable_template_selector.js
new file mode 100644
index 00000000000..32067ed1fee
--- /dev/null
+++ b/app/assets/javascripts/templates/issuable_template_selector.js
@@ -0,0 +1,60 @@
+/* eslint-disable comma-dangle, max-len, no-useless-return, no-param-reassign, max-len */
+/* global Api */
+
+import TemplateSelector from '../blob/template_selectors/template_selector';
+
+((global) => {
+  class IssuableTemplateSelector extends TemplateSelector {
+    constructor(...args) {
+      super(...args);
+      this.projectPath = this.dropdown.data('project-path');
+      this.namespacePath = this.dropdown.data('namespace-path');
+      this.issuableType = this.$dropdownContainer.data('issuable-type');
+      this.titleInput = $(`#${this.issuableType}_title`);
+
+      const initialQuery = {
+        name: this.dropdown.data('selected')
+      };
+
+      if (initialQuery.name) this.requestFile(initialQuery);
+
+      $('.reset-template', this.dropdown.parent()).on('click', () => {
+        this.setInputValueToTemplateContent();
+      });
+
+      $('.no-template', this.dropdown.parent()).on('click', () => {
+        this.currentTemplate.content = '';
+        this.setInputValueToTemplateContent();
+        $('.dropdown-toggle-text', this.dropdown).text('Choose a template');
+      });
+    }
+
+    requestFile(query) {
+      this.startLoadingSpinner();
+      Api.issueTemplate(this.namespacePath, this.projectPath, query.name, this.issuableType, (err, currentTemplate) => {
+        this.currentTemplate = currentTemplate;
+        if (err) return; // Error handled by global AJAX error handler
+        this.stopLoadingSpinner();
+        this.setInputValueToTemplateContent();
+      });
+      return;
+    }
+
+    setInputValueToTemplateContent() {
+      // `this.setEditorContent` sets the value of the description input field
+      // to the content of the template selected.
+      if (this.titleInput.val() === '') {
+        // If the title has not yet been set, focus the title input and
+        // skip focusing the description input by setting `true` as the
+        // `skipFocus` option to `setEditorContent`.
+        this.setEditorContent(this.currentTemplate, { skipFocus: true });
+        this.titleInput.focus();
+      } else {
+        this.setEditorContent(this.currentTemplate, { skipFocus: false });
+      }
+      return;
+    }
+  }
+
+  global.IssuableTemplateSelector = IssuableTemplateSelector;
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/templates/issuable_template_selector.js.es6 b/app/assets/javascripts/templates/issuable_template_selector.js.es6
deleted file mode 100644
index 93a3d67ee9f..00000000000
--- a/app/assets/javascripts/templates/issuable_template_selector.js.es6
+++ /dev/null
@@ -1,58 +0,0 @@
-/* eslint-disable */
-/*= require ../blob/template_selector */
-
-((global) => {
-  class IssuableTemplateSelector extends gl.TemplateSelector {
-    constructor(...args) {
-      super(...args);
-      this.projectPath = this.dropdown.data('project-path');
-      this.namespacePath = this.dropdown.data('namespace-path');
-      this.issuableType = this.wrapper.data('issuable-type');
-      this.titleInput = $(`#${this.issuableType}_title`);
-
-      let initialQuery = {
-        name: this.dropdown.data('selected')
-      };
-
-      if (initialQuery.name) this.requestFile(initialQuery);
-
-      $('.reset-template', this.dropdown.parent()).on('click', () => {
-        this.setInputValueToTemplateContent();
-      });
-
-      $('.no-template', this.dropdown.parent()).on('click', () => {
-        this.currentTemplate = '';
-        this.setInputValueToTemplateContent();
-        $('.dropdown-toggle-text', this.dropdown).text('Choose a template');
-      });
-    }
-
-    requestFile(query) {
-      this.startLoadingSpinner();
-      Api.issueTemplate(this.namespacePath, this.projectPath, query.name, this.issuableType, (err, currentTemplate) => {
-        this.currentTemplate = currentTemplate;
-        if (err) return; // Error handled by global AJAX error handler
-        this.stopLoadingSpinner();
-        this.setInputValueToTemplateContent();
-      });
-      return;
-    }
-
-    setInputValueToTemplateContent() {
-      // `this.requestFileSuccess` sets the value of the description input field
-      // to the content of the template selected.
-      if (this.titleInput.val() === '') {
-        // If the title has not yet been set, focus the title input and
-        // skip focusing the description input by setting `true` as the
-        // `skipFocus` option to `requestFileSuccess`.
-        this.requestFileSuccess(this.currentTemplate, {skipFocus: true});
-        this.titleInput.focus();
-      } else {
-        this.requestFileSuccess(this.currentTemplate, {skipFocus: false});
-      }
-      return;
-    }
-  }
-
-  global.IssuableTemplateSelector = IssuableTemplateSelector;
-})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/templates/issuable_template_selectors.js b/app/assets/javascripts/templates/issuable_template_selectors.js
new file mode 100644
index 00000000000..97f6d37364d
--- /dev/null
+++ b/app/assets/javascripts/templates/issuable_template_selectors.js
@@ -0,0 +1,31 @@
+/* eslint-disable no-new, comma-dangle, class-methods-use-this, no-param-reassign */
+
+((global) => {
+  class IssuableTemplateSelectors {
+    constructor({ $dropdowns, editor } = {}) {
+      this.$dropdowns = $dropdowns || $('.js-issuable-selector');
+      this.editor = editor || this.initEditor();
+
+      this.$dropdowns.each((i, dropdown) => {
+        const $dropdown = $(dropdown);
+        new gl.IssuableTemplateSelector({
+          pattern: /(\.md)/,
+          data: $dropdown.data('data'),
+          wrapper: $dropdown.closest('.js-issuable-selector-wrap'),
+          dropdown: $dropdown,
+          editor: this.editor
+        });
+      });
+    }
+
+    initEditor() {
+      const editor = $('.markdown-area');
+      // Proxy ace-editor's .setValue to jQuery's .val
+      editor.setValue = editor.val;
+      editor.getValue = editor.val;
+      return editor;
+    }
+  }
+
+  global.IssuableTemplateSelectors = IssuableTemplateSelectors;
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/templates/issuable_template_selectors.js.es6 b/app/assets/javascripts/templates/issuable_template_selectors.js.es6
deleted file mode 100644
index 0a3890e85fe..00000000000
--- a/app/assets/javascripts/templates/issuable_template_selectors.js.es6
+++ /dev/null
@@ -1,30 +0,0 @@
-/* eslint-disable */
-((global) => {
-  class IssuableTemplateSelectors {
-    constructor({ $dropdowns, editor } = {}) {
-      this.$dropdowns = $dropdowns || $('.js-issuable-selector');
-      this.editor = editor || this.initEditor();
-
-      this.$dropdowns.each((i, dropdown) => {
-        const $dropdown = $(dropdown);
-        new gl.IssuableTemplateSelector({
-          pattern: /(\.md)/,
-          data: $dropdown.data('data'),
-          wrapper: $dropdown.closest('.js-issuable-selector-wrap'),
-          dropdown: $dropdown,
-          editor: this.editor
-        });
-      });
-    }
-
-    initEditor() {
-      let editor = $('.markdown-area');
-      // Proxy ace-editor's .setValue to jQuery's .val
-      editor.setValue = editor.val;
-      editor.getValue = editor.val;
-      return editor;
-    }
-  }
-
-  global.IssuableTemplateSelectors = IssuableTemplateSelectors;
-})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/terminal/terminal.js b/app/assets/javascripts/terminal/terminal.js
new file mode 100644
index 00000000000..6b9422b1816
--- /dev/null
+++ b/app/assets/javascripts/terminal/terminal.js
@@ -0,0 +1,62 @@
+/* global Terminal */
+
+(() => {
+  class GLTerminal {
+
+    constructor(options) {
+      this.options = options || {};
+
+      this.options.cursorBlink = options.cursorBlink || true;
+      this.options.screenKeys = options.screenKeys || true;
+      this.container = document.querySelector(options.selector);
+
+      this.setSocketUrl();
+      this.createTerminal();
+      $(window).off('resize.terminal').on('resize.terminal', () => {
+        this.terminal.fit();
+      });
+    }
+
+    setSocketUrl() {
+      const { protocol, hostname, port } = window.location;
+      const wsProtocol = protocol === 'https:' ? 'wss://' : 'ws://';
+      const path = this.container.dataset.projectPath;
+
+      this.socketUrl = `${wsProtocol}${hostname}:${port}${path}`;
+    }
+
+    createTerminal() {
+      this.terminal = new Terminal(this.options);
+      this.socket = new WebSocket(this.socketUrl, ['terminal.gitlab.com']);
+      this.socket.binaryType = 'arraybuffer';
+
+      this.terminal.open(this.container);
+      this.socket.onopen = () => { this.runTerminal(); };
+      this.socket.onerror = () => { this.handleSocketFailure(); };
+    }
+
+    runTerminal() {
+      const decoder = new TextDecoder('utf-8');
+      const encoder = new TextEncoder('utf-8');
+
+      this.terminal.on('data', (data) => {
+        this.socket.send(encoder.encode(data));
+      });
+
+      this.socket.addEventListener('message', (ev) => {
+        this.terminal.write(decoder.decode(ev.data));
+      });
+
+      this.isTerminalInitialized = true;
+      this.terminal.fit();
+    }
+
+    handleSocketFailure() {
+      this.terminal.write('\r\nConnection failure');
+    }
+
+  }
+
+  window.gl = window.gl || {};
+  gl.Terminal = GLTerminal;
+})();
diff --git a/app/assets/javascripts/terminal/terminal_bundle.js b/app/assets/javascripts/terminal/terminal_bundle.js
new file mode 100644
index 00000000000..13cf3a10a38
--- /dev/null
+++ b/app/assets/javascripts/terminal/terminal_bundle.js
@@ -0,0 +1,7 @@
+require('vendor/xterm/encoding-indexes.js');
+require('vendor/xterm/encoding.js');
+window.Terminal = require('vendor/xterm/xterm.js');
+require('vendor/xterm/fit.js');
+require('./terminal.js');
+
+$(() => new gl.Terminal({ selector: '#terminal' }));
diff --git a/app/assets/javascripts/test_utils/simulate_drag.js b/app/assets/javascripts/test_utils/simulate_drag.js
new file mode 100644
index 00000000000..d48f2404fa5
--- /dev/null
+++ b/app/assets/javascripts/test_utils/simulate_drag.js
@@ -0,0 +1,143 @@
+/* eslint-disable wrap-iife, func-names, strict, no-var, vars-on-top, no-param-reassign, object-shorthand, no-shadow, comma-dangle, prefer-template, consistent-return, no-mixed-operators, no-unused-vars, no-unused-expressions, prefer-arrow-callback, max-len */
+(function () {
+  'use strict';
+
+  function simulateEvent(el, type, options) {
+    var event;
+    if (!el) return;
+    var ownerDocument = el.ownerDocument;
+
+    options = options || {};
+
+    if (/^mouse/.test(type)) {
+      event = ownerDocument.createEvent('MouseEvents');
+      event.initMouseEvent(type, true, true, ownerDocument.defaultView,
+      options.button, options.screenX, options.screenY, options.clientX, options.clientY,
+      options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, el);
+    } else {
+      event = ownerDocument.createEvent('CustomEvent');
+
+      event.initCustomEvent(type, true, true, ownerDocument.defaultView,
+      options.button, options.screenX, options.screenY, options.clientX, options.clientY,
+      options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, el);
+
+      event.dataTransfer = {
+        data: {},
+
+        setData: function (type, val) {
+          this.data[type] = val;
+        },
+
+        getData: function (type) {
+          return this.data[type];
+        }
+      };
+    }
+
+    if (el.dispatchEvent) {
+      el.dispatchEvent(event);
+    } else if (el.fireEvent) {
+      el.fireEvent('on' + type, event);
+    }
+
+    return event;
+  }
+
+  function isLast(target) {
+    var el = typeof target.el === 'string' ? document.getElementById(target.el.substr(1)) : target.el;
+    var children = el.children;
+
+    return children.length - 1 === target.index;
+  }
+
+  function getTarget(target) {
+    var el = typeof target.el === 'string' ? document.getElementById(target.el.substr(1)) : target.el;
+    var children = el.children;
+
+    return (
+      children[target.index] ||
+      children[target.index === 'first' ? 0 : -1] ||
+      children[target.index === 'last' ? children.length - 1 : -1] ||
+      el
+    );
+  }
+
+  function getRect(el) {
+    var rect = el.getBoundingClientRect();
+    var width = rect.right - rect.left;
+    var height = rect.bottom - rect.top + 10;
+
+    return {
+      x: rect.left,
+      y: rect.top,
+      cx: rect.left + width / 2,
+      cy: rect.top + height / 2,
+      w: width,
+      h: height,
+      hw: width / 2,
+      wh: height / 2
+    };
+  }
+
+  function simulateDrag(options, callback) {
+    options.to.el = options.to.el || options.from.el;
+
+    var fromEl = getTarget(options.from);
+    var toEl = getTarget(options.to);
+    var firstEl = getTarget({
+      el: options.to.el,
+      index: 'first'
+    });
+    var lastEl = getTarget({
+      el: options.to.el,
+      index: 'last'
+    });
+    var scrollable = options.scrollable;
+
+    var fromRect = getRect(fromEl);
+    var toRect = getRect(toEl);
+    var firstRect = getRect(firstEl);
+    var lastRect = getRect(lastEl);
+
+    var startTime = new Date().getTime();
+    var duration = options.duration || 1000;
+    simulateEvent(fromEl, 'mousedown', { button: 0 });
+    options.ontap && options.ontap();
+    window.SIMULATE_DRAG_ACTIVE = 1;
+
+    if (options.to.index === 0) {
+      toRect.cy = firstRect.y;
+    } else if (isLast(options.to)) {
+      toRect.cy = lastRect.y + lastRect.h + 50;
+    }
+
+    var dragInterval = setInterval(function loop() {
+      var progress = (new Date().getTime() - startTime) / duration;
+      var x = (fromRect.cx + (toRect.cx - fromRect.cx) * progress) - scrollable.scrollLeft;
+      var y = (fromRect.cy + (toRect.cy - fromRect.cy) * progress) - scrollable.scrollTop;
+      var overEl = fromEl.ownerDocument.elementFromPoint(x, y);
+
+      simulateEvent(overEl, 'mousemove', {
+        clientX: x,
+        clientY: y
+      });
+
+      if (progress >= 1) {
+        options.ondragend && options.ondragend();
+        simulateEvent(toEl, 'mouseup');
+        clearInterval(dragInterval);
+        window.SIMULATE_DRAG_ACTIVE = 0;
+      }
+    }, 100);
+
+    return {
+      target: fromEl,
+      fromList: fromEl.parentNode,
+      toList: toEl.parentNode
+    };
+  }
+
+  // Export
+  window.simulateEvent = simulateEvent;
+  window.simulateDrag = simulateDrag;
+})();
diff --git a/app/assets/javascripts/todos.js b/app/assets/javascripts/todos.js
new file mode 100644
index 00000000000..8be58023c84
--- /dev/null
+++ b/app/assets/javascripts/todos.js
@@ -0,0 +1,163 @@
+/* eslint-disable class-methods-use-this, no-unneeded-ternary, quote-props */
+/* global UsersSelect */
+
+class Todos {
+  constructor() {
+    this.initFilters();
+    this.bindEvents();
+    this.todo_ids = [];
+
+    this.cleanupWrapper = this.cleanup.bind(this);
+    document.addEventListener('beforeunload', this.cleanupWrapper);
+  }
+
+  cleanup() {
+    this.unbindEvents();
+    document.removeEventListener('beforeunload', this.cleanupWrapper);
+  }
+
+  unbindEvents() {
+    $('.js-done-todo, .js-undo-todo, .js-add-todo').off('click', this.updateRowStateClickedWrapper);
+    $('.js-todos-mark-all', '.js-todos-undo-all').off('click', this.updateallStateClickedWrapper);
+    $('.todo').off('click', this.goToTodoUrl);
+  }
+
+  bindEvents() {
+    this.updateRowStateClickedWrapper = this.updateRowStateClicked.bind(this);
+    this.updateAllStateClickedWrapper = this.updateAllStateClicked.bind(this);
+
+    $('.js-done-todo, .js-undo-todo, .js-add-todo').on('click', this.updateRowStateClickedWrapper);
+    $('.js-todos-mark-all, .js-todos-undo-all').on('click', this.updateAllStateClickedWrapper);
+    $('.todo').on('click', this.goToTodoUrl);
+  }
+
+  initFilters() {
+    this.initFilterDropdown($('.js-project-search'), 'project_id', ['text']);
+    this.initFilterDropdown($('.js-type-search'), 'type');
+    this.initFilterDropdown($('.js-action-search'), 'action_id');
+
+    $('form.filter-form').on('submit', function applyFilters(event) {
+      event.preventDefault();
+      gl.utils.visitUrl(`${this.action}&${$(this).serialize()}`);
+    });
+    return new UsersSelect();
+  }
+
+  initFilterDropdown($dropdown, fieldName, searchFields) {
+    $dropdown.glDropdown({
+      fieldName,
+      selectable: true,
+      filterable: searchFields ? true : false,
+      search: { fields: searchFields },
+      data: $dropdown.data('data'),
+      clicked: () => $dropdown.closest('form.filter-form').submit(),
+    });
+  }
+
+  updateRowStateClicked(e) {
+    e.preventDefault();
+
+    const target = e.target;
+    target.setAttribute('disabled', true);
+    target.classList.add('disabled');
+    $.ajax({
+      type: 'POST',
+      url: target.dataset.href,
+      dataType: 'json',
+      data: {
+        '_method': target.dataset.method,
+      },
+      success: (data) => {
+        this.updateRowState(target);
+        return this.updateBadges(data);
+      },
+    });
+  }
+
+  updateRowState(target) {
+    const row = target.closest('li');
+    const restoreBtn = row.querySelector('.js-undo-todo');
+    const doneBtn = row.querySelector('.js-done-todo');
+
+    target.classList.add('hidden');
+    target.removeAttribute('disabled');
+    target.classList.remove('disabled');
+
+    if (target === doneBtn) {
+      row.classList.add('done-reversible');
+      restoreBtn.classList.remove('hidden');
+    } else if (target === restoreBtn) {
+      row.classList.remove('done-reversible');
+      doneBtn.classList.remove('hidden');
+    } else {
+      row.parentNode.removeChild(row);
+    }
+  }
+
+  updateAllStateClicked(e) {
+    e.preventDefault();
+
+    const target = e.currentTarget;
+    const requestData = { '_method': target.dataset.method, ids: this.todo_ids };
+    target.setAttribute('disabled', true);
+    target.classList.add('disabled');
+    $.ajax({
+      type: 'POST',
+      url: target.dataset.href,
+      dataType: 'json',
+      data: requestData,
+      success: (data) => {
+        this.updateAllState(target, data);
+        return this.updateBadges(data);
+      },
+    });
+  }
+
+  updateAllState(target, data) {
+    const markAllDoneBtn = document.querySelector('.js-todos-mark-all');
+    const undoAllBtn = document.querySelector('.js-todos-undo-all');
+    const todoListContainer = document.querySelector('.js-todos-list-container');
+    const nothingHereContainer = document.querySelector('.js-nothing-here-container');
+
+    target.removeAttribute('disabled');
+    target.classList.remove('disabled');
+
+    this.todo_ids = (target === markAllDoneBtn) ? data.updated_ids : [];
+    undoAllBtn.classList.toggle('hidden');
+    markAllDoneBtn.classList.toggle('hidden');
+    todoListContainer.classList.toggle('hidden');
+    nothingHereContainer.classList.toggle('hidden');
+  }
+
+  updateBadges(data) {
+    $(document).trigger('todo:toggle', data.count);
+    document.querySelector('.todos-pending .badge').innerHTML = data.count;
+    document.querySelector('.todos-done .badge').innerHTML = data.done_count;
+  }
+
+  goToTodoUrl(e) {
+    const todoLink = this.dataset.url;
+
+    if (!todoLink) {
+      return;
+    }
+
+    if (gl.utils.isMetaClick(e)) {
+      const windowTarget = '_blank';
+      const selected = e.target;
+      e.preventDefault();
+
+      if (selected.tagName === 'IMG') {
+        const avatarUrl = selected.parentElement.getAttribute('href');
+        window.open(avatarUrl, windowTarget);
+      } else {
+        window.open(todoLink, windowTarget);
+      }
+    } else {
+      gl.utils.visitUrl(todoLink);
+    }
+  }
+}
+
+window.gl = window.gl || {};
+gl.Todos = Todos;
diff --git a/app/assets/javascripts/todos.js.es6 b/app/assets/javascripts/todos.js.es6
deleted file mode 100644
index 213e80825b7..00000000000
--- a/app/assets/javascripts/todos.js.es6
+++ /dev/null
@@ -1,163 +0,0 @@
-/* eslint-disable */
-((global) => {
-
-  class Todos {
-    constructor({ el } = {}) {
-      this.allDoneClicked = this.allDoneClicked.bind(this);
-      this.doneClicked = this.doneClicked.bind(this);
-      this.el = el || $('.js-todos-options');
-      this.perPage = this.el.data('perPage');
-      this.clearListeners();
-      this.initBtnListeners();
-      this.initFilters();
-    }
-
-    clearListeners() {
-      $('.done-todo').off('click');
-      $('.js-todos-mark-all').off('click');
-      return $('.todo').off('click');
-    }
-
-    initBtnListeners() {
-      $('.done-todo').on('click', this.doneClicked);
-      $('.js-todos-mark-all').on('click', this.allDoneClicked);
-      return $('.todo').on('click', this.goToTodoUrl);
-    }
-
-    initFilters() {
-      new UsersSelect();
-      this.initFilterDropdown($('.js-project-search'), 'project_id', ['text']);
-      this.initFilterDropdown($('.js-type-search'), 'type');
-      this.initFilterDropdown($('.js-action-search'), 'action_id');
-
-      $('form.filter-form').on('submit', function (event) {
-        event.preventDefault();
-        Turbolinks.visit(this.action + '&' + $(this).serialize());
-      });
-    }
-
-    initFilterDropdown($dropdown, fieldName, searchFields) {
-      $dropdown.glDropdown({
-        fieldName,
-        selectable: true,
-        filterable: searchFields ? true : false,
-        search: { fields: searchFields },
-        data: $dropdown.data('data'),
-        clicked: function() {
-          return $dropdown.closest('form.filter-form').submit();
-        }
-      })
-    }
-
-    doneClicked(e) {
-      e.preventDefault();
-      e.stopImmediatePropagation();
-      const $target = $(e.currentTarget);
-      $target.disable();
-      return $.ajax({
-        type: 'POST',
-        url: $target.attr('href'),
-        dataType: 'json',
-        data: {
-          '_method': 'delete'
-        },
-        success: (data) => {
-          this.redirectIfNeeded(data.count);
-          this.clearDone($target.closest('li'));
-          return this.updateBadges(data);
-        }
-      });
-    }
-
-    allDoneClicked(e) {
-      e.preventDefault();
-      e.stopImmediatePropagation();
-      $target = $(e.currentTarget);
-      $target.disable();
-      return $.ajax({
-        type: 'POST',
-        url: $target.attr('href'),
-        dataType: 'json',
-        data: {
-          '_method': 'delete'
-        },
-        success: (data) => {
-          $target.remove();
-          $('.prepend-top-default').html('<div class="nothing-here-block">You\'re all done!</div>');
-          return this.updateBadges(data);
-        }
-      });
-    }
-
-    clearDone($row) {
-      const $ul = $row.closest('ul');
-      $row.remove();
-      if (!$ul.find('li').length) {
-        return $ul.parents('.panel').remove();
-      }
-    }
-
-    updateBadges(data) {
-      $(document).trigger('todo:toggle', data.count);
-      $('.todos-pending .badge').text(data.count);
-      return $('.todos-done .badge').text(data.done_count);
-    }
-
-    getTotalPages() {
-      return this.el.data('totalPages');
-    }
-
-    getCurrentPage() {
-      return this.el.data('currentPage');
-    }
-
-    getTodosPerPage() {
-      return this.el.data('perPage');
-    }
-
-    redirectIfNeeded(total) {
-      const currPages = this.getTotalPages();
-      const currPage = this.getCurrentPage();
-
-      // Refresh if no remaining Todos
-      if (!total) {
-        window.location.reload();
-        return;
-      }
-      // Do nothing if no pagination
-      if (!currPages) {
-        return;
-      }
-
-      const newPages = Math.ceil(total / this.getTodosPerPage());
-      let url = location.href;
-
-      if (newPages !== currPages) {
-        // Redirect to previous page if there's one available
-        if (currPages > 1 && currPage === currPages) {
-          const pageParams = {
-            page: currPages - 1
-          };
-          url = gl.utils.mergeUrlParams(pageParams, url);
-        }
-        return Turbolinks.visit(url);
-      }
-    }
-
-    goToTodoUrl(e) {
-      const todoLink = $(this).data('url');
-      if (!todoLink) {
-        return;
-      }
-      // Allow Meta-Click or Mouse3-click to open in a new tab
-      if (e.metaKey || e.which === 2) {
-        e.preventDefault();
-        return window.open(todoLink, '_blank');
-      } else {
-        return Turbolinks.visit(todoLink);
-      }
-    }
-  }
-
-  global.Todos = Todos;
-})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/tree.js b/app/assets/javascripts/tree.js
index 70aff4b9a2f..76a821c7a17 100644
--- a/app/assets/javascripts/tree.js
+++ b/app/assets/javascripts/tree.js
@@ -1,4 +1,5 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, max-len, quotes, consistent-return, no-var, one-var, one-var-declaration-per-line, no-else-return, prefer-arrow-callback, max-len */
+
 (function() {
   this.TreeView = (function() {
     function TreeView() {
@@ -14,7 +15,7 @@
             e.preventDefault();
             return window.open(path, '_blank');
           } else {
-            return Turbolinks.visit(path);
+            return gl.utils.visitUrl(path);
           }
         }
       });
@@ -56,14 +57,12 @@
         } else if (e.which === 13) {
           path = $('.tree-item.selected .tree-item-file-name a').attr('href');
           if (path) {
-            return Turbolinks.visit(path);
+            return gl.utils.visitUrl(path);
           }
         }
       });
     };
 
     return TreeView;
-
   })();
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/u2f/authenticate.js b/app/assets/javascripts/u2f/authenticate.js
index 35f2b1e2b25..500b78fc5d8 100644
--- a/app/assets/javascripts/u2f/authenticate.js
+++ b/app/assets/javascripts/u2f/authenticate.js
@@ -1,24 +1,33 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, prefer-arrow-callback, no-else-return, quotes, quote-props, comma-dangle, one-var, one-var-declaration-per-line, max-len */
+/* global u2f */
+/* global U2FError */
+/* global U2FUtil */
+
 // Authenticate U2F (universal 2nd factor) devices for users to authenticate with.
 //
 // State Flow #1: setup -> in_progress -> authenticated -> POST to server
 // State Flow #2: setup -> in_progress -> error -> setup
 (function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+  const global = window.gl || (window.gl = {});
+
+  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
 
-  this.U2FAuthenticate = (function() {
-    function U2FAuthenticate(container, u2fParams) {
+  global.U2FAuthenticate = (function() {
+    function U2FAuthenticate(container, form, u2fParams, fallbackButton, fallbackUI) {
       this.container = container;
       this.renderNotSupported = bind(this.renderNotSupported, this);
       this.renderAuthenticated = bind(this.renderAuthenticated, this);
       this.renderError = bind(this.renderError, this);
       this.renderInProgress = bind(this.renderInProgress, this);
-      this.renderSetup = bind(this.renderSetup, this);
       this.renderTemplate = bind(this.renderTemplate, this);
       this.authenticate = bind(this.authenticate, this);
       this.start = bind(this.start, this);
       this.appId = u2fParams.app_id;
       this.challenge = u2fParams.challenge;
+      this.form = form;
+      this.fallbackButton = fallbackButton;
+      this.fallbackUI = fallbackUI;
+      if (this.fallbackButton) this.fallbackButton.addEventListener('click', this.switchToFallbackUI.bind(this));
       this.signRequests = u2fParams.sign_requests.map(function(request) {
         // The U2F Javascript API v1.1 requires a single challenge, with
         // _no challenges per-request_. The U2F Javascript API v1.0 requires a
@@ -37,7 +46,7 @@
 
     U2FAuthenticate.prototype.start = function() {
       if (U2FUtil.isU2FSupported()) {
-        return this.renderSetup();
+        return this.renderInProgress();
       } else {
         return this.renderNotSupported();
       }
@@ -48,7 +57,7 @@
         return function(response) {
           var error;
           if (response.errorCode) {
-            error = new U2FError(response.errorCode);
+            error = new U2FError(response.errorCode, 'authenticate');
             return _this.renderError(error);
           } else {
             return _this.renderAuthenticated(JSON.stringify(response));
@@ -73,11 +82,6 @@
       return this.container.html(template(params));
     };
 
-    U2FAuthenticate.prototype.renderSetup = function() {
-      this.renderTemplate('setup');
-      return this.container.find('#js-login-u2f-device').on('click', this.renderInProgress);
-    };
-
     U2FAuthenticate.prototype.renderInProgress = function() {
       this.renderTemplate('inProgress');
       return this.authenticate();
@@ -85,24 +89,30 @@
 
     U2FAuthenticate.prototype.renderError = function(error) {
       this.renderTemplate('error', {
-        error_message: error.message()
+        error_message: error.message(),
+        error_code: error.errorCode
       });
-      return this.container.find('#js-u2f-try-again').on('click', this.renderSetup);
+      return this.container.find('#js-u2f-try-again').on('click', this.renderInProgress);
     };
 
     U2FAuthenticate.prototype.renderAuthenticated = function(deviceResponse) {
       this.renderTemplate('authenticated');
-      // Prefer to do this instead of interpolating using Underscore templates
-      // because of JSON escaping issues.
-      return this.container.find("#js-device-response").val(deviceResponse);
+      const container = this.container[0];
+      container.querySelector('#js-device-response').value = deviceResponse;
+      container.querySelector(this.form).submit();
+      this.fallbackButton.classList.add('hidden');
     };
 
     U2FAuthenticate.prototype.renderNotSupported = function() {
       return this.renderTemplate('notSupported');
     };
 
-    return U2FAuthenticate;
+    U2FAuthenticate.prototype.switchToFallbackUI = function() {
+      this.fallbackButton.classList.add('hidden');
+      this.container[0].classList.add('hidden');
+      this.fallbackUI.classList.remove('hidden');
+    };
 
+    return U2FAuthenticate;
   })();
-
-}).call(this);
+})();
diff --git a/app/assets/javascripts/u2f/error.js b/app/assets/javascripts/u2f/error.js
index aff605169e4..fd1829efe18 100644
--- a/app/assets/javascripts/u2f/error.js
+++ b/app/assets/javascripts/u2f/error.js
@@ -1,28 +1,27 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-console, quotes, prefer-template, max-len */
+/* global u2f */
+
 (function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
 
   this.U2FError = (function() {
-    function U2FError(errorCode) {
+    function U2FError(errorCode, u2fFlowType) {
       this.errorCode = errorCode;
       this.message = bind(this.message, this);
       this.httpsDisabled = window.location.protocol !== 'https:';
-      console.error("U2F Error Code: " + this.errorCode);
+      this.u2fFlowType = u2fFlowType;
     }
 
     U2FError.prototype.message = function() {
-      switch (false) {
-        case !(this.errorCode === u2f.ErrorCodes.BAD_REQUEST && this.httpsDisabled):
-          return "U2F only works with HTTPS-enabled websites. Contact your administrator for more details.";
-        case this.errorCode !== u2f.ErrorCodes.DEVICE_INELIGIBLE:
-          return "This device has already been registered with us.";
-        default:
-          return "There was a problem communicating with your device.";
+      if (this.errorCode === u2f.ErrorCodes.BAD_REQUEST && this.httpsDisabled) {
+        return 'U2F only works with HTTPS-enabled websites. Contact your administrator for more details.';
+      } else if (this.errorCode === u2f.ErrorCodes.DEVICE_INELIGIBLE) {
+        if (this.u2fFlowType === 'authenticate') return 'This device has not been registered with us.';
+        if (this.u2fFlowType === 'register') return 'This device has already been registered with us.';
       }
+      return "There was a problem communicating with your device.";
     };
 
     return U2FError;
-
   })();
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/u2f/register.js b/app/assets/javascripts/u2f/register.js
index 22fbf9f3a91..17631f2908d 100644
--- a/app/assets/javascripts/u2f/register.js
+++ b/app/assets/javascripts/u2f/register.js
@@ -1,10 +1,14 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-else-return, quotes, quote-props, comma-dangle, one-var, one-var-declaration-per-line, max-len */
+/* global u2f */
+/* global U2FError */
+/* global U2FUtil */
+
 // Register U2F (universal 2nd factor) devices for users to authenticate with.
 //
 // State Flow #1: setup -> in_progress -> registered -> POST to server
 // State Flow #2: setup -> in_progress -> error -> setup
 (function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
 
   this.U2FRegister = (function() {
     function U2FRegister(container, u2fParams) {
@@ -35,7 +39,7 @@
         return function(response) {
           var error;
           if (response.errorCode) {
-            error = new U2FError(response.errorCode);
+            error = new U2FError(response.errorCode, 'register');
             return _this.renderError(error);
           } else {
             return _this.renderRegistered(JSON.stringify(response));
@@ -72,7 +76,8 @@
 
     U2FRegister.prototype.renderError = function(error) {
       this.renderTemplate('error', {
-        error_message: error.message()
+        error_message: error.message(),
+        error_code: error.errorCode
       });
       return this.container.find('#js-u2f-try-again').on('click', this.renderSetup);
     };
@@ -89,7 +94,5 @@
     };
 
     return U2FRegister;
-
   })();
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/u2f/util.js b/app/assets/javascripts/u2f/util.js
index 2eab2d5ae23..813d363db00 100644
--- a/app/assets/javascripts/u2f/util.js
+++ b/app/assets/javascripts/u2f/util.js
@@ -1,4 +1,4 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife */
 (function() {
   this.U2FUtil = (function() {
     function U2FUtil() {}
@@ -8,7 +8,5 @@
     };
 
     return U2FUtil;
-
   })();
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/user.js b/app/assets/javascripts/user.js
new file mode 100644
index 00000000000..19c9efe7fbd
--- /dev/null
+++ b/app/assets/javascripts/user.js
@@ -0,0 +1,35 @@
+/* eslint-disable class-methods-use-this, comma-dangle, arrow-parens, no-param-reassign */
+
+import Cookies from 'js-cookie';
+
+((global) => {
+  global.User = class {
+    constructor({ action }) {
+      this.action = action;
+      this.placeProfileAvatarsToTop();
+      this.initTabs();
+      this.hideProjectLimitMessage();
+    }
+
+    placeProfileAvatarsToTop() {
+      $('.profile-groups-avatars').tooltip({
+        placement: 'top'
+      });
+    }
+
+    initTabs() {
+      return new global.UserTabs({
+        parentEl: '.user-profile',
+        action: this.action
+      });
+    }
+
+    hideProjectLimitMessage() {
+      $('.hide-project-limit-message').on('click', e => {
+        e.preventDefault();
+        Cookies.set('hide_project_limit_message', 'false');
+        $(this).parents('.project-limit-message').remove();
+      });
+    }
+  };
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/user.js.es6 b/app/assets/javascripts/user.js.es6
deleted file mode 100644
index 5e869e99fdb..00000000000
--- a/app/assets/javascripts/user.js.es6
+++ /dev/null
@@ -1,32 +0,0 @@
-/* eslint-disable */
-((global) => {
-  global.User = class {
-    constructor({ action }) {
-      this.action = action;
-      this.placeProfileAvatarsToTop();
-      this.initTabs();
-      this.hideProjectLimitMessage();
-    }
-
-    placeProfileAvatarsToTop() {
-      $('.profile-groups-avatars').tooltip({
-        placement: 'top'
-      });
-    }
-
-    initTabs() {
-      return new global.UserTabs({
-        parentEl: '.user-profile',
-        action: this.action
-      });
-    }
-
-    hideProjectLimitMessage() {
-      $('.hide-project-limit-message').on('click', e => {
-        e.preventDefault();
-        Cookies.set('hide_project_limit_message', 'false');
-        $(this).parents('.project-limit-message').remove();
-      });
-    }
-  }
-})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/user_callout.js b/app/assets/javascripts/user_callout.js
new file mode 100644
index 00000000000..fa078b48bf8
--- /dev/null
+++ b/app/assets/javascripts/user_callout.js
@@ -0,0 +1,27 @@
+import Cookies from 'js-cookie';
+
+const USER_CALLOUT_COOKIE = 'user_callout_dismissed';
+
+export default class UserCallout {
+  constructor() {
+    this.isCalloutDismissed = Cookies.get(USER_CALLOUT_COOKIE);
+    this.userCalloutBody = $('.user-callout');
+    this.init();
+  }
+
+  init() {
+    if (!this.isCalloutDismissed || this.isCalloutDismissed === 'false') {
+      $('.js-close-callout').on('click', e => this.dismissCallout(e));
+    }
+  }
+
+  dismissCallout(e) {
+    const $currentTarget = $(e.currentTarget);
+
+    Cookies.set(USER_CALLOUT_COOKIE, 'true');
+
+    if ($currentTarget.hasClass('close')) {
+      this.userCalloutBody.remove();
+    }
+  }
+}
diff --git a/app/assets/javascripts/user_tabs.js b/app/assets/javascripts/user_tabs.js
new file mode 100644
index 00000000000..5db0d936ad8
--- /dev/null
+++ b/app/assets/javascripts/user_tabs.js
@@ -0,0 +1,173 @@
+/* eslint-disable max-len, space-before-function-paren, no-underscore-dangle, consistent-return, comma-dangle, no-unused-vars, dot-notation, no-new, no-return-assign, camelcase, no-param-reassign, class-methods-use-this */
+
+/*
+UserTabs
+
+Handles persisting and restoring the current tab selection and lazily-loading
+content on the Users#show page.
+
+### Example Markup
+
+   <ul class="nav-links">
+     <li class="activity-tab active">
+       <a data-action="activity" data-target="#activity" data-toggle="tab" href="/u/username">
+         Activity
+       </a>
+     </li>
+     <li class="groups-tab">
+       <a data-action="groups" data-target="#groups" data-toggle="tab" href="/u/username/groups">
+         Groups
+       </a>
+     </li>
+     <li class="contributed-tab">
+       <a data-action="contributed" data-target="#contributed" data-toggle="tab" href="/u/username/contributed">
+         Contributed projects
+       </a>
+     </li>
+     <li class="projects-tab">
+       <a data-action="projects" data-target="#projects" data-toggle="tab" href="/u/username/projects">
+         Personal projects
+       </a>
+     </li>
+    <li class="snippets-tab">
+       <a data-action="snippets" data-target="#snippets" data-toggle="tab" href="/u/username/snippets">
+       </a>
+     </li>
+   </ul>
+
+   <div class="tab-content">
+     <div class="tab-pane" id="activity">
+       Activity Content
+     </div>
+     <div class="tab-pane" id="groups">
+       Groups Content
+     </div>
+     <div class="tab-pane" id="contributed">
+       Contributed projects content
+     </div>
+     <div class="tab-pane" id="projects">
+      Projects content
+     </div>
+     <div class="tab-pane" id="snippets">
+       Snippets content
+     </div>
+  </div>
+
+   <div class="loading-status">
+     <div class="loading">
+      Loading Animation
+     </div>
+   </div>
+*/
+((global) => {
+  class UserTabs {
+    constructor ({ defaultAction, action, parentEl }) {
+      this.loaded = {};
+      this.defaultAction = defaultAction || 'activity';
+      this.action = action || this.defaultAction;
+      this.$parentEl = $(parentEl) || $(document);
+      this._location = window.location;
+      this.$parentEl.find('.nav-links a')
+        .each((i, navLink) => {
+          this.loaded[$(navLink).attr('data-action')] = false;
+        });
+      this.actions = Object.keys(this.loaded);
+      this.bindEvents();
+
+      if (this.action === 'show') {
+        this.action = this.defaultAction;
+      }
+
+      this.activateTab(this.action);
+    }
+
+    bindEvents() {
+      this.changeProjectsPageWrapper = this.changeProjectsPage.bind(this);
+
+      this.$parentEl.off('shown.bs.tab', '.nav-links a[data-toggle="tab"]')
+        .on('shown.bs.tab', '.nav-links a[data-toggle="tab"]', event => this.tabShown(event));
+
+      this.$parentEl.on('click', '.gl-pagination a', this.changeProjectsPageWrapper);
+    }
+
+    changeProjectsPage(e) {
+      e.preventDefault();
+
+      $('.tab-pane.active').empty();
+      this.loadTab($(e.target).attr('href'), this.getCurrentAction());
+    }
+
+    tabShown(event) {
+      const $target = $(event.target);
+      const action = $target.data('action');
+      const source = $target.attr('href');
+      this.setTab(source, action);
+      return this.setCurrentAction(source, action);
+    }
+
+    activateTab(action) {
+      return this.$parentEl.find(`.nav-links .js-${action}-tab a`)
+        .tab('show');
+    }
+
+    setTab(source, action) {
+      if (this.loaded[action]) {
+        return;
+      }
+      if (action === 'activity') {
+        this.loadActivities(source);
+      }
+
+      const loadableActions = ['groups', 'contributed', 'projects', 'snippets'];
+      if (loadableActions.indexOf(action) > -1) {
+        return this.loadTab(source, action);
+      }
+    }
+
+    loadTab(source, action) {
+      return $.ajax({
+        beforeSend: () => this.toggleLoading(true),
+        complete: () => this.toggleLoading(false),
+        dataType: 'json',
+        type: 'GET',
+        url: source,
+        success: (data) => {
+          const tabSelector = `div#${action}`;
+          this.$parentEl.find(tabSelector).html(data.html);
+          this.loaded[action] = true;
+          return gl.utils.localTimeAgo($('.js-timeago', tabSelector));
+        }
+      });
+    }
+
+    loadActivities(source) {
+      if (this.loaded['activity']) {
+        return;
+      }
+      const $calendarWrap = this.$parentEl.find('.user-calendar');
+      $calendarWrap.load($calendarWrap.data('href'));
+      new gl.Activities();
+      return this.loaded['activity'] = true;
+    }
+
+    toggleLoading(status) {
+      return this.$parentEl.find('.loading-status .loading')
+        .toggle(status);
+    }
+
+    setCurrentAction(source, action) {
+      let new_state = source;
+      new_state = new_state.replace(/\/+$/, '');
+      new_state += this._location.search + this._location.hash;
+      history.replaceState({
+        url: new_state
+      }, document.title, new_state);
+      return new_state;
+    }
+
+    getCurrentAction() {
+      return this.$parentEl.find('.nav-links .active a').data('action');
+    }
+  }
+  global.UserTabs = UserTabs;
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/user_tabs.js.es6 b/app/assets/javascripts/user_tabs.js.es6
deleted file mode 100644
index 2b310da319c..00000000000
--- a/app/assets/javascripts/user_tabs.js.es6
+++ /dev/null
@@ -1,158 +0,0 @@
-/* eslint-disable */
-/*
-UserTabs
-
-Handles persisting and restoring the current tab selection and lazily-loading
-content on the Users#show page.
-
-### Example Markup
-
-   <ul class="nav-links">
-     <li class="activity-tab active">
-       <a data-action="activity" data-target="#activity" data-toggle="tab" href="/u/username">
-         Activity
-       </a>
-     </li>
-     <li class="groups-tab">
-       <a data-action="groups" data-target="#groups" data-toggle="tab" href="/u/username/groups">
-         Groups
-       </a>
-     </li>
-     <li class="contributed-tab">
-       <a data-action="contributed" data-target="#contributed" data-toggle="tab" href="/u/username/contributed">
-         Contributed projects
-       </a>
-     </li>
-     <li class="projects-tab">
-       <a data-action="projects" data-target="#projects" data-toggle="tab" href="/u/username/projects">
-         Personal projects
-       </a>
-     </li>
-    <li class="snippets-tab">
-       <a data-action="snippets" data-target="#snippets" data-toggle="tab" href="/u/username/snippets">
-       </a>
-     </li>
-   </ul>
-
-   <div class="tab-content">
-     <div class="tab-pane" id="activity">
-       Activity Content
-     </div>
-     <div class="tab-pane" id="groups">
-       Groups Content
-     </div>
-     <div class="tab-pane" id="contributed">
-       Contributed projects content
-     </div>
-     <div class="tab-pane" id="projects">
-      Projects content
-     </div>
-     <div class="tab-pane" id="snippets">
-       Snippets content
-     </div>
-  </div>
-
-   <div class="loading-status">
-     <div class="loading">
-      Loading Animation
-     </div>
-   </div>
-*/
-((global) => {
-  class UserTabs {
-    constructor ({ defaultAction, action, parentEl }) {
-      this.loaded = {};
-      this.defaultAction = defaultAction || 'activity';
-      this.action = action || this.defaultAction;
-      this.$parentEl = $(parentEl) || $(document);
-      this._location = window.location;
-      this.$parentEl.find('.nav-links a')
-        .each((i, navLink) => {
-          this.loaded[$(navLink).attr('data-action')] = false;
-        });
-      this.actions = Object.keys(this.loaded);
-      this.bindEvents();
-
-      if (this.action === 'show') {
-        this.action = this.defaultAction;
-      }
-
-      this.activateTab(this.action);
-    }
-
-    bindEvents() {
-      return this.$parentEl.off('shown.bs.tab', '.nav-links a[data-toggle="tab"]')
-        .on('shown.bs.tab', '.nav-links a[data-toggle="tab"]', event => this.tabShown(event));
-    }
-
-    tabShown(event) {
-      const $target = $(event.target);
-      const action = $target.data('action');
-      const source = $target.attr('href');
-      this.setTab(source, action);
-      return this.setCurrentAction(source, action);
-    }
-
-    activateTab(action) {
-      return this.$parentEl.find(`.nav-links .js-${action}-tab a`)
-        .tab('show');
-    }
-
-    setTab(source, action) {
-      if (this.loaded[action]) {
-        return;
-      }
-      if (action === 'activity') {
-        this.loadActivities(source);
-      }
-
-      const loadableActions = [ 'groups', 'contributed', 'projects', 'snippets' ];
-      if (loadableActions.indexOf(action) > -1) {
-        return this.loadTab(source, action);
-      }
-    }
-
-    loadTab(source, action) {
-      return $.ajax({
-        beforeSend: () => this.toggleLoading(true),
-        complete: () => this.toggleLoading(false),
-        dataType: 'json',
-        type: 'GET',
-        url: `${source}.json`,
-        success: (data) => {
-          const tabSelector = `div#${action}`;
-          this.$parentEl.find(tabSelector).html(data.html);
-          this.loaded[action] = true;
-          return gl.utils.localTimeAgo($('.js-timeago', tabSelector));
-        }
-      });
-    }
-
-    loadActivities(source) {
-      if (this.loaded['activity']) {
-        return;
-      }
-      const $calendarWrap = this.$parentEl.find('.user-calendar');
-      $calendarWrap.load($calendarWrap.data('href'));
-      new Activities();
-      return this.loaded['activity'] = true;
-    }
-
-    toggleLoading(status) {
-      return this.$parentEl.find('.loading-status .loading')
-        .toggle(status);
-    }
-
-    setCurrentAction(source, action) {
-      let new_state = source
-      new_state = new_state.replace(/\/+$/, '');
-      new_state += this._location.search + this._location.hash;
-      history.replaceState({
-        turbolinks: true,
-        url: new_state
-      }, document.title, new_state);
-      return new_state;
-    }
-  }
-  global.UserTabs = UserTabs;
-})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/username_validator.js b/app/assets/javascripts/username_validator.js
new file mode 100644
index 00000000000..137cefa3b8e
--- /dev/null
+++ b/app/assets/javascripts/username_validator.js
@@ -0,0 +1,135 @@
+/* eslint-disable comma-dangle, consistent-return, class-methods-use-this, arrow-parens, no-param-reassign, max-len */
+
+((global) => {
+  const debounceTimeoutDuration = 1000;
+  const invalidInputClass = 'gl-field-error-outline';
+  const successInputClass = 'gl-field-success-outline';
+  const unavailableMessageSelector = '.username .validation-error';
+  const successMessageSelector = '.username .validation-success';
+  const pendingMessageSelector = '.username .validation-pending';
+  const invalidMessageSelector = '.username .gl-field-error';
+
+  class UsernameValidator {
+    constructor() {
+      this.inputElement = $('#new_user_username');
+      this.inputDomElement = this.inputElement.get(0);
+      this.state = {
+        available: false,
+        valid: false,
+        pending: false,
+        empty: true
+      };
+
+      const debounceTimeout = _.debounce((username) => {
+        this.validateUsername(username);
+      }, debounceTimeoutDuration);
+
+      this.inputElement.on('keyup.username_check', () => {
+        const username = this.inputElement.val();
+
+        this.state.valid = this.inputDomElement.validity.valid;
+        this.state.empty = !username.length;
+
+        if (this.state.valid) {
+          return debounceTimeout(username);
+        }
+
+        this.renderState();
+      });
+
+      // Override generic field validation
+      this.inputElement.on('invalid', this.interceptInvalid.bind(this));
+    }
+
+    renderState() {
+      // Clear all state
+      this.clearFieldValidationState();
+
+      if (this.state.valid && this.state.available) {
+        return this.setSuccessState();
+      }
+
+      if (this.state.empty) {
+        return this.clearFieldValidationState();
+      }
+
+      if (this.state.pending) {
+        return this.setPendingState();
+      }
+
+      if (!this.state.available) {
+        return this.setUnavailableState();
+      }
+
+      if (!this.state.valid) {
+        return this.setInvalidState();
+      }
+    }
+
+    interceptInvalid(event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    validateUsername(username) {
+      if (this.state.valid) {
+        this.state.pending = true;
+        this.state.available = false;
+        this.renderState();
+        return $.ajax({
+          type: 'GET',
+          url: `${gon.relative_url_root}/users/${username}/exists`,
+          dataType: 'json',
+          success: (res) => this.setAvailabilityState(res.exists)
+        });
+      }
+    }
+
+    setAvailabilityState(usernameTaken) {
+      if (usernameTaken) {
+        this.state.valid = false;
+        this.state.available = false;
+      } else {
+        this.state.available = true;
+      }
+      this.state.pending = false;
+      this.renderState();
+    }
+
+    clearFieldValidationState() {
+      this.inputElement.siblings('p').hide();
+
+      this.inputElement.removeClass(invalidInputClass)
+        .removeClass(successInputClass);
+    }
+
+    setUnavailableState() {
+      const $usernameUnavailableMessage = this.inputElement.siblings(unavailableMessageSelector);
+      this.inputElement.addClass(invalidInputClass).removeClass(successInputClass);
+      $usernameUnavailableMessage.show();
+    }
+
+    setSuccessState() {
+      const $usernameSuccessMessage = this.inputElement.siblings(successMessageSelector);
+      this.inputElement.addClass(successInputClass).removeClass(invalidInputClass);
+      $usernameSuccessMessage.show();
+    }
+
+    setPendingState() {
+      const $usernamePendingMessage = $(pendingMessageSelector);
+      if (this.state.pending) {
+        $usernamePendingMessage.show();
+      } else {
+        $usernamePendingMessage.hide();
+      }
+    }
+
+    setInvalidState() {
+      const $inputErrorMessage = $(invalidMessageSelector);
+      this.inputElement.addClass(invalidInputClass).removeClass(successInputClass);
+      $inputErrorMessage.show();
+    }
+  }
+
+  global.UsernameValidator = UsernameValidator;
+})(window);
diff --git a/app/assets/javascripts/username_validator.js.es6 b/app/assets/javascripts/username_validator.js.es6
deleted file mode 100644
index c4dde575c6e..00000000000
--- a/app/assets/javascripts/username_validator.js.es6
+++ /dev/null
@@ -1,134 +0,0 @@
-/* eslint-disable */
-((global) => {
-  const debounceTimeoutDuration = 1000;
-  const invalidInputClass = 'gl-field-error-outline';
-  const successInputClass = 'gl-field-success-outline';
-  const unavailableMessageSelector = '.username .validation-error';
-  const successMessageSelector = '.username .validation-success';
-  const pendingMessageSelector = '.username .validation-pending';
-  const invalidMessageSelector = '.username .gl-field-error';
-
-  class UsernameValidator {
-    constructor() {
-      this.inputElement = $('#new_user_username');
-      this.inputDomElement = this.inputElement.get(0);
-      this.state = {
-        available: false,
-        valid: false,
-        pending: false,
-        empty: true
-      };
-
-      const debounceTimeout = _.debounce((username) => {
-        this.validateUsername(username);
-      }, debounceTimeoutDuration);
-
-      this.inputElement.on('keyup.username_check', () => {
-        const username = this.inputElement.val();
-
-        this.state.valid = this.inputDomElement.validity.valid;
-        this.state.empty = !username.length;
-
-        if (this.state.valid) {
-          return debounceTimeout(username);
-        }
-
-        this.renderState();
-      });
-
-      // Override generic field validation
-      this.inputElement.on('invalid', this.interceptInvalid.bind(this));
-    }
-
-    renderState() {
-      // Clear all state
-      this.clearFieldValidationState();
-
-      if (this.state.valid && this.state.available) {
-        return this.setSuccessState();
-      }
-
-      if (this.state.empty) {
-        return this.clearFieldValidationState();
-      }
-
-      if (this.state.pending) {
-        return this.setPendingState();
-      }
-
-      if (!this.state.available) {
-        return this.setUnavailableState();
-      }
-
-      if (!this.state.valid) {
-        return this.setInvalidState();
-      }
-    }
-
-    interceptInvalid(event) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-
-    validateUsername(username) {
-      if (this.state.valid) {
-        this.state.pending = true;
-        this.state.available = false;
-        this.renderState();
-        return $.ajax({
-          type: 'GET',
-          url: `/users/${username}/exists`,
-          dataType: 'json',
-          success: (res) => this.setAvailabilityState(res.exists)
-        });
-      }
-    }
-
-    setAvailabilityState(usernameTaken) {
-      if (usernameTaken) {
-        this.state.valid = false;
-        this.state.available = false;
-      } else {
-        this.state.available = true;
-      }
-      this.state.pending = false;
-      this.renderState();
-    }
-
-    clearFieldValidationState() {
-      this.inputElement.siblings('p').hide();
-
-      this.inputElement.removeClass(invalidInputClass)
-        .removeClass(successInputClass);
-    }
-
-    setUnavailableState() {
-      const $usernameUnavailableMessage = this.inputElement.siblings(unavailableMessageSelector);
-      this.inputElement.addClass(invalidInputClass).removeClass(successInputClass);
-      $usernameUnavailableMessage.show();
-    }
-
-    setSuccessState() {
-      const $usernameSuccessMessage = this.inputElement.siblings(successMessageSelector);
-      this.inputElement.addClass(successInputClass).removeClass(invalidInputClass);
-      $usernameSuccessMessage.show();
-    }
-
-    setPendingState() {
-      const $usernamePendingMessage = $(pendingMessageSelector);
-      if (this.state.pending) {
-        $usernamePendingMessage.show();
-      } else {
-        $usernamePendingMessage.hide();
-      }
-    }
-
-    setInvalidState() {
-      const $inputErrorMessage = $(invalidMessageSelector);
-      this.inputElement.addClass(invalidInputClass).removeClass(successInputClass);
-      $inputErrorMessage.show();
-    }
-  }
-
-  global.UsernameValidator = UsernameValidator;
-})(window);
diff --git a/app/assets/javascripts/users/calendar.js b/app/assets/javascripts/users/calendar.js
index 0ec878e7e60..754d448564f 100644
--- a/app/assets/javascripts/users/calendar.js
+++ b/app/assets/javascripts/users/calendar.js
@@ -1,6 +1,9 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, camelcase, vars-on-top, object-shorthand, comma-dangle, eqeqeq, no-mixed-operators, no-return-assign, newline-per-chained-call, prefer-arrow-callback, consistent-return, one-var, one-var-declaration-per-line, prefer-template, quotes, no-unused-vars, no-else-return, max-len */
+
+import d3 from 'd3';
+
 (function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; };
 
   this.Calendar = (function() {
     function Calendar(timestamps, calendar_activities_path) {
@@ -17,7 +20,7 @@
       this.timestampsTmp = [];
       var group = 0;
 
-      var today = new Date()
+      var today = new Date();
       today.setHours(0, 0, 0, 0, 0);
 
       var oneYearAgo = new Date(today);
@@ -25,18 +28,18 @@
 
       var days = gl.utils.getDayDifference(oneYearAgo, today);
 
-      for(var i = 0; i <= days; i++) {
+      for (var i = 0; i <= days; i += 1) {
         var date = new Date(oneYearAgo);
         date.setDate(date.getDate() + i);
 
         var day = date.getDay();
-        var count = timestamps[dateFormat(date, 'yyyy-mm-dd')];
+        var count = timestamps[date.format('yyyy-mm-dd')];
 
         // Create a new group array if this is the first day of the week
         // or if is first object
         if ((day === 0 && i !== 0) || i === 0) {
           this.timestampsTmp.push([]);
-          group++;
+          group += 1;
         }
 
         var innerArray = this.timestampsTmp[group - 1];
@@ -71,7 +74,7 @@
       }
 
       return extraWidthPadding;
-    }
+    };
 
     Calendar.prototype.renderSvg = function(group) {
       var width = (group + 1) * this.daySizeWithSpace + this.getExtraWidthPadding(group);
@@ -119,7 +122,7 @@
           if (stamp.count > 0) {
             contribText = stamp.count + " contribution" + (stamp.count > 1 ? 's' : '');
           }
-          dateText = dateFormat(date, 'mmm d, yyyy');
+          dateText = date.format('mmm d, yyyy');
           return contribText + "<br />" + (gl.utils.getDayName(date)) + " " + dateText;
         };
       })(this)).attr('class', 'user-contrib-cell js-tooltip').attr('fill', (function(_this) {
@@ -155,7 +158,7 @@
     };
 
     Calendar.prototype.renderMonths = function() {
-      return this.svg.append('g').selectAll('text').data(this.months).enter().append('text').attr('x', function(date) {
+      return this.svg.append('g').attr('direction', 'ltr').selectAll('text').data(this.months).enter().append('text').attr('x', function(date) {
         return date.x;
       }).attr('y', 10).attr('class', 'user-contrib-text').text((function(_this) {
         return function(date) {
@@ -206,6 +209,7 @@
           }
         });
       } else {
+        this.currentSelectedDate = '';
         return $('.user-calendar-activities').html('');
       }
     };
@@ -217,7 +221,5 @@
     };
 
     return Calendar;
-
   })();
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/users/users_bundle.js b/app/assets/javascripts/users/users_bundle.js
index 22bee0f6187..580e2d84be5 100644
--- a/app/assets/javascripts/users/users_bundle.js
+++ b/app/assets/javascripts/users/users_bundle.js
@@ -1,7 +1 @@
-/* eslint-disable */
-
-/*= require_tree . */
-
-(function() {
-
-}).call(this);
+require('./calendar');
diff --git a/app/assets/javascripts/users_select.js b/app/assets/javascripts/users_select.js
index 7a2221dbaf5..48e20cf501f 100644
--- a/app/assets/javascripts/users_select.js
+++ b/app/assets/javascripts/users_select.js
@@ -1,10 +1,16 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, one-var, no-var, prefer-rest-params, wrap-iife, quotes, max-len, one-var-declaration-per-line, vars-on-top, prefer-arrow-callback, consistent-return, comma-dangle, object-shorthand, no-shadow, no-unused-vars, no-else-return, no-self-compare, prefer-template, no-unused-expressions, no-lonely-if, yoda, prefer-spread, no-void, camelcase, no-param-reassign */
+/* global Issuable */
+/* global ListUser */
+
+import Vue from 'vue';
+
 (function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
+  var bind = function(fn, me) { return function() { return fn.apply(me, arguments); }; },
     slice = [].slice;
 
   this.UsersSelect = (function() {
-    function UsersSelect(currentUser) {
+    function UsersSelect(currentUser, els) {
+      var $els;
       this.users = bind(this.users, this);
       this.user = bind(this.user, this);
       this.usersPath = "/autocomplete/users.json";
@@ -16,7 +22,14 @@
           this.currentUser = JSON.parse(currentUser);
         }
       }
-      $('.js-user-search').each((function(_this) {
+
+      $els = $(els);
+
+      if (!els) {
+        $els = $('.js-user-search');
+      }
+
+      $els.each((function(_this) {
         return function(i, dropdown) {
           var options = {};
           var $block, $collapsedSidebar, $dropdown, $loading, $selectbox, $value, abilityName, assignTo, assigneeTemplate, collapsedAssigneeTemplate, defaultLabel, firstUser, issueURL, selectedId, showAnyUser, showNullUser, showMenuAbove;
@@ -41,13 +54,22 @@
           $loading = $block.find('.block-loading').fadeOut();
 
           var updateIssueBoardsIssue = function () {
-            $loading.fadeIn();
+            $loading.removeClass('hidden').fadeIn();
             gl.issueBoards.BoardsStore.detail.issue.update($dropdown.attr('data-issue-update'))
               .then(function () {
                 $loading.fadeOut();
               });
           };
 
+          $('.assign-to-me-link').on('click', (e) => {
+            e.preventDefault();
+            $(e.currentTarget).hide();
+            const $input = $(`input[name="${$dropdown.data('field-name')}"]`);
+            $input.val(gon.current_user_id);
+            selectedId = $input.val();
+            $dropdown.find('.dropdown-toggle-text').text(gon.current_user_fullname).removeClass('is-default');
+          });
+
           $block.on('click', '.js-assign-yourself', function(e) {
             e.preventDefault();
 
@@ -69,7 +91,7 @@
             data = {};
             data[abilityName] = {};
             data[abilityName].assignee_id = selected != null ? selected : null;
-            $loading.fadeIn();
+            $loading.removeClass('hidden').fadeIn();
             $dropdown.trigger('loading.gl.dropdown');
             return $.ajax({
               type: 'PUT',
@@ -112,7 +134,7 @@
                   showDivider = 0;
                   if (firstUser) {
                     // Move current user to the front of the list
-                    for (index = j = 0, len = users.length; j < len; index = ++j) {
+                    for (index = j = 0, len = users.length; j < len; index = (j += 1)) {
                       obj = users[index];
                       if (obj.username === firstUser) {
                         users.splice(index, 1);
@@ -187,13 +209,15 @@
               if ($dropdown.hasClass('js-filter-bulk-update') || $dropdown.hasClass('js-issuable-form-dropdown')) {
                 e.preventDefault();
                 selectedId = user.id;
+                if (selectedId === gon.current_user_id) {
+                  $('.assign-to-me-link').hide();
+                } else {
+                  $('.assign-to-me-link').show();
+                }
                 return;
               }
-              if ($('html').hasClass('issue-boards-page') && !$dropdown.hasClass('js-issue-board-sidebar')) {
-                selectedId = user.id;
-                gl.issueBoards.BoardsStore.state.filters[$dropdown.data('field-name')] = user.id;
-                gl.issueBoards.BoardsStore.updateFiltersUrl();
-                e.preventDefault();
+              if ($el.closest('.add-issues-modal').length) {
+                gl.issueBoards.ModalStore.store.filter[$dropdown.data('field-name')] = user.id;
               } else if ($dropdown.hasClass('js-filter-submit') && (isIssueIndex || isMRIndex)) {
                 selectedId = user.id;
                 return Issuable.filterResults($dropdown.closest('form'));
@@ -220,11 +244,16 @@
             id: function (user) {
               return user.id;
             },
+            opened: function(e) {
+              const $el = $(e.currentTarget);
+              $el.find('.is-active').removeClass('is-active');
+              $el.find(`li[data-user-id="${selectedId}"] .dropdown-menu-user-link`).addClass('is-active');
+            },
             renderRow: function(user) {
               var avatar, img, listClosingTags, listWithName, listWithUserName, selected, username;
               username = user.username ? "@" + user.username : "";
               avatar = user.avatar_url ? user.avatar_url : false;
-              selected = user.id === selectedId ? "is-active" : "";
+              selected = user.id === parseInt(selectedId, 10) ? "is-active" : "";
               img = "";
               if (user.beforeDivider != null) {
                 "<li> <a href='#' class='" + selected + "'> " + user.name + " </a> </li>";
@@ -234,7 +263,7 @@
                 }
               }
               // split into three parts so we can remove the username section if nessesary
-              listWithName = "<li> <a href='#' class='dropdown-menu-user-link " + selected + "'> " + img + " <strong class='dropdown-menu-user-full-name'> " + user.name + " </strong>";
+              listWithName = "<li data-user-id=" + user.id + "> <a href='#' class='dropdown-menu-user-link " + selected + "'> " + img + " <strong class='dropdown-menu-user-full-name'> " + user.name + " </strong>";
               listWithUserName = "<span class='dropdown-menu-user-username'> " + username + " </span>";
               listClosingTags = "</a> </li>";
               if (username === '') {
@@ -274,7 +303,7 @@
                   if (firstUser) {
                     // Move current user to the front of the list
                     ref = data.results;
-                    for (index = j = 0, len = ref.length; j < len; index = ++j) {
+                    for (index = j = 0, len = ref.length; j < len; index = (j += 1)) {
                       obj = ref[index];
                       if (obj.username === firstUser) {
                         data.results.splice(index, 1);
@@ -367,7 +396,7 @@
     };
 
     UsersSelect.prototype.user = function(user_id, callback) {
-      if(!/^\d+$/.test(user_id)) {
+      if (!/^\d+$/.test(user_id)) {
         return false;
       }
 
@@ -417,7 +446,5 @@
     };
 
     return UsersSelect;
-
   })();
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/javascripts/version_check_image.js b/app/assets/javascripts/version_check_image.js
new file mode 100644
index 00000000000..d4f716acb72
--- /dev/null
+++ b/app/assets/javascripts/version_check_image.js
@@ -0,0 +1,10 @@
+class VersionCheckImage {
+  static bindErrorEvent(imageElement) {
+    imageElement.off('error').on('error', () => imageElement.hide());
+  }
+}
+
+window.gl = window.gl || {};
+gl.VersionCheckImage = VersionCheckImage;
+
+module.exports = VersionCheckImage;
diff --git a/app/assets/javascripts/visibility_select.js b/app/assets/javascripts/visibility_select.js
new file mode 100644
index 00000000000..f712d7ba930
--- /dev/null
+++ b/app/assets/javascripts/visibility_select.js
@@ -0,0 +1,27 @@
+(() => {
+  const gl = window.gl || (window.gl = {});
+
+  class VisibilitySelect {
+    constructor(container) {
+      if (!container) throw new Error('VisibilitySelect requires a container element as argument 1');
+      this.container = container;
+      this.helpBlock = this.container.querySelector('.help-block');
+      this.select = this.container.querySelector('select');
+    }
+
+    init() {
+      if (this.select) {
+        this.updateHelpText();
+        this.select.addEventListener('change', this.updateHelpText.bind(this));
+      } else {
+        this.helpBlock.textContent = this.container.querySelector('.js-locked').dataset.helpBlock;
+      }
+    }
+
+    updateHelpText() {
+      this.helpBlock.textContent = this.select.querySelector('option:checked').dataset.description;
+    }
+  }
+
+  gl.VisibilitySelect = VisibilitySelect;
+})();
diff --git a/app/assets/javascripts/vue_pipelines_index/components/async_button.js b/app/assets/javascripts/vue_pipelines_index/components/async_button.js
new file mode 100644
index 00000000000..58b8db4d519
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/components/async_button.js
@@ -0,0 +1,93 @@
+/* eslint-disable no-new, no-alert */
+/* global Flash */
+import '~/flash';
+import eventHub from '../event_hub';
+
+export default {
+  props: {
+    endpoint: {
+      type: String,
+      required: true,
+    },
+
+    service: {
+      type: Object,
+      required: true,
+    },
+
+    title: {
+      type: String,
+      required: true,
+    },
+
+    icon: {
+      type: String,
+      required: true,
+    },
+
+    cssClass: {
+      type: String,
+      required: true,
+    },
+
+    confirmActionMessage: {
+      type: String,
+      required: false,
+    },
+  },
+
+  data() {
+    return {
+      isLoading: false,
+    };
+  },
+
+  computed: {
+    iconClass() {
+      return `fa fa-${this.icon}`;
+    },
+
+    buttonClass() {
+      return `btn has-tooltip ${this.cssClass}`;
+    },
+  },
+
+  methods: {
+    onClick() {
+      if (this.confirmActionMessage && confirm(this.confirmActionMessage)) {
+        this.makeRequest();
+      } else if (!this.confirmActionMessage) {
+        this.makeRequest();
+      }
+    },
+
+    makeRequest() {
+      this.isLoading = true;
+
+      this.service.postAction(this.endpoint)
+      .then(() => {
+        this.isLoading = false;
+        eventHub.$emit('refreshPipelines');
+      })
+      .catch(() => {
+        this.isLoading = false;
+        new Flash('An error occured while making the request.');
+      });
+    },
+  },
+
+  template: `
+    <button
+      type="button"
+      @click="onClick"
+      :class="buttonClass"
+      :title="title"
+      :aria-label="title"
+      data-container="body"
+      data-placement="top"
+      :disabled="isLoading">
+      <i :class="iconClass" aria-hidden="true"/>
+      <i class="fa fa-spinner fa-spin" aria-hidden="true" v-if="isLoading" />
+    </button>
+  `,
+};
diff --git a/app/assets/javascripts/vue_pipelines_index/components/empty_state.js b/app/assets/javascripts/vue_pipelines_index/components/empty_state.js
new file mode 100644
index 00000000000..56b4858f4b4
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/components/empty_state.js
@@ -0,0 +1,33 @@
+import pipelinesEmptyStateSVG from 'empty_states/icons/_pipelines_empty.svg';
+
+export default {
+  props: {
+    helpPagePath: {
+      type: String,
+      required: true,
+    },
+  },
+
+  template: `
+    <div class="row empty-state">
+      <div class="col-xs-12">
+        <div class="svg-content">
+          ${pipelinesEmptyStateSVG}
+        </div>
+      </div>
+
+      <div class="col-xs-12 text-center">
+        <div class="text-content">
+          <h4>Build with confidence</h4>
+          <p>
+            Continous Integration can help catch bugs by running your tests automatically,
+            while Continuous Deployment can help you deliver code to your product environment.
+          </p>
+          <a :href="helpPagePath" class="btn btn-info">
+            Get started with Pipelines
+          </a>
+        </div>
+      </div>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/vue_pipelines_index/components/error_state.js b/app/assets/javascripts/vue_pipelines_index/components/error_state.js
new file mode 100644
index 00000000000..e5d228bddf8
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/components/error_state.js
@@ -0,0 +1,19 @@
+import pipelinesErrorStateSVG from 'empty_states/icons/_pipelines_failed.svg';
+
+export default {
+  template: `
+    <div class="row empty-state js-pipelines-error-state">
+      <div class="col-xs-12">
+        <div class="svg-content">
+          ${pipelinesErrorStateSVG}
+        </div>
+      </div>
+
+      <div class="col-xs-12 text-center">
+        <div class="text-content">
+          <h4>The API failed to fetch the pipelines.</h4>
+        </div>
+      </div>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/vue_pipelines_index/components/nav_controls.js b/app/assets/javascripts/vue_pipelines_index/components/nav_controls.js
new file mode 100644
index 00000000000..6aa10531034
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/components/nav_controls.js
@@ -0,0 +1,52 @@
+export default {
+  props: {
+    newPipelinePath: {
+      type: String,
+      required: true,
+    },
+
+    hasCiEnabled: {
+      type: Boolean,
+      required: true,
+    },
+
+    helpPagePath: {
+      type: String,
+      required: true,
+    },
+
+    ciLintPath: {
+      type: String,
+      required: true,
+    },
+
+    canCreatePipeline: {
+      type: Boolean,
+      required: true,
+    },
+  },
+
+  template: `
+    <div class="nav-controls">
+      <a
+        v-if="canCreatePipeline"
+        :href="newPipelinePath"
+        class="btn btn-create">
+        Run Pipeline
+      </a>
+
+      <a
+        v-if="!hasCiEnabled"
+        :href="helpPagePath"
+        class="btn btn-info">
+        Get started with Pipelines
+      </a>
+
+      <a
+        :href="ciLintPath"
+        class="btn btn-default">
+        CI Lint
+      </a>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/vue_pipelines_index/components/navigation_tabs.js b/app/assets/javascripts/vue_pipelines_index/components/navigation_tabs.js
new file mode 100644
index 00000000000..1626ae17a30
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/components/navigation_tabs.js
@@ -0,0 +1,72 @@
+export default {
+  props: {
+    scope: {
+      type: String,
+      required: true,
+    },
+
+    count: {
+      type: Object,
+      required: true,
+    },
+
+    paths: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  mounted() {
+    $(document).trigger('init.scrolling-tabs');
+  },
+
+  template: `
+    <ul class="nav-links scrolling-tabs">
+      <li
+        class="js-pipelines-tab-all"
+        :class="{ 'active': scope === 'all'}">
+        <a :href="paths.allPath">
+          All
+          <span class="badge js-totalbuilds-count">
+            {{count.all}}
+          </span>
+        </a>
+      </li>
+      <li class="js-pipelines-tab-pending"
+        :class="{ 'active': scope === 'pending'}">
+        <a :href="paths.pendingPath">
+          Pending
+          <span class="badge">
+            {{count.pending}}
+          </span>
+        </a>
+      </li>
+      <li class="js-pipelines-tab-running"
+        :class="{ 'active': scope === 'running'}">
+        <a :href="paths.runningPath">
+          Running
+          <span class="badge">
+            {{count.running}}
+          </span>
+        </a>
+      </li>
+      <li class="js-pipelines-tab-finished"
+        :class="{ 'active': scope === 'finished'}">
+        <a :href="paths.finishedPath">
+          Finished
+          <span class="badge">
+            {{count.finished}}
+          </span>
+        </a>
+      </li>
+      <li class="js-pipelines-tab-branches"
+      :class="{ 'active': scope === 'branches'}">
+        <a :href="paths.branchesPath">Branches</a>
+      </li>
+      <li class="js-pipelines-tab-tags"
+        :class="{ 'active': scope === 'tags'}">
+        <a :href="paths.tagsPath">Tags</a>
+      </li>
+    </ul>
+  `,
+};
diff --git a/app/assets/javascripts/vue_pipelines_index/components/pipeline_url.js b/app/assets/javascripts/vue_pipelines_index/components/pipeline_url.js
new file mode 100644
index 00000000000..4e183d5c8ec
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/components/pipeline_url.js
@@ -0,0 +1,56 @@
+export default {
+  props: [
+    'pipeline',
+  ],
+  computed: {
+    user() {
+      return !!this.pipeline.user;
+    },
+  },
+  template: `
+    <td>
+      <a
+        :href="pipeline.path"
+        class="js-pipeline-url-link">
+        <span class="pipeline-id">#{{pipeline.id}}</span>
+      </a>
+      <span>by</span>
+      <a
+        class="js-pipeline-url-user"
+        v-if="user"
+        :href="pipeline.user.web_url">
+        <img
+          v-if="user"
+          class="avatar has-tooltip s20 "
+          :title="pipeline.user.name"
+          data-container="body"
+          :src="pipeline.user.avatar_url"
+        >
+      </a>
+      <span
+        v-if="!user"
+        class="js-pipeline-url-api api monospace">
+        API
+      </span>
+      <span
+        v-if="pipeline.flags.latest"
+        class="js-pipeline-url-lastest label label-success has-tooltip"
+        title="Latest pipeline for this branch"
+        data-original-title="Latest pipeline for this branch">
+        latest
+      </span>
+      <span
+        v-if="pipeline.flags.yaml_errors"
+        class="js-pipeline-url-yaml label label-danger has-tooltip"
+        :title="pipeline.yaml_errors"
+        :data-original-title="pipeline.yaml_errors">
+        yaml invalid
+      </span>
+      <span
+        v-if="pipeline.flags.stuck"
+        class="js-pipeline-url-stuck label label-warning">
+        stuck
+      </span>
+    </td>
+  `,
+};
diff --git a/app/assets/javascripts/vue_pipelines_index/components/pipelines_actions.js b/app/assets/javascripts/vue_pipelines_index/components/pipelines_actions.js
new file mode 100644
index 00000000000..4bb2b048884
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/components/pipelines_actions.js
@@ -0,0 +1,71 @@
+/* eslint-disable no-new */
+/* global Flash */
+import '~/flash';
+import playIconSvg from 'icons/_icon_play.svg';
+import eventHub from '../event_hub';
+
+export default {
+  props: {
+    actions: {
+      type: Array,
+      required: true,
+    },
+
+    service: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      playIconSvg,
+      isLoading: false,
+    };
+  },
+
+  methods: {
+    onClickAction(endpoint) {
+      this.isLoading = true;
+
+      this.service.postAction(endpoint)
+      .then(() => {
+        this.isLoading = false;
+        eventHub.$emit('refreshPipelines');
+      })
+      .catch(() => {
+        this.isLoading = false;
+        new Flash('An error occured while making the request.');
+      });
+    },
+  },
+
+  template: `
+    <div class="btn-group" v-if="actions">
+      <button
+        type="button"
+        class="dropdown-toggle btn btn-default has-tooltip js-pipeline-dropdown-manual-actions"
+        title="Manual job"
+        data-toggle="dropdown"
+        data-placement="top"
+        aria-label="Manual job"
+        :disabled="isLoading">
+        ${playIconSvg}
+        <i class="fa fa-caret-down" aria-hidden="true"></i>
+        <i v-if="isLoading" class="fa fa-spinner fa-spin" aria-hidden="true"></i>
+      </button>
+
+      <ul class="dropdown-menu dropdown-menu-align-right">
+        <li v-for="action in actions">
+          <button
+            type="button"
+            class="js-pipeline-action-link no-btn"
+            @click="onClickAction(action.path)">
+            ${playIconSvg}
+            <span>{{action.name}}</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/vue_pipelines_index/components/pipelines_artifacts.js b/app/assets/javascripts/vue_pipelines_index/components/pipelines_artifacts.js
new file mode 100644
index 00000000000..f18e2dfadaf
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/components/pipelines_artifacts.js
@@ -0,0 +1,33 @@
+export default {
+  props: {
+    artifacts: {
+      type: Array,
+      required: true,
+    },
+  },
+
+  template: `
+    <div class="btn-group" role="group">
+      <button
+        class="dropdown-toggle btn btn-default build-artifacts has-tooltip js-pipeline-dropdown-download"
+        title="Artifacts"
+        data-placement="top"
+        data-toggle="dropdown"
+        aria-label="Artifacts">
+        <i class="fa fa-download" aria-hidden="true"></i>
+        <i class="fa fa-caret-down" aria-hidden="true"></i>
+      </button>
+      <ul class="dropdown-menu dropdown-menu-align-right">
+        <li v-for="artifact in artifacts">
+          <a
+            rel="nofollow"
+            download
+            :href="artifact.path">
+            <i class="fa fa-download" aria-hidden="true"></i>
+            <span>Download {{artifact.name}} artifacts</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/vue_pipelines_index/components/stage.js b/app/assets/javascripts/vue_pipelines_index/components/stage.js
new file mode 100644
index 00000000000..a2c29002707
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/components/stage.js
@@ -0,0 +1,116 @@
+/* global Flash */
+import canceledSvg from 'icons/_icon_status_canceled_borderless.svg';
+import createdSvg from 'icons/_icon_status_created_borderless.svg';
+import failedSvg from 'icons/_icon_status_failed_borderless.svg';
+import manualSvg from 'icons/_icon_status_manual_borderless.svg';
+import pendingSvg from 'icons/_icon_status_pending_borderless.svg';
+import runningSvg from 'icons/_icon_status_running_borderless.svg';
+import skippedSvg from 'icons/_icon_status_skipped_borderless.svg';
+import successSvg from 'icons/_icon_status_success_borderless.svg';
+import warningSvg from 'icons/_icon_status_warning_borderless.svg';
+
+export default {
+  data() {
+    const svgsDictionary = {
+      icon_status_canceled: canceledSvg,
+      icon_status_created: createdSvg,
+      icon_status_failed: failedSvg,
+      icon_status_manual: manualSvg,
+      icon_status_pending: pendingSvg,
+      icon_status_running: runningSvg,
+      icon_status_skipped: skippedSvg,
+      icon_status_success: successSvg,
+      icon_status_warning: warningSvg,
+    };
+
+    return {
+      builds: '',
+      spinner: '<span class="fa fa-spinner fa-spin"></span>',
+      svg: svgsDictionary[this.stage.status.icon],
+    };
+  },
+
+  props: {
+    stage: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  updated() {
+    if (this.builds) {
+      this.stopDropdownClickPropagation();
+    }
+  },
+
+  methods: {
+    fetchBuilds(e) {
+      const ariaExpanded = e.currentTarget.attributes['aria-expanded'];
+
+      if (ariaExpanded && (ariaExpanded.textContent === 'true')) return null;
+
+      return this.$http.get(this.stage.dropdown_path)
+        .then((response) => {
+          this.builds = JSON.parse(response.body).html;
+        }, () => {
+          const flash = new Flash('Something went wrong on our end.');
+          return flash;
+        });
+    },
+
+    /**
+     * When the user right clicks or cmd/ctrl + click in the job name
+     * the dropdown should not be closed and the link should open in another tab,
+     * so we stop propagation of the click event inside the dropdown.
+     *
+     * Since this component is rendered multiple times per page we need to guarantee we only
+     * target the click event of this component.
+     */
+    stopDropdownClickPropagation() {
+      $(this.$el.querySelectorAll('.js-builds-dropdown-list a.mini-pipeline-graph-dropdown-item')).on('click', (e) => {
+        e.stopPropagation();
+      });
+    },
+  },
+  computed: {
+    buildsOrSpinner() {
+      return this.builds ? this.builds : this.spinner;
+    },
+    dropdownClass() {
+      if (this.builds) return 'js-builds-dropdown-container';
+      return 'js-builds-dropdown-loading builds-dropdown-loading';
+    },
+    buildStatus() {
+      return `Build: ${this.stage.status.label}`;
+    },
+    tooltip() {
+      return `has-tooltip ci-status-icon ci-status-icon-${this.stage.status.group}`;
+    },
+    triggerButtonClass() {
+      return `mini-pipeline-graph-dropdown-toggle has-tooltip js-builds-dropdown-button ci-status-icon-${this.stage.status.group}`;
+    },
+  },
+  template: `
+    <div>
+      <button
+        @click="fetchBuilds($event)"
+        :class="triggerButtonClass"
+        :title="stage.title"
+        data-placement="top"
+        data-toggle="dropdown"
+        type="button"
+        :aria-label="stage.title">
+        <span v-html="svg" aria-hidden="true"></span>
+        <i class="fa fa-caret-down" aria-hidden="true"></i>
+      </button>
+      <ul class="dropdown-menu mini-pipeline-graph-dropdown-menu js-builds-dropdown-container">
+        <div class="arrow-up" aria-hidden="true"></div>
+        <div
+          :class="dropdownClass"
+          class="js-builds-dropdown-list scrollable-menu"
+          v-html="buildsOrSpinner">
+        </div>
+      </ul>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/vue_pipelines_index/components/status.js b/app/assets/javascripts/vue_pipelines_index/components/status.js
new file mode 100644
index 00000000000..21a281af438
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/components/status.js
@@ -0,0 +1,60 @@
+import canceledSvg from 'icons/_icon_status_canceled.svg';
+import createdSvg from 'icons/_icon_status_created.svg';
+import failedSvg from 'icons/_icon_status_failed.svg';
+import manualSvg from 'icons/_icon_status_manual.svg';
+import pendingSvg from 'icons/_icon_status_pending.svg';
+import runningSvg from 'icons/_icon_status_running.svg';
+import skippedSvg from 'icons/_icon_status_skipped.svg';
+import successSvg from 'icons/_icon_status_success.svg';
+import warningSvg from 'icons/_icon_status_warning.svg';
+
+export default {
+  props: {
+    pipeline: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data() {
+    const svgsDictionary = {
+      icon_status_canceled: canceledSvg,
+      icon_status_created: createdSvg,
+      icon_status_failed: failedSvg,
+      icon_status_manual: manualSvg,
+      icon_status_pending: pendingSvg,
+      icon_status_running: runningSvg,
+      icon_status_skipped: skippedSvg,
+      icon_status_success: successSvg,
+      icon_status_warning: warningSvg,
+    };
+
+    return {
+      svg: svgsDictionary[this.pipeline.details.status.icon],
+    };
+  },
+
+  computed: {
+    cssClasses() {
+      return `ci-status ci-${this.pipeline.details.status.group}`;
+    },
+
+    detailsPath() {
+      const { status } = this.pipeline.details;
+      return status.has_details ? status.details_path : false;
+    },
+
+    content() {
+      return `${this.svg} ${this.pipeline.details.status.text}`;
+    },
+  },
+  template: `
+    <td class="commit-link">
+      <a
+        :class="cssClasses"
+        :href="detailsPath"
+        v-html="content">
+      </a>
+    </td>
+  `,
+};
diff --git a/app/assets/javascripts/vue_pipelines_index/components/time_ago.js b/app/assets/javascripts/vue_pipelines_index/components/time_ago.js
new file mode 100644
index 00000000000..498d0715f54
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/components/time_ago.js
@@ -0,0 +1,71 @@
+import iconTimerSvg from 'icons/_icon_timer.svg';
+import '../../lib/utils/datetime_utility';
+
+export default {
+  data() {
+    return {
+      currentTime: new Date(),
+      iconTimerSvg,
+    };
+  },
+  props: ['pipeline'],
+  computed: {
+    timeAgo() {
+      return gl.utils.getTimeago();
+    },
+    localTimeFinished() {
+      return gl.utils.formatDate(this.pipeline.details.finished_at);
+    },
+    timeStopped() {
+      const changeTime = this.currentTime;
+      const options = {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      };
+      options.timeZoneName = 'short';
+      const finished = this.pipeline.details.finished_at;
+      if (!finished && changeTime) return false;
+      return ({ words: this.timeAgo.format(finished) });
+    },
+    duration() {
+      const { duration } = this.pipeline.details;
+      const date = new Date(duration * 1000);
+
+      let hh = date.getUTCHours();
+      let mm = date.getUTCMinutes();
+      let ss = date.getSeconds();
+
+      if (hh < 10) hh = `0${hh}`;
+      if (mm < 10) mm = `0${mm}`;
+      if (ss < 10) ss = `0${ss}`;
+
+      if (duration !== null) return `${hh}:${mm}:${ss}`;
+      return false;
+    },
+  },
+  methods: {
+    changeTime() {
+      this.currentTime = new Date();
+    },
+  },
+  template: `
+    <td class="pipelines-time-ago">
+      <p class="duration" v-if='duration'>
+        <span v-html="iconTimerSvg"></span>
+        {{duration}}
+      </p>
+      <p class="finished-at" v-if='timeStopped'>
+        <i class="fa fa-calendar"></i>
+        <time
+          data-toggle="tooltip"
+          data-placement="top"
+          data-container="body"
+          :data-original-title='localTimeFinished'>
+          {{timeStopped.words}}
+        </time>
+      </p>
+    </td>
+  `,
+};
diff --git a/app/assets/javascripts/vue_pipelines_index/event_hub.js b/app/assets/javascripts/vue_pipelines_index/event_hub.js
new file mode 100644
index 00000000000..0948c2e5352
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/event_hub.js
@@ -0,0 +1,3 @@
+import Vue from 'vue';
+
+export default new Vue();
diff --git a/app/assets/javascripts/vue_pipelines_index/index.js b/app/assets/javascripts/vue_pipelines_index/index.js
new file mode 100644
index 00000000000..48f9181a8d9
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/index.js
@@ -0,0 +1,22 @@
+import Vue from 'vue';
+import PipelinesStore from './stores/pipelines_store';
+import PipelinesComponent from './pipelines';
+import '../vue_shared/vue_resource_interceptor';
+
+$(() => new Vue({
+  el: document.querySelector('#pipelines-list-vue'),
+
+  data() {
+    const store = new PipelinesStore();
+
+    return {
+      store,
+    };
+  },
+  components: {
+    'vue-pipelines': PipelinesComponent,
+  },
+  template: `
+    <vue-pipelines :store="store" />
+  `,
+}));
diff --git a/app/assets/javascripts/vue_pipelines_index/pipelines.js b/app/assets/javascripts/vue_pipelines_index/pipelines.js
new file mode 100644
index 00000000000..9bdc232b7da
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/pipelines.js
@@ -0,0 +1,246 @@
+import Vue from 'vue';
+import PipelinesService from './services/pipelines_service';
+import eventHub from './event_hub';
+import PipelinesTableComponent from '../vue_shared/components/pipelines_table';
+import TablePaginationComponent from '../vue_shared/components/table_pagination';
+import EmptyState from './components/empty_state';
+import ErrorState from './components/error_state';
+import NavigationTabs from './components/navigation_tabs';
+import NavigationControls from './components/nav_controls';
+
+export default {
+  props: {
+    store: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  components: {
+    'gl-pagination': TablePaginationComponent,
+    'pipelines-table-component': PipelinesTableComponent,
+    'empty-state': EmptyState,
+    'error-state': ErrorState,
+    'navigation-tabs': NavigationTabs,
+    'navigation-controls': NavigationControls,
+  },
+
+  data() {
+    const pipelinesData = document.querySelector('#pipelines-list-vue').dataset;
+
+    return {
+      endpoint: pipelinesData.endpoint,
+      cssClass: pipelinesData.cssClass,
+      helpPagePath: pipelinesData.helpPagePath,
+      newPipelinePath: pipelinesData.newPipelinePath,
+      canCreatePipeline: pipelinesData.canCreatePipeline,
+      allPath: pipelinesData.allPath,
+      pendingPath: pipelinesData.pendingPath,
+      runningPath: pipelinesData.runningPath,
+      finishedPath: pipelinesData.finishedPath,
+      branchesPath: pipelinesData.branchesPath,
+      tagsPath: pipelinesData.tagsPath,
+      hasCi: pipelinesData.hasCi,
+      ciLintPath: pipelinesData.ciLintPath,
+      state: this.store.state,
+      apiScope: 'all',
+      pagenum: 1,
+      isLoading: false,
+      hasError: false,
+    };
+  },
+
+  computed: {
+    canCreatePipelineParsed() {
+      return gl.utils.convertPermissionToBoolean(this.canCreatePipeline);
+    },
+
+    scope() {
+      const scope = gl.utils.getParameterByName('scope');
+      return scope === null ? 'all' : scope;
+    },
+
+    shouldRenderErrorState() {
+      return this.hasError && !this.isLoading;
+    },
+
+    /**
+    * The empty state should only be rendered when the request is made to fetch all pipelines
+    * and none is returned.
+    *
+    * @return {Boolean}
+    */
+    shouldRenderEmptyState() {
+      return !this.isLoading &&
+        !this.hasError &&
+        !this.state.pipelines.length &&
+        (this.scope === 'all' || this.scope === null);
+    },
+
+    /**
+     * When a specific scope does not have pipelines we render a message.
+     *
+     * @return {Boolean}
+     */
+    shouldRenderNoPipelinesMessage() {
+      return !this.isLoading &&
+        !this.hasError &&
+        !this.state.pipelines.length &&
+        this.scope !== 'all' &&
+        this.scope !== null;
+    },
+
+    shouldRenderTable() {
+      return !this.hasError &&
+        !this.isLoading && this.state.pipelines.length;
+    },
+
+    /**
+    * Pagination should only be rendered when there is more than one page.
+    *
+    * @return {Boolean}
+    */
+    shouldRenderPagination() {
+      return !this.isLoading &&
+        this.state.pipelines.length &&
+        this.state.pageInfo.total > this.state.pageInfo.perPage;
+    },
+
+    hasCiEnabled() {
+      return this.hasCi !== undefined;
+    },
+
+    paths() {
+      return {
+        allPath: this.allPath,
+        pendingPath: this.pendingPath,
+        finishedPath: this.finishedPath,
+        runningPath: this.runningPath,
+        branchesPath: this.branchesPath,
+        tagsPath: this.tagsPath,
+      };
+    },
+  },
+
+  created() {
+    this.service = new PipelinesService(this.endpoint);
+
+    this.fetchPipelines();
+
+    eventHub.$on('refreshPipelines', this.fetchPipelines);
+  },
+
+  beforeUpdate() {
+    if (this.state.pipelines.length && this.$children) {
+      this.store.startTimeAgoLoops.call(this, Vue);
+    }
+  },
+
+  beforeDestroyed() {
+    eventHub.$off('refreshPipelines');
+  },
+
+  methods: {
+    /**
+     * Will change the page number and update the URL.
+     *
+     * @param  {Number} pageNumber desired page to go to.
+     */
+    change(pageNumber) {
+      const param = gl.utils.setParamInURL('page', pageNumber);
+
+      gl.utils.visitUrl(param);
+      return param;
+    },
+
+    fetchPipelines() {
+      const pageNumber = gl.utils.getParameterByName('page') || this.pagenum;
+      const scope = gl.utils.getParameterByName('scope') || this.apiScope;
+
+      this.isLoading = true;
+      return this.service.getPipelines(scope, pageNumber)
+        .then(resp => ({
+          headers: resp.headers,
+          body: resp.json(),
+        }))
+        .then((response) => {
+          this.store.storeCount(response.body.count);
+          this.store.storePipelines(response.body.pipelines);
+          this.store.storePagination(response.headers);
+        })
+        .then(() => {
+          this.isLoading = false;
+        })
+        .catch(() => {
+          this.hasError = true;
+          this.isLoading = false;
+        });
+    },
+  },
+
+  template: `
+    <div :class="cssClass">
+
+      <div
+        class="top-area scrolling-tabs-container inner-page-scroll-tabs"
+        v-if="!isLoading && !shouldRenderEmptyState">
+        <div class="fade-left">
+          <i class="fa fa-angle-left" aria-hidden="true"></i>
+        </div>
+        <div class="fade-right">
+          <i class="fa fa-angle-right" aria-hidden="true"></i>
+        </div>
+        <navigation-tabs
+          :scope="scope"
+          :count="state.count"
+          :paths="paths" />
+
+        <navigation-controls
+          :new-pipeline-path="newPipelinePath"
+          :has-ci-enabled="hasCiEnabled"
+          :help-page-path="helpPagePath"
+          :ciLintPath="ciLintPath"
+          :can-create-pipeline="canCreatePipelineParsed " />
+      </div>
+
+      <div class="content-list pipelines">
+
+        <div
+          class="realtime-loading"
+          v-if="isLoading">
+          <i
+            class="fa fa-spinner fa-spin"
+            aria-hidden="true" />
+        </div>
+
+        <empty-state
+          v-if="shouldRenderEmptyState"
+          :help-page-path="helpPagePath" />
+
+        <error-state v-if="shouldRenderErrorState" />
+
+        <div
+          class="blank-state blank-state-no-icon"
+          v-if="shouldRenderNoPipelinesMessage">
+          <h2 class="blank-state-title js-blank-state-title">No pipelines to show.</h2>
+        </div>
+
+        <div
+          class="table-holder"
+          v-if="shouldRenderTable">
+
+          <pipelines-table-component
+            :pipelines="state.pipelines"
+            :service="service"/>
+        </div>
+
+        <gl-pagination
+          v-if="shouldRenderPagination"
+          :pagenum="pagenum"
+          :change="change"
+          :count="state.count.all"
+          :pageInfo="state.pageInfo"/>
+      </div>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/vue_pipelines_index/services/pipelines_service.js b/app/assets/javascripts/vue_pipelines_index/services/pipelines_service.js
new file mode 100644
index 00000000000..708f5068dd3
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/services/pipelines_service.js
@@ -0,0 +1,44 @@
+/* eslint-disable class-methods-use-this */
+import Vue from 'vue';
+import VueResource from 'vue-resource';
+
+Vue.use(VueResource);
+
+export default class PipelinesService {
+
+  /**
+  * Commits and merge request endpoints need to be requested with `.json`.
+  *
+  * The url provided to request the pipelines in the new merge request
+  * page already has `.json`.
+  *
+  * @param  {String} root
+  */
+  constructor(root) {
+    let endpoint;
+
+    if (root.indexOf('.json') === -1) {
+      endpoint = `${root}.json`;
+    } else {
+      endpoint = root;
+    }
+
+    this.pipelines = Vue.resource(endpoint);
+  }
+
+  getPipelines(scope, page) {
+    return this.pipelines.get({ scope, page });
+  }
+
+  /**
+   * Post request for all pipelines actions.
+   * Endpoint content type needs to be:
+   * `Content-Type:application/x-www-form-urlencoded`
+   *
+   * @param  {String} endpoint
+   * @return {Promise}
+   */
+  postAction(endpoint) {
+    return Vue.http.post(endpoint, {}, { emulateJSON: true });
+  }
+}
diff --git a/app/assets/javascripts/vue_pipelines_index/stores/pipelines_store.js b/app/assets/javascripts/vue_pipelines_index/stores/pipelines_store.js
new file mode 100644
index 00000000000..7ac10086a55
--- /dev/null
+++ b/app/assets/javascripts/vue_pipelines_index/stores/pipelines_store.js
@@ -0,0 +1,61 @@
+/* eslint-disable no-underscore-dangle*/
+import '../../vue_realtime_listener';
+
+export default class PipelinesStore {
+  constructor() {
+    this.state = {};
+
+    this.state.pipelines = [];
+    this.state.count = {};
+    this.state.pageInfo = {};
+  }
+
+  storePipelines(pipelines = []) {
+    this.state.pipelines = pipelines;
+  }
+
+  storeCount(count = {}) {
+    this.state.count = count;
+  }
+
+  storePagination(pagination = {}) {
+    let paginationInfo;
+
+    if (Object.keys(pagination).length) {
+      const normalizedHeaders = gl.utils.normalizeHeaders(pagination);
+      paginationInfo = gl.utils.parseIntPagination(normalizedHeaders);
+    } else {
+      paginationInfo = pagination;
+    }
+
+    this.state.pageInfo = paginationInfo;
+  }
+
+  /**
+   * FIXME: Move this inside the component.
+   *
+   * Once the data is received we will start the time ago loops.
+   *
+   * Everytime a request is made like retry or cancel a pipeline, every 10 seconds we
+   * update the time to show how long as passed.
+   *
+   */
+  startTimeAgoLoops() {
+    const startTimeLoops = () => {
+      this.timeLoopInterval = setInterval(() => {
+        this.$children[0].$children.reduce((acc, component) => {
+          const timeAgoComponent = component.$children.filter(el => el.$options._componentTag === 'time-ago')[0];
+          acc.push(timeAgoComponent);
+          return acc;
+        }, []).forEach(e => e.changeTime());
+      }, 10000);
+    };
+
+    startTimeLoops();
+
+    const removeIntervals = () => clearInterval(this.timeLoopInterval);
+    const startIntervals = () => startTimeLoops();
+
+    gl.VueRealtimeListener(removeIntervals, startIntervals);
+  }
+}
diff --git a/app/assets/javascripts/vue_realtime_listener/index.js b/app/assets/javascripts/vue_realtime_listener/index.js
new file mode 100644
index 00000000000..30f6680a673
--- /dev/null
+++ b/app/assets/javascripts/vue_realtime_listener/index.js
@@ -0,0 +1,29 @@
+/* eslint-disable no-param-reassign */
+
+((gl) => {
+  gl.VueRealtimeListener = (removeIntervals, startIntervals) => {
+    const removeAll = () => {
+      removeIntervals();
+      window.removeEventListener('beforeunload', removeIntervals);
+      window.removeEventListener('focus', startIntervals);
+      window.removeEventListener('blur', removeIntervals);
+      document.removeEventListener('beforeunload', removeAll);
+    };
+
+    window.addEventListener('beforeunload', removeIntervals);
+    window.addEventListener('focus', startIntervals);
+    window.addEventListener('blur', removeIntervals);
+    document.addEventListener('beforeunload', removeAll);
+
+    // add removeAll methods to stack
+    const stack = gl.VueRealtimeListener.reset;
+    gl.VueRealtimeListener.reset = () => {
+      gl.VueRealtimeListener.reset = stack;
+      removeAll();
+      stack();
+    };
+  };
+
+  // remove all event listeners and intervals
+  gl.VueRealtimeListener.reset = () => undefined; // noop
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/vue_shared/common_vue.js b/app/assets/javascripts/vue_shared/common_vue.js
new file mode 100644
index 00000000000..eb2a6071fda
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/common_vue.js
@@ -0,0 +1,6 @@
+import Vue from 'vue';
+import './vue_resource_interceptor';
+
+if (process.env.NODE_ENV !== 'production') {
+  Vue.config.productionTip = false;
+}
diff --git a/app/assets/javascripts/vue_shared/components/commit.js b/app/assets/javascripts/vue_shared/components/commit.js
new file mode 100644
index 00000000000..fb68abd95a2
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/commit.js
@@ -0,0 +1,157 @@
+import commitIconSvg from 'icons/_icon_commit.svg';
+
+export default {
+  props: {
+    /**
+     * Indicates the existance of a tag.
+     * Used to render the correct icon, if true will render `fa-tag` icon,
+     * if false will render `fa-code-fork` icon.
+     */
+    tag: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+
+    /**
+     * If provided is used to render the branch name and url.
+     * Should contain the following properties:
+     * name
+     * ref_url
+     */
+    commitRef: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+
+    /**
+     * Used to link to the commit sha.
+     */
+    commitUrl: {
+      type: String,
+      required: false,
+      default: '',
+    },
+
+    /**
+     * Used to show the commit short sha that links to the commit url.
+     */
+    shortSha: {
+      type: String,
+      required: false,
+      default: '',
+    },
+
+    /**
+     * If provided shows the commit tile.
+     */
+    title: {
+      type: String,
+      required: false,
+      default: '',
+    },
+
+    /**
+     * If provided renders information about the author of the commit.
+     * When provided should include:
+     * `avatar_url` to render the avatar icon
+     * `web_url` to link to user profile
+     * `username` to render alt and title tags
+     */
+    author: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+
+  computed: {
+    /**
+     * Used to verify if all the properties needed to render the commit
+     * ref section were provided.
+     *
+     * TODO: Improve this! Use lodash _.has when we have it.
+     *
+     * @returns {Boolean}
+     */
+    hasCommitRef() {
+      return this.commitRef && this.commitRef.name && this.commitRef.ref_url;
+    },
+
+    /**
+     * Used to verify if all the properties needed to render the commit
+     * author section were provided.
+     *
+     * TODO: Improve this! Use lodash _.has when we have it.
+     *
+     * @returns {Boolean}
+     */
+    hasAuthor() {
+      return this.author &&
+        this.author.avatar_url &&
+        this.author.web_url &&
+        this.author.username;
+    },
+
+    /**
+     * If information about the author is provided will return a string
+     * to be rendered as the alt attribute of the img tag.
+     *
+     * @returns {String}
+     */
+    userImageAltDescription() {
+      return this.author &&
+        this.author.username ? `${this.author.username}'s avatar` : null;
+    },
+  },
+
+  data() {
+    return { commitIconSvg };
+  },
+
+  template: `
+    <div class="branch-commit">
+
+      <div v-if="hasCommitRef" class="icon-container">
+        <i v-if="tag" class="fa fa-tag"></i>
+        <i v-if="!tag" class="fa fa-code-fork"></i>
+      </div>
+
+      <a v-if="hasCommitRef"
+        class="monospace branch-name"
+        :href="commitRef.ref_url">
+        {{commitRef.name}}
+      </a>
+
+      <div v-html="commitIconSvg" class="commit-icon js-commit-icon"></div>
+
+      <a class="commit-id monospace"
+        :href="commitUrl">
+        {{shortSha}}
+      </a>
+
+      <p class="commit-title">
+        <span v-if="title">
+          <a v-if="hasAuthor"
+            class="avatar-image-container"
+            :href="author.web_url">
+            <img
+              class="avatar has-tooltip s20"
+              :src="author.avatar_url"
+              :alt="userImageAltDescription"
+              :title="author.username" />
+          </a>
+
+          <a class="commit-row-message"
+            :href="commitUrl">
+            {{title}}
+          </a>
+        </span>
+        <span v-else>
+          Cant find HEAD commit for this branch
+        </span>
+      </p>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/vue_shared/components/pipelines_table.js b/app/assets/javascripts/vue_shared/components/pipelines_table.js
new file mode 100644
index 00000000000..afd8d7acf6b
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/pipelines_table.js
@@ -0,0 +1,48 @@
+import PipelinesTableRowComponent from './pipelines_table_row';
+
+/**
+ * Pipelines Table Component.
+ *
+ * Given an array of objects, renders a table.
+ */
+export default {
+  props: {
+    pipelines: {
+      type: Array,
+      required: true,
+      default: () => ([]),
+    },
+
+    service: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  components: {
+    'pipelines-table-row-component': PipelinesTableRowComponent,
+  },
+
+  template: `
+    <table class="table ci-table">
+      <thead>
+        <tr>
+          <th class="js-pipeline-status pipeline-status">Status</th>
+          <th class="js-pipeline-info pipeline-info">Pipeline</th>
+          <th class="js-pipeline-commit pipeline-commit">Commit</th>
+          <th class="js-pipeline-stages pipeline-stages">Stages</th>
+          <th class="js-pipeline-date pipeline-date"></th>
+          <th class="js-pipeline-actions pipeline-actions"></th>
+        </tr>
+      </thead>
+      <tbody>
+        <template v-for="model in pipelines"
+          v-bind:model="model">
+          <tr is="pipelines-table-row-component"
+            :pipeline="model"
+            :service="service"></tr>
+        </template>
+      </tbody>
+    </table>
+  `,
+};
diff --git a/app/assets/javascripts/vue_shared/components/pipelines_table_row.js b/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
new file mode 100644
index 00000000000..f5b3cb9214e
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/pipelines_table_row.js
@@ -0,0 +1,228 @@
+/* eslint-disable no-param-reassign */
+
+import AsyncButtonComponent from '../../vue_pipelines_index/components/async_button';
+import PipelinesActionsComponent from '../../vue_pipelines_index/components/pipelines_actions';
+import PipelinesArtifactsComponent from '../../vue_pipelines_index/components/pipelines_artifacts';
+import PipelinesStatusComponent from '../../vue_pipelines_index/components/status';
+import PipelinesStageComponent from '../../vue_pipelines_index/components/stage';
+import PipelinesUrlComponent from '../../vue_pipelines_index/components/pipeline_url';
+import PipelinesTimeagoComponent from '../../vue_pipelines_index/components/time_ago';
+import CommitComponent from './commit';
+
+/**
+ * Pipeline table row.
+ *
+ * Given the received object renders a table row in the pipelines' table.
+ */
+export default {
+  props: {
+    pipeline: {
+      type: Object,
+      required: true,
+    },
+
+    service: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  components: {
+    'async-button-component': AsyncButtonComponent,
+    'pipelines-actions-component': PipelinesActionsComponent,
+    'pipelines-artifacts-component': PipelinesArtifactsComponent,
+    'commit-component': CommitComponent,
+    'dropdown-stage': PipelinesStageComponent,
+    'pipeline-url': PipelinesUrlComponent,
+    'status-scope': PipelinesStatusComponent,
+    'time-ago': PipelinesTimeagoComponent,
+  },
+
+  computed: {
+    /**
+     * If provided, returns the commit tag.
+     * Needed to render the commit component column.
+     *
+     * This field needs a lot of verification, because of different possible cases:
+     *
+     * 1. person who is an author of a commit might be a GitLab user
+     * 2. if person who is an author of a commit is a GitLab user he/she can have a GitLab avatar
+     * 3. If GitLab user does not have avatar he/she might have a Gravatar
+     * 4. If committer is not a GitLab User he/she can have a Gravatar
+     * 5. We do not have consistent API object in this case
+     * 6. We should improve API and the code
+     *
+     * @returns {Object|Undefined}
+     */
+    commitAuthor() {
+      let commitAuthorInformation;
+
+      // 1. person who is an author of a commit might be a GitLab user
+      if (this.pipeline &&
+        this.pipeline.commit &&
+        this.pipeline.commit.author) {
+        // 2. if person who is an author of a commit is a GitLab user
+        // he/she can have a GitLab avatar
+        if (this.pipeline.commit.author.avatar_url) {
+          commitAuthorInformation = this.pipeline.commit.author;
+
+          // 3. If GitLab user does not have avatar he/she might have a Gravatar
+        } else if (this.pipeline.commit.author_gravatar_url) {
+          commitAuthorInformation = Object.assign({}, this.pipeline.commit.author, {
+            avatar_url: this.pipeline.commit.author_gravatar_url,
+          });
+        }
+      }
+
+      // 4. If committer is not a GitLab User he/she can have a Gravatar
+      if (this.pipeline &&
+        this.pipeline.commit) {
+        commitAuthorInformation = {
+          avatar_url: this.pipeline.commit.author_gravatar_url,
+          web_url: `mailto:${this.pipeline.commit.author_email}`,
+          username: this.pipeline.commit.author_name,
+        };
+      }
+
+      return commitAuthorInformation;
+    },
+
+    /**
+     * If provided, returns the commit tag.
+     * Needed to render the commit component column.
+     *
+     * @returns {String|Undefined}
+     */
+    commitTag() {
+      if (this.pipeline.ref &&
+        this.pipeline.ref.tag) {
+        return this.pipeline.ref.tag;
+      }
+      return undefined;
+    },
+
+    /**
+     * If provided, returns the commit ref.
+     * Needed to render the commit component column.
+     *
+     * Matches `path` prop sent in the API to `ref_url` prop needed
+     * in the commit component.
+     *
+     * @returns {Object|Undefined}
+     */
+    commitRef() {
+      if (this.pipeline.ref) {
+        return Object.keys(this.pipeline.ref).reduce((accumulator, prop) => {
+          if (prop === 'path') {
+            accumulator.ref_url = this.pipeline.ref[prop];
+          } else {
+            accumulator[prop] = this.pipeline.ref[prop];
+          }
+          return accumulator;
+        }, {});
+      }
+
+      return undefined;
+    },
+
+    /**
+     * If provided, returns the commit url.
+     * Needed to render the commit component column.
+     *
+     * @returns {String|Undefined}
+     */
+    commitUrl() {
+      if (this.pipeline.commit &&
+        this.pipeline.commit.commit_path) {
+        return this.pipeline.commit.commit_path;
+      }
+      return undefined;
+    },
+
+    /**
+     * If provided, returns the commit short sha.
+     * Needed to render the commit component column.
+     *
+     * @returns {String|Undefined}
+     */
+    commitShortSha() {
+      if (this.pipeline.commit &&
+        this.pipeline.commit.short_id) {
+        return this.pipeline.commit.short_id;
+      }
+      return undefined;
+    },
+
+    /**
+     * If provided, returns the commit title.
+     * Needed to render the commit component column.
+     *
+     * @returns {String|Undefined}
+     */
+    commitTitle() {
+      if (this.pipeline.commit &&
+        this.pipeline.commit.title) {
+        return this.pipeline.commit.title;
+      }
+      return undefined;
+    },
+  },
+
+  template: `
+    <tr class="commit">
+      <status-scope :pipeline="pipeline"/>
+
+      <pipeline-url :pipeline="pipeline"></pipeline-url>
+
+      <td>
+        <commit-component
+          :tag="commitTag"
+          :commit-ref="commitRef"
+          :commit-url="commitUrl"
+          :short-sha="commitShortSha"
+          :title="commitTitle"
+          :author="commitAuthor"/>
+      </td>
+
+      <td class="stage-cell">
+        <div class="stage-container dropdown js-mini-pipeline-graph"
+          v-if="pipeline.details.stages.length > 0"
+          v-for="stage in pipeline.details.stages">
+          <dropdown-stage :stage="stage"/>
+        </div>
+      </td>
+
+      <time-ago :pipeline="pipeline"/>
+
+      <td class="pipeline-actions">
+        <div class="pull-right btn-group">
+          <pipelines-actions-component
+            v-if="pipeline.details.manual_actions.length"
+            :actions="pipeline.details.manual_actions"
+            :service="service" />
+
+          <pipelines-artifacts-component
+            v-if="pipeline.details.artifacts.length"
+            :artifacts="pipeline.details.artifacts" />
+
+          <async-button-component
+            v-if="pipeline.flags.retryable"
+            :service="service"
+            :endpoint="pipeline.retry_path"
+            css-class="js-pipelines-retry-button btn-default btn-retry"
+            title="Retry"
+            icon="repeat" />
+
+          <async-button-component
+            v-if="pipeline.flags.cancelable"
+            :service="service"
+            :endpoint="pipeline.cancel_path"
+            css-class="js-pipelines-cancel-button btn-remove"
+            title="Cancel"
+            icon="remove"
+            confirm-action-message="Are you sure you want to cancel this pipeline?" />
+        </div>
+      </td>
+    </tr>
+  `,
+};
diff --git a/app/assets/javascripts/vue_shared/components/table_pagination.js b/app/assets/javascripts/vue_shared/components/table_pagination.js
new file mode 100644
index 00000000000..ebb14912b00
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/table_pagination.js
@@ -0,0 +1,135 @@
+const PAGINATION_UI_BUTTON_LIMIT = 4;
+const UI_LIMIT = 6;
+const SPREAD = '...';
+const PREV = 'Prev';
+const NEXT = 'Next';
+const FIRST = '« First';
+const LAST = 'Last »';
+
+export default {
+  props: {
+    /**
+      This function will take the information given by the pagination component
+
+      Here is an example `change` method:
+
+      change(pagenum) {
+        gl.utils.visitUrl(`?page=${pagenum}`);
+      },
+    */
+    change: {
+      type: Function,
+      required: true,
+    },
+
+    /**
+      pageInfo will come from the headers of the API call
+      in the `.then` clause of the VueResource API call
+      there should be a function that contructs the pageInfo for this component
+
+      This is an example:
+
+      const pageInfo = headers => ({
+        perPage: +headers['X-Per-Page'],
+        page: +headers['X-Page'],
+        total: +headers['X-Total'],
+        totalPages: +headers['X-Total-Pages'],
+        nextPage: +headers['X-Next-Page'],
+        previousPage: +headers['X-Prev-Page'],
+      });
+    */
+    pageInfo: {
+      type: Object,
+      required: true,
+    },
+  },
+  methods: {
+    changePage(e) {
+      const text = e.target.innerText;
+      const { totalPages, nextPage, previousPage } = this.pageInfo;
+
+      switch (text) {
+        case SPREAD:
+          break;
+        case LAST:
+          this.change(totalPages);
+          break;
+        case NEXT:
+          this.change(nextPage);
+          break;
+        case PREV:
+          this.change(previousPage);
+          break;
+        case FIRST:
+          this.change(1);
+          break;
+        default:
+          this.change(+text);
+          break;
+      }
+    },
+  },
+  computed: {
+    prev() {
+      return this.pageInfo.previousPage;
+    },
+    next() {
+      return this.pageInfo.nextPage;
+    },
+    getItems() {
+      const total = this.pageInfo.totalPages;
+      const page = this.pageInfo.page;
+      const items = [];
+
+      if (page > 1) items.push({ title: FIRST });
+
+      if (page > 1) {
+        items.push({ title: PREV, prev: true });
+      } else {
+        items.push({ title: PREV, disabled: true, prev: true });
+      }
+
+      if (page > UI_LIMIT) items.push({ title: SPREAD, separator: true });
+
+      const start = Math.max(page - PAGINATION_UI_BUTTON_LIMIT, 1);
+      const end = Math.min(page + PAGINATION_UI_BUTTON_LIMIT, total);
+
+      for (let i = start; i <= end; i += 1) {
+        const isActive = i === page;
+        items.push({ title: i, active: isActive, page: true });
+      }
+
+      if (total - page > PAGINATION_UI_BUTTON_LIMIT) {
+        items.push({ title: SPREAD, separator: true, page: true });
+      }
+
+      if (page === total) {
+        items.push({ title: NEXT, disabled: true, next: true });
+      } else if (total - page >= 1) {
+        items.push({ title: NEXT, next: true });
+      }
+
+      if (total - page >= 1) items.push({ title: LAST, last: true });
+
+      return items;
+    },
+  },
+  template: `
+    <div class="gl-pagination">
+      <ul class="pagination clearfix">
+        <li v-for='item in getItems'
+          :class='{
+            page: item.page,
+            prev: item.prev,
+            next: item.next,
+            separator: item.separator,
+            active: item.active,
+            disabled: item.disabled
+          }'
+        >
+          <a @click="changePage($event)">{{item.title}}</a>
+        </li>
+      </ul>
+    </div>
+  `,
+};
diff --git a/app/assets/javascripts/vue_shared/vue_resource_interceptor.js b/app/assets/javascripts/vue_shared/vue_resource_interceptor.js
new file mode 100644
index 00000000000..d5f87588c28
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/vue_resource_interceptor.js
@@ -0,0 +1,24 @@
+import Vue from 'vue';
+import VueResource from 'vue-resource';
+
+Vue.use(VueResource);
+
+// Maintain a global counter for active requests
+// see: spec/support/wait_for_vue_resource.rb
+Vue.http.interceptors.push((request, next) => {
+  window.activeVueResources = window.activeVueResources || 0;
+  window.activeVueResources += 1;
+
+  next(() => {
+    window.activeVueResources -= 1;
+  });
+});
+
+// Inject CSRF token so we don't break any tests.
+Vue.http.interceptors.push((request, next) => {
+  if ($.rails) {
+    // eslint-disable-next-line no-param-reassign
+    request.headers['X-CSRF-Token'] = $.rails.csrfToken();
+  }
+  next();
+});
diff --git a/app/assets/javascripts/wikis.js b/app/assets/javascripts/wikis.js
index ad9b842db3c..75fd1394a03 100644
--- a/app/assets/javascripts/wikis.js
+++ b/app/assets/javascripts/wikis.js
@@ -1,38 +1,69 @@
-/* eslint-disable */
-
-/*= require latinise */
-
-(function() {
-  var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
-
-  this.Wikis = (function() {
-    function Wikis() {
-      this.slugify = bind(this.slugify, this);
-      $('.new-wiki-page').on('submit', (function(_this) {
-        return function(e) {
-          var field, path, slug;
-          $('[data-error~=slug]').addClass('hidden');
-          field = $('#new_wiki_path');
-          slug = _this.slugify(field.val());
-          if (slug.length > 0) {
-            path = field.attr('data-wikis-path');
-            location.href = path + '/' + slug;
-            return e.preventDefault();
-          }
-        };
-      })(this));
+/* eslint-disable no-param-reassign */
+/* global Breakpoints */
+
+require('./breakpoints');
+require('vendor/jquery.nicescroll');
+
+((global) => {
+  class Wikis {
+    constructor() {
+      this.bp = Breakpoints.get();
+      this.sidebarEl = document.querySelector('.js-wiki-sidebar');
+      this.sidebarExpanded = false;
+      $(this.sidebarEl).niceScroll();
+
+      const sidebarToggles = document.querySelectorAll('.js-sidebar-wiki-toggle');
+      for (let i = 0; i < sidebarToggles.length; i += 1) {
+        sidebarToggles[i].addEventListener('click', e => this.handleToggleSidebar(e));
+      }
+
+      this.newWikiForm = document.querySelector('form.new-wiki-page');
+      if (this.newWikiForm) {
+        this.newWikiForm.addEventListener('submit', e => this.handleNewWikiSubmit(e));
+      }
+
+      window.addEventListener('resize', () => this.renderSidebar());
+      this.renderSidebar();
     }
 
-    Wikis.prototype.dasherize = function(value) {
-      return value.replace(/[_\s]+/g, '-');
-    };
+    handleNewWikiSubmit(e) {
+      if (!this.newWikiForm) return;
 
-    Wikis.prototype.slugify = function(value) {
-      return this.dasherize(value.trim().toLowerCase().latinise());
-    };
+      const slugInput = this.newWikiForm.querySelector('#new_wiki_path');
+      const slug = gl.text.slugify(slugInput.value);
 
-    return Wikis;
+      if (slug.length > 0) {
+        const wikisPath = slugInput.getAttribute('data-wikis-path');
+        window.location.href = `${wikisPath}/${slug}`;
+        e.preventDefault();
+      }
+    }
 
-  })();
+    handleToggleSidebar(e) {
+      e.preventDefault();
+      this.sidebarExpanded = !this.sidebarExpanded;
+      this.renderSidebar();
+    }
+
+    sidebarCanCollapse() {
+      const bootstrapBreakpoint = this.bp.getBreakpointSize();
+      return bootstrapBreakpoint === 'xs' || bootstrapBreakpoint === 'sm';
+    }
+
+    renderSidebar() {
+      if (!this.sidebarEl) return;
+      const { classList } = this.sidebarEl;
+      if (this.sidebarExpanded || !this.sidebarCanCollapse()) {
+        if (!classList.contains('right-sidebar-expanded')) {
+          classList.remove('right-sidebar-collapsed');
+          classList.add('right-sidebar-expanded');
+        }
+      } else if (classList.contains('right-sidebar-expanded')) {
+        classList.add('right-sidebar-collapsed');
+        classList.remove('right-sidebar-expanded');
+      }
+    }
+  }
 
-}).call(this);
+  global.Wikis = Wikis;
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/javascripts/zen_mode.js b/app/assets/javascripts/zen_mode.js
index fa124e7052d..ce626cf7b46 100644
--- a/app/assets/javascripts/zen_mode.js
+++ b/app/assets/javascripts/zen_mode.js
@@ -1,13 +1,16 @@
-/* eslint-disable */
+/* eslint-disable func-names, space-before-function-paren, wrap-iife, prefer-arrow-callback, no-unused-vars, consistent-return, camelcase, comma-dangle, max-len */
+/* global Dropzone */
+/* global Mousetrap */
+
 // Zen Mode (full screen) textarea
 //
 /*= provides zen_mode:enter */
 /*= provides zen_mode:leave */
-//
-/*= require jquery.scrollTo */
-/*= require dropzone */
-/*= require mousetrap */
-/*= require mousetrap/pause */
+
+require('vendor/jquery.scrollTo');
+window.Dropzone = require('dropzone');
+require('mousetrap');
+require('mousetrap/plugins/pause/mousetrap-pause');
 
 //
 // ### Events
@@ -90,7 +93,5 @@
     };
 
     return ZenMode;
-
   })();
-
-}).call(this);
+}).call(window);
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 8b93665d085..83a8eeaafde 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -2,8 +2,6 @@
  * This is a manifest file that'll automatically include all the stylesheets available in this directory
  * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
  * the top of the compiled file, but it's generally better to create a new file per style scope.
- *= require jquery-ui/datepicker
- *= require jquery-ui/autocomplete
  *= require jquery.atwho
  *= require select2
  *= require_self
@@ -19,6 +17,8 @@
  * directory.
  */
 
+@import "../../../node_modules/pikaday/scss/pikaday";
+
 /*
  * GitLab UI framework
  */
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index d5cca1b10fb..5bb7e8caec1 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -1,4 +1,3 @@
-@import "framework/fonts";
 @import "framework/variables";
 @import "framework/mixins";
 @import 'framework/tw_bootstrap_variables';
@@ -7,8 +6,10 @@
 
 @import "framework/animations.scss";
 @import "framework/avatar.scss";
+@import "framework/asciidoctor.scss";
 @import "framework/blocks.scss";
 @import "framework/buttons.scss";
+@import "framework/badges.scss";
 @import "framework/calendar.scss";
 @import "framework/callout.scss";
 @import "framework/common.scss";
@@ -18,7 +19,6 @@
 @import "framework/flash.scss";
 @import "framework/forms.scss";
 @import "framework/gfm.scss";
-@import "framework/gitlab-theme.scss";
 @import "framework/header.scss";
 @import "framework/highlight.scss";
 @import "framework/issue_box.scss";
@@ -30,7 +30,6 @@
 @import "framework/modal.scss";
 @import "framework/nav.scss";
 @import "framework/pagination.scss";
-@import "framework/progress.scss";
 @import "framework/panels.scss";
 @import "framework/selects.scss";
 @import "framework/sidebar.scss";
@@ -39,3 +38,12 @@
 @import "framework/typography.scss";
 @import "framework/zen.scss";
 @import "framework/blank";
+@import "framework/wells.scss";
+@import "framework/page-header.scss";
+@import "framework/awards.scss";
+@import "framework/images.scss";
+@import "framework/broadcast-messages";
+@import "framework/emojis.scss";
+@import "framework/emoji-sprites.scss";
+@import "framework/icons.scss";
+@import "framework/snippets.scss";
diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss
index f1d36efb3de..90935b9616b 100644
--- a/app/assets/stylesheets/framework/animations.scss
+++ b/app/assets/stylesheets/framework/animations.scss
@@ -50,3 +50,98 @@
 .pulse {
   @include webkit-prefix(animation-name, pulse);
 }
+
+/*
+* General hover animations
+*/
+
+
+// Sass multiple transitions mixin | https://gist.github.com/tobiasahlin/7a421fb9306a4f518aab
+// Usage:   @include transition(width, height 0.3s ease-in-out);
+// Output:  -webkit-transition(width 0.2s, height 0.3s ease-in-out);
+//          transition(width 0.2s, height 0.3s ease-in-out);
+//
+// Pass in any number of transitions
+@mixin transition($transitions...) {
+  $unfoldedTransitions: ();
+  @each $transition in $transitions {
+    $unfoldedTransitions: append($unfoldedTransitions, unfoldTransition($transition), comma);
+  }
+
+  transition: $unfoldedTransitions;
+}
+
+@mixin disableAllAnimation {
+  /*CSS transitions*/
+  -o-transition-property: none !important;
+  -moz-transition-property: none !important;
+  -ms-transition-property: none !important;
+  -webkit-transition-property: none !important;
+  transition-property: none !important;
+  /*CSS transforms*/
+  -o-transform: none !important;
+  -moz-transform: none !important;
+  -ms-transform: none !important;
+  -webkit-transform: none !important;
+  transform: none !important;
+  /*CSS animations*/
+  -webkit-animation: none !important;
+  -moz-animation: none !important;
+  -o-animation: none !important;
+  -ms-animation: none !important;
+  animation: none !important;
+}
+
+@function unfoldTransition ($transition) {
+  // Default values
+  $property: all;
+  $duration: $general-hover-transition-duration;
+  $easing: $general-hover-transition-curve; // Browser default is ease, which is what we want
+  $delay: null; // Browser default is 0, which is what we want
+  $defaultProperties: ($property, $duration, $easing, $delay);
+
+  // Grab transition properties if they exist
+  $unfoldedTransition: ();
+  @for $i from 1 through length($defaultProperties) {
+    $p: null;
+    @if $i <= length($transition) {
+      $p: nth($transition, $i);
+    } @else {
+      $p: nth($defaultProperties, $i);
+    }
+    $unfoldedTransition: append($unfoldedTransition, $p);
+  }
+
+  @return $unfoldedTransition;
+}
+
+.btn,
+.global-dropdown-toggle {
+  @include transition(background-color, border-color, color, box-shadow);
+}
+
+.dropdown-menu-toggle,
+.avatar-circle,
+.header-user-avatar {
+  @include transition(border-color);
+}
+
+.note-action-button .link-highlight,
+.toolbar-btn,
+.dropdown-toggle-caret {
+  @include transition(color);
+}
+
+a {
+  @include transition(background-color, color, border);
+}
+
+.stage-nav-item {
+  @include transition(background-color, box-shadow);
+}
+
+.dropdown-menu a,
+.dropdown-menu button,
+.dropdown-menu-nav a {
+  transition: none;
+}
diff --git a/app/assets/stylesheets/framework/asciidoctor.scss b/app/assets/stylesheets/framework/asciidoctor.scss
new file mode 100644
index 00000000000..62493c32833
--- /dev/null
+++ b/app/assets/stylesheets/framework/asciidoctor.scss
@@ -0,0 +1,27 @@
+.admonitionblock td.icon {
+  width: 1%;
+
+  [class^="fa icon-"] {
+    @extend .fa-2x;
+  }
+
+  .icon-note {
+    @extend .fa-thumb-tack;
+  }
+
+  .icon-tip {
+    @extend .fa-lightbulb-o;
+  }
+
+  .icon-warning {
+    @extend .fa-exclamation-triangle;
+  }
+
+  .icon-caution {
+    @extend .fa-fire;
+  }
+
+  .icon-important {
+    @extend .fa-exclamation-circle;
+  }
+}
diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss
index 202ed5ae8fe..3f5b78ed445 100644
--- a/app/assets/stylesheets/framework/avatar.scss
+++ b/app/assets/stylesheets/framework/avatar.scss
@@ -8,7 +8,7 @@
   float: left;
   margin-right: 15px;
   border-radius: $avatar_radius;
-  border: 1px solid rgba(0, 0, 0, .1);
+  border: 1px solid $avatar-border;
   &.s16 { @include avatar-size(16px, 6px); }
   &.s20 { @include avatar-size(20px, 7px); }
   &.s24 { @include avatar-size(24px, 8px); }
@@ -28,23 +28,38 @@
 
 .avatar {
   @extend .avatar-circle;
+  @include transition-property(none);
+
   width: 40px;
   height: 40px;
   padding: 0;
 
   &.avatar-inline {
     float: none;
+    display: inline-block;
     margin-left: 4px;
     margin-bottom: 2px;
+    flex-shrink: 0;
+    -webkit-flex-shrink: 0;
 
     &.s16 { margin-right: 4px; }
     &.s24 { margin-right: 4px; }
   }
 
+  &.center {
+    font-size: 14px;
+    line-height: 1.8em;
+    text-align: center;
+  }
+
   &.avatar-tile {
     border-radius: 0;
     border: none;
   }
+
+  &:not([href]):hover {
+    border-color: rgba($avatar-border, .2);
+  }
 }
 
 .identicon {
@@ -57,7 +72,7 @@
   &.s32 { font-size: 20px; line-height: 30px; }
   &.s40 { font-size: 16px; line-height: 38px; }
   &.s60 { font-size: 32px; line-height: 58px; }
-  &.s70 { font-size: 34px; line-height: 68px; }
+  &.s70 { font-size: 34px; line-height: 70px; }
   &.s90 { font-size: 36px; line-height: 88px; }
   &.s110 { font-size: 40px; line-height: 108px; font-weight: 300; }
   &.s140 { font-size: 72px; line-height: 138px; }
@@ -73,6 +88,7 @@
     border-radius: 0;
     border: none;
     height: auto;
+    width: 100%;
     margin: 0;
     align-self: center;
   }
diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss
new file mode 100644
index 00000000000..1ae144fb471
--- /dev/null
+++ b/app/assets/stylesheets/framework/awards.scss
@@ -0,0 +1,170 @@
+.awards {
+  .emoji-icon {
+    width: 20px;
+    height: 20px;
+  }
+}
+
+.emoji-menu {
+  position: absolute;
+  top: 0;
+  margin-top: 3px;
+  padding: $gl-padding;
+  z-index: 9;
+  width: 300px;
+  font-size: 14px;
+  background-color: $white-light;
+  border: 1px solid $border-white-light;
+  border-radius: $border-radius-base;
+  box-shadow: 0 6px 12px $award-emoji-menu-shadow;
+  pointer-events: none;
+  opacity: 0;
+  transform: scale(.2);
+  transform-origin: 0 -45px;
+  transition: .3s cubic-bezier(.67,.06,.19,1.44);
+  transition-property: transform, opacity;
+
+  &.is-aligned-right {
+    transform-origin: 100% -45px;
+  }
+
+  &.is-visible {
+    pointer-events: all;
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  .emoji-menu-content {
+    height: 300px;
+    overflow-y: scroll;
+  }
+}
+
+.emoji-search {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAFu0lEQVRIia1WTahkVxH+quqce7vf6zdvJpHoIlkYJ2SiJiIokmQjgoGgIAaEIYuYXWICgojiwkmC4taFwhjcyIDusogEIwwiSSCKPwsdwzAg0SjJ9Izzk5n3+nXfe8+pqizOvd395scfsJqi6dPnnDr11Vc/NJ1OwUTosqJLCmYCHCAC2mSHs+ojZv6AO46Y+20AhIneJsafhPhXVZSXDk7qi+aOLhtQNuBmQtcarAKjTXpn2+l3u2yPunvZSABRucjcAV/eMZuM48/Go/g1d19kc4wq+e8MZjWkbI/P5t2P3RFFbv7SQdyBlBUx8N8OTuqjMcof+N94yMPrY2DMm/ytnb32J0QrY+6AqsHM4Q64O9SKDmerKDD3Oy/tNL9vk342CC8RuU6n0ymCMHb22scu7zQngtASOjUHE1BX4UUAv4b7Ow6qiXCXuz/UdvogAAweDY943/b4cAz0ZlYHXeMsnT07RVb7wMUr8ykI4H5HVkMd5Rcb4/jNURVOL5qErAaAUUdCCIJ5kx5q2nw8m39ImEAAsjpE6PStB0YfMcd1wqqG3Xn7A3PfZyyKnNjaqD4fmE/fCNKshirIyY1xvI+Av6g5QIAIIWX7cJPssboSiBBEeKmsZne0Sb8kzAUWNYyq8NvbDo0fZ6beqxuLmqOOMr/lwOh+YXpXtbjERGja9JyZ9+HxpXKb9Gj5oywRESbj+Cj1ENG1QViTGBl1FbC1We1tbVRfHWIoQkhqH9xbpE92XUbb6VJZ1R4crjRz1JWcDMJvLdoMcyAEhjuwHo8Bfndg3mbszhOY+adVlMtD3po51OwzIQiEaams7oeJhxRw1FFOVpFRRUYIhMBAFRnjOsC8IFHHUA4TQQhgAqpAiIFfGbxkIqj54ayGbL7UoOqHCniAEKHLNr26l+D9wQJzeUwMAnfHvEnLECzZRwRV++d60ptjW9VLZeolEJG6GwCCE0CFVNB+Ay0NEqoQYG4YYFu7B8IEVRt3uRzy/osIoLV9QZimWXGHUMFdmI6M64DUF2Je88R9VZqCSP+QlcF5k+4tCzSsXaqjINuK6UyE0+s/mk6/qFq8oAIL9pqMLhkGsNrOyoOIlszust3aJv0U9+kFdwjTGwWl1YdF+KWlQSZ0Se/psj8yGVdg5tJyfH96EBWmLtoEMwMzMFt031NzGWLLzKhC+KV7H5ZeeaMOPxemma2x68puc0LN3+/u6LJiePS6MKHvn4wu6cPzJj0hsioeMfDrEvjv5r6W9gBvjKJujuKzQ0URIZj75NylvT+mbHfXQa4rwAMaVRTMm/SFyzvNy0yF6+4AM+1ubcSnqkAIUjQKl1RKSbE5jt+vovx1MBqF0WW7/d1Z80ab9BtmuJ3Xk5cJKds9TZt/uLPXvtiTrQ+dIwqfAejUvM1os6FNikXKUHfQ+ekUsXT5u85enJ0CaBSkkGEo1syUQ+DfMdE/4GA1uzupf9zdbzhOmLsF4efHVXjaHHAzmDtGdQRd/Nc5wAEJjNki3XfhyvwVNz80xANrht3LsENY9cBBdN1L9GUyyvFRFZ42t75sBvCQRykbRlU4tT2pPxoCvzx09d4GmPs200M6wKdWSDGK8mppYSWdhAlt0qeaLv+IadXU9/Evq4FAZ8ej+LmtcTxaRX4NWI0Uag5Vg1p5MYg8BnlhXIdPHDow+vTWZvVMVttXDLqkTzZdPj6Qii6cP1cSvIdl3iQkNYyi9HH0I22y+93tY3DcQkTZgQtM+POoCr8x97eylkmtrgKuztrvXJ21x/aNKuqIkZ/fntRfCdcTfhUTAIhRzoDojJD0aSNLLwMzmpT7+JaLtyf1MwDo6qz9djFaUq3t9MlFmy/c1OCSceY9fMsVaL9mvH9ocXdkdWxv1scAePG0THAhMOaLdOw/Gvxfxb1w4eCapyIENUcV5M3/u8FitAxZ25P6GAHT3UX39Srw+QOb1ZffA98Dl2Wy1BYkAAAAAElFTkSuQmCC");
+  background-repeat: no-repeat;
+  background-position: right 5px center;
+  background-size: 16px;
+}
+
+.emoji-menu-list {
+  margin-bottom: 0;
+  padding-left: 0;
+  list-style: none;
+}
+
+.emoji-menu-list-item {
+  float: left;
+  padding: 3px;
+  margin-left: 1px;
+  margin-right: 1px;
+}
+
+.emoji-menu-btn {
+  display: block;
+  cursor: pointer;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  background: none;
+  border: 0;
+  border-radius: $border-radius-base;
+  transition: transform .15s cubic-bezier(.3, 0, .2, 2);
+
+  &:hover {
+    background-color: transparent;
+    outline: 0;
+    transform: scale(1.3);
+  }
+
+  &:focus,
+  &:active {
+    outline: 0;
+  }
+
+  .emoji-icon {
+    display: inline-block;
+    position: relative;
+    top: 3px;
+  }
+}
+
+.award-menu-holder {
+  display: inline-block;
+  position: relative;
+
+  .tooltip {
+    white-space: nowrap;
+  }
+}
+
+.award-control {
+  margin: 3px 5px 3px 0;
+  padding: .35em .4em;
+  outline: 0;
+
+  &.disabled {
+    cursor: default;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: $white-light;
+      border-color: $border-color;
+      box-shadow: none;
+    }
+  }
+
+  &.active,
+  &:hover,
+  &:active {
+    background-color: $row-hover;
+    border-color: $row-hover-border;
+    box-shadow: none;
+    outline: 0;
+  }
+
+  &.btn {
+    &:focus {
+      outline: 0;
+    }
+
+    .award-control-icon {
+      margin: 0;
+    }
+  }
+
+  &.is-loading {
+    .award-control-icon-normal,
+    .emoji-icon {
+      display: none;
+    }
+
+    .award-control-icon-loading {
+      display: block;
+    }
+  }
+
+  .icon,
+  gl-emoji,
+  .award-control-icon {
+    vertical-align: middle;
+    margin-right: 0.15em;
+    font-size: 1.5em;
+    line-height: 1;
+  }
+
+  .award-control-icon-loading {
+    display: none;
+  }
+
+  .award-control-icon {
+    color: $border-gray-normal;
+    margin-top: 1px;
+    padding: 0 2px;
+  }
+
+  .award-control-text {
+    vertical-align: middle;
+  }
+}
diff --git a/app/assets/stylesheets/framework/badges.scss b/app/assets/stylesheets/framework/badges.scss
new file mode 100644
index 00000000000..47a8f44c709
--- /dev/null
+++ b/app/assets/stylesheets/framework/badges.scss
@@ -0,0 +1,6 @@
+.badge {
+  font-weight: normal;
+  background-color: $badge-bg;
+  color: $badge-color;
+  vertical-align: baseline;
+}
diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss
index 540718197e0..a2fa2e7769b 100644
--- a/app/assets/stylesheets/framework/blank.scss
+++ b/app/assets/stylesheets/framework/blank.scss
@@ -32,14 +32,14 @@
 .blank-state-title {
   margin-top: 0;
   margin-bottom: 5px;
-  font-size: 19px;
+  font-size: 18px;
   font-weight: normal;
 }
 
 .blank-state-text {
   margin-top: 0;
   margin-bottom: $gl-padding;
-  font-size: 15px;
+  font-size: 14px;
 
   > strong {
     font-weight: 600;
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index 7e168092522..9a4129cdc8d 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -1,20 +1,15 @@
-.light-well {
-  background-color: $background-color;
-  padding: 15px;
-}
-
 .centered-light-block {
   text-align: center;
-  color: $gl-gray;
+  color: $gl-text-color;
   margin: 20px;
 }
 
 .nothing-here-block {
   text-align: center;
   padding: 20px;
-  color: $gl-gray;
+  color: $gl-text-color;
   font-weight: normal;
-  font-size: 16px;
+  font-size: 14px;
   line-height: 36px;
 
   &.diff-collapsed {
@@ -29,19 +24,19 @@
 .row-content-block {
   margin-top: 0;
   margin-bottom: -$gl-padding;
-  background-color: $background-color;
+  background-color: $gray-light;
   padding: $gl-padding;
   margin-bottom: 0;
   border-top: 1px solid $white-dark;
   border-bottom: 1px solid $white-dark;
-  color: $gl-gray;
+  color: $gl-text-color;
 
   &.oneline-block {
     line-height: 42px;
   }
 
   &.white {
-    background-color: white;
+    background-color: $white-light;
   }
 
   &.top-block {
@@ -87,7 +82,12 @@
   }
 
   .block-controls {
-    float: right;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-justify-content: flex-end;
+    justify-content: flex-end;
+    -webkit-flex: 1;
+    flex: 1;
 
     .control {
       float: left;
@@ -123,7 +123,7 @@
 
 .cover-block {
   text-align: center;
-  background: $background-color;
+  background: $gray-light;
   padding-top: 44px;
   position: relative;
 
@@ -140,11 +140,11 @@
   }
 
   .cover-title {
-    color: $gl-header-color;
+    color: $gl-text-color;
     font-size: 23px;
 
     h1 {
-      color: $gl-gray-dark;
+      color: $gl-text-color;
       margin-bottom: 6px;
       font-size: 23px;
     }
@@ -158,7 +158,7 @@
 
     p {
       padding: 0 $gl-padding;
-      color: #5c5d5e;
+      color: $gl-text-color;
     }
   }
 
@@ -216,7 +216,7 @@
       display: inline;
       font-weight: normal;
       font-size: 24px;
-      color: $gl-title-color;
+      color: $gl-text-color;
     }
   }
 }
@@ -229,7 +229,7 @@
   .controls {
     float: right;
     margin-top: 8px;
-    padding-bottom: 7px;
+    padding-bottom: 8px;
     border-bottom: 1px solid $border-color;
   }
 }
@@ -254,3 +254,51 @@
 .content-block-small {
   padding: 10px 0;
 }
+
+.empty-state {
+  margin: 100px 0 0;
+
+  .text-content {
+    max-width: 460px;
+    margin: 0 auto;
+    padding: $gl-padding;
+  }
+
+  .svg-content {
+    text-align: center;
+
+    svg {
+      max-width: 425px;
+      width: 100%;
+      padding: $gl-padding;
+    }
+  }
+
+  .emoji-icon {
+    display: inline-block;
+  }
+
+  .btn {
+    margin: $btn-side-margin $btn-side-margin 0 0;
+  }
+
+  @media(max-width: $screen-xs-max) {
+    margin-top: 50px;
+    text-align: center;
+
+    .btn {
+      width: 100%;
+    }
+  }
+
+  @media(min-width: $screen-xs-max) {
+    &.labels .text-content {
+      margin-top: 70px;
+    }
+  }
+}
+
+.flex-container-block {
+  display: -webkit-flex;
+  display: flex;
+}
diff --git a/app/assets/stylesheets/framework/broadcast-messages.scss b/app/assets/stylesheets/framework/broadcast-messages.scss
new file mode 100644
index 00000000000..9b54fb94cdc
--- /dev/null
+++ b/app/assets/stylesheets/framework/broadcast-messages.scss
@@ -0,0 +1,21 @@
+.broadcast-message {
+  @extend .alert-warning;
+  padding: 10px;
+  text-align: center;
+
+  div,
+  p {
+    display: inline;
+    margin: 0;
+
+    a {
+      color: inherit;
+      text-decoration: underline;
+    }
+  }
+}
+
+.broadcast-message-preview {
+  @extend .broadcast-message;
+  margin-bottom: 20px;
+}
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index ed21ad83a1c..4369ae78bde 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -1,12 +1,11 @@
 @mixin btn-default {
   border-radius: 3px;
   font-size: $gl-font-size;
-  font-weight: 500;
+  font-weight: 400;
   padding: $gl-vert-padding $gl-btn-padding;
 
   &:focus,
   &:active {
-    outline: none;
     background-color: $btn-active-gray;
     box-shadow: $gl-btn-active-background;
   }
@@ -16,7 +15,7 @@
   @include btn-default;
 }
 
-@mixin btn-outline($background, $text, $border, $hover-background, $hover-text, $hover-border) {
+@mixin btn-outline($background, $text, $border, $hover-background, $hover-text, $hover-border, $active-background, $active-border) {
   background-color: $background;
   color: $text;
   border-color: $border;
@@ -24,8 +23,14 @@
   &:hover,
   &:focus {
     background-color: $hover-background;
-    color: $hover-text;
     border-color: $hover-border;
+    color: $hover-text;
+  }
+
+  &:active {
+    background-color: $active-background;
+    border-color: $active-border;
+    color: $hover-text;
   }
 }
 
@@ -63,31 +68,27 @@
 }
 
 @mixin btn-green {
-  @include btn-color($green-light, $border-green-light, $green-normal, $border-green-normal, $green-dark, $border-green-dark, #fff);
+  @include btn-color($green-500, $green-600, $green-600, $green-700, $green-700, $green-800, $white-light);
 }
 
 @mixin btn-blue {
-  @include btn-color($blue-light, $border-blue-light, $blue-normal, $border-blue-normal, $blue-dark, $border-blue-dark, #fff);
-}
-
-@mixin btn-blue-medium {
-  @include btn-color($blue-medium-light, $border-blue-light, $blue-medium, $border-blue-normal, $blue-medium-dark, $border-blue-dark, #fff);
+  @include btn-color($blue-500, $blue-600, $blue-600, $blue-700, $blue-700, $blue-800, $white-light);
 }
 
 @mixin btn-orange {
-  @include btn-color($orange-light, $border-orange-light, $orange-normal, $border-orange-normal, $orange-dark, $border-orange-dark, #fff);
+  @include btn-color($orange-500, $orange-600, $orange-600, $orange-700, $orange-700, $orange-800, $white-light);
 }
 
 @mixin btn-red {
-  @include btn-color($red-light, $border-red-light, $red-normal, $border-red-normal, $red-dark, $border-red-dark, #fff);
+  @include btn-color($red-500, $red-600, $red-600, $red-700, $red-700, $red-800, $white-light);
 }
 
 @mixin btn-gray {
-  @include btn-color($gray-light, $border-gray-light, $gray-normal, $border-gray-light, $gray-dark, $border-gray-dark, $gl-gray-dark);
+  @include btn-color($gray-light, $border-gray-normal, $gray-normal, $border-gray-normal, $gray-dark, $border-gray-dark, $gl-text-color);
 }
 
 @mixin btn-white {
-  @include btn-color($white-light, $border-color, $white-normal, $border-white-normal, $white-dark, $border-white-dark, $btn-white-active);
+  @include btn-color($white-light, $border-color, $white-normal, $border-white-normal, $white-dark, $border-gray-dark, $gl-text-color);
 }
 
 @mixin btn-with-margin {
@@ -140,7 +141,11 @@
     &.btn-new,
     &.btn-create,
     &.btn-save {
-      @include btn-outline($white-light, $green-normal, $green-normal, $green-light, $white-light, $green-light);
+      @include btn-outline($white-light, $green-600, $green-500, $green-500, $white-light, $green-600, $green-600, $green-700);
+    }
+
+    &.btn-remove {
+      @include btn-outline($white-light, $red-500, $red-500, $red-500, $white-light, $red-600, $red-600, $red-700);
     }
   }
 
@@ -148,11 +153,8 @@
     @include btn-gray;
   }
 
-  &.btn-primary {
-    @include btn-blue-medium;
-  }
-
   &.btn-info,
+  &.btn-primary,
   &.btn-register {
     @include btn-blue;
   }
@@ -162,11 +164,11 @@
   }
 
   &.btn-close {
-    @include btn-outline($white-light, $orange-normal, $orange-normal, $orange-light, $white-light, $orange-light);
+    @include btn-outline($white-light, $orange-600, $orange-500, $orange-500, $white-light, $orange-600, $orange-600, $orange-700);
   }
 
   &.btn-spam {
-    @include btn-outline($white-light, $red-normal, $red-normal, $red-light, $white-light, $red-light);
+    @include btn-outline($white-light, $red-500, $red-500, $red-500, $white-light, $red-600, $red-600, $red-700);
   }
 
   &.btn-danger,
@@ -196,7 +198,7 @@
   }
 
   .fa-caret-down,
-  .fa-caret-up {
+  .fa-chevron-down {
     margin-left: 5px;
   }
 
@@ -221,12 +223,19 @@
   }
 }
 
+.btn-terminal {
+  svg {
+    height: 14px;
+    width: 18px;
+  }
+}
+
 .btn-lg {
   padding: 12px 20px;
 }
 
 .btn-transparent {
-  color: $btn-transparent-color;
+  color: $gl-text-color-secondary;
   background-color: transparent;
   border: 0;
 
@@ -267,10 +276,6 @@
       outline: none;
     }
 
-    &:focus {
-      outline: none;
-    }
-
     &:active {
       outline: none;
     }
@@ -284,8 +289,8 @@
   .active {
     box-shadow: $gl-btn-active-background;
 
-    border: 1px solid #c6cacf !important;
-    background-color: #e4e7ed !important;
+    border: 1px solid $border-gray-dark !important;
+    background-color: $btn-active-gray-light !important;
   }
 }
 
@@ -304,29 +309,25 @@
   text-align: left;
   padding: 6px 16px;
   border-color: $border-color;
-  color: $btn-placeholder-gray;
-  background-color: $background-color;
+  color: $gray-darkest;
+  background-color: $gray-light;
 
   &:hover,
   &:active,
   &:focus {
     cursor: text;
     box-shadow: none;
-    border-color: $border-color;
-    color: $btn-placeholder-gray;
-    background-color: $background-color;
+    border-color: lighten($dropdown-input-focus-border, 20%);
+    color: $gray-darkest;
+    background-color: $gray-light;
   }
 }
 
-.btn-file-option {
-  background: linear-gradient(180deg, $white-light 25%, $gray-light 100%);
-}
-
 .btn-build {
   margin-left: 10px;
 
   i {
-    color: $gl-icon-color;
+    color: $gl-text-color-secondary;
   }
 }
 
@@ -339,14 +340,20 @@
 }
 
 .btn-static {
-  background-color: $background-color !important;
-  border: 1px solid lightgrey;
+  background-color: $gray-light !important;
+  border: 1px solid $border-gray-normal;
   cursor: default;
 
   &:active {
-    -moz-box-shadow: inset 0 0 0 white;
-    -webkit-box-shadow: inset 0 0 0 white;
-    box-shadow: inset 0 0 0 white;
+    -moz-box-shadow: inset 0 0 0 $white-light;
+    -webkit-box-shadow: inset 0 0 0 $white-light;
+    box-shadow: inset 0 0 0 $white-light;
+  }
+}
+
+.btn-inverted {
+  &-secondary {
+    @include btn-outline($white-light, $blue-500, $blue-500, $blue-500, $white-light, $blue-600, $blue-600, $blue-700);
   }
 }
 
@@ -355,3 +362,13 @@
     width: 100%;
   }
 }
+
+.btn-blank {
+  padding: 0;
+  background: transparent;
+  border: 0;
+
+  &:focus {
+    outline: 0;
+  }
+}
diff --git a/app/assets/stylesheets/framework/calendar.scss b/app/assets/stylesheets/framework/calendar.scss
index 8642b7530e2..9a0f7a14e57 100644
--- a/app/assets/stylesheets/framework/calendar.scss
+++ b/app/assets/stylesheets/framework/calendar.scss
@@ -1,13 +1,17 @@
 .calender-block {
   padding-left: 0;
   padding-right: 0;
+  border-top: 0;
+  direction: rtl;
 
-  @media (min-width: $screen-sm-min) and (max-width: $screen-lg-min) {
+  @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
     overflow-x: scroll;
   }
 }
 
 .user-calendar-activities {
+  direction: ltr;
+
   .str-truncated {
     max-width: 70%;
   }
@@ -28,13 +32,13 @@
 .user-contrib-cell {
   &:hover {
     cursor: pointer;
-    stroke: #000;
+    stroke: $black;
   }
 }
 
 .user-contrib-text {
   font-size: 12px;
-  fill: #959494;
+  fill: $calendar-user-contrib-text;
 }
 
 .calendar-hint {
@@ -42,3 +46,56 @@
   float: right;
   font-size: 12px;
 }
+
+.pika-single.gitlab-theme {
+  .pika-label {
+    color: $gl-text-color-secondary;
+    font-size: 14px;
+    font-weight: normal;
+  }
+
+  th {
+    padding: 2px 0;
+    color: $note-disabled-comment-color;
+    font-weight: normal;
+    text-transform: lowercase;
+    border-top: 1px solid $calendar-border-color;
+  }
+
+  abbr {
+    cursor: default;
+  }
+
+  td {
+    border: 1px solid $calendar-border-color;
+
+    &:first-child {
+      border-left: 0;
+    }
+
+    &:last-child {
+      border-right: 0;
+    }
+  }
+
+  .pika-day {
+    border-radius: 0;
+    background-color: $white-light;
+    text-align: center;
+  }
+
+  .is-today {
+    .pika-day {
+      color: inherit;
+      font-weight: normal;
+    }
+  }
+
+  .is-selected .pika-day,
+  .pika-day:hover,
+  .is-today .pika-day:hover {
+    background: $gl-primary;
+    color: $white-light;
+    box-shadow: none;
+  }
+}
diff --git a/app/assets/stylesheets/framework/callout.scss b/app/assets/stylesheets/framework/callout.scss
index f3b6ad88ad6..e0e46dd73af 100644
--- a/app/assets/stylesheets/framework/callout.scss
+++ b/app/assets/stylesheets/framework/callout.scss
@@ -11,7 +11,7 @@
   padding: $gl-padding;
   border-left: 3px solid $border-color;
   color: $text-color;
-  background: $background-color;
+  background: $gray-light;
 }
 
 .bs-callout h4 {
@@ -25,25 +25,25 @@
 
 /* Variations */
 .bs-callout-danger {
-  background-color: #fdf7f7;
-  border-color: #eed3d7;
-  color: #b94a48;
+  background-color: $callout-danger-bg;
+  border-color: $callout-danger-border;
+  color: $callout-danger-color;
 }
 
 .bs-callout-warning {
-  background-color: #faf8f0;
-  border-color: #faebcc;
-  color: #8a6d3b;
+  background-color: $callout-warning-bg;
+  border-color: $callout-warning-border;
+  color: $callout-warning-color;
 }
 
 .bs-callout-info {
-  background-color: #f4f8fa;
-  border-color: #bce8f1;
-  color: #34789a;
+  background-color: $callout-info-bg;
+  border-color: $callout-info-border;
+  color: $callout-info-color;
 }
 
 .bs-callout-success {
-  background-color: #dff0d8;
-  border-color: #5ca64d;
-  color: #3c763d;
+  background-color: $callout-success-bg;
+  border-color: $callout-success-border;
+  color: $callout-success-color;
 }
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 5c6f054bf33..6a7cc23c5d1 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -1,9 +1,9 @@
 /** COLORS **/
-.cgray { color: $gl-gray; }
-.clgray { color: #bbb; }
-.cred { color: $gl-text-red; }
-.cgreen { color: $gl-text-green; }
-.cdark { color: #444; }
+.cgray { color: $common-gray; }
+.clgray { color: $common-gray-light; }
+.cred { color: $common-red; }
+.cgreen { color: $common-green; }
+.cdark { color: $common-gray-dark; }
 
 /** COMMON CLASSES **/
 .prepend-top-0 { margin-top: 0; }
@@ -26,15 +26,16 @@
 .append-bottom-default { margin-bottom: $gl-padding; }
 .inline { display: inline-block; }
 .center { text-align: center; }
+.vertical-align-middle { vertical-align: middle; }
 
 .underlined-link { text-decoration: underline; }
-.hint { font-style: italic; color: #999; }
-.light { color: $gl-gray; }
+.hint { font-style: italic; color: $hint-color; }
+.light { color: $common-gray; }
 .lighter { color: $gl-gray-light; }
 
 .slead {
-  color: $gl-gray;
-  font-size: 15px;
+  color: $common-gray;
+  font-size: 14px;
   margin-bottom: 12px;
   font-weight: normal;
   line-height: 24px;
@@ -53,21 +54,38 @@ pre {
   }
 
   &.well-pre {
-    border: 1px solid #eee;
+    border: 1px solid $well-pre-bg;
     background: $gray-light;
     border-radius: 0;
-    color: #555;
+    color: $well-pre-color;
+  }
+
+  &.wrap {
+    word-break: break-word;
+    white-space: pre-wrap;
   }
 }
 
 hr {
   margin: $gl-padding 0;
+  border-top: 1px solid darken($gray-normal, 8%);
 }
 
 .str-truncated {
   @include str-truncated;
 }
 
+.block-truncated {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  > div,
+  .str-truncated {
+    display: inline;
+  }
+}
+
 .item-title { font-weight: 600; }
 
 /** FLASH message **/
@@ -88,14 +106,14 @@ table a code {
 .loading {
   margin: 20px auto;
   height: 40px;
-  color: #555;
+  color: $loading-color;
   font-size: 32px;
   text-align: center;
 }
 
 span.update-author {
   display: block;
-  color: #999;
+  color: $update-author-color;
   font-weight: normal;
   font-style: italic;
 
@@ -106,7 +124,7 @@ span.update-author {
 }
 
 .user-mention {
-  color: #2fa0bb;
+  color: $user-mention-color;
   font-weight: bold;
 }
 
@@ -115,7 +133,7 @@ span.update-author {
 }
 
 p.time {
-  color: #999;
+  color: $time-color;
   font-size: 90%;
   margin: 30px 3px 3px 2px;
 }
@@ -151,7 +169,7 @@ li.note {
 
 .project_member_show {
   td:first-child {
-    color: #aaa;
+    color: $project-member-show-color;
   }
 }
 
@@ -177,7 +195,7 @@ li.note {
   margin-top: 40px;
 
   pre {
-    background: white;
+    background: $white-light;
     border: none;
     font-size: 12px;
   }
@@ -185,12 +203,12 @@ li.note {
 
 .error-message {
   padding: 10px;
-  background: #c67;
+  background: $error-bg;
   margin: 0;
-  color: #fff;
+  color: $white-light;
 
   a {
-    color: #fff;
+    color: $white-light;
     text-decoration: underline;
   }
 }
@@ -198,22 +216,22 @@ li.note {
 .browser-alert {
   padding: 10px;
   text-align: center;
-  background: #c67;
-  color: #fff;
+  background: $error-bg;
+  color: $white-light;
   font-weight: bold;
 
   a {
-    color: #fff;
+    color: $white-light;
     text-decoration: underline;
   }
 }
 
 .warning_message {
-  border-left: 4px solid #ed9;
-  color: #b90;
+  border-left: 4px solid $warning-message-border;
+  color: $warning-message-color;
   padding: 10px;
   margin-bottom: 10px;
-  background: #ffffe6;
+  background: $warning-message-bg;
   padding-left: 20px;
 
   &.centered {
@@ -223,7 +241,7 @@ li.note {
 
 .gitlab-promo {
   a {
-    color: #aaa;
+    color: $gl-promo-color;
     margin-right: 30px;
   }
 }
@@ -236,6 +254,8 @@ li.note {
   .progress {
     margin-bottom: 0;
     margin-top: 4px;
+    box-shadow: none;
+    background-color: $border-gray-light;
   }
 }
 
@@ -246,7 +266,7 @@ li.note {
         position: relative;
         top: 2px;
         left: 5px;
-        color: #666;
+        color: $control-group-descr-color;
       }
     }
   }
@@ -256,6 +276,7 @@ img.emoji {
   height: 20px;
   vertical-align: top;
   width: 20px;
+  margin-top: 1px;
 }
 
 .chart {
@@ -271,7 +292,7 @@ img.emoji {
 
 table {
   td.permission-x {
-    background: #d9edf7 !important;
+    background: $table-permission-x-bg !important;
     text-align: center;
   }
 }
@@ -300,6 +321,10 @@ table {
 
 .well {
   margin-bottom: $gl-padding;
+
+  hr {
+    border-color: $gray-darker;
+  }
 }
 
 .search_box {
@@ -320,13 +345,13 @@ table {
 
   .username {
     font-size: 18px;
-    color: #666;
+    color: $username-color;
     margin-top: 8px;
   }
 
   .description {
     font-size: $gl-font-size;
-    color: #666;
+    color: $description-color;
     margin-top: 8px;
   }
 }
@@ -336,7 +361,7 @@ table {
 
   .profiler-button,
   .profiler-controls {
-    border-color: #eee !important;
+    border-color: $profiler-border !important;
   }
 }
 
@@ -376,4 +401,38 @@ table {
   border-top: 1px solid $border-color;
 }
 
-.hide-bottom-border { border-bottom: none !important; }
+.hide-bottom-border {
+  border-bottom: none !important;
+}
+
+.gl-accessibility {
+  &:focus {
+    top: 1px;
+    left: 1px;
+    width: auto;
+    height: 100%;
+    line-height: 50px;
+    padding: 0 10px;
+    clip: auto;
+    text-decoration: none;
+    color: $gl-text-color;
+    background: $gray-light;
+    z-index: 1;
+  }
+}
+
+.str-truncated {
+  &-60 {
+    @include str-truncated(60%);
+  }
+
+  &-100 {
+    @include str-truncated(100%);
+  }
+}
+
+.tooltip {
+  .tooltip-inner {
+    word-wrap: break-word;
+  }
+}
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 3e34ec98427..2ede47e9de6 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -8,6 +8,12 @@
   }
 }
 
+@mixin chevron-active {
+  .fa-chevron-down {
+    color: $gray-darkest;
+  }
+}
+
 .open {
   .dropdown-menu,
   .dropdown-menu-nav {
@@ -19,48 +25,30 @@
     }
   }
 
+  .dropdown-toggle,
   .dropdown-menu-toggle {
-    border-color: $dropdown-toggle-hover-border-color;
-
-    .fa {
-      color: $dropdown-toggle-hover-icon-color;
-    }
+    @include chevron-active;
+    border-color: $gray-darkest;
   }
 }
 
-.dropdown-menu-toggle {
-  position: relative;
-  width: 160px;
-  padding: 6px 20px 6px 10px;
-  background-color: $dropdown-toggle-bg;
-  color: $dropdown-toggle-color;
-  font-size: 15px;
+.dropdown-toggle {
+  padding: 6px 8px 6px 10px;
+  background-color: $white-light;
+  color: $gl-text-color;
+  font-size: 14px;
   text-align: left;
   border: 1px solid $border-color;
   border-radius: $border-radius-base;
-  outline: 0;
-  text-overflow: ellipsis;
   white-space: nowrap;
-  overflow: hidden;
-
-  .fa {
-    position: absolute;
-    top: 10px;
-    right: 8px;
-    color: $dropdown-toggle-icon-color;
 
-    &.fa-spinner {
-      font-size: 16px;
-      margin-top: -8px;
-    }
+  &[disabled] {
+    opacity: .65;
+    cursor: not-allowed;
   }
 
-  &:hover, {
-    border-color: $dropdown-toggle-hover-border-color;
-
-    .fa {
-      color: $dropdown-toggle-hover-icon-color;
-    }
+  &.no-outline {
+    outline: 0;
   }
 
   &.large {
@@ -83,6 +71,92 @@
     max-width: 100%;
     padding-right: 25px;
   }
+
+  .fa {
+    color: $gray-darkest;
+  }
+
+  .fa-chevron-down {
+    font-size: $dropdown-chevron-size;
+    position: relative;
+    top: -3px;
+    margin-left: 5px;
+  }
+
+  &:hover {
+    @include chevron-active;
+    border-color: $gray-darkest;
+  }
+
+  &:focus:active {
+    @include chevron-active;
+    border-color: $dropdown-toggle-active-border-color;
+  }
+}
+
+.dropdown-menu-toggle {
+  @extend .dropdown-toggle;
+  padding-right: 25px;
+  position: relative;
+  width: 163px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+
+  .fa {
+    position: absolute;
+
+    &.fa-spinner {
+      font-size: 16px;
+      margin-top: -3px;
+    }
+  }
+
+  .fa-chevron-down,
+  .fa-spinner {
+    position: absolute;
+    top: 11px;
+    right: 8px;
+  }
+}
+
+@mixin dropdown-link {
+  display: block;
+  position: relative;
+  padding: 5px 8px;
+  color: $gl-text-color;
+  line-height: initial;
+  text-overflow: ellipsis;
+  border-radius: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+
+  &:hover,
+  &:focus,
+  &.is-focused {
+    background-color: $dropdown-link-hover-bg;
+    text-decoration: none;
+
+    .badge {
+      background-color: darken($dropdown-link-hover-bg, 5%);
+    }
+  }
+
+  &.dropdown-menu-empty-link {
+    &.is-focused {
+      background-color: $dropdown-empty-row-bg;
+    }
+  }
+
+  &.dropdown-menu-user-link {
+    line-height: 16px;
+  }
+
+  .icon-play {
+    fill: $gl-text-color-secondary;
+    margin-right: 6px;
+    height: 12px;
+    width: 11px;
+  }
 }
 
 .dropdown-menu,
@@ -92,17 +166,21 @@
   top: 100%;
   left: 0;
   z-index: 9;
-  width: 240px;
+  min-width: 240px;
   margin-top: 2px;
   margin-bottom: 0;
-  font-size: 15px;
+  font-size: 14px;
   font-weight: normal;
   padding: 8px 0;
-  background-color: $dropdown-bg;
+  background-color: $white-light;
   border: 1px solid $dropdown-border-color;
   border-radius: $border-radius-base;
   box-shadow: 0 2px 4px $dropdown-shadow-color;
 
+  .filtered-search-input-container & {
+    max-width: 280px;
+  }
+
   &.is-loading {
     .dropdown-content {
       display: none;
@@ -121,12 +199,12 @@
   li {
     text-align: left;
     list-style: none;
-    padding: 0 8px;
+    padding: 0 10px;
   }
 
   .divider {
     height: 1px;
-    margin: 8px;
+    margin: 6px 10px;
     padding: 0;
     background-color: $dropdown-divider-color;
   }
@@ -140,47 +218,16 @@
   }
 
   a {
-    display: block;
-    position: relative;
-    padding: 5px 8px;
-    color: $dropdown-link-color;
-    line-height: initial;
-    text-overflow: ellipsis;
-    border-radius: 2px;
-    white-space: nowrap;
-    overflow: hidden;
-
-    &:hover,
-    &:focus,
-    &.is-focused {
-      background-color: $dropdown-link-hover-bg;
-      text-decoration: none;
-      outline: 0;
-    }
-
-    &.dropdown-menu-empty-link {
-      &.is-focused {
-        background-color: $dropdown-empty-row-bg;
-      }
-    }
-
-    &.dropdown-menu-user-link {
-      line-height: 16px;
-    }
-
-    .icon-play {
-      fill: $table-text-gray;
-      margin-right: 6px;
-      height: 12px;
-      width: 11px;
-    }
+    @include dropdown-link;
   }
 
   .dropdown-header {
-    color: $dropdown-header-color;
+    color: $gl-text-color;
     font-size: 13px;
+    font-weight: 600;
     line-height: 22px;
-    padding: 0 10px;
+    text-transform: capitalize;
+    padding: 0 16px;
   }
 
   .separator + .dropdown-header {
@@ -190,10 +237,21 @@
   .unclickable {
     cursor: not-allowed;
     padding: 5px 8px;
-    color: $dropdown-header-color;
+    color: $gl-text-color-secondary;
+  }
+
+  .badge {
+    position: absolute;
+    right: 8px;
+    top: 5px;
   }
 }
 
+.dropdown-menu-drop-up {
+  top: auto;
+  bottom: 100%;
+}
+
 .dropdown-menu-large {
   width: 340px;
 }
@@ -272,14 +330,17 @@
 
 .dropdown-menu-selectable {
   a {
-    padding-left: 25px;
+    padding-left: 26px;
 
     &.is-indeterminate,
     &.is-active {
+      font-weight: 600;
+      color: $gl-text-color;
+
       &::before {
         position: absolute;
-        left: 5px;
-        top: 8px;
+        left: 6px;
+        top: 6px;
         font: normal normal normal 14px/1 FontAwesome;
         font-size: inherit;
         text-rendering: auto;
@@ -301,7 +362,7 @@
 
 .dropdown-title {
   position: relative;
-  padding: 0 25px 10px;
+  padding: 2px 25px 10px;
   margin: 0 10px 10px;
   font-weight: 600;
   line-height: 1;
@@ -331,7 +392,7 @@
   right: 5px;
   width: 20px;
   height: 20px;
-  top: -3px;
+  top: -1px;
 }
 
 .dropdown-menu-back {
@@ -348,7 +409,7 @@
     position: absolute;
     top: 10px;
     right: 20px;
-    color: #c7c7c7;
+    color: $dropdown-input-fa-color;
     font-size: 12px;
     pointer-events: none;
   }
@@ -464,135 +525,32 @@
     max-height: 230px;
   }
 
-  .ui-widget {
-    table {
-      margin: 0;
-    }
-
-    &.ui-datepicker-inline {
-      padding: 0 10px;
-      border: 0;
-      width: 100%;
-    }
-
-    .ui-datepicker-header {
-      padding: 0 8px 10px;
-      border: 0;
-
-      .ui-icon {
-        background: none;
-        font-size: 20px;
-        text-indent: 0;
-
-        &::before {
-          display: block;
-          position: relative;
-          top: -2px;
-          color: $dropdown-title-btn-color;
-          font: normal normal normal 14px/1 FontAwesome;
-          font-size: inherit;
-          text-rendering: auto;
-          -webkit-font-smoothing: antialiased;
-          -moz-osx-font-smoothing: grayscale;
-        }
-      }
-    }
-
-    .ui-datepicker-calendar {
-      .ui-state-hover,
-      .ui-state-active {
-        color: #fff;
-        border: 0;
-      }
-    }
-
-    .ui-datepicker-prev,
-    .ui-datepicker-next {
-      top: 0;
-      height: 15px;
-      cursor: pointer;
-
-      &:hover {
-        background-color: transparent;
-        border: 0;
-
-        .ui-icon::before {
-          color: $md-link-color;
-        }
-      }
-    }
-
-    .ui-datepicker-prev {
-      left: 0;
-
-      .ui-icon::before {
-        content: '\f104';
-        text-align: left;
-      }
-    }
-
-    .ui-datepicker-next {
-      right: 0;
-
-      .ui-icon::before {
-        content: '\f105';
-        text-align: right;
-      }
-    }
-
-    td {
-      padding: 0;
-      border: 1px solid $calendar-border-color;
-
-      &:first-child {
-        border-left: 0;
-      }
-
-      &:last-child {
-        border-right: 0;
-      }
-
-      a {
-        line-height: 17px;
-        border: 0;
-        border-radius: 0;
-      }
-    }
-
-    .ui-datepicker-title {
-      color: $gl-gray;
-      font-size: 15px;
-      line-height: 1;
-      font-weight: normal;
-    }
-  }
-
-  th {
-    padding: 2px 0;
-    color: $calendar-header-color;
-    font-weight: normal;
-    text-transform: lowercase;
-    border-top: 1px solid $calendar-border-color;
+  .pika-single {
+    position: relative!important;
+    top: 0!important;
+    border: 0;
+    box-shadow: none;
   }
 
-  .ui-datepicker-unselectable {
-    background-color: $calendar-unselectable-bg;
+  .pika-lendar {
+    margin-top: -5px;
+    margin-bottom: 0;
   }
 }
 
 .dropdown-menu-inner-title {
   display: block;
-  color: $gl-title-color;
+  color: $gl-text-color;
   font-weight: 600;
 }
 
 .dropdown-menu-inner-content {
   display: block;
-  color: $gl-placeholder-color;
+  color: $gl-text-color-secondary;
 }
 
 .dropdown-toggle-text {
   &.is-default {
-    color: $gl-placeholder-color;
+    color: $gl-text-color-secondary;
   }
 }
diff --git a/app/assets/stylesheets/framework/emoji-sprites.scss b/app/assets/stylesheets/framework/emoji-sprites.scss
new file mode 100644
index 00000000000..925415f84b1
--- /dev/null
+++ b/app/assets/stylesheets/framework/emoji-sprites.scss
@@ -0,0 +1,1811 @@
+.emoji-zzz { background-position: 0 0; }
+.emoji-1234 { background-position: -20px 0; }
+.emoji-1F627 { background-position: 0 -20px; }
+.emoji-8ball { background-position: -20px -20px; }
+.emoji-a { background-position: -40px 0; }
+.emoji-ab { background-position: -40px -20px; }
+.emoji-abc { background-position: 0 -40px; }
+.emoji-abcd { background-position: -20px -40px; }
+.emoji-accept { background-position: -40px -40px; }
+.emoji-aerial_tramway { background-position: -60px 0; }
+.emoji-airplane { background-position: -60px -20px; }
+.emoji-airplane_arriving { background-position: -60px -40px; }
+.emoji-airplane_departure { background-position: 0 -60px; }
+.emoji-airplane_small { background-position: -20px -60px; }
+.emoji-alarm_clock { background-position: -40px -60px; }
+.emoji-alembic { background-position: -60px -60px; }
+.emoji-alien { background-position: -80px 0; }
+.emoji-ambulance { background-position: -80px -20px; }
+.emoji-amphora { background-position: -80px -40px; }
+.emoji-anchor { background-position: -80px -60px; }
+.emoji-angel { background-position: 0 -80px; }
+.emoji-angel_tone1 { background-position: -20px -80px; }
+.emoji-angel_tone2 { background-position: -40px -80px; }
+.emoji-angel_tone3 { background-position: -60px -80px; }
+.emoji-angel_tone4 { background-position: -80px -80px; }
+.emoji-angel_tone5 { background-position: -100px 0; }
+.emoji-anger { background-position: -100px -20px; }
+.emoji-anger_right { background-position: -100px -40px; }
+.emoji-angry { background-position: -100px -60px; }
+.emoji-ant { background-position: -100px -80px; }
+.emoji-apple { background-position: 0 -100px; }
+.emoji-aquarius { background-position: -20px -100px; }
+.emoji-aries { background-position: -40px -100px; }
+.emoji-arrow_backward { background-position: -60px -100px; }
+.emoji-arrow_double_down { background-position: -80px -100px; }
+.emoji-arrow_double_up { background-position: -100px -100px; }
+.emoji-arrow_down { background-position: -120px 0; }
+.emoji-arrow_down_small { background-position: -120px -20px; }
+.emoji-arrow_forward { background-position: -120px -40px; }
+.emoji-arrow_heading_down { background-position: -120px -60px; }
+.emoji-arrow_heading_up { background-position: -120px -80px; }
+.emoji-arrow_left { background-position: -120px -100px; }
+.emoji-arrow_lower_left { background-position: 0 -120px; }
+.emoji-arrow_lower_right { background-position: -20px -120px; }
+.emoji-arrow_right { background-position: -40px -120px; }
+.emoji-arrow_right_hook { background-position: -60px -120px; }
+.emoji-arrow_up { background-position: -80px -120px; }
+.emoji-arrow_up_down { background-position: -100px -120px; }
+.emoji-arrow_up_small { background-position: -120px -120px; }
+.emoji-arrow_upper_left { background-position: -140px 0; }
+.emoji-arrow_upper_right { background-position: -140px -20px; }
+.emoji-arrows_clockwise { background-position: -140px -40px; }
+.emoji-arrows_counterclockwise { background-position: -140px -60px; }
+.emoji-art { background-position: -140px -80px; }
+.emoji-articulated_lorry { background-position: -140px -100px; }
+.emoji-asterisk { background-position: -140px -120px; }
+.emoji-astonished { background-position: 0 -140px; }
+.emoji-athletic_shoe { background-position: -20px -140px; }
+.emoji-atm { background-position: -40px -140px; }
+.emoji-atom { background-position: -60px -140px; }
+.emoji-avocado { background-position: -80px -140px; }
+.emoji-b { background-position: -100px -140px; }
+.emoji-baby { background-position: -120px -140px; }
+.emoji-baby_bottle { background-position: -140px -140px; }
+.emoji-baby_chick { background-position: -160px 0; }
+.emoji-baby_symbol { background-position: -160px -20px; }
+.emoji-baby_tone1 { background-position: -160px -40px; }
+.emoji-baby_tone2 { background-position: -160px -60px; }
+.emoji-baby_tone3 { background-position: -160px -80px; }
+.emoji-baby_tone4 { background-position: -160px -100px; }
+.emoji-baby_tone5 { background-position: -160px -120px; }
+.emoji-back { background-position: -160px -140px; }
+.emoji-bacon { background-position: 0 -160px; }
+.emoji-badminton { background-position: -20px -160px; }
+.emoji-baggage_claim { background-position: -40px -160px; }
+.emoji-balloon { background-position: -60px -160px; }
+.emoji-ballot_box { background-position: -80px -160px; }
+.emoji-ballot_box_with_check { background-position: -100px -160px; }
+.emoji-bamboo { background-position: -120px -160px; }
+.emoji-banana { background-position: -140px -160px; }
+.emoji-bangbang { background-position: -160px -160px; }
+.emoji-bank { background-position: -180px 0; }
+.emoji-bar_chart { background-position: -180px -20px; }
+.emoji-barber { background-position: -180px -40px; }
+.emoji-baseball { background-position: -180px -60px; }
+.emoji-basketball { background-position: -180px -80px; }
+.emoji-basketball_player { background-position: -180px -100px; }
+.emoji-basketball_player_tone1 { background-position: -180px -120px; }
+.emoji-basketball_player_tone2 { background-position: -180px -140px; }
+.emoji-basketball_player_tone3 { background-position: -180px -160px; }
+.emoji-basketball_player_tone4 { background-position: 0 -180px; }
+.emoji-basketball_player_tone5 { background-position: -20px -180px; }
+.emoji-bat { background-position: -40px -180px; }
+.emoji-bath { background-position: -60px -180px; }
+.emoji-bath_tone1 { background-position: -80px -180px; }
+.emoji-bath_tone2 { background-position: -100px -180px; }
+.emoji-bath_tone3 { background-position: -120px -180px; }
+.emoji-bath_tone4 { background-position: -140px -180px; }
+.emoji-bath_tone5 { background-position: -160px -180px; }
+.emoji-bathtub { background-position: -180px -180px; }
+.emoji-battery { background-position: -200px 0; }
+.emoji-beach { background-position: -200px -20px; }
+.emoji-beach_umbrella { background-position: -200px -40px; }
+.emoji-bear { background-position: -200px -60px; }
+.emoji-bed { background-position: -200px -80px; }
+.emoji-bee { background-position: -200px -100px; }
+.emoji-beer { background-position: -200px -120px; }
+.emoji-beers { background-position: -200px -140px; }
+.emoji-beetle { background-position: -200px -160px; }
+.emoji-beginner { background-position: -200px -180px; }
+.emoji-bell { background-position: 0 -200px; }
+.emoji-bellhop { background-position: -20px -200px; }
+.emoji-bento { background-position: -40px -200px; }
+.emoji-bicyclist { background-position: -60px -200px; }
+.emoji-bicyclist_tone1 { background-position: -80px -200px; }
+.emoji-bicyclist_tone2 { background-position: -100px -200px; }
+.emoji-bicyclist_tone3 { background-position: -120px -200px; }
+.emoji-bicyclist_tone4 { background-position: -140px -200px; }
+.emoji-bicyclist_tone5 { background-position: -160px -200px; }
+.emoji-bike { background-position: -180px -200px; }
+.emoji-bikini { background-position: -200px -200px; }
+.emoji-biohazard { background-position: -220px 0; }
+.emoji-bird { background-position: -220px -20px; }
+.emoji-birthday { background-position: -220px -40px; }
+.emoji-black_circle { background-position: -220px -60px; }
+.emoji-black_heart { background-position: -220px -80px; }
+.emoji-black_joker { background-position: -220px -100px; }
+.emoji-black_large_square { background-position: -220px -120px; }
+.emoji-black_medium_small_square { background-position: -220px -140px; }
+.emoji-black_medium_square { background-position: -220px -160px; }
+.emoji-black_nib { background-position: -220px -180px; }
+.emoji-black_small_square { background-position: -220px -200px; }
+.emoji-black_square_button { background-position: 0 -220px; }
+.emoji-blossom { background-position: -20px -220px; }
+.emoji-blowfish { background-position: -40px -220px; }
+.emoji-blue_book { background-position: -60px -220px; }
+.emoji-blue_car { background-position: -80px -220px; }
+.emoji-blue_heart { background-position: -100px -220px; }
+.emoji-blush { background-position: -120px -220px; }
+.emoji-boar { background-position: -140px -220px; }
+.emoji-bomb { background-position: -160px -220px; }
+.emoji-book { background-position: -180px -220px; }
+.emoji-bookmark { background-position: -200px -220px; }
+.emoji-bookmark_tabs { background-position: -220px -220px; }
+.emoji-books { background-position: -240px 0; }
+.emoji-boom { background-position: -240px -20px; }
+.emoji-boot { background-position: -240px -40px; }
+.emoji-bouquet { background-position: -240px -60px; }
+.emoji-bow { background-position: -240px -80px; }
+.emoji-bow_and_arrow { background-position: -240px -100px; }
+.emoji-bow_tone1 { background-position: -240px -120px; }
+.emoji-bow_tone2 { background-position: -240px -140px; }
+.emoji-bow_tone3 { background-position: -240px -160px; }
+.emoji-bow_tone4 { background-position: -240px -180px; }
+.emoji-bow_tone5 { background-position: -240px -200px; }
+.emoji-bowling { background-position: -240px -220px; }
+.emoji-boxing_glove { background-position: 0 -240px; }
+.emoji-boy { background-position: -20px -240px; }
+.emoji-boy_tone1 { background-position: -40px -240px; }
+.emoji-boy_tone2 { background-position: -60px -240px; }
+.emoji-boy_tone3 { background-position: -80px -240px; }
+.emoji-boy_tone4 { background-position: -100px -240px; }
+.emoji-boy_tone5 { background-position: -120px -240px; }
+.emoji-bread { background-position: -140px -240px; }
+.emoji-bride_with_veil { background-position: -160px -240px; }
+.emoji-bride_with_veil_tone1 { background-position: -180px -240px; }
+.emoji-bride_with_veil_tone2 { background-position: -200px -240px; }
+.emoji-bride_with_veil_tone3 { background-position: -220px -240px; }
+.emoji-bride_with_veil_tone4 { background-position: -240px -240px; }
+.emoji-bride_with_veil_tone5 { background-position: -260px 0; }
+.emoji-bridge_at_night { background-position: -260px -20px; }
+.emoji-briefcase { background-position: -260px -40px; }
+.emoji-broken_heart { background-position: -260px -60px; }
+.emoji-bug { background-position: -260px -80px; }
+.emoji-bulb { background-position: -260px -100px; }
+.emoji-bullettrain_front { background-position: -260px -120px; }
+.emoji-bullettrain_side { background-position: -260px -140px; }
+.emoji-burrito { background-position: -260px -160px; }
+.emoji-bus { background-position: -260px -180px; }
+.emoji-busstop { background-position: -260px -200px; }
+.emoji-bust_in_silhouette { background-position: -260px -220px; }
+.emoji-busts_in_silhouette { background-position: -260px -240px; }
+.emoji-butterfly { background-position: 0 -260px; }
+.emoji-cactus { background-position: -20px -260px; }
+.emoji-cake { background-position: -40px -260px; }
+.emoji-calendar { background-position: -60px -260px; }
+.emoji-calendar_spiral { background-position: -80px -260px; }
+.emoji-call_me { background-position: -100px -260px; }
+.emoji-call_me_tone1 { background-position: -120px -260px; }
+.emoji-call_me_tone2 { background-position: -140px -260px; }
+.emoji-call_me_tone3 { background-position: -160px -260px; }
+.emoji-call_me_tone4 { background-position: -180px -260px; }
+.emoji-call_me_tone5 { background-position: -200px -260px; }
+.emoji-calling { background-position: -220px -260px; }
+.emoji-camel { background-position: -240px -260px; }
+.emoji-camera { background-position: -260px -260px; }
+.emoji-camera_with_flash { background-position: -280px 0; }
+.emoji-camping { background-position: -280px -20px; }
+.emoji-cancer { background-position: -280px -40px; }
+.emoji-candle { background-position: -280px -60px; }
+.emoji-candy { background-position: -280px -80px; }
+.emoji-canoe { background-position: -280px -100px; }
+.emoji-capital_abcd { background-position: -280px -120px; }
+.emoji-capricorn { background-position: -280px -140px; }
+.emoji-card_box { background-position: -280px -160px; }
+.emoji-card_index { background-position: -280px -180px; }
+.emoji-carousel_horse { background-position: -280px -200px; }
+.emoji-carrot { background-position: -280px -220px; }
+.emoji-cartwheel { background-position: -280px -240px; }
+.emoji-cartwheel_tone1 { background-position: -280px -260px; }
+.emoji-cartwheel_tone2 { background-position: 0 -280px; }
+.emoji-cartwheel_tone3 { background-position: -20px -280px; }
+.emoji-cartwheel_tone4 { background-position: -40px -280px; }
+.emoji-cartwheel_tone5 { background-position: -60px -280px; }
+.emoji-cat { background-position: -80px -280px; }
+.emoji-cat2 { background-position: -100px -280px; }
+.emoji-cd { background-position: -120px -280px; }
+.emoji-chains { background-position: -140px -280px; }
+.emoji-champagne { background-position: -160px -280px; }
+.emoji-champagne_glass { background-position: -180px -280px; }
+.emoji-chart { background-position: -200px -280px; }
+.emoji-chart_with_downwards_trend { background-position: -220px -280px; }
+.emoji-chart_with_upwards_trend { background-position: -240px -280px; }
+.emoji-checkered_flag { background-position: -260px -280px; }
+.emoji-cheese { background-position: -280px -280px; }
+.emoji-cherries { background-position: -300px 0; }
+.emoji-cherry_blossom { background-position: -300px -20px; }
+.emoji-chestnut { background-position: -300px -40px; }
+.emoji-chicken { background-position: -300px -60px; }
+.emoji-children_crossing { background-position: -300px -80px; }
+.emoji-chipmunk { background-position: -300px -100px; }
+.emoji-chocolate_bar { background-position: -300px -120px; }
+.emoji-christmas_tree { background-position: -300px -140px; }
+.emoji-church { background-position: -300px -160px; }
+.emoji-cinema { background-position: -300px -180px; }
+.emoji-circus_tent { background-position: -300px -200px; }
+.emoji-city_dusk { background-position: -300px -220px; }
+.emoji-city_sunset { background-position: -300px -240px; }
+.emoji-cityscape { background-position: -300px -260px; }
+.emoji-cl { background-position: -300px -280px; }
+.emoji-clap { background-position: 0 -300px; }
+.emoji-clap_tone1 { background-position: -20px -300px; }
+.emoji-clap_tone2 { background-position: -40px -300px; }
+.emoji-clap_tone3 { background-position: -60px -300px; }
+.emoji-clap_tone4 { background-position: -80px -300px; }
+.emoji-clap_tone5 { background-position: -100px -300px; }
+.emoji-clapper { background-position: -120px -300px; }
+.emoji-classical_building { background-position: -140px -300px; }
+.emoji-clipboard { background-position: -160px -300px; }
+.emoji-clock { background-position: -180px -300px; }
+.emoji-clock1 { background-position: -200px -300px; }
+.emoji-clock10 { background-position: -220px -300px; }
+.emoji-clock1030 { background-position: -240px -300px; }
+.emoji-clock11 { background-position: -260px -300px; }
+.emoji-clock1130 { background-position: -280px -300px; }
+.emoji-clock12 { background-position: -300px -300px; }
+.emoji-clock1230 { background-position: -320px 0; }
+.emoji-clock130 { background-position: -320px -20px; }
+.emoji-clock2 { background-position: -320px -40px; }
+.emoji-clock230 { background-position: -320px -60px; }
+.emoji-clock3 { background-position: -320px -80px; }
+.emoji-clock330 { background-position: -320px -100px; }
+.emoji-clock4 { background-position: -320px -120px; }
+.emoji-clock430 { background-position: -320px -140px; }
+.emoji-clock5 { background-position: -320px -160px; }
+.emoji-clock530 { background-position: -320px -180px; }
+.emoji-clock6 { background-position: -320px -200px; }
+.emoji-clock630 { background-position: -320px -220px; }
+.emoji-clock7 { background-position: -320px -240px; }
+.emoji-clock730 { background-position: -320px -260px; }
+.emoji-clock8 { background-position: -320px -280px; }
+.emoji-clock830 { background-position: -320px -300px; }
+.emoji-clock9 { background-position: 0 -320px; }
+.emoji-clock930 { background-position: -20px -320px; }
+.emoji-closed_book { background-position: -40px -320px; }
+.emoji-closed_lock_with_key { background-position: -60px -320px; }
+.emoji-closed_umbrella { background-position: -80px -320px; }
+.emoji-cloud { background-position: -100px -320px; }
+.emoji-cloud_lightning { background-position: -120px -320px; }
+.emoji-cloud_rain { background-position: -140px -320px; }
+.emoji-cloud_snow { background-position: -160px -320px; }
+.emoji-cloud_tornado { background-position: -180px -320px; }
+.emoji-clown { background-position: -200px -320px; }
+.emoji-clubs { background-position: -220px -320px; }
+.emoji-cocktail { background-position: -240px -320px; }
+.emoji-coffee { background-position: -260px -320px; }
+.emoji-coffin { background-position: -280px -320px; }
+.emoji-cold_sweat { background-position: -300px -320px; }
+.emoji-comet { background-position: -320px -320px; }
+.emoji-compression { background-position: -340px 0; }
+.emoji-computer { background-position: -340px -20px; }
+.emoji-confetti_ball { background-position: -340px -40px; }
+.emoji-confounded { background-position: -340px -60px; }
+.emoji-confused { background-position: -340px -80px; }
+.emoji-congratulations { background-position: -340px -100px; }
+.emoji-construction { background-position: -340px -120px; }
+.emoji-construction_site { background-position: -340px -140px; }
+.emoji-construction_worker { background-position: -340px -160px; }
+.emoji-construction_worker_tone1 { background-position: -340px -180px; }
+.emoji-construction_worker_tone2 { background-position: -340px -200px; }
+.emoji-construction_worker_tone3 { background-position: -340px -220px; }
+.emoji-construction_worker_tone4 { background-position: -340px -240px; }
+.emoji-construction_worker_tone5 { background-position: -340px -260px; }
+.emoji-control_knobs { background-position: -340px -280px; }
+.emoji-convenience_store { background-position: -340px -300px; }
+.emoji-cookie { background-position: -340px -320px; }
+.emoji-cooking { background-position: 0 -340px; }
+.emoji-cool { background-position: -20px -340px; }
+.emoji-cop { background-position: -40px -340px; }
+.emoji-cop_tone1 { background-position: -60px -340px; }
+.emoji-cop_tone2 { background-position: -80px -340px; }
+.emoji-cop_tone3 { background-position: -100px -340px; }
+.emoji-cop_tone4 { background-position: -120px -340px; }
+.emoji-cop_tone5 { background-position: -140px -340px; }
+.emoji-copyright { background-position: -160px -340px; }
+.emoji-corn { background-position: -180px -340px; }
+.emoji-couch { background-position: -200px -340px; }
+.emoji-couple { background-position: -220px -340px; }
+.emoji-couple_mm { background-position: -240px -340px; }
+.emoji-couple_with_heart { background-position: -260px -340px; }
+.emoji-couple_ww { background-position: -280px -340px; }
+.emoji-couplekiss { background-position: -300px -340px; }
+.emoji-cow { background-position: -320px -340px; }
+.emoji-cow2 { background-position: -340px -340px; }
+.emoji-cowboy { background-position: -360px 0; }
+.emoji-crab { background-position: -360px -20px; }
+.emoji-crayon { background-position: -360px -40px; }
+.emoji-credit_card { background-position: -360px -60px; }
+.emoji-crescent_moon { background-position: -360px -80px; }
+.emoji-cricket { background-position: -360px -100px; }
+.emoji-crocodile { background-position: -360px -120px; }
+.emoji-croissant { background-position: -360px -140px; }
+.emoji-cross { background-position: -360px -160px; }
+.emoji-crossed_flags { background-position: -360px -180px; }
+.emoji-crossed_swords { background-position: -360px -200px; }
+.emoji-crown { background-position: -360px -220px; }
+.emoji-cruise_ship { background-position: -360px -240px; }
+.emoji-cry { background-position: -360px -260px; }
+.emoji-crying_cat_face { background-position: -360px -280px; }
+.emoji-crystal_ball { background-position: -360px -300px; }
+.emoji-cucumber { background-position: -360px -320px; }
+.emoji-cupid { background-position: -360px -340px; }
+.emoji-curly_loop { background-position: 0 -360px; }
+.emoji-currency_exchange { background-position: -20px -360px; }
+.emoji-curry { background-position: -40px -360px; }
+.emoji-custard { background-position: -60px -360px; }
+.emoji-customs { background-position: -80px -360px; }
+.emoji-cyclone { background-position: -100px -360px; }
+.emoji-dagger { background-position: -120px -360px; }
+.emoji-dancer { background-position: -140px -360px; }
+.emoji-dancer_tone1 { background-position: -160px -360px; }
+.emoji-dancer_tone2 { background-position: -180px -360px; }
+.emoji-dancer_tone3 { background-position: -200px -360px; }
+.emoji-dancer_tone4 { background-position: -220px -360px; }
+.emoji-dancer_tone5 { background-position: -240px -360px; }
+.emoji-dancers { background-position: -260px -360px; }
+.emoji-dango { background-position: -280px -360px; }
+.emoji-dark_sunglasses { background-position: -300px -360px; }
+.emoji-dart { background-position: -320px -360px; }
+.emoji-dash { background-position: -340px -360px; }
+.emoji-date { background-position: -360px -360px; }
+.emoji-deciduous_tree { background-position: -380px 0; }
+.emoji-deer { background-position: -380px -20px; }
+.emoji-department_store { background-position: -380px -40px; }
+.emoji-desert { background-position: -380px -60px; }
+.emoji-desktop { background-position: -380px -80px; }
+.emoji-diamond_shape_with_a_dot_inside { background-position: -380px -100px; }
+.emoji-diamonds { background-position: -380px -120px; }
+.emoji-disappointed { background-position: -380px -140px; }
+.emoji-disappointed_relieved { background-position: -380px -160px; }
+.emoji-dividers { background-position: -380px -180px; }
+.emoji-dizzy { background-position: -380px -200px; }
+.emoji-dizzy_face { background-position: -380px -220px; }
+.emoji-do_not_litter { background-position: -380px -240px; }
+.emoji-dog { background-position: -380px -260px; }
+.emoji-dog2 { background-position: -380px -280px; }
+.emoji-dollar { background-position: -380px -300px; }
+.emoji-dolls { background-position: -380px -320px; }
+.emoji-dolphin { background-position: -380px -340px; }
+.emoji-door { background-position: -380px -360px; }
+.emoji-doughnut { background-position: 0 -380px; }
+.emoji-dove { background-position: -20px -380px; }
+.emoji-dragon { background-position: -40px -380px; }
+.emoji-dragon_face { background-position: -60px -380px; }
+.emoji-dress { background-position: -80px -380px; }
+.emoji-dromedary_camel { background-position: -100px -380px; }
+.emoji-drooling_face { background-position: -120px -380px; }
+.emoji-droplet { background-position: -140px -380px; }
+.emoji-drum { background-position: -160px -380px; }
+.emoji-duck { background-position: -180px -380px; }
+.emoji-dvd { background-position: -200px -380px; }
+.emoji-e-mail { background-position: -220px -380px; }
+.emoji-eagle { background-position: -240px -380px; }
+.emoji-ear { background-position: -260px -380px; }
+.emoji-ear_of_rice { background-position: -280px -380px; }
+.emoji-ear_tone1 { background-position: -300px -380px; }
+.emoji-ear_tone2 { background-position: -320px -380px; }
+.emoji-ear_tone3 { background-position: -340px -380px; }
+.emoji-ear_tone4 { background-position: -360px -380px; }
+.emoji-ear_tone5 { background-position: -380px -380px; }
+.emoji-earth_africa { background-position: -400px 0; }
+.emoji-earth_americas { background-position: -400px -20px; }
+.emoji-earth_asia { background-position: -400px -40px; }
+.emoji-egg { background-position: -400px -60px; }
+.emoji-eggplant { background-position: -400px -80px; }
+.emoji-eight { background-position: -400px -100px; }
+.emoji-eight_pointed_black_star { background-position: -400px -120px; }
+.emoji-eight_spoked_asterisk { background-position: -400px -140px; }
+.emoji-eject { background-position: -400px -160px; }
+.emoji-electric_plug { background-position: -400px -180px; }
+.emoji-elephant { background-position: -400px -200px; }
+.emoji-end { background-position: -400px -220px; }
+.emoji-envelope { background-position: -400px -240px; }
+.emoji-envelope_with_arrow { background-position: -400px -260px; }
+.emoji-euro { background-position: -400px -280px; }
+.emoji-european_castle { background-position: -400px -300px; }
+.emoji-european_post_office { background-position: -400px -320px; }
+.emoji-evergreen_tree { background-position: -400px -340px; }
+.emoji-exclamation { background-position: -400px -360px; }
+.emoji-expressionless { background-position: -400px -380px; }
+.emoji-eye { background-position: 0 -400px; }
+.emoji-eye_in_speech_bubble { background-position: -20px -400px; }
+.emoji-eyeglasses { background-position: -40px -400px; }
+.emoji-eyes { background-position: -60px -400px; }
+.emoji-face_palm { background-position: -80px -400px; }
+.emoji-face_palm_tone1 { background-position: -100px -400px; }
+.emoji-face_palm_tone2 { background-position: -120px -400px; }
+.emoji-face_palm_tone3 { background-position: -140px -400px; }
+.emoji-face_palm_tone4 { background-position: -160px -400px; }
+.emoji-face_palm_tone5 { background-position: -180px -400px; }
+.emoji-factory { background-position: -200px -400px; }
+.emoji-fallen_leaf { background-position: -220px -400px; }
+.emoji-family { background-position: -240px -400px; }
+.emoji-family_mmb { background-position: -260px -400px; }
+.emoji-family_mmbb { background-position: -280px -400px; }
+.emoji-family_mmg { background-position: -300px -400px; }
+.emoji-family_mmgb { background-position: -320px -400px; }
+.emoji-family_mmgg { background-position: -340px -400px; }
+.emoji-family_mwbb { background-position: -360px -400px; }
+.emoji-family_mwg { background-position: -380px -400px; }
+.emoji-family_mwgb { background-position: -400px -400px; }
+.emoji-family_mwgg { background-position: -420px 0; }
+.emoji-family_wwb { background-position: -420px -20px; }
+.emoji-family_wwbb { background-position: -420px -40px; }
+.emoji-family_wwg { background-position: -420px -60px; }
+.emoji-family_wwgb { background-position: -420px -80px; }
+.emoji-family_wwgg { background-position: -420px -100px; }
+.emoji-fast_forward { background-position: -420px -120px; }
+.emoji-fax { background-position: -420px -140px; }
+.emoji-fearful { background-position: -420px -160px; }
+.emoji-feet { background-position: -420px -180px; }
+.emoji-fencer { background-position: -420px -200px; }
+.emoji-ferris_wheel { background-position: -420px -220px; }
+.emoji-ferry { background-position: -420px -240px; }
+.emoji-field_hockey { background-position: -420px -260px; }
+.emoji-file_cabinet { background-position: -420px -280px; }
+.emoji-file_folder { background-position: -420px -300px; }
+.emoji-film_frames { background-position: -420px -320px; }
+.emoji-fingers_crossed { background-position: -420px -340px; }
+.emoji-fingers_crossed_tone1 { background-position: -420px -360px; }
+.emoji-fingers_crossed_tone2 { background-position: -420px -380px; }
+.emoji-fingers_crossed_tone3 { background-position: -420px -400px; }
+.emoji-fingers_crossed_tone4 { background-position: 0 -420px; }
+.emoji-fingers_crossed_tone5 { background-position: -20px -420px; }
+.emoji-fire { background-position: -40px -420px; }
+.emoji-fire_engine { background-position: -60px -420px; }
+.emoji-fireworks { background-position: -80px -420px; }
+.emoji-first_place { background-position: -100px -420px; }
+.emoji-first_quarter_moon { background-position: -120px -420px; }
+.emoji-first_quarter_moon_with_face { background-position: -140px -420px; }
+.emoji-fish { background-position: -160px -420px; }
+.emoji-fish_cake { background-position: -180px -420px; }
+.emoji-fishing_pole_and_fish { background-position: -200px -420px; }
+.emoji-fist { background-position: -220px -420px; }
+.emoji-fist_tone1 { background-position: -240px -420px; }
+.emoji-fist_tone2 { background-position: -260px -420px; }
+.emoji-fist_tone3 { background-position: -280px -420px; }
+.emoji-fist_tone4 { background-position: -300px -420px; }
+.emoji-fist_tone5 { background-position: -320px -420px; }
+.emoji-five { background-position: -340px -420px; }
+.emoji-flag_ac { background-position: -360px -420px; }
+.emoji-flag_ad { background-position: -380px -420px; }
+.emoji-flag_ae { background-position: -400px -420px; }
+.emoji-flag_af { background-position: -420px -420px; }
+.emoji-flag_ag { background-position: -440px 0; }
+.emoji-flag_ai { background-position: -440px -20px; }
+.emoji-flag_al { background-position: -440px -40px; }
+.emoji-flag_am { background-position: -440px -60px; }
+.emoji-flag_ao { background-position: -440px -80px; }
+.emoji-flag_aq { background-position: -440px -100px; }
+.emoji-flag_ar { background-position: -440px -120px; }
+.emoji-flag_as { background-position: -440px -140px; }
+.emoji-flag_at { background-position: -440px -160px; }
+.emoji-flag_au { background-position: -440px -180px; }
+.emoji-flag_aw { background-position: -440px -200px; }
+.emoji-flag_ax { background-position: -440px -220px; }
+.emoji-flag_az { background-position: -440px -240px; }
+.emoji-flag_ba { background-position: -440px -260px; }
+.emoji-flag_bb { background-position: -440px -280px; }
+.emoji-flag_bd { background-position: -440px -300px; }
+.emoji-flag_be { background-position: -440px -320px; }
+.emoji-flag_bf { background-position: -440px -340px; }
+.emoji-flag_bg { background-position: -440px -360px; }
+.emoji-flag_bh { background-position: -440px -380px; }
+.emoji-flag_bi { background-position: -440px -400px; }
+.emoji-flag_bj { background-position: -440px -420px; }
+.emoji-flag_bl { background-position: 0 -440px; }
+.emoji-flag_black { background-position: -20px -440px; }
+.emoji-flag_bm { background-position: -40px -440px; }
+.emoji-flag_bn { background-position: -60px -440px; }
+.emoji-flag_bo { background-position: -80px -440px; }
+.emoji-flag_bq { background-position: -100px -440px; }
+.emoji-flag_br { background-position: -120px -440px; }
+.emoji-flag_bs { background-position: -140px -440px; }
+.emoji-flag_bt { background-position: -160px -440px; }
+.emoji-flag_bv { background-position: -180px -440px; }
+.emoji-flag_bw { background-position: -200px -440px; }
+.emoji-flag_by { background-position: -220px -440px; }
+.emoji-flag_bz { background-position: -240px -440px; }
+.emoji-flag_ca { background-position: -260px -440px; }
+.emoji-flag_cc { background-position: -280px -440px; }
+.emoji-flag_cd { background-position: -300px -440px; }
+.emoji-flag_cf { background-position: -320px -440px; }
+.emoji-flag_cg { background-position: -340px -440px; }
+.emoji-flag_ch { background-position: -360px -440px; }
+.emoji-flag_ci { background-position: -380px -440px; }
+.emoji-flag_ck { background-position: -400px -440px; }
+.emoji-flag_cl { background-position: -420px -440px; }
+.emoji-flag_cm { background-position: -440px -440px; }
+.emoji-flag_cn { background-position: -460px 0; }
+.emoji-flag_co { background-position: -460px -20px; }
+.emoji-flag_cp { background-position: -460px -40px; }
+.emoji-flag_cr { background-position: -460px -60px; }
+.emoji-flag_cu { background-position: -460px -80px; }
+.emoji-flag_cv { background-position: -460px -100px; }
+.emoji-flag_cw { background-position: -460px -120px; }
+.emoji-flag_cx { background-position: -460px -140px; }
+.emoji-flag_cy { background-position: -460px -160px; }
+.emoji-flag_cz { background-position: -460px -180px; }
+.emoji-flag_de { background-position: -460px -200px; }
+.emoji-flag_dg { background-position: -460px -220px; }
+.emoji-flag_dj { background-position: -460px -240px; }
+.emoji-flag_dk { background-position: -460px -260px; }
+.emoji-flag_dm { background-position: -460px -280px; }
+.emoji-flag_do { background-position: -460px -300px; }
+.emoji-flag_dz { background-position: -460px -320px; }
+.emoji-flag_ea { background-position: -460px -340px; }
+.emoji-flag_ec { background-position: -460px -360px; }
+.emoji-flag_ee { background-position: -460px -380px; }
+.emoji-flag_eg { background-position: -460px -400px; }
+.emoji-flag_eh { background-position: -460px -420px; }
+.emoji-flag_er { background-position: -460px -440px; }
+.emoji-flag_es { background-position: 0 -460px; }
+.emoji-flag_et { background-position: -20px -460px; }
+.emoji-flag_eu { background-position: -40px -460px; }
+.emoji-flag_fi { background-position: -60px -460px; }
+.emoji-flag_fj { background-position: -80px -460px; }
+.emoji-flag_fk { background-position: -100px -460px; }
+.emoji-flag_fm { background-position: -120px -460px; }
+.emoji-flag_fo { background-position: -140px -460px; }
+.emoji-flag_fr { background-position: -160px -460px; }
+.emoji-flag_ga { background-position: -180px -460px; }
+.emoji-flag_gb { background-position: -200px -460px; }
+.emoji-flag_gd { background-position: -220px -460px; }
+.emoji-flag_ge { background-position: -240px -460px; }
+.emoji-flag_gf { background-position: -260px -460px; }
+.emoji-flag_gg { background-position: -280px -460px; }
+.emoji-flag_gh { background-position: -300px -460px; }
+.emoji-flag_gi { background-position: -320px -460px; }
+.emoji-flag_gl { background-position: -340px -460px; }
+.emoji-flag_gm { background-position: -360px -460px; }
+.emoji-flag_gn { background-position: -380px -460px; }
+.emoji-flag_gp { background-position: -400px -460px; }
+.emoji-flag_gq { background-position: -420px -460px; }
+.emoji-flag_gr { background-position: -440px -460px; }
+.emoji-flag_gs { background-position: -460px -460px; }
+.emoji-flag_gt { background-position: -480px 0; }
+.emoji-flag_gu { background-position: -480px -20px; }
+.emoji-flag_gw { background-position: -480px -40px; }
+.emoji-flag_gy { background-position: -480px -60px; }
+.emoji-flag_hk { background-position: -480px -80px; }
+.emoji-flag_hm { background-position: -480px -100px; }
+.emoji-flag_hn { background-position: -480px -120px; }
+.emoji-flag_hr { background-position: -480px -140px; }
+.emoji-flag_ht { background-position: -480px -160px; }
+.emoji-flag_hu { background-position: -480px -180px; }
+.emoji-flag_ic { background-position: -480px -200px; }
+.emoji-flag_id { background-position: -480px -220px; }
+.emoji-flag_ie { background-position: -480px -240px; }
+.emoji-flag_il { background-position: -480px -260px; }
+.emoji-flag_im { background-position: -480px -280px; }
+.emoji-flag_in { background-position: -480px -300px; }
+.emoji-flag_io { background-position: -480px -320px; }
+.emoji-flag_iq { background-position: -480px -340px; }
+.emoji-flag_ir { background-position: -480px -360px; }
+.emoji-flag_is { background-position: -480px -380px; }
+.emoji-flag_it { background-position: -480px -400px; }
+.emoji-flag_je { background-position: -480px -420px; }
+.emoji-flag_jm { background-position: -480px -440px; }
+.emoji-flag_jo { background-position: -480px -460px; }
+.emoji-flag_jp { background-position: 0 -480px; }
+.emoji-flag_ke { background-position: -20px -480px; }
+.emoji-flag_kg { background-position: -40px -480px; }
+.emoji-flag_kh { background-position: -60px -480px; }
+.emoji-flag_ki { background-position: -80px -480px; }
+.emoji-flag_km { background-position: -100px -480px; }
+.emoji-flag_kn { background-position: -120px -480px; }
+.emoji-flag_kp { background-position: -140px -480px; }
+.emoji-flag_kr { background-position: -160px -480px; }
+.emoji-flag_kw { background-position: -180px -480px; }
+.emoji-flag_ky { background-position: -200px -480px; }
+.emoji-flag_kz { background-position: -220px -480px; }
+.emoji-flag_la { background-position: -240px -480px; }
+.emoji-flag_lb { background-position: -260px -480px; }
+.emoji-flag_lc { background-position: -280px -480px; }
+.emoji-flag_li { background-position: -300px -480px; }
+.emoji-flag_lk { background-position: -320px -480px; }
+.emoji-flag_lr { background-position: -340px -480px; }
+.emoji-flag_ls { background-position: -360px -480px; }
+.emoji-flag_lt { background-position: -380px -480px; }
+.emoji-flag_lu { background-position: -400px -480px; }
+.emoji-flag_lv { background-position: -420px -480px; }
+.emoji-flag_ly { background-position: -440px -480px; }
+.emoji-flag_ma { background-position: -460px -480px; }
+.emoji-flag_mc { background-position: -480px -480px; }
+.emoji-flag_md { background-position: -500px 0; }
+.emoji-flag_me { background-position: -500px -20px; }
+.emoji-flag_mf { background-position: -500px -40px; }
+.emoji-flag_mg { background-position: -500px -60px; }
+.emoji-flag_mh { background-position: -500px -80px; }
+.emoji-flag_mk { background-position: -500px -100px; }
+.emoji-flag_ml { background-position: -500px -120px; }
+.emoji-flag_mm { background-position: -500px -140px; }
+.emoji-flag_mn { background-position: -500px -160px; }
+.emoji-flag_mo { background-position: -500px -180px; }
+.emoji-flag_mp { background-position: -500px -200px; }
+.emoji-flag_mq { background-position: -500px -220px; }
+.emoji-flag_mr { background-position: -500px -240px; }
+.emoji-flag_ms { background-position: -500px -260px; }
+.emoji-flag_mt { background-position: -500px -280px; }
+.emoji-flag_mu { background-position: -500px -300px; }
+.emoji-flag_mv { background-position: -500px -320px; }
+.emoji-flag_mw { background-position: -500px -340px; }
+.emoji-flag_mx { background-position: -500px -360px; }
+.emoji-flag_my { background-position: -500px -380px; }
+.emoji-flag_mz { background-position: -500px -400px; }
+.emoji-flag_na { background-position: -500px -420px; }
+.emoji-flag_nc { background-position: -500px -440px; }
+.emoji-flag_ne { background-position: -500px -460px; }
+.emoji-flag_nf { background-position: -500px -480px; }
+.emoji-flag_ng { background-position: 0 -500px; }
+.emoji-flag_ni { background-position: -20px -500px; }
+.emoji-flag_nl { background-position: -40px -500px; }
+.emoji-flag_no { background-position: -60px -500px; }
+.emoji-flag_np { background-position: -80px -500px; }
+.emoji-flag_nr { background-position: -100px -500px; }
+.emoji-flag_nu { background-position: -120px -500px; }
+.emoji-flag_nz { background-position: -140px -500px; }
+.emoji-flag_om { background-position: -160px -500px; }
+.emoji-flag_pa { background-position: -180px -500px; }
+.emoji-flag_pe { background-position: -200px -500px; }
+.emoji-flag_pf { background-position: -220px -500px; }
+.emoji-flag_pg { background-position: -240px -500px; }
+.emoji-flag_ph { background-position: -260px -500px; }
+.emoji-flag_pk { background-position: -280px -500px; }
+.emoji-flag_pl { background-position: -300px -500px; }
+.emoji-flag_pm { background-position: -320px -500px; }
+.emoji-flag_pn { background-position: -340px -500px; }
+.emoji-flag_pr { background-position: -360px -500px; }
+.emoji-flag_ps { background-position: -380px -500px; }
+.emoji-flag_pt { background-position: -400px -500px; }
+.emoji-flag_pw { background-position: -420px -500px; }
+.emoji-flag_py { background-position: -440px -500px; }
+.emoji-flag_qa { background-position: -460px -500px; }
+.emoji-flag_re { background-position: -480px -500px; }
+.emoji-flag_ro { background-position: -500px -500px; }
+.emoji-flag_rs { background-position: -520px 0; }
+.emoji-flag_ru { background-position: -520px -20px; }
+.emoji-flag_rw { background-position: -520px -40px; }
+.emoji-flag_sa { background-position: -520px -60px; }
+.emoji-flag_sb { background-position: -520px -80px; }
+.emoji-flag_sc { background-position: -520px -100px; }
+.emoji-flag_sd { background-position: -520px -120px; }
+.emoji-flag_se { background-position: -520px -140px; }
+.emoji-flag_sg { background-position: -520px -160px; }
+.emoji-flag_sh { background-position: -520px -180px; }
+.emoji-flag_si { background-position: -520px -200px; }
+.emoji-flag_sj { background-position: -520px -220px; }
+.emoji-flag_sk { background-position: -520px -240px; }
+.emoji-flag_sl { background-position: -520px -260px; }
+.emoji-flag_sm { background-position: -520px -280px; }
+.emoji-flag_sn { background-position: -520px -300px; }
+.emoji-flag_so { background-position: -520px -320px; }
+.emoji-flag_sr { background-position: -520px -340px; }
+.emoji-flag_ss { background-position: -520px -360px; }
+.emoji-flag_st { background-position: -520px -380px; }
+.emoji-flag_sv { background-position: -520px -400px; }
+.emoji-flag_sx { background-position: -520px -420px; }
+.emoji-flag_sy { background-position: -520px -440px; }
+.emoji-flag_sz { background-position: -520px -460px; }
+.emoji-flag_ta { background-position: -520px -480px; }
+.emoji-flag_tc { background-position: -520px -500px; }
+.emoji-flag_td { background-position: 0 -520px; }
+.emoji-flag_tf { background-position: -20px -520px; }
+.emoji-flag_tg { background-position: -40px -520px; }
+.emoji-flag_th { background-position: -60px -520px; }
+.emoji-flag_tj { background-position: -80px -520px; }
+.emoji-flag_tk { background-position: -100px -520px; }
+.emoji-flag_tl { background-position: -120px -520px; }
+.emoji-flag_tm { background-position: -140px -520px; }
+.emoji-flag_tn { background-position: -160px -520px; }
+.emoji-flag_to { background-position: -180px -520px; }
+.emoji-flag_tr { background-position: -200px -520px; }
+.emoji-flag_tt { background-position: -220px -520px; }
+.emoji-flag_tv { background-position: -240px -520px; }
+.emoji-flag_tw { background-position: -260px -520px; }
+.emoji-flag_tz { background-position: -280px -520px; }
+.emoji-flag_ua { background-position: -300px -520px; }
+.emoji-flag_ug { background-position: -320px -520px; }
+.emoji-flag_um { background-position: -340px -520px; }
+.emoji-flag_us { background-position: -360px -520px; }
+.emoji-flag_uy { background-position: -380px -520px; }
+.emoji-flag_uz { background-position: -400px -520px; }
+.emoji-flag_va { background-position: -420px -520px; }
+.emoji-flag_vc { background-position: -440px -520px; }
+.emoji-flag_ve { background-position: -460px -520px; }
+.emoji-flag_vg { background-position: -480px -520px; }
+.emoji-flag_vi { background-position: -500px -520px; }
+.emoji-flag_vn { background-position: -520px -520px; }
+.emoji-flag_vu { background-position: -540px 0; }
+.emoji-flag_wf { background-position: -540px -20px; }
+.emoji-flag_white { background-position: -540px -40px; }
+.emoji-flag_ws { background-position: -540px -60px; }
+.emoji-flag_xk { background-position: -540px -80px; }
+.emoji-flag_ye { background-position: -540px -100px; }
+.emoji-flag_yt { background-position: -540px -120px; }
+.emoji-flag_za { background-position: -540px -140px; }
+.emoji-flag_zm { background-position: -540px -160px; }
+.emoji-flag_zw { background-position: -540px -180px; }
+.emoji-flags { background-position: -540px -200px; }
+.emoji-flashlight { background-position: -540px -220px; }
+.emoji-fleur-de-lis { background-position: -540px -240px; }
+.emoji-floppy_disk { background-position: -540px -260px; }
+.emoji-flower_playing_cards { background-position: -540px -280px; }
+.emoji-flushed { background-position: -540px -300px; }
+.emoji-fog { background-position: -540px -320px; }
+.emoji-foggy { background-position: -540px -340px; }
+.emoji-football { background-position: -540px -360px; }
+.emoji-footprints { background-position: -540px -380px; }
+.emoji-fork_and_knife { background-position: -540px -400px; }
+.emoji-fork_knife_plate { background-position: -540px -420px; }
+.emoji-fountain { background-position: -540px -440px; }
+.emoji-four { background-position: -540px -460px; }
+.emoji-four_leaf_clover { background-position: -540px -480px; }
+.emoji-fox { background-position: -540px -500px; }
+.emoji-frame_photo { background-position: -540px -520px; }
+.emoji-free { background-position: 0 -540px; }
+.emoji-french_bread { background-position: -20px -540px; }
+.emoji-fried_shrimp { background-position: -40px -540px; }
+.emoji-fries { background-position: -60px -540px; }
+.emoji-frog { background-position: -80px -540px; }
+.emoji-frowning { background-position: -100px -540px; }
+.emoji-frowning2 { background-position: -120px -540px; }
+.emoji-fuelpump { background-position: -140px -540px; }
+.emoji-full_moon { background-position: -160px -540px; }
+.emoji-full_moon_with_face { background-position: -180px -540px; }
+.emoji-game_die { background-position: -200px -540px; }
+.emoji-gear { background-position: -220px -540px; }
+.emoji-gem { background-position: -240px -540px; }
+.emoji-gemini { background-position: -260px -540px; }
+.emoji-ghost { background-position: -280px -540px; }
+.emoji-gift { background-position: -300px -540px; }
+.emoji-gift_heart { background-position: -320px -540px; }
+.emoji-girl { background-position: -340px -540px; }
+.emoji-girl_tone1 { background-position: -360px -540px; }
+.emoji-girl_tone2 { background-position: -380px -540px; }
+.emoji-girl_tone3 { background-position: -400px -540px; }
+.emoji-girl_tone4 { background-position: -420px -540px; }
+.emoji-girl_tone5 { background-position: -440px -540px; }
+.emoji-globe_with_meridians { background-position: -460px -540px; }
+.emoji-goal { background-position: -480px -540px; }
+.emoji-goat { background-position: -500px -540px; }
+.emoji-golf { background-position: -520px -540px; }
+.emoji-golfer { background-position: -540px -540px; }
+.emoji-gorilla { background-position: -560px 0; }
+.emoji-grapes { background-position: -560px -20px; }
+.emoji-green_apple { background-position: -560px -40px; }
+.emoji-green_book { background-position: -560px -60px; }
+.emoji-green_heart { background-position: -560px -80px; }
+.emoji-grey_exclamation { background-position: -560px -100px; }
+.emoji-grey_question { background-position: -560px -120px; }
+.emoji-grimacing { background-position: -560px -140px; }
+.emoji-grin { background-position: -560px -160px; }
+.emoji-grinning { background-position: -560px -180px; }
+.emoji-guardsman { background-position: -560px -200px; }
+.emoji-guardsman_tone1 { background-position: -560px -220px; }
+.emoji-guardsman_tone2 { background-position: -560px -240px; }
+.emoji-guardsman_tone3 { background-position: -560px -260px; }
+.emoji-guardsman_tone4 { background-position: -560px -280px; }
+.emoji-guardsman_tone5 { background-position: -560px -300px; }
+.emoji-guitar { background-position: -560px -320px; }
+.emoji-gun { background-position: -560px -340px; }
+.emoji-haircut { background-position: -560px -360px; }
+.emoji-haircut_tone1 { background-position: -560px -380px; }
+.emoji-haircut_tone2 { background-position: -560px -400px; }
+.emoji-haircut_tone3 { background-position: -560px -420px; }
+.emoji-haircut_tone4 { background-position: -560px -440px; }
+.emoji-haircut_tone5 { background-position: -560px -460px; }
+.emoji-hamburger { background-position: -560px -480px; }
+.emoji-hammer { background-position: -560px -500px; }
+.emoji-hammer_pick { background-position: -560px -520px; }
+.emoji-hamster { background-position: -560px -540px; }
+.emoji-hand_splayed { background-position: 0 -560px; }
+.emoji-hand_splayed_tone1 { background-position: -20px -560px; }
+.emoji-hand_splayed_tone2 { background-position: -40px -560px; }
+.emoji-hand_splayed_tone3 { background-position: -60px -560px; }
+.emoji-hand_splayed_tone4 { background-position: -80px -560px; }
+.emoji-hand_splayed_tone5 { background-position: -100px -560px; }
+.emoji-handbag { background-position: -120px -560px; }
+.emoji-handball { background-position: -140px -560px; }
+.emoji-handball_tone1 { background-position: -160px -560px; }
+.emoji-handball_tone2 { background-position: -180px -560px; }
+.emoji-handball_tone3 { background-position: -200px -560px; }
+.emoji-handball_tone4 { background-position: -220px -560px; }
+.emoji-handball_tone5 { background-position: -240px -560px; }
+.emoji-handshake { background-position: -260px -560px; }
+.emoji-handshake_tone1 { background-position: -280px -560px; }
+.emoji-handshake_tone2 { background-position: -300px -560px; }
+.emoji-handshake_tone3 { background-position: -320px -560px; }
+.emoji-handshake_tone4 { background-position: -340px -560px; }
+.emoji-handshake_tone5 { background-position: -360px -560px; }
+.emoji-hash { background-position: -380px -560px; }
+.emoji-hatched_chick { background-position: -400px -560px; }
+.emoji-hatching_chick { background-position: -420px -560px; }
+.emoji-head_bandage { background-position: -440px -560px; }
+.emoji-headphones { background-position: -460px -560px; }
+.emoji-hear_no_evil { background-position: -480px -560px; }
+.emoji-heart { background-position: -500px -560px; }
+.emoji-heart_decoration { background-position: -520px -560px; }
+.emoji-heart_exclamation { background-position: -540px -560px; }
+.emoji-heart_eyes { background-position: -560px -560px; }
+.emoji-heart_eyes_cat { background-position: -580px 0; }
+.emoji-heartbeat { background-position: -580px -20px; }
+.emoji-heartpulse { background-position: -580px -40px; }
+.emoji-hearts { background-position: -580px -60px; }
+.emoji-heavy_check_mark { background-position: -580px -80px; }
+.emoji-heavy_division_sign { background-position: -580px -100px; }
+.emoji-heavy_dollar_sign { background-position: -580px -120px; }
+.emoji-heavy_minus_sign { background-position: -580px -140px; }
+.emoji-heavy_multiplication_x { background-position: -580px -160px; }
+.emoji-heavy_plus_sign { background-position: -580px -180px; }
+.emoji-helicopter { background-position: -580px -200px; }
+.emoji-helmet_with_cross { background-position: -580px -220px; }
+.emoji-herb { background-position: -580px -240px; }
+.emoji-hibiscus { background-position: -580px -260px; }
+.emoji-high_brightness { background-position: -580px -280px; }
+.emoji-high_heel { background-position: -580px -300px; }
+.emoji-hockey { background-position: -580px -320px; }
+.emoji-hole { background-position: -580px -340px; }
+.emoji-homes { background-position: -580px -360px; }
+.emoji-honey_pot { background-position: -580px -380px; }
+.emoji-horse { background-position: -580px -400px; }
+.emoji-horse_racing { background-position: -580px -420px; }
+.emoji-horse_racing_tone1 { background-position: -580px -440px; }
+.emoji-horse_racing_tone2 { background-position: -580px -460px; }
+.emoji-horse_racing_tone3 { background-position: -580px -480px; }
+.emoji-horse_racing_tone4 { background-position: -580px -500px; }
+.emoji-horse_racing_tone5 { background-position: -580px -520px; }
+.emoji-hospital { background-position: -580px -540px; }
+.emoji-hot_pepper { background-position: -580px -560px; }
+.emoji-hotdog { background-position: 0 -580px; }
+.emoji-hotel { background-position: -20px -580px; }
+.emoji-hotsprings { background-position: -40px -580px; }
+.emoji-hourglass { background-position: -60px -580px; }
+.emoji-hourglass_flowing_sand { background-position: -80px -580px; }
+.emoji-house { background-position: -100px -580px; }
+.emoji-house_abandoned { background-position: -120px -580px; }
+.emoji-house_with_garden { background-position: -140px -580px; }
+.emoji-hugging { background-position: -160px -580px; }
+.emoji-hushed { background-position: -180px -580px; }
+.emoji-ice_cream { background-position: -200px -580px; }
+.emoji-ice_skate { background-position: -220px -580px; }
+.emoji-icecream { background-position: -240px -580px; }
+.emoji-id { background-position: -260px -580px; }
+.emoji-ideograph_advantage { background-position: -280px -580px; }
+.emoji-imp { background-position: -300px -580px; }
+.emoji-inbox_tray { background-position: -320px -580px; }
+.emoji-incoming_envelope { background-position: -340px -580px; }
+.emoji-information_desk_person { background-position: -360px -580px; }
+.emoji-information_desk_person_tone1 { background-position: -380px -580px; }
+.emoji-information_desk_person_tone2 { background-position: -400px -580px; }
+.emoji-information_desk_person_tone3 { background-position: -420px -580px; }
+.emoji-information_desk_person_tone4 { background-position: -440px -580px; }
+.emoji-information_desk_person_tone5 { background-position: -460px -580px; }
+.emoji-information_source { background-position: -480px -580px; }
+.emoji-innocent { background-position: -500px -580px; }
+.emoji-interrobang { background-position: -520px -580px; }
+.emoji-iphone { background-position: -540px -580px; }
+.emoji-island { background-position: -560px -580px; }
+.emoji-izakaya_lantern { background-position: -580px -580px; }
+.emoji-jack_o_lantern { background-position: -600px 0; }
+.emoji-japan { background-position: -600px -20px; }
+.emoji-japanese_castle { background-position: -600px -40px; }
+.emoji-japanese_goblin { background-position: -600px -60px; }
+.emoji-japanese_ogre { background-position: -600px -80px; }
+.emoji-jeans { background-position: -600px -100px; }
+.emoji-joy { background-position: -600px -120px; }
+.emoji-joy_cat { background-position: -600px -140px; }
+.emoji-joystick { background-position: -600px -160px; }
+.emoji-juggling { background-position: -600px -180px; }
+.emoji-juggling_tone1 { background-position: -600px -200px; }
+.emoji-juggling_tone2 { background-position: -600px -220px; }
+.emoji-juggling_tone3 { background-position: -600px -240px; }
+.emoji-juggling_tone4 { background-position: -600px -260px; }
+.emoji-juggling_tone5 { background-position: -600px -280px; }
+.emoji-kaaba { background-position: -600px -300px; }
+.emoji-key { background-position: -600px -320px; }
+.emoji-key2 { background-position: -600px -340px; }
+.emoji-keyboard { background-position: -600px -360px; }
+.emoji-kimono { background-position: -600px -380px; }
+.emoji-kiss { background-position: -600px -400px; }
+.emoji-kiss_mm { background-position: -600px -420px; }
+.emoji-kiss_ww { background-position: -600px -440px; }
+.emoji-kissing { background-position: -600px -460px; }
+.emoji-kissing_cat { background-position: -600px -480px; }
+.emoji-kissing_closed_eyes { background-position: -600px -500px; }
+.emoji-kissing_heart { background-position: -600px -520px; }
+.emoji-kissing_smiling_eyes { background-position: -600px -540px; }
+.emoji-kiwi { background-position: -600px -560px; }
+.emoji-knife { background-position: -600px -580px; }
+.emoji-koala { background-position: 0 -600px; }
+.emoji-koko { background-position: -20px -600px; }
+.emoji-label { background-position: -40px -600px; }
+.emoji-large_blue_circle { background-position: -60px -600px; }
+.emoji-large_blue_diamond { background-position: -80px -600px; }
+.emoji-large_orange_diamond { background-position: -100px -600px; }
+.emoji-last_quarter_moon { background-position: -120px -600px; }
+.emoji-last_quarter_moon_with_face { background-position: -140px -600px; }
+.emoji-laughing { background-position: -160px -600px; }
+.emoji-leaves { background-position: -180px -600px; }
+.emoji-ledger { background-position: -200px -600px; }
+.emoji-left_facing_fist { background-position: -220px -600px; }
+.emoji-left_facing_fist_tone1 { background-position: -240px -600px; }
+.emoji-left_facing_fist_tone2 { background-position: -260px -600px; }
+.emoji-left_facing_fist_tone3 { background-position: -280px -600px; }
+.emoji-left_facing_fist_tone4 { background-position: -300px -600px; }
+.emoji-left_facing_fist_tone5 { background-position: -320px -600px; }
+.emoji-left_luggage { background-position: -340px -600px; }
+.emoji-left_right_arrow { background-position: -360px -600px; }
+.emoji-leftwards_arrow_with_hook { background-position: -380px -600px; }
+.emoji-lemon { background-position: -400px -600px; }
+.emoji-leo { background-position: -420px -600px; }
+.emoji-leopard { background-position: -440px -600px; }
+.emoji-level_slider { background-position: -460px -600px; }
+.emoji-levitate { background-position: -480px -600px; }
+.emoji-libra { background-position: -500px -600px; }
+.emoji-lifter { background-position: -520px -600px; }
+.emoji-lifter_tone1 { background-position: -540px -600px; }
+.emoji-lifter_tone2 { background-position: -560px -600px; }
+.emoji-lifter_tone3 { background-position: -580px -600px; }
+.emoji-lifter_tone4 { background-position: -600px -600px; }
+.emoji-lifter_tone5 { background-position: -620px 0; }
+.emoji-light_rail { background-position: -620px -20px; }
+.emoji-link { background-position: -620px -40px; }
+.emoji-lion_face { background-position: -620px -60px; }
+.emoji-lips { background-position: -620px -80px; }
+.emoji-lipstick { background-position: -620px -100px; }
+.emoji-lizard { background-position: -620px -120px; }
+.emoji-lock { background-position: -620px -140px; }
+.emoji-lock_with_ink_pen { background-position: -620px -160px; }
+.emoji-lollipop { background-position: -620px -180px; }
+.emoji-loop { background-position: -620px -200px; }
+.emoji-loud_sound { background-position: -620px -220px; }
+.emoji-loudspeaker { background-position: -620px -240px; }
+.emoji-love_hotel { background-position: -620px -260px; }
+.emoji-love_letter { background-position: -620px -280px; }
+.emoji-low_brightness { background-position: -620px -300px; }
+.emoji-lying_face { background-position: -620px -320px; }
+.emoji-m { background-position: -620px -340px; }
+.emoji-mag { background-position: -620px -360px; }
+.emoji-mag_right { background-position: -620px -380px; }
+.emoji-mahjong { background-position: -620px -400px; }
+.emoji-mailbox { background-position: -620px -420px; }
+.emoji-mailbox_closed { background-position: -620px -440px; }
+.emoji-mailbox_with_mail { background-position: -620px -460px; }
+.emoji-mailbox_with_no_mail { background-position: -620px -480px; }
+.emoji-man { background-position: -620px -500px; }
+.emoji-man_dancing { background-position: -620px -520px; }
+.emoji-man_dancing_tone1 { background-position: -620px -540px; }
+.emoji-man_dancing_tone2 { background-position: -620px -560px; }
+.emoji-man_dancing_tone3 { background-position: -620px -580px; }
+.emoji-man_dancing_tone4 { background-position: -620px -600px; }
+.emoji-man_dancing_tone5 { background-position: 0 -620px; }
+.emoji-man_in_tuxedo { background-position: -20px -620px; }
+.emoji-man_in_tuxedo_tone1 { background-position: -40px -620px; }
+.emoji-man_in_tuxedo_tone2 { background-position: -60px -620px; }
+.emoji-man_in_tuxedo_tone3 { background-position: -80px -620px; }
+.emoji-man_in_tuxedo_tone4 { background-position: -100px -620px; }
+.emoji-man_in_tuxedo_tone5 { background-position: -120px -620px; }
+.emoji-man_tone1 { background-position: -140px -620px; }
+.emoji-man_tone2 { background-position: -160px -620px; }
+.emoji-man_tone3 { background-position: -180px -620px; }
+.emoji-man_tone4 { background-position: -200px -620px; }
+.emoji-man_tone5 { background-position: -220px -620px; }
+.emoji-man_with_gua_pi_mao { background-position: -240px -620px; }
+.emoji-man_with_gua_pi_mao_tone1 { background-position: -260px -620px; }
+.emoji-man_with_gua_pi_mao_tone2 { background-position: -280px -620px; }
+.emoji-man_with_gua_pi_mao_tone3 { background-position: -300px -620px; }
+.emoji-man_with_gua_pi_mao_tone4 { background-position: -320px -620px; }
+.emoji-man_with_gua_pi_mao_tone5 { background-position: -340px -620px; }
+.emoji-man_with_turban { background-position: -360px -620px; }
+.emoji-man_with_turban_tone1 { background-position: -380px -620px; }
+.emoji-man_with_turban_tone2 { background-position: -400px -620px; }
+.emoji-man_with_turban_tone3 { background-position: -420px -620px; }
+.emoji-man_with_turban_tone4 { background-position: -440px -620px; }
+.emoji-man_with_turban_tone5 { background-position: -460px -620px; }
+.emoji-mans_shoe { background-position: -480px -620px; }
+.emoji-map { background-position: -500px -620px; }
+.emoji-maple_leaf { background-position: -520px -620px; }
+.emoji-martial_arts_uniform { background-position: -540px -620px; }
+.emoji-mask { background-position: -560px -620px; }
+.emoji-massage { background-position: -580px -620px; }
+.emoji-massage_tone1 { background-position: -600px -620px; }
+.emoji-massage_tone2 { background-position: -620px -620px; }
+.emoji-massage_tone3 { background-position: -640px 0; }
+.emoji-massage_tone4 { background-position: -640px -20px; }
+.emoji-massage_tone5 { background-position: -640px -40px; }
+.emoji-meat_on_bone { background-position: -640px -60px; }
+.emoji-medal { background-position: -640px -80px; }
+.emoji-mega { background-position: -640px -100px; }
+.emoji-melon { background-position: -640px -120px; }
+.emoji-menorah { background-position: -640px -140px; }
+.emoji-mens { background-position: -640px -160px; }
+.emoji-metal { background-position: -640px -180px; }
+.emoji-metal_tone1 { background-position: -640px -200px; }
+.emoji-metal_tone2 { background-position: -640px -220px; }
+.emoji-metal_tone3 { background-position: -640px -240px; }
+.emoji-metal_tone4 { background-position: -640px -260px; }
+.emoji-metal_tone5 { background-position: -640px -280px; }
+.emoji-metro { background-position: -640px -300px; }
+.emoji-microphone { background-position: -640px -320px; }
+.emoji-microphone2 { background-position: -640px -340px; }
+.emoji-microscope { background-position: -640px -360px; }
+.emoji-middle_finger { background-position: -640px -380px; }
+.emoji-middle_finger_tone1 { background-position: -640px -400px; }
+.emoji-middle_finger_tone2 { background-position: -640px -420px; }
+.emoji-middle_finger_tone3 { background-position: -640px -440px; }
+.emoji-middle_finger_tone4 { background-position: -640px -460px; }
+.emoji-middle_finger_tone5 { background-position: -640px -480px; }
+.emoji-military_medal { background-position: -640px -500px; }
+.emoji-milk { background-position: -640px -520px; }
+.emoji-milky_way { background-position: -640px -540px; }
+.emoji-minibus { background-position: -640px -560px; }
+.emoji-minidisc { background-position: -640px -580px; }
+.emoji-mobile_phone_off { background-position: -640px -600px; }
+.emoji-money_mouth { background-position: -640px -620px; }
+.emoji-money_with_wings { background-position: 0 -640px; }
+.emoji-moneybag { background-position: -20px -640px; }
+.emoji-monkey { background-position: -40px -640px; }
+.emoji-monkey_face { background-position: -60px -640px; }
+.emoji-monorail { background-position: -80px -640px; }
+.emoji-mortar_board { background-position: -100px -640px; }
+.emoji-mosque { background-position: -120px -640px; }
+.emoji-motor_scooter { background-position: -140px -640px; }
+.emoji-motorboat { background-position: -160px -640px; }
+.emoji-motorcycle { background-position: -180px -640px; }
+.emoji-motorway { background-position: -200px -640px; }
+.emoji-mount_fuji { background-position: -220px -640px; }
+.emoji-mountain { background-position: -240px -640px; }
+.emoji-mountain_bicyclist { background-position: -260px -640px; }
+.emoji-mountain_bicyclist_tone1 { background-position: -280px -640px; }
+.emoji-mountain_bicyclist_tone2 { background-position: -300px -640px; }
+.emoji-mountain_bicyclist_tone3 { background-position: -320px -640px; }
+.emoji-mountain_bicyclist_tone4 { background-position: -340px -640px; }
+.emoji-mountain_bicyclist_tone5 { background-position: -360px -640px; }
+.emoji-mountain_cableway { background-position: -380px -640px; }
+.emoji-mountain_railway { background-position: -400px -640px; }
+.emoji-mountain_snow { background-position: -420px -640px; }
+.emoji-mouse { background-position: -440px -640px; }
+.emoji-mouse2 { background-position: -460px -640px; }
+.emoji-mouse_three_button { background-position: -480px -640px; }
+.emoji-movie_camera { background-position: -500px -640px; }
+.emoji-moyai { background-position: -520px -640px; }
+.emoji-mrs_claus { background-position: -540px -640px; }
+.emoji-mrs_claus_tone1 { background-position: -560px -640px; }
+.emoji-mrs_claus_tone2 { background-position: -580px -640px; }
+.emoji-mrs_claus_tone3 { background-position: -600px -640px; }
+.emoji-mrs_claus_tone4 { background-position: -620px -640px; }
+.emoji-mrs_claus_tone5 { background-position: -640px -640px; }
+.emoji-muscle { background-position: -660px 0; }
+.emoji-muscle_tone1 { background-position: -660px -20px; }
+.emoji-muscle_tone2 { background-position: -660px -40px; }
+.emoji-muscle_tone3 { background-position: -660px -60px; }
+.emoji-muscle_tone4 { background-position: -660px -80px; }
+.emoji-muscle_tone5 { background-position: -660px -100px; }
+.emoji-mushroom { background-position: -660px -120px; }
+.emoji-musical_keyboard { background-position: -660px -140px; }
+.emoji-musical_note { background-position: -660px -160px; }
+.emoji-musical_score { background-position: -660px -180px; }
+.emoji-mute { background-position: -660px -200px; }
+.emoji-nail_care { background-position: -660px -220px; }
+.emoji-nail_care_tone1 { background-position: -660px -240px; }
+.emoji-nail_care_tone2 { background-position: -660px -260px; }
+.emoji-nail_care_tone3 { background-position: -660px -280px; }
+.emoji-nail_care_tone4 { background-position: -660px -300px; }
+.emoji-nail_care_tone5 { background-position: -660px -320px; }
+.emoji-name_badge { background-position: -660px -340px; }
+.emoji-nauseated_face { background-position: -660px -360px; }
+.emoji-necktie { background-position: -660px -380px; }
+.emoji-negative_squared_cross_mark { background-position: -660px -400px; }
+.emoji-nerd { background-position: -660px -420px; }
+.emoji-neutral_face { background-position: -660px -440px; }
+.emoji-new { background-position: -660px -460px; }
+.emoji-new_moon { background-position: -660px -480px; }
+.emoji-new_moon_with_face { background-position: -660px -500px; }
+.emoji-newspaper { background-position: -660px -520px; }
+.emoji-newspaper2 { background-position: -660px -540px; }
+.emoji-ng { background-position: -660px -560px; }
+.emoji-night_with_stars { background-position: -660px -580px; }
+.emoji-nine { background-position: -660px -600px; }
+.emoji-no_bell { background-position: -660px -620px; }
+.emoji-no_bicycles { background-position: -660px -640px; }
+.emoji-no_entry { background-position: 0 -660px; }
+.emoji-no_entry_sign { background-position: -20px -660px; }
+.emoji-no_good { background-position: -40px -660px; }
+.emoji-no_good_tone1 { background-position: -60px -660px; }
+.emoji-no_good_tone2 { background-position: -80px -660px; }
+.emoji-no_good_tone3 { background-position: -100px -660px; }
+.emoji-no_good_tone4 { background-position: -120px -660px; }
+.emoji-no_good_tone5 { background-position: -140px -660px; }
+.emoji-no_mobile_phones { background-position: -160px -660px; }
+.emoji-no_mouth { background-position: -180px -660px; }
+.emoji-no_pedestrians { background-position: -200px -660px; }
+.emoji-no_smoking { background-position: -220px -660px; }
+.emoji-non-potable_water { background-position: -240px -660px; }
+.emoji-nose { background-position: -260px -660px; }
+.emoji-nose_tone1 { background-position: -280px -660px; }
+.emoji-nose_tone2 { background-position: -300px -660px; }
+.emoji-nose_tone3 { background-position: -320px -660px; }
+.emoji-nose_tone4 { background-position: -340px -660px; }
+.emoji-nose_tone5 { background-position: -360px -660px; }
+.emoji-notebook { background-position: -380px -660px; }
+.emoji-notebook_with_decorative_cover { background-position: -400px -660px; }
+.emoji-notepad_spiral { background-position: -420px -660px; }
+.emoji-notes { background-position: -440px -660px; }
+.emoji-nut_and_bolt { background-position: -460px -660px; }
+.emoji-o { background-position: -480px -660px; }
+.emoji-o2 { background-position: -500px -660px; }
+.emoji-ocean { background-position: -520px -660px; }
+.emoji-octagonal_sign { background-position: -540px -660px; }
+.emoji-octopus { background-position: -560px -660px; }
+.emoji-oden { background-position: -580px -660px; }
+.emoji-office { background-position: -600px -660px; }
+.emoji-oil { background-position: -620px -660px; }
+.emoji-ok { background-position: -640px -660px; }
+.emoji-ok_hand { background-position: -660px -660px; }
+.emoji-ok_hand_tone1 { background-position: -680px 0; }
+.emoji-ok_hand_tone2 { background-position: -680px -20px; }
+.emoji-ok_hand_tone3 { background-position: -680px -40px; }
+.emoji-ok_hand_tone4 { background-position: -680px -60px; }
+.emoji-ok_hand_tone5 { background-position: -680px -80px; }
+.emoji-ok_woman { background-position: -680px -100px; }
+.emoji-ok_woman_tone1 { background-position: -680px -120px; }
+.emoji-ok_woman_tone2 { background-position: -680px -140px; }
+.emoji-ok_woman_tone3 { background-position: -680px -160px; }
+.emoji-ok_woman_tone4 { background-position: -680px -180px; }
+.emoji-ok_woman_tone5 { background-position: -680px -200px; }
+.emoji-older_man { background-position: -680px -220px; }
+.emoji-older_man_tone1 { background-position: -680px -240px; }
+.emoji-older_man_tone2 { background-position: -680px -260px; }
+.emoji-older_man_tone3 { background-position: -680px -280px; }
+.emoji-older_man_tone4 { background-position: -680px -300px; }
+.emoji-older_man_tone5 { background-position: -680px -320px; }
+.emoji-older_woman { background-position: -680px -340px; }
+.emoji-older_woman_tone1 { background-position: -680px -360px; }
+.emoji-older_woman_tone2 { background-position: -680px -380px; }
+.emoji-older_woman_tone3 { background-position: -680px -400px; }
+.emoji-older_woman_tone4 { background-position: -680px -420px; }
+.emoji-older_woman_tone5 { background-position: -680px -440px; }
+.emoji-om_symbol { background-position: -680px -460px; }
+.emoji-on { background-position: -680px -480px; }
+.emoji-oncoming_automobile { background-position: -680px -500px; }
+.emoji-oncoming_bus { background-position: -680px -520px; }
+.emoji-oncoming_police_car { background-position: -680px -540px; }
+.emoji-oncoming_taxi { background-position: -680px -560px; }
+.emoji-one { background-position: -680px -580px; }
+.emoji-open_file_folder { background-position: -680px -600px; }
+.emoji-open_hands { background-position: -680px -620px; }
+.emoji-open_hands_tone1 { background-position: -680px -640px; }
+.emoji-open_hands_tone2 { background-position: -680px -660px; }
+.emoji-open_hands_tone3 { background-position: 0 -680px; }
+.emoji-open_hands_tone4 { background-position: -20px -680px; }
+.emoji-open_hands_tone5 { background-position: -40px -680px; }
+.emoji-open_mouth { background-position: -60px -680px; }
+.emoji-ophiuchus { background-position: -80px -680px; }
+.emoji-orange_book { background-position: -100px -680px; }
+.emoji-orthodox_cross { background-position: -120px -680px; }
+.emoji-outbox_tray { background-position: -140px -680px; }
+.emoji-owl { background-position: -160px -680px; }
+.emoji-ox { background-position: -180px -680px; }
+.emoji-package { background-position: -200px -680px; }
+.emoji-page_facing_up { background-position: -220px -680px; }
+.emoji-page_with_curl { background-position: -240px -680px; }
+.emoji-pager { background-position: -260px -680px; }
+.emoji-paintbrush { background-position: -280px -680px; }
+.emoji-palm_tree { background-position: -300px -680px; }
+.emoji-pancakes { background-position: -320px -680px; }
+.emoji-panda_face { background-position: -340px -680px; }
+.emoji-paperclip { background-position: -360px -680px; }
+.emoji-paperclips { background-position: -380px -680px; }
+.emoji-park { background-position: -400px -680px; }
+.emoji-parking { background-position: -420px -680px; }
+.emoji-part_alternation_mark { background-position: -440px -680px; }
+.emoji-partly_sunny { background-position: -460px -680px; }
+.emoji-passport_control { background-position: -480px -680px; }
+.emoji-pause_button { background-position: -500px -680px; }
+.emoji-peace { background-position: -520px -680px; }
+.emoji-peach { background-position: -540px -680px; }
+.emoji-peanuts { background-position: -560px -680px; }
+.emoji-pear { background-position: -580px -680px; }
+.emoji-pen_ballpoint { background-position: -600px -680px; }
+.emoji-pen_fountain { background-position: -620px -680px; }
+.emoji-pencil { background-position: -640px -680px; }
+.emoji-pencil2 { background-position: -660px -680px; }
+.emoji-penguin { background-position: -680px -680px; }
+.emoji-pensive { background-position: -700px 0; }
+.emoji-performing_arts { background-position: -700px -20px; }
+.emoji-persevere { background-position: -700px -40px; }
+.emoji-person_frowning { background-position: -700px -60px; }
+.emoji-person_frowning_tone1 { background-position: -700px -80px; }
+.emoji-person_frowning_tone2 { background-position: -700px -100px; }
+.emoji-person_frowning_tone3 { background-position: -700px -120px; }
+.emoji-person_frowning_tone4 { background-position: -700px -140px; }
+.emoji-person_frowning_tone5 { background-position: -700px -160px; }
+.emoji-person_with_blond_hair { background-position: -700px -180px; }
+.emoji-person_with_blond_hair_tone1 { background-position: -700px -200px; }
+.emoji-person_with_blond_hair_tone2 { background-position: -700px -220px; }
+.emoji-person_with_blond_hair_tone3 { background-position: -700px -240px; }
+.emoji-person_with_blond_hair_tone4 { background-position: -700px -260px; }
+.emoji-person_with_blond_hair_tone5 { background-position: -700px -280px; }
+.emoji-person_with_pouting_face { background-position: -700px -300px; }
+.emoji-person_with_pouting_face_tone1 { background-position: -700px -320px; }
+.emoji-person_with_pouting_face_tone2 { background-position: -700px -340px; }
+.emoji-person_with_pouting_face_tone3 { background-position: -700px -360px; }
+.emoji-person_with_pouting_face_tone4 { background-position: -700px -380px; }
+.emoji-person_with_pouting_face_tone5 { background-position: -700px -400px; }
+.emoji-pick { background-position: -700px -420px; }
+.emoji-pig { background-position: -700px -440px; }
+.emoji-pig2 { background-position: -700px -460px; }
+.emoji-pig_nose { background-position: -700px -480px; }
+.emoji-pill { background-position: -700px -500px; }
+.emoji-pineapple { background-position: -700px -520px; }
+.emoji-ping_pong { background-position: -700px -540px; }
+.emoji-pisces { background-position: -700px -560px; }
+.emoji-pizza { background-position: -700px -580px; }
+.emoji-place_of_worship { background-position: -700px -600px; }
+.emoji-play_pause { background-position: -700px -620px; }
+.emoji-point_down { background-position: -700px -640px; }
+.emoji-point_down_tone1 { background-position: -700px -660px; }
+.emoji-point_down_tone2 { background-position: -700px -680px; }
+.emoji-point_down_tone3 { background-position: 0 -700px; }
+.emoji-point_down_tone4 { background-position: -20px -700px; }
+.emoji-point_down_tone5 { background-position: -40px -700px; }
+.emoji-point_left { background-position: -60px -700px; }
+.emoji-point_left_tone1 { background-position: -80px -700px; }
+.emoji-point_left_tone2 { background-position: -100px -700px; }
+.emoji-point_left_tone3 { background-position: -120px -700px; }
+.emoji-point_left_tone4 { background-position: -140px -700px; }
+.emoji-point_left_tone5 { background-position: -160px -700px; }
+.emoji-point_right { background-position: -180px -700px; }
+.emoji-point_right_tone1 { background-position: -200px -700px; }
+.emoji-point_right_tone2 { background-position: -220px -700px; }
+.emoji-point_right_tone3 { background-position: -240px -700px; }
+.emoji-point_right_tone4 { background-position: -260px -700px; }
+.emoji-point_right_tone5 { background-position: -280px -700px; }
+.emoji-point_up { background-position: -300px -700px; }
+.emoji-point_up_2 { background-position: -320px -700px; }
+.emoji-point_up_2_tone1 { background-position: -340px -700px; }
+.emoji-point_up_2_tone2 { background-position: -360px -700px; }
+.emoji-point_up_2_tone3 { background-position: -380px -700px; }
+.emoji-point_up_2_tone4 { background-position: -400px -700px; }
+.emoji-point_up_2_tone5 { background-position: -420px -700px; }
+.emoji-point_up_tone1 { background-position: -440px -700px; }
+.emoji-point_up_tone2 { background-position: -460px -700px; }
+.emoji-point_up_tone3 { background-position: -480px -700px; }
+.emoji-point_up_tone4 { background-position: -500px -700px; }
+.emoji-point_up_tone5 { background-position: -520px -700px; }
+.emoji-police_car { background-position: -540px -700px; }
+.emoji-poodle { background-position: -560px -700px; }
+.emoji-poop { background-position: -580px -700px; }
+.emoji-popcorn { background-position: -600px -700px; }
+.emoji-post_office { background-position: -620px -700px; }
+.emoji-postal_horn { background-position: -640px -700px; }
+.emoji-postbox { background-position: -660px -700px; }
+.emoji-potable_water { background-position: -680px -700px; }
+.emoji-potato { background-position: -700px -700px; }
+.emoji-pouch { background-position: -720px 0; }
+.emoji-poultry_leg { background-position: -720px -20px; }
+.emoji-pound { background-position: -720px -40px; }
+.emoji-pouting_cat { background-position: -720px -60px; }
+.emoji-pray { background-position: -720px -80px; }
+.emoji-pray_tone1 { background-position: -720px -100px; }
+.emoji-pray_tone2 { background-position: -720px -120px; }
+.emoji-pray_tone3 { background-position: -720px -140px; }
+.emoji-pray_tone4 { background-position: -720px -160px; }
+.emoji-pray_tone5 { background-position: -720px -180px; }
+.emoji-prayer_beads { background-position: -720px -200px; }
+.emoji-pregnant_woman { background-position: -720px -220px; }
+.emoji-pregnant_woman_tone1 { background-position: -720px -240px; }
+.emoji-pregnant_woman_tone2 { background-position: -720px -260px; }
+.emoji-pregnant_woman_tone3 { background-position: -720px -280px; }
+.emoji-pregnant_woman_tone4 { background-position: -720px -300px; }
+.emoji-pregnant_woman_tone5 { background-position: -720px -320px; }
+.emoji-prince { background-position: -720px -340px; }
+.emoji-prince_tone1 { background-position: -720px -360px; }
+.emoji-prince_tone2 { background-position: -720px -380px; }
+.emoji-prince_tone3 { background-position: -720px -400px; }
+.emoji-prince_tone4 { background-position: -720px -420px; }
+.emoji-prince_tone5 { background-position: -720px -440px; }
+.emoji-princess { background-position: -720px -460px; }
+.emoji-princess_tone1 { background-position: -720px -480px; }
+.emoji-princess_tone2 { background-position: -720px -500px; }
+.emoji-princess_tone3 { background-position: -720px -520px; }
+.emoji-princess_tone4 { background-position: -720px -540px; }
+.emoji-princess_tone5 { background-position: -720px -560px; }
+.emoji-printer { background-position: -720px -580px; }
+.emoji-projector { background-position: -720px -600px; }
+.emoji-punch { background-position: -720px -620px; }
+.emoji-punch_tone1 { background-position: -720px -640px; }
+.emoji-punch_tone2 { background-position: -720px -660px; }
+.emoji-punch_tone3 { background-position: -720px -680px; }
+.emoji-punch_tone4 { background-position: -720px -700px; }
+.emoji-punch_tone5 { background-position: 0 -720px; }
+.emoji-purple_heart { background-position: -20px -720px; }
+.emoji-purse { background-position: -40px -720px; }
+.emoji-pushpin { background-position: -60px -720px; }
+.emoji-put_litter_in_its_place { background-position: -80px -720px; }
+.emoji-question { background-position: -100px -720px; }
+.emoji-rabbit { background-position: -120px -720px; }
+.emoji-rabbit2 { background-position: -140px -720px; }
+.emoji-race_car { background-position: -160px -720px; }
+.emoji-racehorse { background-position: -180px -720px; }
+.emoji-radio { background-position: -200px -720px; }
+.emoji-radio_button { background-position: -220px -720px; }
+.emoji-radioactive { background-position: -240px -720px; }
+.emoji-rage { background-position: -260px -720px; }
+.emoji-railway_car { background-position: -280px -720px; }
+.emoji-railway_track { background-position: -300px -720px; }
+.emoji-rainbow { background-position: -320px -720px; }
+.emoji-raised_back_of_hand { background-position: -340px -720px; }
+.emoji-raised_back_of_hand_tone1 { background-position: -360px -720px; }
+.emoji-raised_back_of_hand_tone2 { background-position: -380px -720px; }
+.emoji-raised_back_of_hand_tone3 { background-position: -400px -720px; }
+.emoji-raised_back_of_hand_tone4 { background-position: -420px -720px; }
+.emoji-raised_back_of_hand_tone5 { background-position: -440px -720px; }
+.emoji-raised_hand { background-position: -460px -720px; }
+.emoji-raised_hand_tone1 { background-position: -480px -720px; }
+.emoji-raised_hand_tone2 { background-position: -500px -720px; }
+.emoji-raised_hand_tone3 { background-position: -520px -720px; }
+.emoji-raised_hand_tone4 { background-position: -540px -720px; }
+.emoji-raised_hand_tone5 { background-position: -560px -720px; }
+.emoji-raised_hands { background-position: -580px -720px; }
+.emoji-raised_hands_tone1 { background-position: -600px -720px; }
+.emoji-raised_hands_tone2 { background-position: -620px -720px; }
+.emoji-raised_hands_tone3 { background-position: -640px -720px; }
+.emoji-raised_hands_tone4 { background-position: -660px -720px; }
+.emoji-raised_hands_tone5 { background-position: -680px -720px; }
+.emoji-raising_hand { background-position: -700px -720px; }
+.emoji-raising_hand_tone1 { background-position: -720px -720px; }
+.emoji-raising_hand_tone2 { background-position: -740px 0; }
+.emoji-raising_hand_tone3 { background-position: -740px -20px; }
+.emoji-raising_hand_tone4 { background-position: -740px -40px; }
+.emoji-raising_hand_tone5 { background-position: -740px -60px; }
+.emoji-ram { background-position: -740px -80px; }
+.emoji-ramen { background-position: -740px -100px; }
+.emoji-rat { background-position: -740px -120px; }
+.emoji-record_button { background-position: -740px -140px; }
+.emoji-recycle { background-position: -740px -160px; }
+.emoji-red_car { background-position: -740px -180px; }
+.emoji-red_circle { background-position: -740px -200px; }
+.emoji-registered { background-position: -740px -220px; }
+.emoji-relaxed { background-position: -740px -240px; }
+.emoji-relieved { background-position: -740px -260px; }
+.emoji-reminder_ribbon { background-position: -740px -280px; }
+.emoji-repeat { background-position: -740px -300px; }
+.emoji-repeat_one { background-position: -740px -320px; }
+.emoji-restroom { background-position: -740px -340px; }
+.emoji-revolving_hearts { background-position: -740px -360px; }
+.emoji-rewind { background-position: -740px -380px; }
+.emoji-rhino { background-position: -740px -400px; }
+.emoji-ribbon { background-position: -740px -420px; }
+.emoji-rice { background-position: -740px -440px; }
+.emoji-rice_ball { background-position: -740px -460px; }
+.emoji-rice_cracker { background-position: -740px -480px; }
+.emoji-rice_scene { background-position: -740px -500px; }
+.emoji-right_facing_fist { background-position: -740px -520px; }
+.emoji-right_facing_fist_tone1 { background-position: -740px -540px; }
+.emoji-right_facing_fist_tone2 { background-position: -740px -560px; }
+.emoji-right_facing_fist_tone3 { background-position: -740px -580px; }
+.emoji-right_facing_fist_tone4 { background-position: -740px -600px; }
+.emoji-right_facing_fist_tone5 { background-position: -740px -620px; }
+.emoji-ring { background-position: -740px -640px; }
+.emoji-robot { background-position: -740px -660px; }
+.emoji-rocket { background-position: -740px -680px; }
+.emoji-rofl { background-position: -740px -700px; }
+.emoji-roller_coaster { background-position: -740px -720px; }
+.emoji-rolling_eyes { background-position: 0 -740px; }
+.emoji-rooster { background-position: -20px -740px; }
+.emoji-rose { background-position: -40px -740px; }
+.emoji-rosette { background-position: -60px -740px; }
+.emoji-rotating_light { background-position: -80px -740px; }
+.emoji-round_pushpin { background-position: -100px -740px; }
+.emoji-rowboat { background-position: -120px -740px; }
+.emoji-rowboat_tone1 { background-position: -140px -740px; }
+.emoji-rowboat_tone2 { background-position: -160px -740px; }
+.emoji-rowboat_tone3 { background-position: -180px -740px; }
+.emoji-rowboat_tone4 { background-position: -200px -740px; }
+.emoji-rowboat_tone5 { background-position: -220px -740px; }
+.emoji-rugby_football { background-position: -240px -740px; }
+.emoji-runner { background-position: -260px -740px; }
+.emoji-runner_tone1 { background-position: -280px -740px; }
+.emoji-runner_tone2 { background-position: -300px -740px; }
+.emoji-runner_tone3 { background-position: -320px -740px; }
+.emoji-runner_tone4 { background-position: -340px -740px; }
+.emoji-runner_tone5 { background-position: -360px -740px; }
+.emoji-running_shirt_with_sash { background-position: -380px -740px; }
+.emoji-sa { background-position: -400px -740px; }
+.emoji-sagittarius { background-position: -420px -740px; }
+.emoji-sailboat { background-position: -440px -740px; }
+.emoji-sake { background-position: -460px -740px; }
+.emoji-salad { background-position: -480px -740px; }
+.emoji-sandal { background-position: -500px -740px; }
+.emoji-santa { background-position: -520px -740px; }
+.emoji-santa_tone1 { background-position: -540px -740px; }
+.emoji-santa_tone2 { background-position: -560px -740px; }
+.emoji-santa_tone3 { background-position: -580px -740px; }
+.emoji-santa_tone4 { background-position: -600px -740px; }
+.emoji-santa_tone5 { background-position: -620px -740px; }
+.emoji-satellite { background-position: -640px -740px; }
+.emoji-satellite_orbital { background-position: -660px -740px; }
+.emoji-saxophone { background-position: -680px -740px; }
+.emoji-scales { background-position: -700px -740px; }
+.emoji-school { background-position: -720px -740px; }
+.emoji-school_satchel { background-position: -740px -740px; }
+.emoji-scissors { background-position: -760px 0; }
+.emoji-scooter { background-position: -760px -20px; }
+.emoji-scorpion { background-position: -760px -40px; }
+.emoji-scorpius { background-position: -760px -60px; }
+.emoji-scream { background-position: -760px -80px; }
+.emoji-scream_cat { background-position: -760px -100px; }
+.emoji-scroll { background-position: -760px -120px; }
+.emoji-seat { background-position: -760px -140px; }
+.emoji-second_place { background-position: -760px -160px; }
+.emoji-secret { background-position: -760px -180px; }
+.emoji-see_no_evil { background-position: -760px -200px; }
+.emoji-seedling { background-position: -760px -220px; }
+.emoji-selfie { background-position: -760px -240px; }
+.emoji-selfie_tone1 { background-position: -760px -260px; }
+.emoji-selfie_tone2 { background-position: -760px -280px; }
+.emoji-selfie_tone3 { background-position: -760px -300px; }
+.emoji-selfie_tone4 { background-position: -760px -320px; }
+.emoji-selfie_tone5 { background-position: -760px -340px; }
+.emoji-seven { background-position: -760px -360px; }
+.emoji-shallow_pan_of_food { background-position: -760px -380px; }
+.emoji-shamrock { background-position: -760px -400px; }
+.emoji-shark { background-position: -760px -420px; }
+.emoji-shaved_ice { background-position: -760px -440px; }
+.emoji-sheep { background-position: -760px -460px; }
+.emoji-shell { background-position: -760px -480px; }
+.emoji-shield { background-position: -760px -500px; }
+.emoji-shinto_shrine { background-position: -760px -520px; }
+.emoji-ship { background-position: -760px -540px; }
+.emoji-shirt { background-position: -760px -560px; }
+.emoji-shopping_bags { background-position: -760px -580px; }
+.emoji-shopping_cart { background-position: -760px -600px; }
+.emoji-shower { background-position: -760px -620px; }
+.emoji-shrimp { background-position: -760px -640px; }
+.emoji-shrug { background-position: -760px -660px; }
+.emoji-shrug_tone1 { background-position: -760px -680px; }
+.emoji-shrug_tone2 { background-position: -760px -700px; }
+.emoji-shrug_tone3 { background-position: -760px -720px; }
+.emoji-shrug_tone4 { background-position: -760px -740px; }
+.emoji-shrug_tone5 { background-position: 0 -760px; }
+.emoji-signal_strength { background-position: -20px -760px; }
+.emoji-six { background-position: -40px -760px; }
+.emoji-six_pointed_star { background-position: -60px -760px; }
+.emoji-ski { background-position: -80px -760px; }
+.emoji-skier { background-position: -100px -760px; }
+.emoji-skull { background-position: -120px -760px; }
+.emoji-skull_crossbones { background-position: -140px -760px; }
+.emoji-sleeping { background-position: -160px -760px; }
+.emoji-sleeping_accommodation { background-position: -180px -760px; }
+.emoji-sleepy { background-position: -200px -760px; }
+.emoji-slight_frown { background-position: -220px -760px; }
+.emoji-slight_smile { background-position: -240px -760px; }
+.emoji-slot_machine { background-position: -260px -760px; }
+.emoji-small_blue_diamond { background-position: -280px -760px; }
+.emoji-small_orange_diamond { background-position: -300px -760px; }
+.emoji-small_red_triangle { background-position: -320px -760px; }
+.emoji-small_red_triangle_down { background-position: -340px -760px; }
+.emoji-smile { background-position: -360px -760px; }
+.emoji-smile_cat { background-position: -380px -760px; }
+.emoji-smiley { background-position: -400px -760px; }
+.emoji-smiley_cat { background-position: -420px -760px; }
+.emoji-smiling_imp { background-position: -440px -760px; }
+.emoji-smirk { background-position: -460px -760px; }
+.emoji-smirk_cat { background-position: -480px -760px; }
+.emoji-smoking { background-position: -500px -760px; }
+.emoji-snail { background-position: -520px -760px; }
+.emoji-snake { background-position: -540px -760px; }
+.emoji-sneezing_face { background-position: -560px -760px; }
+.emoji-snowboarder { background-position: -580px -760px; }
+.emoji-snowflake { background-position: -600px -760px; }
+.emoji-snowman { background-position: -620px -760px; }
+.emoji-snowman2 { background-position: -640px -760px; }
+.emoji-sob { background-position: -660px -760px; }
+.emoji-soccer { background-position: -680px -760px; }
+.emoji-soon { background-position: -700px -760px; }
+.emoji-sos { background-position: -720px -760px; }
+.emoji-sound { background-position: -740px -760px; }
+.emoji-space_invader { background-position: -760px -760px; }
+.emoji-spades { background-position: -780px 0; }
+.emoji-spaghetti { background-position: -780px -20px; }
+.emoji-sparkle { background-position: -780px -40px; }
+.emoji-sparkler { background-position: -780px -60px; }
+.emoji-sparkles { background-position: -780px -80px; }
+.emoji-sparkling_heart { background-position: -780px -100px; }
+.emoji-speak_no_evil { background-position: -780px -120px; }
+.emoji-speaker { background-position: -780px -140px; }
+.emoji-speaking_head { background-position: -780px -160px; }
+.emoji-speech_balloon { background-position: -780px -180px; }
+.emoji-speedboat { background-position: -780px -200px; }
+.emoji-spider { background-position: -780px -220px; }
+.emoji-spider_web { background-position: -780px -240px; }
+.emoji-spoon { background-position: -780px -260px; }
+.emoji-spy { background-position: -780px -280px; }
+.emoji-spy_tone1 { background-position: -780px -300px; }
+.emoji-spy_tone2 { background-position: -780px -320px; }
+.emoji-spy_tone3 { background-position: -780px -340px; }
+.emoji-spy_tone4 { background-position: -780px -360px; }
+.emoji-spy_tone5 { background-position: -780px -380px; }
+.emoji-squid { background-position: -780px -400px; }
+.emoji-stadium { background-position: -780px -420px; }
+.emoji-star { background-position: -780px -440px; }
+.emoji-star2 { background-position: -780px -460px; }
+.emoji-star_and_crescent { background-position: -780px -480px; }
+.emoji-star_of_david { background-position: -780px -500px; }
+.emoji-stars { background-position: -780px -520px; }
+.emoji-station { background-position: -780px -540px; }
+.emoji-statue_of_liberty { background-position: -780px -560px; }
+.emoji-steam_locomotive { background-position: -780px -580px; }
+.emoji-stew { background-position: -780px -600px; }
+.emoji-stop_button { background-position: -780px -620px; }
+.emoji-stopwatch { background-position: -780px -640px; }
+.emoji-straight_ruler { background-position: -780px -660px; }
+.emoji-strawberry { background-position: -780px -680px; }
+.emoji-stuck_out_tongue { background-position: -780px -700px; }
+.emoji-stuck_out_tongue_closed_eyes { background-position: -780px -720px; }
+.emoji-stuck_out_tongue_winking_eye { background-position: -780px -740px; }
+.emoji-stuffed_flatbread { background-position: -780px -760px; }
+.emoji-sun_with_face { background-position: 0 -780px; }
+.emoji-sunflower { background-position: -20px -780px; }
+.emoji-sunglasses { background-position: -40px -780px; }
+.emoji-sunny { background-position: -60px -780px; }
+.emoji-sunrise { background-position: -80px -780px; }
+.emoji-sunrise_over_mountains { background-position: -100px -780px; }
+.emoji-surfer { background-position: -120px -780px; }
+.emoji-surfer_tone1 { background-position: -140px -780px; }
+.emoji-surfer_tone2 { background-position: -160px -780px; }
+.emoji-surfer_tone3 { background-position: -180px -780px; }
+.emoji-surfer_tone4 { background-position: -200px -780px; }
+.emoji-surfer_tone5 { background-position: -220px -780px; }
+.emoji-sushi { background-position: -240px -780px; }
+.emoji-suspension_railway { background-position: -260px -780px; }
+.emoji-sweat { background-position: -280px -780px; }
+.emoji-sweat_drops { background-position: -300px -780px; }
+.emoji-sweat_smile { background-position: -320px -780px; }
+.emoji-sweet_potato { background-position: -340px -780px; }
+.emoji-swimmer { background-position: -360px -780px; }
+.emoji-swimmer_tone1 { background-position: -380px -780px; }
+.emoji-swimmer_tone2 { background-position: -400px -780px; }
+.emoji-swimmer_tone3 { background-position: -420px -780px; }
+.emoji-swimmer_tone4 { background-position: -440px -780px; }
+.emoji-swimmer_tone5 { background-position: -460px -780px; }
+.emoji-symbols { background-position: -480px -780px; }
+.emoji-synagogue { background-position: -500px -780px; }
+.emoji-syringe { background-position: -520px -780px; }
+.emoji-taco { background-position: -540px -780px; }
+.emoji-tada { background-position: -560px -780px; }
+.emoji-tanabata_tree { background-position: -580px -780px; }
+.emoji-tangerine { background-position: -600px -780px; }
+.emoji-taurus { background-position: -620px -780px; }
+.emoji-taxi { background-position: -640px -780px; }
+.emoji-tea { background-position: -660px -780px; }
+.emoji-telephone { background-position: -680px -780px; }
+.emoji-telephone_receiver { background-position: -700px -780px; }
+.emoji-telescope { background-position: -720px -780px; }
+.emoji-ten { background-position: -740px -780px; }
+.emoji-tennis { background-position: -760px -780px; }
+.emoji-tent { background-position: -780px -780px; }
+.emoji-thermometer { background-position: -800px 0; }
+.emoji-thermometer_face { background-position: -800px -20px; }
+.emoji-thinking { background-position: -800px -40px; }
+.emoji-third_place { background-position: -800px -60px; }
+.emoji-thought_balloon { background-position: -800px -80px; }
+.emoji-three { background-position: -800px -100px; }
+.emoji-thumbsdown { background-position: -800px -120px; }
+.emoji-thumbsdown_tone1 { background-position: -800px -140px; }
+.emoji-thumbsdown_tone2 { background-position: -800px -160px; }
+.emoji-thumbsdown_tone3 { background-position: -800px -180px; }
+.emoji-thumbsdown_tone4 { background-position: -800px -200px; }
+.emoji-thumbsdown_tone5 { background-position: -800px -220px; }
+.emoji-thumbsup { background-position: -800px -240px; }
+.emoji-thumbsup_tone1 { background-position: -800px -260px; }
+.emoji-thumbsup_tone2 { background-position: -800px -280px; }
+.emoji-thumbsup_tone3 { background-position: -800px -300px; }
+.emoji-thumbsup_tone4 { background-position: -800px -320px; }
+.emoji-thumbsup_tone5 { background-position: -800px -340px; }
+.emoji-thunder_cloud_rain { background-position: -800px -360px; }
+.emoji-ticket { background-position: -800px -380px; }
+.emoji-tickets { background-position: -800px -400px; }
+.emoji-tiger { background-position: -800px -420px; }
+.emoji-tiger2 { background-position: -800px -440px; }
+.emoji-timer { background-position: -800px -460px; }
+.emoji-tired_face { background-position: -800px -480px; }
+.emoji-tm { background-position: -800px -500px; }
+.emoji-toilet { background-position: -800px -520px; }
+.emoji-tokyo_tower { background-position: -800px -540px; }
+.emoji-tomato { background-position: -800px -560px; }
+.emoji-tone1 { background-position: -800px -580px; }
+.emoji-tone2 { background-position: -800px -600px; }
+.emoji-tone3 { background-position: -800px -620px; }
+.emoji-tone4 { background-position: -800px -640px; }
+.emoji-tone5 { background-position: -800px -660px; }
+.emoji-tongue { background-position: -800px -680px; }
+.emoji-tools { background-position: -800px -700px; }
+.emoji-top { background-position: -800px -720px; }
+.emoji-tophat { background-position: -800px -740px; }
+.emoji-track_next { background-position: -800px -760px; }
+.emoji-track_previous { background-position: -800px -780px; }
+.emoji-trackball { background-position: 0 -800px; }
+.emoji-tractor { background-position: -20px -800px; }
+.emoji-traffic_light { background-position: -40px -800px; }
+.emoji-train { background-position: -60px -800px; }
+.emoji-train2 { background-position: -80px -800px; }
+.emoji-tram { background-position: -100px -800px; }
+.emoji-triangular_flag_on_post { background-position: -120px -800px; }
+.emoji-triangular_ruler { background-position: -140px -800px; }
+.emoji-trident { background-position: -160px -800px; }
+.emoji-triumph { background-position: -180px -800px; }
+.emoji-trolleybus { background-position: -200px -800px; }
+.emoji-trophy { background-position: -220px -800px; }
+.emoji-tropical_drink { background-position: -240px -800px; }
+.emoji-tropical_fish { background-position: -260px -800px; }
+.emoji-truck { background-position: -280px -800px; }
+.emoji-trumpet { background-position: -300px -800px; }
+.emoji-tulip { background-position: -320px -800px; }
+.emoji-tumbler_glass { background-position: -340px -800px; }
+.emoji-turkey { background-position: -360px -800px; }
+.emoji-turtle { background-position: -380px -800px; }
+.emoji-tv { background-position: -400px -800px; }
+.emoji-twisted_rightwards_arrows { background-position: -420px -800px; }
+.emoji-two { background-position: -440px -800px; }
+.emoji-two_hearts { background-position: -460px -800px; }
+.emoji-two_men_holding_hands { background-position: -480px -800px; }
+.emoji-two_women_holding_hands { background-position: -500px -800px; }
+.emoji-u5272 { background-position: -520px -800px; }
+.emoji-u5408 { background-position: -540px -800px; }
+.emoji-u55b6 { background-position: -560px -800px; }
+.emoji-u6307 { background-position: -580px -800px; }
+.emoji-u6708 { background-position: -600px -800px; }
+.emoji-u6709 { background-position: -620px -800px; }
+.emoji-u6e80 { background-position: -640px -800px; }
+.emoji-u7121 { background-position: -660px -800px; }
+.emoji-u7533 { background-position: -680px -800px; }
+.emoji-u7981 { background-position: -700px -800px; }
+.emoji-u7a7a { background-position: -720px -800px; }
+.emoji-umbrella { background-position: -740px -800px; }
+.emoji-umbrella2 { background-position: -760px -800px; }
+.emoji-unamused { background-position: -780px -800px; }
+.emoji-underage { background-position: -800px -800px; }
+.emoji-unicorn { background-position: -820px 0; }
+.emoji-unlock { background-position: -820px -20px; }
+.emoji-up { background-position: -820px -40px; }
+.emoji-upside_down { background-position: -820px -60px; }
+.emoji-urn { background-position: -820px -80px; }
+.emoji-v { background-position: -820px -100px; }
+.emoji-v_tone1 { background-position: -820px -120px; }
+.emoji-v_tone2 { background-position: -820px -140px; }
+.emoji-v_tone3 { background-position: -820px -160px; }
+.emoji-v_tone4 { background-position: -820px -180px; }
+.emoji-v_tone5 { background-position: -820px -200px; }
+.emoji-vertical_traffic_light { background-position: -820px -220px; }
+.emoji-vhs { background-position: -820px -240px; }
+.emoji-vibration_mode { background-position: -820px -260px; }
+.emoji-video_camera { background-position: -820px -280px; }
+.emoji-video_game { background-position: -820px -300px; }
+.emoji-violin { background-position: -820px -320px; }
+.emoji-virgo { background-position: -820px -340px; }
+.emoji-volcano { background-position: -820px -360px; }
+.emoji-volleyball { background-position: -820px -380px; }
+.emoji-vs { background-position: -820px -400px; }
+.emoji-vulcan { background-position: -820px -420px; }
+.emoji-vulcan_tone1 { background-position: -820px -440px; }
+.emoji-vulcan_tone2 { background-position: -820px -460px; }
+.emoji-vulcan_tone3 { background-position: -820px -480px; }
+.emoji-vulcan_tone4 { background-position: -820px -500px; }
+.emoji-vulcan_tone5 { background-position: -820px -520px; }
+.emoji-walking { background-position: -820px -540px; }
+.emoji-walking_tone1 { background-position: -820px -560px; }
+.emoji-walking_tone2 { background-position: -820px -580px; }
+.emoji-walking_tone3 { background-position: -820px -600px; }
+.emoji-walking_tone4 { background-position: -820px -620px; }
+.emoji-walking_tone5 { background-position: -820px -640px; }
+.emoji-waning_crescent_moon { background-position: -820px -660px; }
+.emoji-waning_gibbous_moon { background-position: -820px -680px; }
+.emoji-warning { background-position: -820px -700px; }
+.emoji-wastebasket { background-position: -820px -720px; }
+.emoji-watch { background-position: -820px -740px; }
+.emoji-water_buffalo { background-position: -820px -760px; }
+.emoji-water_polo { background-position: -820px -780px; }
+.emoji-water_polo_tone1 { background-position: -820px -800px; }
+.emoji-water_polo_tone2 { background-position: 0 -820px; }
+.emoji-water_polo_tone3 { background-position: -20px -820px; }
+.emoji-water_polo_tone4 { background-position: -40px -820px; }
+.emoji-water_polo_tone5 { background-position: -60px -820px; }
+.emoji-watermelon { background-position: -80px -820px; }
+.emoji-wave { background-position: -100px -820px; }
+.emoji-wave_tone1 { background-position: -120px -820px; }
+.emoji-wave_tone2 { background-position: -140px -820px; }
+.emoji-wave_tone3 { background-position: -160px -820px; }
+.emoji-wave_tone4 { background-position: -180px -820px; }
+.emoji-wave_tone5 { background-position: -200px -820px; }
+.emoji-wavy_dash { background-position: -220px -820px; }
+.emoji-waxing_crescent_moon { background-position: -240px -820px; }
+.emoji-waxing_gibbous_moon { background-position: -260px -820px; }
+.emoji-wc { background-position: -280px -820px; }
+.emoji-weary { background-position: -300px -820px; }
+.emoji-wedding { background-position: -320px -820px; }
+.emoji-whale { background-position: -340px -820px; }
+.emoji-whale2 { background-position: -360px -820px; }
+.emoji-wheel_of_dharma { background-position: -380px -820px; }
+.emoji-wheelchair { background-position: -400px -820px; }
+.emoji-white_check_mark { background-position: -420px -820px; }
+.emoji-white_circle { background-position: -440px -820px; }
+.emoji-white_flower { background-position: -460px -820px; }
+.emoji-white_large_square { background-position: -480px -820px; }
+.emoji-white_medium_small_square { background-position: -500px -820px; }
+.emoji-white_medium_square { background-position: -520px -820px; }
+.emoji-white_small_square { background-position: -540px -820px; }
+.emoji-white_square_button { background-position: -560px -820px; }
+.emoji-white_sun_cloud { background-position: -580px -820px; }
+.emoji-white_sun_rain_cloud { background-position: -600px -820px; }
+.emoji-white_sun_small_cloud { background-position: -620px -820px; }
+.emoji-wilted_rose { background-position: -640px -820px; }
+.emoji-wind_blowing_face { background-position: -660px -820px; }
+.emoji-wind_chime { background-position: -680px -820px; }
+.emoji-wine_glass { background-position: -700px -820px; }
+.emoji-wink { background-position: -720px -820px; }
+.emoji-wolf { background-position: -740px -820px; }
+.emoji-woman { background-position: -760px -820px; }
+.emoji-woman_tone1 { background-position: -780px -820px; }
+.emoji-woman_tone2 { background-position: -800px -820px; }
+.emoji-woman_tone3 { background-position: -820px -820px; }
+.emoji-woman_tone4 { background-position: -840px 0; }
+.emoji-woman_tone5 { background-position: -840px -20px; }
+.emoji-womans_clothes { background-position: -840px -40px; }
+.emoji-womans_hat { background-position: -840px -60px; }
+.emoji-womens { background-position: -840px -80px; }
+.emoji-worried { background-position: -840px -100px; }
+.emoji-wrench { background-position: -840px -120px; }
+.emoji-wrestlers { background-position: -840px -140px; }
+.emoji-wrestlers_tone1 { background-position: -840px -160px; }
+.emoji-wrestlers_tone2 { background-position: -840px -180px; }
+.emoji-wrestlers_tone3 { background-position: -840px -200px; }
+.emoji-wrestlers_tone4 { background-position: -840px -220px; }
+.emoji-wrestlers_tone5 { background-position: -840px -240px; }
+.emoji-writing_hand { background-position: -840px -260px; }
+.emoji-writing_hand_tone1 { background-position: -840px -280px; }
+.emoji-writing_hand_tone2 { background-position: -840px -300px; }
+.emoji-writing_hand_tone3 { background-position: -840px -320px; }
+.emoji-writing_hand_tone4 { background-position: -840px -340px; }
+.emoji-writing_hand_tone5 { background-position: -840px -360px; }
+.emoji-x { background-position: -840px -380px; }
+.emoji-yellow_heart { background-position: -840px -400px; }
+.emoji-yen { background-position: -840px -420px; }
+.emoji-yin_yang { background-position: -840px -440px; }
+.emoji-yum { background-position: -840px -460px; }
+.emoji-zap { background-position: -840px -480px; }
+.emoji-zero { background-position: -840px -500px; }
+.emoji-zipper_mouth { background-position: -840px -520px; }
+.emoji-100 { background-position: -840px -540px; }
+
+.emoji-icon {
+  background-image: image-url('emoji.png');
+  background-repeat: no-repeat;
+  color: transparent;
+  text-indent: -99em;
+  height: 20px;
+  width: 20px;
+
+  @media only screen and (-webkit-min-device-pixel-ratio: 2),
+         only screen and (min--moz-device-pixel-ratio: 2),
+         only screen and (-o-min-device-pixel-ratio: 2/1),
+         only screen and (min-device-pixel-ratio: 2),
+         only screen and (min-resolution: 192dpi),
+         only screen and (min-resolution: 2dppx) {
+    background-image: image-url('emoji@2x.png');
+    background-size: 860px 840px;
+  }
+}
diff --git a/app/assets/stylesheets/framework/emojis.scss b/app/assets/stylesheets/framework/emojis.scss
new file mode 100644
index 00000000000..d86ae57cd9a
--- /dev/null
+++ b/app/assets/stylesheets/framework/emojis.scss
@@ -0,0 +1,7 @@
+gl-emoji {
+  display: inline-block;
+  display: inline-flex;
+  vertical-align: middle;
+  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 1.5em;
+}
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index f49d7b92a00..ffece53a093 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -19,7 +19,7 @@
 
   .file-title {
     position: relative;
-    background-color: $background-color;
+    background-color: $gray-light;
     border-bottom: 1px solid $border-color;
     margin: 0;
     text-align: left;
@@ -59,10 +59,10 @@
   }
 
   .file-content {
-    background: #fff;
+    background: $white-light;
 
     &.image_file {
-      background: #eee;
+      background: $file-image-bg;
       text-align: center;
 
       img {
@@ -84,8 +84,8 @@
     }
 
     &.blob-no-preview {
-      background: #eee;
-      text-shadow: 0 1px 2px #fff;
+      background: $blob-bg;
+      text-shadow: 0 1px 2px $white-light;
       padding: 100px 0;
     }
 
@@ -99,7 +99,7 @@
       }
 
       tr {
-        border-bottom: 1px solid #eee;
+        border-bottom: 1px solid $blame-border;
       }
 
       td {
@@ -120,7 +120,7 @@
 
       td.line-numbers {
         float: none;
-        border-left: 1px solid #ddd;
+        border-left: 1px solid $blame-line-numbers-border;
 
         i {
           float: none;
@@ -134,7 +134,7 @@
     }
 
     &.logs {
-      background: #eee;
+      background: $logs-bg;
       max-height: 700px;
       overflow-y: auto;
 
@@ -143,14 +143,14 @@
         padding: 10px 0;
         border-left: 1px solid $border-color;
         margin-bottom: 0;
-        background: white;
+        background: $white-light;
 
         li {
-          color: #888;
+          color: $logs-li-color;
 
           p {
             margin: 0;
-            color: #333;
+            color: $logs-p-color;
             line-height: 24px;
             padding-left: 10px;
           }
@@ -182,3 +182,96 @@ span.idiff {
     border-bottom-right-radius: 2px;
   }
 }
+
+.file-stats {
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 10px 0;
+
+    li {
+      padding: 3px 0;
+      line-height: 20px;
+    }
+  }
+
+  .new-file {
+    a {
+      color: $gl-text-green;
+    }
+  }
+
+  .renamed-file {
+    a {
+      color: $gl-text-orange;
+    }
+  }
+
+  .deleted-file {
+    a {
+      color: $gl-text-red;
+    }
+  }
+
+  .edit-file {
+    a {
+      color: $gl-text-color;
+    }
+  }
+
+  a {
+    text-decoration: none;
+
+    .new-file {
+      color: $notify-new-file;
+    }
+
+    .deleted-file {
+      color: $notify-deleted-file;
+    }
+  }
+}
+
+.file-title-flex-parent {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: $gray-light;
+  border-bottom: 1px solid $border-color;
+  padding: 5px $gl-padding;
+  margin: 0;
+  border-radius: 3px 3px 0 0;
+
+  .file-header-content {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-right: 30px;
+    position: relative;
+  }
+
+  .btn-clipboard {
+    position: absolute;
+    right: 0;
+  }
+
+  a {
+    color: $gl-text-color;
+  }
+
+  small {
+    margin: 0 10px 0 0;
+  }
+
+  .file-actions {
+    white-space: nowrap;
+
+    .btn {
+      padding: 0 10px;
+      font-size: 13px;
+      line-height: 28px;
+      display: inline-block;
+      float: none;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index 19827943385..51805c5d734 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -1,10 +1,24 @@
 .filter-item {
-  margin-right: 6px;
   vertical-align: top;
 
   &.reset-filters {
     padding: 7px;
   }
+
+  &.update-issues-btn {
+    float: right;
+    margin-right: 0;
+
+    @media (max-width: $screen-xs-max) {
+      float: none;
+    }
+  }
+}
+
+.filters-section {
+  @media (max-width: $screen-xs-max) {
+    display: inline-block;
+  }
 }
 
 @media (min-width: $screen-sm-min) {
@@ -14,6 +28,20 @@
       width: 132px;
     }
   }
+
+  .filter-item:not(:last-child) {
+    margin-right: 6px;
+  }
+
+  .sort-filter {
+    display: inline-block;
+    float: right;
+  }
+
+  .dropdown-menu-sort {
+    left: auto;
+    right: 0;
+  }
 }
 
 @media (max-width: $screen-xs-max) {
@@ -21,5 +49,306 @@
     display: block;
     margin: 0 0 10px;
   }
+
+  .dropdown-menu-toggle,
+  .update-issues-btn .btn {
+    width: 100%;
+  }
 }
 
+.filtered-search-container {
+  display: -webkit-flex;
+  display: flex;
+
+  @media (max-width: $screen-xs-min) {
+    -webkit-flex-direction: column;
+    flex-direction: column;
+  }
+
+  .tokens-container {
+    display: -webkit-flex;
+    display: flex;
+    flex: 1;
+    -webkit-flex: 1;
+    padding-left: 30px;
+    position: relative;
+    margin-bottom: 0;
+  }
+
+  .input-token {
+    max-width: 200px;
+  }
+
+  .input-token:only-child,
+  .input-token:last-child {
+    flex: 1;
+    -webkit-flex: 1;
+    max-width: initial;
+  }
+}
+
+.filtered-search-token,
+.filtered-search-term {
+  display: -webkit-flex;
+  display: flex;
+  margin-top: 5px;
+  margin-bottom: 5px;
+
+  .selectable {
+    display: -webkit-flex;
+    display: flex;
+  }
+
+  .name,
+  .value {
+    display: inline-block;
+    padding: 2px 7px;
+  }
+
+  .name {
+    background-color: $filter-name-resting-color;
+    color: $filter-name-text-color;
+    border-radius: 2px 0 0 2px;
+    margin-right: 1px;
+    text-transform: capitalize;
+  }
+
+  .value {
+    background-color: $white-normal;
+    color: $filter-value-text-color;
+    border-radius: 0 2px 2px 0;
+    margin-right: 5px;
+  }
+
+  .selected {
+    .name {
+      background-color: $filter-name-selected-color;
+    }
+
+    .value {
+      background-color: $filter-value-selected-color;
+    }
+  }
+}
+
+.filtered-search-term {
+  .name {
+    background-color: inherit;
+    color: $black;
+    text-transform: none;
+  }
+
+  .selectable {
+    cursor: text;
+  }
+}
+
+.scroll-container {
+  display: -webkit-flex;
+  display: flex;
+  overflow-x: auto;
+  white-space: nowrap;
+  width: 100%;
+}
+
+.filtered-search-input-container {
+  display: -webkit-flex;
+  display: flex;
+  position: relative;
+  width: 100%;
+  border: 1px solid $border-color;
+  background-color: $white-light;
+
+  @media (max-width: $screen-xs-min) {
+    -webkit-flex: 1 1 auto;
+    flex: 1 1 auto;
+    margin-bottom: 10px;
+
+    .dropdown-menu {
+      width: auto;
+      left: 0;
+      right: 0;
+      max-width: none;
+      min-width: 100%;
+    }
+  }
+
+  &:hover {
+    @extend .form-control:hover;
+  }
+
+  &.focus,
+  &.focus:hover {
+    border-color: $dropdown-input-focus-border;
+    box-shadow: 0 0 4px $search-input-focus-shadow-color;
+  }
+
+  &.focus .fa-filter {
+    color: $common-gray-dark;
+  }
+
+  .form-control {
+    position: relative;
+    min-width: 200px;
+    padding: 5px 25px 6px 0;
+    border-color: transparent;
+
+    &:focus,
+    &:hover {
+      outline: none;
+      border-color: transparent;
+      box-shadow: none;
+    }
+  }
+
+  .fa-filter {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    color: $gray-darkest;
+  }
+
+  .fa-times {
+    right: 10px;
+    color: $gray-darkest;
+  }
+
+  .clear-search {
+    width: 35px;
+    background-color: $white-light;
+    border: none;
+    position: absolute;
+    right: 0;
+    height: 100%;
+    outline: none;
+    z-index: 1;
+
+    &:hover .fa-times {
+      color: $common-gray-dark;
+    }
+  }
+}
+
+.filter-dropdown-container {
+  display: -webkit-flex;
+  display: flex;
+
+  .dropdown-toggle {
+    line-height: 22px;
+  }
+}
+
+.dropdown-menu .filter-dropdown-item {
+  padding: 0;
+}
+
+.filter-dropdown {
+  max-height: 215px;
+  overflow: auto;
+}
+
+@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+  .issues-details-filters {
+    .dropdown-menu-toggle {
+      width: 100px;
+    }
+  }
+}
+
+@media (max-width: $screen-xs-max) {
+  .issues-details-filters {
+    padding: 0 0 10px;
+    background-color: $white-light;
+    border-top: 0;
+  }
+}
+
+@media (max-width: $screen-xs) {
+  .filter-dropdown-container {
+    .dropdown-toggle,
+    .dropdown {
+      width: 100%;
+    }
+
+    .dropdown {
+      margin-left: 0;
+    }
+
+    .fa-chevron-down {
+      position: absolute;
+      right: 10px;
+      top: 10px;
+    }
+  }
+}
+
+%filter-dropdown-item-btn-hover {
+  background-color: $dropdown-hover-color;
+  color: $white-light;
+  text-decoration: none;
+
+  .avatar {
+    border-color: $white-light;
+  }
+}
+
+.filter-dropdown-item {
+  .btn {
+    border: none;
+    width: 100%;
+    text-align: left;
+    padding: 8px 16px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    border-radius: 0;
+
+    .fa {
+      width: 15px;
+    }
+
+    .dropdown-label-box {
+      border-color: $white-light;
+      border-style: solid;
+      border-width: 1px;
+      width: 17px;
+      height: 17px;
+    }
+
+    &:hover,
+    &:focus {
+      @extend %filter-dropdown-item-btn-hover;
+    }
+  }
+
+  .dropdown-light-content {
+    font-size: 14px;
+    font-weight: 400;
+  }
+
+  .dropdown-user {
+    display: -webkit-flex;
+    display: flex;
+  }
+
+  .dropdown-user-details {
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+
+    &> span {
+      white-space: normal;
+      word-break: break-all;
+    }
+  }
+}
+
+.filter-dropdown-item.dropdown-active {
+  .btn {
+    @extend %filter-dropdown-item-btn-hover;
+  }
+}
+
+.filter-dropdown-loading {
+  padding: 8px 16px;
+}
diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss
index a9006de6d3e..eadb9409fee 100644
--- a/app/assets/stylesheets/framework/flash.scss
+++ b/app/assets/stylesheets/framework/flash.scss
@@ -38,7 +38,7 @@
   }
 }
 
-@media (max-width: $screen-md-min) {
+@media (max-width: $screen-sm-max) {
   ul.notes {
     .flash-container.timeline-content {
       margin-left: 0;
diff --git a/app/assets/stylesheets/framework/fonts.scss b/app/assets/stylesheets/framework/fonts.scss
deleted file mode 100644
index 5f9685bc71a..00000000000
--- a/app/assets/stylesheets/framework/fonts.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-// Disabling "SpaceAfterPropertyColon" linter because the linter doesn't like
-// the way the `src` property is formatted in this file.
-// scss-lint:disable SpaceAfterPropertyColon
-
-/* latin-ext */
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 300;
-  src:
-    local('Source Sans Pro Light'),
-    local('SourceSansPro-Light'),
-    font-url('SourceSansPro-Light.ttf.woff2') format('woff2'),
-    font-url('SourceSansPro-Light.ttf.woff') format('woff');
-}
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 400;
-  src:
-    local('Source Sans Pro'),
-    local('SourceSansPro-Regular'),
-    font-url('SourceSansPro-Regular.ttf.woff2') format('woff2'),
-    font-url('SourceSansPro-Regular.ttf.woff') format('woff');
-}
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 600;
-  src:
-    local('Source Sans Pro Semibold'),
-    local('SourceSansPro-Semibold'),
-    font-url('SourceSansPro-Semibold.ttf.woff2') format('woff2'),
-    font-url('SourceSansPro-Semibold.ttf.woff') format('woff');
-}
-@font-face {
-  font-family: 'Source Sans Pro';
-  font-style: normal;
-  font-weight: 700;
-  src:
-    local('Source Sans Pro Bold'),
-    local('SourceSansPro-Bold'),
-    font-url('SourceSansPro-Bold.ttf.woff2') format('woff2'),
-    font-url('SourceSansPro-Bold.ttf.woff') format('woff');
-}
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 2d46b099a4a..432024779fd 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -7,9 +7,9 @@ input {
 }
 
 input[type='text'].danger {
-  background: #f2dede!important;
-  border-color: #d66;
-  text-shadow: 0 1px 1px #fff;
+  background: $input-danger-bg !important;
+  border-color: $input-danger-border;
+  text-shadow: 0 1px 1px $white-light;
 }
 
 .datetime-controls {
@@ -22,7 +22,7 @@ input[type='text'].danger {
   margin-top: 0;
   margin-bottom: -$gl-padding;
   padding: $gl-padding;
-  background-color: $background-color;
+  background-color: $gray-light;
   border-top: 1px solid $border-color;
 }
 
@@ -68,6 +68,50 @@ label {
   }
 }
 
+.help-form .form-group {
+  margin-left: 0;
+  margin-right: 0;
+
+  .control-label {
+    font-weight: bold;
+    padding-top: 4px;
+  }
+
+  .form-control {
+    height: 29px;
+    background: $white-light;
+    font-family: $monospace_font;
+  }
+
+  .input-group-btn .btn {
+    padding: 3px $gl-btn-padding;
+    background-color: $gray-light;
+    border: 1px solid $border-color;
+  }
+
+  .text-block {
+    line-height: 0.8;
+    padding-top: 9px;
+
+    code {
+      line-height: 1.8;
+    }
+
+    img {
+      margin-right: $gl-padding;
+    }
+  }
+
+  @media(max-width: $screen-xs-max) {
+    padding: 0 $gl-padding;
+
+    .control-label,
+    .text-block {
+      padding-left: 0;
+    }
+  }
+}
+
 .fieldset-form fieldset {
   margin-bottom: 20px;
 }
@@ -109,7 +153,7 @@ label {
 }
 
 .form-control::-webkit-input-placeholder {
-  color: $gl-placeholder-color;
+  color: $gl-text-color-secondary;
 }
 
 .input-group {
@@ -119,7 +163,7 @@ label {
   }
 
   .input-group-addon {
-    background-color: #f7f8fa;
+    background-color: $input-group-addon-bg;
   }
 
   .input-group-addon:not(:first-child):not(:last-child) {
@@ -133,37 +177,45 @@ label {
 }
 
 .gl-field-error {
-  color: $red-normal;
+  color: $red-500;
 }
 
 .gl-show-field-errors {
   .gl-field-success-outline {
-    border: 1px solid $green-normal;
+    border: 1px solid $green-600;
 
     &:focus {
-      box-shadow: 0 0 0 1px $green-normal inset, 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 4px 0 $green-normal;
+      box-shadow: 0 0 0 1px $green-600 inset, 0 1px 1px $gl-field-focus-shadow inset, 0 0 4px 0 $green-600;
       border: 0 none;
     }
   }
 
   .gl-field-error-outline {
-    border: 1px solid $red-normal;
+    border: 1px solid $red-500;
 
     &:focus {
-      box-shadow: 0 0 0 1px $red-normal inset, 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 4px 0 rgba(210, 40, 82, 0.6);
+      box-shadow: 0 0 0 1px $red-500 inset, 0 1px 1px $gl-field-focus-shadow inset, 0 0 4px 0 $gl-field-focus-shadow-error;
       border: 0 none;
     }
   }
 
   .gl-field-success-message {
-    color: $green-normal;
+    color: $green-600;
   }
 
   .gl-field-error-message {
-    color: $red-normal;
+    color: $red-500;
   }
 
   .gl-field-hint {
     color: $gl-text-color;
   }
 }
+
+@media(max-width: $screen-xs-max) {
+  .remember-me {
+    .remember-me-checkbox {
+      margin-top: 0;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/framework/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss
deleted file mode 100644
index 91ab1503439..00000000000
--- a/app/assets/stylesheets/framework/gitlab-theme.scss
+++ /dev/null
@@ -1,122 +0,0 @@
-/**
- * Styles the GitLab application with a specific color theme
- *
- * $color-light  -
- * $color        -
- * $color-darker -
- * $color-dark   -
- */
-@mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) {
-  .page-with-sidebar {
-    .toggle-nav-collapse,
-    .pin-nav-btn {
-      color: $color-light;
-
-      &:hover {
-        color: $white-light;
-      }
-    }
-
-    .sidebar-wrapper {
-      background: $color-darker;
-    }
-
-    .sidebar-header,
-    .sidebar-action-buttons {
-      color: $color-light;
-      background-color: lighten($color-darker, 5%);
-    }
-
-    .nav-sidebar {
-      li {
-        a {
-          color: $color-light;
-
-          &:hover,
-          &:focus,
-          &:active {
-            background: $color-dark;
-          }
-
-          i {
-            color: $color-light;
-          }
-
-          path,
-          polygon {
-            fill: $color-light;
-          }
-
-          .count {
-            color: $color-light;
-            background: $color-dark;
-          }
-
-          svg {
-            position: relative;
-            top: 3px;
-          }
-        }
-
-        &.separate-item {
-          border-top: 1px solid $color;
-        }
-
-        &.active a {
-          color: $white-light;
-          background: $color-dark;
-
-          &.no-highlight {
-            border: none;
-          }
-
-          i {
-            color: $white-light;
-          }
-
-          path,
-          polygon {
-            fill: $white-light;
-          }
-        }
-      }
-
-    }
-  }
-}
-
-$theme-charcoal: #3d454d;
-$theme-charcoal-dark: #383f45;
-$theme-charcoal-text: #b9bbbe;
-
-$theme-blue: #2980b9;
-$theme-graphite: #666;
-$theme-gray: #373737;
-$theme-green: #019875;
-$theme-violet: #548;
-
-body {
-  &.ui_blue {
-    @include gitlab-theme(#becde9, $theme-blue, #1970a9, #096099);
-  }
-
-  &.ui_charcoal {
-    @include gitlab-theme($theme-charcoal-text, #485157, $theme-charcoal, $theme-charcoal-dark);
-  }
-
-  &.ui_graphite {
-    @include gitlab-theme(#ccc, #777, $theme-graphite, #555);
-  }
-
-  &.ui_gray {
-    @include gitlab-theme(#979797, $theme-gray, #272727, #222);
-  }
-
-  &.ui_green {
-    @include gitlab-theme(#adc, $theme-green, #018865, #017855);
-  }
-
-  &.ui_violet {
-    @include gitlab-theme(#98c, $theme-violet, #436, #325);
-  }
-}
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 4993ca7572a..abb092623c0 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -8,8 +8,8 @@ header {
 
   &.navbar-empty {
     height: $header-height;
-    background: #fff;
-    border-bottom: 1px solid $btn-gray-hover;
+    background: $white-light;
+    border-bottom: 1px solid $white-normal;
 
     .center-logo {
       margin: 8px 0;
@@ -26,8 +26,8 @@ header {
     padding: 0 16px;
     z-index: 100;
     margin-bottom: 0;
-    height: $header-height;
-    background-color: $background-color;
+    min-height: $header-height;
+    background-color: $gray-light;
     border: none;
     border-bottom: 1px solid $border-color;
 
@@ -45,133 +45,169 @@ header {
       padding: 0;
 
       .nav > li > a {
-        color: $gl-icon-color;
+        color: $gl-text-color-secondary;
         font-size: 18px;
         padding: 0;
-        margin: ($header-height - 28) / 2 0;
+        margin: (($header-height - 28) / 2) 3px;
         margin-left: 8px;
         height: 28px;
-        min-width: 28px;
+        min-width: 32px;
         line-height: 28px;
         text-align: center;
 
         &.header-user-dropdown-toggle {
           margin-left: 14px;
+
+          &:hover,
+          &:focus,
+          &:active {
+            .header-user-avatar {
+              border-color: rgba($avatar-border, .2);
+            }
+          }
         }
 
         &:hover,
         &:focus,
         &:active {
-          background-color: $background-color;
+          background-color: $gray-light;
+          color: $gl-text-color;
+
+          svg {
+            fill: $gl-text-color;
+          }
         }
 
         .fa-caret-down {
-          font-size: 15px;
+          font-size: 14px;
+        }
+
+        svg {
+          position: relative;
+          top: 2px;
+          height: 17px;
+          // hack to get SVG to line up with FA icons
+          width: 23px;
+          fill: $gl-text-color-secondary;
         }
       }
 
       .navbar-toggle {
-        color: #666;
-        margin: 6px 0;
+        color: $nav-toggle-gray;
+        margin: 5px 0;
         border-radius: 0;
-        position: absolute;
         right: -10px;
         padding: 6px 10px;
 
         &:hover {
-          background-color: $btn-gray-hover;
+          background-color: $white-normal;
         }
 
         &.active {
-          color: $gl-icon-color;
+          color: $gl-text-color-secondary;
         }
       }
     }
+  }
 
-    .side-nav-toggle {
-      position: absolute;
-      left: -10px;
-      margin: 7px 0;
-      font-size: 18px;
-      padding: 6px 10px;
-      border: none;
-      background-color: $background-color;
+  .global-dropdown {
+    position: absolute;
+    left: -10px;
 
-      &:hover {
-        background-color: $btn-gray-hover;
-      }
+    .badge {
+      font-size: 11px;
+    }
 
-      &:focus {
-        outline: none;
+    li {
+      &.active a {
+        font-weight: bold;
       }
     }
   }
 
+  .global-dropdown-toggle {
+    margin: 7px 0;
+    font-size: 18px;
+    padding: 6px 10px;
+    border: none;
+    background-color: $gray-light;
+
+    &:hover {
+      background-color: $white-normal;
+    }
+
+    &:focus {
+      outline: none;
+      background-color: $white-normal;
+    }
+  }
+
   .header-content {
+    display: flex;
+    justify-content: space-between;
     position: relative;
-    height: $header-height;
+    min-height: $header-height;
     padding-left: 30px;
 
-    @media (min-width: $screen-sm-min) {
-      padding-right: 0;
-    }
-
     .dropdown-menu {
       margin-top: -5px;
     }
 
     .header-logo {
-      position: absolute;
-      left: 50%;
-      top: 7px;
+      display: inline-block;
+      margin: 0 7px 0 2px;
+      position: relative;
+      top: 10px;
       transition-duration: .3s;
-      z-index: 999;
-
-      #logo {
-        position: relative;
-        left: -50%;
-      }
 
       svg,
       img {
-        height: 36px;
+        height: 28px;
       }
 
       &:hover {
         cursor: pointer;
       }
+    }
 
-      @media (max-width: $screen-xs-max) {
-        right: 20px;
-        left: auto;
+    .group-name-toggle {
+      margin: 3px 5px;
+    }
 
-        #logo {
-          left: auto;
+    .group-title {
+      &.is-hidden {
+        .hidable:not(:last-of-type) {
+          display: none;
         }
       }
     }
 
+    .title-container {
+      display: flex;
+      align-items: flex-start;
+      flex: 1 1 auto;
+      padding-top: (($header-height - 19) / 2);
+      overflow: hidden;
+    }
+
     .title {
       position: relative;
       padding-right: 20px;
       margin: 0;
-      font-size: 19px;
-      max-width: 400px;
+      font-size: 18px;
+      line-height: 22px;
       display: inline-block;
-      line-height: $header-height;
       font-weight: normal;
       color: $gl-text-color;
-      overflow: hidden;
-      text-overflow: ellipsis;
       vertical-align: top;
       white-space: nowrap;
 
-      @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
-        max-width: 300px;
+      &.wrap {
+        white-space: normal;
       }
 
-      @media (max-width: $screen-xs-max) {
-        max-width: 190px;
+      &.initializing {
+        opacity: 0;
       }
 
       a {
@@ -179,6 +215,7 @@ header {
 
         &:hover {
           text-decoration: underline;
+          color: $gl-header-nav-hover-color;
         }
       }
 
@@ -187,14 +224,18 @@ header {
         border: transparent;
         background: transparent;
         position: absolute;
+        top: 2px;
         right: 3px;
         width: 12px;
         line-height: 19px;
-        margin-top: (($header-height - 19) / 2);
         padding: 0;
         font-size: 10px;
         text-align: center;
         cursor: pointer;
+
+        &:hover {
+          color: $gl-header-nav-hover-color;
+        }
       }
 
       .project-item-select {
@@ -204,11 +245,12 @@ header {
     }
 
     .navbar-collapse {
-      float: right;
+      flex: 0 0 auto;
       border-top: none;
+      padding: 0;
 
       @media (max-width: $screen-xs-max) {
-        float: none;
+        flex: 1 1 auto;
       }
     }
   }
@@ -218,7 +260,35 @@ header {
   }
 
   .impersonation i {
-    color: $red-normal;
+    color: $red-500;
+  }
+}
+
+.navbar-nav {
+  li {
+    .badge {
+      position: inherit;
+      top: -3px;
+      font-weight: normal;
+      margin-left: -12px;
+      font-size: 11px;
+      color: $white-light;
+      padding: 1px 5px 2px;
+      border-radius: 7px;
+      box-shadow: 0 1px 0 rgba($gl-header-color, .2);
+
+      &.issues-count {
+        background-color: $green-500;
+      }
+
+      &.merge-requests-count {
+        background-color: $orange-600;
+      }
+
+      &.todos-count {
+        background-color: $blue-500;
+      }
+    }
   }
 }
 
@@ -227,29 +297,39 @@ header {
     font-size: 18px;
 
     .navbar-nav {
+      display: table;
+      table-layout: fixed;
+      width: 100%;
       margin: 0;
-      float: none !important;
-
-      .visible-xs,
-      .visible-sm {
-        display: table-cell !important;
-      }
+      text-align: right;
     }
 
     .navbar-collapse {
       padding-left: 5px;
 
-      .nav > li {
-        display: table-cell;
-        width: 1%;
+      .nav > li:not(.hidden-xs) {
+        display: table-cell!important;
+        width: 25%;
+
+        a {
+          margin-right: 8px;
+        }
       }
     }
   }
+
+  .header-user-dropdown-toggle {
+    text-align: center;
+  }
+
+  .header-user-avatar {
+    float: none;
+  }
 }
 
 .header-user {
   .dropdown-menu-nav {
-    width: 140px;
+    min-width: 140px;
     margin-top: -5px;
   }
 }
@@ -258,4 +338,5 @@ header {
   float: left;
   margin-right: 5px;
   border-radius: 50%;
+  border: 1px solid $avatar-border;
 }
diff --git a/app/assets/stylesheets/framework/highlight.scss b/app/assets/stylesheets/framework/highlight.scss
index 07c8874bf03..6d27d7568cf 100644
--- a/app/assets/stylesheets/framework/highlight.scss
+++ b/app/assets/stylesheets/framework/highlight.scss
@@ -11,7 +11,7 @@
     border-radius: 0;
     font-family: $monospace_font;
     font-size: $code_font_size;
-    line-height: $code_line_height !important;
+    line-height: 19px;
     margin: 0;
     overflow: auto;
     overflow-y: hidden;
@@ -47,7 +47,7 @@
       font-family: $monospace_font;
       display: block;
       font-size: $code_font_size !important;
-      line-height: $code_line_height !important;
+      line-height: 19px;
       white-space: nowrap;
 
       i {
@@ -57,8 +57,13 @@
         visibility: hidden;
       }
 
-      &:hover i {
-        visibility: visible;
+      &:hover,
+      &:focus {
+        outline: none;
+
+        & i {
+          visibility: visible;
+        }
       }
     }
   }
diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss
new file mode 100644
index 00000000000..87667f39ab8
--- /dev/null
+++ b/app/assets/stylesheets/framework/icons.scss
@@ -0,0 +1,66 @@
+.ci-status-icon-success {
+  color: $green-500;
+
+  svg {
+    fill: $green-500;
+  }
+}
+
+.ci-status-icon-failed {
+  color: $gl-danger;
+
+  svg {
+    fill: $gl-danger;
+  }
+}
+
+.ci-status-icon-pending,
+.ci-status-icon-failed_with_warnings,
+.ci-status-icon-success_with_warnings {
+  color: $orange-500;
+
+  svg {
+    fill: $orange-500;
+  }
+}
+
+.ci-status-icon-running {
+  color: $blue-400;
+
+  svg {
+    fill: $blue-400;
+  }
+}
+
+.ci-status-icon-canceled,
+.ci-status-icon-disabled,
+.ci-status-icon-not-found {
+  color: $gl-text-color;
+
+  svg {
+    fill: $gl-text-color;
+  }
+}
+
+.ci-status-icon-created,
+.ci-status-icon-skipped {
+  color: $gray-darkest;
+
+  svg {
+    fill: $gray-darkest;
+  }
+}
+
+.ci-status-icon-manual {
+  color: $gl-text-color;
+
+  svg {
+    fill: $gl-text-color;
+  }
+}
+
+.icon-link {
+  &:hover {
+    text-decoration: none;
+  }
+}
diff --git a/app/assets/stylesheets/framework/images.scss b/app/assets/stylesheets/framework/images.scss
new file mode 100644
index 00000000000..09a569ad415
--- /dev/null
+++ b/app/assets/stylesheets/framework/images.scss
@@ -0,0 +1,11 @@
+.appearance-logo-preview {
+  max-width: 400px;
+  margin-bottom: 20px;
+}
+
+.appearance-light-logo-preview {
+  background-color: $gray-light;
+  max-width: 72px;
+  padding: 10px;
+  margin-bottom: 10px;
+}
diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss
index ba3930e03bd..1537b0744cc 100644
--- a/app/assets/stylesheets/framework/issue_box.scss
+++ b/app/assets/stylesheets/framework/issue_box.scss
@@ -20,7 +20,7 @@
   display: block;
   float: left;
   margin-right: 10px;
-  color: #fff;
+  color: $white-light;
   font-size: $gl-font-size;
   line-height: 25px;
 
@@ -33,10 +33,14 @@
   }
 
   &.status-box-open {
-    background-color: $green-light;
+    background-color: $green-500;
   }
 
   &.status-box-expired {
-    background: #cea61b;
+    background-color: $issue-status-expired;
+  }
+
+  &.status-box-upcoming {
+    background: $gl-text-color-secondary;
   }
 }
diff --git a/app/assets/stylesheets/framework/jquery.scss b/app/assets/stylesheets/framework/jquery.scss
index 30a5b837d69..300ba4f2de6 100644
--- a/app/assets/stylesheets/framework/jquery.scss
+++ b/app/assets/stylesheets/framework/jquery.scss
@@ -2,82 +2,14 @@
   font-family: $regular_font;
   font-size: $font-size-base;
 
-  &.ui-datepicker,
-  &.ui-datepicker-inline {
-    border: 1px solid #ddd;
-    padding: 10px;
-    width: 270px;
-
-    .ui-datepicker-header {
-      background: #fff;
-      border-color: #ddd;
-
-      .ui-datepicker-prev,
-      .ui-datepicker-next {
-        top: 4px;
-      }
-
-      .ui-datepicker-prev {
-        left: 2px;
-      }
-
-      .ui-datepicker-next {
-        right: 2px;
-      }
-
-      .ui-state-hover {
-        background: transparent;
-        border: 0;
-        cursor: pointer;
-      }
-    }
-
-    .ui-datepicker-calendar td a {
-      padding: 5px;
-      text-align: center;
-    }
-  }
-
-  &.ui-autocomplete {
-    border-color: #ddd;
-    padding: 0;
-    margin-top: 2px;
-    z-index: 1001;
-
-    .ui-menu-item a {
-      padding: 4px 10px;
-    }
-  }
-
   .ui-state-default {
-    border: 1px solid #fff;
-    background: #fff;
-    color: #777;
+    border: 1px solid $white-light;
+    background: $white-light;
+    color: $jq-ui-default-color;
   }
 
   .ui-state-highlight {
     border: 0;
     background: transparent;
   }
-
-  .ui-datepicker-calendar {
-    .ui-state-active,
-    .ui-state-hover,
-    .ui-state-focus {
-      border: 1px solid $gl-primary;
-      background: $gl-primary;
-      color: #fff;
-    }
-  }
-}
-
-.ui-sortable-handle {
-  cursor: move;
-  cursor: -webkit-grab;
-  cursor: -moz-grab;
-
-  &:active {
-    cursor: -webkit-grabbing;
-    cursor: -moz-grabbing;
-  }
 }
diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss
index 7baa4296abf..20c7bc93c28 100644
--- a/app/assets/stylesheets/framework/layout.scss
+++ b/app/assets/stylesheets/framework/layout.scss
@@ -6,10 +6,27 @@ html {
 
 body {
   &.navless {
-    background-color: white !important;
+    background-color: $white-light !important;
+  }
+
+  &.card-content {
+    background-color: $gray-darker;
+
+    .content-wrapper {
+      padding: 0;
+
+      .container-fluid,
+      .container-limited {
+        background-color: $gray-darker;
+      }
+    }
   }
 }
 
+.content-wrapper {
+  padding-bottom: 100px;
+}
+
 .container {
   padding-top: 0;
   z-index: 5;
@@ -26,6 +43,62 @@ body {
 
 .container-limited {
   max-width: $fixed-layout-width;
+
+  &.limit-container-width {
+    max-width: $limited-layout-width;
+  }
+}
+
+.alert-wrapper {
+  .alert {
+    margin-bottom: 0;
+
+    &:last-child {
+      margin-bottom: $gl-padding;
+    }
+  }
+
+  .alert-link-group {
+    float: right;
+  }
+
+  /* Center alert text and alert action links on smaller screens */
+  @media (max-width: $screen-sm-max) {
+    .alert {
+      text-align: center;
+    }
+
+    .alert-link-group {
+      float: none;
+    }
+  }
+
+  /* Stripe the background colors so that adjacent alert-warnings are distinct from one another */
+  .alert-warning {
+    transition: background-color 0.15s, border-color 0.15s;
+    background-color: $orange-500;
+    border-color: $orange-500;
+  }
+
+  .alert-warning + .alert-warning {
+    background-color: $orange-600;
+    border-color: $orange-600;
+  }
+
+  .alert-warning + .alert-warning + .alert-warning {
+    background-color: $orange-700;
+    border-color: $orange-700;
+  }
+
+  .alert-warning + .alert-warning + .alert-warning + .alert-warning {
+    background-color: $orange-800;
+    border-color: $orange-800;
+  }
+
+  .alert-warning:only-of-type {
+    background-color: $orange-500;
+    border-color: $orange-500;
+  }
 }
 
 
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index bc0610cc417..15dc0aa6a52 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -11,8 +11,8 @@
   > li {
     padding: 10px 15px;
     min-height: 20px;
-    border-bottom: 1px solid #eee;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    border-bottom: 1px solid $list-border-light;
+    border-bottom: 1px solid $list-border;
 
     &::after {
       content: " ";
@@ -21,7 +21,7 @@
     }
 
     &.disabled {
-      color: #888;
+      color: $list-text-disabled-color;
     }
 
     &.unstyled {
@@ -31,12 +31,12 @@
     }
 
     &.warning-row {
-      background-color: #fcf8e3;
-      border-color: #faebcc;
-      color: #8a6d3b;
+      background-color: $list-warning-row-bg;
+      border-color: $list-warning-row-border;
+      color: $list-warning-row-color;
     }
 
-    &.smoke { background-color: $background-color; }
+    &.smoke { background-color: $gray-light; }
 
     &:not(.ui-sort-disabled):hover {
       background: $row-hover;
@@ -46,7 +46,7 @@
       border-bottom: none;
 
       &.bottom {
-        background: $background-color;
+        background: $gray-light;
       }
     }
 
@@ -59,7 +59,7 @@
     p {
       padding-top: 1px;
       margin: 0;
-      color: $gray-dark;
+      color: $white-normal;
 
       img {
         position: relative;
@@ -96,24 +96,14 @@ ul.unstyled-list > li {
   border-bottom: none;
 }
 
-ul.task-list {
-  li.task-list-item {
-    list-style-type: none;
-  }
-
-  ul:not(.task-list) {
-    padding-left: 1.3em;
-  }
-}
-
+// Generic content list
 ul.content-list {
   @include basic-list;
-
   margin: 0;
   padding: 0;
 
-  > li {
-    border-color: $table-border-color;
+  li {
+    border-color: $white-normal;
     font-size: $list-font-size;
     color: $list-text-color;
 
@@ -128,11 +118,11 @@ ul.content-list {
     }
 
     a {
-      color: $gl-dark-link-color;
+      color: $gl-text-color;
     }
 
     .member-group-link {
-      color: $blue-normal;
+      color: $blue-600;
     }
 
     .description {
@@ -155,7 +145,8 @@ ul.content-list {
       }
 
       > .btn,
-      > .btn-group {
+      > .btn-group,
+      > .dropdown.inline {
         margin-right: $gl-padding-top;
         display: inline-block;
         margin-top: 3px;
@@ -163,6 +154,10 @@ ul.content-list {
 
         &:last-child {
           margin-right: 0;
+
+          @media(max-width: $screen-xs-max) {
+            margin: 0 auto;
+          }
         }
       }
 
@@ -186,25 +181,59 @@ ul.content-list {
 
     &.list-placeholder {
       background-color: $gray-light;
-      border: dotted 1px $gray-dark;
+      border: dotted 1px $white-normal;
       margin: 1px 0;
       min-height: 52px;
     }
   }
 }
 
-.panel > .content-list > li {
-  padding: $gl-padding-top $gl-padding;
+// Content list using flexbox
+.flex-list {
+  .flex-row {
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+  }
 
-  &.commit {
-    @media (min-width: $screen-sm-min) {
-      padding-left: 46px + $gl-padding;
+  .row-main-content {
+    flex: 1 1 auto;
+    overflow: hidden;
+    padding-right: 8px;
+  }
+
+  .row-fixed-content {
+    flex: 0 0 auto;
+    margin-left: auto;
+  }
+
+  .row-title {
+    font-weight: 600;
+  }
+
+  .row-second-line {
+    display: block;
+  }
+
+  .dropdown {
+    .btn-block {
+      margin-bottom: 0;
+      line-height: inherit;
     }
   }
+
+  .label-default {
+    color: $gl-text-color-secondary;
+  }
+}
+
+.panel > .content-list > li {
+  padding: $gl-padding-top $gl-padding;
 }
 
 ul.controls {
-  padding-top: 1px;
   float: right;
   list-style: none;
 
@@ -230,3 +259,7 @@ ul.controls {
     }
   }
 }
+
+ul.indent-list {
+  padding: 10px 0 0 30px;
+}
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index 6d28d98b283..a668a6c4c39 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -56,26 +56,24 @@
 
 .md-header {
   .nav-links {
-    .active {
-      a {
-        border-bottom-color: #000;
-      }
-    }
-
     a {
       padding-top: 0;
-      line-height: 1;
-      border-bottom: 1px solid $border-color;
+      line-height: 19px;
 
       &.btn.btn-xs {
         padding: 2px 5px;
       }
+
+      &:focus {
+        margin-top: -10px;
+        padding-top: 10px;
+      }
     }
   }
 }
 
 .referenced-users {
-  color: #4c4e54;
+  color: $gl-text-color;
   padding-top: 10px;
 }
 
@@ -87,8 +85,8 @@
 
 .markdown-area {
   border-radius: 0;
-  background: #fff;
-  border: 1px solid #ddd;
+  background: $white-light;
+  border: 1px solid $md-area-border;
   min-height: 140px;
   max-height: 500px;
   padding: 5px;
@@ -110,13 +108,13 @@
 
   hr {
     // Darken 'whitesmoke' a bit to make it more visible in note bodies
-    border-color: darken(#f5f5f5, 8%);
+    border-color: darken($gray-normal, 8%);
     margin: 10px 0;
   }
 
   // Border around images in issue and MR comments.
   img:not(.emoji) {
-    border: 1px solid $table-border-gray;
+    border: 1px solid $white-normal;
     padding: 5px;
     margin: 5px 0;
     // Ensure that image does not exceed viewport
@@ -137,7 +135,7 @@
 .toolbar-btn {
   float: left;
   padding: 0 5px;
-  color: #959494;
+  color: $gl-text-color-secondary;
   background: transparent;
   border: 0;
   outline: 0;
@@ -148,7 +146,27 @@
   }
 }
 
-.atwho-view small.description {
-  float: right;
-  padding: 3px 5px;
+.atwho-view {
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  small.description {
+    float: right;
+    padding: 3px 5px;
+  }
+
+  .avatar-inline {
+    margin-bottom: 0;
+  }
+
+  .cur {
+    .avatar {
+      border: 1px solid $white-light;
+      @include disableAllAnimation;
+    }
+  }
+
+  ul > li {
+    white-space: nowrap;
+  }
 }
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index f84ca36d10f..b3340d41333 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -24,7 +24,7 @@
     @include clearfix;
 
     padding: 10px 0;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid $list-border-light;
     display: block;
     margin: 0;
 
@@ -46,12 +46,24 @@
 
     &.light {
       a {
-        color: $gl-gray;
+        color: $gl-text-color;
       }
     }
   }
 }
 
+@mixin basic-list-stats {
+  .stats {
+    float: right;
+    line-height: $list-text-height;
+    color: $gl-text-color;
+
+    span {
+      margin-right: 15px;
+    }
+  }
+}
+
 @mixin bulleted-list {
   > ul {
     list-style-type: disc;
@@ -67,8 +79,8 @@
 }
 
 @mixin dark-diff-match-line {
-  color: rgba(255, 255, 255, 0.3);
-  background: rgba(255, 255, 255, 0.1);
+  color: $dark-diff-match-bg;
+  background: $dark-diff-match-color;
 }
 
 @mixin webkit-prefix($property, $value) {
@@ -76,6 +88,13 @@
   #{$property}: $value;
 }
 
+/* http://phrappe.com/css/conditional-css-for-webkit-based-browsers/ */
+@mixin on-webkit-only {
+  @media screen and (-webkit-min-device-pixel-ratio:0) {
+    @content;
+  }
+}
+
 @mixin keyframes($animation-name) {
   @-webkit-keyframes #{$animation-name} {
     @content;
diff --git a/app/assets/stylesheets/framework/mobile.scss b/app/assets/stylesheets/framework/mobile.scss
index c1ed43bc20f..eb73f7cc794 100644
--- a/app/assets/stylesheets/framework/mobile.scss
+++ b/app/assets/stylesheets/framework/mobile.scss
@@ -23,21 +23,21 @@
     margin-right: 0;
   }
 
-  .issues-details-filters,
+  .issues-details-filters:not(.filtered-search-block),
   .dash-projects-filters,
   .check-all-holder {
     display: none;
   }
 
-  .rss-btn {
+  .issues-holder .issue-check {
     display: none;
   }
 
-  .project-home-links {
+  .rss-btn {
     display: none;
   }
 
-  .project-avatar {
+  .project-home-links {
     display: none;
   }
 
@@ -54,7 +54,7 @@
     }
 
     // Display Star and Fork buttons without counters on mobile.
-    .project-action-buttons {
+    .project-repo-buttons {
       display: block;
 
       .count-buttons .btn {
@@ -71,7 +71,7 @@
     display: none;
   }
 
-  .group-right-buttons {
+  .group-buttons {
     display: none;
   }
 
@@ -100,8 +100,7 @@
 
 @media (max-width: $screen-sm-max) {
   .issues-filters {
-    .milestone-filter,
-    .labels-filter {
+    .milestone-filter {
       display: none;
     }
   }
@@ -133,9 +132,9 @@
   right: 0;
   top: 30%;
   padding: 5px 15px;
-  background: #eee;
+  background: $show-aside-bg;
   font-size: 20px;
-  color: #777;
+  color: $show-aside-color;
   z-index: 100;
-  box-shadow: 0 1px 2px #ddd;
+  box-shadow: 0 1px 2px $show-aside-shadow;
 }
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index fcaf5e18633..e6d808717f3 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -49,51 +49,60 @@
       padding: $gl-btn-padding;
       padding-bottom: 11px;
       margin-bottom: -1px;
-      font-size: 15px;
+      font-size: 14px;
       line-height: 28px;
-      color: #959494;
+      color: $gl-text-color-secondary;
       border-bottom: 2px solid transparent;
 
       &:hover,
       &:active,
       &:focus {
         text-decoration: none;
-        outline: none;
+        border-bottom: 2px solid $gray-darkest;
+        color: $black;
+
+        .badge {
+          color: $black;
+        }
       }
     }
 
     &.active a {
       border-bottom: 2px solid $link-underline-blue;
       color: $black;
-    }
+      font-weight: 600;
 
-    .badge {
-      font-weight: normal;
-      background-color: #eee;
-      color: $btn-transparent-color;
-      vertical-align: baseline;
+      .badge {
+        color: $black;
+      }
     }
   }
 
   &.sub-nav {
     text-align: center;
-    background-color: $dark-background-color;
+    background-color: $gray-normal;
 
     .container-fluid {
-      background-color: $dark-background-color;
+      background-color: $gray-normal;
       margin-bottom: 0;
     }
 
     li {
 
+      &.active a {
+        border-bottom: none;
+        color: $link-underline-blue;
+      }
+
       a {
         margin: 0;
         padding: 11px 10px 9px;
-      }
 
-      &.active a {
-        border-bottom: none;
-        color: $link-underline-blue;
+        &:hover,
+        &:active,
+        &:focus {
+          border-color: transparent;
+        }
       }
     }
   }
@@ -101,17 +110,17 @@
 
 .top-area {
   @include clearfix;
-  border-bottom: 1px solid $btn-gray-hover;
+  border-bottom: 1px solid $white-normal;
 
   .nav-text {
     padding-top: 16px;
     padding-bottom: 11px;
     display: inline-block;
-    width: 50%;
     line-height: 28px;
+    white-space: normal;
 
     /* Small devices (phones, tablets, 768px and lower) */
-    @media (max-width: $screen-sm-min) {
+    @media (max-width: $screen-xs-max) {
       width: 100%;
     }
   }
@@ -129,7 +138,6 @@
 
   .nav-links {
     display: inline-block;
-    width: 50%;
     margin-bottom: 0;
     border-bottom: none;
 
@@ -138,6 +146,10 @@
       display: block;
     }
 
+    &.scrolling-tabs {
+      float: left;
+    }
+
     li a {
       padding: 16px 15px 11px;
     }
@@ -149,30 +161,24 @@
   }
 
   .nav-controls {
-    width: 50%;
     display: inline-block;
     float: right;
     text-align: right;
     padding: 11px 0;
     margin-bottom: 0;
 
-    > .dropdown {
-      margin-right: $gl-padding-top;
-      display: inline-block;
-      vertical-align: top;
-
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-
-    > .btn {
+    > .btn,
+    > .btn-container,
+    > .dropdown,
+    > input,
+    > form {
       margin-right: $gl-padding-top;
       display: inline-block;
       vertical-align: top;
 
       &:last-child {
         margin-right: 0;
+        float: right;
       }
     }
 
@@ -180,19 +186,21 @@
       float: none;
     }
 
-    > form {
-      display: inline-block;
-    }
-
     .icon-label {
       display: none;
     }
 
-    input {
+    .btn,
+    .dropdown,
+    .dropdown-toggle,
+    input,
+    form {
       height: 35px;
+    }
+
+    input {
       display: inline-block;
       position: relative;
-      margin-right: $gl-padding-top;
 
       /* Medium devices (desktops, 992px and up) */
       @media (min-width: $screen-md-min) { width: 200px; }
@@ -216,6 +224,7 @@
       .btn,
       form,
       .dropdown,
+      .dropdown-toggle,
       .dropdown-menu-toggle,
       .form-control {
         margin: 0 0 10px;
@@ -254,32 +263,49 @@
     .nav-text,
     .nav-controls {
       width: auto;
+
+      @media (max-width: $screen-xs-max) {
+        width: 100%;
+      }
     }
   }
+
+  &.multi-line {
+    .nav-text {
+      line-height: 20px;
+    }
+
+    .nav-controls {
+      padding: 17px 0;
+    }
+  }
+
+  pre {
+    width: 100%;
+  }
 }
 
 .layout-nav {
-  position: fixed;
-  top: $header-height;
   width: 100%;
-  z-index: 11;
-  background: $background-color;
+  background: $gray-light;
   border-bottom: 1px solid $border-color;
   transition: padding $sidebar-transition-duration;
   text-align: center;
 
   .container-fluid {
     position: relative;
+
+    .nav-control {
+      @media (max-width: $screen-sm-max) {
+        margin-right: 2px;
+      }
+    }
   }
 
   .controls {
     float: right;
     padding: 7px 0 0;
 
-    @media (max-width: $screen-sm-max) {
-      display: none;
-    }
-
     i {
       color: $layout-link-gray;
     }
@@ -291,7 +317,7 @@
 
     .fa-caret-down {
       margin-left: 5px;
-      color: $gl-icon-color;
+      color: $gl-text-color-secondary;
     }
 
     .dropdown {
@@ -311,37 +337,9 @@
     height: 51px;
 
     li {
-
       a {
         padding-top: 10px;
       }
-
-      a,
-      i {
-        color: $layout-link-gray;
-      }
-
-      &.active {
-
-        a,
-        i {
-          color: $black;
-        }
-
-        svg {
-          path,
-          polygon {
-            fill: $black;
-          }
-        }
-      }
-
-      &:hover {
-        a,
-        i {
-          color: $black;
-        }
-      }
     }
   }
 }
@@ -354,7 +352,7 @@
   }
 
   .fade-right {
-    @include fade(left, $background-color);
+    @include fade(left, $gray-light);
     right: -5px;
 
     .fa {
@@ -363,8 +361,9 @@
   }
 
   .fade-left {
-    @include fade(right, $background-color);
+    @include fade(right, $gray-light);
     left: -5px;
+    text-align: center;
 
     .fa {
       left: -7px;
@@ -374,7 +373,7 @@
   &.sub-nav-scroll {
 
     .fade-right {
-      @include fade(left, $dark-background-color);
+      @include fade(left, $gray-normal);
       right: 0;
 
       .fa {
@@ -383,7 +382,7 @@
     }
 
     .fade-left {
-      @include fade(right, $dark-background-color);
+      @include fade(right, $gray-normal);
       left: 0;
 
       .fa {
@@ -420,15 +419,22 @@
 }
 
 .page-with-layout-nav {
-  margin-top: $header-height + 2;
-
   .right-sidebar {
-    top: ($header-height * 2) + 2;
+    top: ($header-height + 1) * 2;
+  }
+
+  &.page-with-sub-nav {
+    .right-sidebar {
+      top: ($header-height + 1) * 3;
+
+      &.affix {
+        top: 0;
+      }
+    }
   }
 }
 
 .activities {
-
   .nav-block {
     border-bottom: 1px solid $border-color;
 
@@ -437,3 +443,81 @@
     }
   }
 }
+
+@media (max-width: $screen-xs-max) {
+  .top-area {
+    flex-flow: row wrap;
+
+    .nav-controls {
+      $controls-margin: $btn-xs-side-margin - 2px;
+      flex: 0 0 100%;
+
+      &.controls-flex {
+        display: flex;
+        flex-flow: row wrap;
+        align-items: center;
+        justify-content: center;
+        padding: 0 0 $gl-padding-top;
+      }
+
+      .controls-item,
+      .controls-item-full,
+      .controls-item:last-child {
+        flex: 1 1 35%;
+        display: block;
+        width: 100%;
+        margin: $controls-margin;
+
+        .btn,
+        .dropdown {
+          margin: 0;
+        }
+      }
+
+      .controls-item-full {
+        flex: 1 1 100%;
+      }
+    }
+  }
+}
+
+.inner-page-scroll-tabs {
+  position: relative;
+
+  .nav-links {
+    padding-bottom: 1px;
+  }
+
+  .fade-right {
+    @include fade(left, $white-light);
+    right: 0;
+    text-align: right;
+
+    .fa {
+      right: 5px;
+    }
+  }
+
+  .fade-left {
+    @include fade(right, $white-light);
+    left: 0;
+    text-align: left;
+
+    .fa {
+      left: 5px;
+    }
+  }
+
+  .fade-right,
+  .fade-left {
+    top: 16px;
+    bottom: auto;
+  }
+
+  &.is-smaller {
+    .fade-right,
+    .fade-left {
+      top: 11px;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/framework/page-header.scss b/app/assets/stylesheets/framework/page-header.scss
new file mode 100644
index 00000000000..5f4211147f3
--- /dev/null
+++ b/app/assets/stylesheets/framework/page-header.scss
@@ -0,0 +1,62 @@
+.page-content-header {
+  line-height: 34px;
+  padding: 10px 0;
+  margin-bottom: 0;
+
+  @media (min-width: $screen-sm-min) {
+    display: flex;
+    align-items: center;
+
+    .header-main-content {
+      flex: 1;
+    }
+  }
+
+  .header-action-buttons {
+    i {
+      color: $gl-text-color-secondary;
+      font-size: 13px;
+      margin-right: 3px;
+    }
+
+    @media (max-width: $screen-xs-max) {
+      .btn {
+        width: 100%;
+        margin-top: 10px;
+      }
+
+      .dropdown {
+        width: 100%;
+      }
+    }
+  }
+
+  .avatar {
+    @extend .avatar-inline;
+    margin-left: 0;
+
+    @media (min-width: $screen-sm-min) {
+      margin-left: 4px;
+    }
+  }
+
+  .commit-committer-link,
+  .commit-author-link {
+    color: $gl-text-color;
+    font-weight: bold;
+  }
+
+  .commit-info {
+    &.branches {
+      margin-left: 8px;
+    }
+  }
+
+  .ci-status-link {
+    svg {
+      position: relative;
+      top: 2px;
+      margin: 0 2px 0 3px;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/framework/pagination.scss b/app/assets/stylesheets/framework/pagination.scss
index cb2c351c368..c3ec9db0f07 100644
--- a/app/assets/stylesheets/framework/pagination.scss
+++ b/app/assets/stylesheets/framework/pagination.scss
@@ -6,8 +6,22 @@
 
   .pagination {
     padding: 0;
+
+    a {
+      cursor: pointer;
+    }
+
+    .separator,
+    .separator:hover {
+      a {
+        cursor: default;
+        background-color: $gray-light;
+        padding: $gl-vert-padding;
+      }
+    }
   }
 
+
   .gap,
   .gap:hover {
     background-color: $gray-light;
@@ -43,7 +57,7 @@
 /**
  * Small screen pagination
  */
-@media (max-width: $screen-xs) {
+@media (max-width: $screen-xs-min) {
   .gl-pagination {
     .pagination li a {
       padding: 6px 10px;
@@ -62,7 +76,7 @@
 /**
  * Medium screen pagination
  */
-@media (min-width: $screen-xs) and (max-width: $screen-md-max) {
+@media (min-width: $screen-xs-min) and (max-width: $screen-md-max) {
   .gl-pagination {
     .page {
       display: none;
diff --git a/app/assets/stylesheets/framework/panels.scss b/app/assets/stylesheets/framework/panels.scss
index 5ba0486177f..9d8d08dff88 100644
--- a/app/assets/stylesheets/framework/panels.scss
+++ b/app/assets/stylesheets/framework/panels.scss
@@ -18,6 +18,20 @@
       margin-top: -2px;
       margin-left: 5px;
     }
+
+    &.split {
+      display: flex;
+      align-items: center;
+    }
+
+    .left {
+      flex: 1 1 auto;
+    }
+
+    .right {
+      flex: 0 0 auto;
+      text-align: right;
+    }
   }
 
   .panel-body {
diff --git a/app/assets/stylesheets/framework/progress.scss b/app/assets/stylesheets/framework/progress.scss
deleted file mode 100644
index e9800bd24b5..00000000000
--- a/app/assets/stylesheets/framework/progress.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-html.turbolinks-progress-bar::before {
-  background-color: $progress-color!important;
-  height: 2px!important;
-  box-shadow: 0 0 10px $progress-color, 0 0 5px $progress-color;
-}
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index 13749f1b7bd..9ab17e67d4c 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -6,7 +6,7 @@
 .select2-container,
 .select2-container.select2-drop-above {
   .select2-choice {
-    background: #fff;
+    background: $white-light;
     border-color: $input-border;
     height: 35px;
     padding: $gl-vert-padding $gl-input-padding;
@@ -39,7 +39,7 @@
     }
 
     &:hover {
-      background-color: $gray-dark;
+      background-color: $white-normal;
       border-color: $border-white-normal;
       color: $gl-text-color;
     }
@@ -47,7 +47,7 @@
 }
 
 .select2-drop {
-  box-shadow: rgba(76, 86, 103, 0.247059) 0 0 1px 0, rgba(31, 37, 50, 0.317647) 0 2px 18px 0;
+  box-shadow: $select2-drop-shadow1 0 0 1px 0, $select2-drop-shadow2 0 2px 18px 0;
   border-radius: $border-radius-default;
   border: none;
   min-width: 175px;
@@ -59,11 +59,11 @@
 }
 
 .select2-drop {
-  color: #7f8fa4;
+  color: $gl-grayish-blue;
 }
 
 .select2-highlighted {
-  background: #3084bb !important;
+  background: $gl-link-color !important;
 }
 
 .select2-results li.select2-result-with-children > .select2-result-label {
@@ -108,7 +108,7 @@
       border-color: $input-border;
       color: $gl-text-color;
       line-height: 15px;
-      background-color: $background-color;
+      background-color: $gray-light;
       background-image: none;
 
       .select2-search-choice-close {
@@ -156,7 +156,7 @@
 
 .select2-search input {
   padding: 2px 25px 2px 5px;
-  background: #fff image-url('select2.png');
+  background: $white-light image-url('select2.png');
   background-repeat: no-repeat;
   background-position: right 0 bottom 6px;
   border: 1px solid $input-border;
@@ -169,7 +169,7 @@
 }
 
 .select2-search input.select2-active {
-  background-color: #fff;
+  background-color: $white-light;
   background-image: image-url('select2-spinner.gif') !important;
   background-repeat: no-repeat;
   background-position: right 5px center !important;
@@ -206,7 +206,7 @@
 .select2-highlighted {
   .group-result {
     .group-path {
-      color: #fff;
+      color: $white-light;
     }
   }
 }
@@ -221,7 +221,7 @@
   }
 
   .group-path {
-    color: #999;
+    color: $group-path-color;
   }
 }
 
@@ -241,7 +241,7 @@
 
 .namespace-result {
   .namespace-kind {
-    color: #aaa;
+    color: $namespace-kind-color;
     font-weight: normal;
   }
 
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index d74c14ee2a4..746c9c25620 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -1,42 +1,9 @@
-.page-with-sidebar {
-  padding: $header-height 0 25px;
-  transition: padding $sidebar-transition-duration;
-
-  &.page-sidebar-pinned {
-    .sidebar-wrapper {
-      box-shadow: none;
-    }
-  }
-
-  .sidebar-wrapper {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    height: 100%;
-    width: 0;
-    overflow: hidden;
-    transition: width $sidebar-transition-duration;
-    box-shadow: 2px 0 16px 0 $black-transparent;
-  }
-}
-
-.sidebar-wrapper {
-  z-index: 1000;
-  background: $background-color;
-
-  .nicescroll-rails-hr {
-    // TODO: Figure out why nicescroll doesn't hide horizontal bar
-    display: none!important;
-  }
-}
-
 .content-wrapper {
   width: 100%;
   transition: padding $sidebar-transition-duration;
 
   .container-fluid {
-    background: #fff;
+    background: $white-light;
     padding: 0 $gl-padding;
 
     &.container-blank {
@@ -47,100 +14,6 @@
   }
 }
 
-.nav-sidebar {
-  position: absolute;
-  top: 50px;
-  bottom: 0;
-  width: $sidebar_width;
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  &.navbar-collapse {
-    padding: 0 !important;
-  }
-
-  .sidebar-header {
-    padding: 11px 22px 12px;
-    font-size: 20px;
-  }
-
-  li {
-    &.separate-item {
-      padding-top: 10px;
-      margin-top: 10px;
-    }
-
-    .icon-container {
-      width: 34px;
-      display: inline-block;
-      text-align: center;
-    }
-
-    a {
-      padding: 7px $gl-sidebar-padding;
-      font-size: $gl-font-size;
-      line-height: 24px;
-      display: block;
-      text-decoration: none;
-      font-weight: normal;
-      outline: none;
-
-      &:hover,
-      &:active,
-      &:focus {
-        text-decoration: none;
-      }
-
-      i {
-        font-size: 16px;
-      }
-
-      i,
-      svg {
-        margin-right: 13px;
-      }
-    }
-  }
-
-  .count {
-    float: right;
-    padding: 0 8px;
-    border-radius: 6px;
-  }
-}
-
-.sidebar-action-buttons {
-  width: $sidebar_width;
-  position: absolute;
-  top: 0;
-  left: 0;
-  min-height: 50px;
-  padding: 5px 0;
-  font-size: 18px;
-  line-height: 30px;
-
-  .toggle-nav-collapse {
-    left: 0;
-  }
-
-  .pin-nav-btn {
-    right: 0;
-    display: none;
-
-    @media (min-width: $sidebar-breakpoint) {
-      display: block;
-    }
-
-    .fa {
-      transition: transform .15s;
-
-      .page-sidebar-pinned & {
-        transform: rotate(90deg);
-      }
-    }
-  }
-}
-
 .nav-header-btn {
   padding: 10px $gl-sidebar-padding;
   color: inherit;
@@ -156,55 +29,16 @@
   }
 }
 
-.page-sidebar-expanded {
-  .sidebar-wrapper {
-    width: $sidebar_width;
-  }
-}
-
-.page-sidebar-pinned {
-  .content-wrapper,
-  .layout-nav {
-    @media (min-width: $sidebar-breakpoint) {
-      padding-left: $sidebar_width;
-    }
-  }
-
-  .merge-request-tabs-holder.affix {
-    @media (min-width: $sidebar-breakpoint) {
-      left: $sidebar_width;
-    }
-  }
-
-  &.right-sidebar-expanded {
-    .line-resolve-all-container {
-      display: none;
-    }
-  }
-}
-
-header.header-sidebar-pinned {
-  @media (min-width: $sidebar-breakpoint) {
-    padding-left: ($sidebar_width + $gl-padding);
-
-    .side-nav-toggle {
-      display: none;
-    }
-
-    .header-content {
-      padding-left: 0;
-    }
-  }
-}
-
 .right-sidebar-collapsed {
   padding-right: 0;
 
   @media (min-width: $screen-sm-min) {
-    padding-right: $sidebar_collapsed_width;
+    &:not(.wiki-sidebar):not(.build-sidebar) .content-wrapper {
+      padding-right: $gutter_collapsed_width;
+    }
 
     .merge-request-tabs-holder.affix {
-      right: $sidebar_collapsed_width;
+      right: $gutter_collapsed_width;
     }
   }
 
@@ -221,24 +55,31 @@ header.header-sidebar-pinned {
   padding-right: 0;
 
   @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
-    &:not(.build-sidebar) {
-      padding-right: $sidebar_collapsed_width;
+    &:not(.wiki-sidebar):not(.build-sidebar) .content-wrapper {
+      padding-right: $gutter_collapsed_width;
     }
   }
 
   @media (min-width: $screen-md-min) {
-    padding-right: $gutter_width;
+    .content-wrapper {
+      padding-right: $gutter_width;
+    }
 
-    .merge-request-tabs-holder.affix {
+    &:not(.with-overlay) .merge-request-tabs-holder.affix {
       right: $gutter_width;
     }
-  }
 
-  &.with-overlay {
-    padding-right: $sidebar_collapsed_width;
+    &.with-overlay .merge-request-tabs-holder.affix {
+      right: $gutter_collapsed_width;
+    }
   }
 }
 
 .right-sidebar {
   border-left: 1px solid $border-color;
+
+  &.affix {
+    position: fixed;
+    top: 0;
+  }
 }
diff --git a/app/assets/stylesheets/framework/snippets.scss b/app/assets/stylesheets/framework/snippets.scss
new file mode 100644
index 00000000000..5f7e1b17cc7
--- /dev/null
+++ b/app/assets/stylesheets/framework/snippets.scss
@@ -0,0 +1,48 @@
+.snippet-row {
+  .title {
+    margin-bottom: 2px;
+  }
+
+  .snippet-filename {
+    padding: 0 2px;
+  }
+}
+
+.snippet-form-holder .file-holder .file-title {
+  padding: 2px;
+}
+
+.markdown-snippet-copy {
+  position: fixed;
+  top: -10px;
+  left: -10px;
+  max-height: 0;
+  max-width: 0;
+}
+
+.snippet-file-content {
+  border-radius: 3px;
+}
+
+.snippet-header {
+  padding: $gl-padding 0;
+}
+
+.snippet-title {
+  font-size: 24px;
+  font-weight: 600;
+}
+
+.snippet-edited-ago {
+  color: $gray-darkest;
+}
+
+.snippet-actions {
+  @media (min-width: $screen-sm-min) {
+    float: right;
+  }
+}
+
+.snippet-scope-menu .btn-new {
+  margin-top: 15px;
+}
diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss
index 9a90d3794fd..6d9fa74a030 100644
--- a/app/assets/stylesheets/framework/tables.scss
+++ b/app/assets/stylesheets/framework/tables.scss
@@ -14,11 +14,11 @@ table {
     .warning,
     .danger,
     .info {
-      color: #fff;
+      color: $white-light;
 
       a:not(.btn) {
         text-decoration: underline;
-        color: #fff;
+        color: $white-light;
       }
     }
 
@@ -31,14 +31,31 @@ table {
       }
 
       th {
-        background-color: $background-color;
+        background-color: $gray-light;
         font-weight: normal;
         border-bottom: none;
+
+        &.wide {
+          width: 55%;
+        }
       }
 
       td {
-        border-color: $table-border-color;
+        border-color: $white-normal;
       }
     }
   }
 }
+
+.responsive-table {
+  @media (max-width: $screen-sm-max) {
+    th {
+      width: 100%;
+    }
+
+    td {
+      width: 100%;
+      float: left;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss
index 875cded8b4e..ff185cd8767 100644
--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/framework/timeline.scss
@@ -6,8 +6,8 @@
 
   .timeline-entry {
     padding: $gl-padding $gl-btn-padding 11px;
-    border-color: $table-border-color;
-    color: $gl-gray;
+    border-color: $white-normal;
+    color: $gl-text-color;
     border-bottom: 1px solid $border-white-light;
 
     &:target {
@@ -32,7 +32,7 @@
 
   .system-note {
     .note-text {
-      color: $gl-gray !important;
+      color: $gl-text-color !important;
     }
   }
 
diff --git a/app/assets/stylesheets/framework/tw_bootstrap.scss b/app/assets/stylesheets/framework/tw_bootstrap.scss
index 59f4594bb83..e54cc2866a7 100644
--- a/app/assets/stylesheets/framework/tw_bootstrap.scss
+++ b/app/assets/stylesheets/framework/tw_bootstrap.scss
@@ -86,24 +86,34 @@
   position: fixed;
 }
 
+/*
+ * Fix <summary> elements on firefox
+ * See https://github.com/necolas/normalize.css/issues/640
+ * and https://github.com/twbs/bootstrap/issues/21060
+ *
+ */
+summary {
+  display: list-item;
+}
+
 @import "bootstrap/responsive-utilities";
 
 // Labels
 .label {
   padding: 4px 5px;
-  font-size: 13px;
+  font-size: 12px;
   font-style: normal;
   font-weight: normal;
   display: inline-block;
 
   &.label-gray {
-    background-color: #f8fafc;
-    color: $gl-gray;
+    background-color: $label-gray-bg;
+    color: $gl-text-color;
     text-shadow: none;
   }
 
   &.label-inverse {
-    background-color: #333;
+    background-color: $label-inverse-bg;
   }
 }
 
@@ -158,10 +168,18 @@
       font-weight: normal;
 
       a {
-        color: #777;
+        color: $panel-heading-link-color;
       }
     }
   }
+
+  &.panel-without-border {
+    border: 0;
+  }
+
+  &.panel-without-margin {
+    margin: 0;
+  }
 }
 
 .panel-succes .panel-heading,
@@ -172,7 +190,7 @@
 .alert {
   a:not(.btn) {
     @extend .alert-link;
-    color: #fff;
+    color: $white-light;
     text-decoration: underline;
   }
 }
diff --git a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
index 44fe37d3a4a..c9f345d24be 100644
--- a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
+++ b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
@@ -31,6 +31,7 @@ $border-radius-small: 3px !default;
 //
 $text-color: $gl-text-color;
 $link-color: $gl-link-color;
+$link-hover-color: $gl-link-hover-color;
 
 
 //== Typography
@@ -48,7 +49,7 @@ $font-size-base: $gl-font-size;
 
 $padding-base-vertical: $gl-vert-padding;
 $padding-base-horizontal: $gl-padding;
-$component-active-color: #fff;
+$component-active-color: $white-light;
 $component-active-bg: $brand-info;
 
 //== Forms
@@ -65,20 +66,20 @@ $legend-color: $text-color;
 //
 //##
 
-$pagination-color: $gl-gray;
-$pagination-bg: #fff;
+$pagination-color: $gl-text-color;
+$pagination-bg: $white-light;
 $pagination-border: $border-color;
 
-$pagination-hover-color: $gl-gray;
+$pagination-hover-color: $gl-text-color;
 $pagination-hover-bg: $row-hover;
 $pagination-hover-border: $border-color;
 
-$pagination-active-color: $blue-dark;
-$pagination-active-bg: #fff;
+$pagination-active-color: $blue-600;
+$pagination-active-bg: $white-light;
 $pagination-active-border: $border-color;
 
 $pagination-disabled-color: #cdcdcd;
-$pagination-disabled-bg: $background-color;
+$pagination-disabled-bg: $gray-light;
 $pagination-disabled-border: $border-color;
 
 
@@ -86,19 +87,19 @@ $pagination-disabled-border: $border-color;
 //
 //## Define colors for form feedback states and, by default, alerts.
 
-$state-success-text: #fff;
+$state-success-text: $white-light;
 $state-success-bg: $brand-success;
 $state-success-border: $brand-success;
 
-$state-info-text: #fff;
+$state-info-text: $white-light;
 $state-info-bg: $brand-info;
 $state-info-border: $brand-info;
 
-$state-warning-text: #fff;
+$state-warning-text: $white-light;
 $state-warning-bg: $brand-warning;
 $state-warning-border: $brand-warning;
 
-$state-danger-text: #fff;
+$state-danger-text: $white-light;
 $state-danger-bg: $brand-danger;
 $state-danger-border: $brand-danger;
 
@@ -117,10 +118,13 @@ $alert-border-radius: 0;
 $panel-border-radius: 2px;
 $panel-default-text: $text-color;
 $panel-default-border: $border-color;
-$panel-default-heading-bg: $background-color;
-$panel-footer-bg: $background-color;
+$panel-default-heading-bg: $gray-light;
+$panel-footer-bg: $gray-light;
 $panel-inner-border: $border-color;
 
+$badge-bg: $badge-bg;
+$badge-color: $badge-color;
+
 //== Wells
 //
 //##
@@ -132,17 +136,17 @@ $well-border: #eee;
 //
 //##
 
-$code-color: #c7254e;
-$code-bg: #f9f2f4;
+$code-color: $red-600;
+$code-bg: lighten($red-50, 2%);
 
-$kbd-color: #fff;
+$kbd-color: $white-light;
 $kbd-bg: #333;
 
 //== Buttons
 //
 //##
 $btn-default-color: $gl-text-color;
-$btn-default-bg: #fff;
+$btn-default-bg: $white-light;
 $btn-default-border: #e7e9ed;
 
 //== Nav
@@ -153,8 +157,8 @@ $nav-link-padding: 13px $gl-padding;
 //== Code
 //
 //##
-$pre-bg: $background-color !default;
-$pre-color: $gl-gray !default;
+$pre-bg: $gray-light !default;
+$pre-color: $gl-text-color !default;
 $pre-border-color: $border-color;
 
-$table-bg-accent: $background-color;
+$table-bg-accent: $gray-light;
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 070e42d63d2..c241816788b 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -1,5 +1,5 @@
 @mixin md-typography {
-  color: $md-text-color;
+  color: $gl-text-color;
   word-wrap: break-word;
 
   a {
@@ -10,7 +10,7 @@
     max-width: 100%;
   }
 
-  *:first-child {
+  *:first-child:not(.katex-display) {
     margin-top: 0;
   }
 
@@ -33,15 +33,15 @@
     padding: 3px 5px;
     font-size: 11px;
     line-height: 10px;
-    color: #555;
+    color: $kdb-color;
     vertical-align: middle;
-    background-color: #fcfcfc;
+    background-color: $kdb-bg;
     border-width: 1px;
     border-style: solid;
-    border-color: #ccc #ccc #bbb;
+    border-color: $kdb-border $kdb-border $kdb-border-bottom;
     border-image: none;
     border-radius: 3px;
-    box-shadow: 0 -1px 0 #bbb inset;
+    box-shadow: 0 -1px 0 $kdb-shadow inset;
   }
 
   h1 {
@@ -50,14 +50,14 @@
     margin: 16px 0 10px;
     padding: 0 0 0.3em;
     border-bottom: 1px solid $white-dark;
-    color: $gl-gray-dark;
+    color: $gl-text-color;
   }
 
   h2 {
     font-size: 1.5em;
     font-weight: 600;
     margin: 16px 0 10px;
-    color: $gl-gray-dark;
+    color: $gl-text-color;
   }
 
   h3 {
@@ -81,7 +81,7 @@
   }
 
   blockquote {
-    color: #7f8fa4;
+    color: $gl-grayish-blue;
     font-size: inherit;
     padding: 8px 21px;
     margin: 12px 0;
@@ -94,13 +94,13 @@
   }
 
   blockquote p {
-    color: #7f8fa4 !important;
+    color: $gl-grayish-blue !important;
     font-size: inherit;
     line-height: 1.5;
   }
 
   p {
-    color: #5c5d5e;
+    color: $gl-text-color;
     margin: 6px 0 0;
   }
 
@@ -108,10 +108,10 @@
     @extend .table;
     @extend .table-bordered;
     margin: 12px 0;
-    color: #5c5d5e;
+    color: $gl-text-color;
 
     th {
-      background: #f8fafc;
+      background: $label-gray-bg;
     }
   }
 
@@ -134,7 +134,7 @@
   ul,
   ol {
     padding: 0;
-    margin: 3px 0 3px 28px !important;
+    margin: 3px 0 !important;
   }
 
   ul:dir(rtl),
@@ -144,6 +144,29 @@
 
   li {
     line-height: 1.6em;
+    margin-left: 25px;
+    padding-left: 3px;
+
+    /* Normalize the bullet position on webkit. */
+    @include on-webkit-only {
+      margin-left: 28px;
+      padding-left: 0;
+    }
+  }
+
+  ul.task-list {
+    li.task-list-item {
+      list-style-type: none;
+      position: relative;
+      padding-left: 28px;
+      margin-left: 0 !important;
+
+      input.task-list-item-checkbox {
+        position: absolute;
+        left: 8px;
+        top: 5px;
+      }
+    }
   }
 
   a[href*="/uploads/"],
@@ -182,6 +205,7 @@
       left: -16px;
       position: absolute;
       text-decoration: none;
+      outline: none;
 
       &::after {
         content: image-url('icon_anchor.svg');
@@ -201,7 +225,7 @@
  *
  */
 body {
-  -webkit-text-shadow: rgba(255,255,255,0.01) 0 0 1px;
+  -webkit-text-shadow: $body-text-shadow 0 0 1px;
 }
 
 .page-title {
@@ -229,7 +253,7 @@ h3,
 h4,
 h5,
 h6 {
-  color: $gl-title-color;
+  color: $gl-text-color;
   font-weight: 600;
 }
 
@@ -282,6 +306,11 @@ a > code {
  * Textareas intended for GFM
  *
  */
+textarea.js-gfm-input {
+  font-family: $monospace_font;
+  font-size: 13px;
+}
+
 .strikethrough {
   text-decoration: line-through;
 }
@@ -291,7 +320,7 @@ h2,
 h3,
 h4 {
   small {
-    color: $gl-gray;
+    color: $gl-text-color;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index be2a7ceefff..97794a47df8 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -1,137 +1,138 @@
 /*
  * Layout
  */
-$sidebar_collapsed_width: 62px;
-$sidebar_width: 220px;
 $gutter_collapsed_width: 62px;
 $gutter_width: 290px;
-$gutter_inner_width: 258px;
+$gutter_inner_width: 250px;
 $sidebar-transition-duration: .15s;
 $sidebar-breakpoint: 1024px;
 
 /*
  * Color schema
  */
+$darken-normal-factor: 7%;
+$darken-dark-factor: 10%;
+$darken-border-factor: 5%;
+
 $white-light: #fff;
-$white-normal: #ededed;
-$white-dark: #ececec;
+$white-normal: #f0f0f0;
+$white-dark: #eaeaea;
 
 $gray-lightest: #fdfdfd;
 $gray-light: #fafafa;
 $gray-lighter: #f9f9f9;
 $gray-normal: #f5f5f5;
-$gray-dark: #ededed;
+$gray-dark: darken($gray-light, $darken-dark-factor);
 $gray-darker: #eee;
-$gray-darkest: #c9c9c9;
-
-$green-light: #38ae67;
-$green-normal: #2faa60;
-$green-dark: #2ca05b;
-
-$blue-light: #2ea8e5;
-$blue-normal: #2d9fd8;
-$blue-dark: #2897ce;
-
-$blue-medium-light: #3498cb;
-$blue-medium: #2f8ebf;
-$blue-medium-dark: #2d86b4;
-
-$blue-light-transparent: rgba(44, 159, 216, 0.05);
-
-$orange-light: #fc8a51;
-$orange-normal: #e75e40;
-$orange-dark: #ce5237;
-
-$red-light: #e52c5a;
-$red-normal: #d22852;
-$red-dark: darken($red-normal, 5%);
+$gray-darkest: #c4c4c4;
+
+$green-50: #e4f5eb;
+$green-100: #bae6cc;
+$green-200: #8dd5aa;
+$green-300: #5fc488;
+$green-400: #3cb76f;
+$green-500: #1aaa55;
+$green-600: #168f48;
+$green-700: #12753a;
+$green-800: #0e5a2d;
+$green-900: #0a4020;
+
+$blue-50: #e4eff9;
+$blue-100: #bcd7f1;
+$blue-200: #8fbce8;
+$blue-300: #62a1df;
+$blue-400: #418cd8;
+$blue-500: #1f78d1;
+$blue-600: #1b69b6;
+$blue-700: #17599c;
+$blue-800: #134a81;
+$blue-900: #0f3b66;
+
+$orange-50: #fff2e1;
+$orange-100: #fedfb3;
+$orange-200: #feca81;
+$orange-300: #fdb44f;
+$orange-400: #fca429;
+$orange-500: #fc9403;
+$orange-600: #de7e00;
+$orange-700: #c26700;
+$orange-800: #a35100;
+$orange-900: #853b00;
+
+$red-50: #fbe7e4;
+$red-100: #f4c4bc;
+$red-200: #ed9d90;
+$red-300: #e67664;
+$red-400: #e05842;
+$red-500: #db3b21;
+$red-600: #c0341d;
+$red-700: #a62d19;
+$red-800: #8b2615;
+$red-900: #711e11;
 
 $black: #000;
 $black-transparent: rgba(0, 0, 0, 0.3);
 
-$border-white-light: #f1f2f4;
-$border-white-normal: #d6dae2;
-$border-white-dark: #c6cacf;
-
-$border-gray-light: #dcdcdc;
-$border-gray-normal: #d7d7d7;
-$border-gray-dark: #c6cacf;
+$border-white-light: darken($white-light, $darken-border-factor);
+$border-white-normal: darken($white-normal, $darken-border-factor);
 
-$border-green-extra-light: #9adb84;
-$border-green-light: #2faa60;
-$border-green-normal: #2ca05b;
-$border-green-dark: #279654;
-
-$border-blue-light: #2d9fd8;
-$border-blue-normal: #2897ce;
-$border-blue-dark: #258dc1;
-
-$border-orange-light: #fc6d26;
-$border-orange-normal: #ce5237;
-$border-orange-dark: #c14e35;
-
-$border-red-light: #d22852;
-$border-red-normal: #ca264f;
-$border-red-dark: darken($border-red-normal, 5%);
-
-$help-well-bg: $gray-light;
-$help-well-border: #e5e5e5;
-
-$warning-message-bg: #fbf2d9;
-$warning-message-color: #9e8e60;
-$warning-message-border: #f0e2bb;
+$border-gray-light: darken($gray-light, $darken-border-factor);
+$border-gray-normal: darken($gray-normal, $darken-border-factor);
+$border-gray-dark: darken($white-normal, $darken-border-factor);
 
 /*
  * UI elements
  */
 $border-color: #e5e5e5;
-$focus-border-color: #3aabf0;
-$table-border-color: #f0f0f0;
-$background-color: $gray-light;
-$dark-background-color: #f5f5f5;
-$table-text-gray: #8f8f8f;
-$widget-expand-item: #e8f2f7;
-$widget-inner-border: #eef0f2;
+$focus-border-color: $blue-300;
+$well-expand-item: #e8f2f7;
+$well-inner-border: #eef0f2;
+$well-light-border: #f1f1f1;
+$well-light-text-color: #5b6169;
 
 /*
  * Text
  */
-$gl-font-size: 15px;
-$gl-title-color: #333;
-$gl-text-color: #5c5c5c;
-$gl-text-color-light: #8c8c8c;
-$gl-text-green: #4a2;
-$gl-text-red: #d12f19;
-$gl-text-orange: #d90;
-$gl-link-color: #3084bb;
-$gl-dark-link-color: #333;
-$gl-placeholder-color: #8f8f8f;
-$gl-icon-color: $gl-placeholder-color;
+$gl-font-size: 14px;
+$gl-text-color: rgba(0, 0, 0, .85);
+$gl-text-color-secondary: rgba(0, 0, 0, .55);
+$gl-text-color-disabled: rgba(0, 0, 0, .35);
+$gl-text-green: $green-600;
+$gl-text-red: $red-500;
+$gl-text-orange: $orange-600;
+$gl-link-color: $blue-600;
+$gl-link-hover-color: $blue-800;
 $gl-grayish-blue: #7f8fa4;
 $gl-gray: $gl-text-color;
 $gl-gray-dark: #313236;
-$gl-gray-light: $gl-placeholder-color;
 $gl-header-color: #4c4e54;
+$gl-header-nav-hover-color: #434343;
 
 /*
  * Lists
  */
 $list-font-size: $gl-font-size;
-$list-title-color: $gl-title-color;
+$list-title-color: $gl-text-color;
 $list-text-color: $gl-text-color;
+$list-text-disabled-color: $gl-text-color-disabled;
+$list-border-light: #eee;
+$list-border: rgba(0, 0, 0, 0.05);
 $list-text-height: 42px;
+$list-warning-row-bg: $orange-50;
+$list-warning-row-border: $orange-100;
+$list-warning-row-color: $orange-700;
 
 /*
  * Markdown
  */
-$md-text-color: $gl-text-color;
 $md-link-color: $gl-link-color;
+$md-area-border: #ddd;
 
 /*
  * Code
  */
-$code_font_size: 13px;
-$code_line_height: 1.5;
+$code_font_size: 12px;
+$code_line_height: 1.6;
 
 /*
  * Padding
@@ -146,25 +147,61 @@ $gl-sidebar-padding: 22px;
 /*
  * Misc
  */
-$row-hover: #f7faff;
-$row-hover-border: #b2d7ff;
+$row-hover: lighten($blue-50, 2%);
+$row-hover-border: $blue-100;
 $progress-color: #c0392b;
-$avatar_radius: 50%;
 $header-height: 50px;
 $fixed-layout-width: 1280px;
+$limited-layout-width: 990px;
 $gl-avatar-size: 40px;
-$error-exclamation-point: #e62958;
+$error-exclamation-point: $red-500;
 $border-radius-default: 2px;
-$btn-transparent-color: #8f8f8f;
 $settings-icon-size: 18px;
-$provider-btn-group-border: #e5e5e5;
-$provider-btn-not-active-color: #4688f1;
-$link-underline-blue: #4a8bee;
+$provider-btn-not-active-color: $blue-500;
+$link-underline-blue: $blue-500;
+$active-item-blue: $blue-500;
 $layout-link-gray: #7e7c7c;
-$todo-alert-blue: #428bca;
 $btn-side-margin: 10px;
 $btn-sm-side-margin: 7px;
 $btn-xs-side-margin: 5px;
+$issue-status-expired: $orange-500;
+$issuable-sidebar-color: $gl-text-color-secondary;
+$show-aside-bg: #eee;
+$show-aside-color: #777;
+$show-aside-shadow: #ddd;
+$group-path-color: #999;
+$namespace-kind-color: #aaa;
+$panel-heading-link-color: #777;
+$graph-author-email-color: #777;
+$count-arrow-border: #dce0e5;
+$save-project-loader-color: #555;
+$divergence-graph-bar-bg: #ccc;
+$divergence-graph-separator-bg: #ccc;
+$general-hover-transition-duration: 100ms;
+$general-hover-transition-curve: linear;
+
+
+/*
+* Common component specific colors
+*/
+$hint-color: #999;
+$well-pre-bg: #eee;
+$well-pre-color: #555;
+$loading-color: #555;
+$update-author-color: #999;
+$user-mention-color: #2fa0bb;
+$time-color: #999;
+$project-member-show-color: #aaa;
+$gl-promo-color: #aaa;
+$error-bg: $red-400;
+$warning-message-bg: $orange-50;
+$warning-message-border: $orange-100;
+$warning-message-color: $orange-700;
+$control-group-descr-color: #666;
+$table-permission-x-bg: #d9edf7;
+$username-color: #666;
+$description-color: #666;
+$profiler-border: #eee;
 
 /* tanuki logo colors */
 $tanuki-red: #e24329;
@@ -174,122 +211,342 @@ $tanuki-yellow: #fca326;
 /*
  * State colors:
  */
-$gl-primary: $blue-normal;
-$gl-success: $green-normal;
+$gl-primary: $blue-500;
+$gl-success: $green-500;
 $gl-success-focus: rgba($gl-success, .4);
-$gl-info: $blue-normal;
-$gl-warning: $orange-normal;
-$gl-danger: $red-normal;
+$gl-info: $blue-500;
+$gl-warning: $orange-500;
+$gl-danger: $red-500;
 $gl-btn-active-background: rgba(0, 0, 0, 0.16);
 $gl-btn-active-gradient: inset 0 2px 3px $gl-btn-active-background;
 
 /*
  * Commit Diff Colors
  */
-$added: #63c363;
-$deleted: #f77;
-$line-added: #ecfdf0;
-$line-added-dark: #c7f0d2;
-$line-removed: #fbe9eb;
-$line-removed-dark: #fac5cd;
-$line-number-old: #f9d7dc;
-$line-number-new: #ddfbe6;
-$line-number-select: #fbf2da;
-$match-line: $gray-light;
-$table-border-gray: #f0f0f0;
-$line-target-blue: #eaf3fc;
-$line-select-yellow: #fcf8e7;
-$line-select-yellow-dark: #f0e2bd;
+$added: $green-300;
+$deleted: $red-300;
+$line-added: $green-50;
+$line-added-dark: $green-100;
+$line-removed: $red-50;
+$line-removed-dark: $red-100;
+$line-number-old: lighten($red-100, 5%);
+$line-number-new: lighten($green-100, 5%);
+$line-number-select: lighten($orange-100, 5%);
+$line-target-blue: $blue-50;
+$line-select-yellow: $orange-50;
+$line-select-yellow-dark: $orange-100;
+$dark-diff-match-bg: rgba(255, 255, 255, 0.3);
+$dark-diff-match-color: rgba(255, 255, 255, 0.1);
+$file-mode-changed: #777;
+$file-mode-changed: #777;
+$diff-image-bg: #ddd;
+$diff-image-info-color: grey;
+$diff-swipe-border: #999;
+$diff-view-modes-color: grey;
+$diff-view-modes-border: #c1c1c1;
 
 /*
  * Fonts
  */
 $monospace_font: 'Menlo', 'Liberation Mono', 'Consolas', 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace;
-$regular_font: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif;
+$regular_font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 
 /*
 * Dropdowns
 */
 $dropdown-width: 300px;
-$dropdown-bg: #fff;
 $dropdown-link-color: #555;
 $dropdown-link-hover-bg: $row-hover;
 $dropdown-empty-row-bg: rgba(#000, .04);
-$dropdown-border-color: rgba(#000, .1);
+$dropdown-border-color: $border-color;
 $dropdown-shadow-color: rgba(#000, .1);
 $dropdown-divider-color: rgba(#000, .1);
-$dropdown-header-color: #959494;
 $dropdown-title-btn-color: #bfbfbf;
 $dropdown-input-color: #555;
+$dropdown-input-fa-color: #c7c7c7;
 $dropdown-input-focus-border: $focus-border-color;
 $dropdown-input-focus-shadow: rgba($dropdown-input-focus-border, .4);
 $dropdown-loading-bg: rgba(#fff, .6);
+$dropdown-chevron-size: 10px;
+$dropdown-toggle-active-border-color: darken($border-color, 14%);
 
-$dropdown-toggle-bg: #fff;
-$dropdown-toggle-color: #626262;
-$dropdown-toggle-border-color: #eaeaea;
-$dropdown-toggle-hover-border-color: darken($dropdown-toggle-border-color, 15%);
-$dropdown-toggle-icon-color: #c4c4c4;
-$dropdown-toggle-hover-icon-color: $dropdown-toggle-hover-border-color;
+
+/*
+* Filtered Search
+*/
+$dropdown-hover-color: $blue-400;
 
 /*
 * Buttons
 */
 $btn-active-gray: #ececec;
-$btn-placeholder-gray: #c7c7c7;
+$btn-active-gray-light: e4e7ed;
 $btn-white-active: #848484;
-$btn-gray-hover: #eee;
+
+/*
+* Badges
+*/
+$badge-bg: #eee;
+$badge-color: $gl-text-color-secondary;
 
 /*
  *  Award emoji
  */
-$award-emoji-menu-bg: #fff;
-$award-emoji-menu-border: #f1f2f4;
-$award-emoji-new-btn-icon-color: #dcdcdc;
+$award-emoji-menu-shadow: rgba(0,0,0,.175);
 
 /*
  * Search Box
  */
-$search-input-border-color: rgba(#4688f1, .8);
+$search-input-border-color: rgba($blue-400, .8);
 $search-input-focus-shadow-color: $dropdown-input-focus-shadow;
-$search-input-width: 244px;
-$location-badge-color: #aaa;
-$location-badge-bg: $gray-normal;
-$location-badge-active-bg: #4f91f8;
+$search-input-width: 220px;
+$location-badge-active-bg: $blue-500;
 $location-icon-color: #e7e9ed;
-$location-icon-active-color: #807e7e;
 
 /*
  *  Notes
  */
-$notes-light-color: #8e8e8e;
-$notes-action-color: #c3c3c3;
-$notes-role-color: #8e8e8e;
-$notes-role-border-color: #e4e4e4;
-
+$notes-light-color: $gl-text-color-secondary;
+$notes-role-color: $gl-text-color-secondary;
 $note-disabled-comment-color: #b2b2b2;
-$note-form-border-color: #e5e5e5;
-$note-toolbar-color: #959494;
+$note-targe3-outside: #fffff0;
+$note-targe3-inside: #ffffd3;
+$note-line2-border: #ddd;
 
-$zen-control-hover-color: #111;
 
-$calendar-header-color: #b8b8b8;
+/*
+* Zen
+*/
+$zen-control-color: #555;
+
+/*
+* Calendar
+*/
 $calendar-hover-bg: #ecf3fe;
 $calendar-border-color: rgba(#000, .1);
-$calendar-unselectable-bg: $gray-light;
+$calendar-user-contrib-text: #959494;
 
 /*
  *  Cycle Analytics
  */
 $cycle-analytics-box-padding: 30px;
 $cycle-analytics-box-text-color: #8c8c8c;
+$cycle-analytics-big-font: 19px;
+$cycle-analytics-dark-text: $gl-text-color;
+$cycle-analytics-light-gray: #bfbfbf;
+$cycle-analytics-dismiss-icon-color: #b2b2b2;
 
 /*
- * Personal Access Tokens
- */
-$personal-access-tokens-disabled-label-color: #bbb;
+* CI
+*/
+$ci-skipped-color: #888;
+
+/*
+* Boards
+*/
+$issue-boards-font-size: 14px;
+$issue-boards-card-shadow: rgba(186, 186, 186, 0.5);
+
+/*
+* Avatar
+*/
+$avatar_radius: 50%;
+$avatar-border: rgba(0, 0, 0, .1);
+$gl-avatar-size: 40px;
+
+/*
+* Builds
+*/
+$builds-trace-bg: #111;
+
+/*
+* Callout
+*/
+$callout-danger-bg: $red-50;
+$callout-danger-border: $red-100;
+$callout-danger-color: $red-700;
+$callout-warning-bg: $orange-50;
+$callout-warning-border: $orange-100;
+$callout-warning-color: $orange-700;
+$callout-info-bg: $blue-50;
+$callout-info-border: $blue-100;
+$callout-info-color: $blue-700;
+$callout-success-bg: $green-50;
+$callout-success-border: $green-100;
+$callout-success-color: $green-700;
+
+/*
+* Commit Page
+*/
+$commit-max-width-marker-color: rgba(0, 0, 0, 0.0);
+$commit-message-text-area-bg: rgba(0, 0, 0, 0.0);
+
+/*
+* Common
+*/
+$common-gray: $gl-text-color;
+$common-gray-light: #bbb;
+$common-gray-dark: #444;
+$common-red: $gl-text-red;
+$common-green: $gl-text-green;
+
+/*
+* Editor
+*/
+$editor-cancel-color: $red-600;
+
+/*
+* Events
+*/
+$events-pre-color: #777;
+$events-note-icon-color: #777;
+$events-body-border: #ddd;
+
+/*
+* Files
+*/
+$file-image-bg: #eee;
+$blob-bg: #eee;
+$blame-border: #eee;
+$blame-line-numbers-border: #ddd;
+$logs-bg: #eee;
+$logs-li-color: #888;
+$logs-p-color: #333;
 
-$ci-output-bg: #1d1f21;
-$ci-text-color: #c5c8c6;
+/*
+* Forms
+*/
+$input-danger-bg: #f2dede;
+$input-danger-border: $red-400;
+$input-group-addon-bg: #f7f8fa;
+$gl-field-focus-shadow: rgba(0, 0, 0, 0.075);
+$gl-field-focus-shadow-error: rgba($red-500, 0.6);
+
+/*
+* Help
+*/
+$document-index-color: #888;
+$help-shortcut-color: #999;
+$help-shortcut-mapping-color: #555;
+$help-shortcut-header-color: #333;
+
+/*
+* Issues
+*/
+$issues-today-bg: #f3fff2;
+$issues-today-border: #e1e8d5;
+$compare-display-color: #888;
+
+/*
+* jQuery UI
+*/
+$jq-ui-border: #ddd;
+$jq-ui-default-color: #777;
 
-$issue-boards-font-size: 15px;
+/*
+* Label
+*/
+$label-gray-bg: #f8fafc;
+$label-inverse-bg: #333;
+$label-remove-border: rgba(0, 0, 0, .1);
+$label-border-radius: 100px;
+
+/*
+* Lint
+*/
+$lint-incorrect-color: $red-500;
+$lint-correct-color: $green-500;
+
+/*
+* Login
+*/
+$login-brand-holder-color: #888;
+$login-devise-error-color: $red-700;
+
+/*
+* Nav
+*/
+$nav-link-gray: #959494;
+$nav-badge-bg: #eee;
+$nav-toggle-gray: #666;
+
+/*
+* Notify
+*/
+$notify-details: #777;
+$notify-footer: #777;
+$notify-new-file: $green-600;
+$notify-deleted-file: $red-700;
+
+/*
+* Projects
+*/
+$project-option-descr-color: #54565b;
+$project-breadcrumb-color: #999;
+$project-private-forks-notice-odd: $green-600;
+$project-network-controls-color: #888;
+
+/*
+* Runners
+*/
+$runner-state-shared-bg: $green-400;
+$runner-state-specific-bg: $blue-400;
+$runner-status-online-color: $green-600;
+$runner-status-offline-color: $gray-darkest;
+$runner-status-paused-color: $red-500;
+
+/*
+Stat Graph
+*/
+$stat-graph-common-bg: #f3f3f3;
+$stat-graph-area-fill: $green-500;
+$stat-graph-axis-fill: #aaa;
+$stat-graph-orange-fill: $orange-500;
+$stat-graph-selection-fill: #333;
+$stat-graph-selection-stroke: #333;
+
+/*
+* Selects
+*/
+$select2-drop-shadow1: rgba(76, 86, 103, 0.247059);
+$select2-drop-shadow2: rgba(31, 37, 50, 0.317647);
+
+
+/*
+* Todo
+*/
+$todo-alert-blue: $blue-500;
+$todo-body-pre-color: #777;
+$todo-body-border: #ddd;
+
+/*
+* Typography
+*/
+$kdb-bg: #fcfcfc;
+$kdb-color: #555;
+$kdb-border: #ccc;
+$kdb-border-bottom: #bbb;
+$kdb-shadow: #bbb;
+$body-text-shadow: rgba(255,255,255,0.01);
+
+/*
+* UI Dev Kit
+*/
+$ui-dev-kit-example-color: #bbb;
+$ui-dev-kit-example-border: #ddd;
+
+/*
+Pipeline Graph
+*/
+$stage-hover-bg: #eaf3fc;
+$stage-hover-border: #d1e7fc;
+$action-icon-color: #d6d6d6;
+
+/*
+Filtered Search
+*/
+$filter-name-resting-color: #f8f8f8;
+$filter-name-text-color: rgba(0, 0, 0, 0.55);
+$filter-value-text-color: rgba(0, 0, 0, 0.85);
+$filter-name-selected-color: #ebebeb;
+$filter-value-selected-color: #d7d7d7;
diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss
new file mode 100644
index 00000000000..32eb750180f
--- /dev/null
+++ b/app/assets/stylesheets/framework/wells.scss
@@ -0,0 +1,58 @@
+.info-well {
+  background: $gray-light;
+  color: $gl-text-color;
+  border: 1px solid $border-color;
+  border-radius: $border-radius-default;
+
+  .well-segment {
+    padding: $gl-padding;
+
+    &:not(:last-of-type) {
+      border-bottom: 1px solid $well-inner-border;
+    }
+
+    &.branch-info {
+      .monospace,
+      .commit-info {
+        margin-left: 4px;
+      }
+    }
+  }
+
+  .icon-container {
+    display: inline-block;
+    margin-right: 8px;
+
+    svg {
+      position: relative;
+      top: 2px;
+      height: 16px;
+      width: 16px;
+    }
+
+    &.commit-icon {
+      svg {
+        path {
+          fill: $gl-text-color;
+        }
+      }
+    }
+  }
+
+  .label.label-gray {
+    background-color: $well-expand-item;
+  }
+}
+
+.light-well {
+  background-color: $gray-light;
+  padding: 15px;
+}
+
+.well-centered {
+  h1 {
+    font-weight: normal;
+    text-align: center;
+    font-size: 48px;
+  }
+}
diff --git a/app/assets/stylesheets/framework/zen.scss b/app/assets/stylesheets/framework/zen.scss
index ff02ebdd34c..0c226ff7598 100644
--- a/app/assets/stylesheets/framework/zen.scss
+++ b/app/assets/stylesheets/framework/zen.scss
@@ -1,6 +1,6 @@
 .zen-backdrop {
   &.fullscreen {
-    background-color: white;
+    background-color: $white-light;
     position: fixed;
     top: 0;
     bottom: 0;
@@ -12,7 +12,7 @@
       border: none;
       box-shadow: none;
       border-radius: 0;
-      color: #000;
+      color: $black;
       font-size: 20px;
       line-height: 26px;
       padding: 30px;
@@ -20,8 +20,9 @@
       outline: none;
       resize: none;
       height: 100vh;
+      max-height: calc(100vh - 10px);
       max-width: 900px;
-      margin: 0 auto;
+      margin: 0 auto 10px;
     }
 
     .zen-control-leave {
@@ -34,13 +35,13 @@
 
 .zen-control {
   padding: 0;
-  color: #555;
+  color: $zen-control-color;
   background: none;
   border: 0;
 }
 
 .zen-control-full {
-  color: $note-toolbar-color;
+  color: $gl-text-color-secondary;
 
   &:hover {
     color: $gl-link-color;
@@ -57,6 +58,6 @@
   font-size: 36px;
 
   &:hover {
-    color: $zen-control-hover-color;
+    color: $black;
   }
 }
diff --git a/app/assets/stylesheets/highlight/dark.scss b/app/assets/stylesheets/highlight/dark.scss
index d22d9b01495..09951fe3d3e 100644
--- a/app/assets/stylesheets/highlight/dark.scss
+++ b/app/assets/stylesheets/highlight/dark.scss
@@ -1,27 +1,112 @@
 /* https://github.com/MozMorris/tomorrow-pygments */
+
+/*
+* Dark syntax colors
+*/
+$dark-new-bg: rgba(51, 255, 51, 0.1);
+$dark-new-idiff: rgba(51, 255, 51, 0.2);
+$dark-old-bg: rgba(255, 51, 51, 0.2);
+$dark-old-idiff: rgba(255, 51, 51, 0.25);
+$dark-border: #808080;
+$dark-code-border: #666;
+$dark-main-bg: #1d1f21;
+$dark-main-color: #1d1f21;
+$dark-line-color: #c5c8c6;
+$dark-line-num-color: rgba(255, 255, 255, 0.3);
+$dark-line-num-color-new: #627165;
+$dark-line-num-color-old: #806565;
+$dark-diff-not-empty-bg: #557;
+$dark-highlight-bg: #ffe792;
+$dark-highlight-color: $black;
+$dark-pre-hll-bg: #373b41;
+$dark-hll-bg: #373b41;
+$dark-over-bg: #9f9ab5;
+$dark-expanded-bg: #3e3e3e;
+$dark-c: #969896;
+$dark-err: #c66;
+$dark-k: #b294bb;
+$dark-l: #de935f;
+$dark-n: #c5c8c6;
+$dark-o: #8abeb7;
+$dark-p: #c5c8c6;
+$dark-cm: #969896;
+$dark-cp: #969896;
+$dark-c1: #969896;
+$dark-cs: #969896;
+$dark-gd: #c66;
+$dark-gh: #c5c8c6;
+$dark-gi: #b5bd68;
+$dark-gp: #969896;
+$dark-gu: #8abeb7;
+$dark-kc: #b294bb;
+$dark-kd: #b294bb;
+$dark-kn: #8abeb7;
+$dark-kp: #b294bb;
+$dark-kr: #b294bb;
+$dark-kt: #f0c674;
+$dark-ld: #b5bd68;
+$dark-m: #de935f;
+$dark-s: #b5bd68;
+$dark-na: #81a2be;
+$dark-nb: #c5c8c6;
+$dark-nc: #f0c674;
+$dark-no: #c66;
+$dark-nd: #8abeb7;
+$dark-ni: #c5c8c6;
+$dark-ne: #c66;
+$dark-nf: #81a2be;
+$dark-nl: #c5c8c6;
+$dark-nn: #f0c674;
+$dark-nx: #81a2be;
+$dark-py: #c5c8c6;
+$dark-nt: #8abeb7;
+$dark-nv: #c66;
+$dark-ow: #8abeb7;
+$dark-w: #c5c8c6;
+$dark-mf: #de935f;
+$dark-mh: #de935f;
+$dark-mi: #de935f;
+$dark-mo: #de935f;
+$dark-sb: #b5bd68;
+$dark-sc: #c5c8c6;
+$dark-sd: #969896;
+$dark-s2: #b5bd68;
+$dark-se: #de935f;
+$dark-sh: #b5bd68;
+$dark-si: #de935f;
+$dark-sx: #b5bd68;
+$dark-sr: #b5bd68;
+$dark-s1: #b5bd68;
+$dark-ss: #b5bd68;
+$dark-bp: #c5c8c6;
+$dark-vc: #c66;
+$dark-vg: #c66;
+$dark-vi: #c66;
+$dark-il: #de935f;
+
 .code.dark {
   // Line numbers
   .line-numbers,
   .diff-line-num {
-    background-color: #1d1f21;
+    background-color: $dark-main-bg;
   }
 
   .diff-line-num,
   .diff-line-num a {
-    color: rgba(255, 255, 255, 0.3);
+    color: $dark-line-num-color;
   }
 
   // Code itself
   pre.code,
   .diff-line-num {
-    border-color: #666;
+    border-color: $dark-code-border;
   }
 
   &,
   pre.code,
   .line_holder .line_content {
-    background-color: #1d1f21;
-    color: #c5c8c6;
+    background-color: $dark-main-bg;
+    color: $dark-line-color;
   }
 
   // Diff line
@@ -32,98 +117,136 @@
 
     td.diff-line-num.hll:not(.empty-cell),
     td.line_content.hll:not(.empty-cell) {
-      background-color: #557;
-      border-color: darken(#557, 15%);
+      background-color: $dark-diff-not-empty-bg;
+      border-color: darken($dark-diff-not-empty-bg, 15%);
     }
 
     .diff-line-num.new,
     .line_content.new {
-      @include diff_background(rgba(51, 255, 51, 0.1), rgba(51, 255, 51, 0.2), #808080);
+      @include diff_background($dark-new-bg, $dark-new-idiff, $dark-border);
+
+      &::before,
+      a {
+        color: $dark-line-num-color-new;
+      }
     }
 
     .diff-line-num.old,
     .line_content.old {
-      @include diff_background(rgba(255, 51, 51, 0.2), rgba(255, 51, 51, 0.25), #808080);
+      @include diff_background($dark-old-bg, $dark-old-idiff, $dark-border);
+
+      &::before,
+      a {
+        color: $dark-line-num-color-old;
+      }
+    }
+
+    .diff-line-num {
+      &.is-over,
+      &.hll:not(.empty-cell).is-over {
+        background-color: $dark-over-bg;
+        border-color: darken($dark-over-bg, 5%);
+
+        a {
+          color: darken($dark-over-bg, 15%);
+        }
+      }
     }
 
     .line_content.match {
       @include dark-diff-match-line;
     }
+
+    &:not(.diff-expanded) + .diff-expanded,
+    &.diff-expanded + .line_holder:not(.diff-expanded) {
+      > .diff-line-num,
+      > .line_content {
+        border-top: 1px solid $black;
+      }
+    }
+
+    &.diff-expanded {
+      > .diff-line-num,
+      > .line_content {
+        background: $dark-expanded-bg;
+        border-color: $dark-expanded-bg;
+      }
+    }
   }
 
   // highlight line via anchor
   pre .hll {
-    background-color: #557 !important;
+    background-color: $dark-pre-hll-bg !important;
   }
 
   // Search result highlight
   span.highlight_word {
-    background-color: #ffe792 !important;
-    color: #000 !important;
+    background-color: $dark-highlight-bg !important;
+    color: $dark-highlight-color !important;
   }
 
-  .hll { background-color: #373b41; }
-  .c { color: #969896; } /* Comment */
-  .err { color: #c66; } /* Error */
-  .k { color: #b294bb; } /* Keyword */
-  .l { color: #de935f; } /* Literal */
-  .n { color: #c5c8c6; } /* Name */
-  .o { color: #8abeb7; } /* Operator */
-  .p { color: #c5c8c6; } /* Punctuation */
-  .cm { color: #969896; } /* Comment.Multiline */
-  .cp { color: #969896; } /* Comment.Preproc */
-  .c1 { color: #969896; } /* Comment.Single */
-  .cs { color: #969896; } /* Comment.Special */
-  .gd { color: #c66; } /* Generic.Deleted */
+  .hll { background-color: $dark-hll-bg; }
+  .c { color: $dark-c; } /* Comment */
+  .err { color: $dark-err; } /* Error */
+  .k { color: $dark-k; } /* Keyword */
+  .l { color: $dark-l; } /* Literal */
+  .n { color: $dark-n; } /* Name */
+  .o { color: $dark-o; } /* Operator */
+  .p { color: $dark-p; } /* Punctuation */
+  .cm { color: $dark-cm; } /* Comment.Multiline */
+  .cp { color: $dark-cp; } /* Comment.Preproc */
+  .c1 { color: $dark-c1; } /* Comment.Single */
+  .cs { color: $dark-cs; } /* Comment.Special */
+  .gd { color: $dark-gd; } /* Generic.Deleted */
   .ge { font-style: italic; } /* Generic.Emph */
-  .gh { color: #c5c8c6; font-weight: bold; } /* Generic.Heading */
-  .gi { color: #b5bd68; } /* Generic.Inserted */
-  .gp { color: #969896; font-weight: bold; } /* Generic.Prompt */
+  .gh { color: $dark-gh; font-weight: bold; } /* Generic.Heading */
+  .gi { color: $dark-gi; } /* Generic.Inserted */
+  .gp { color: $dark-gp; font-weight: bold; } /* Generic.Prompt */
   .gs { font-weight: bold; } /* Generic.Strong */
-  .gu { color: #8abeb7; font-weight: bold; } /* Generic.Subheading */
-  .kc { color: #b294bb; } /* Keyword.Constant */
-  .kd { color: #b294bb; } /* Keyword.Declaration */
-  .kn { color: #8abeb7; } /* Keyword.Namespace */
-  .kp { color: #b294bb; } /* Keyword.Pseudo */
-  .kr { color: #b294bb; } /* Keyword.Reserved */
-  .kt { color: #f0c674; } /* Keyword.Type */
-  .ld { color: #b5bd68; } /* Literal.Date */
-  .m { color: #de935f; } /* Literal.Number */
-  .s { color: #b5bd68; } /* Literal.String */
-  .na { color: #81a2be; } /* Name.Attribute */
-  .nb { color: #c5c8c6; } /* Name.Builtin */
-  .nc { color: #f0c674; } /* Name.Class */
-  .no { color: #c66; } /* Name.Constant */
-  .nd { color: #8abeb7; } /* Name.Decorator */
-  .ni { color: #c5c8c6; } /* Name.Entity */
-  .ne { color: #c66; } /* Name.Exception */
-  .nf { color: #81a2be; } /* Name.Function */
-  .nl { color: #c5c8c6; } /* Name.Label */
-  .nn { color: #f0c674; } /* Name.Namespace */
-  .nx { color: #81a2be; } /* Name.Other */
-  .py { color: #c5c8c6; } /* Name.Property */
-  .nt { color: #8abeb7; } /* Name.Tag */
-  .nv { color: #c66; } /* Name.Variable */
-  .ow { color: #8abeb7; } /* Operator.Word */
-  .w { color: #c5c8c6; } /* Text.Whitespace */
-  .mf { color: #de935f; } /* Literal.Number.Float */
-  .mh { color: #de935f; } /* Literal.Number.Hex */
-  .mi { color: #de935f; } /* Literal.Number.Integer */
-  .mo { color: #de935f; } /* Literal.Number.Oct */
-  .sb { color: #b5bd68; } /* Literal.String.Backtick */
-  .sc { color: #c5c8c6; } /* Literal.String.Char */
-  .sd { color: #969896; } /* Literal.String.Doc */
-  .s2 { color: #b5bd68; } /* Literal.String.Double */
-  .se { color: #de935f; } /* Literal.String.Escape */
-  .sh { color: #b5bd68; } /* Literal.String.Heredoc */
-  .si { color: #de935f; } /* Literal.String.Interpol */
-  .sx { color: #b5bd68; } /* Literal.String.Other */
-  .sr { color: #b5bd68; } /* Literal.String.Regex */
-  .s1 { color: #b5bd68; } /* Literal.String.Single */
-  .ss { color: #b5bd68; } /* Literal.String.Symbol */
-  .bp { color: #c5c8c6; } /* Name.Builtin.Pseudo */
-  .vc { color: #c66; } /* Name.Variable.Class */
-  .vg { color: #c66; } /* Name.Variable.Global */
-  .vi { color: #c66; } /* Name.Variable.Instance */
-  .il { color: #de935f; } /* Literal.Number.Integer.Long */
+  .gu { color: $dark-gu; font-weight: bold; } /* Generic.Subheading */
+  .kc { color: $dark-kc; } /* Keyword.Constant */
+  .kd { color: $dark-kd; } /* Keyword.Declaration */
+  .kn { color: $dark-kn; } /* Keyword.Namespace */
+  .kp { color: $dark-kp; } /* Keyword.Pseudo */
+  .kr { color: $dark-kr; } /* Keyword.Reserved */
+  .kt { color: $dark-kt; } /* Keyword.Type */
+  .ld { color: $dark-ld; } /* Literal.Date */
+  .m { color: $dark-m; } /* Literal.Number */
+  .s { color: $dark-s; } /* Literal.String */
+  .na { color: $dark-na; } /* Name.Attribute */
+  .nb { color: $dark-nb; } /* Name.Builtin */
+  .nc { color: $dark-nc; } /* Name.Class */
+  .no { color: $dark-no; } /* Name.Constant */
+  .nd { color: $dark-nd; } /* Name.Decorator */
+  .ni { color: $dark-ni; } /* Name.Entity */
+  .ne { color: $dark-ne; } /* Name.Exception */
+  .nf { color: $dark-nf; } /* Name.Function */
+  .nl { color: $dark-nl; } /* Name.Label */
+  .nn { color: $dark-nn; } /* Name.Namespace */
+  .nx { color: $dark-nx; } /* Name.Other */
+  .py { color: $dark-py; } /* Name.Property */
+  .nt { color: $dark-nt; } /* Name.Tag */
+  .nv { color: $dark-nv; } /* Name.Variable */
+  .ow { color: $dark-ow; } /* Operator.Word */
+  .w { color: $dark-w; } /* Text.Whitespace */
+  .mf { color: $dark-mf; } /* Literal.Number.Float */
+  .mh { color: $dark-mh; } /* Literal.Number.Hex */
+  .mi { color: $dark-mi; } /* Literal.Number.Integer */
+  .mo { color: $dark-mo; } /* Literal.Number.Oct */
+  .sb { color: $dark-sb; } /* Literal.String.Backtick */
+  .sc { color: $dark-sc; } /* Literal.String.Char */
+  .sd { color: $dark-sd; } /* Literal.String.Doc */
+  .s2 { color: $dark-s2; } /* Literal.String.Double */
+  .se { color: $dark-se; } /* Literal.String.Escape */
+  .sh { color: $dark-sh; } /* Literal.String.Heredoc */
+  .si { color: $dark-si; } /* Literal.String.Interpol */
+  .sx { color: $dark-sx; } /* Literal.String.Other */
+  .sr { color: $dark-sr; } /* Literal.String.Regex */
+  .s1 { color: $dark-s1; } /* Literal.String.Single */
+  .ss { color: $dark-ss; } /* Literal.String.Symbol */
+  .bp { color: $dark-bp; } /* Name.Builtin.Pseudo */
+  .vc { color: $dark-vc; } /* Name.Variable.Class */
+  .vg { color: $dark-vg; } /* Name.Variable.Global */
+  .vi { color: $dark-vi; } /* Name.Variable.Instance */
+  .il { color: $dark-il; } /* Literal.Number.Integer.Long */
 }
diff --git a/app/assets/stylesheets/highlight/monokai.scss b/app/assets/stylesheets/highlight/monokai.scss
index db8da8aab10..b6a6d298adf 100644
--- a/app/assets/stylesheets/highlight/monokai.scss
+++ b/app/assets/stylesheets/highlight/monokai.scss
@@ -1,27 +1,112 @@
 /* https://github.com/richleland/pygments-css/blob/master/monokai.css */
+
+/*
+* Monokai Colors
+*/
+$monokai-bg: #272822;
+$monokai-border: #555;
+$monokai-text-color: #f8f8f2;
+$monokai-line-num-color: rgba(255, 255, 255, 0.3);
+$monokai-line-num-color-new: #707565;
+$monokai-line-num-color-old: #7e736f;
+$monokai-line-empty-bg: #49483e;
+$monokai-line-empty-border: darken($monokai-line-empty-bg, 15%);
+$monokai-diff-border: #808080;
+$monokai-highlight-bg: #ffe792;
+$monokai-over-bg: #9f9ab5;
+$monokai-expanded-bg: #3e3e3e;
+
+$monokai-new-bg: rgba(166, 226, 46, 0.1);
+$monokai-new-idiff: rgba(166, 226, 46, 0.15);
+
+$monokai-old-bg: rgba(254, 147, 140, 0.15);
+$monokai-old-idiff: rgba(254, 147, 140, 0.2);
+
+$monokai-hll: #49483e;
+$monokai-c: #75715e;
+$monokai-err-color: #960050;
+$monokai-err-bg: #1e0010;
+$monokai-k: #66d9ef;
+$monokai-l: #ae81ff;
+$monokai-n: #f8f8f2;
+$monokai-o: #f92672;
+$monokai-p: #f8f8f2;
+$monokai-cm: #75715e;
+$monokai-cp: #75715e;
+$monokai-c1: #75715e;
+$monokai-cs: #75715e;
+$monokai-kc: #66d9ef;
+$monokai-kd: #66d9ef;
+$monokai-kn: #f92672;
+$monokai-kp: #66d9ef;
+$monokai-kr: #66d9ef;
+$monokai-kt: #66d9ef;
+$monokai-ld: #e6db74;
+$monokai-m: #ae81ff;
+$monokai-s: #e6db74;
+$monokai-na: #a6e22e;
+$monokai-nb: #f8f8f2;
+$monokai-nc: #a6e22e;
+$monokai-no: #66d9ef;
+$monokai-nd: #a6e22e;
+$monokai-ni: #f8f8f2;
+$monokai-ne: #a6e22e;
+$monokai-nf: #a6e22e;
+$monokai-nl: #f8f8f2;
+$monokai-nn: #f8f8f2;
+$monokai-nx: #a6e22e;
+$monokai-py: #f8f8f2;
+$monokai-nt: #f92672;
+$monokai-nv: #f8f8f2;
+$monokai-ow: #f92672;
+$monokai-w: #f8f8f2;
+$monokai-mf: #ae81ff;
+$monokai-mh: #ae81ff;
+$monokai-mi: #ae81ff;
+$monokai-mo: #ae81ff;
+$monokai-sb: #e6db74;
+$monokai-sc: #e6db74;
+$monokai-sd: #e6db74;
+$monokai-s2: #e6db74;
+$monokai-se: #ae81ff;
+$monokai-sh: #e6db74;
+$monokai-si: #e6db74;
+$monokai-sx: #e6db74;
+$monokai-sr: #e6db74;
+$monokai-s1: #e6db74;
+$monokai-ss: #e6db74;
+$monokai-bp: #f8f8f2;
+$monokai-vc: #f8f8f2;
+$monokai-vg: #f8f8f2;
+$monokai-vi: #f8f8f2;
+$monokai-il: #ae81ff;
+$monokai-gu: #75715e;
+$monokai-gd: #f92672;
+$monokai-gi: #a6e22e;
+
 .code.monokai {
   // Line numbers
   .line-numbers,
   .diff-line-num {
-    background-color: #272822;
+    background-color: $monokai-bg;
   }
 
   .diff-line-num,
   .diff-line-num a {
-    color: rgba(255, 255, 255, 0.3);
+    color: $monokai-line-num-color;
   }
 
   // Code itself
   pre.code,
   .diff-line-num {
-    border-color: #555;
+    border-color: $monokai-border;
   }
 
   &,
   pre.code,
   .line_holder .line_content {
-    background-color: #272822;
-    color: #f8f8f2;
+    background-color: $monokai-bg;
+    color: $monokai-text-color;
   }
 
   // Diff line
@@ -32,96 +117,134 @@
 
     td.diff-line-num.hll:not(.empty-cell),
     td.line_content.hll:not(.empty-cell) {
-      background-color: #49483e;
-      border-color: darken(#49483e, 15%);
+      background-color: $monokai-line-empty-bg;
+      border-color: $monokai-line-empty-border;
     }
 
     .diff-line-num.new,
     .line_content.new {
-      @include diff_background(rgba(166, 226, 46, 0.1), rgba(166, 226, 46, 0.15), #808080);
+      @include diff_background($monokai-new-bg, $monokai-new-idiff, $monokai-diff-border);
+
+      &::before,
+      a {
+        color: $monokai-line-num-color-new;
+      }
     }
 
     .diff-line-num.old,
     .line_content.old {
-      @include diff_background(rgba(254, 147, 140, 0.15), rgba(254, 147, 140, 0.2), #808080);
+      @include diff_background($monokai-old-bg, $monokai-old-idiff, $monokai-diff-border);
+
+      &::before,
+      a {
+        color: $monokai-line-num-color-old;
+      }
+    }
+
+    .diff-line-num {
+      &.is-over,
+      &.hll:not(.empty-cell).is-over {
+        background-color: $monokai-over-bg;
+        border-color: darken($monokai-over-bg, 5%);
+
+        a {
+          color: darken($monokai-over-bg, 15%);
+        }
+      }
     }
 
     .line_content.match {
       @include dark-diff-match-line;
     }
+
+    &:not(.diff-expanded) + .diff-expanded,
+    &.diff-expanded + .line_holder:not(.diff-expanded) {
+      > .diff-line-num,
+      > .line_content {
+        border-top: 1px solid $black;
+      }
+    }
+
+    &.diff-expanded {
+      > .diff-line-num,
+      > .line_content {
+        background: $monokai-expanded-bg;
+        border-color: $monokai-expanded-bg;
+      }
+    }
   }
 
   // highlight line via anchor
   pre .hll {
-    background-color: #49483e !important;
+    background-color: $monokai-hll !important;
   }
 
   // Search result highlight
   span.highlight_word {
-    background-color: #ffe792 !important;
-    color: #000 !important;
+    background-color: $monokai-highlight-bg !important;
+    color: $black !important;
   }
 
-  .hll { background-color: #49483e; }
-  .c { color: #75715e; } /* Comment */
-  .err { color: #960050; background-color: #1e0010; } /* Error */
-  .k { color: #66d9ef; } /* Keyword */
-  .l { color: #ae81ff; } /* Literal */
-  .n { color: #f8f8f2; } /* Name */
-  .o { color: #f92672; } /* Operator */
-  .p { color: #f8f8f2; } /* Punctuation */
-  .cm { color: #75715e; } /* Comment.Multiline */
-  .cp { color: #75715e; } /* Comment.Preproc */
-  .c1 { color: #75715e; } /* Comment.Single */
-  .cs { color: #75715e; } /* Comment.Special */
+  .hll { background-color: $monokai-hll; }
+  .c { color: $monokai-c; } /* Comment */
+  .err { color: $monokai-err-color; background-color: $monokai-err-bg; } /* Error */
+  .k { color: $monokai-k; } /* Keyword */
+  .l { color: $monokai-l; } /* Literal */
+  .n { color: $monokai-n; } /* Name */
+  .o { color: $monokai-o; } /* Operator */
+  .p { color: $monokai-p; } /* Punctuation */
+  .cm { color: $monokai-cm; } /* Comment.Multiline */
+  .cp { color: $monokai-cp; } /* Comment.Preproc */
+  .c1 { color: $monokai-c1; } /* Comment.Single */
+  .cs { color: $monokai-cs; } /* Comment.Special */
   .ge { font-style: italic; } /* Generic.Emph */
   .gs { font-weight: bold; } /* Generic.Strong */
-  .kc { color: #66d9ef; } /* Keyword.Constant */
-  .kd { color: #66d9ef; } /* Keyword.Declaration */
-  .kn { color: #f92672; } /* Keyword.Namespace */
-  .kp { color: #66d9ef; } /* Keyword.Pseudo */
-  .kr { color: #66d9ef; } /* Keyword.Reserved */
-  .kt { color: #66d9ef; } /* Keyword.Type */
-  .ld { color: #e6db74; } /* Literal.Date */
-  .m { color: #ae81ff; } /* Literal.Number */
-  .s { color: #e6db74; } /* Literal.String */
-  .na { color: #a6e22e; } /* Name.Attribute */
-  .nb { color: #f8f8f2; } /* Name.Builtin */
-  .nc { color: #a6e22e; } /* Name.Class */
-  .no { color: #66d9ef; } /* Name.Constant */
-  .nd { color: #a6e22e; } /* Name.Decorator */
-  .ni { color: #f8f8f2; } /* Name.Entity */
-  .ne { color: #a6e22e; } /* Name.Exception */
-  .nf { color: #a6e22e; } /* Name.Function */
-  .nl { color: #f8f8f2; } /* Name.Label */
-  .nn { color: #f8f8f2; } /* Name.Namespace */
-  .nx { color: #a6e22e; } /* Name.Other */
-  .py { color: #f8f8f2; } /* Name.Property */
-  .nt { color: #f92672; } /* Name.Tag */
-  .nv { color: #f8f8f2; } /* Name.Variable */
-  .ow { color: #f92672; } /* Operator.Word */
-  .w { color: #f8f8f2; } /* Text.Whitespace */
-  .mf { color: #ae81ff; } /* Literal.Number.Float */
-  .mh { color: #ae81ff; } /* Literal.Number.Hex */
-  .mi { color: #ae81ff; } /* Literal.Number.Integer */
-  .mo { color: #ae81ff; } /* Literal.Number.Oct */
-  .sb { color: #e6db74; } /* Literal.String.Backtick */
-  .sc { color: #e6db74; } /* Literal.String.Char */
-  .sd { color: #e6db74; } /* Literal.String.Doc */
-  .s2 { color: #e6db74; } /* Literal.String.Double */
-  .se { color: #ae81ff; } /* Literal.String.Escape */
-  .sh { color: #e6db74; } /* Literal.String.Heredoc */
-  .si { color: #e6db74; } /* Literal.String.Interpol */
-  .sx { color: #e6db74; } /* Literal.String.Other */
-  .sr { color: #e6db74; } /* Literal.String.Regex */
-  .s1 { color: #e6db74; } /* Literal.String.Single */
-  .ss { color: #e6db74; } /* Literal.String.Symbol */
-  .bp { color: #f8f8f2; } /* Name.Builtin.Pseudo */
-  .vc { color: #f8f8f2; } /* Name.Variable.Class */
-  .vg { color: #f8f8f2; } /* Name.Variable.Global */
-  .vi { color: #f8f8f2; } /* Name.Variable.Instance */
-  .il { color: #ae81ff; } /* Literal.Number.Integer.Long */
-  .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
-  .gd { color: #f92672; } /* Generic.Deleted & Diff Deleted */
-  .gi { color: #a6e22e; } /* Generic.Inserted & Diff Inserted */
+  .kc { color: $monokai-kc; } /* Keyword.Constant */
+  .kd { color: $monokai-kd; } /* Keyword.Declaration */
+  .kn { color: $monokai-kn; } /* Keyword.Namespace */
+  .kp { color: $monokai-kp; } /* Keyword.Pseudo */
+  .kr { color: $monokai-kr; } /* Keyword.Reserved */
+  .kt { color: $monokai-kt; } /* Keyword.Type */
+  .ld { color: $monokai-ld; } /* Literal.Date */
+  .m { color: $monokai-m; } /* Literal.Number */
+  .s { color: $monokai-s; } /* Literal.String */
+  .na { color: $monokai-na; } /* Name.Attribute */
+  .nb { color: $monokai-nb; } /* Name.Builtin */
+  .nc { color: $monokai-nc; } /* Name.Class */
+  .no { color: $monokai-no; } /* Name.Constant */
+  .nd { color: $monokai-nd; } /* Name.Decorator */
+  .ni { color: $monokai-ni; } /* Name.Entity */
+  .ne { color: $monokai-ne; } /* Name.Exception */
+  .nf { color: $monokai-nf; } /* Name.Function */
+  .nl { color: $monokai-nl; } /* Name.Label */
+  .nn { color: $monokai-nn; } /* Name.Namespace */
+  .nx { color: $monokai-nx; } /* Name.Other */
+  .py { color: $monokai-py; } /* Name.Property */
+  .nt { color: $monokai-nt; } /* Name.Tag */
+  .nv { color: $monokai-nv; } /* Name.Variable */
+  .ow { color: $monokai-ow; } /* Operator.Word */
+  .w { color: $monokai-w; } /* Text.Whitespace */
+  .mf { color: $monokai-mf; } /* Literal.Number.Float */
+  .mh { color: $monokai-mh; } /* Literal.Number.Hex */
+  .mi { color: $monokai-mi; } /* Literal.Number.Integer */
+  .mo { color: $monokai-mo; } /* Literal.Number.Oct */
+  .sb { color: $monokai-sb; } /* Literal.String.Backtick */
+  .sc { color: $monokai-sc; } /* Literal.String.Char */
+  .sd { color: $monokai-sd; } /* Literal.String.Doc */
+  .s2 { color: $monokai-s2; } /* Literal.String.Double */
+  .se { color: $monokai-se; } /* Literal.String.Escape */
+  .sh { color: $monokai-sh; } /* Literal.String.Heredoc */
+  .si { color: $monokai-si; } /* Literal.String.Interpol */
+  .sx { color: $monokai-sx; } /* Literal.String.Other */
+  .sr { color: $monokai-sr; } /* Literal.String.Regex */
+  .s1 { color: $monokai-s1; } /* Literal.String.Single */
+  .ss { color: $monokai-ss; } /* Literal.String.Symbol */
+  .bp { color: $monokai-bp; } /* Name.Builtin.Pseudo */
+  .vc { color: $monokai-vc; } /* Name.Variable.Class */
+  .vg { color: $monokai-vg; } /* Name.Variable.Global */
+  .vi { color: $monokai-vi; } /* Name.Variable.Instance */
+  .il { color: $monokai-il; } /* Literal.Number.Integer.Long */
+  .gu { color: $monokai-gu; } /* Generic.Subheading & Diff Unified/Comment? */
+  .gd { color: $monokai-gd; } /* Generic.Deleted & Diff Deleted */
+  .gi { color: $monokai-gi; } /* Generic.Inserted & Diff Inserted */
 }
diff --git a/app/assets/stylesheets/highlight/solarized_dark.scss b/app/assets/stylesheets/highlight/solarized_dark.scss
index a87333146de..4f7a50dcb4f 100644
--- a/app/assets/stylesheets/highlight/solarized_dark.scss
+++ b/app/assets/stylesheets/highlight/solarized_dark.scss
@@ -1,27 +1,116 @@
 /* https://gist.github.com/qguv/7936275 */
+
+/*
+* Solarized dark colors
+*/
+$solarized-dark-new-bg: rgba(133, 153, 0, 0.15);
+$solarized-dark-new-idiff: rgba(133, 153, 0, 0.25);
+$solarized-dark-old-bg: rgba(220, 50, 47, 0.3);
+$solarized-dark-old-idiff: rgba(220, 50, 47, 0.25);
+$solarized-dark-border: #113b46;
+$solarized-dark-pre-bg: #002b36;
+$solarized-dark-pre-color: #93a1a1;
+$solarized-dark-pre-border: #113b46;
+$solarized-dark-line-bg: #002b36;
+$solarized-dark-line-color: rgba(255, 255, 255, 0.3);
+$solarized-dark-line-color-new: #5a766c;
+$solarized-dark-line-color-old: #7a6c71;
+$solarized-dark-highlight: #094554;
+$solarized-dark-hll-bg: #174652;
+$solarized-dark-over-bg: #9f9ab5;
+$solarized-dark-expanded-bg: #010d10;
+$solarized-dark-c: #586e75;
+$solarized-dark-err: #93a1a1;
+$solarized-dark-g: #93a1a1;
+$solarized-dark-k: #859900;
+$solarized-dark-l: #93a1a1;
+$solarized-dark-n: #93a1a1;
+$solarized-dark-o: #859900;
+$solarized-dark-x: #cb4b16;
+$solarized-dark-p: #93a1a1;
+$solarized-dark-cm: #586e75;
+$solarized-dark-cp: #859900;
+$solarized-dark-c1: #586e75;
+$solarized-dark-cs: #859900;
+$solarized-dark-gd: #2aa198;
+$solarized-dark-ge: #93a1a1;
+$solarized-dark-gr: #dc322f;
+$solarized-dark-gh: #cb4b16;
+$solarized-dark-gi: #859900;
+$solarized-dark-go: #93a1a1;
+$solarized-dark-gp: #93a1a1;
+$solarized-dark-gs: #93a1a1;
+$solarized-dark-gu: #cb4b16;
+$solarized-dark-gt: #93a1a1;
+$solarized-dark-kc: #cb4b16;
+$solarized-dark-kd: #268bd2;
+$solarized-dark-kn: #859900;
+$solarized-dark-kp: #859900;
+$solarized-dark-kr: #268bd2;
+$solarized-dark-kt: #dc322f;
+$solarized-dark-ld: #93a1a1;
+$solarized-dark-m: #2aa198;
+$solarized-dark-s: #2aa198;
+$solarized-dark-na: #93a1a1;
+$solarized-dark-nb: #b58900;
+$solarized-dark-nc: #268bd2;
+$solarized-dark-no: #cb4b16;
+$solarized-dark-nd: #268bd2;
+$solarized-dark-ni: #cb4b16;
+$solarized-dark-ne: #cb4b16;
+$solarized-dark-nf: #268bd2;
+$solarized-dark-nl: #93a1a1;
+$solarized-dark-nn: #93a1a1;
+$solarized-dark-nx: #93a1a1;
+$solarized-dark-py: #93a1a1;
+$solarized-dark-nt: #268bd2;
+$solarized-dark-nv: #268bd2;
+$solarized-dark-ow: #859900;
+$solarized-dark-w: #93a1a1;
+$solarized-dark-mf: #2aa198;
+$solarized-dark-mh: #2aa198;
+$solarized-dark-mi: #2aa198;
+$solarized-dark-mo: #2aa198;
+$solarized-dark-sb: #586e75;
+$solarized-dark-sc: #2aa198;
+$solarized-dark-sd: #93a1a1;
+$solarized-dark-s2: #2aa198;
+$solarized-dark-se: #cb4b16;
+$solarized-dark-sh: #93a1a1;
+$solarized-dark-si: #2aa198;
+$solarized-dark-sx: #2aa198;
+$solarized-dark-sr: #dc322f;
+$solarized-dark-s1: #2aa198;
+$solarized-dark-ss: #2aa198;
+$solarized-dark-bp: #268bd2;
+$solarized-dark-vc: #268bd2;
+$solarized-dark-vg: #268bd2;
+$solarized-dark-vi: #268bd2;
+$solarized-dark-il: #2aa198;
+
 .code.solarized-dark {
   // Line numbers
   .line-numbers,
   .diff-line-num {
-    background-color: #002b36;
+    background-color: $solarized-dark-line-bg;
   }
 
   .diff-line-num,
   .diff-line-num a {
-    color: rgba(255, 255, 255, 0.3);
+    color: $solarized-dark-line-color;
   }
 
   // Code itself
   pre.code,
   .diff-line-num {
-    border-color: #113b46;
+    border-color: $solarized-dark-pre-border;
   }
 
   &,
   pre.code,
   .line_holder .line_content {
-    background-color: #002b36;
-    color: #93a1a1;
+    background-color: $solarized-dark-pre-bg;
+    color: $solarized-dark-pre-color;
   }
 
   // Diff line
@@ -32,33 +121,71 @@
 
     td.diff-line-num.hll:not(.empty-cell),
     td.line_content.hll:not(.empty-cell) {
-      background-color: #174652;
-      border-color: darken(#174652, 15%);
+      background-color: $solarized-dark-hll-bg;
+      border-color: darken($solarized-dark-hll-bg, 15%);
     }
 
     .diff-line-num.new,
     .line_content.new {
-      @include diff_background(rgba(133, 153, 0, 0.15), rgba(133, 153, 0, 0.25), #113b46);
+      @include diff_background($solarized-dark-new-bg, $solarized-dark-new-idiff, $solarized-dark-border);
+
+      &::before,
+      a {
+        color: $solarized-dark-line-color-new;
+      }
     }
 
     .diff-line-num.old,
     .line_content.old {
-      @include diff_background(rgba(220, 50, 47, 0.3), rgba(220, 50, 47, 0.25), #113b46);
+      @include diff_background($solarized-dark-old-bg, $solarized-dark-old-idiff, $solarized-dark-border);
+
+      &::before,
+      a {
+        color: $solarized-dark-line-color-old;
+      }
+    }
+
+    .diff-line-num {
+      &.is-over,
+      &.hll:not(.empty-cell).is-over {
+        background-color: $solarized-dark-over-bg;
+        border-color: darken($solarized-dark-over-bg, 5%);
+
+        a {
+          color: darken($solarized-dark-over-bg, 15%);
+        }
+      }
     }
 
     .line_content.match {
       @include dark-diff-match-line;
     }
+
+    &:not(.diff-expanded) + .diff-expanded,
+    &.diff-expanded + .line_holder:not(.diff-expanded) {
+      > .diff-line-num,
+      > .line_content {
+        border-top: 1px solid $black;
+      }
+    }
+
+    &.diff-expanded {
+      > .diff-line-num,
+      > .line_content {
+        background: $solarized-dark-expanded-bg;
+        border-color: $solarized-dark-expanded-bg;
+      }
+    }
   }
 
   // highlight line via anchor
   pre .hll {
-    background-color: #174652 !important;
+    background-color: $solarized-dark-hll-bg !important;
   }
 
   // Search result highlight
   span.highlight_word {
-    background-color: #094554 !important;
+    background-color: $solarized-dark-highlight !important;
   }
 
   /* Solarized Dark
@@ -79,72 +206,72 @@
   green     #859900  operators, other keywords
   */
 
-  .c { color: #586e75; } /* Comment */
-  .err { color: #93a1a1; } /* Error */
-  .g { color: #93a1a1; } /* Generic */
-  .k { color: #859900; } /* Keyword */
-  .l { color: #93a1a1; } /* Literal */
-  .n { color: #93a1a1; } /* Name */
-  .o { color: #859900; } /* Operator */
-  .x { color: #cb4b16; } /* Other */
-  .p { color: #93a1a1; } /* Punctuation */
-  .cm { color: #586e75; } /* Comment.Multiline */
-  .cp { color: #859900; } /* Comment.Preproc */
-  .c1 { color: #586e75; } /* Comment.Single */
-  .cs { color: #859900; } /* Comment.Special */
-  .gd { color: #2aa198; } /* Generic.Deleted */
-  .ge { color: #93a1a1; font-style: italic; } /* Generic.Emph */
-  .gr { color: #dc322f; } /* Generic.Error */
-  .gh { color: #cb4b16; } /* Generic.Heading */
-  .gi { color: #859900; } /* Generic.Inserted */
-  .go { color: #93a1a1; } /* Generic.Output */
-  .gp { color: #93a1a1; } /* Generic.Prompt */
-  .gs { color: #93a1a1; font-weight: bold; } /* Generic.Strong */
-  .gu { color: #cb4b16; } /* Generic.Subheading */
-  .gt { color: #93a1a1; } /* Generic.Traceback */
-  .kc { color: #cb4b16; } /* Keyword.Constant */
-  .kd { color: #268bd2; } /* Keyword.Declaration */
-  .kn { color: #859900; } /* Keyword.Namespace */
-  .kp { color: #859900; } /* Keyword.Pseudo */
-  .kr { color: #268bd2; } /* Keyword.Reserved */
-  .kt { color: #dc322f; } /* Keyword.Type */
-  .ld { color: #93a1a1; } /* Literal.Date */
-  .m { color: #2aa198; } /* Literal.Number */
-  .s { color: #2aa198; } /* Literal.String */
-  .na { color: #93a1a1; } /* Name.Attribute */
-  .nb { color: #b58900; } /* Name.Builtin */
-  .nc { color: #268bd2; } /* Name.Class */
-  .no { color: #cb4b16; } /* Name.Constant */
-  .nd { color: #268bd2; } /* Name.Decorator */
-  .ni { color: #cb4b16; } /* Name.Entity */
-  .ne { color: #cb4b16; } /* Name.Exception */
-  .nf { color: #268bd2; } /* Name.Function */
-  .nl { color: #93a1a1; } /* Name.Label */
-  .nn { color: #93a1a1; } /* Name.Namespace */
-  .nx { color: #93a1a1; } /* Name.Other */
-  .py { color: #93a1a1; } /* Name.Property */
-  .nt { color: #268bd2; } /* Name.Tag */
-  .nv { color: #268bd2; } /* Name.Variable */
-  .ow { color: #859900; } /* Operator.Word */
-  .w { color: #93a1a1; } /* Text.Whitespace */
-  .mf { color: #2aa198; } /* Literal.Number.Float */
-  .mh { color: #2aa198; } /* Literal.Number.Hex */
-  .mi { color: #2aa198; } /* Literal.Number.Integer */
-  .mo { color: #2aa198; } /* Literal.Number.Oct */
-  .sb { color: #586e75; } /* Literal.String.Backtick */
-  .sc { color: #2aa198; } /* Literal.String.Char */
-  .sd { color: #93a1a1; } /* Literal.String.Doc */
-  .s2 { color: #2aa198; } /* Literal.String.Double */
-  .se { color: #cb4b16; } /* Literal.String.Escape */
-  .sh { color: #93a1a1; } /* Literal.String.Heredoc */
-  .si { color: #2aa198; } /* Literal.String.Interpol */
-  .sx { color: #2aa198; } /* Literal.String.Other */
-  .sr { color: #dc322f; } /* Literal.String.Regex */
-  .s1 { color: #2aa198; } /* Literal.String.Single */
-  .ss { color: #2aa198; } /* Literal.String.Symbol */
-  .bp { color: #268bd2; } /* Name.Builtin.Pseudo */
-  .vc { color: #268bd2; } /* Name.Variable.Class */
-  .vg { color: #268bd2; } /* Name.Variable.Global */
-  .vi { color: #268bd2; } /* Name.Variable.Instance */
-  .il { color: #2aa198; } /* Literal.Number.Integer.Long */
+  .c { color: $solarized-dark-c; } /* Comment */
+  .err { color: $solarized-dark-err; } /* Error */
+  .g { color: $solarized-dark-g; } /* Generic */
+  .k { color: $solarized-dark-k; } /* Keyword */
+  .l { color: $solarized-dark-l; } /* Literal */
+  .n { color: $solarized-dark-n; } /* Name */
+  .o { color: $solarized-dark-o; } /* Operator */
+  .x { color: $solarized-dark-x; } /* Other */
+  .p { color: $solarized-dark-p; } /* Punctuation */
+  .cm { color: $solarized-dark-cm; } /* Comment.Multiline */
+  .cp { color: $solarized-dark-cp; } /* Comment.Preproc */
+  .c1 { color: $solarized-dark-c1; } /* Comment.Single */
+  .cs { color: $solarized-dark-cs; } /* Comment.Special */
+  .gd { color: $solarized-dark-gd; } /* Generic.Deleted */
+  .ge { color: $solarized-dark-ge; font-style: italic; } /* Generic.Emph */
+  .gr { color: $solarized-dark-gr; } /* Generic.Error */
+  .gh { color: $solarized-dark-gh; } /* Generic.Heading */
+  .gi { color: $solarized-dark-gi; } /* Generic.Inserted */
+  .go { color: $solarized-dark-go; } /* Generic.Output */
+  .gp { color: $solarized-dark-gp; } /* Generic.Prompt */
+  .gs { color: $solarized-dark-gs; font-weight: bold; } /* Generic.Strong */
+  .gu { color: $solarized-dark-gu; } /* Generic.Subheading */
+  .gt { color: $solarized-dark-gt; } /* Generic.Traceback */
+  .kc { color: $solarized-dark-kc; } /* Keyword.Constant */
+  .kd { color: $solarized-dark-kd; } /* Keyword.Declaration */
+  .kn { color: $solarized-dark-kn; } /* Keyword.Namespace */
+  .kp { color: $solarized-dark-kp; } /* Keyword.Pseudo */
+  .kr { color: $solarized-dark-kr; } /* Keyword.Reserved */
+  .kt { color: $solarized-dark-kt; } /* Keyword.Type */
+  .ld { color: $solarized-dark-ld; } /* Literal.Date */
+  .m { color: $solarized-dark-m; } /* Literal.Number */
+  .s { color: $solarized-dark-s; } /* Literal.String */
+  .na { color: $solarized-dark-na; } /* Name.Attribute */
+  .nb { color: $solarized-dark-nb; } /* Name.Builtin */
+  .nc { color: $solarized-dark-nc; } /* Name.Class */
+  .no { color: $solarized-dark-no; } /* Name.Constant */
+  .nd { color: $solarized-dark-nd; } /* Name.Decorator */
+  .ni { color: $solarized-dark-ni; } /* Name.Entity */
+  .ne { color: $solarized-dark-ne; } /* Name.Exception */
+  .nf { color: $solarized-dark-nf; } /* Name.Function */
+  .nl { color: $solarized-dark-nl; } /* Name.Label */
+  .nn { color: $solarized-dark-nn; } /* Name.Namespace */
+  .nx { color: $solarized-dark-nx; } /* Name.Other */
+  .py { color: $solarized-dark-py; } /* Name.Property */
+  .nt { color: $solarized-dark-nt; } /* Name.Tag */
+  .nv { color: $solarized-dark-nv; } /* Name.Variable */
+  .ow { color: $solarized-dark-ow; } /* Operator.Word */
+  .w { color: $solarized-dark-w; } /* Text.Whitespace */
+  .mf { color: $solarized-dark-mf; } /* Literal.Number.Float */
+  .mh { color: $solarized-dark-mh; } /* Literal.Number.Hex */
+  .mi { color: $solarized-dark-mi; } /* Literal.Number.Integer */
+  .mo { color: $solarized-dark-mo; } /* Literal.Number.Oct */
+  .sb { color: $solarized-dark-sb; } /* Literal.String.Backtick */
+  .sc { color: $solarized-dark-sc; } /* Literal.String.Char */
+  .sd { color: $solarized-dark-sd; } /* Literal.String.Doc */
+  .s2 { color: $solarized-dark-s2; } /* Literal.String.Double */
+  .se { color: $solarized-dark-se; } /* Literal.String.Escape */
+  .sh { color: $solarized-dark-sh; } /* Literal.String.Heredoc */
+  .si { color: $solarized-dark-si; } /* Literal.String.Interpol */
+  .sx { color: $solarized-dark-sx; } /* Literal.String.Other */
+  .sr { color: $solarized-dark-sr; } /* Literal.String.Regex */
+  .s1 { color: $solarized-dark-s1; } /* Literal.String.Single */
+  .ss { color: $solarized-dark-ss; } /* Literal.String.Symbol */
+  .bp { color: $solarized-dark-bp; } /* Name.Builtin.Pseudo */
+  .vc { color: $solarized-dark-vc; } /* Name.Variable.Class */
+  .vg { color: $solarized-dark-vg; } /* Name.Variable.Global */
+  .vi { color: $solarized-dark-vi; } /* Name.Variable.Instance */
+  .il { color: $solarized-dark-il; } /* Literal.Number.Integer.Long */
 }
diff --git a/app/assets/stylesheets/highlight/solarized_light.scss b/app/assets/stylesheets/highlight/solarized_light.scss
index faff353ded7..6463fe96c1b 100644
--- a/app/assets/stylesheets/highlight/solarized_light.scss
+++ b/app/assets/stylesheets/highlight/solarized_light.scss
@@ -1,33 +1,123 @@
 /* https://gist.github.com/qguv/7936275 */
 
+/*
+* Solarized light syntax colors
+*/
+$solarized-light-matchline-bg: rgba(255, 255, 255, 0.4);
+$solarized-light-new-bg: rgba(133, 153, 0, 0.2);
+$solarized-light-new-idiff: rgba(133, 153, 0, 0.25);
+$solarized-light-old-bg: rgba(220, 50, 47, 0.2);
+$solarized-light-old-idiff: rgba(220, 50, 47, 0.25);
+$solarized-light-border: #c5d0d4;
+$solarized-light-pre-bg: #002b36;
+$solarized-light-pre-bg: #fdf6e3;
+$solarized-light-pre-color: #586e75;
+$solarized-light-line-bg: #fdf6e3;
+$solarized-light-line-color: rgba(0, 0, 0, 0.3);
+$solarized-light-line-color-new: #a1a080;
+$solarized-light-line-color-old: #ad9186;
+$solarized-light-highlight: #eee8d5;
+$solarized-light-hll-bg: #ddd8c5;
+$solarized-light-over-bg: #ded7fc;
+$solarized-light-expanded-border: #d2cdbd;
+$solarized-light-expanded-bg: #ece6d4;
+$solarized-light-c: #93a1a1;
+$solarized-light-err: #586e75;
+$solarized-light-g: #586e75;
+$solarized-light-k: #859900;
+$solarized-light-l: #586e75;
+$solarized-light-n: #586e75;
+$solarized-light-o: #859900;
+$solarized-light-x: #cb4b16;
+$solarized-light-p: #586e75;
+$solarized-light-cm: #93a1a1;
+$solarized-light-cp: #859900;
+$solarized-light-c1: #93a1a1;
+$solarized-light-cs: #859900;
+$solarized-light-gd: #2aa198;
+$solarized-light-ge: #586e75;
+$solarized-light-gr: #dc322f;
+$solarized-light-gh: #cb4b16;
+$solarized-light-gi: #859900;
+$solarized-light-go: #586e75;
+$solarized-light-gp: #586e75;
+$solarized-light-gs: #586e75;
+$solarized-light-gu: #cb4b16;
+$solarized-light-gt: #586e75;
+$solarized-light-kc: #cb4b16;
+$solarized-light-kd: #268bd2;
+$solarized-light-kn: #859900;
+$solarized-light-kp: #859900;
+$solarized-light-kr: #268bd2;
+$solarized-light-kt: #dc322f;
+$solarized-light-ld: #586e75;
+$solarized-light-m: #2aa198;
+$solarized-light-s: #2aa198;
+$solarized-light-na: #586e75;
+$solarized-light-nb: #b58900;
+$solarized-light-nc: #268bd2;
+$solarized-light-no: #cb4b16;
+$solarized-light-nd: #268bd2;
+$solarized-light-ni: #cb4b16;
+$solarized-light-ne: #cb4b16;
+$solarized-light-nf: #268bd2;
+$solarized-light-nl: #586e75;
+$solarized-light-nn: #586e75;
+$solarized-light-nx: #586e75;
+$solarized-light-py: #586e75;
+$solarized-light-nt: #268bd2;
+$solarized-light-nv: #268bd2;
+$solarized-light-ow: #859900;
+$solarized-light-w: #586e75;
+$solarized-light-mf: #2aa198;
+$solarized-light-mh: #2aa198;
+$solarized-light-mi: #2aa198;
+$solarized-light-mo: #2aa198;
+$solarized-light-sb: #93a1a1;
+$solarized-light-sc: #2aa198;
+$solarized-light-sd: #586e75;
+$solarized-light-s2: #2aa198;
+$solarized-light-se: #cb4b16;
+$solarized-light-sh: #586e75;
+$solarized-light-si: #2aa198;
+$solarized-light-sx: #2aa198;
+$solarized-light-sr: #dc322f;
+$solarized-light-s1: #2aa198;
+$solarized-light-ss: #2aa198;
+$solarized-light-bp: #268bd2;
+$solarized-light-vc: #268bd2;
+$solarized-light-vg: #268bd2;
+$solarized-light-vi: #268bd2;
+$solarized-light-il: #2aa198;
+
 @mixin matchLine {
   color: $black-transparent;
-  background: rgba(255, 255, 255, 0.4);
+  background: $solarized-light-matchline-bg;
 }
 
 .code.solarized-light {
   // Line numbers
   .line-numbers,
   .diff-line-num {
-    background-color: #fdf6e3;
+    background-color: $solarized-light-line-bg;
   }
 
   .diff-line-num,
   .diff-line-num a {
-    color: $black-transparent;
+    color: $solarized-light-line-color;
   }
 
   // Code itself
   pre.code,
   .diff-line-num {
-    border-color: #c5d0d4;
+    border-color: $solarized-light-border;
   }
 
   &,
   pre.code,
   .line_holder .line_content {
-    background-color: #fdf6e3;
-    color: #586e75;
+    background-color: $solarized-light-pre-bg;
+    color: $solarized-light-pre-color;
   }
 
   // Diff line
@@ -38,33 +128,72 @@
 
     td.diff-line-num.hll:not(.empty-cell),
     td.line_content.hll:not(.empty-cell) {
-      background-color: #ddd8c5;
-      border-color: darken(#ddd8c5, 15%);
+      background-color: $solarized-light-hll-bg;
+      border-color: darken($solarized-light-hll-bg, 15%);
     }
 
     .diff-line-num.new,
     .line_content.new {
-      @include diff_background(rgba(133, 153, 0, 0.2), rgba(133, 153, 0, 0.25), #c5d0d4);
+      @include diff_background($solarized-light-new-bg,
+      $solarized-light-new-idiff, $solarized-light-border);
+
+      &::before,
+      a {
+        color: $solarized-light-line-color-new;
+      }
     }
 
     .diff-line-num.old,
     .line_content.old {
-      @include diff_background(rgba(220, 50, 47, 0.2), rgba(220, 50, 47, 0.25), #c5d0d4);
+      @include diff_background($solarized-light-old-bg, $solarized-light-old-idiff, $solarized-light-border);
+
+      &::before,
+      a {
+        color: $solarized-light-line-color-old;
+      }
+    }
+
+    .diff-line-num {
+      &.is-over,
+      &.hll:not(.empty-cell).is-over {
+        background-color: $solarized-light-over-bg;
+        border-color: darken($solarized-light-over-bg, 5%);
+
+        a {
+          color: darken($solarized-light-over-bg, 15%);
+        }
+      }
     }
 
     .line_content.match {
       @include matchLine;
     }
+
+    &:not(.diff-expanded) + .diff-expanded,
+    &.diff-expanded + .line_holder:not(.diff-expanded) {
+      > .diff-line-num,
+      > .line_content {
+        border-top: 1px solid $solarized-light-expanded-border;
+      }
+    }
+
+    &.diff-expanded {
+      > .diff-line-num,
+      > .line_content {
+        background: $solarized-light-expanded-bg;
+        border-color: $solarized-light-expanded-bg;
+      }
+    }
   }
 
   // highlight line via anchor
   pre .hll {
-    background-color: #ddd8c5 !important;
+    background-color: $solarized-light-hll-bg !important;
   }
 
   // Search result highlight
   span.highlight_word {
-    background-color: #eee8d5 !important;
+    background-color: $solarized-light-highlight !important;
   }
 
   /* Solarized Light
@@ -85,72 +214,72 @@
   green     #859900  operators, other keywords
   */
 
-  .c { color: #93a1a1; } /* Comment */
-  .err { color: #586e75; } /* Error */
-  .g { color: #586e75; } /* Generic */
-  .k { color: #859900; } /* Keyword */
-  .l { color: #586e75; } /* Literal */
-  .n { color: #586e75; } /* Name */
-  .o { color: #859900; } /* Operator */
-  .x { color: #cb4b16; } /* Other */
-  .p { color: #586e75; } /* Punctuation */
-  .cm { color: #93a1a1; } /* Comment.Multiline */
-  .cp { color: #859900; } /* Comment.Preproc */
-  .c1 { color: #93a1a1; } /* Comment.Single */
-  .cs { color: #859900; } /* Comment.Special */
-  .gd { color: #2aa198; } /* Generic.Deleted */
-  .ge { color: #586e75; font-style: italic; } /* Generic.Emph */
-  .gr { color: #dc322f; } /* Generic.Error */
-  .gh { color: #cb4b16; } /* Generic.Heading */
-  .gi { color: #859900; } /* Generic.Inserted */
-  .go { color: #586e75; } /* Generic.Output */
-  .gp { color: #586e75; } /* Generic.Prompt */
-  .gs { color: #586e75; font-weight: bold; } /* Generic.Strong */
-  .gu { color: #cb4b16; } /* Generic.Subheading */
-  .gt { color: #586e75; } /* Generic.Traceback */
-  .kc { color: #cb4b16; } /* Keyword.Constant */
-  .kd { color: #268bd2; } /* Keyword.Declaration */
-  .kn { color: #859900; } /* Keyword.Namespace */
-  .kp { color: #859900; } /* Keyword.Pseudo */
-  .kr { color: #268bd2; } /* Keyword.Reserved */
-  .kt { color: #dc322f; } /* Keyword.Type */
-  .ld { color: #586e75; } /* Literal.Date */
-  .m { color: #2aa198; } /* Literal.Number */
-  .s { color: #2aa198; } /* Literal.String */
-  .na { color: #586e75; } /* Name.Attribute */
-  .nb { color: #b58900; } /* Name.Builtin */
-  .nc { color: #268bd2; } /* Name.Class */
-  .no { color: #cb4b16; } /* Name.Constant */
-  .nd { color: #268bd2; } /* Name.Decorator */
-  .ni { color: #cb4b16; } /* Name.Entity */
-  .ne { color: #cb4b16; } /* Name.Exception */
-  .nf { color: #268bd2; } /* Name.Function */
-  .nl { color: #586e75; } /* Name.Label */
-  .nn { color: #586e75; } /* Name.Namespace */
-  .nx { color: #586e75; } /* Name.Other */
-  .py { color: #586e75; } /* Name.Property */
-  .nt { color: #268bd2; } /* Name.Tag */
-  .nv { color: #268bd2; } /* Name.Variable */
-  .ow { color: #859900; } /* Operator.Word */
-  .w { color: #586e75; } /* Text.Whitespace */
-  .mf { color: #2aa198; } /* Literal.Number.Float */
-  .mh { color: #2aa198; } /* Literal.Number.Hex */
-  .mi { color: #2aa198; } /* Literal.Number.Integer */
-  .mo { color: #2aa198; } /* Literal.Number.Oct */
-  .sb { color: #93a1a1; } /* Literal.String.Backtick */
-  .sc { color: #2aa198; } /* Literal.String.Char */
-  .sd { color: #586e75; } /* Literal.String.Doc */
-  .s2 { color: #2aa198; } /* Literal.String.Double */
-  .se { color: #cb4b16; } /* Literal.String.Escape */
-  .sh { color: #586e75; } /* Literal.String.Heredoc */
-  .si { color: #2aa198; } /* Literal.String.Interpol */
-  .sx { color: #2aa198; } /* Literal.String.Other */
-  .sr { color: #dc322f; } /* Literal.String.Regex */
-  .s1 { color: #2aa198; } /* Literal.String.Single */
-  .ss { color: #2aa198; } /* Literal.String.Symbol */
-  .bp { color: #268bd2; } /* Name.Builtin.Pseudo */
-  .vc { color: #268bd2; } /* Name.Variable.Class */
-  .vg { color: #268bd2; } /* Name.Variable.Global */
-  .vi { color: #268bd2; } /* Name.Variable.Instance */
-  .il { color: #2aa198; } /* Literal.Number.Integer.Long */
+  .c { color: $solarized-light-c; } /* Comment */
+  .err { color: $solarized-light-err; } /* Error */
+  .g { color: $solarized-light-g; } /* Generic */
+  .k { color: $solarized-light-k; } /* Keyword */
+  .l { color: $solarized-light-l; } /* Literal */
+  .n { color: $solarized-light-n; } /* Name */
+  .o { color: $solarized-light-o; } /* Operator */
+  .x { color: $solarized-light-x; } /* Other */
+  .p { color: $solarized-light-p; } /* Punctuation */
+  .cm { color: $solarized-light-cm; } /* Comment.Multiline */
+  .cp { color: $solarized-light-cp; } /* Comment.Preproc */
+  .c1 { color: $solarized-light-c1; } /* Comment.Single */
+  .cs { color: $solarized-light-cs; } /* Comment.Special */
+  .gd { color: $solarized-light-gd; } /* Generic.Deleted */
+  .ge { color: $solarized-light-ge; font-style: italic; } /* Generic.Emph */
+  .gr { color: $solarized-light-gr; } /* Generic.Error */
+  .gh { color: $solarized-light-gh; } /* Generic.Heading */
+  .gi { color: $solarized-light-gi; } /* Generic.Inserted */
+  .go { color: $solarized-light-go; } /* Generic.Output */
+  .gp { color: $solarized-light-gp; } /* Generic.Prompt */
+  .gs { color: $solarized-light-gs; font-weight: bold; } /* Generic.Strong */
+  .gu { color: $solarized-light-gu; } /* Generic.Subheading */
+  .gt { color: $solarized-light-gt; } /* Generic.Traceback */
+  .kc { color: $solarized-light-kc; } /* Keyword.Constant */
+  .kd { color: $solarized-light-kd; } /* Keyword.Declaration */
+  .kn { color: $solarized-light-kn; } /* Keyword.Namespace */
+  .kp { color: $solarized-light-kp; } /* Keyword.Pseudo */
+  .kr { color: $solarized-light-kr; } /* Keyword.Reserved */
+  .kt { color: $solarized-light-kt; } /* Keyword.Type */
+  .ld { color: $solarized-light-ld; } /* Literal.Date */
+  .m { color: $solarized-light-m; } /* Literal.Number */
+  .s { color: $solarized-light-s; } /* Literal.String */
+  .na { color: $solarized-light-na; } /* Name.Attribute */
+  .nb { color: $solarized-light-nb; } /* Name.Builtin */
+  .nc { color: $solarized-light-nc; } /* Name.Class */
+  .no { color: $solarized-light-no; } /* Name.Constant */
+  .nd { color: $solarized-light-nd; } /* Name.Decorator */
+  .ni { color: $solarized-light-ni; } /* Name.Entity */
+  .ne { color: $solarized-light-ne; } /* Name.Exception */
+  .nf { color: $solarized-light-nf; } /* Name.Function */
+  .nl { color: $solarized-light-nl; } /* Name.Label */
+  .nn { color: $solarized-light-nn; } /* Name.Namespace */
+  .nx { color: $solarized-light-nx; } /* Name.Other */
+  .py { color: $solarized-light-py; } /* Name.Property */
+  .nt { color: $solarized-light-nt; } /* Name.Tag */
+  .nv { color: $solarized-light-nv; } /* Name.Variable */
+  .ow { color: $solarized-light-ow; } /* Operator.Word */
+  .w { color: $solarized-light-w; } /* Text.Whitespace */
+  .mf { color: $solarized-light-mf; } /* Literal.Number.Float */
+  .mh { color: $solarized-light-mh; } /* Literal.Number.Hex */
+  .mi { color: $solarized-light-mi; } /* Literal.Number.Integer */
+  .mo { color: $solarized-light-mo; } /* Literal.Number.Oct */
+  .sb { color: $solarized-light-sb; } /* Literal.String.Backtick */
+  .sc { color: $solarized-light-sc; } /* Literal.String.Char */
+  .sd { color: $solarized-light-sd; } /* Literal.String.Doc */
+  .s2 { color: $solarized-light-s2; } /* Literal.String.Double */
+  .se { color: $solarized-light-se; } /* Literal.String.Escape */
+  .sh { color: $solarized-light-sh; } /* Literal.String.Heredoc */
+  .si { color: $solarized-light-si; } /* Literal.String.Interpol */
+  .sx { color: $solarized-light-sx; } /* Literal.String.Other */
+  .sr { color: $solarized-light-sr; } /* Literal.String.Regex */
+  .s1 { color: $solarized-light-s1; } /* Literal.String.Single */
+  .ss { color: $solarized-light-ss; } /* Literal.String.Symbol */
+  .bp { color: $solarized-light-bp; } /* Name.Builtin.Pseudo */
+  .vc { color: $solarized-light-vc; } /* Name.Variable.Class */
+  .vg { color: $solarized-light-vg; } /* Name.Variable.Global */
+  .vi { color: $solarized-light-vi; } /* Name.Variable.Instance */
+  .il { color: $solarized-light-il; } /* Literal.Number.Integer.Long */
 }
diff --git a/app/assets/stylesheets/highlight/white.scss b/app/assets/stylesheets/highlight/white.scss
index d5367d5f3f0..ab2018bfbca 100644
--- a/app/assets/stylesheets/highlight/white.scss
+++ b/app/assets/stylesheets/highlight/white.scss
@@ -1,15 +1,85 @@
 /* https://github.com/aahan/pygments-github-style */
 
+/*
+* White Syntax Colors
+*/
+$white-code-color: $gl-text-color;
+$white-highlight: #fafe3d;
+$white-pre-hll-bg: #f8eec7;
+$white-hll-bg: #f8f8f8;
+$white-over-bg: #ded7fc;
+$white-expanded-border: #e0e0e0;
+$white-expanded-bg: #f7f7f7;
+$white-c: #998;
+$white-err: #a61717;
+$white-err-bg: #e3d2d2;
+$white-cm: #998;
+$white-cp: #999;
+$white-c1: #998;
+$white-cs: #999;
+$white-gd: $black;
+$white-gd-bg: #fdd;
+$white-gd-x: $black;
+$white-gd-x-bg: #faa;
+$white-gr: #a00;
+$white-gh: #999;
+$white-gi: $black;
+$white-gi-bg: #dfd;
+$white-gi-x: $black;
+$white-gi-x-bg: #afa;
+$white-go: #888;
+$white-gp: #555;
+$white-gu: #800080;
+$white-gt: #a00;
+$white-kt: #458;
+$white-m: #099;
+$white-s: #d14;
+$white-n: #333;
+$white-na: teal;
+$white-nb: #0086b3;
+$white-nc: #458;
+$white-no: teal;
+$white-ni: purple;
+$white-ne: #900;
+$white-nf: #900;
+$white-nn: #555;
+$white-nt: navy;
+$white-nv: teal;
+$white-w: #bbb;
+$white-mf: #099;
+$white-mh: #099;
+$white-mi: #099;
+$white-mo: #099;
+$white-sb: #d14;
+$white-sc: #d14;
+$white-sd: #d14;
+$white-s2: #d14;
+$white-se: #d14;
+$white-sh: #d14;
+$white-si: #d14;
+$white-sx: #d14;
+$white-sr: #009926;
+$white-s1: #d14;
+$white-ss: #990073;
+$white-bp: #999;
+$white-vc: teal;
+$white-vg: teal;
+$white-vi: teal;
+$white-il: #099;
+$white-gc-color: #999;
+$white-gc-bg: #eaf2f5;
+
+
 @mixin matchLine {
   color: $black-transparent;
-  background-color: $match-line;
+  background-color: $gray-light;
 }
 
 .code.white {
   // Line numbers
   .line-numbers,
   .diff-line-num {
-    background-color: $background-color;
+    background-color: $gray-light;
   }
 
   .diff-line-num,
@@ -20,14 +90,14 @@
   // Code itself
   pre.code,
   .diff-line-num {
-    border-color: $table-border-gray;
+    border-color: $white-normal;
   }
 
   &,
   pre.code,
   .line_holder .line_content {
-    background-color: #fff;
-    color: #333;
+    background-color: $white-light;
+    color: $white-code-color;
   }
 
   // Diff line
@@ -41,11 +111,29 @@
       &.old {
         background-color: $line-number-old;
         border-color: $line-removed-dark;
+
+        a {
+          color: scale-color($line-number-old,$red: -30%, $green: -30%, $blue: -30%);
+        }
       }
 
       &.new {
         background-color: $line-number-new;
         border-color: $line-added-dark;
+
+        a {
+          color: scale-color($line-number-new,$red: -30%, $green: -30%, $blue: -30%);
+        }
+      }
+
+      &.is-over,
+      &.hll:not(.empty-cell).is-over {
+        background-color: $white-over-bg;
+        border-color: darken($white-over-bg, 5%);
+
+        a {
+          color: darken($white-over-bg, 15%);
+        }
       }
 
       &.hll:not(.empty-cell) {
@@ -54,10 +142,30 @@
       }
     }
 
+    &:not(.diff-expanded) + .diff-expanded,
+    &.diff-expanded + .line_holder:not(.diff-expanded) {
+      > .diff-line-num,
+      > .line_content {
+        border-top: 1px solid $white-expanded-border;
+      }
+    }
+
+    &.diff-expanded {
+      > .diff-line-num,
+      > .line_content {
+        background: $white-expanded-bg;
+        border-color: $white-expanded-bg;
+      }
+    }
+
     .line_content {
       &.old {
         background-color: $line-removed;
 
+        &::before {
+          color: scale-color($line-number-old,$red: -30%, $green: -30%, $blue: -30%);
+        }
+
         span.idiff {
           background-color: $line-removed-dark;
         }
@@ -66,6 +174,10 @@
       &.new {
         background-color: $line-added;
 
+        &::before {
+          color: scale-color($line-number-new,$red: -30%, $green: -30%, $blue: -30%);
+        }
+
         span.idiff {
           background-color: $line-added-dark;
         }
@@ -83,75 +195,75 @@
 
   // highlight line via anchor
   pre .hll {
-    background-color: #f8eec7 !important;
+    background-color: $white-pre-hll-bg !important;
   }
 
   // Search result highlight
   span.highlight_word {
-    background-color: #fafe3d !important;
+    background-color: $white-highlight !important;
   }
 
-  .hll { background-color: #f8f8f8; }
-  .c { color: #998; font-style: italic; }
-  .err { color: #a61717; background-color: #e3d2d2; }
+  .hll { background-color: $white-hll-bg; }
+  .c { color: $white-c; font-style: italic; }
+  .err { color: $white-err; background-color: $white-err-bg; }
   .k { font-weight: bold; }
   .o { font-weight: bold; }
-  .cm { color: #998; font-style: italic; }
-  .cp { color: #999; font-weight: bold; }
-  .c1 { color: #998; font-style: italic; }
-  .cs { color: #999; font-weight: bold; font-style: italic; }
-  .gd { color: #000; background-color: #fdd; }
-  .gd .x { color: #000; background-color: #faa; }
+  .cm { color: $white-cm; font-style: italic; }
+  .cp { color: $white-cp; font-weight: bold; }
+  .c1 { color: $white-c1; font-style: italic; }
+  .cs { color: $white-cs; font-weight: bold; font-style: italic; }
+  .gd { color: $white-gd; background-color: $white-gd-bg; }
+  .gd .x { color: $white-gd-x; background-color: $white-gd-x-bg; }
   .ge { font-style: italic; }
-  .gr { color: #a00; }
-  .gh { color: #999; }
-  .gi { color: #000; background-color: #dfd; }
-  .gi .x { color: #000; background-color: #afa; }
-  .go { color: #888; }
-  .gp { color: #555; }
+  .gr { color: $white-gr; }
+  .gh { color: $white-gh; }
+  .gi { color: $white-gi; background-color: $white-gi-bg; }
+  .gi .x { color: $white-gi-x; background-color: $white-gi-x-bg; }
+  .go { color: $white-go; }
+  .gp { color: $white-gp; }
   .gs { font-weight: bold; }
-  .gu { color: #800080; font-weight: bold; }
-  .gt { color: #a00; }
+  .gu { color: $white-gu; font-weight: bold; }
+  .gt { color: $white-gt; }
   .kc { font-weight: bold; }
   .kd { font-weight: bold; }
   .kn { font-weight: bold; }
   .kp { font-weight: bold; }
   .kr { font-weight: bold; }
-  .kt { color: #458; font-weight: bold; }
-  .m { color: #099; }
-  .s { color: #d14; }
-  .n { color: #333; }
-  .na { color: teal; }
-  .nb { color: #0086b3; }
-  .nc { color: #458; font-weight: bold; }
-  .no { color: teal; }
-  .ni { color: purple; }
-  .ne { color: #900; font-weight: bold; }
-  .nf { color: #900; font-weight: bold; }
-  .nn { color: #555; }
-  .nt { color: navy; }
-  .nv { color: teal; }
+  .kt { color: $white-kt; font-weight: bold; }
+  .m { color: $white-m; }
+  .s { color: $white-s; }
+  .n { color: $white-n; }
+  .na { color: $white-na; }
+  .nb { color: $white-nb; }
+  .nc { color: $white-nc; font-weight: bold; }
+  .no { color: $white-no; }
+  .ni { color: $white-ni; }
+  .ne { color: $white-ne; font-weight: bold; }
+  .nf { color: $white-nf; font-weight: bold; }
+  .nn { color: $white-nn; }
+  .nt { color: $white-nt; }
+  .nv { color: $white-nv; }
   .ow { font-weight: bold; }
-  .w { color: #bbb; }
-  .mf { color: #099; }
-  .mh { color: #099; }
-  .mi { color: #099; }
-  .mo { color: #099; }
-  .sb { color: #d14; }
-  .sc { color: #d14; }
-  .sd { color: #d14; }
-  .s2 { color: #d14; }
-  .se { color: #d14; }
-  .sh { color: #d14; }
-  .si { color: #d14; }
-  .sx { color: #d14; }
-  .sr { color: #009926; }
-  .s1 { color: #d14; }
-  .ss { color: #990073; }
-  .bp { color: #999; }
-  .vc { color: teal; }
-  .vg { color: teal; }
-  .vi { color: teal; }
-  .il { color: #099; }
-  .gc { color: #999; background-color: #eaf2f5; }
+  .w { color: $white-w; }
+  .mf { color: $white-mf; }
+  .mh { color: $white-mh; }
+  .mi { color: $white-mi; }
+  .mo { color: $white-mo; }
+  .sb { color: $white-sb; }
+  .sc { color: $white-sc; }
+  .sd { color: $white-sd; }
+  .s2 { color: $white-s2; }
+  .se { color: $white-se; }
+  .sh { color: $white-sh; }
+  .si { color: $white-si; }
+  .sx { color: $white-sx; }
+  .sr { color: $white-sr; }
+  .s1 { color: $white-s1; }
+  .ss { color: $white-ss; }
+  .bp { color: $white-bp; }
+  .vc { color: $white-vc; }
+  .vg { color: $white-vg; }
+  .vi { color: $white-vi; }
+  .il { color: $white-il; }
+  .gc { color: $white-gc-color; background-color: $white-gc-bg; }
 }
diff --git a/app/assets/stylesheets/mailers/devise.scss b/app/assets/stylesheets/mailers/devise.scss
index b2bce482fde..9f613710cf4 100644
--- a/app/assets/stylesheets/mailers/devise.scss
+++ b/app/assets/stylesheets/mailers/devise.scss
@@ -1,3 +1,5 @@
+@import "framework/variables";
+
 // NOTE: This stylesheet is for the exclusive use of the `devise_mailer` layout
 // used for Devise email templates, and _should not_ be included in any
 // application stylesheets.
@@ -46,7 +48,7 @@ table {
 
   &#body {
     background-color: $message-background-color;
-    border: 1px solid #000;
+    border: 1px solid $black;
     border-radius: 4px;
     margin: 0 auto;
     width: 600px;
diff --git a/app/assets/stylesheets/mailers/highlighted_diff_email.scss b/app/assets/stylesheets/mailers/highlighted_diff_email.scss
new file mode 100644
index 00000000000..ea40f449134
--- /dev/null
+++ b/app/assets/stylesheets/mailers/highlighted_diff_email.scss
@@ -0,0 +1,214 @@
+@import "framework/variables";
+
+// This file is largely copied from `highlight/white.scss`, but modified to
+// avoid all descendant selectors (`table td`). This is because the CSS inlining
+// we use performs dramatically worse on descendant selectors than the
+// alternatives.
+// <https://gitlab.com/gitlab-org/gitlab-ee/issues/490#note_12283632>
+//
+// DO NOT ADD ANY DESCENDANT SELECTORS TO THIS FILE. Instead, use (in order of
+// preference): plain class selectors, type (element name) selectors, or
+// explicit child selectors.
+
+/*
+* Highlighted Diff Email Syntax Colors
+*/
+$highlighted-highlight-word: #fafe3d;
+$highlighted-hll-bg: #f8f8f8;
+$highlighted-c: #998;
+$highlighted-err: #a61717;
+$highlighted-err-bg: #e3d2d2;
+$highlighted-cm: #998;
+$highlighted-cp: #999;
+$highlighted-c1: #998;
+$highlighted-cs: #999;
+$highlighted-gd: #000;
+$highlighted-gd-bg: #fdd;
+$highlighted-gd-x: #000;
+$highlighted-gd-x-bg: #faa;
+$highlighted-gr: #a00;
+$highlighted-gh: #999;
+$highlighted-gi: #000;
+$highlighted-gi-bg: #dfd;
+$highlighted-gi-x: #000;
+$highlighted-gi-x-bg: #afa;
+$highlighted-go: #888;
+$highlighted-gp: #555;
+$highlighted-gu: #800080;
+$highlighted-gt: #a00;
+$highlighted-kt: #458;
+$highlighted-m: #099;
+$highlighted-s: #d14;
+$highlighted-n: #333;
+$highlighted-na: teal;
+$highlighted-nb: #0086b3;
+$highlighted-nc: #458;
+$highlighted-no: teal;
+$highlighted-ni: purple;
+$highlighted-ne: #900;
+$highlighted-nf: #900;
+$highlighted-nn: #555;
+$highlighted-nt: navy;
+$highlighted-nv: teal;
+$highlighted-w: #bbb;
+$highlighted-mf: #099;
+$highlighted-mh: #099;
+$highlighted-mi: #099;
+$highlighted-mo: #099;
+$highlighted-sb: #d14;
+$highlighted-sc: #d14;
+$highlighted-sd: #d14;
+$highlighted-s2: #d14;
+$highlighted-se: #d14;
+$highlighted-sh: #d14;
+$highlighted-si: #d14;
+$highlighted-sx: #d14;
+$highlighted-sr: #009926;
+$highlighted-s1: #d14;
+$highlighted-ss: #990073;
+$highlighted-bp: #999;
+$highlighted-vc: teal;
+$highlighted-vg: teal;
+$highlighted-vi: teal;
+$highlighted-il: #099;
+$highlighted-gc: #999;
+$highlighted-gc-bg: #eaf2f5;
+
+.code {
+  background-color: $white-light;
+  font-family: monospace;
+  font-size: $code_font_size;
+  -premailer-cellpadding: 0;
+  -premailer-cellspacing: 0;
+  -premailer-width: 100%;
+
+  > tr {
+    line-height: $code_line_height;
+  }
+}
+
+.diff-line-num {
+  padding: 0 5px;
+  text-align: right;
+  width: 35px;
+  background-color: $gray-light;
+  color: $black-transparent;
+  border-right: 1px solid $white-normal;
+
+  &.old {
+    background-color: $line-number-old;
+    border-right-color: $line-removed-dark;
+  }
+
+  &.new {
+    background-color: $line-number-new;
+    border-right-color: $line-added-dark;
+  }
+}
+
+.line_content {
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+
+  &.old {
+    background-color: $line-removed;
+
+    > .line > span.idiff,
+    > .line > span > span.idiff {
+      background-color: $line-removed-dark;
+    }
+  }
+
+  &.new {
+    background-color: $line-added;
+
+    > .line > span.idiff,
+    > .line > span > span.idiff {
+      background-color: $line-added-dark;
+    }
+  }
+
+  &.match {
+    color: $black-transparent;
+    background-color: $gray-light;
+  }
+}
+
+pre {
+  margin: 0;
+}
+
+blockquote {
+  color: $gl-grayish-blue;
+  padding: 0 0 0 15px;
+  margin: 0;
+  border-left: 3px solid $white-dark;
+}
+
+span.highlight_word {
+  background-color: $highlighted-highlight-word !important;
+}
+
+.hll { background-color: $highlighted-hll-bg; }
+.c { color: $highlighted-c; font-style: italic; }
+.err { color: $highlighted-err; background-color: $highlighted-err-bg; }
+.k { font-weight: bold; }
+.o { font-weight: bold; }
+.cm { color: $highlighted-cm; font-style: italic; }
+.cp { color: $highlighted-cp; font-weight: bold; }
+.c1 { color: $highlighted-c1; font-style: italic; }
+.cs { color: $highlighted-cs; font-weight: bold; font-style: italic; }
+.gd { color: $highlighted-gd; background-color: $highlighted-gd-bg; }
+.gd .x { color: $highlighted-gd; background-color: $highlighted-gd-x-bg; }
+.ge { font-style: italic; }
+.gr { color: $highlighted-gr; }
+.gh { color: $highlighted-gh; }
+.gi { color: $highlighted-gi; background-color: $highlighted-gi-bg; }
+.gi .x { color: $highlighted-gi; background-color: $highlighted-gi-x-bg; }
+.go { color: $highlighted-go; }
+.gp { color: $highlighted-gp; }
+.gs { font-weight: bold; }
+.gu { color: $highlighted-gu; font-weight: bold; }
+.gt { color: $highlighted-gt; }
+.kc { font-weight: bold; }
+.kd { font-weight: bold; }
+.kn { font-weight: bold; }
+.kp { font-weight: bold; }
+.kr { font-weight: bold; }
+.kt { color: $highlighted-kt; font-weight: bold; }
+.m { color: $highlighted-m; }
+.s { color: $highlighted-s; }
+.n { color: $highlighted-n; }
+.na { color: $highlighted-na; }
+.nb { color: $highlighted-nb; }
+.nc { color: $highlighted-nc; font-weight: bold; }
+.no { color: $highlighted-no; }
+.ni { color: $highlighted-ni; }
+.ne { color: $highlighted-ne; font-weight: bold; }
+.nf { color: $highlighted-nf; font-weight: bold; }
+.nn { color: $highlighted-nn; }
+.nt { color: $highlighted-nt; }
+.nv { color: $highlighted-nv; }
+.ow { font-weight: bold; }
+.w { color: $highlighted-w; }
+.mf { color: $highlighted-mf; }
+.mh { color: $highlighted-mh; }
+.mi { color: $highlighted-mi; }
+.mo { color: $highlighted-mo; }
+.sb { color: $highlighted-sb; }
+.sc { color: $highlighted-sc; }
+.sd { color: $highlighted-sd; }
+.s2 { color: $highlighted-s2; }
+.se { color: $highlighted-se; }
+.sh { color: $highlighted-sh; }
+.si { color: $highlighted-si; }
+.sx { color: $highlighted-sx; }
+.sr { color: $highlighted-sr; }
+.s1 { color: $highlighted-s1; }
+.ss { color: $highlighted-ss; }
+.bp { color: $highlighted-bp; }
+.vc { color: $highlighted-vc; }
+.vg { color: $highlighted-vg; }
+.vi { color: $highlighted-vi; }
+.il { color: $highlighted-il; }
+.gc { color: $highlighted-gc; background-color: $highlighted-gc-bg; }
diff --git a/app/assets/stylesheets/mailers/repository_push_email.scss b/app/assets/stylesheets/mailers/repository_push_email.scss
deleted file mode 100644
index 8d1a6020ca4..00000000000
--- a/app/assets/stylesheets/mailers/repository_push_email.scss
+++ /dev/null
@@ -1,143 +0,0 @@
-@import "framework/variables";
-
-// This file is largely copied from `highlight/white.scss`, but modified to
-// avoid all descendant selectors (`table td`). This is because the CSS inlining
-// we use performs dramatically worse on descendant selectors than the
-// alternatives.
-// <https://gitlab.com/gitlab-org/gitlab-ee/issues/490#note_12283632>
-//
-// DO NOT ADD ANY DESCENDANT SELECTORS TO THIS FILE. Instead, use (in order of
-// preference): plain class selectors, type (element name) selectors, or
-// explicit child selectors.
-
-.code {
-  background-color: #fff;
-  font-family: monospace;
-  font-size: $code_font_size;
-  -premailer-cellpadding: 0;
-  -premailer-cellspacing: 0;
-  -premailer-width: 100%;
-
-  > tr {
-    line-height: $code_line_height;
-  }
-}
-
-.diff-line-num {
-  padding: 0 5px;
-  text-align: right;
-  width: 35px;
-  background-color: $background-color;
-  color: $black-transparent;
-  border-right: 1px solid $table-border-gray;
-
-  &.old {
-    background-color: $line-number-old;
-    border-right-color: $line-removed-dark;
-  }
-
-  &.new {
-    background-color: $line-number-new;
-    border-right-color: $line-added-dark;
-  }
-}
-
-.line_content {
-  padding-left: 0.5em;
-  padding-right: 0.5em;
-
-  &.old {
-    background-color: $line-removed;
-
-    > .line > span.idiff,
-    > .line > span > span.idiff {
-      background-color: $line-removed-dark;
-    }
-  }
-
-  &.new {
-    background-color: $line-added;
-
-    > .line > span.idiff,
-    > .line > span > span.idiff {
-      background-color: $line-added-dark;
-    }
-  }
-
-  &.match {
-    color: $black-transparent;
-    background-color: $match-line;
-  }
-}
-
-pre {
-  margin: 0;
-}
-
-span.highlight_word {
-  background-color: #fafe3d !important;
-}
-
-.hll { background-color: #f8f8f8; }
-.c { color: #998; font-style: italic; }
-.err { color: #a61717; background-color: #e3d2d2; }
-.k { font-weight: bold; }
-.o { font-weight: bold; }
-.cm { color: #998; font-style: italic; }
-.cp { color: #999; font-weight: bold; }
-.c1 { color: #998; font-style: italic; }
-.cs { color: #999; font-weight: bold; font-style: italic; }
-.gd { color: #000; background-color: #fdd; }
-.gd .x { color: #000; background-color: #faa; }
-.ge { font-style: italic; }
-.gr { color: #a00; }
-.gh { color: #999; }
-.gi { color: #000; background-color: #dfd; }
-.gi .x { color: #000; background-color: #afa; }
-.go { color: #888; }
-.gp { color: #555; }
-.gs { font-weight: bold; }
-.gu { color: #800080; font-weight: bold; }
-.gt { color: #a00; }
-.kc { font-weight: bold; }
-.kd { font-weight: bold; }
-.kn { font-weight: bold; }
-.kp { font-weight: bold; }
-.kr { font-weight: bold; }
-.kt { color: #458; font-weight: bold; }
-.m { color: #099; }
-.s { color: #d14; }
-.n { color: #333; }
-.na { color: teal; }
-.nb { color: #0086b3; }
-.nc { color: #458; font-weight: bold; }
-.no { color: teal; }
-.ni { color: purple; }
-.ne { color: #900; font-weight: bold; }
-.nf { color: #900; font-weight: bold; }
-.nn { color: #555; }
-.nt { color: navy; }
-.nv { color: teal; }
-.ow { font-weight: bold; }
-.w { color: #bbb; }
-.mf { color: #099; }
-.mh { color: #099; }
-.mi { color: #099; }
-.mo { color: #099; }
-.sb { color: #d14; }
-.sc { color: #d14; }
-.sd { color: #d14; }
-.s2 { color: #d14; }
-.se { color: #d14; }
-.sh { color: #d14; }
-.si { color: #d14; }
-.sx { color: #d14; }
-.sr { color: #009926; }
-.s1 { color: #d14; }
-.ss { color: #990073; }
-.bp { color: #999; }
-.vc { color: teal; }
-.vg { color: teal; }
-.vi { color: teal; }
-.il { color: #099; }
-.gc { color: #999; background-color: #eaf2f5; }
diff --git a/app/assets/stylesheets/notify.scss b/app/assets/stylesheets/notify.scss
index ced8c4a9907..a81e5eb5ebf 100644
--- a/app/assets/stylesheets/notify.scss
+++ b/app/assets/stylesheets/notify.scss
@@ -1,3 +1,5 @@
+@import "framework/variables";
+
 img {
   max-width: 100%;
   height: auto;
@@ -5,26 +7,14 @@ img {
 
 p.details {
   font-style: italic;
-  color: #777;
+  color: $notify-details;
 }
 
 .footer > p {
   font-size: small;
-  color: #777;
+  color: $notify-footer;
 }
 
 pre.commit-message {
   white-space: pre-wrap;
 }
-
-.file-stats > a {
-  text-decoration: none;
-
-  > .new-file {
-    color: #090;
-  }
-
-  > .deleted-file {
-    color: #b00;
-  }
-}
diff --git a/app/assets/stylesheets/pages/admin.scss b/app/assets/stylesheets/pages/admin.scss
deleted file mode 100644
index 6cefafd8fc7..00000000000
--- a/app/assets/stylesheets/pages/admin.scss
+++ /dev/null
@@ -1,162 +0,0 @@
-/**
- * Admin area
- *
- */
-.admin-dashboard {
-  .data {
-    a {
-      h1 {
-        line-height: 48px;
-        font-size: 48px;
-        padding: 20px;
-        text-align: center;
-        font-weight: normal;
-      }
-    }
-  }
-
-  .str-truncated {
-    max-width: 60%;
-  }
-}
-
-.admin-filter form {
-  .select2-container {
-    width: 100%;
-  }
-
-  .controls {
-    margin-left: 130px;
-  }
-
-  .form-actions {
-    padding-left: 130px;
-    background: #fff;
-   }
-
-  .visibility-levels {
-    .controls {
-      margin-bottom: 9px;
-    }
-
-    i {
-      color: inherit;
-    }
-  }
-}
-
-.broadcast-messages {
-  .message {
-    line-height: 2;
-  }
-}
-
-.broadcast-message {
-  @extend .alert-warning;
-  padding: 10px;
-  text-align: center;
-
-  > div,
-  p {
-    display: inline;
-    margin: 0;
-
-    a {
-      color: inherit;
-      text-decoration: underline;
-    }
-  }
-}
-
-.broadcast-message-preview {
-  @extend .broadcast-message;
-  margin-bottom: 20px;
-}
-
-// Users List
-
-.users-list {
-  .user-row {
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-    white-space: nowrap;
-  }
-
-  .user-details {
-    flex: 1 1 auto;
-    overflow: hidden;
-    padding-right: 8px;
-  }
-
-  .user-name {
-    display: inline-block;
-    font-weight: 600;
-  }
-
-  .user-name,
-  .user-email {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .dropdown {
-    .btn-block {
-      margin-bottom: 0;
-      line-height: inherit;
-    }
-  }
-
-  .label-default {
-    color: $btn-transparent-color;
-  }
-}
-
-.abuse-reports {
-  .table {
-    table-layout: fixed;
-  }
-
-  .subheading {
-    padding-bottom: $gl-padding;
-  }
-
-  .message {
-    word-wrap: break-word;
-  }
-
-  .btn {
-    white-space: normal;
-    padding: $gl-btn-padding;
-  }
-
-  th {
-    width: 15%;
-
-    &.wide {
-      width: 55%;
-    }
-  }
-
-  @media (max-width: $screen-sm-max) {
-    th {
-      width: 100%;
-    }
-
-    td {
-      width: 100%;
-      float: left;
-    }
-  }
-
-  .no-reports {
-    .emoji-icon {
-      margin-left: $btn-side-margin;
-      margin-top: 3px;
-    }
-
-    span {
-      font-size: 19px;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/pages/appearances.scss b/app/assets/stylesheets/pages/appearances.scss
deleted file mode 100644
index 878f44116ba..00000000000
--- a/app/assets/stylesheets/pages/appearances.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.appearance-logo-preview {
-  max-width: 400px;
-  margin-bottom: 20px;
-}
-
-.appearance-light-logo-preview {
-  background-color: $background-color;
-  max-width: 72px;
-  padding: 10px;
-  margin-bottom: 10px;
-}
diff --git a/app/assets/stylesheets/pages/awards.scss b/app/assets/stylesheets/pages/awards.scss
deleted file mode 100644
index 486ad16ea26..00000000000
--- a/app/assets/stylesheets/pages/awards.scss
+++ /dev/null
@@ -1,140 +0,0 @@
-.awards {
-  .emoji-icon {
-    width: 19px;
-    height: 19px;
-  }
-}
-
-.emoji-menu {
-  position: absolute;
-  margin-top: 3px;
-  padding: $gl-padding;
-  z-index: 9;
-  width: 300px;
-  font-size: 14px;
-  background-color: $award-emoji-menu-bg;
-  border: 1px solid $award-emoji-menu-border;
-  border-radius: $border-radius-base;
-  box-shadow: 0 6px 12px rgba(0,0,0,.175);
-  pointer-events: none;
-  opacity: 0;
-  transform: scale(.2);
-  transform-origin: 0 -45px;
-  transition: .3s cubic-bezier(.87,-.41,.19,1.44);
-  transition-property: transform, opacity;
-
-  &.is-aligned-right {
-    transform-origin: 100% -45px;
-  }
-
-  &.is-visible {
-    pointer-events: all;
-    opacity: 1;
-    transform: scale(1);
-  }
-
-  .emoji-menu-content {
-    height: 300px;
-    overflow-y: scroll;
-  }
-}
-
-.emoji-search {
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAFu0lEQVRIia1WTahkVxH+quqce7vf6zdvJpHoIlkYJ2SiJiIokmQjgoGgIAaEIYuYXWICgojiwkmC4taFwhjcyIDusogEIwwiSSCKPwsdwzAg0SjJ9Izzk5n3+nXfe8+pqizOvd395scfsJqi6dPnnDr11Vc/NJ1OwUTosqJLCmYCHCAC2mSHs+ojZv6AO46Y+20AhIneJsafhPhXVZSXDk7qi+aOLhtQNuBmQtcarAKjTXpn2+l3u2yPunvZSABRucjcAV/eMZuM48/Go/g1d19kc4wq+e8MZjWkbI/P5t2P3RFFbv7SQdyBlBUx8N8OTuqjMcof+N94yMPrY2DMm/ytnb32J0QrY+6AqsHM4Q64O9SKDmerKDD3Oy/tNL9vk342CC8RuU6n0ymCMHb22scu7zQngtASOjUHE1BX4UUAv4b7Ow6qiXCXuz/UdvogAAweDY943/b4cAz0ZlYHXeMsnT07RVb7wMUr8ykI4H5HVkMd5Rcb4/jNURVOL5qErAaAUUdCCIJ5kx5q2nw8m39ImEAAsjpE6PStB0YfMcd1wqqG3Xn7A3PfZyyKnNjaqD4fmE/fCNKshirIyY1xvI+Av6g5QIAIIWX7cJPssboSiBBEeKmsZne0Sb8kzAUWNYyq8NvbDo0fZ6beqxuLmqOOMr/lwOh+YXpXtbjERGja9JyZ9+HxpXKb9Gj5oywRESbj+Cj1ENG1QViTGBl1FbC1We1tbVRfHWIoQkhqH9xbpE92XUbb6VJZ1R4crjRz1JWcDMJvLdoMcyAEhjuwHo8Bfndg3mbszhOY+adVlMtD3po51OwzIQiEaams7oeJhxRw1FFOVpFRRUYIhMBAFRnjOsC8IFHHUA4TQQhgAqpAiIFfGbxkIqj54ayGbL7UoOqHCniAEKHLNr26l+D9wQJzeUwMAnfHvEnLECzZRwRV++d60ptjW9VLZeolEJG6GwCCE0CFVNB+Ay0NEqoQYG4YYFu7B8IEVRt3uRzy/osIoLV9QZimWXGHUMFdmI6M64DUF2Je88R9VZqCSP+QlcF5k+4tCzSsXaqjINuK6UyE0+s/mk6/qFq8oAIL9pqMLhkGsNrOyoOIlszust3aJv0U9+kFdwjTGwWl1YdF+KWlQSZ0Se/psj8yGVdg5tJyfH96EBWmLtoEMwMzMFt031NzGWLLzKhC+KV7H5ZeeaMOPxemma2x68puc0LN3+/u6LJiePS6MKHvn4wu6cPzJj0hsioeMfDrEvjv5r6W9gBvjKJujuKzQ0URIZj75NylvT+mbHfXQa4rwAMaVRTMm/SFyzvNy0yF6+4AM+1ubcSnqkAIUjQKl1RKSbE5jt+vovx1MBqF0WW7/d1Z80ab9BtmuJ3Xk5cJKds9TZt/uLPXvtiTrQ+dIwqfAejUvM1os6FNikXKUHfQ+ekUsXT5u85enJ0CaBSkkGEo1syUQ+DfMdE/4GA1uzupf9zdbzhOmLsF4efHVXjaHHAzmDtGdQRd/Nc5wAEJjNki3XfhyvwVNz80xANrht3LsENY9cBBdN1L9GUyyvFRFZ42t75sBvCQRykbRlU4tT2pPxoCvzx09d4GmPs200M6wKdWSDGK8mppYSWdhAlt0qeaLv+IadXU9/Evq4FAZ8ej+LmtcTxaRX4NWI0Uag5Vg1p5MYg8BnlhXIdPHDow+vTWZvVMVttXDLqkTzZdPj6Qii6cP1cSvIdl3iQkNYyi9HH0I22y+93tY3DcQkTZgQtM+POoCr8x97eylkmtrgKuztrvXJ21x/aNKuqIkZ/fntRfCdcTfhUTAIhRzoDojJD0aSNLLwMzmpT7+JaLtyf1MwDo6qz9djFaUq3t9MlFmy/c1OCSceY9fMsVaL9mvH9ocXdkdWxv1scAePG0THAhMOaLdOw/Gvxfxb1w4eCapyIENUcV5M3/u8FitAxZ25P6GAHT3UX39Srw+QOb1ZffA98Dl2Wy1BYkAAAAAElFTkSuQmCC");
-  background-repeat: no-repeat;
-  background-position: right 5px center;
-  background-size: 16px;
-}
-
-.emoji-menu-list {
-  list-style: none;
-  padding-left: 0;
-  margin-bottom: 0;
-}
-
-.emoji-menu-list-item {
-  padding: 3px;
-  margin-left: 1px;
-  margin-right: 1px;
-}
-
-.emoji-menu-btn {
-  display: block;
-  cursor: pointer;
-  width: 30px;
-  height: 30px;
-  padding: 0;
-  background: none;
-  border: 0;
-  border-radius: $border-radius-base;
-  transition: transform .15s cubic-bezier(.3, 0, .2, 2);
-
-  &:hover {
-    background-color: transparent;
-    outline: 0;
-    transform: scale(1.3);
-  }
-
-  &:focus,
-  &:active {
-    outline: 0;
-  }
-
-  .emoji-icon {
-    display: inline-block;
-    position: relative;
-    top: 3px;
-  }
-}
-
-.award-menu-holder {
-  display: inline-block;
-  position: relative;
-}
-
-.award-control {
-  margin: 3px 5px 3px 0;
-  padding: 5px 6px;
-  outline: 0;
-
-  &:hover,
-  &.active,
-  &:active {
-    background-color: $row-hover;
-    border-color: $row-hover-border;
-    box-shadow: none;
-    outline: 0;
-  }
-
-  &.btn {
-    &:focus {
-      outline: 0;
-    }
-  }
-
-  &.is-loading {
-    .award-control-icon-normal,
-    .emoji-icon {
-      display: none;
-    }
-
-    .award-control-icon-loading {
-      display: block;
-    }
-  }
-
-  .icon,
-  .award-control-icon {
-    float: left;
-    margin-right: 5px;
-    font-size: 19px;
-  }
-
-  .award-control-icon-loading {
-    display: none;
-  }
-
-  .award-control-icon {
-    color: $award-emoji-new-btn-icon-color;
-  }
-}
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 47a7e84b5c6..b6168a293e0 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -31,7 +31,7 @@
 
   .dropdown-content {
     max-height: 150px;
-	}
+  }
 }
 
 .issue-board-dropdown-content {
@@ -74,6 +74,7 @@
     height: 475px; // Needed for PhantomJS
     height: calc(100vh - 220px);
     min-height: 475px;
+    transition: width .2s;
 
     &.is-compact {
       width: calc(100% - 290px);
@@ -98,7 +99,7 @@
 .board-inner {
   height: 100%;
   font-size: $issue-boards-font-size;
-  background: $background-color;
+  background: $gray-light;
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
 }
@@ -109,6 +110,12 @@
 
   &.has-border {
     border-top: 3px solid;
+    margin-top: -1px;
+    margin-right: -1px;
+    margin-left: -1px;
+    padding-top: 1px;
+    padding-right: 1px;
+    padding-left: 1px;
 
     .board-title {
       padding-top: ($gl-padding - 3px);
@@ -145,7 +152,7 @@
 .board-blank-state {
   height: calc(100% - 49px);
   padding: $gl-padding;
-  background-color: #fff;
+  background-color: $white-light;
 }
 
 .board-blank-state-list {
@@ -166,8 +173,12 @@
   }
 }
 
-.board-list {
+.board-list-component {
   height: calc(100% - 49px);
+}
+
+.board-list {
+  height: 100%;
   margin-bottom: 0;
   padding: 5px;
   list-style: none;
@@ -175,7 +186,7 @@
   overflow-x: hidden;
 
   &.is-smaller {
-    height: calc(100% - 185px);
+    height: calc(100% - 136px);
   }
 }
 
@@ -187,9 +198,9 @@
 .card {
   position: relative;
   padding: 10px $gl-padding;
-  background: #fff;
+  background: $white-light;
   border-radius: $border-radius-default;
-  box-shadow: 0 1px 2px rgba(186, 186, 186, 0.5);
+  box-shadow: 0 1px 2px $issue-boards-card-shadow;
   list-style: none;
 
   &:not(:last-child) {
@@ -229,8 +240,13 @@
     font-size: (14px / $issue-boards-font-size) * 1em;
   }
 
+  .card-assignee {
+    margin-right: 5px;
+  }
+
   .avatar {
     margin-left: 0;
+    margin-right: 0;
   }
 }
 
@@ -239,7 +255,7 @@
 }
 
 .issue-boards-search {
-  width: 335px;
+  width: 395px;
 
   .form-control {
     display: inline-block;
@@ -249,7 +265,7 @@
 
 .board-list-count {
   padding: 10px 0;
-  color: $gl-placeholder-color;
+  color: $gl-text-color-secondary;
   font-size: 13px;
 
   > .fa {
@@ -285,14 +301,10 @@
   }
 }
 
-.issue-boards-sidebar {
+.page-with-layout-nav.page-with-sub-nav .issue-boards-sidebar {
   &.right-sidebar {
-    top: 153px;
+    top: 0;
     bottom: 0;
-
-    @media (min-width: $screen-sm-min) {
-      top: 220px;
-    }
   }
 
   .issuable-sidebar-header {
@@ -321,7 +333,6 @@
   }
 
   .issuable-header-text {
-    width: 100%;
     padding-right: 35px;
 
     > strong {
@@ -329,3 +340,183 @@
     }
   }
 }
+
+.right-sidebar.right-sidebar-expanded {
+  &.boards-sidebar-slide-enter-active,
+  &.boards-sidebar-slide-leave-active {
+    transition: width .2s,
+                padding .2s;
+  }
+
+  &.boards-sidebar-slide-enter,
+  &.boards-sidebar-slide-leave-active {
+    width: 0;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
+.add-issues-modal {
+  display: -webkit-flex;
+  display: flex;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba($black, .3);
+  z-index: 9999;
+}
+
+.add-issues-container {
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  width: 90vw;
+  height: 85vh;
+  max-width: 1100px;
+  min-height: 500px;
+  margin: auto;
+  padding: 25px 15px 0;
+  background-color: $white-light;
+  border-radius: $border-radius-default;
+  box-shadow: 0 2px 12px rgba($black, .5);
+
+  .empty-state {
+    display: -webkit-flex;
+    display: flex;
+    -webkit-flex: 1;
+    flex: 1;
+    margin-top: 0;
+
+    &.add-issues-empty-state-filter {
+      -webkit-flex-direction: column;
+      flex-direction: column;
+      -webkit-justify-content: center;
+      justify-content: center;
+    }
+
+    > .row {
+      width: 100%;
+      margin: auto 0;
+    }
+
+    .svg-content {
+      margin-top: -40px;
+    }
+  }
+}
+
+.add-issues-header {
+  margin: -25px -15px -5px;
+  border-top: 0;
+  border-bottom: 1px solid $border-color;
+  border-top-right-radius: $border-radius-default;
+  border-top-left-radius: $border-radius-default;
+
+  > h2 {
+    margin: 0;
+    font-size: 18px;
+  }
+}
+
+.add-issues-search {
+  display: -webkit-flex;
+  display: flex;
+
+  .issues-filters {
+    -webkit-flex: 1;
+    flex: 1;
+  }
+}
+
+.add-issues-list-column {
+  width: 100%;
+
+  @media (min-width: $screen-sm-min) {
+    width: 50%;
+  }
+
+  @media (min-width: $screen-md-min) {
+    width: (100% / 3);
+  }
+}
+
+.add-issues-list {
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex: 1;
+  flex: 1;
+  padding-top: 3px;
+  margin-left: -$gl-vert-padding;
+  margin-right: -$gl-vert-padding;
+  overflow-y: scroll;
+
+  .card-parent {
+    padding: 0 5px 5px;
+  }
+
+  .card {
+    border: 1px solid $border-gray-dark;
+    box-shadow: 0 1px 2px rgba($issue-boards-card-shadow, .3);
+    cursor: pointer;
+  }
+}
+
+.add-issues-list-loading {
+  -webkit-align-self: center;
+  align-self: center;
+  width: 100%;
+  padding-left: $gl-vert-padding;
+  padding-right: $gl-vert-padding;
+  font-size: 35px;
+}
+
+.add-issues-footer {
+  margin: auto -15px 0;
+  padding-left: 15px;
+  padding-right: 15px;
+  border-bottom-right-radius: $border-radius-default;
+  border-bottom-left-radius: $border-radius-default;
+}
+
+.add-issues-footer-to-list {
+  padding-left: $gl-vert-padding;
+  padding-right: $gl-vert-padding;
+  line-height: 34px;
+}
+
+.issue-card-selected {
+  position: absolute;
+  right: -3px;
+  top: -3px;
+  width: 17px;
+  background-color: $blue-500;
+  color: $white-light;
+  border: 1px solid $blue-600;
+  font-size: 9px;
+  line-height: 15px;
+  border-radius: 50%;
+}
+
+.modal-filters {
+  display: flex;
+
+  > .dropdown {
+    display: none;
+    margin-right: 10px;
+
+    @media (min-width: $screen-sm-min) {
+      display: block;
+    }
+  }
+
+  .dropdown-menu-toggle {
+    width: 100px;
+
+    @media (min-width: $screen-md-min) {
+      width: 140px;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/branches.scss b/app/assets/stylesheets/pages/branches.scss
new file mode 100644
index 00000000000..3e2fa8ca88d
--- /dev/null
+++ b/app/assets/stylesheets/pages/branches.scss
@@ -0,0 +1,55 @@
+.divergence-graph {
+  padding: 12px 12px 0 0;
+  float: right;
+
+  .graph-side {
+    position: relative;
+    width: 80px;
+    height: 22px;
+    padding: 5px 0 13px;
+    float: left;
+
+    .bar {
+      position: absolute;
+      height: 4px;
+      background-color: $divergence-graph-bar-bg;
+    }
+
+    .bar-behind {
+      right: 0;
+      border-radius: 3px 0 0 3px;
+    }
+
+    .bar-ahead {
+      left: 0;
+      border-radius: 0 3px 3px 0;
+    }
+
+    .count {
+      padding-top: 6px;
+      padding-bottom: 0;
+      font-size: 12px;
+      color: $gl-text-color;
+      display: block;
+    }
+
+    .count-behind {
+      padding-right: 4px;
+      text-align: right;
+    }
+
+    .count-ahead {
+      padding-left: 4px;
+      text-align: left;
+    }
+  }
+
+  .graph-separator {
+    position: relative;
+    width: 1px;
+    height: 18px;
+    margin: 5px 0 0;
+    float: left;
+    background-color: $divergence-graph-separator-bg;
+  }
+}
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index 6300ac9662f..969fc75c6eb 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -1,7 +1,38 @@
+@keyframes fade-out-status {
+  0%, 50% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+@keyframes blinking-dots {
+  0% {
+    background-color: rgba($white-light, 1);
+    box-shadow: 12px 0 0 0 rgba($white-light,0.2),
+                24px 0 0 0 rgba($white-light,0.2);
+  }
+
+  25% {
+    background-color: rgba($white-light, 0.4);
+    box-shadow: 12px 0 0 0 rgba($white-light,2),
+                24px 0 0 0 rgba($white-light,0.2);
+  }
+
+  75% {
+    background-color: rgba($white-light, 0.4);
+    box-shadow: 12px 0 0 0 rgba($white-light,0.2),
+                24px 0 0 0 rgba($white-light,1);
+  }
+
+  100% {
+    background-color: rgba($white-light, 1);
+    box-shadow: 12px 0 0 0 rgba($white-light,0.2),
+                24px 0 0 0 rgba($white-light,0.2);
+  }
+}
+
 .build-page {
   pre.trace {
-    background: #111;
-    color: #fff;
+    background: $builds-trace-bg;
+    color: $white-light;
     font-family: $monospace_font;
     white-space: pre-wrap;
     overflow: auto;
@@ -14,40 +45,99 @@
     }
   }
 
+  .environment-information {
+    background-color: $gray-light;
+    border: 1px solid $border-color;
+    padding: 12px $gl-padding;
+    border-radius: $border-radius-default;
+
+    svg {
+      position: relative;
+      top: 1px;
+      margin-right: 5px;
+    }
+  }
+}
+
+.scroll-controls {
+  height: 100%;
+
+  .scroll-step {
+    width: 31px;
+    margin: 0 0 0 auto;
+  }
+
+  .scroll-link,
   .autoscroll-container {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    z-index: 100;
+    right: 25px;
+    z-index: 1;
   }
 
-  .scroll-controls {
-    &.affix-top {
-      position: absolute;
+  .scroll-link {
+    position: fixed;
+    display: block;
+    margin-bottom: 10px;
+
+    &.scroll-top .gitlab-icon-scroll-up-hover,
+    &.scroll-top:hover .gitlab-icon-scroll-up,
+    &.scroll-bottom .gitlab-icon-scroll-down-hover,
+    &.scroll-bottom:hover .gitlab-icon-scroll-down {
+      display: none;
+    }
+
+    &.scroll-top:hover .gitlab-icon-scroll-up-hover,
+    &.scroll-bottom:hover .gitlab-icon-scroll-down-hover {
+      display: inline-block;
+    }
+
+    &.scroll-top {
       top: 10px;
-      right: 25px;
     }
 
-    &.affix-bottom {
-      position: absolute;
-      right: 25px;
+    &.scroll-bottom {
+      bottom: -2px;
     }
+  }
 
-    &.affix {
-      right: 30px;
-      bottom: 15px;
-      z-index: 1;
+  .autoscroll-container {
+    position: absolute;
+  }
 
-      @media (min-width: $screen-md-min) {
-        right: 26%;
-      }
+  &.sidebar-expanded {
+
+    .scroll-link,
+    .autoscroll-container {
+      right: ($gutter_width + ($gl-padding * 2));
     }
+  }
+}
 
-    a {
-      display: block;
-      margin-bottom: 10px;
+.status-message {
+  display: inline-block;
+  color: $white-light;
+
+  .status-icon {
+    display: inline-block;
+    width: 16px;
+    height: 33px;
+  }
+
+  .status-text {
+    float: left;
+    opacity: 0;
+    margin-right: 10px;
+    font-weight: normal;
+    line-height: 1.8;
+    transition: opacity 1s ease-out;
+
+    &.animate {
+      animation: fade-out-status 2s ease;
     }
   }
+
+  &:hover .status-text {
+    opacity: 1;
+  }
 }
 
 .build-header {
@@ -57,12 +147,9 @@
   min-height: 58px;
   align-items: center;
 
-  .btn-inverted {
-    @include btn-outline($white-light, $blue-normal, $blue-normal, $blue-light, $white-light, $blue-light);
-  }
-
   @media (max-width: $screen-sm-max) {
     padding-right: 40px;
+    margin-top: 6px;
 
     .btn-inverted {
       display: none;
@@ -71,14 +158,14 @@
 
   .header-content {
     flex: 1;
-  }
 
-  a {
-    color: $gl-gray;
+    a {
+      color: $gl-text-color;
 
-    &:hover {
-      color: $gl-link-color;
-      text-decoration: none;
+      &:hover {
+        color: $gl-link-color;
+        text-decoration: none;
+      }
     }
   }
 
@@ -94,8 +181,8 @@
 }
 
 .build-trace {
-  background: $ci-output-bg;
-  color: $ci-text-color;
+  background: $black;
+  color: $gray-darkest;
   white-space: pre;
   overflow-x: auto;
   font-size: 12px;
@@ -107,6 +194,15 @@
   .bash {
     display: block;
   }
+
+  .build-loader-animation {
+    position: relative;
+    width: 6px;
+    height: 6px;
+    margin: auto auto 12px 2px;
+    border-radius: 50%;
+    animation: blinking-dots 1s linear infinite;
+  }
 }
 
 .right-sidebar.build-sidebar {
@@ -246,6 +342,12 @@
   }
 }
 
+.build-sidebar {
+  .container-fluid.container-limited {
+    max-width: 100%;
+  }
+}
+
 .build-detail-row {
   margin-bottom: 5px;
 
@@ -255,7 +357,7 @@
 }
 
 .build-light-text {
-  color: $gl-placeholder-color;
+  color: $gl-text-color-secondary;
 }
 
 .build-gutter-toggle {
@@ -264,9 +366,3 @@
   right: 0;
   margin-top: -17px;
 }
-
-@media (min-width: $screen-md-min) {
-  .sub-nav.build {
-    width: calc(100% + #{$gutter_width});
-  }
-}
diff --git a/app/assets/stylesheets/pages/ci_projects.scss b/app/assets/stylesheets/pages/ci_projects.scss
index 87c453a7a27..90643832390 100644
--- a/app/assets/stylesheets/pages/ci_projects.scss
+++ b/app/assets/stylesheets/pages/ci_projects.scss
@@ -1,7 +1,7 @@
 .ci-body {
   .project-title {
     margin: 0;
-    color: #444;
+    color: $common-gray-dark;
     font-size: 20px;
     line-height: 1.5;
   }
@@ -18,7 +18,7 @@
     }
 
     td {
-      color: $gl-gray;
+      color: $gl-text-color;
       vertical-align: middle !important;
 
       a {
diff --git a/app/assets/stylesheets/pages/commit.scss b/app/assets/stylesheets/pages/commit.scss
deleted file mode 100644
index 47d3e72679b..00000000000
--- a/app/assets/stylesheets/pages/commit.scss
+++ /dev/null
@@ -1,252 +0,0 @@
-.commit-title {
-  display: block;
-}
-
-.commit-author,
-.commit-committer {
-  display: block;
-  color: #999;
-  font-weight: normal;
-  font-style: italic;
-}
-
-.commit-author strong,
-.commit-committer strong {
-  font-weight: bold;
-  font-style: normal;
-}
-
-.commit-description {
-  background: none;
-  border: none;
-  margin: 0;
-  padding: 0;
-  margin-top: 10px;
-  word-break: normal;
-  white-space: pre-wrap;
-}
-
-.commit-info-row {
-  margin-bottom: 10px;
-  line-height: 24px;
-  padding-top: 6px;
-
-  &.commit-info-row-header {
-    line-height: 34px;
-    padding: 10px 0;
-    margin-bottom: 0;
-
-    @media (min-width: $screen-sm-min) {
-      display: flex;
-      align-items: center;
-
-      .commit-meta {
-        flex: 1;
-      }
-    }
-
-    .commit-hash-full {
-      @media (max-width: $screen-sm-max) {
-        width: 80px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: inline-block;
-        vertical-align: bottom;
-      }
-    }
-
-    .commit-action-buttons {
-      i {
-        color: $gl-icon-color;
-        font-size: 13px;
-        margin-right: 3px;
-      }
-
-      @media (max-width: $screen-xs-max) {
-        .dropdown {
-          width: 100%;
-          margin-top: 10px;
-        }
-
-        .dropdown-toggle {
-          width: 100%;
-        }
-      }
-    }
-  }
-
-  .avatar {
-    @extend .avatar-inline;
-    margin-left: 0;
-
-    @media (min-width: $screen-sm-min) {
-      margin-left: 4px;
-    }
-  }
-
-  .commit-committer-link,
-  .commit-author-link {
-    color: $gl-gray;
-    font-weight: bold;
-  }
-
-  .fa-clipboard {
-    color: $dropdown-title-btn-color;
-  }
-
-  .commit-info {
-    &.branches {
-      margin-left: 8px;
-    }
-  }
-
-  .ci-status-link {
-
-    svg {
-      position: relative;
-      top: 2px;
-      margin: 0 2px 0 3px;
-    }
-  }
-}
-
-.js-details-expand {
-  &:hover {
-    text-decoration: none;
-  }
-}
-
-.commit-info-widget {
-  background: $background-color;
-  color: $gl-gray;
-  border: 1px solid $border-color;
-  border-radius: $border-radius-default;
-
-  .widget-row {
-    padding: $gl-padding;
-
-    &:not(:last-of-type) {
-      border-bottom: 1px solid $widget-inner-border;
-    }
-
-    &.branch-info {
-      .monospace,
-      .commit-info {
-        margin-left: 4px;
-      }
-    }
-  }
-
-  .icon-container {
-    display: inline-block;
-    margin-right: 8px;
-
-    svg {
-      position: relative;
-      top: 2px;
-      height: 16px;
-      width: 16px;
-    }
-
-    &.commit-icon {
-      svg {
-        path {
-          fill: $gl-text-color;
-        }
-      }
-    }
-  }
-
-  .label.label-gray {
-    background-color: $widget-expand-item;
-  }
-}
-
-.ci-status-link {
-  svg {
-    overflow: visible;
-  }
-}
-
-.commit-box {
-  border-top: 1px solid $border-color;
-  padding: $gl-padding 0;
-
-  .commit-title {
-    margin: 0;
-    font-size: 23px;
-    color: $gl-gray-dark;
-  }
-
-  .commit-description {
-    margin-top: 15px;
-  }
-}
-
-.file-stats {
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: 10px 0;
-
-    li {
-      padding: 3px 0;
-      line-height: 20px;
-    }
-  }
-
-  .new-file {
-    a {
-      color: $gl-text-green;
-    }
-  }
-
-  .renamed-file {
-    a {
-      color: $gl-text-orange;
-    }
-  }
-
-  .deleted-file {
-    a {
-      color: $gl-text-red;
-    }
-  }
-
-  .edit-file {
-    a {
-      color: $gl-text-color;
-    }
-  }
-}
-
-/*
- * Commit message textarea for web editor and
- * custom merge request message
- */
-.commit-message-container {
-  background-color: $body-bg;
-  position: relative;
-  font-family: $monospace_font;
-  $left: 12px;
-  overflow: hidden; // See https://gitlab.com/gitlab-org/gitlab-ce/issues/13987
-  .max-width-marker {
-    width: 72ch;
-    color: rgba(0, 0, 0, 0.0);
-    font-family: inherit;
-    left: $left;
-    height: 100%;
-    border-right: 1px solid mix($input-border, white);
-    position: absolute;
-    z-index: 1;
-  }
-
-  > textarea {
-    background-color: rgba(0, 0, 0, 0.0);
-    font-family: inherit;
-    padding-left: $left;
-    position: relative;
-    z-index: 2;
-  }
-}
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index 98a84351a3d..0dad91ba128 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -1,15 +1,116 @@
+.commit-description {
+  background: none;
+  border: none;
+  padding: 0;
+  margin-top: 10px;
+  word-break: normal;
+  white-space: pre-wrap;
+}
+
+.js-details-expand {
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.commit-box {
+  border-top: 1px solid $border-color;
+  padding: $gl-padding 0;
+
+  .commit-title {
+    margin: 0;
+    color: $gl-text-color;
+  }
+
+  .commit-description {
+    margin-top: 15px;
+  }
+}
+
+.commit-hash-full {
+  @media (max-width: $screen-sm-max) {
+    width: 80px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-block;
+    vertical-align: bottom;
+  }
+}
+
+.pipeline-info {
+  .status-icon-container {
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 3px;
+
+    svg {
+      display: block;
+      width: 22px;
+      height: 22px;
+    }
+  }
+
+  .mr-widget-pipeline-graph {
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0 -6px 0 0;
+
+    .dropdown-menu {
+      margin-top: 11px;
+    }
+  }
+}
+
+.branch-info .commit-icon {
+  margin-right: 3px;
+
+  svg {
+    top: 3px;
+  }
+}
+
+/*
+ * Commit message textarea for web editor and
+ * custom merge request message
+ */
+.commit-message-container {
+  background-color: $body-bg;
+  position: relative;
+  font-family: $monospace_font;
+  $left: 12px;
+  overflow: hidden; // See https://gitlab.com/gitlab-org/gitlab-ce/issues/13987
+  .max-width-marker {
+    width: 72ch;
+    color: $commit-max-width-marker-color;
+    font-family: inherit;
+    left: $left;
+    height: 100%;
+    border-right: 1px solid mix($input-border, $white-light);
+    position: absolute;
+    z-index: 1;
+  }
+
+  textarea {
+    background-color: $commit-message-text-area-bg;
+    font-family: inherit;
+    padding-left: $left;
+    position: relative;
+    z-index: 2;
+  }
+}
+
+
 .commits-compare-switch {
-  @include btn-default;
-  @include btn-white;
   float: left;
   margin-right: 9px;
 }
 
 .commit-header {
   padding: 5px 10px;
-  background-color: $background-color;
-  border-top: 1px solid #eee;
-  border-bottom: 1px solid #eee;
+  background-color: $gray-light;
+  border-bottom: 1px solid $gray-darker;
+  border-top: 1px solid $gray-darker;
   font-size: 14px;
 
   &:first-child {
@@ -18,8 +119,6 @@
 }
 
 .commit-row-title {
-  line-height: 1.35;
-
   .notes_count {
     float: right;
     margin-right: 10px;
@@ -30,21 +129,22 @@
   }
 
   .commit-row-message {
-    color: $gl-dark-link-color;
+    color: $gl-text-color;
   }
-
 }
 
 .text-expander {
   display: inline-block;
   background: $gray-light;
-  color: $gl-placeholder-color;
+  color: $gl-text-color-secondary;
   padding: 0 5px;
   cursor: pointer;
   border: 1px solid $border-gray-dark;
   border-radius: $border-radius-default;
   margin-left: 5px;
-  line-height: 1;
+  font-size: $gl-font-size;
+  line-height: $gl-font-size;
+  outline: none;
 
   &:hover {
     background-color: darken($gray-light, 10%);
@@ -52,16 +152,44 @@
   }
 }
 
+.commit.flex-list {
+  display: flex;
+}
+
+.avatar-cell {
+  width: 46px;
+  padding-left: 10px;
+
+  img {
+    margin-right: 0;
+  }
+}
+
+.commit-detail {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-grow: 1;
+  padding-left: 10px;
+
+  .merge-request-branches & {
+    flex-direction: column;
+  }
+}
+
+.commit-content {
+  padding-right: 10px;
+}
+
 .commit-actions {
   @media (min-width: $screen-sm-min) {
-    float: right;
-    margin-left: $gl-padding;
-    margin-top: 2px;
     font-size: 0;
   }
 
   .ci-status-link {
     display: inline-block;
+    position: relative;
+    top: 1px;
   }
 
   .btn-clipboard,
@@ -82,40 +210,17 @@
   font-weight: 600;
 }
 
-.commit {
-  padding: 10px 0;
-  position: relative;
-
-  @media (min-width: $screen-sm-min) {
-    padding-left: 46px;
-  }
-
-  &:not(:last-child) {
-    border-bottom: 1px solid #eee;
-  }
+.commit,
+.generic_commit_status {
 
   a,
   button {
-    color: $gl-dark-link-color;
+    color: $gl-text-color;
     vertical-align: baseline;
   }
 
-
-  .avatar {
-    margin-left: -46px;
-  }
-
-  .item-title {
-    display: inline-block;
-
-    @media (min-width: $screen-sm-min) {
-      max-width: 70%;
-    }
-  }
-
   .commit-row-description {
     font-size: 14px;
-    border-left: 1px solid $btn-gray-hover;
     padding: 10px 15px;
     margin: 10px 0;
     background: $gray-light;
@@ -132,20 +237,7 @@
     }
 
     a {
-      color: $gl-dark-link-color;
-    }
-  }
-
-  .commit-row-info {
-    color: $gl-gray;
-    line-height: 1.35;
-
-    a {
-      color: $gl-gray;
-    }
-
-    .avatar {
-      margin-right: 8px;
+      color: $gl-text-color;
     }
   }
 
@@ -162,7 +254,7 @@
 }
 
 .branch-commit {
-  color: $gl-gray;
+  color: $gl-text-color;
 
   .commit-icon {
     text-align: center;
@@ -172,7 +264,7 @@
       height: 14px;
       width: 14px;
       vertical-align: middle;
-      fill: $table-text-gray;
+      fill: $gl-text-color-secondary;
     }
   }
 
@@ -181,62 +273,6 @@
   }
 
   .commit-row-message {
-    color: $gl-gray;
-  }
-}
-
-.divergence-graph {
-  padding: 12px 12px 0 0;
-  float: right;
-
-  .graph-side {
-    position: relative;
-    width: 80px;
-    height: 22px;
-    padding: 5px 0 13px;
-    float: left;
-
-    .bar {
-      position: absolute;
-      height: 4px;
-      background-color: #ccc;
-    }
-
-    .bar-behind {
-      right: 0;
-      border-radius: 3px 0 0 3px;
-    }
-
-    .bar-ahead {
-      left: 0;
-      border-radius: 0 3px 3px 0;
-    }
-
-    .count {
-      padding-top: 6px;
-      padding-bottom: 0;
-      font-size: 12px;
-      color: #333;
-      display: block;
-    }
-
-    .count-behind {
-      padding-right: 4px;
-      text-align: right;
-    }
-
-    .count-ahead {
-      padding-left: 4px;
-      text-align: left;
-    }
-  }
-
-  .graph-separator {
-    position: relative;
-    width: 1px;
-    height: 18px;
-    margin: 5px 0 0;
-    float: left;
-    background-color: #ccc;
+    color: $gl-text-color;
   }
 }
diff --git a/app/assets/stylesheets/pages/confirmation.scss b/app/assets/stylesheets/pages/confirmation.scss
deleted file mode 100644
index 81e5cee240d..00000000000
--- a/app/assets/stylesheets/pages/confirmation.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-.well-confirmation {
-  margin-bottom: 20px;
-  border-bottom: 1px solid #eee;
-
-  > h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-weight: 400;
-  }
-
-  .lead {
-    margin-bottom: 20px;
-  }
-
-  ul,
-  ol {
-    padding-left: 0;
-  }
-
-  li {
-    list-style-type: none;
-  }
-}
-
-.confirmation-content {
-  a {
-    color: $md-link-color;
-  }
-}
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index 572e1e7d558..ad3dbc7ac48 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -1,16 +1,63 @@
 #cycle-analytics {
+  max-width: 1000px;
   margin: 24px auto 0;
-  max-width: 800px;
   position: relative;
 
-  .panel {
+  .col-headers {
+    ul {
+      margin: 0;
+      padding: 0;
+      @include clearfix;
+    }
+
+    li {
+      display: inline-block;
+      float: left;
+      line-height: 50px;
+      width: 20%;
+    }
+
+
+    .fa {
+      color: $cycle-analytics-light-gray;
+
+      &:hover {
+        color: $gl-text-color;
+      }
+    }
+
+    .stage-header {
+      width: 26%;
+      padding-left: $gl-padding;
+    }
+
+    .median-header {
+      width: 14%;
+    }
+
+    .event-header {
+      width: 45%;
+      padding-left: $gl-padding;
+    }
+
+    .total-time-header {
+      width: 15%;
+      text-align: right;
+      padding-right: $gl-padding;
+    }
 
+    .stage-name {
+      font-weight: 600;
+    }
+  }
+
+  .panel {
     .content-block {
       padding: 24px 0;
       border-bottom: none;
       position: relative;
 
-      @media (max-width: $screen-sm-min) {
+      @media (max-width: $screen-xs-max) {
         padding: 6px 0 24px;
       }
     }
@@ -18,7 +65,7 @@
     .column {
       text-align: center;
 
-      @media (max-width: $screen-sm-min) {
+      @media (max-width: $screen-xs-max) {
         padding: 15px 0;
       }
 
@@ -35,23 +82,20 @@
       }
 
       &:last-child {
-        text-align: right;
-
-        @media (max-width: $screen-sm-min) {
+        @media (max-width: $screen-xs-max) {
           text-align: center;
         }
       }
     }
+  }
 
-    .dropdown {
-      top: 13px;
-    }
+  .js-ca-dropdown {
+    top: $gl-padding-top;
   }
 
   .bordered-box {
     border: 1px solid $border-color;
     border-radius: $border-radius-default;
-
   }
 
   .content-list {
@@ -69,16 +113,16 @@
 
         &.title {
           line-height: 19px;
-          font-size: 15px;
+          font-size: 14px;
           font-weight: 600;
-          color: $gl-title-color;
+          color: $gl-text-color;
         }
 
         &.text {
           color: $layout-link-gray;
 
           &.value-col {
-            color: $gl-title-color;
+            color: $gl-text-color;
           }
         }
       }
@@ -103,7 +147,7 @@
       position: absolute;
       right: $cycle-analytics-box-padding;
       cursor: pointer;
-      color: #b2b2b2;
+      color: $cycle-analytics-dismiss-icon-color;
     }
 
     .svg-container {
@@ -116,7 +160,7 @@
     }
 
     .inner-content {
-      @media (max-width: $screen-sm-min) {
+      @media (max-width: $screen-xs-max) {
         padding: 0 28px;
         text-align: center;
       }
@@ -141,4 +185,304 @@
     margin-top: 36px;
   }
 
+  .stage-panel-body {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .stage-nav,
+  .stage-entries {
+    display: flex;
+    vertical-align: top;
+    font-size: $gl-font-size;
+  }
+
+  .stage-nav {
+    width: 40%;
+    margin-bottom: 0;
+
+    ul {
+      padding: 0;
+      margin: 0;
+      width: 100%;
+    }
+
+    li {
+      list-style-type: none;
+      @include clearfix;
+    }
+
+    .stage-nav-item {
+      display: block;
+      line-height: 65px;
+      border-top: 1px solid transparent;
+      border-bottom: 1px solid transparent;
+      border-right: 1px solid $border-color;
+      background-color: $gray-light;
+
+      &.active {
+        background-color: transparent;
+        border-right-color: transparent;
+        border-top-color: $border-color;
+        border-bottom-color: $border-color;
+        box-shadow: inset 2px 0 0 0 $active-item-blue;
+
+        .stage-name {
+          font-weight: 600;
+        }
+      }
+
+      &:hover:not(.active) {
+        background-color: $gray-lightest;
+        box-shadow: inset 2px 0 0 0 $border-color;
+        cursor: pointer;
+      }
+
+      &:first-child {
+        border-top: none;
+      }
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      .stage-nav-item-cell {
+        float: left;
+
+        &.stage-name {
+          width: 65%;
+        }
+
+        &.stage-median {
+          width: 35%;
+        }
+      }
+
+      .stage-name {
+        padding-left: 16px;
+      }
+
+      .stage-empty,
+      .not-available {
+        color: $gl-text-color-secondary;
+      }
+    }
+  }
+
+  .stage-panel-container {
+    width: 100%;
+    overflow: auto;
+  }
+
+  .stage-panel {
+    min-width: 968px;
+
+    .panel-heading {
+      padding: 0;
+      background-color: transparent;
+    }
+
+    .events-description {
+      line-height: 65px;
+      padding: 0 $gl-padding;
+    }
+
+    .events-info {
+      color: $gl-text-color-secondary;
+    }
+  }
+
+  .stage-events {
+    width: 60%;
+    overflow: scroll;
+    height: 467px;
+  }
+
+  .stage-event-list {
+    margin: 0;
+    padding: 0;
+  }
+
+  .stage-event-item {
+    list-style-type: none;
+    padding: 0 0 $gl-padding;
+    margin: 0 $gl-padding $gl-padding;
+    border-bottom: 1px solid $gray-darker;
+    @include clearfix;
+
+    &:last-child {
+      border-bottom: none;
+      margin-bottom: 0;
+    }
+
+    .item-details,
+    .item-time {
+      float: left;
+    }
+
+    .item-details {
+      width: 75%;
+    }
+
+    .item-title {
+      margin: 0 0 2px;
+
+      &.issue-title,
+      &.commit-title,
+      &.merge-merquest-title {
+        max-width: 100%;
+        display: block;
+        @include text-overflow();
+
+        a {
+          color: $gl-text-color;
+        }
+      }
+    }
+
+    .item-time {
+      width: 25%;
+      text-align: right;
+    }
+
+    .total-time {
+      font-size: $cycle-analytics-big-font;
+      color: $cycle-analytics-dark-text;
+
+      span {
+        color: $gl-text-color;
+        font-size: $gl-font-size;
+      }
+    }
+
+    .issue-date,
+    .build-date {
+      color: $gl-text-color;
+    }
+
+    .issue-link,
+    .commit-author-link,
+    .issue-author-link {
+      color: $gl-text-color;
+    }
+
+    // Custom CSS for components
+    .item-conmmit-component {
+      .commit-icon {
+        svg {
+          display: inline-block;
+          width: 20px;
+          height: 20px;
+          vertical-align: bottom;
+        }
+      }
+    }
+
+    .merge-request-branch {
+      a {
+        max-width: 180px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        display: inline-block;
+        vertical-align: bottom;
+      }
+    }
+  }
+
+  // Custom Styles for stage items
+  .item-build-component {
+
+    .item-title {
+      .icon-build-status {
+        float: left;
+        margin-right: 5px;
+        position: relative;
+        top: 2px;
+      }
+
+      .item-build-name {
+        color: $gl-text-color;
+      }
+
+      .pipeline-id {
+        color: $gl-text-color;
+        padding: 0 3px 0 0;
+      }
+
+      .branch-name {
+        color: $black;
+        display: inline-block;
+        max-width: 180px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        line-height: 1.3;
+        vertical-align: top;
+      }
+
+      .short-sha {
+        color: $gl-link-color;
+        line-height: 1.3;
+        vertical-align: top;
+        font-weight: normal;
+      }
+
+      .fa {
+        color: $gl-text-color-secondary;
+        font-size: $code_font_size;
+      }
+    }
+  }
+
+  .empty-stage,
+  .no-access-stage {
+    text-align: center;
+    width: 75%;
+    margin: 0 auto;
+    padding-top: 130px;
+    color: $gl-text-color-secondary;
+
+    h4 {
+      color: $gl-text-color;
+    }
+  }
+
+  .empty-stage {
+    .icon-no-data {
+      height: 36px;
+      width: 78px;
+      display: inline-block;
+      margin-bottom: 20px;
+    }
+  }
+
+  .no-access-stage {
+    .icon-lock {
+      height: 36px;
+      width: 78px;
+      display: inline-block;
+      margin-bottom: 20px;
+    }
+  }
+}
+
+.cycle-analytics-overview {
+  padding-top: 100px;
+
+  .overview-details {
+    display: flex;
+    align-items: center;
+  }
+
+  .overview-image {
+    text-align: right;
+  }
+
+  .overview-icon {
+    svg {
+      width: 365px;
+      height: 227px;
+    }
+  }
 }
diff --git a/app/assets/stylesheets/pages/dashboard.scss b/app/assets/stylesheets/pages/dashboard.scss
deleted file mode 100644
index 016bab104eb..00000000000
--- a/app/assets/stylesheets/pages/dashboard.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-.dashboard {
-  .side {
-    .panel {
-      .panel-heading {
-        background: $background-color;
-        border-top-left-radius: 0;
-      }
-
-      border-top-left-radius: 0;
-    }
-  }
-}
-
-.dashboard-search-filter {
-  padding: 5px;
-
-  .search-text-input {
-    float: left;
-    @extend .col-md-2;
-  }
-
-  .btn {
-    margin-left: 5px;
-    float: left;
-  }
-}
-
-.project-access-icon {
-  margin-left: 10px;
-  float: left;
-  margin-right: 15px;
-  margin-bottom: 15px;
-
-  i {
-    color: #888;
-  }
-}
-
-.dash-project-access-icon {
-  float: left;
-  margin-right: 5px;
-  width: 16px;
-}
diff --git a/app/assets/stylesheets/pages/deploy_keys.scss b/app/assets/stylesheets/pages/deploy_keys.scss
new file mode 100644
index 00000000000..2fafe052106
--- /dev/null
+++ b/app/assets/stylesheets/pages/deploy_keys.scss
@@ -0,0 +1,13 @@
+.deploy-keys-list {
+  width: 100%;
+  overflow: auto;
+
+  table {
+    border: 1px solid $table-border-color;
+  }
+}
+
+.deploy-keys-title {
+  padding-bottom: 2px;
+  line-height: 2;
+}
diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss
index 0f0c0abe7ae..46fd19c93f9 100644
--- a/app/assets/stylesheets/pages/detail_page.scss
+++ b/app/assets/stylesheets/pages/detail_page.scss
@@ -1,16 +1,15 @@
 .detail-page-header {
   padding: $gl-padding-top 0;
   border-bottom: 1px solid $border-color;
-  color: #5c5d5e;
-  font-size: 16px;
+  color: $gl-text-color;
   line-height: 34px;
 
   .author {
-    color: #5c5d5e;
+    color: $gl-text-color;
   }
 
   .identifier {
-    color: #5c5d5e;
+    color: $gl-text-color;
   }
 
   .issue_created_ago,
@@ -23,7 +22,7 @@
   .title {
     margin: 0 0 16px;
     font-size: 2em;
-    color: $gl-gray-dark;
+    color: $gl-text-color;
     padding: 0 0 0.3em;
     border-bottom: 1px solid $white-dark;
   }
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index fde138c874d..1aa1079903c 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -11,10 +11,10 @@
 
   .diff-header {
     position: relative;
-    background: $background-color;
+    background: $gray-light;
     border-bottom: 1px solid $border-color;
     padding: 10px 16px;
-    color: #555;
+    color: $gl-text-color;
     z-index: 10;
     border-radius: 3px 3px 0 0;
 
@@ -24,7 +24,7 @@
       display: block;
 
       .file-mode {
-        color: #777;
+        color: $file-mode-changed;
       }
     }
 
@@ -34,11 +34,16 @@
     }
   }
 
-  .file-title {
+  .file-title,
+  .file-title-flex-parent {
     cursor: pointer;
 
+    a:hover {
+      text-decoration: none;
+    }
+
     &:hover {
-      background-color: $dark-background-color;
+      background-color: $gray-normal;
     }
 
     .diff-toggle-caret {
@@ -49,8 +54,8 @@
   .diff-content {
     overflow: auto;
     overflow-y: hidden;
-    background: #fff;
-    color: #333;
+    background: $white-light;
+    color: $gl-text-color;
     border-radius: 0 0 3px 3px;
 
     .unfold {
@@ -59,7 +64,7 @@
 
     .file-mode-changed {
       padding: 10px;
-      color: #777;
+      color: $file-mode-changed;
     }
 
     .suppressed-container {
@@ -84,6 +89,10 @@
 
       .diff-line-num {
         width: 50px;
+
+        a {
+          transition: none;
+        }
       }
 
       .line_holder td {
@@ -92,20 +101,6 @@
 
         &.noteable_line {
           position: relative;
-
-          &.old {
-            &::before {
-              content: '-';
-              position: absolute;
-            }
-          }
-
-          &.new {
-            &::before {
-              content: '+';
-              position: absolute;
-            }
-          }
         }
 
         span {
@@ -120,7 +115,7 @@
       }
 
       .add-diff-note {
-        margin-left: -65px;
+        margin-left: -55px;
       }
     }
 
@@ -142,8 +137,13 @@
         width: 35px;
         font-weight: normal;
 
-        &:hover {
-          text-decoration: underline;
+        &[disabled] {
+          cursor: default;
+
+          &:hover,
+          &:active {
+            text-decoration: none;
+          }
         }
       }
     }
@@ -151,8 +151,9 @@
     .line_content {
       display: block;
       margin: 0;
-      padding: 0 0.5em;
+      padding: 0 1.5em;
       border: none;
+      position: relative;
 
       &.parallel {
         display: table-cell;
@@ -161,6 +162,22 @@
           word-break: break-all;
         }
       }
+
+      &.old {
+        &::before {
+          content: '-';
+          position: absolute;
+          left: 0.5em;
+        }
+      }
+
+      &.new {
+        &::before {
+          content: '+';
+          position: absolute;
+          left: 0.5em;
+        }
+      }
     }
 
     .text-file.diff-wrap-lines table .line_holder td span {
@@ -169,7 +186,7 @@
   }
 
   .image {
-    background: #ddd;
+    background: $diff-image-bg;
     text-align: center;
     padding: 30px;
 
@@ -179,13 +196,13 @@
 
     .frame {
       display: inline-block;
-      background-color: #fff;
+      background-color: $white-light;
       line-height: 0;
 
       img {
-        border: 1px solid #fff;
-        background-image: linear-gradient(45deg, #e5e5e5 25%, transparent 25%, transparent 75%, #e5e5e5 75%, #e5e5e5 100%),
-        linear-gradient(45deg, #e5e5e5 25%, transparent 25%, transparent 75%, #e5e5e5 75%, #e5e5e5 100%);
+        border: 1px solid $white-light;
+        background-image: linear-gradient(45deg, $border-color 25%, transparent 25%, transparent 75%, $border-color 75%, $border-color 100%),
+        linear-gradient(45deg, $border-color 25%, transparent 25%, transparent 75%, $border-color 75%, $border-color 100%);
         background-size: 10px 10px;
         background-position: 0 0, 5px 5px;
         max-width: 100%;
@@ -203,7 +220,7 @@
     .image-info {
       font-size: 12px;
       margin: 5px 0 0;
-      color: grey;
+      color: $diff-image-info-color;
     }
 
     .view.swipe {
@@ -217,7 +234,7 @@
 
       .swipe-wrap {
         overflow: hidden;
-        border-left: 1px solid #999;
+        border-left: 1px solid $diff-swipe-border;
         position: absolute;
         display: block;
         top: 13px;
@@ -347,7 +364,7 @@
   .view-modes {
     padding: 10px;
     text-align: center;
-    background: #eee;
+    background: $gray-darker;
 
     ul,
     li {
@@ -358,8 +375,8 @@
     }
 
     li {
-      color: grey;
-      border-left: 1px solid #c1c1c1;
+      color: $diff-view-modes-color;
+      border-left: 1px solid $diff-view-modes-border;
       padding: 0 12px 0 16px;
       cursor: pointer;
 
@@ -377,7 +394,7 @@
         }
 
         cursor: default;
-        color: #333;
+        color: $gl-text-color;
       }
 
       &.disabled {
@@ -414,6 +431,21 @@
   border-bottom: none;
 }
 
+.diff-stats-summary-toggler {
+  padding: 0;
+  background-color: transparent;
+  border: 0;
+  color: $gl-link-color;
+  transition: color 0.1s linear;
+
+  &:hover,
+  &:focus {
+    outline: none;
+    text-decoration: underline;
+    color: $gl-link-hover-color;
+  }
+}
+
 // Mobile
 @media (max-width: 480px) {
   .diff-title {
@@ -477,3 +509,103 @@
     }
   }
 }
+
+.diff-comment-avatar-holders {
+  position: absolute;
+  height: 19px;
+  width: 19px;
+  margin-left: -15px;
+
+  &:hover {
+    .diff-comment-avatar,
+    .diff-comments-more-count {
+      @for $i from 1 through 4 {
+        $x-pos: 14px;
+
+        &:nth-child(#{$i}) {
+          @if $i == 4 {
+            $x-pos: 14.5px;
+          }
+
+          transform: translateX((($i * $x-pos) - $x-pos));
+
+          &:hover {
+            transform: translateX((($i * $x-pos) - $x-pos)) scale(1.2);
+          }
+        }
+      }
+    }
+
+    .diff-comments-more-count {
+      padding-left: 2px;
+      padding-right: 2px;
+      width: auto;
+    }
+  }
+}
+
+.diff-comment-avatar,
+.diff-comments-more-count {
+  position: absolute;
+  left: 0;
+  width: 19px;
+  height: 19px;
+  margin-right: 0;
+  border-color: $white-light;
+  cursor: pointer;
+  transition: all .1s ease-out;
+
+  @for $i from 1 through 4 {
+    &:nth-child(#{$i}) {
+      z-index: (4 - $i);
+    }
+  }
+}
+
+.diff-comments-more-count {
+  width: 19px;
+  min-width: 19px;
+  padding-left: 0;
+  padding-right: 0;
+  overflow: hidden;
+}
+
+.diff-comments-more-count,
+.diff-notes-collapse {
+  background-color: $gray-darkest;
+  color: $white-light;
+  border: 1px solid $white-light;
+  border-radius: 1em;
+  font-family: $regular_font;
+  font-size: 9px;
+  line-height: 17px;
+  text-align: center;
+}
+
+.diff-notes-collapse {
+  position: relative;
+  width: 19px;
+  height: 19px;
+  padding: 0;
+  transition: transform .1s ease-out;
+
+  svg {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    margin-left: -5.5px;
+    margin-top: -5.5px;
+  }
+
+  path {
+    fill: $white-light;
+  }
+
+  &:hover {
+    transform: scale(1.2);
+  }
+
+  &:focus {
+    outline: 0;
+  }
+}
diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss
index 778126bcfb7..4af267403d8 100644
--- a/app/assets/stylesheets/pages/editor.scss
+++ b/app/assets/stylesheets/pages/editor.scss
@@ -10,14 +10,14 @@
   }
 
   .ace_gutter-cell {
-    background-color: $background-color;
+    background-color: $gray-light;
   }
 
   .cancel-btn {
-    color: #b94a48;
+    color: $editor-cancel-color;
 
     &:hover {
-      color: #b94a48;
+      color: $editor-cancel-color;
     }
   }
 
@@ -34,7 +34,7 @@
   }
 
   .editor-ref {
-    background: $background-color;
+    background: $gray-light;
     padding-right: $gl-padding;
     border-right: 1px solid $border-color;
     display: block;
@@ -51,8 +51,16 @@
 
   .new-file-name {
     display: inline-block;
-    width: 450px;
+    max-width: 450px;
     float: left;
+
+    @media(max-width: $screen-md-max) {
+      width: 280px;
+    }
+
+    @media(max-width: $screen-sm-max) {
+      width: 180px;
+    }
   }
 
   .file-buttons {
@@ -67,7 +75,8 @@
   .soft-wrap-toggle,
   .license-selector,
   .gitignore-selector,
-  .gitlab-ci-yml-selector {
+  .gitlab-ci-yml-selector,
+  .dockerfile-selector {
     display: inline-block;
     vertical-align: top;
     font-family: $regular_font;
@@ -97,7 +106,8 @@
 
   .gitignore-selector,
   .license-selector,
-  .gitlab-ci-yml-selector {
+  .gitlab-ci-yml-selector,
+  .dockerfile-selector {
     .dropdown {
       line-height: 21px;
     }
@@ -114,3 +124,42 @@
     }
   }
 }
+
+@media(max-width: $screen-xs-max){
+  .file-editor {
+    .file-title {
+      .pull-right {
+        height: auto;
+      }
+    }
+
+    .new-file-name {
+      max-width: none;
+      width: 100%;
+      margin-bottom: 3px;
+    }
+
+    .file-buttons {
+      display: block;
+      width: 100%;
+      margin-bottom: 10px;
+
+      .soft-wrap-toggle {
+        width: 100%;
+        margin: 3px 0;
+      }
+
+      .encoding-selector,
+      .license-selector,
+      .gitignore-selector,
+      .gitlab-ci-yml-selector {
+        display: block;
+        margin: 3px 0;
+
+        button {
+          width: 100%;
+        }
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/emojis.scss b/app/assets/stylesheets/pages/emojis.scss
deleted file mode 100644
index f17797b2381..00000000000
--- a/app/assets/stylesheets/pages/emojis.scss
+++ /dev/null
@@ -1,1809 +0,0 @@
-.emoji-0023-20E3 { background-position: 0 0px; }
-.emoji-002A-20E3 { background-position: -20px 0; }
-.emoji-0030-20E3 { background-position: 0 -20px; }
-.emoji-0031-20E3 { background-position: -20px -20px; }
-.emoji-0032-20E3 { background-position: -40px 0; }
-.emoji-0033-20E3 { background-position: -40px -20px; }
-.emoji-0034-20E3 { background-position: 0 -40px; }
-.emoji-0035-20E3 { background-position: -20px -40px; }
-.emoji-0036-20E3 { background-position: -40px -40px; }
-.emoji-0037-20E3 { background-position: -60px 0; }
-.emoji-0038-20E3 { background-position: -60px -20px; }
-.emoji-0039-20E3 { background-position: -60px -40px; }
-.emoji-00A9 { background-position: 0 -60px; }
-.emoji-00AE { background-position: -20px -60px; }
-.emoji-1F004 { background-position: -40px -60px; }
-.emoji-1F0CF { background-position: -60px -60px; }
-.emoji-1F170 { background-position: -80px 0; }
-.emoji-1F171 { background-position: -80px -20px; }
-.emoji-1F17E { background-position: -80px -40px; }
-.emoji-1F17F { background-position: -80px -60px; }
-.emoji-1F18E { background-position: 0 -80px; }
-.emoji-1F191 { background-position: -20px -80px; }
-.emoji-1F192 { background-position: -40px -80px; }
-.emoji-1F193 { background-position: -60px -80px; }
-.emoji-1F194 { background-position: -80px -80px; }
-.emoji-1F195 { background-position: -100px 0; }
-.emoji-1F196 { background-position: -100px -20px; }
-.emoji-1F197 { background-position: -100px -40px; }
-.emoji-1F198 { background-position: -100px -60px; }
-.emoji-1F199 { background-position: -100px -80px; }
-.emoji-1F19A { background-position: 0 -100px; }
-.emoji-1F1E6-1F1E8 { background-position: -20px -100px; }
-.emoji-1F1E6-1F1E9 { background-position: -40px -100px; }
-.emoji-1F1E6-1F1EA { background-position: -60px -100px; }
-.emoji-1F1E6-1F1EB { background-position: -80px -100px; }
-.emoji-1F1E6-1F1EC { background-position: -100px -100px; }
-.emoji-1F1E6-1F1EE { background-position: -120px 0; }
-.emoji-1F1E6-1F1F1 { background-position: -120px -20px; }
-.emoji-1F1E6-1F1F2 { background-position: -120px -40px; }
-.emoji-1F1E6-1F1F4 { background-position: -120px -60px; }
-.emoji-1F1E6-1F1F6 { background-position: -120px -80px; }
-.emoji-1F1E6-1F1F7 { background-position: -120px -100px; }
-.emoji-1F1E6-1F1F8 { background-position: 0 -120px; }
-.emoji-1F1E6-1F1F9 { background-position: -20px -120px; }
-.emoji-1F1E6-1F1FA { background-position: -40px -120px; }
-.emoji-1F1E6-1F1FC { background-position: -60px -120px; }
-.emoji-1F1E6-1F1FD { background-position: -80px -120px; }
-.emoji-1F1E6-1F1FF { background-position: -100px -120px; }
-.emoji-1F1E7-1F1E6 { background-position: -120px -120px; }
-.emoji-1F1E7-1F1E7 { background-position: -140px 0; }
-.emoji-1F1E7-1F1E9 { background-position: -140px -20px; }
-.emoji-1F1E7-1F1EA { background-position: -140px -40px; }
-.emoji-1F1E7-1F1EB { background-position: -140px -60px; }
-.emoji-1F1E7-1F1EC { background-position: -140px -80px; }
-.emoji-1F1E7-1F1ED { background-position: -140px -100px; }
-.emoji-1F1E7-1F1EE { background-position: -140px -120px; }
-.emoji-1F1E7-1F1EF { background-position: 0 -140px; }
-.emoji-1F1E7-1F1F1 { background-position: -20px -140px; }
-.emoji-1F1E7-1F1F2 { background-position: -40px -140px; }
-.emoji-1F1E7-1F1F3 { background-position: -60px -140px; }
-.emoji-1F1E7-1F1F4 { background-position: -80px -140px; }
-.emoji-1F1E7-1F1F6 { background-position: -100px -140px; }
-.emoji-1F1E7-1F1F7 { background-position: -120px -140px; }
-.emoji-1F1E7-1F1F8 { background-position: -140px -140px; }
-.emoji-1F1E7-1F1F9 { background-position: -160px 0; }
-.emoji-1F1E7-1F1FB { background-position: -160px -20px; }
-.emoji-1F1E7-1F1FC { background-position: -160px -40px; }
-.emoji-1F1E7-1F1FE { background-position: -160px -60px; }
-.emoji-1F1E7-1F1FF { background-position: -160px -80px; }
-.emoji-1F1E8-1F1E6 { background-position: -160px -100px; }
-.emoji-1F1E8-1F1E8 { background-position: -160px -120px; }
-.emoji-1F1E8-1F1E9 { background-position: -160px -140px; }
-.emoji-1F1E8-1F1EB { background-position: 0 -160px; }
-.emoji-1F1E8-1F1EC { background-position: -20px -160px; }
-.emoji-1F1E8-1F1ED { background-position: -40px -160px; }
-.emoji-1F1E8-1F1EE { background-position: -60px -160px; }
-.emoji-1F1E8-1F1F0 { background-position: -80px -160px; }
-.emoji-1F1E8-1F1F1 { background-position: -100px -160px; }
-.emoji-1F1E8-1F1F2 { background-position: -120px -160px; }
-.emoji-1F1E8-1F1F3 { background-position: -140px -160px; }
-.emoji-1F1E8-1F1F4 { background-position: -160px -160px; }
-.emoji-1F1E8-1F1F5 { background-position: -180px 0; }
-.emoji-1F1E8-1F1F7 { background-position: -180px -20px; }
-.emoji-1F1E8-1F1FA { background-position: -180px -40px; }
-.emoji-1F1E8-1F1FB { background-position: -180px -60px; }
-.emoji-1F1E8-1F1FC { background-position: -180px -80px; }
-.emoji-1F1E8-1F1FD { background-position: -180px -100px; }
-.emoji-1F1E8-1F1FE { background-position: -180px -120px; }
-.emoji-1F1E8-1F1FF { background-position: -180px -140px; }
-.emoji-1F1E9-1F1EA { background-position: -180px -160px; }
-.emoji-1F1E9-1F1EC { background-position: 0 -180px; }
-.emoji-1F1E9-1F1EF { background-position: -20px -180px; }
-.emoji-1F1E9-1F1F0 { background-position: -40px -180px; }
-.emoji-1F1E9-1F1F2 { background-position: -60px -180px; }
-.emoji-1F1E9-1F1F4 { background-position: -80px -180px; }
-.emoji-1F1E9-1F1FF { background-position: -100px -180px; }
-.emoji-1F1EA-1F1E6 { background-position: -120px -180px; }
-.emoji-1F1EA-1F1E8 { background-position: -140px -180px; }
-.emoji-1F1EA-1F1EA { background-position: -160px -180px; }
-.emoji-1F1EA-1F1EC { background-position: -180px -180px; }
-.emoji-1F1EA-1F1ED { background-position: -200px 0; }
-.emoji-1F1EA-1F1F7 { background-position: -200px -20px; }
-.emoji-1F1EA-1F1F8 { background-position: -200px -40px; }
-.emoji-1F1EA-1F1F9 { background-position: -200px -60px; }
-.emoji-1F1EA-1F1FA { background-position: -200px -80px; }
-.emoji-1F1EB-1F1EE { background-position: -200px -100px; }
-.emoji-1F1EB-1F1EF { background-position: -200px -120px; }
-.emoji-1F1EB-1F1F0 { background-position: -200px -140px; }
-.emoji-1F1EB-1F1F2 { background-position: -200px -160px; }
-.emoji-1F1EB-1F1F4 { background-position: -200px -180px; }
-.emoji-1F1EB-1F1F7 { background-position: 0 -200px; }
-.emoji-1F1EC-1F1E6 { background-position: -20px -200px; }
-.emoji-1F1EC-1F1E7 { background-position: -40px -200px; }
-.emoji-1F1EC-1F1E9 { background-position: -60px -200px; }
-.emoji-1F1EC-1F1EA { background-position: -80px -200px; }
-.emoji-1F1EC-1F1EB { background-position: -100px -200px; }
-.emoji-1F1EC-1F1EC { background-position: -120px -200px; }
-.emoji-1F1EC-1F1ED { background-position: -140px -200px; }
-.emoji-1F1EC-1F1EE { background-position: -160px -200px; }
-.emoji-1F1EC-1F1F1 { background-position: -180px -200px; }
-.emoji-1F1EC-1F1F2 { background-position: -200px -200px; }
-.emoji-1F1EC-1F1F3 { background-position: -220px 0; }
-.emoji-1F1EC-1F1F5 { background-position: -220px -20px; }
-.emoji-1F1EC-1F1F6 { background-position: -220px -40px; }
-.emoji-1F1EC-1F1F7 { background-position: -220px -60px; }
-.emoji-1F1EC-1F1F8 { background-position: -220px -80px; }
-.emoji-1F1EC-1F1F9 { background-position: -220px -100px; }
-.emoji-1F1EC-1F1FA { background-position: -220px -120px; }
-.emoji-1F1EC-1F1FC { background-position: -220px -140px; }
-.emoji-1F1EC-1F1FE { background-position: -220px -160px; }
-.emoji-1F1ED-1F1F0 { background-position: -220px -180px; }
-.emoji-1F1ED-1F1F2 { background-position: -220px -200px; }
-.emoji-1F1ED-1F1F3 { background-position: 0 -220px; }
-.emoji-1F1ED-1F1F7 { background-position: -20px -220px; }
-.emoji-1F1ED-1F1F9 { background-position: -40px -220px; }
-.emoji-1F1ED-1F1FA { background-position: -60px -220px; }
-.emoji-1F1EE-1F1E8 { background-position: -80px -220px; }
-.emoji-1F1EE-1F1E9 { background-position: -100px -220px; }
-.emoji-1F1EE-1F1EA { background-position: -120px -220px; }
-.emoji-1F1EE-1F1F1 { background-position: -140px -220px; }
-.emoji-1F1EE-1F1F2 { background-position: -160px -220px; }
-.emoji-1F1EE-1F1F3 { background-position: -180px -220px; }
-.emoji-1F1EE-1F1F4 { background-position: -200px -220px; }
-.emoji-1F1EE-1F1F6 { background-position: -220px -220px; }
-.emoji-1F1EE-1F1F7 { background-position: -240px 0; }
-.emoji-1F1EE-1F1F8 { background-position: -240px -20px; }
-.emoji-1F1EE-1F1F9 { background-position: -240px -40px; }
-.emoji-1F1EF-1F1EA { background-position: -240px -60px; }
-.emoji-1F1EF-1F1F2 { background-position: -240px -80px; }
-.emoji-1F1EF-1F1F4 { background-position: -240px -100px; }
-.emoji-1F1EF-1F1F5 { background-position: -240px -120px; }
-.emoji-1F1F0-1F1EA { background-position: -240px -140px; }
-.emoji-1F1F0-1F1EC { background-position: -240px -160px; }
-.emoji-1F1F0-1F1ED { background-position: -240px -180px; }
-.emoji-1F1F0-1F1EE { background-position: -240px -200px; }
-.emoji-1F1F0-1F1F2 { background-position: -240px -220px; }
-.emoji-1F1F0-1F1F3 { background-position: 0 -240px; }
-.emoji-1F1F0-1F1F5 { background-position: -20px -240px; }
-.emoji-1F1F0-1F1F7 { background-position: -40px -240px; }
-.emoji-1F1F0-1F1FC { background-position: -60px -240px; }
-.emoji-1F1F0-1F1FE { background-position: -80px -240px; }
-.emoji-1F1F0-1F1FF { background-position: -100px -240px; }
-.emoji-1F1F1-1F1E6 { background-position: -120px -240px; }
-.emoji-1F1F1-1F1E7 { background-position: -140px -240px; }
-.emoji-1F1F1-1F1E8 { background-position: -160px -240px; }
-.emoji-1F1F1-1F1EE { background-position: -180px -240px; }
-.emoji-1F1F1-1F1F0 { background-position: -200px -240px; }
-.emoji-1F1F1-1F1F7 { background-position: -220px -240px; }
-.emoji-1F1F1-1F1F8 { background-position: -240px -240px; }
-.emoji-1F1F1-1F1F9 { background-position: -260px 0; }
-.emoji-1F1F1-1F1FA { background-position: -260px -20px; }
-.emoji-1F1F1-1F1FB { background-position: -260px -40px; }
-.emoji-1F1F1-1F1FE { background-position: -260px -60px; }
-.emoji-1F1F2-1F1E6 { background-position: -260px -80px; }
-.emoji-1F1F2-1F1E8 { background-position: -260px -100px; }
-.emoji-1F1F2-1F1E9 { background-position: -260px -120px; }
-.emoji-1F1F2-1F1EA { background-position: -260px -140px; }
-.emoji-1F1F2-1F1EB { background-position: -260px -160px; }
-.emoji-1F1F2-1F1EC { background-position: -260px -180px; }
-.emoji-1F1F2-1F1ED { background-position: -260px -200px; }
-.emoji-1F1F2-1F1F0 { background-position: -260px -220px; }
-.emoji-1F1F2-1F1F1 { background-position: -260px -240px; }
-.emoji-1F1F2-1F1F2 { background-position: 0 -260px; }
-.emoji-1F1F2-1F1F3 { background-position: -20px -260px; }
-.emoji-1F1F2-1F1F4 { background-position: -40px -260px; }
-.emoji-1F1F2-1F1F5 { background-position: -60px -260px; }
-.emoji-1F1F2-1F1F6 { background-position: -80px -260px; }
-.emoji-1F1F2-1F1F7 { background-position: -100px -260px; }
-.emoji-1F1F2-1F1F8 { background-position: -120px -260px; }
-.emoji-1F1F2-1F1F9 { background-position: -140px -260px; }
-.emoji-1F1F2-1F1FA { background-position: -160px -260px; }
-.emoji-1F1F2-1F1FB { background-position: -180px -260px; }
-.emoji-1F1F2-1F1FC { background-position: -200px -260px; }
-.emoji-1F1F2-1F1FD { background-position: -220px -260px; }
-.emoji-1F1F2-1F1FE { background-position: -240px -260px; }
-.emoji-1F1F2-1F1FF { background-position: -260px -260px; }
-.emoji-1F1F3-1F1E6 { background-position: -280px 0; }
-.emoji-1F1F3-1F1E8 { background-position: -280px -20px; }
-.emoji-1F1F3-1F1EA { background-position: -280px -40px; }
-.emoji-1F1F3-1F1EB { background-position: -280px -60px; }
-.emoji-1F1F3-1F1EC { background-position: -280px -80px; }
-.emoji-1F1F3-1F1EE { background-position: -280px -100px; }
-.emoji-1F1F3-1F1F1 { background-position: -280px -120px; }
-.emoji-1F1F3-1F1F4 { background-position: -280px -140px; }
-.emoji-1F1F3-1F1F5 { background-position: -280px -160px; }
-.emoji-1F1F3-1F1F7 { background-position: -280px -180px; }
-.emoji-1F1F3-1F1FA { background-position: -280px -200px; }
-.emoji-1F1F3-1F1FF { background-position: -280px -220px; }
-.emoji-1F1F4-1F1F2 { background-position: -280px -240px; }
-.emoji-1F1F5-1F1E6 { background-position: -280px -260px; }
-.emoji-1F1F5-1F1EA { background-position: 0 -280px; }
-.emoji-1F1F5-1F1EB { background-position: -20px -280px; }
-.emoji-1F1F5-1F1EC { background-position: -40px -280px; }
-.emoji-1F1F5-1F1ED { background-position: -60px -280px; }
-.emoji-1F1F5-1F1F0 { background-position: -80px -280px; }
-.emoji-1F1F5-1F1F1 { background-position: -100px -280px; }
-.emoji-1F1F5-1F1F2 { background-position: -120px -280px; }
-.emoji-1F1F5-1F1F3 { background-position: -140px -280px; }
-.emoji-1F1F5-1F1F7 { background-position: -160px -280px; }
-.emoji-1F1F5-1F1F8 { background-position: -180px -280px; }
-.emoji-1F1F5-1F1F9 { background-position: -200px -280px; }
-.emoji-1F1F5-1F1FC { background-position: -220px -280px; }
-.emoji-1F1F5-1F1FE { background-position: -240px -280px; }
-.emoji-1F1F6-1F1E6 { background-position: -260px -280px; }
-.emoji-1F1F7-1F1EA { background-position: -280px -280px; }
-.emoji-1F1F7-1F1F4 { background-position: -300px 0; }
-.emoji-1F1F7-1F1F8 { background-position: -300px -20px; }
-.emoji-1F1F7-1F1FA { background-position: -300px -40px; }
-.emoji-1F1F7-1F1FC { background-position: -300px -60px; }
-.emoji-1F1F8-1F1E6 { background-position: -300px -80px; }
-.emoji-1F1F8-1F1E7 { background-position: -300px -100px; }
-.emoji-1F1F8-1F1E8 { background-position: -300px -120px; }
-.emoji-1F1F8-1F1E9 { background-position: -300px -140px; }
-.emoji-1F1F8-1F1EA { background-position: -300px -160px; }
-.emoji-1F1F8-1F1EC { background-position: -300px -180px; }
-.emoji-1F1F8-1F1ED { background-position: -300px -200px; }
-.emoji-1F1F8-1F1EE { background-position: -300px -220px; }
-.emoji-1F1F8-1F1EF { background-position: -300px -240px; }
-.emoji-1F1F8-1F1F0 { background-position: -300px -260px; }
-.emoji-1F1F8-1F1F1 { background-position: -300px -280px; }
-.emoji-1F1F8-1F1F2 { background-position: 0 -300px; }
-.emoji-1F1F8-1F1F3 { background-position: -20px -300px; }
-.emoji-1F1F8-1F1F4 { background-position: -40px -300px; }
-.emoji-1F1F8-1F1F7 { background-position: -60px -300px; }
-.emoji-1F1F8-1F1F8 { background-position: -80px -300px; }
-.emoji-1F1F8-1F1F9 { background-position: -100px -300px; }
-.emoji-1F1F8-1F1FB { background-position: -120px -300px; }
-.emoji-1F1F8-1F1FD { background-position: -140px -300px; }
-.emoji-1F1F8-1F1FE { background-position: -160px -300px; }
-.emoji-1F1F8-1F1FF { background-position: -180px -300px; }
-.emoji-1F1F9-1F1E6 { background-position: -200px -300px; }
-.emoji-1F1F9-1F1E8 { background-position: -220px -300px; }
-.emoji-1F1F9-1F1E9 { background-position: -240px -300px; }
-.emoji-1F1F9-1F1EB { background-position: -260px -300px; }
-.emoji-1F1F9-1F1EC { background-position: -280px -300px; }
-.emoji-1F1F9-1F1ED { background-position: -300px -300px; }
-.emoji-1F1F9-1F1EF { background-position: -320px 0; }
-.emoji-1F1F9-1F1F0 { background-position: -320px -20px; }
-.emoji-1F1F9-1F1F1 { background-position: -320px -40px; }
-.emoji-1F1F9-1F1F2 { background-position: -320px -60px; }
-.emoji-1F1F9-1F1F3 { background-position: -320px -80px; }
-.emoji-1F1F9-1F1F4 { background-position: -320px -100px; }
-.emoji-1F1F9-1F1F7 { background-position: -320px -120px; }
-.emoji-1F1F9-1F1F9 { background-position: -320px -140px; }
-.emoji-1F1F9-1F1FB { background-position: -320px -160px; }
-.emoji-1F1F9-1F1FC { background-position: -320px -180px; }
-.emoji-1F1F9-1F1FF { background-position: -320px -200px; }
-.emoji-1F1FA-1F1E6 { background-position: -320px -220px; }
-.emoji-1F1FA-1F1EC { background-position: -320px -240px; }
-.emoji-1F1FA-1F1F2 { background-position: -320px -260px; }
-.emoji-1F1FA-1F1F8 { background-position: -320px -280px; }
-.emoji-1F1FA-1F1FE { background-position: -320px -300px; }
-.emoji-1F1FA-1F1FF { background-position: 0 -320px; }
-.emoji-1F1FB-1F1E6 { background-position: -20px -320px; }
-.emoji-1F1FB-1F1E8 { background-position: -40px -320px; }
-.emoji-1F1FB-1F1EA { background-position: -60px -320px; }
-.emoji-1F1FB-1F1EC { background-position: -80px -320px; }
-.emoji-1F1FB-1F1EE { background-position: -100px -320px; }
-.emoji-1F1FB-1F1F3 { background-position: -120px -320px; }
-.emoji-1F1FB-1F1FA { background-position: -140px -320px; }
-.emoji-1F1FC-1F1EB { background-position: -160px -320px; }
-.emoji-1F1FC-1F1F8 { background-position: -180px -320px; }
-.emoji-1F1FD-1F1F0 { background-position: -200px -320px; }
-.emoji-1F1FE-1F1EA { background-position: -220px -320px; }
-.emoji-1F1FE-1F1F9 { background-position: -240px -320px; }
-.emoji-1F1FF-1F1E6 { background-position: -260px -320px; }
-.emoji-1F1FF-1F1F2 { background-position: -280px -320px; }
-.emoji-1F1FF-1F1FC { background-position: -300px -320px; }
-.emoji-1F201 { background-position: -320px -320px; }
-.emoji-1F202 { background-position: -340px 0; }
-.emoji-1F21A { background-position: -340px -20px; }
-.emoji-1F22F { background-position: -340px -40px; }
-.emoji-1F232 { background-position: -340px -60px; }
-.emoji-1F233 { background-position: -340px -80px; }
-.emoji-1F234 { background-position: -340px -100px; }
-.emoji-1F235 { background-position: -340px -120px; }
-.emoji-1F236 { background-position: -340px -140px; }
-.emoji-1F237 { background-position: -340px -160px; }
-.emoji-1F238 { background-position: -340px -180px; }
-.emoji-1F239 { background-position: -340px -200px; }
-.emoji-1F23A { background-position: -340px -220px; }
-.emoji-1F250 { background-position: -340px -240px; }
-.emoji-1F251 { background-position: -340px -260px; }
-.emoji-1F300 { background-position: -340px -280px; }
-.emoji-1F301 { background-position: -340px -300px; }
-.emoji-1F302 { background-position: -340px -320px; }
-.emoji-1F303 { background-position: 0 -340px; }
-.emoji-1F304 { background-position: -20px -340px; }
-.emoji-1F305 { background-position: -40px -340px; }
-.emoji-1F306 { background-position: -60px -340px; }
-.emoji-1F307 { background-position: -80px -340px; }
-.emoji-1F308 { background-position: -100px -340px; }
-.emoji-1F309 { background-position: -120px -340px; }
-.emoji-1F30A { background-position: -140px -340px; }
-.emoji-1F30B { background-position: -160px -340px; }
-.emoji-1F30C { background-position: -180px -340px; }
-.emoji-1F30D { background-position: -200px -340px; }
-.emoji-1F30E { background-position: -220px -340px; }
-.emoji-1F30F { background-position: -240px -340px; }
-.emoji-1F310 { background-position: -260px -340px; }
-.emoji-1F311 { background-position: -280px -340px; }
-.emoji-1F312 { background-position: -300px -340px; }
-.emoji-1F313 { background-position: -320px -340px; }
-.emoji-1F314 { background-position: -340px -340px; }
-.emoji-1F315 { background-position: -360px 0; }
-.emoji-1F316 { background-position: -360px -20px; }
-.emoji-1F317 { background-position: -360px -40px; }
-.emoji-1F318 { background-position: -360px -60px; }
-.emoji-1F319 { background-position: -360px -80px; }
-.emoji-1F31A { background-position: -360px -100px; }
-.emoji-1F31B { background-position: -360px -120px; }
-.emoji-1F31C { background-position: -360px -140px; }
-.emoji-1F31D { background-position: -360px -160px; }
-.emoji-1F31E { background-position: -360px -180px; }
-.emoji-1F31F { background-position: -360px -200px; }
-.emoji-1F320 { background-position: -360px -220px; }
-.emoji-1F321 { background-position: -360px -240px; }
-.emoji-1F324 { background-position: -360px -260px; }
-.emoji-1F325 { background-position: -360px -280px; }
-.emoji-1F326 { background-position: -360px -300px; }
-.emoji-1F327 { background-position: -360px -320px; }
-.emoji-1F328 { background-position: -360px -340px; }
-.emoji-1F329 { background-position: 0 -360px; }
-.emoji-1F32A { background-position: -20px -360px; }
-.emoji-1F32B { background-position: -40px -360px; }
-.emoji-1F32C { background-position: -60px -360px; }
-.emoji-1F32D { background-position: -80px -360px; }
-.emoji-1F32E { background-position: -100px -360px; }
-.emoji-1F32F { background-position: -120px -360px; }
-.emoji-1F330 { background-position: -140px -360px; }
-.emoji-1F331 { background-position: -160px -360px; }
-.emoji-1F332 { background-position: -180px -360px; }
-.emoji-1F333 { background-position: -200px -360px; }
-.emoji-1F334 { background-position: -220px -360px; }
-.emoji-1F335 { background-position: -240px -360px; }
-.emoji-1F336 { background-position: -260px -360px; }
-.emoji-1F337 { background-position: -280px -360px; }
-.emoji-1F338 { background-position: -300px -360px; }
-.emoji-1F339 { background-position: -320px -360px; }
-.emoji-1F33A { background-position: -340px -360px; }
-.emoji-1F33B { background-position: -360px -360px; }
-.emoji-1F33C { background-position: -380px 0; }
-.emoji-1F33D { background-position: -380px -20px; }
-.emoji-1F33E { background-position: -380px -40px; }
-.emoji-1F33F { background-position: -380px -60px; }
-.emoji-1F340 { background-position: -380px -80px; }
-.emoji-1F341 { background-position: -380px -100px; }
-.emoji-1F342 { background-position: -380px -120px; }
-.emoji-1F343 { background-position: -380px -140px; }
-.emoji-1F344 { background-position: -380px -160px; }
-.emoji-1F345 { background-position: -380px -180px; }
-.emoji-1F346 { background-position: -380px -200px; }
-.emoji-1F347 { background-position: -380px -220px; }
-.emoji-1F348 { background-position: -380px -240px; }
-.emoji-1F349 { background-position: -380px -260px; }
-.emoji-1F34A { background-position: -380px -280px; }
-.emoji-1F34B { background-position: -380px -300px; }
-.emoji-1F34C { background-position: -380px -320px; }
-.emoji-1F34D { background-position: -380px -340px; }
-.emoji-1F34E { background-position: -380px -360px; }
-.emoji-1F34F { background-position: 0 -380px; }
-.emoji-1F350 { background-position: -20px -380px; }
-.emoji-1F351 { background-position: -40px -380px; }
-.emoji-1F352 { background-position: -60px -380px; }
-.emoji-1F353 { background-position: -80px -380px; }
-.emoji-1F354 { background-position: -100px -380px; }
-.emoji-1F355 { background-position: -120px -380px; }
-.emoji-1F356 { background-position: -140px -380px; }
-.emoji-1F357 { background-position: -160px -380px; }
-.emoji-1F358 { background-position: -180px -380px; }
-.emoji-1F359 { background-position: -200px -380px; }
-.emoji-1F35A { background-position: -220px -380px; }
-.emoji-1F35B { background-position: -240px -380px; }
-.emoji-1F35C { background-position: -260px -380px; }
-.emoji-1F35D { background-position: -280px -380px; }
-.emoji-1F35E { background-position: -300px -380px; }
-.emoji-1F35F { background-position: -320px -380px; }
-.emoji-1F360 { background-position: -340px -380px; }
-.emoji-1F361 { background-position: -360px -380px; }
-.emoji-1F362 { background-position: -380px -380px; }
-.emoji-1F363 { background-position: -400px 0; }
-.emoji-1F364 { background-position: -400px -20px; }
-.emoji-1F365 { background-position: -400px -40px; }
-.emoji-1F366 { background-position: -400px -60px; }
-.emoji-1F367 { background-position: -400px -80px; }
-.emoji-1F368 { background-position: -400px -100px; }
-.emoji-1F369 { background-position: -400px -120px; }
-.emoji-1F36A { background-position: -400px -140px; }
-.emoji-1F36B { background-position: -400px -160px; }
-.emoji-1F36C { background-position: -400px -180px; }
-.emoji-1F36D { background-position: -400px -200px; }
-.emoji-1F36E { background-position: -400px -220px; }
-.emoji-1F36F { background-position: -400px -240px; }
-.emoji-1F370 { background-position: -400px -260px; }
-.emoji-1F371 { background-position: -400px -280px; }
-.emoji-1F372 { background-position: -400px -300px; }
-.emoji-1F373 { background-position: -400px -320px; }
-.emoji-1F374 { background-position: -400px -340px; }
-.emoji-1F375 { background-position: -400px -360px; }
-.emoji-1F376 { background-position: -400px -380px; }
-.emoji-1F377 { background-position: 0 -400px; }
-.emoji-1F378 { background-position: -20px -400px; }
-.emoji-1F379 { background-position: -40px -400px; }
-.emoji-1F37A { background-position: -60px -400px; }
-.emoji-1F37B { background-position: -80px -400px; }
-.emoji-1F37C { background-position: -100px -400px; }
-.emoji-1F37D { background-position: -120px -400px; }
-.emoji-1F37E { background-position: -140px -400px; }
-.emoji-1F37F { background-position: -160px -400px; }
-.emoji-1F380 { background-position: -180px -400px; }
-.emoji-1F381 { background-position: -200px -400px; }
-.emoji-1F382 { background-position: -220px -400px; }
-.emoji-1F383 { background-position: -240px -400px; }
-.emoji-1F384 { background-position: -260px -400px; }
-.emoji-1F385 { background-position: -280px -400px; }
-.emoji-1F385-1F3FB { background-position: -300px -400px; }
-.emoji-1F385-1F3FC { background-position: -320px -400px; }
-.emoji-1F385-1F3FD { background-position: -340px -400px; }
-.emoji-1F385-1F3FE { background-position: -360px -400px; }
-.emoji-1F385-1F3FF { background-position: -380px -400px; }
-.emoji-1F386 { background-position: -400px -400px; }
-.emoji-1F387 { background-position: -420px 0; }
-.emoji-1F388 { background-position: -420px -20px; }
-.emoji-1F389 { background-position: -420px -40px; }
-.emoji-1F38A { background-position: -420px -60px; }
-.emoji-1F38B { background-position: -420px -80px; }
-.emoji-1F38C { background-position: -420px -100px; }
-.emoji-1F38D { background-position: -420px -120px; }
-.emoji-1F38E { background-position: -420px -140px; }
-.emoji-1F38F { background-position: -420px -160px; }
-.emoji-1F390 { background-position: -420px -180px; }
-.emoji-1F391 { background-position: -420px -200px; }
-.emoji-1F392 { background-position: -420px -220px; }
-.emoji-1F393 { background-position: -420px -240px; }
-.emoji-1F396 { background-position: -420px -260px; }
-.emoji-1F397 { background-position: -420px -280px; }
-.emoji-1F399 { background-position: -420px -300px; }
-.emoji-1F39A { background-position: -420px -320px; }
-.emoji-1F39B { background-position: -420px -340px; }
-.emoji-1F39E { background-position: -420px -360px; }
-.emoji-1F39F { background-position: -420px -380px; }
-.emoji-1F3A0 { background-position: -420px -400px; }
-.emoji-1F3A1 { background-position: 0 -420px; }
-.emoji-1F3A2 { background-position: -20px -420px; }
-.emoji-1F3A3 { background-position: -40px -420px; }
-.emoji-1F3A4 { background-position: -60px -420px; }
-.emoji-1F3A5 { background-position: -80px -420px; }
-.emoji-1F3A6 { background-position: -100px -420px; }
-.emoji-1F3A7 { background-position: -120px -420px; }
-.emoji-1F3A8 { background-position: -140px -420px; }
-.emoji-1F3A9 { background-position: -160px -420px; }
-.emoji-1F3AA { background-position: -180px -420px; }
-.emoji-1F3AB { background-position: -200px -420px; }
-.emoji-1F3AC { background-position: -220px -420px; }
-.emoji-1F3AD { background-position: -240px -420px; }
-.emoji-1F3AE { background-position: -260px -420px; }
-.emoji-1F3AF { background-position: -280px -420px; }
-.emoji-1F3B0 { background-position: -300px -420px; }
-.emoji-1F3B1 { background-position: -320px -420px; }
-.emoji-1F3B2 { background-position: -340px -420px; }
-.emoji-1F3B3 { background-position: -360px -420px; }
-.emoji-1F3B4 { background-position: -380px -420px; }
-.emoji-1F3B5 { background-position: -400px -420px; }
-.emoji-1F3B6 { background-position: -420px -420px; }
-.emoji-1F3B7 { background-position: -440px 0; }
-.emoji-1F3B8 { background-position: -440px -20px; }
-.emoji-1F3B9 { background-position: -440px -40px; }
-.emoji-1F3BA { background-position: -440px -60px; }
-.emoji-1F3BB { background-position: -440px -80px; }
-.emoji-1F3BC { background-position: -440px -100px; }
-.emoji-1F3BD { background-position: -440px -120px; }
-.emoji-1F3BE { background-position: -440px -140px; }
-.emoji-1F3BF { background-position: -440px -160px; }
-.emoji-1F3C0 { background-position: -440px -180px; }
-.emoji-1F3C1 { background-position: -440px -200px; }
-.emoji-1F3C2 { background-position: -440px -220px; }
-.emoji-1F3C3 { background-position: -440px -240px; }
-.emoji-1F3C3-1F3FB { background-position: -440px -260px; }
-.emoji-1F3C3-1F3FC { background-position: -440px -280px; }
-.emoji-1F3C3-1F3FD { background-position: -440px -300px; }
-.emoji-1F3C3-1F3FE { background-position: -440px -320px; }
-.emoji-1F3C3-1F3FF { background-position: -440px -340px; }
-.emoji-1F3C4 { background-position: -440px -360px; }
-.emoji-1F3C4-1F3FB { background-position: -440px -380px; }
-.emoji-1F3C4-1F3FC { background-position: -440px -400px; }
-.emoji-1F3C4-1F3FD { background-position: -440px -420px; }
-.emoji-1F3C4-1F3FE { background-position: 0 -440px; }
-.emoji-1F3C4-1F3FF { background-position: -20px -440px; }
-.emoji-1F3C5 { background-position: -40px -440px; }
-.emoji-1F3C6 { background-position: -60px -440px; }
-.emoji-1F3C7 { background-position: -80px -440px; }
-.emoji-1F3C7-1F3FB { background-position: -100px -440px; }
-.emoji-1F3C7-1F3FC { background-position: -120px -440px; }
-.emoji-1F3C7-1F3FD { background-position: -140px -440px; }
-.emoji-1F3C7-1F3FE { background-position: -160px -440px; }
-.emoji-1F3C7-1F3FF { background-position: -180px -440px; }
-.emoji-1F3C8 { background-position: -200px -440px; }
-.emoji-1F3C9 { background-position: -220px -440px; }
-.emoji-1F3CA { background-position: -240px -440px; }
-.emoji-1F3CA-1F3FB { background-position: -260px -440px; }
-.emoji-1F3CA-1F3FC { background-position: -280px -440px; }
-.emoji-1F3CA-1F3FD { background-position: -300px -440px; }
-.emoji-1F3CA-1F3FE { background-position: -320px -440px; }
-.emoji-1F3CA-1F3FF { background-position: -340px -440px; }
-.emoji-1F3CB { background-position: -360px -440px; }
-.emoji-1F3CB-1F3FB { background-position: -380px -440px; }
-.emoji-1F3CB-1F3FC { background-position: -400px -440px; }
-.emoji-1F3CB-1F3FD { background-position: -420px -440px; }
-.emoji-1F3CB-1F3FE { background-position: -440px -440px; }
-.emoji-1F3CB-1F3FF { background-position: -460px 0; }
-.emoji-1F3CC { background-position: -460px -20px; }
-.emoji-1F3CD { background-position: -460px -40px; }
-.emoji-1F3CE { background-position: -460px -60px; }
-.emoji-1F3CF { background-position: -460px -80px; }
-.emoji-1F3D0 { background-position: -460px -100px; }
-.emoji-1F3D1 { background-position: -460px -120px; }
-.emoji-1F3D2 { background-position: -460px -140px; }
-.emoji-1F3D3 { background-position: -460px -160px; }
-.emoji-1F3D4 { background-position: -460px -180px; }
-.emoji-1F3D5 { background-position: -460px -200px; }
-.emoji-1F3D6 { background-position: -460px -220px; }
-.emoji-1F3D7 { background-position: -460px -240px; }
-.emoji-1F3D8 { background-position: -460px -260px; }
-.emoji-1F3D9 { background-position: -460px -280px; }
-.emoji-1F3DA { background-position: -460px -300px; }
-.emoji-1F3DB { background-position: -460px -320px; }
-.emoji-1F3DC { background-position: -460px -340px; }
-.emoji-1F3DD { background-position: -460px -360px; }
-.emoji-1F3DE { background-position: -460px -380px; }
-.emoji-1F3DF { background-position: -460px -400px; }
-.emoji-1F3E0 { background-position: -460px -420px; }
-.emoji-1F3E1 { background-position: -460px -440px; }
-.emoji-1F3E2 { background-position: 0 -460px; }
-.emoji-1F3E3 { background-position: -20px -460px; }
-.emoji-1F3E4 { background-position: -40px -460px; }
-.emoji-1F3E5 { background-position: -60px -460px; }
-.emoji-1F3E6 { background-position: -80px -460px; }
-.emoji-1F3E7 { background-position: -100px -460px; }
-.emoji-1F3E8 { background-position: -120px -460px; }
-.emoji-1F3E9 { background-position: -140px -460px; }
-.emoji-1F3EA { background-position: -160px -460px; }
-.emoji-1F3EB { background-position: -180px -460px; }
-.emoji-1F3EC { background-position: -200px -460px; }
-.emoji-1F3ED { background-position: -220px -460px; }
-.emoji-1F3EE { background-position: -240px -460px; }
-.emoji-1F3EF { background-position: -260px -460px; }
-.emoji-1F3F0 { background-position: -280px -460px; }
-.emoji-1F3F3 { background-position: -300px -460px; }
-.emoji-1F3F4 { background-position: -320px -460px; }
-.emoji-1F3F5 { background-position: -340px -460px; }
-.emoji-1F3F7 { background-position: -360px -460px; }
-.emoji-1F3F8 { background-position: -380px -460px; }
-.emoji-1F3F9 { background-position: -400px -460px; }
-.emoji-1F3FA { background-position: -420px -460px; }
-.emoji-1F3FB { background-position: -440px -460px; }
-.emoji-1F3FC { background-position: -460px -460px; }
-.emoji-1F3FD { background-position: -480px 0; }
-.emoji-1F3FE { background-position: -480px -20px; }
-.emoji-1F3FF { background-position: -480px -40px; }
-.emoji-1F400 { background-position: -480px -60px; }
-.emoji-1F401 { background-position: -480px -80px; }
-.emoji-1F402 { background-position: -480px -100px; }
-.emoji-1F403 { background-position: -480px -120px; }
-.emoji-1F404 { background-position: -480px -140px; }
-.emoji-1F405 { background-position: -480px -160px; }
-.emoji-1F406 { background-position: -480px -180px; }
-.emoji-1F407 { background-position: -480px -200px; }
-.emoji-1F408 { background-position: -480px -220px; }
-.emoji-1F409 { background-position: -480px -240px; }
-.emoji-1F40A { background-position: -480px -260px; }
-.emoji-1F40B { background-position: -480px -280px; }
-.emoji-1F40C { background-position: -480px -300px; }
-.emoji-1F40D { background-position: -480px -320px; }
-.emoji-1F40E { background-position: -480px -340px; }
-.emoji-1F40F { background-position: -480px -360px; }
-.emoji-1F410 { background-position: -480px -380px; }
-.emoji-1F411 { background-position: -480px -400px; }
-.emoji-1F412 { background-position: -480px -420px; }
-.emoji-1F413 { background-position: -480px -440px; }
-.emoji-1F414 { background-position: -480px -460px; }
-.emoji-1F415 { background-position: 0 -480px; }
-.emoji-1F416 { background-position: -20px -480px; }
-.emoji-1F417 { background-position: -40px -480px; }
-.emoji-1F418 { background-position: -60px -480px; }
-.emoji-1F419 { background-position: -80px -480px; }
-.emoji-1F41A { background-position: -100px -480px; }
-.emoji-1F41B { background-position: -120px -480px; }
-.emoji-1F41C { background-position: -140px -480px; }
-.emoji-1F41D { background-position: -160px -480px; }
-.emoji-1F41E { background-position: -180px -480px; }
-.emoji-1F41F { background-position: -200px -480px; }
-.emoji-1F420 { background-position: -220px -480px; }
-.emoji-1F421 { background-position: -240px -480px; }
-.emoji-1F422 { background-position: -260px -480px; }
-.emoji-1F423 { background-position: -280px -480px; }
-.emoji-1F424 { background-position: -300px -480px; }
-.emoji-1F425 { background-position: -320px -480px; }
-.emoji-1F426 { background-position: -340px -480px; }
-.emoji-1F427 { background-position: -360px -480px; }
-.emoji-1F428 { background-position: -380px -480px; }
-.emoji-1F429 { background-position: -400px -480px; }
-.emoji-1F42A { background-position: -420px -480px; }
-.emoji-1F42B { background-position: -440px -480px; }
-.emoji-1F42C { background-position: -460px -480px; }
-.emoji-1F42D { background-position: -480px -480px; }
-.emoji-1F42E { background-position: -500px 0; }
-.emoji-1F42F { background-position: -500px -20px; }
-.emoji-1F430 { background-position: -500px -40px; }
-.emoji-1F431 { background-position: -500px -60px; }
-.emoji-1F432 { background-position: -500px -80px; }
-.emoji-1F433 { background-position: -500px -100px; }
-.emoji-1F434 { background-position: -500px -120px; }
-.emoji-1F435 { background-position: -500px -140px; }
-.emoji-1F436 { background-position: -500px -160px; }
-.emoji-1F437 { background-position: -500px -180px; }
-.emoji-1F438 { background-position: -500px -200px; }
-.emoji-1F439 { background-position: -500px -220px; }
-.emoji-1F43A { background-position: -500px -240px; }
-.emoji-1F43B { background-position: -500px -260px; }
-.emoji-1F43C { background-position: -500px -280px; }
-.emoji-1F43D { background-position: -500px -300px; }
-.emoji-1F43E { background-position: -500px -320px; }
-.emoji-1F43F { background-position: -500px -340px; }
-.emoji-1F440 { background-position: -500px -360px; }
-.emoji-1F441 { background-position: -500px -380px; }
-.emoji-1F441-1F5E8 { background-position: -500px -400px; }
-.emoji-1F442 { background-position: -500px -420px; }
-.emoji-1F442-1F3FB { background-position: -500px -440px; }
-.emoji-1F442-1F3FC { background-position: -500px -460px; }
-.emoji-1F442-1F3FD { background-position: -500px -480px; }
-.emoji-1F442-1F3FE { background-position: 0 -500px; }
-.emoji-1F442-1F3FF { background-position: -20px -500px; }
-.emoji-1F443 { background-position: -40px -500px; }
-.emoji-1F443-1F3FB { background-position: -60px -500px; }
-.emoji-1F443-1F3FC { background-position: -80px -500px; }
-.emoji-1F443-1F3FD { background-position: -100px -500px; }
-.emoji-1F443-1F3FE { background-position: -120px -500px; }
-.emoji-1F443-1F3FF { background-position: -140px -500px; }
-.emoji-1F444 { background-position: -160px -500px; }
-.emoji-1F445 { background-position: -180px -500px; }
-.emoji-1F446 { background-position: -200px -500px; }
-.emoji-1F446-1F3FB { background-position: -220px -500px; }
-.emoji-1F446-1F3FC { background-position: -240px -500px; }
-.emoji-1F446-1F3FD { background-position: -260px -500px; }
-.emoji-1F446-1F3FE { background-position: -280px -500px; }
-.emoji-1F446-1F3FF { background-position: -300px -500px; }
-.emoji-1F447 { background-position: -320px -500px; }
-.emoji-1F447-1F3FB { background-position: -340px -500px; }
-.emoji-1F447-1F3FC { background-position: -360px -500px; }
-.emoji-1F447-1F3FD { background-position: -380px -500px; }
-.emoji-1F447-1F3FE { background-position: -400px -500px; }
-.emoji-1F447-1F3FF { background-position: -420px -500px; }
-.emoji-1F448 { background-position: -440px -500px; }
-.emoji-1F448-1F3FB { background-position: -460px -500px; }
-.emoji-1F448-1F3FC { background-position: -480px -500px; }
-.emoji-1F448-1F3FD { background-position: -500px -500px; }
-.emoji-1F448-1F3FE { background-position: -520px 0; }
-.emoji-1F448-1F3FF { background-position: -520px -20px; }
-.emoji-1F449 { background-position: -520px -40px; }
-.emoji-1F449-1F3FB { background-position: -520px -60px; }
-.emoji-1F449-1F3FC { background-position: -520px -80px; }
-.emoji-1F449-1F3FD { background-position: -520px -100px; }
-.emoji-1F449-1F3FE { background-position: -520px -120px; }
-.emoji-1F449-1F3FF { background-position: -520px -140px; }
-.emoji-1F44A { background-position: -520px -160px; }
-.emoji-1F44A-1F3FB { background-position: -520px -180px; }
-.emoji-1F44A-1F3FC { background-position: -520px -200px; }
-.emoji-1F44A-1F3FD { background-position: -520px -220px; }
-.emoji-1F44A-1F3FE { background-position: -520px -240px; }
-.emoji-1F44A-1F3FF { background-position: -520px -260px; }
-.emoji-1F44B { background-position: -520px -280px; }
-.emoji-1F44B-1F3FB { background-position: -520px -300px; }
-.emoji-1F44B-1F3FC { background-position: -520px -320px; }
-.emoji-1F44B-1F3FD { background-position: -520px -340px; }
-.emoji-1F44B-1F3FE { background-position: -520px -360px; }
-.emoji-1F44B-1F3FF { background-position: -520px -380px; }
-.emoji-1F44C { background-position: -520px -400px; }
-.emoji-1F44C-1F3FB { background-position: -520px -420px; }
-.emoji-1F44C-1F3FC { background-position: -520px -440px; }
-.emoji-1F44C-1F3FD { background-position: -520px -460px; }
-.emoji-1F44C-1F3FE { background-position: -520px -480px; }
-.emoji-1F44C-1F3FF { background-position: -520px -500px; }
-.emoji-1F44D { background-position: 0 -520px; }
-.emoji-1F44D-1F3FB { background-position: -20px -520px; }
-.emoji-1F44D-1F3FC { background-position: -40px -520px; }
-.emoji-1F44D-1F3FD { background-position: -60px -520px; }
-.emoji-1F44D-1F3FE { background-position: -80px -520px; }
-.emoji-1F44D-1F3FF { background-position: -100px -520px; }
-.emoji-1F44E { background-position: -120px -520px; }
-.emoji-1F44E-1F3FB { background-position: -140px -520px; }
-.emoji-1F44E-1F3FC { background-position: -160px -520px; }
-.emoji-1F44E-1F3FD { background-position: -180px -520px; }
-.emoji-1F44E-1F3FE { background-position: -200px -520px; }
-.emoji-1F44E-1F3FF { background-position: -220px -520px; }
-.emoji-1F44F { background-position: -240px -520px; }
-.emoji-1F44F-1F3FB { background-position: -260px -520px; }
-.emoji-1F44F-1F3FC { background-position: -280px -520px; }
-.emoji-1F44F-1F3FD { background-position: -300px -520px; }
-.emoji-1F44F-1F3FE { background-position: -320px -520px; }
-.emoji-1F44F-1F3FF { background-position: -340px -520px; }
-.emoji-1F450 { background-position: -360px -520px; }
-.emoji-1F450-1F3FB { background-position: -380px -520px; }
-.emoji-1F450-1F3FC { background-position: -400px -520px; }
-.emoji-1F450-1F3FD { background-position: -420px -520px; }
-.emoji-1F450-1F3FE { background-position: -440px -520px; }
-.emoji-1F450-1F3FF { background-position: -460px -520px; }
-.emoji-1F451 { background-position: -480px -520px; }
-.emoji-1F452 { background-position: -500px -520px; }
-.emoji-1F453 { background-position: -520px -520px; }
-.emoji-1F454 { background-position: -540px 0; }
-.emoji-1F455 { background-position: -540px -20px; }
-.emoji-1F456 { background-position: -540px -40px; }
-.emoji-1F457 { background-position: -540px -60px; }
-.emoji-1F458 { background-position: -540px -80px; }
-.emoji-1F459 { background-position: -540px -100px; }
-.emoji-1F45A { background-position: -540px -120px; }
-.emoji-1F45B { background-position: -540px -140px; }
-.emoji-1F45C { background-position: -540px -160px; }
-.emoji-1F45D { background-position: -540px -180px; }
-.emoji-1F45E { background-position: -540px -200px; }
-.emoji-1F45F { background-position: -540px -220px; }
-.emoji-1F460 { background-position: -540px -240px; }
-.emoji-1F461 { background-position: -540px -260px; }
-.emoji-1F462 { background-position: -540px -280px; }
-.emoji-1F463 { background-position: -540px -300px; }
-.emoji-1F464 { background-position: -540px -320px; }
-.emoji-1F465 { background-position: -540px -340px; }
-.emoji-1F466 { background-position: -540px -360px; }
-.emoji-1F466-1F3FB { background-position: -540px -380px; }
-.emoji-1F466-1F3FC { background-position: -540px -400px; }
-.emoji-1F466-1F3FD { background-position: -540px -420px; }
-.emoji-1F466-1F3FE { background-position: -540px -440px; }
-.emoji-1F466-1F3FF { background-position: -540px -460px; }
-.emoji-1F467 { background-position: -540px -480px; }
-.emoji-1F467-1F3FB { background-position: -540px -500px; }
-.emoji-1F467-1F3FC { background-position: -540px -520px; }
-.emoji-1F467-1F3FD { background-position: 0 -540px; }
-.emoji-1F467-1F3FE { background-position: -20px -540px; }
-.emoji-1F467-1F3FF { background-position: -40px -540px; }
-.emoji-1F468 { background-position: -60px -540px; }
-.emoji-1F468-1F3FB { background-position: -80px -540px; }
-.emoji-1F468-1F3FC { background-position: -100px -540px; }
-.emoji-1F468-1F3FD { background-position: -120px -540px; }
-.emoji-1F468-1F3FE { background-position: -140px -540px; }
-.emoji-1F468-1F3FF { background-position: -160px -540px; }
-.emoji-1F468-1F468-1F466 { background-position: -180px -540px; }
-.emoji-1F468-1F468-1F466-1F466 { background-position: -200px -540px; }
-.emoji-1F468-1F468-1F467 { background-position: -220px -540px; }
-.emoji-1F468-1F468-1F467-1F466 { background-position: -240px -540px; }
-.emoji-1F468-1F468-1F467-1F467 { background-position: -260px -540px; }
-.emoji-1F468-1F469-1F466-1F466 { background-position: -280px -540px; }
-.emoji-1F468-1F469-1F467 { background-position: -300px -540px; }
-.emoji-1F468-1F469-1F467-1F466 { background-position: -320px -540px; }
-.emoji-1F468-1F469-1F467-1F467 { background-position: -340px -540px; }
-.emoji-1F468-2764-1F468 { background-position: -360px -540px; }
-.emoji-1F468-2764-1F48B-1F468 { background-position: -380px -540px; }
-.emoji-1F469 { background-position: -400px -540px; }
-.emoji-1F469-1F3FB { background-position: -420px -540px; }
-.emoji-1F469-1F3FC { background-position: -440px -540px; }
-.emoji-1F469-1F3FD { background-position: -460px -540px; }
-.emoji-1F469-1F3FE { background-position: -480px -540px; }
-.emoji-1F469-1F3FF { background-position: -500px -540px; }
-.emoji-1F469-1F469-1F466 { background-position: -520px -540px; }
-.emoji-1F469-1F469-1F466-1F466 { background-position: -540px -540px; }
-.emoji-1F469-1F469-1F467 { background-position: -560px 0; }
-.emoji-1F469-1F469-1F467-1F466 { background-position: -560px -20px; }
-.emoji-1F469-1F469-1F467-1F467 { background-position: -560px -40px; }
-.emoji-1F469-2764-1F469 { background-position: -560px -60px; }
-.emoji-1F469-2764-1F48B-1F469 { background-position: -560px -80px; }
-.emoji-1F46A { background-position: -560px -100px; }
-.emoji-1F46B { background-position: -560px -120px; }
-.emoji-1F46C { background-position: -560px -140px; }
-.emoji-1F46D { background-position: -560px -160px; }
-.emoji-1F46E { background-position: -560px -180px; }
-.emoji-1F46E-1F3FB { background-position: -560px -200px; }
-.emoji-1F46E-1F3FC { background-position: -560px -220px; }
-.emoji-1F46E-1F3FD { background-position: -560px -240px; }
-.emoji-1F46E-1F3FE { background-position: -560px -260px; }
-.emoji-1F46E-1F3FF { background-position: -560px -280px; }
-.emoji-1F46F { background-position: -560px -300px; }
-.emoji-1F470 { background-position: -560px -320px; }
-.emoji-1F470-1F3FB { background-position: -560px -340px; }
-.emoji-1F470-1F3FC { background-position: -560px -360px; }
-.emoji-1F470-1F3FD { background-position: -560px -380px; }
-.emoji-1F470-1F3FE { background-position: -560px -400px; }
-.emoji-1F470-1F3FF { background-position: -560px -420px; }
-.emoji-1F471 { background-position: -560px -440px; }
-.emoji-1F471-1F3FB { background-position: -560px -460px; }
-.emoji-1F471-1F3FC { background-position: -560px -480px; }
-.emoji-1F471-1F3FD { background-position: -560px -500px; }
-.emoji-1F471-1F3FE { background-position: -560px -520px; }
-.emoji-1F471-1F3FF { background-position: -560px -540px; }
-.emoji-1F472 { background-position: 0 -560px; }
-.emoji-1F472-1F3FB { background-position: -20px -560px; }
-.emoji-1F472-1F3FC { background-position: -40px -560px; }
-.emoji-1F472-1F3FD { background-position: -60px -560px; }
-.emoji-1F472-1F3FE { background-position: -80px -560px; }
-.emoji-1F472-1F3FF { background-position: -100px -560px; }
-.emoji-1F473 { background-position: -120px -560px; }
-.emoji-1F473-1F3FB { background-position: -140px -560px; }
-.emoji-1F473-1F3FC { background-position: -160px -560px; }
-.emoji-1F473-1F3FD { background-position: -180px -560px; }
-.emoji-1F473-1F3FE { background-position: -200px -560px; }
-.emoji-1F473-1F3FF { background-position: -220px -560px; }
-.emoji-1F474 { background-position: -240px -560px; }
-.emoji-1F474-1F3FB { background-position: -260px -560px; }
-.emoji-1F474-1F3FC { background-position: -280px -560px; }
-.emoji-1F474-1F3FD { background-position: -300px -560px; }
-.emoji-1F474-1F3FE { background-position: -320px -560px; }
-.emoji-1F474-1F3FF { background-position: -340px -560px; }
-.emoji-1F475 { background-position: -360px -560px; }
-.emoji-1F475-1F3FB { background-position: -380px -560px; }
-.emoji-1F475-1F3FC { background-position: -400px -560px; }
-.emoji-1F475-1F3FD { background-position: -420px -560px; }
-.emoji-1F475-1F3FE { background-position: -440px -560px; }
-.emoji-1F475-1F3FF { background-position: -460px -560px; }
-.emoji-1F476 { background-position: -480px -560px; }
-.emoji-1F476-1F3FB { background-position: -500px -560px; }
-.emoji-1F476-1F3FC { background-position: -520px -560px; }
-.emoji-1F476-1F3FD { background-position: -540px -560px; }
-.emoji-1F476-1F3FE { background-position: -560px -560px; }
-.emoji-1F476-1F3FF { background-position: -580px 0; }
-.emoji-1F477 { background-position: -580px -20px; }
-.emoji-1F477-1F3FB { background-position: -580px -40px; }
-.emoji-1F477-1F3FC { background-position: -580px -60px; }
-.emoji-1F477-1F3FD { background-position: -580px -80px; }
-.emoji-1F477-1F3FE { background-position: -580px -100px; }
-.emoji-1F477-1F3FF { background-position: -580px -120px; }
-.emoji-1F478 { background-position: -580px -140px; }
-.emoji-1F478-1F3FB { background-position: -580px -160px; }
-.emoji-1F478-1F3FC { background-position: -580px -180px; }
-.emoji-1F478-1F3FD { background-position: -580px -200px; }
-.emoji-1F478-1F3FE { background-position: -580px -220px; }
-.emoji-1F478-1F3FF { background-position: -580px -240px; }
-.emoji-1F479 { background-position: -580px -260px; }
-.emoji-1F47A { background-position: -580px -280px; }
-.emoji-1F47B { background-position: -580px -300px; }
-.emoji-1F47C { background-position: -580px -320px; }
-.emoji-1F47C-1F3FB { background-position: -580px -340px; }
-.emoji-1F47C-1F3FC { background-position: -580px -360px; }
-.emoji-1F47C-1F3FD { background-position: -580px -380px; }
-.emoji-1F47C-1F3FE { background-position: -580px -400px; }
-.emoji-1F47C-1F3FF { background-position: -580px -420px; }
-.emoji-1F47D { background-position: -580px -440px; }
-.emoji-1F47E { background-position: -580px -460px; }
-.emoji-1F47F { background-position: -580px -480px; }
-.emoji-1F480 { background-position: -580px -500px; }
-.emoji-1F481 { background-position: -580px -520px; }
-.emoji-1F481-1F3FB { background-position: -580px -540px; }
-.emoji-1F481-1F3FC { background-position: -580px -560px; }
-.emoji-1F481-1F3FD { background-position: 0 -580px; }
-.emoji-1F481-1F3FE { background-position: -20px -580px; }
-.emoji-1F481-1F3FF { background-position: -40px -580px; }
-.emoji-1F482 { background-position: -60px -580px; }
-.emoji-1F482-1F3FB { background-position: -80px -580px; }
-.emoji-1F482-1F3FC { background-position: -100px -580px; }
-.emoji-1F482-1F3FD { background-position: -120px -580px; }
-.emoji-1F482-1F3FE { background-position: -140px -580px; }
-.emoji-1F482-1F3FF { background-position: -160px -580px; }
-.emoji-1F483 { background-position: -180px -580px; }
-.emoji-1F483-1F3FB { background-position: -200px -580px; }
-.emoji-1F483-1F3FC { background-position: -220px -580px; }
-.emoji-1F483-1F3FD { background-position: -240px -580px; }
-.emoji-1F483-1F3FE { background-position: -260px -580px; }
-.emoji-1F483-1F3FF { background-position: -280px -580px; }
-.emoji-1F484 { background-position: -300px -580px; }
-.emoji-1F485 { background-position: -320px -580px; }
-.emoji-1F485-1F3FB { background-position: -340px -580px; }
-.emoji-1F485-1F3FC { background-position: -360px -580px; }
-.emoji-1F485-1F3FD { background-position: -380px -580px; }
-.emoji-1F485-1F3FE { background-position: -400px -580px; }
-.emoji-1F485-1F3FF { background-position: -420px -580px; }
-.emoji-1F486 { background-position: -440px -580px; }
-.emoji-1F486-1F3FB { background-position: -460px -580px; }
-.emoji-1F486-1F3FC { background-position: -480px -580px; }
-.emoji-1F486-1F3FD { background-position: -500px -580px; }
-.emoji-1F486-1F3FE { background-position: -520px -580px; }
-.emoji-1F486-1F3FF { background-position: -540px -580px; }
-.emoji-1F487 { background-position: -560px -580px; }
-.emoji-1F487-1F3FB { background-position: -580px -580px; }
-.emoji-1F487-1F3FC { background-position: -600px 0; }
-.emoji-1F487-1F3FD { background-position: -600px -20px; }
-.emoji-1F487-1F3FE { background-position: -600px -40px; }
-.emoji-1F487-1F3FF { background-position: -600px -60px; }
-.emoji-1F488 { background-position: -600px -80px; }
-.emoji-1F489 { background-position: -600px -100px; }
-.emoji-1F48A { background-position: -600px -120px; }
-.emoji-1F48B { background-position: -600px -140px; }
-.emoji-1F48C { background-position: -600px -160px; }
-.emoji-1F48D { background-position: -600px -180px; }
-.emoji-1F48E { background-position: -600px -200px; }
-.emoji-1F48F { background-position: -600px -220px; }
-.emoji-1F490 { background-position: -600px -240px; }
-.emoji-1F491 { background-position: -600px -260px; }
-.emoji-1F492 { background-position: -600px -280px; }
-.emoji-1F493 { background-position: -600px -300px; }
-.emoji-1F494 { background-position: -600px -320px; }
-.emoji-1F495 { background-position: -600px -340px; }
-.emoji-1F496 { background-position: -600px -360px; }
-.emoji-1F497 { background-position: -600px -380px; }
-.emoji-1F498 { background-position: -600px -400px; }
-.emoji-1F499 { background-position: -600px -420px; }
-.emoji-1F49A { background-position: -600px -440px; }
-.emoji-1F49B { background-position: -600px -460px; }
-.emoji-1F49C { background-position: -600px -480px; }
-.emoji-1F49D { background-position: -600px -500px; }
-.emoji-1F49E { background-position: -600px -520px; }
-.emoji-1F49F { background-position: -600px -540px; }
-.emoji-1F4A0 { background-position: -600px -560px; }
-.emoji-1F4A1 { background-position: -600px -580px; }
-.emoji-1F4A2 { background-position: 0 -600px; }
-.emoji-1F4A3 { background-position: -20px -600px; }
-.emoji-1F4A4 { background-position: -40px -600px; }
-.emoji-1F4A5 { background-position: -60px -600px; }
-.emoji-1F4A6 { background-position: -80px -600px; }
-.emoji-1F4A7 { background-position: -100px -600px; }
-.emoji-1F4A8 { background-position: -120px -600px; }
-.emoji-1F4A9 { background-position: -140px -600px; }
-.emoji-1F4AA { background-position: -160px -600px; }
-.emoji-1F4AA-1F3FB { background-position: -180px -600px; }
-.emoji-1F4AA-1F3FC { background-position: -200px -600px; }
-.emoji-1F4AA-1F3FD { background-position: -220px -600px; }
-.emoji-1F4AA-1F3FE { background-position: -240px -600px; }
-.emoji-1F4AA-1F3FF { background-position: -260px -600px; }
-.emoji-1F4AB { background-position: -280px -600px; }
-.emoji-1F4AC { background-position: -300px -600px; }
-.emoji-1F4AD { background-position: -320px -600px; }
-.emoji-1F4AE { background-position: -340px -600px; }
-.emoji-1F4AF { background-position: -360px -600px; }
-.emoji-1F4B0 { background-position: -380px -600px; }
-.emoji-1F4B1 { background-position: -400px -600px; }
-.emoji-1F4B2 { background-position: -420px -600px; }
-.emoji-1F4B3 { background-position: -440px -600px; }
-.emoji-1F4B4 { background-position: -460px -600px; }
-.emoji-1F4B5 { background-position: -480px -600px; }
-.emoji-1F4B6 { background-position: -500px -600px; }
-.emoji-1F4B7 { background-position: -520px -600px; }
-.emoji-1F4B8 { background-position: -540px -600px; }
-.emoji-1F4B9 { background-position: -560px -600px; }
-.emoji-1F4BA { background-position: -580px -600px; }
-.emoji-1F4BB { background-position: -600px -600px; }
-.emoji-1F4BC { background-position: -620px 0; }
-.emoji-1F4BD { background-position: -620px -20px; }
-.emoji-1F4BE { background-position: -620px -40px; }
-.emoji-1F4BF { background-position: -620px -60px; }
-.emoji-1F4C0 { background-position: -620px -80px; }
-.emoji-1F4C1 { background-position: -620px -100px; }
-.emoji-1F4C2 { background-position: -620px -120px; }
-.emoji-1F4C3 { background-position: -620px -140px; }
-.emoji-1F4C4 { background-position: -620px -160px; }
-.emoji-1F4C5 { background-position: -620px -180px; }
-.emoji-1F4C6 { background-position: -620px -200px; }
-.emoji-1F4C7 { background-position: -620px -220px; }
-.emoji-1F4C8 { background-position: -620px -240px; }
-.emoji-1F4C9 { background-position: -620px -260px; }
-.emoji-1F4CA { background-position: -620px -280px; }
-.emoji-1F4CB { background-position: -620px -300px; }
-.emoji-1F4CC { background-position: -620px -320px; }
-.emoji-1F4CD { background-position: -620px -340px; }
-.emoji-1F4CE { background-position: -620px -360px; }
-.emoji-1F4CF { background-position: -620px -380px; }
-.emoji-1F4D0 { background-position: -620px -400px; }
-.emoji-1F4D1 { background-position: -620px -420px; }
-.emoji-1F4D2 { background-position: -620px -440px; }
-.emoji-1F4D3 { background-position: -620px -460px; }
-.emoji-1F4D4 { background-position: -620px -480px; }
-.emoji-1F4D5 { background-position: -620px -500px; }
-.emoji-1F4D6 { background-position: -620px -520px; }
-.emoji-1F4D7 { background-position: -620px -540px; }
-.emoji-1F4D8 { background-position: -620px -560px; }
-.emoji-1F4D9 { background-position: -620px -580px; }
-.emoji-1F4DA { background-position: -620px -600px; }
-.emoji-1F4DB { background-position: 0 -620px; }
-.emoji-1F4DC { background-position: -20px -620px; }
-.emoji-1F4DD { background-position: -40px -620px; }
-.emoji-1F4DE { background-position: -60px -620px; }
-.emoji-1F4DF { background-position: -80px -620px; }
-.emoji-1F4E0 { background-position: -100px -620px; }
-.emoji-1F4E1 { background-position: -120px -620px; }
-.emoji-1F4E2 { background-position: -140px -620px; }
-.emoji-1F4E3 { background-position: -160px -620px; }
-.emoji-1F4E4 { background-position: -180px -620px; }
-.emoji-1F4E5 { background-position: -200px -620px; }
-.emoji-1F4E6 { background-position: -220px -620px; }
-.emoji-1F4E7 { background-position: -240px -620px; }
-.emoji-1F4E8 { background-position: -260px -620px; }
-.emoji-1F4E9 { background-position: -280px -620px; }
-.emoji-1F4EA { background-position: -300px -620px; }
-.emoji-1F4EB { background-position: -320px -620px; }
-.emoji-1F4EC { background-position: -340px -620px; }
-.emoji-1F4ED { background-position: -360px -620px; }
-.emoji-1F4EE { background-position: -380px -620px; }
-.emoji-1F4EF { background-position: -400px -620px; }
-.emoji-1F4F0 { background-position: -420px -620px; }
-.emoji-1F4F1 { background-position: -440px -620px; }
-.emoji-1F4F2 { background-position: -460px -620px; }
-.emoji-1F4F3 { background-position: -480px -620px; }
-.emoji-1F4F4 { background-position: -500px -620px; }
-.emoji-1F4F5 { background-position: -520px -620px; }
-.emoji-1F4F6 { background-position: -540px -620px; }
-.emoji-1F4F7 { background-position: -560px -620px; }
-.emoji-1F4F8 { background-position: -580px -620px; }
-.emoji-1F4F9 { background-position: -600px -620px; }
-.emoji-1F4FA { background-position: -620px -620px; }
-.emoji-1F4FB { background-position: -640px 0; }
-.emoji-1F4FC { background-position: -640px -20px; }
-.emoji-1F4FD { background-position: -640px -40px; }
-.emoji-1F4FF { background-position: -640px -60px; }
-.emoji-1F500 { background-position: -640px -80px; }
-.emoji-1F501 { background-position: -640px -100px; }
-.emoji-1F502 { background-position: -640px -120px; }
-.emoji-1F503 { background-position: -640px -140px; }
-.emoji-1F504 { background-position: -640px -160px; }
-.emoji-1F505 { background-position: -640px -180px; }
-.emoji-1F506 { background-position: -640px -200px; }
-.emoji-1F507 { background-position: -640px -220px; }
-.emoji-1F508 { background-position: -640px -240px; }
-.emoji-1F509 { background-position: -640px -260px; }
-.emoji-1F50A { background-position: -640px -280px; }
-.emoji-1F50B { background-position: -640px -300px; }
-.emoji-1F50C { background-position: -640px -320px; }
-.emoji-1F50D { background-position: -640px -340px; }
-.emoji-1F50E { background-position: -640px -360px; }
-.emoji-1F50F { background-position: -640px -380px; }
-.emoji-1F510 { background-position: -640px -400px; }
-.emoji-1F511 { background-position: -640px -420px; }
-.emoji-1F512 { background-position: -640px -440px; }
-.emoji-1F513 { background-position: -640px -460px; }
-.emoji-1F514 { background-position: -640px -480px; }
-.emoji-1F515 { background-position: -640px -500px; }
-.emoji-1F516 { background-position: -640px -520px; }
-.emoji-1F517 { background-position: -640px -540px; }
-.emoji-1F518 { background-position: -640px -560px; }
-.emoji-1F519 { background-position: -640px -580px; }
-.emoji-1F51A { background-position: -640px -600px; }
-.emoji-1F51B { background-position: -640px -620px; }
-.emoji-1F51C { background-position: 0 -640px; }
-.emoji-1F51D { background-position: -20px -640px; }
-.emoji-1F51E { background-position: -40px -640px; }
-.emoji-1F51F { background-position: -60px -640px; }
-.emoji-1F520 { background-position: -80px -640px; }
-.emoji-1F521 { background-position: -100px -640px; }
-.emoji-1F522 { background-position: -120px -640px; }
-.emoji-1F523 { background-position: -140px -640px; }
-.emoji-1F524 { background-position: -160px -640px; }
-.emoji-1F525 { background-position: -180px -640px; }
-.emoji-1F526 { background-position: -200px -640px; }
-.emoji-1F527 { background-position: -220px -640px; }
-.emoji-1F528 { background-position: -240px -640px; }
-.emoji-1F529 { background-position: -260px -640px; }
-.emoji-1F52A { background-position: -280px -640px; }
-.emoji-1F52B { background-position: -300px -640px; }
-.emoji-1F52C { background-position: -320px -640px; }
-.emoji-1F52D { background-position: -340px -640px; }
-.emoji-1F52E { background-position: -360px -640px; }
-.emoji-1F52F { background-position: -380px -640px; }
-.emoji-1F530 { background-position: -400px -640px; }
-.emoji-1F531 { background-position: -420px -640px; }
-.emoji-1F532 { background-position: -440px -640px; }
-.emoji-1F533 { background-position: -460px -640px; }
-.emoji-1F534 { background-position: -480px -640px; }
-.emoji-1F535 { background-position: -500px -640px; }
-.emoji-1F536 { background-position: -520px -640px; }
-.emoji-1F537 { background-position: -540px -640px; }
-.emoji-1F538 { background-position: -560px -640px; }
-.emoji-1F539 { background-position: -580px -640px; }
-.emoji-1F53A { background-position: -600px -640px; }
-.emoji-1F53B { background-position: -620px -640px; }
-.emoji-1F53C { background-position: -640px -640px; }
-.emoji-1F53D { background-position: -660px 0; }
-.emoji-1F549 { background-position: -660px -20px; }
-.emoji-1F54A { background-position: -660px -40px; }
-.emoji-1F54B { background-position: -660px -60px; }
-.emoji-1F54C { background-position: -660px -80px; }
-.emoji-1F54D { background-position: -660px -100px; }
-.emoji-1F54E { background-position: -660px -120px; }
-.emoji-1F550 { background-position: -660px -140px; }
-.emoji-1F551 { background-position: -660px -160px; }
-.emoji-1F552 { background-position: -660px -180px; }
-.emoji-1F553 { background-position: -660px -200px; }
-.emoji-1F554 { background-position: -660px -220px; }
-.emoji-1F555 { background-position: -660px -240px; }
-.emoji-1F556 { background-position: -660px -260px; }
-.emoji-1F557 { background-position: -660px -280px; }
-.emoji-1F558 { background-position: -660px -300px; }
-.emoji-1F559 { background-position: -660px -320px; }
-.emoji-1F55A { background-position: -660px -340px; }
-.emoji-1F55B { background-position: -660px -360px; }
-.emoji-1F55C { background-position: -660px -380px; }
-.emoji-1F55D { background-position: -660px -400px; }
-.emoji-1F55E { background-position: -660px -420px; }
-.emoji-1F55F { background-position: -660px -440px; }
-.emoji-1F560 { background-position: -660px -460px; }
-.emoji-1F561 { background-position: -660px -480px; }
-.emoji-1F562 { background-position: -660px -500px; }
-.emoji-1F563 { background-position: -660px -520px; }
-.emoji-1F564 { background-position: -660px -540px; }
-.emoji-1F565 { background-position: -660px -560px; }
-.emoji-1F566 { background-position: -660px -580px; }
-.emoji-1F567 { background-position: -660px -600px; }
-.emoji-1F56F { background-position: -660px -620px; }
-.emoji-1F570 { background-position: -660px -640px; }
-.emoji-1F573 { background-position: 0 -660px; }
-.emoji-1F574 { background-position: -20px -660px; }
-.emoji-1F575 { background-position: -40px -660px; }
-.emoji-1F575-1F3FB { background-position: -60px -660px; }
-.emoji-1F575-1F3FC { background-position: -80px -660px; }
-.emoji-1F575-1F3FD { background-position: -100px -660px; }
-.emoji-1F575-1F3FE { background-position: -120px -660px; }
-.emoji-1F575-1F3FF { background-position: -140px -660px; }
-.emoji-1F576 { background-position: -160px -660px; }
-.emoji-1F577 { background-position: -180px -660px; }
-.emoji-1F578 { background-position: -200px -660px; }
-.emoji-1F579 { background-position: -220px -660px; }
-.emoji-1F57A { background-position: -240px -660px; }
-.emoji-1F57A-1F3FB { background-position: -260px -660px; }
-.emoji-1F57A-1F3FC { background-position: -280px -660px; }
-.emoji-1F57A-1F3FD { background-position: -300px -660px; }
-.emoji-1F57A-1F3FE { background-position: -320px -660px; }
-.emoji-1F57A-1F3FF { background-position: -340px -660px; }
-.emoji-1F587 { background-position: -360px -660px; }
-.emoji-1F58A { background-position: -380px -660px; }
-.emoji-1F58B { background-position: -400px -660px; }
-.emoji-1F58C { background-position: -420px -660px; }
-.emoji-1F58D { background-position: -440px -660px; }
-.emoji-1F590 { background-position: -460px -660px; }
-.emoji-1F590-1F3FB { background-position: -480px -660px; }
-.emoji-1F590-1F3FC { background-position: -500px -660px; }
-.emoji-1F590-1F3FD { background-position: -520px -660px; }
-.emoji-1F590-1F3FE { background-position: -540px -660px; }
-.emoji-1F590-1F3FF { background-position: -560px -660px; }
-.emoji-1F595 { background-position: -580px -660px; }
-.emoji-1F595-1F3FB { background-position: -600px -660px; }
-.emoji-1F595-1F3FC { background-position: -620px -660px; }
-.emoji-1F595-1F3FD { background-position: -640px -660px; }
-.emoji-1F595-1F3FE { background-position: -660px -660px; }
-.emoji-1F595-1F3FF { background-position: -680px 0; }
-.emoji-1F596 { background-position: -680px -20px; }
-.emoji-1F596-1F3FB { background-position: -680px -40px; }
-.emoji-1F596-1F3FC { background-position: -680px -60px; }
-.emoji-1F596-1F3FD { background-position: -680px -80px; }
-.emoji-1F596-1F3FE { background-position: -680px -100px; }
-.emoji-1F596-1F3FF { background-position: -680px -120px; }
-.emoji-1F5A4 { background-position: -680px -140px; }
-.emoji-1F5A5 { background-position: -680px -160px; }
-.emoji-1F5A8 { background-position: -680px -180px; }
-.emoji-1F5B1 { background-position: -680px -200px; }
-.emoji-1F5B2 { background-position: -680px -220px; }
-.emoji-1F5BC { background-position: -680px -240px; }
-.emoji-1F5C2 { background-position: -680px -260px; }
-.emoji-1F5C3 { background-position: -680px -280px; }
-.emoji-1F5C4 { background-position: -680px -300px; }
-.emoji-1F5D1 { background-position: -680px -320px; }
-.emoji-1F5D2 { background-position: -680px -340px; }
-.emoji-1F5D3 { background-position: -680px -360px; }
-.emoji-1F5DC { background-position: -680px -380px; }
-.emoji-1F5DD { background-position: -680px -400px; }
-.emoji-1F5DE { background-position: -680px -420px; }
-.emoji-1F5E1 { background-position: -680px -440px; }
-.emoji-1F5E3 { background-position: -680px -460px; }
-.emoji-1F5EF { background-position: -680px -480px; }
-.emoji-1F5F3 { background-position: -680px -500px; }
-.emoji-1F5FA { background-position: -680px -520px; }
-.emoji-1F5FB { background-position: -680px -540px; }
-.emoji-1F5FC { background-position: -680px -560px; }
-.emoji-1F5FD { background-position: -680px -580px; }
-.emoji-1F5FE { background-position: -680px -600px; }
-.emoji-1F5FF { background-position: -680px -620px; }
-.emoji-1F600 { background-position: -680px -640px; }
-.emoji-1F601 { background-position: -680px -660px; }
-.emoji-1F602 { background-position: 0 -680px; }
-.emoji-1F603 { background-position: -20px -680px; }
-.emoji-1F604 { background-position: -40px -680px; }
-.emoji-1F605 { background-position: -60px -680px; }
-.emoji-1F606 { background-position: -80px -680px; }
-.emoji-1F607 { background-position: -100px -680px; }
-.emoji-1F608 { background-position: -120px -680px; }
-.emoji-1F609 { background-position: -140px -680px; }
-.emoji-1F60A { background-position: -160px -680px; }
-.emoji-1F60B { background-position: -180px -680px; }
-.emoji-1F60C { background-position: -200px -680px; }
-.emoji-1F60D { background-position: -220px -680px; }
-.emoji-1F60E { background-position: -240px -680px; }
-.emoji-1F60F { background-position: -260px -680px; }
-.emoji-1F610 { background-position: -280px -680px; }
-.emoji-1F611 { background-position: -300px -680px; }
-.emoji-1F612 { background-position: -320px -680px; }
-.emoji-1F613 { background-position: -340px -680px; }
-.emoji-1F614 { background-position: -360px -680px; }
-.emoji-1F615 { background-position: -380px -680px; }
-.emoji-1F616 { background-position: -400px -680px; }
-.emoji-1F617 { background-position: -420px -680px; }
-.emoji-1F618 { background-position: -440px -680px; }
-.emoji-1F619 { background-position: -460px -680px; }
-.emoji-1F61A { background-position: -480px -680px; }
-.emoji-1F61B { background-position: -500px -680px; }
-.emoji-1F61C { background-position: -520px -680px; }
-.emoji-1F61D { background-position: -540px -680px; }
-.emoji-1F61E { background-position: -560px -680px; }
-.emoji-1F61F { background-position: -580px -680px; }
-.emoji-1F620 { background-position: -600px -680px; }
-.emoji-1F621 { background-position: -620px -680px; }
-.emoji-1F622 { background-position: -640px -680px; }
-.emoji-1F623 { background-position: -660px -680px; }
-.emoji-1F624 { background-position: -680px -680px; }
-.emoji-1F625 { background-position: -700px 0; }
-.emoji-1F626 { background-position: -700px -20px; }
-.emoji-1F627 { background-position: -700px -40px; }
-.emoji-1F628 { background-position: -700px -60px; }
-.emoji-1F629 { background-position: -700px -80px; }
-.emoji-1F62A { background-position: -700px -100px; }
-.emoji-1F62B { background-position: -700px -120px; }
-.emoji-1F62C { background-position: -700px -140px; }
-.emoji-1F62D { background-position: -700px -160px; }
-.emoji-1F62E { background-position: -700px -180px; }
-.emoji-1F62F { background-position: -700px -200px; }
-.emoji-1F630 { background-position: -700px -220px; }
-.emoji-1F631 { background-position: -700px -240px; }
-.emoji-1F632 { background-position: -700px -260px; }
-.emoji-1F633 { background-position: -700px -280px; }
-.emoji-1F634 { background-position: -700px -300px; }
-.emoji-1F635 { background-position: -700px -320px; }
-.emoji-1F636 { background-position: -700px -340px; }
-.emoji-1F637 { background-position: -700px -360px; }
-.emoji-1F638 { background-position: -700px -380px; }
-.emoji-1F639 { background-position: -700px -400px; }
-.emoji-1F63A { background-position: -700px -420px; }
-.emoji-1F63B { background-position: -700px -440px; }
-.emoji-1F63C { background-position: -700px -460px; }
-.emoji-1F63D { background-position: -700px -480px; }
-.emoji-1F63E { background-position: -700px -500px; }
-.emoji-1F63F { background-position: -700px -520px; }
-.emoji-1F640 { background-position: -700px -540px; }
-.emoji-1F641 { background-position: -700px -560px; }
-.emoji-1F642 { background-position: -700px -580px; }
-.emoji-1F643 { background-position: -700px -600px; }
-.emoji-1F644 { background-position: -700px -620px; }
-.emoji-1F645 { background-position: -700px -640px; }
-.emoji-1F645-1F3FB { background-position: -700px -660px; }
-.emoji-1F645-1F3FC { background-position: -700px -680px; }
-.emoji-1F645-1F3FD { background-position: 0 -700px; }
-.emoji-1F645-1F3FE { background-position: -20px -700px; }
-.emoji-1F645-1F3FF { background-position: -40px -700px; }
-.emoji-1F646 { background-position: -60px -700px; }
-.emoji-1F646-1F3FB { background-position: -80px -700px; }
-.emoji-1F646-1F3FC { background-position: -100px -700px; }
-.emoji-1F646-1F3FD { background-position: -120px -700px; }
-.emoji-1F646-1F3FE { background-position: -140px -700px; }
-.emoji-1F646-1F3FF { background-position: -160px -700px; }
-.emoji-1F647 { background-position: -180px -700px; }
-.emoji-1F647-1F3FB { background-position: -200px -700px; }
-.emoji-1F647-1F3FC { background-position: -220px -700px; }
-.emoji-1F647-1F3FD { background-position: -240px -700px; }
-.emoji-1F647-1F3FE { background-position: -260px -700px; }
-.emoji-1F647-1F3FF { background-position: -280px -700px; }
-.emoji-1F648 { background-position: -300px -700px; }
-.emoji-1F649 { background-position: -320px -700px; }
-.emoji-1F64A { background-position: -340px -700px; }
-.emoji-1F64B { background-position: -360px -700px; }
-.emoji-1F64B-1F3FB { background-position: -380px -700px; }
-.emoji-1F64B-1F3FC { background-position: -400px -700px; }
-.emoji-1F64B-1F3FD { background-position: -420px -700px; }
-.emoji-1F64B-1F3FE { background-position: -440px -700px; }
-.emoji-1F64B-1F3FF { background-position: -460px -700px; }
-.emoji-1F64C { background-position: -480px -700px; }
-.emoji-1F64C-1F3FB { background-position: -500px -700px; }
-.emoji-1F64C-1F3FC { background-position: -520px -700px; }
-.emoji-1F64C-1F3FD { background-position: -540px -700px; }
-.emoji-1F64C-1F3FE { background-position: -560px -700px; }
-.emoji-1F64C-1F3FF { background-position: -580px -700px; }
-.emoji-1F64D { background-position: -600px -700px; }
-.emoji-1F64D-1F3FB { background-position: -620px -700px; }
-.emoji-1F64D-1F3FC { background-position: -640px -700px; }
-.emoji-1F64D-1F3FD { background-position: -660px -700px; }
-.emoji-1F64D-1F3FE { background-position: -680px -700px; }
-.emoji-1F64D-1F3FF { background-position: -700px -700px; }
-.emoji-1F64E { background-position: -720px 0; }
-.emoji-1F64E-1F3FB { background-position: -720px -20px; }
-.emoji-1F64E-1F3FC { background-position: -720px -40px; }
-.emoji-1F64E-1F3FD { background-position: -720px -60px; }
-.emoji-1F64E-1F3FE { background-position: -720px -80px; }
-.emoji-1F64E-1F3FF { background-position: -720px -100px; }
-.emoji-1F64F { background-position: -720px -120px; }
-.emoji-1F64F-1F3FB { background-position: -720px -140px; }
-.emoji-1F64F-1F3FC { background-position: -720px -160px; }
-.emoji-1F64F-1F3FD { background-position: -720px -180px; }
-.emoji-1F64F-1F3FE { background-position: -720px -200px; }
-.emoji-1F64F-1F3FF { background-position: -720px -220px; }
-.emoji-1F680 { background-position: -720px -240px; }
-.emoji-1F681 { background-position: -720px -260px; }
-.emoji-1F682 { background-position: -720px -280px; }
-.emoji-1F683 { background-position: -720px -300px; }
-.emoji-1F684 { background-position: -720px -320px; }
-.emoji-1F685 { background-position: -720px -340px; }
-.emoji-1F686 { background-position: -720px -360px; }
-.emoji-1F687 { background-position: -720px -380px; }
-.emoji-1F688 { background-position: -720px -400px; }
-.emoji-1F689 { background-position: -720px -420px; }
-.emoji-1F68A { background-position: -720px -440px; }
-.emoji-1F68B { background-position: -720px -460px; }
-.emoji-1F68C { background-position: -720px -480px; }
-.emoji-1F68D { background-position: -720px -500px; }
-.emoji-1F68E { background-position: -720px -520px; }
-.emoji-1F68F { background-position: -720px -540px; }
-.emoji-1F690 { background-position: -720px -560px; }
-.emoji-1F691 { background-position: -720px -580px; }
-.emoji-1F692 { background-position: -720px -600px; }
-.emoji-1F693 { background-position: -720px -620px; }
-.emoji-1F694 { background-position: -720px -640px; }
-.emoji-1F695 { background-position: -720px -660px; }
-.emoji-1F696 { background-position: -720px -680px; }
-.emoji-1F697 { background-position: -720px -700px; }
-.emoji-1F698 { background-position: 0 -720px; }
-.emoji-1F699 { background-position: -20px -720px; }
-.emoji-1F69A { background-position: -40px -720px; }
-.emoji-1F69B { background-position: -60px -720px; }
-.emoji-1F69C { background-position: -80px -720px; }
-.emoji-1F69D { background-position: -100px -720px; }
-.emoji-1F69E { background-position: -120px -720px; }
-.emoji-1F69F { background-position: -140px -720px; }
-.emoji-1F6A0 { background-position: -160px -720px; }
-.emoji-1F6A1 { background-position: -180px -720px; }
-.emoji-1F6A2 { background-position: -200px -720px; }
-.emoji-1F6A3 { background-position: -220px -720px; }
-.emoji-1F6A3-1F3FB { background-position: -240px -720px; }
-.emoji-1F6A3-1F3FC { background-position: -260px -720px; }
-.emoji-1F6A3-1F3FD { background-position: -280px -720px; }
-.emoji-1F6A3-1F3FE { background-position: -300px -720px; }
-.emoji-1F6A3-1F3FF { background-position: -320px -720px; }
-.emoji-1F6A4 { background-position: -340px -720px; }
-.emoji-1F6A5 { background-position: -360px -720px; }
-.emoji-1F6A6 { background-position: -380px -720px; }
-.emoji-1F6A7 { background-position: -400px -720px; }
-.emoji-1F6A8 { background-position: -420px -720px; }
-.emoji-1F6A9 { background-position: -440px -720px; }
-.emoji-1F6AA { background-position: -460px -720px; }
-.emoji-1F6AB { background-position: -480px -720px; }
-.emoji-1F6AC { background-position: -500px -720px; }
-.emoji-1F6AD { background-position: -520px -720px; }
-.emoji-1F6AE { background-position: -540px -720px; }
-.emoji-1F6AF { background-position: -560px -720px; }
-.emoji-1F6B0 { background-position: -580px -720px; }
-.emoji-1F6B1 { background-position: -600px -720px; }
-.emoji-1F6B2 { background-position: -620px -720px; }
-.emoji-1F6B3 { background-position: -640px -720px; }
-.emoji-1F6B4 { background-position: -660px -720px; }
-.emoji-1F6B4-1F3FB { background-position: -680px -720px; }
-.emoji-1F6B4-1F3FC { background-position: -700px -720px; }
-.emoji-1F6B4-1F3FD { background-position: -720px -720px; }
-.emoji-1F6B4-1F3FE { background-position: -740px 0; }
-.emoji-1F6B4-1F3FF { background-position: -740px -20px; }
-.emoji-1F6B5 { background-position: -740px -40px; }
-.emoji-1F6B5-1F3FB { background-position: -740px -60px; }
-.emoji-1F6B5-1F3FC { background-position: -740px -80px; }
-.emoji-1F6B5-1F3FD { background-position: -740px -100px; }
-.emoji-1F6B5-1F3FE { background-position: -740px -120px; }
-.emoji-1F6B5-1F3FF { background-position: -740px -140px; }
-.emoji-1F6B6 { background-position: -740px -160px; }
-.emoji-1F6B6-1F3FB { background-position: -740px -180px; }
-.emoji-1F6B6-1F3FC { background-position: -740px -200px; }
-.emoji-1F6B6-1F3FD { background-position: -740px -220px; }
-.emoji-1F6B6-1F3FE { background-position: -740px -240px; }
-.emoji-1F6B6-1F3FF { background-position: -740px -260px; }
-.emoji-1F6B7 { background-position: -740px -280px; }
-.emoji-1F6B8 { background-position: -740px -300px; }
-.emoji-1F6B9 { background-position: -740px -320px; }
-.emoji-1F6BA { background-position: -740px -340px; }
-.emoji-1F6BB { background-position: -740px -360px; }
-.emoji-1F6BC { background-position: -740px -380px; }
-.emoji-1F6BD { background-position: -740px -400px; }
-.emoji-1F6BE { background-position: -740px -420px; }
-.emoji-1F6BF { background-position: -740px -440px; }
-.emoji-1F6C0 { background-position: -740px -460px; }
-.emoji-1F6C0-1F3FB { background-position: -740px -480px; }
-.emoji-1F6C0-1F3FC { background-position: -740px -500px; }
-.emoji-1F6C0-1F3FD { background-position: -740px -520px; }
-.emoji-1F6C0-1F3FE { background-position: -740px -540px; }
-.emoji-1F6C0-1F3FF { background-position: -740px -560px; }
-.emoji-1F6C1 { background-position: -740px -580px; }
-.emoji-1F6C2 { background-position: -740px -600px; }
-.emoji-1F6C3 { background-position: -740px -620px; }
-.emoji-1F6C4 { background-position: -740px -640px; }
-.emoji-1F6C5 { background-position: -740px -660px; }
-.emoji-1F6CB { background-position: -740px -680px; }
-.emoji-1F6CC { background-position: -740px -700px; }
-.emoji-1F6CD { background-position: -740px -720px; }
-.emoji-1F6CE { background-position: 0 -740px; }
-.emoji-1F6CF { background-position: -20px -740px; }
-.emoji-1F6D0 { background-position: -40px -740px; }
-.emoji-1F6D1 { background-position: -60px -740px; }
-.emoji-1F6D2 { background-position: -80px -740px; }
-.emoji-1F6E0 { background-position: -100px -740px; }
-.emoji-1F6E1 { background-position: -120px -740px; }
-.emoji-1F6E2 { background-position: -140px -740px; }
-.emoji-1F6E3 { background-position: -160px -740px; }
-.emoji-1F6E4 { background-position: -180px -740px; }
-.emoji-1F6E5 { background-position: -200px -740px; }
-.emoji-1F6E9 { background-position: -220px -740px; }
-.emoji-1F6EB { background-position: -240px -740px; }
-.emoji-1F6EC { background-position: -260px -740px; }
-.emoji-1F6F0 { background-position: -280px -740px; }
-.emoji-1F6F3 { background-position: -300px -740px; }
-.emoji-1F6F4 { background-position: -320px -740px; }
-.emoji-1F6F5 { background-position: -340px -740px; }
-.emoji-1F6F6 { background-position: -360px -740px; }
-.emoji-1F910 { background-position: -380px -740px; }
-.emoji-1F911 { background-position: -400px -740px; }
-.emoji-1F912 { background-position: -420px -740px; }
-.emoji-1F913 { background-position: -440px -740px; }
-.emoji-1F914 { background-position: -460px -740px; }
-.emoji-1F915 { background-position: -480px -740px; }
-.emoji-1F916 { background-position: -500px -740px; }
-.emoji-1F917 { background-position: -520px -740px; }
-.emoji-1F918 { background-position: -540px -740px; }
-.emoji-1F918-1F3FB { background-position: -560px -740px; }
-.emoji-1F918-1F3FC { background-position: -580px -740px; }
-.emoji-1F918-1F3FD { background-position: -600px -740px; }
-.emoji-1F918-1F3FE { background-position: -620px -740px; }
-.emoji-1F918-1F3FF { background-position: -640px -740px; }
-.emoji-1F919 { background-position: -660px -740px; }
-.emoji-1F919-1F3FB { background-position: -680px -740px; }
-.emoji-1F919-1F3FC { background-position: -700px -740px; }
-.emoji-1F919-1F3FD { background-position: -720px -740px; }
-.emoji-1F919-1F3FE { background-position: -740px -740px; }
-.emoji-1F919-1F3FF { background-position: -760px 0; }
-.emoji-1F91A { background-position: -760px -20px; }
-.emoji-1F91A-1F3FB { background-position: -760px -40px; }
-.emoji-1F91A-1F3FC { background-position: -760px -60px; }
-.emoji-1F91A-1F3FD { background-position: -760px -80px; }
-.emoji-1F91A-1F3FE { background-position: -760px -100px; }
-.emoji-1F91A-1F3FF { background-position: -760px -120px; }
-.emoji-1F91B { background-position: -760px -140px; }
-.emoji-1F91B-1F3FB { background-position: -760px -160px; }
-.emoji-1F91B-1F3FC { background-position: -760px -180px; }
-.emoji-1F91B-1F3FD { background-position: -760px -200px; }
-.emoji-1F91B-1F3FE { background-position: -760px -220px; }
-.emoji-1F91B-1F3FF { background-position: -760px -240px; }
-.emoji-1F91C { background-position: -760px -260px; }
-.emoji-1F91C-1F3FB { background-position: -760px -280px; }
-.emoji-1F91C-1F3FC { background-position: -760px -300px; }
-.emoji-1F91C-1F3FD { background-position: -760px -320px; }
-.emoji-1F91C-1F3FE { background-position: -760px -340px; }
-.emoji-1F91C-1F3FF { background-position: -760px -360px; }
-.emoji-1F91D { background-position: -760px -380px; }
-.emoji-1F91D-1F3FB { background-position: -760px -400px; }
-.emoji-1F91D-1F3FC { background-position: -760px -420px; }
-.emoji-1F91D-1F3FD { background-position: -760px -440px; }
-.emoji-1F91D-1F3FE { background-position: -760px -460px; }
-.emoji-1F91D-1F3FF { background-position: -760px -480px; }
-.emoji-1F91E { background-position: -760px -500px; }
-.emoji-1F91E-1F3FB { background-position: -760px -520px; }
-.emoji-1F91E-1F3FC { background-position: -760px -540px; }
-.emoji-1F91E-1F3FD { background-position: -760px -560px; }
-.emoji-1F91E-1F3FE { background-position: -760px -580px; }
-.emoji-1F91E-1F3FF { background-position: -760px -600px; }
-.emoji-1F920 { background-position: -760px -620px; }
-.emoji-1F921 { background-position: -760px -640px; }
-.emoji-1F922 { background-position: -760px -660px; }
-.emoji-1F923 { background-position: -760px -680px; }
-.emoji-1F924 { background-position: -760px -700px; }
-.emoji-1F925 { background-position: -760px -720px; }
-.emoji-1F926 { background-position: -760px -740px; }
-.emoji-1F926-1F3FB { background-position: 0 -760px; }
-.emoji-1F926-1F3FC { background-position: -20px -760px; }
-.emoji-1F926-1F3FD { background-position: -40px -760px; }
-.emoji-1F926-1F3FE { background-position: -60px -760px; }
-.emoji-1F926-1F3FF { background-position: -80px -760px; }
-.emoji-1F927 { background-position: -100px -760px; }
-.emoji-1F930 { background-position: -120px -760px; }
-.emoji-1F930-1F3FB { background-position: -140px -760px; }
-.emoji-1F930-1F3FC { background-position: -160px -760px; }
-.emoji-1F930-1F3FD { background-position: -180px -760px; }
-.emoji-1F930-1F3FE { background-position: -200px -760px; }
-.emoji-1F930-1F3FF { background-position: -220px -760px; }
-.emoji-1F933 { background-position: -240px -760px; }
-.emoji-1F933-1F3FB { background-position: -260px -760px; }
-.emoji-1F933-1F3FC { background-position: -280px -760px; }
-.emoji-1F933-1F3FD { background-position: -300px -760px; }
-.emoji-1F933-1F3FE { background-position: -320px -760px; }
-.emoji-1F933-1F3FF { background-position: -340px -760px; }
-.emoji-1F934 { background-position: -360px -760px; }
-.emoji-1F934-1F3FB { background-position: -380px -760px; }
-.emoji-1F934-1F3FC { background-position: -400px -760px; }
-.emoji-1F934-1F3FD { background-position: -420px -760px; }
-.emoji-1F934-1F3FE { background-position: -440px -760px; }
-.emoji-1F934-1F3FF { background-position: -460px -760px; }
-.emoji-1F935 { background-position: -480px -760px; }
-.emoji-1F935-1F3FB { background-position: -500px -760px; }
-.emoji-1F935-1F3FC { background-position: -520px -760px; }
-.emoji-1F935-1F3FD { background-position: -540px -760px; }
-.emoji-1F935-1F3FE { background-position: -560px -760px; }
-.emoji-1F935-1F3FF { background-position: -580px -760px; }
-.emoji-1F936 { background-position: -600px -760px; }
-.emoji-1F936-1F3FB { background-position: -620px -760px; }
-.emoji-1F936-1F3FC { background-position: -640px -760px; }
-.emoji-1F936-1F3FD { background-position: -660px -760px; }
-.emoji-1F936-1F3FE { background-position: -680px -760px; }
-.emoji-1F936-1F3FF { background-position: -700px -760px; }
-.emoji-1F937 { background-position: -720px -760px; }
-.emoji-1F937-1F3FB { background-position: -740px -760px; }
-.emoji-1F937-1F3FC { background-position: -760px -760px; }
-.emoji-1F937-1F3FD { background-position: -780px 0; }
-.emoji-1F937-1F3FE { background-position: -780px -20px; }
-.emoji-1F937-1F3FF { background-position: -780px -40px; }
-.emoji-1F938 { background-position: -780px -60px; }
-.emoji-1F938-1F3FB { background-position: -780px -80px; }
-.emoji-1F938-1F3FC { background-position: -780px -100px; }
-.emoji-1F938-1F3FD { background-position: -780px -120px; }
-.emoji-1F938-1F3FE { background-position: -780px -140px; }
-.emoji-1F938-1F3FF { background-position: -780px -160px; }
-.emoji-1F939 { background-position: -780px -180px; }
-.emoji-1F939-1F3FB { background-position: -780px -200px; }
-.emoji-1F939-1F3FC { background-position: -780px -220px; }
-.emoji-1F939-1F3FD { background-position: -780px -240px; }
-.emoji-1F939-1F3FE { background-position: -780px -260px; }
-.emoji-1F939-1F3FF { background-position: -780px -280px; }
-.emoji-1F93A { background-position: -780px -300px; }
-.emoji-1F93C { background-position: -780px -320px; }
-.emoji-1F93C-1F3FB { background-position: -780px -340px; }
-.emoji-1F93C-1F3FC { background-position: -780px -360px; }
-.emoji-1F93C-1F3FD { background-position: -780px -380px; }
-.emoji-1F93C-1F3FE { background-position: -780px -400px; }
-.emoji-1F93C-1F3FF { background-position: -780px -420px; }
-.emoji-1F93D { background-position: -780px -440px; }
-.emoji-1F93D-1F3FB { background-position: -780px -460px; }
-.emoji-1F93D-1F3FC { background-position: -780px -480px; }
-.emoji-1F93D-1F3FD { background-position: -780px -500px; }
-.emoji-1F93D-1F3FE { background-position: -780px -520px; }
-.emoji-1F93D-1F3FF { background-position: -780px -540px; }
-.emoji-1F93E { background-position: -780px -560px; }
-.emoji-1F93E-1F3FB { background-position: -780px -580px; }
-.emoji-1F93E-1F3FC { background-position: -780px -600px; }
-.emoji-1F93E-1F3FD { background-position: -780px -620px; }
-.emoji-1F93E-1F3FE { background-position: -780px -640px; }
-.emoji-1F93E-1F3FF { background-position: -780px -660px; }
-.emoji-1F940 { background-position: -780px -680px; }
-.emoji-1F941 { background-position: -780px -700px; }
-.emoji-1F942 { background-position: -780px -720px; }
-.emoji-1F943 { background-position: -780px -740px; }
-.emoji-1F944 { background-position: -780px -760px; }
-.emoji-1F945 { background-position: 0 -780px; }
-.emoji-1F947 { background-position: -20px -780px; }
-.emoji-1F948 { background-position: -40px -780px; }
-.emoji-1F949 { background-position: -60px -780px; }
-.emoji-1F94A { background-position: -80px -780px; }
-.emoji-1F94B { background-position: -100px -780px; }
-.emoji-1F950 { background-position: -120px -780px; }
-.emoji-1F951 { background-position: -140px -780px; }
-.emoji-1F952 { background-position: -160px -780px; }
-.emoji-1F953 { background-position: -180px -780px; }
-.emoji-1F954 { background-position: -200px -780px; }
-.emoji-1F955 { background-position: -220px -780px; }
-.emoji-1F956 { background-position: -240px -780px; }
-.emoji-1F957 { background-position: -260px -780px; }
-.emoji-1F958 { background-position: -280px -780px; }
-.emoji-1F959 { background-position: -300px -780px; }
-.emoji-1F95A { background-position: -320px -780px; }
-.emoji-1F95B { background-position: -340px -780px; }
-.emoji-1F95C { background-position: -360px -780px; }
-.emoji-1F95D { background-position: -380px -780px; }
-.emoji-1F95E { background-position: -400px -780px; }
-.emoji-1F980 { background-position: -420px -780px; }
-.emoji-1F981 { background-position: -440px -780px; }
-.emoji-1F982 { background-position: -460px -780px; }
-.emoji-1F983 { background-position: -480px -780px; }
-.emoji-1F984 { background-position: -500px -780px; }
-.emoji-1F985 { background-position: -520px -780px; }
-.emoji-1F986 { background-position: -540px -780px; }
-.emoji-1F987 { background-position: -560px -780px; }
-.emoji-1F988 { background-position: -580px -780px; }
-.emoji-1F989 { background-position: -600px -780px; }
-.emoji-1F98A { background-position: -620px -780px; }
-.emoji-1F98B { background-position: -640px -780px; }
-.emoji-1F98C { background-position: -660px -780px; }
-.emoji-1F98D { background-position: -680px -780px; }
-.emoji-1F98E { background-position: -700px -780px; }
-.emoji-1F98F { background-position: -720px -780px; }
-.emoji-1F990 { background-position: -740px -780px; }
-.emoji-1F991 { background-position: -760px -780px; }
-.emoji-1F9C0 { background-position: -780px -780px; }
-.emoji-203C { background-position: -800px 0; }
-.emoji-2049 { background-position: -800px -20px; }
-.emoji-2122 { background-position: -800px -40px; }
-.emoji-2139 { background-position: -800px -60px; }
-.emoji-2194 { background-position: -800px -80px; }
-.emoji-2195 { background-position: -800px -100px; }
-.emoji-2196 { background-position: -800px -120px; }
-.emoji-2197 { background-position: -800px -140px; }
-.emoji-2198 { background-position: -800px -160px; }
-.emoji-2199 { background-position: -800px -180px; }
-.emoji-21A9 { background-position: -800px -200px; }
-.emoji-21AA { background-position: -800px -220px; }
-.emoji-231A { background-position: -800px -240px; }
-.emoji-231B { background-position: -800px -260px; }
-.emoji-2328 { background-position: -800px -280px; }
-.emoji-23CF { background-position: -800px -300px; }
-.emoji-23E9 { background-position: -800px -320px; }
-.emoji-23EA { background-position: -800px -340px; }
-.emoji-23EB { background-position: -800px -360px; }
-.emoji-23EC { background-position: -800px -380px; }
-.emoji-23ED { background-position: -800px -400px; }
-.emoji-23EE { background-position: -800px -420px; }
-.emoji-23EF { background-position: -800px -440px; }
-.emoji-23F0 { background-position: -800px -460px; }
-.emoji-23F1 { background-position: -800px -480px; }
-.emoji-23F2 { background-position: -800px -500px; }
-.emoji-23F3 { background-position: -800px -520px; }
-.emoji-23F8 { background-position: -800px -540px; }
-.emoji-23F9 { background-position: -800px -560px; }
-.emoji-23FA { background-position: -800px -580px; }
-.emoji-24C2 { background-position: -800px -600px; }
-.emoji-25AA { background-position: -800px -620px; }
-.emoji-25AB { background-position: -800px -640px; }
-.emoji-25B6 { background-position: -800px -660px; }
-.emoji-25C0 { background-position: -800px -680px; }
-.emoji-25FB { background-position: -800px -700px; }
-.emoji-25FC { background-position: -800px -720px; }
-.emoji-25FD { background-position: -800px -740px; }
-.emoji-25FE { background-position: -800px -760px; }
-.emoji-2600 { background-position: -800px -780px; }
-.emoji-2601 { background-position: 0 -800px; }
-.emoji-2602 { background-position: -20px -800px; }
-.emoji-2603 { background-position: -40px -800px; }
-.emoji-2604 { background-position: -60px -800px; }
-.emoji-260E { background-position: -80px -800px; }
-.emoji-2611 { background-position: -100px -800px; }
-.emoji-2614 { background-position: -120px -800px; }
-.emoji-2615 { background-position: -140px -800px; }
-.emoji-2618 { background-position: -160px -800px; }
-.emoji-261D { background-position: -180px -800px; }
-.emoji-261D-1F3FB { background-position: -200px -800px; }
-.emoji-261D-1F3FC { background-position: -220px -800px; }
-.emoji-261D-1F3FD { background-position: -240px -800px; }
-.emoji-261D-1F3FE { background-position: -260px -800px; }
-.emoji-261D-1F3FF { background-position: -280px -800px; }
-.emoji-2620 { background-position: -300px -800px; }
-.emoji-2622 { background-position: -320px -800px; }
-.emoji-2623 { background-position: -340px -800px; }
-.emoji-2626 { background-position: -360px -800px; }
-.emoji-262A { background-position: -380px -800px; }
-.emoji-262E { background-position: -400px -800px; }
-.emoji-262F { background-position: -420px -800px; }
-.emoji-2638 { background-position: -440px -800px; }
-.emoji-2639 { background-position: -460px -800px; }
-.emoji-263A { background-position: -480px -800px; }
-.emoji-2648 { background-position: -500px -800px; }
-.emoji-2649 { background-position: -520px -800px; }
-.emoji-264A { background-position: -540px -800px; }
-.emoji-264B { background-position: -560px -800px; }
-.emoji-264C { background-position: -580px -800px; }
-.emoji-264D { background-position: -600px -800px; }
-.emoji-264E { background-position: -620px -800px; }
-.emoji-264F { background-position: -640px -800px; }
-.emoji-2650 { background-position: -660px -800px; }
-.emoji-2651 { background-position: -680px -800px; }
-.emoji-2652 { background-position: -700px -800px; }
-.emoji-2653 { background-position: -720px -800px; }
-.emoji-2660 { background-position: -740px -800px; }
-.emoji-2663 { background-position: -760px -800px; }
-.emoji-2665 { background-position: -780px -800px; }
-.emoji-2666 { background-position: -800px -800px; }
-.emoji-2668 { background-position: -820px 0; }
-.emoji-267B { background-position: -820px -20px; }
-.emoji-267F { background-position: -820px -40px; }
-.emoji-2692 { background-position: -820px -60px; }
-.emoji-2693 { background-position: -820px -80px; }
-.emoji-2694 { background-position: -820px -100px; }
-.emoji-2696 { background-position: -820px -120px; }
-.emoji-2697 { background-position: -820px -140px; }
-.emoji-2699 { background-position: -820px -160px; }
-.emoji-269B { background-position: -820px -180px; }
-.emoji-269C { background-position: -820px -200px; }
-.emoji-26A0 { background-position: -820px -220px; }
-.emoji-26A1 { background-position: -820px -240px; }
-.emoji-26AA { background-position: -820px -260px; }
-.emoji-26AB { background-position: -820px -280px; }
-.emoji-26B0 { background-position: -820px -300px; }
-.emoji-26B1 { background-position: -820px -320px; }
-.emoji-26BD { background-position: -820px -340px; }
-.emoji-26BE { background-position: -820px -360px; }
-.emoji-26C4 { background-position: -820px -380px; }
-.emoji-26C5 { background-position: -820px -400px; }
-.emoji-26C8 { background-position: -820px -420px; }
-.emoji-26CE { background-position: -820px -440px; }
-.emoji-26CF { background-position: -820px -460px; }
-.emoji-26D1 { background-position: -820px -480px; }
-.emoji-26D3 { background-position: -820px -500px; }
-.emoji-26D4 { background-position: -820px -520px; }
-.emoji-26E9 { background-position: -820px -540px; }
-.emoji-26EA { background-position: -820px -560px; }
-.emoji-26F0 { background-position: -820px -580px; }
-.emoji-26F1 { background-position: -820px -600px; }
-.emoji-26F2 { background-position: -820px -620px; }
-.emoji-26F3 { background-position: -820px -640px; }
-.emoji-26F4 { background-position: -820px -660px; }
-.emoji-26F5 { background-position: -820px -680px; }
-.emoji-26F7 { background-position: -820px -700px; }
-.emoji-26F8 { background-position: -820px -720px; }
-.emoji-26F9 { background-position: -820px -740px; }
-.emoji-26F9-1F3FB { background-position: -820px -760px; }
-.emoji-26F9-1F3FC { background-position: -820px -780px; }
-.emoji-26F9-1F3FD { background-position: -820px -800px; }
-.emoji-26F9-1F3FE { background-position: 0 -820px; }
-.emoji-26F9-1F3FF { background-position: -20px -820px; }
-.emoji-26FA { background-position: -40px -820px; }
-.emoji-26FD { background-position: -60px -820px; }
-.emoji-2702 { background-position: -80px -820px; }
-.emoji-2705 { background-position: -100px -820px; }
-.emoji-2708 { background-position: -120px -820px; }
-.emoji-2709 { background-position: -140px -820px; }
-.emoji-270A { background-position: -160px -820px; }
-.emoji-270A-1F3FB { background-position: -180px -820px; }
-.emoji-270A-1F3FC { background-position: -200px -820px; }
-.emoji-270A-1F3FD { background-position: -220px -820px; }
-.emoji-270A-1F3FE { background-position: -240px -820px; }
-.emoji-270A-1F3FF { background-position: -260px -820px; }
-.emoji-270B { background-position: -280px -820px; }
-.emoji-270B-1F3FB { background-position: -300px -820px; }
-.emoji-270B-1F3FC { background-position: -320px -820px; }
-.emoji-270B-1F3FD { background-position: -340px -820px; }
-.emoji-270B-1F3FE { background-position: -360px -820px; }
-.emoji-270B-1F3FF { background-position: -380px -820px; }
-.emoji-270C { background-position: -400px -820px; }
-.emoji-270C-1F3FB { background-position: -420px -820px; }
-.emoji-270C-1F3FC { background-position: -440px -820px; }
-.emoji-270C-1F3FD { background-position: -460px -820px; }
-.emoji-270C-1F3FE { background-position: -480px -820px; }
-.emoji-270C-1F3FF { background-position: -500px -820px; }
-.emoji-270D { background-position: -520px -820px; }
-.emoji-270D-1F3FB { background-position: -540px -820px; }
-.emoji-270D-1F3FC { background-position: -560px -820px; }
-.emoji-270D-1F3FD { background-position: -580px -820px; }
-.emoji-270D-1F3FE { background-position: -600px -820px; }
-.emoji-270D-1F3FF { background-position: -620px -820px; }
-.emoji-270F { background-position: -640px -820px; }
-.emoji-2712 { background-position: -660px -820px; }
-.emoji-2714 { background-position: -680px -820px; }
-.emoji-2716 { background-position: -700px -820px; }
-.emoji-271D { background-position: -720px -820px; }
-.emoji-2721 { background-position: -740px -820px; }
-.emoji-2728 { background-position: -760px -820px; }
-.emoji-2733 { background-position: -780px -820px; }
-.emoji-2734 { background-position: -800px -820px; }
-.emoji-2744 { background-position: -820px -820px; }
-.emoji-2747 { background-position: -840px 0; }
-.emoji-274C { background-position: -840px -20px; }
-.emoji-274E { background-position: -840px -40px; }
-.emoji-2753 { background-position: -840px -60px; }
-.emoji-2754 { background-position: -840px -80px; }
-.emoji-2755 { background-position: -840px -100px; }
-.emoji-2757 { background-position: -840px -120px; }
-.emoji-2763 { background-position: -840px -140px; }
-.emoji-2764 { background-position: -840px -160px; }
-.emoji-2795 { background-position: -840px -180px; }
-.emoji-2796 { background-position: -840px -200px; }
-.emoji-2797 { background-position: -840px -220px; }
-.emoji-27A1 { background-position: -840px -240px; }
-.emoji-27B0 { background-position: -840px -260px; }
-.emoji-27BF { background-position: -840px -280px; }
-.emoji-2934 { background-position: -840px -300px; }
-.emoji-2935 { background-position: -840px -320px; }
-.emoji-2B05 { background-position: -840px -340px; }
-.emoji-2B06 { background-position: -840px -360px; }
-.emoji-2B07 { background-position: -840px -380px; }
-.emoji-2B1B { background-position: -840px -400px; }
-.emoji-2B1C { background-position: -840px -420px; }
-.emoji-2B50 { background-position: -840px -440px; }
-.emoji-2B55 { background-position: -840px -460px; }
-.emoji-3030 { background-position: -840px -480px; }
-.emoji-303D { background-position: -840px -500px; }
-.emoji-3297 { background-position: -840px -520px; }
-.emoji-3299 { background-position: -840px -540px; }
-
-.emoji-icon {
-  background-image: image-url('emoji.png');
-  background-repeat: no-repeat;
-  height: 20px;
-  width: 20px;
-
-  @media only screen and (-webkit-min-device-pixel-ratio: 2),
-         only screen and (min--moz-device-pixel-ratio: 2),
-         only screen and (-o-min-device-pixel-ratio: 2/1),
-         only screen and (min-device-pixel-ratio: 2),
-         only screen and (min-resolution: 192dpi),
-         only screen and (min-resolution: 2dppx) {
-    background-image: image-url('emoji@2x.png');
-    background-size: 860px 840px;
-  }
-}
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index fc49ff780fc..3d91e0b22d8 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -1,75 +1,233 @@
-.environments-container,
-.deployments-container {
+@media (max-width: $screen-md-max) {
+  .deployments-container {
+    width: 100%;
+    overflow: auto;
+  }
+}
+
+.environments-list-loading {
   width: 100%;
-  overflow: auto;
+  font-size: 34px;
 }
 
-.environments {
-  .deployment-column {
-    .avatar {
-      float: none;
+.environments-folder-name {
+  font-weight: normal;
+  padding-top: 20px;
+}
+
+.environments-container {
+  .table-holder {
+    width: 100%;
+
+    @media (max-width: $screen-sm-max) {
+      overflow: auto;
     }
   }
 
-  .commit-title {
-    margin: 0;
-  }
+  .table.ci-table {
+    .environments-actions {
+      min-width: 300px;
+    }
 
-  .icon-play {
-    height: 13px;
-    width: 12px;
-  }
+    .environments-commit,
+    .environments-actions {
+      width: 20%;
+    }
 
-  .external-url,
-  .dropdown-new {
-    color: $table-text-gray;
-  }
+    .environments-date {
+      width: 10%;
+    }
 
-  .dropdown-menu {
+    .environments-name,
+    .environments-deploy,
+    .environments-build {
+      width: 15%;
+    }
+
+    .deployment-column {
+      > span {
+        word-break: break-all;
+      }
 
-    .fa {
-      margin-right: 6px;
-      color: $table-text-gray;
+      .avatar {
+        float: none;
+      }
     }
-  }
 
-  .build-link,
-  .branch-name {
-    color: $gl-dark-link-color;
-  }
+    .btn-group {
 
-  .stop-env-link {
-    color: $table-text-gray;
+      > a {
+        color: $gl-text-color-secondary;
+      }
+
+      svg path {
+        fill: $gl-text-color-secondary;
+      }
+
+      .dropdown {
+        outline: none;
+      }
+    }
 
-    .stop-env-icon {
-      font-size: 14px;
+    .commit-title {
+      margin: 0;
     }
-  }
 
-  .deployment {
-    .build-column {
+    .avatar-image-container {
+      text-decoration: none;
+    }
+
+    .icon-play {
+      height: 13px;
+      width: 12px;
+    }
+
+    .external-url,
+    .dropdown-new {
+      color: $gl-text-color-secondary;
+    }
+
+    .dropdown-menu {
+      .fa {
+        margin-right: 6px;
+        color: $gl-text-color-secondary;
+      }
+    }
+
+    .build-link,
+    .branch-name {
+      color: $gl-text-color;
+    }
+
+    .stop-env-link,
+    .external-url {
+      color: $gl-text-color-secondary;
+
+      .stop-env-icon {
+        font-size: 14px;
+      }
+    }
 
+    .deployment .build-column {
       .build-link {
-        color: $gl-dark-link-color;
+        color: $gl-text-color;
       }
 
       .avatar {
         float: none;
       }
     }
+
+    .folder-icon {
+      margin-right: 3px;
+      color: $gl-text-color-secondary;
+      display: inline-block;
+
+      .fa:nth-child(1) {
+        margin-right: 3px;
+      }
+    }
+
+    .folder-name {
+      cursor: pointer;
+      color: $gl-text-color-secondary;
+      display: inline-block;
+    }
+
+    .icon-container {
+      width: 20px;
+      text-align: center;
+    }
+
+    .branch-commit {
+      .commit-id {
+        margin-right: 0;
+      }
+    }
+
+    .no-btn {
+      border: none;
+      background: none;
+      outline: none;
+      width: 100%;
+      text-align: left;
+    }
+  }
+}
+
+.prometheus-graph {
+  text {
+    fill: $stat-graph-axis-fill;
   }
 }
 
-.table.ci-table.environments {
+.x-axis path,
+.y-axis path,
+.label-x-axis-line,
+.label-y-axis-line {
+  fill: none;
+  stroke-width: 1;
+  shape-rendering: crispEdges;
+}
+
+.x-axis path,
+.y-axis path {
+  stroke: $stat-graph-axis-fill;
+}
 
-  .icon-container {
-    width: 20px;
-    text-align: center;
+.label-x-axis-line,
+.label-y-axis-line {
+  stroke: $border-color;
+}
+
+.y-axis {
+  line {
+    stroke: $stat-graph-axis-fill;
+    stroke-width: 1;
   }
+}
 
-  .branch-commit {
-    .commit-id {
-      margin-right: 0;
-    }
+.metric-area {
+  opacity: 0.8;
+}
+
+.prometheus-graph-overlay {
+  fill: none;
+  opacity: 0.0;
+  pointer-events: all;
+}
+
+.rect-text-metric {
+  fill: $white-light;
+  stroke-width: 1;
+  stroke: $black;
+}
+
+.rect-axis-text {
+  fill: $white-light;
+}
+
+.text-metric,
+.text-median-metric,
+.text-metric-usage,
+.text-metric-date {
+  fill: $black;
+}
+
+.text-metric-date {
+  font-weight: 200;
+}
+
+.selected-metric-line {
+  stroke: $black;
+  stroke-width: 1;
+}
+
+.environments-actions {
+  .external-url,
+  .monitoring-url,
+  .terminal-button,
+  .stop-env-link {
+    width: 38px;
   }
 }
diff --git a/app/assets/stylesheets/pages/errors.scss b/app/assets/stylesheets/pages/errors.scss
deleted file mode 100644
index 11309817d31..00000000000
--- a/app/assets/stylesheets/pages/errors.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.error-page {
-  max-width: 400px;
-  margin: 0 auto;
-
-  h1,
-  h2,
-  h3 {
-    text-align: center;
-  }
-
-  h1 {
-    font-size: 56px;
-    line-height: 100px;
-    font-weight: 300;
-  }
-}
diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss
index 3004959ff7b..08398bb43a2 100644
--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -5,7 +5,7 @@
 .event-item {
   font-size: $gl-font-size;
   padding: $gl-padding-top 0 $gl-padding-top ($gl-avatar-size + $gl-padding-top);
-  border-bottom: 1px solid $table-border-color;
+  border-bottom: 1px solid $white-normal;
   color: $list-text-color;
 
   &.event-inline {
@@ -21,7 +21,7 @@
   }
 
   a {
-    color: $gl-dark-link-color;
+    color: $gl-text-color;
   }
 
   .avatar {
@@ -41,7 +41,6 @@
       word-wrap: break-word;
 
       .md {
-        color: $gl-grayish-blue;
         font-size: $gl-font-size;
 
         .label {
@@ -62,7 +61,7 @@
         border: none;
         background: $gray-light;
         border-radius: 0;
-        color: #777;
+        color: $events-pre-color;
         margin: 0 20px;
         overflow: hidden;
       }
@@ -80,7 +79,7 @@
     }
 
     .event-note-icon {
-      color: #777;
+      color: $events-pre-color;
       float: left;
       font-size: $gl-font-size;
       line-height: 16px;
@@ -91,7 +90,7 @@
   .event_icon {
     position: relative;
     float: right;
-    border: 1px solid #eee;
+    border: 1px solid $gray-darker;
     padding: 5px;
     border-radius: 5px;
     background: $gray-light;
@@ -156,7 +155,7 @@
 
 @media (max-width: $screen-xs-max) {
   .event-item {
-    padding-left: $gl-padding;
+    padding-left: 0;
 
     .event-title {
       white-space: normal;
@@ -170,8 +169,7 @@
 
     .event-body {
       margin: 0;
-      border-left: 2px solid #ddd;
-      padding-left: 10px;
+      padding-left: 0;
     }
 
     .event-item-timestamp {
@@ -186,4 +184,3 @@
     display: none;
   }
 }
-
diff --git a/app/assets/stylesheets/pages/explore.scss b/app/assets/stylesheets/pages/explore.scss
deleted file mode 100644
index 9b92128624c..00000000000
--- a/app/assets/stylesheets/pages/explore.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.explore-title {
-  text-align: center;
-
-  h3 {
-    font-weight: normal;
-    font-size: 30px;
-  }
-}
diff --git a/app/assets/stylesheets/pages/graph.scss b/app/assets/stylesheets/pages/graph.scss
index f7f9a9bb770..84da9180f93 100644
--- a/app/assets/stylesheets/pages/graph.scss
+++ b/app/assets/stylesheets/pages/graph.scss
@@ -2,15 +2,15 @@
   border: 1px solid $border-color;
 
   .controls {
-    color: #888;
+    color: $project-network-controls-color;
     font-size: 14px;
     padding: 5px;
     border-bottom: 1px solid $border-color;
-    background: #eee;
+    background: $gray-darker;
   }
 
   .network-graph {
-    background: #fff;
+    background: $white-light;
     height: 500px;
     overflow-y: scroll;
     overflow-x: hidden;
@@ -20,15 +20,14 @@
 .graphs {
   .graph-author-email {
     float: right;
-    color: #777;
+    color: $graph-author-email-color;
   }
 
   .graph-additions {
-    color: #4a2;
+    color: $gl-text-green;
   }
 
   .graph-deletions {
-    color: #d12f19;
+    color: $gl-text-red;
   }
 }
-
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index 4375e29c8db..73a5889867a 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -9,50 +9,24 @@
   }
 }
 
-.group-row {
-
-  .stats {
-    float: right;
-    line-height: $list-text-height;
-    color: $gl-gray;
+.group-root-path {
+  max-width: 40vw;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-wrap: nowrap;
+}
 
-    span {
-      margin-right: 15px;
-    }
-  }
+.group-row {
+  @include basic-list-stats;
 }
 
 .ldap-group-links {
-
   .form-actions {
     margin-bottom: $gl-padding;
   }
 }
 
-.groups-cover-block {
-
-  .container-fluid {
-    position: relative;
-  }
-
-  .group-right-buttons {
-    position: absolute;
-    right: 16px;
-
-    .btn {
-      @include btn-gray;
-      padding: 3px 10px;
-      background-color: $background-color;
-    }
-  }
-
-  .group-avatar {
-    border: 0;
-  }
-}
-
 .groups-header {
-
   @media (min-width: $screen-sm-min) {
     .nav-links {
       width: 35%;
@@ -68,14 +42,14 @@
   padding: 50px 100px;
   overflow: hidden;
 
-  @media (max-width: $screen-md-min) {
+  @media (max-width: $screen-sm-max) {
     padding: 50px 0;
   }
 
   svg {
     float: right;
 
-    @media (max-width: $screen-md-min) {
+    @media (max-width: $screen-sm-max) {
       float: none;
       display: block;
       width: 250px;
@@ -90,7 +64,7 @@
     width: 460px;
     margin-top: 120px;
 
-    @media (max-width: $screen-md-min) {
+    @media (max-width: $screen-sm-max) {
       float: none;
       margin-top: 60px;
       width: auto;
@@ -98,3 +72,19 @@
     }
   }
 }
+
+.mattermost-icon svg {
+  width: 16px;
+  height: 16px;
+  vertical-align: text-bottom;
+}
+
+.mattermost-team-name {
+  color: $gl-text-color-secondary;
+}
+
+.mattermost-info {
+  display: block;
+  color: $gl-text-color-secondary;
+  margin-top: 10px;
+}
diff --git a/app/assets/stylesheets/pages/help.scss b/app/assets/stylesheets/pages/help.scss
index a48b4c65db8..dae8ccdef6c 100644
--- a/app/assets/stylesheets/pages/help.scss
+++ b/app/assets/stylesheets/pages/help.scss
@@ -9,7 +9,7 @@
 
   li {
     line-height: 24px;
-    color: #888;
+    color: $document-index-color;
 
     a {
       margin-right: 3px;
@@ -20,7 +20,7 @@
 
 .shortcut-mappings {
   font-size: 12px;
-  color: #555;
+  color: $help-shortcut-mapping-color;
 
   tbody:first-child tr:first-child {
     padding-top: 0;
@@ -29,7 +29,7 @@
   th {
     padding-top: 15px;
     line-height: 1.5;
-    color: #333;
+    color: $help-shortcut-header-color;
     text-align: left;
   }
 
@@ -42,7 +42,7 @@
 
   .shortcut {
     padding-right: 10px;
-    color: #999;
+    color: $help-shortcut-color;
     text-align: right;
     white-space: nowrap;
   }
@@ -60,7 +60,7 @@
 
   // Border around images in the help pages.
   img:not(.emoji) {
-    border: 1px solid $table-border-gray;
+    border: 1px solid $white-normal;
     padding: 5px;
     margin: 5px;
     max-height: calc(100vh - 100px);
diff --git a/app/assets/stylesheets/pages/icons.scss b/app/assets/stylesheets/pages/icons.scss
deleted file mode 100644
index 407c8db211d..00000000000
--- a/app/assets/stylesheets/pages/icons.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-// CI icon colors
-
-.ci-status-icon {
-  &-created {
-    fill: $gray-darkest;
-  }
-
-  &-skipped,
-  &-canceled {
-    fill: $gl-text-color;
-  }
-}
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 230b927a17d..e84a05e3e9e 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -1,3 +1,48 @@
+// Limit MR description for side-by-side diff view
+.fixed-width-container {
+  max-width: $limited-layout-width - ($gl-padding * 2);
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.limit-container-width {
+  .detail-page-header {
+    @extend .fixed-width-container;
+  }
+
+  .issuable-details {
+    .detail-page-description,
+    .mr-source-target,
+    .mr-state-widget,
+    .merge-manually {
+      @extend .fixed-width-container;
+    }
+
+    .merge-request-tabs-holder {
+      &.affix {
+        border-bottom: 1px solid $border-color;
+
+        .nav-links {
+          border: 0;
+        }
+      }
+    }
+  }
+
+  .merge-request-details {
+    .emoji-list-container {
+      @extend .fixed-width-container;
+    }
+  }
+
+  .diffs {
+    .mr-version-controls,
+    .files-changed {
+      @extend .fixed-width-container;
+    }
+  }
+}
+
 .issuable-details {
   section {
     .issuable-discussion {
@@ -5,11 +50,16 @@
     }
   }
 
+  .title {
+    padding: 0;
+    margin: 0;
+    border-bottom: none;
+  }
+
   // Border around images in issue and MR descriptions.
   .description img:not(.emoji) {
-    border: 1px solid $table-border-gray;
+    border: 1px solid $white-normal;
     padding: 5px;
-    margin: 5px;
     max-height: calc(100vh - 100px);
   }
 }
@@ -30,6 +80,7 @@
 
     .color-label {
       padding: 6px 10px;
+      border-radius: $label-border-radius;
     }
   }
 
@@ -50,7 +101,7 @@
   .block {
     @include clearfix;
     padding: $gl-padding 0;
-    border-bottom: 1px solid $border-gray-light;
+    border-bottom: 1px solid $border-gray-normal;
     // This prevents the mess when resizing the sidebar
     // of elements repositioning themselves..
     width: $gutter_inner_width;
@@ -97,10 +148,10 @@
     }
 
     .edit-link {
-      color: $gl-gray;
+      color: $gl-text-color;
 
-      &:hover {
-        color: $md-link-color;
+      &:not([href]):hover {
+        color: rgba($avatar-border, .2);
       }
     }
   }
@@ -132,17 +183,16 @@
     display: none;
   }
 
-  .btn-clipboard {
-    color: $gl-gray;
+  .btn-clipboard:hover {
+    color: $gl-text-color;
   }
 }
 
 .right-sidebar {
-  position: fixed;
+  position: absolute;
   top: $header-height;
   bottom: 0;
   right: 0;
-  z-index: 10;
   transition: width .3s;
   background: $gray-light;
   padding: 10px 20px;
@@ -168,7 +218,7 @@
     }
 
     .no-value {
-      color: $gl-placeholder-color;
+      color: $gl-text-color-secondary;
     }
 
     .sidebar-collapsed-icon {
@@ -177,7 +227,7 @@
 
     .gutter-toggle {
       margin-top: 7px;
-      border-left: 1px solid $border-gray-light;
+      border-left: 1px solid $border-gray-normal;
     }
 
     .assignee .avatar {
@@ -193,6 +243,10 @@
       font-size: 13px;
       font-weight: normal;
     }
+
+    .hide-expanded {
+      display: none;
+    }
   }
 
   &.right-sidebar-collapsed {
@@ -203,11 +257,11 @@
       display: block;
     }
 
-    width: $sidebar_collapsed_width;
+    width: $gutter_collapsed_width;
     padding-top: 0;
 
     .block {
-      width: $sidebar_collapsed_width - 2px;
+      width: $gutter_collapsed_width - 2px;
       margin-left: -19px;
       padding: 15px 0 0;
       border-bottom: none;
@@ -215,7 +269,7 @@
     }
 
     .participants {
-      border-bottom: 1px solid $border-gray-light;
+      border-bottom: 1px solid $border-gray-normal;
     }
 
     .hide-collapsed {
@@ -232,27 +286,38 @@
       display: block;
       width: 100%;
       text-align: center;
-      padding-bottom: 10px;
-      color: #999;
+      margin-bottom: 10px;
+      color: $issuable-sidebar-color;
+
+      &:hover,
+      &:hover .todo-undone {
+        color: $gl-text-color;
+      }
 
       span {
         display: block;
         margin-top: 0;
       }
 
+      .todo-undone {
+        color: $gl-link-color;
+      }
+
       .author {
         display: none;
       }
 
+      .avatar:hover {
+        border-color: $issuable-sidebar-color;
+      }
+
       .btn-clipboard {
         border: none;
+        color: $issuable-sidebar-color;
 
         &:hover {
           background: transparent;
-        }
-
-        i {
-          color: #999;
+          color: $gl-text-color;
         }
       }
     }
@@ -267,24 +332,14 @@
     }
   }
 
-  .issuable-header-btn {
-    background: $gray-normal;
-    border: 1px solid $border-gray-normal;
-
-    &:hover {
-      background: $gray-dark;
-      border: 1px solid $border-gray-dark;
-    }
-
-    &.btn-primary {
-      @extend .btn-primary;
-    }
-  }
-
   a {
     &:hover {
       color: $md-link-color;
       text-decoration: none;
+
+      .avatar {
+        border-color: rgba($avatar-border, .2);
+      }
     }
   }
 
@@ -326,6 +381,10 @@
   display: inline-block;
   padding: 5px;
 
+  &:nth-of-type(7n) {
+    padding-right: 0;
+  }
+
   .author_link {
     display: block;
   }
@@ -340,7 +399,7 @@
   margin-left: 5px;
 
   a {
-    color: $gl-placeholder-color;
+    color: $gl-text-color-secondary;
   }
 }
 
@@ -395,6 +454,7 @@
 .issuable-meta {
   display: inline-block;
   line-height: 18px;
+  font-size: 14px;
 }
 
 .js-issuable-selector-wrap {
@@ -409,8 +469,19 @@
 
 .issuable-list {
   li {
+
+    .issue-box {
+      display: -webkit-flex;
+      display: flex;
+    }
+
+    .issue-info-container {
+      -webkit-flex: 1;
+      flex: 1;
+      padding-right: $gl-padding;
+    }
+
     .issue-check {
-      float: left;
       padding-right: $gl-padding;
       margin-bottom: 10px;
       min-width: 15px;
@@ -421,3 +492,120 @@
     }
   }
 }
+
+.time_tracker {
+  padding-bottom: 0;
+  border-bottom: 0;
+
+
+  .sidebar-collapsed-icon {
+
+    > .stopwatch-svg {
+      display: inline-block;
+    }
+
+    svg {
+      width: 16px;
+      height: 16px;
+      fill: $issuable-sidebar-color;
+    }
+
+    &:hover svg {
+      fill: $gl-text-color;
+    }
+  }
+
+  .help-button,
+  .close-help-button {
+    cursor: pointer;
+  }
+
+  .compare-meter {
+    &.within_estimate {
+      .meter-fill {
+        background: $gl-primary;
+      }
+    }
+
+    &.over_estimate {
+      .meter-fill {
+        background: $red-500;
+      }
+
+      .time-remaining,
+      .compare-value.spent {
+        color: $red-500;
+      }
+    }
+  }
+
+  .meter-container {
+    background: $border-gray-light;
+    border-radius: 3px;
+
+    .meter-fill {
+      max-width: 100%;
+      height: 5px;
+      border-radius: 3px;
+      background: $gl-primary;
+    }
+  }
+
+  .compare-display-container {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 5px;
+
+    .compare-display {
+      font-size: 13px;
+      color: $compare-display-color;
+
+      .compare-value {
+        color: $gl-text-color;
+      }
+    }
+  }
+
+  .time-tracking-help-state {
+    background: $white-light;
+    margin: 16px -20px 0;
+    padding: 16px 20px;
+    border-top: 1px solid $border-gray-light;
+    border-bottom: 1px solid $border-gray-light;
+
+    a:hover {
+      color: $btn-white-active;
+    }
+  }
+
+  .help-state-toggle-enter-active {
+    transition: all .8s ease;
+  }
+
+  .help-state-toggle-leave-active {
+    transition: all .5s ease;
+  }
+
+  .help-state-toggle-enter,
+  .help-state-toggle-leave-active {
+    opacity: 0;
+  }
+}
+
+.issuable-todo-btn {
+  .fa-spinner {
+    display: none;
+  }
+
+  &.is-loading {
+    .fa-spinner {
+      display: inline-block;
+    }
+
+    &.sidebar-collapsed-icon {
+      .issuable-todo-inner {
+        display: none;
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 3e7fc3fa52c..b2f45625a2a 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -1,6 +1,6 @@
 .issues-list {
   .issue {
-    padding: 10px $gl-padding;
+    padding: 10px 0 10px $gl-padding;
     position: relative;
 
     .title {
@@ -10,6 +10,11 @@
     .issue-labels {
       display: inline-block;
     }
+
+    .icon-merge-request-unmerged {
+      height: 13px;
+      margin-bottom: 3px;
+     }
   }
 }
 
@@ -41,6 +46,10 @@ ul.related-merge-requests > li {
   .merge-request-id {
     flex-shrink: 0;
   }
+
+  .merge-request-info {
+    margin-left: 5px;
+  }
 }
 
 .merge-requests-title,
@@ -51,30 +60,44 @@ ul.related-merge-requests > li {
 
 .merge-request-id {
   display: inline-block;
-  width: 3em;
 }
 
 .merge-request-status {
-  color: $gl-gray;
-  font-size: 15px;
-  font-weight: bold;
+  font-size: 13px;
+  padding: 0 5px;
+  color: $white-light;
+  height: 20px;
+  border-radius: 3px;
+  line-height: 18px;
+
+  &.merged {
+    background: $blue-500;
+  }
+
+  &.closed {
+    background: $red-500;
+  }
+
+  &.open {
+    background: $green-500;
+  }
 }
 
 .merge-request,
 .issue {
   &.today {
-    background: #f3fff2;
-    border-color: #e1e8d5;
+    background: $issues-today-bg;
+    border-color: $issues-today-border;
   }
 
   &.closed {
     background: $gray-light;
-    border-color: #e5e5e5;
+    border-color: $border-color;
   }
 
   &.merged {
     background: $gray-light;
-    border-color: #e5e5e5;
+    border-color: $border-color;
   }
 }
 
@@ -125,7 +148,11 @@ ul.related-merge-requests > li {
   }
 
   .btn {
-    background-color: $background-color;
-    border: 1px solid $border-gray-light;
+    background-color: $gray-light;
+    border: 1px solid $border-gray-normal;
   }
 }
+
+.recaptcha {
+  margin-bottom: 30px;
+}
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index 397f89f501a..e1ef0b029a5 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -90,7 +90,7 @@
 
     @media (min-width: $screen-sm-min) {
       display: inline-block;
-      width: 40%;
+      width: 30%;
       margin-left: 10px;
       margin-bottom: 0;
       vertical-align: middle;
@@ -98,13 +98,14 @@
   }
 
   .label {
-    padding: 9px;
+    padding: 8px 9px 9px;
     font-size: 14px;
   }
 }
 
 .color-label {
-  padding: 3px 4px;
+  padding: 3px 7px;
+  border-radius: $label-border-radius;
 }
 
 .dropdown-labels-error {
@@ -115,8 +116,24 @@
 }
 
 .manage-labels-list {
+  > li:not(.empty-message) {
+    background-color: $white-light;
+    cursor: move;
+    cursor: -webkit-grab;
+    cursor: -moz-grab;
+
+    &:active {
+      cursor: -webkit-grabbing;
+      cursor: -moz-grabbing;
+    }
+
+    &.sortable-ghost {
+      opacity: 0.3;
+    }
+  }
+
   .btn-action {
-    color: $gl-dark-link-color;
+    color: $gl-text-color;
 
     .fa {
       font-size: 18px;
@@ -198,8 +215,14 @@
   }
 
   .label-remove {
-    border-left: 1px solid rgba(0, 0, 0, .1);
+    border-left: 1px solid $label-remove-border;
     z-index: 3;
+    border-radius: $label-border-radius;
+    padding: 6px 10px 6px 9px;
+
+    &:hover {
+      box-shadow: inset 0 0 0 80px $label-remove-border;
+    }
   }
 
   .btn {
@@ -222,6 +245,14 @@
   width: 100%;
 }
 
+.label-subscription {
+  vertical-align: middle;
+
+  .dropdown-group-label a {
+    cursor: pointer;
+  }
+}
+
 .label-subscribe-button {
   .label-subscribe-button-icon {
     &[disabled] {
@@ -244,3 +275,8 @@
     }
   }
 }
+
+.label-link {
+  display: inline-block;
+  vertical-align: text-top;
+}
diff --git a/app/assets/stylesheets/pages/lint.scss b/app/assets/stylesheets/pages/lint.scss
index 8290519dc25..68b6c5ecbd4 100644
--- a/app/assets/stylesheets/pages/lint.scss
+++ b/app/assets/stylesheets/pages/lint.scss
@@ -1,11 +1,21 @@
 .ci-body {
   .incorrect-syntax {
-    font-size: 19px;
-    color: red;
+    font-size: 18px;
+    color: $lint-incorrect-color;
   }
 
   .correct-syntax {
-    font-size: 19px;
-    color: #47a447;
+    font-size: 18px;
+    color: $lint-correct-color;
+  }
+}
+
+.ci-linter {
+  .ci-editor {
+    height: 400px;
+  }
+
+  .ci-template pre {
+    white-space: pre-wrap;
   }
 }
diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss
index 10f67b47998..8249e02b64a 100644
--- a/app/assets/stylesheets/pages/login.scss
+++ b/app/assets/stylesheets/pages/login.scss
@@ -17,14 +17,19 @@
     line-height: 1.5;
 
     p {
-      font-size: 18px;
-      color: #888;
+      font-size: 16px;
+      color: $login-brand-holder-color;
     }
 
     h1:first-child {
       font-weight: normal;
-      margin-bottom: 30px;
+      margin-bottom: 0.68em;
       margin-top: 0;
+      font-size: 34px;
+    }
+
+    h3 {
+      font-size: 22px;
     }
 
     img {
@@ -80,11 +85,11 @@
       }
 
       .username .validation-success {
-        color: $green-normal;
+        color: $green-600;
       }
 
       .username .validation-error {
-        color: $red-normal;
+        color: $red-500;
       }
     }
   }
@@ -105,19 +110,19 @@
     li {
       flex: 1;
       text-align: center;
+      border-left: 1px solid $border-color;
 
       &:first-of-type {
+        border-left: none;
         border-top-left-radius: $border-radius-default;
       }
 
       &:last-of-type {
-        border-left: 1px solid $border-color;
         border-top-right-radius: $border-radius-default;
       }
 
       &:not(.active) {
         background-color: $gray-light;
-        border-left: 1px solid $border-color;
       }
 
       a {
@@ -174,7 +179,7 @@
   .form-control {
     &:active,
     &:focus {
-      background-color: #fff;
+      background-color: $white-light;
     }
   }
 
@@ -195,7 +200,7 @@
     h2 {
       margin-top: 0;
       font-size: 14px;
-      color: #a00;
+      color: $login-devise-error-color;
     }
   }
 }
@@ -254,27 +259,3 @@
     }
   }
 }
-
-// For sign in pane only, to improve tab order, the following removes the submit button from
-// normal document flow and pins it to the bottom of the form. For context, see !6867 & !6928
-
-.login-box {
-  .new_user {
-    position: relative;
-    padding-bottom: 35px;
-
-    @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
-      .forgot-password {
-        float: none !important;
-        margin-top: 5px;
-      }
-    }
-  }
-
-  .move-submit-down {
-    position: absolute;
-    width: 100%;
-    bottom: 0;
-  }
-}
-
diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss
index 756efa9c7fa..be7193bae04 100644
--- a/app/assets/stylesheets/pages/members.scss
+++ b/app/assets/stylesheets/pages/members.scss
@@ -25,7 +25,7 @@
   }
 
   .form-horizontal {
-    margin-top: 5px;
+    margin-top: 20px;
 
     @media (min-width: $screen-sm-min) {
       display: -webkit-flex;
@@ -54,6 +54,10 @@
   @media (min-width: $screen-sm-min) {
     width: 50%;
   }
+
+  .dropdown-menu-toggle {
+    width: 100%;
+  }
 }
 
 .member-access-text {
@@ -74,19 +78,48 @@
     float: right;
   }
 
+  .dropdown {
+    width: 100%;
+    margin-top: 5px;
+
+    .dropdown-menu-toggle {
+      vertical-align: middle;
+      width: 100%;
+    }
+
+    @media (min-width: $screen-sm-min) {
+      margin-top: 0;
+      width: 155px;
+    }
+  }
+
   .form-control {
     width: 100%;
     padding-right: 35px;
 
     @media (min-width: $screen-sm-min) {
+      width: 250px;
+    }
+
+    @media (min-width: $screen-md-min) {
       width: 350px;
     }
+
+    &.input-short {
+      @media (min-width: $screen-md-min) {
+        width: 170px;
+      }
+
+      @media (min-width: $screen-lg-min) {
+        width: 210px;
+      }
+    }
   }
 }
 
 .member-search-btn {
   position: absolute;
-  right: 0;
+  right: 4px;
   top: 0;
   height: 35px;
   padding-left: 10px;
@@ -95,4 +128,8 @@
   background: transparent;
   border: 0;
   outline: 0;
+
+  @media (min-width: $screen-sm-min) {
+    right: 160px;
+  }
 }
diff --git a/app/assets/stylesheets/pages/merge_conflicts.scss b/app/assets/stylesheets/pages/merge_conflicts.scss
index 032feae8854..35cefd449f1 100644
--- a/app/assets/stylesheets/pages/merge_conflicts.scss
+++ b/app/assets/stylesheets/pages/merge_conflicts.scss
@@ -1,3 +1,5 @@
+// Disabled to use the color map for creating color schemes
+// scss-lint:disable ColorVariable
 $colors: (
   white_header_head_neutral   : #e1fad7,
   white_line_head_neutral     : #effdec,
@@ -98,6 +100,7 @@ $colors: (
   solarized_dark_header_not_chosen     : rgba(#839496, .25),
   solarized_dark_line_not_chosen       : rgba(#839496, .15)
 );
+// scss-lint:enable ColorVariable
 
 
 @mixin color-scheme($color) {
@@ -229,14 +232,14 @@ $colors: (
       right: 10px;
       padding: 0;
       outline: none;
-      color: #fff;
+      color: $white-light;
       width: 75px; // static width to make 2 buttons have same width
       height: 19px;
     }
   }
 
   .btn-success .fa-spinner {
-    color: #fff;
+    color: $white-light;
   }
 
   .editor-wrap {
@@ -252,7 +255,7 @@ $colors: (
 
     &.saved {
       .editor {
-        border-top: solid 2px $border-green-extra-light;
+        border-top: solid 2px $green-200;
       }
     }
 
@@ -271,7 +274,7 @@ $colors: (
   }
 
   .discard-changes-alert {
-    background-color: $background-color;
+    background-color: $gray-light;
     text-align: right;
     padding: $gl-padding-top $gl-padding;
     color: $gl-text-color;
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index f8e31a624ec..566dcc64802 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -3,8 +3,7 @@
  *
  */
 .mr-state-widget {
-  background: $background-color;
-  color: $gl-gray;
+  color: $gl-text-color;
   border: 1px solid $border-color;
   border-radius: 2px;
 
@@ -21,10 +20,14 @@
       display: inline-block;
       float: left;
 
-      .accept_merge_request {
+      .btn-success.dropdown-toggle .fa {
+        color: inherit;
+      }
+
+      .accept-merge-request {
         &.ci-pending,
         &.ci-running {
-          @include btn-orange;
+          @include btn-blue;
         }
 
         &.ci-skipped,
@@ -34,6 +37,12 @@
           @include btn-red;
         }
       }
+
+      .dropdown-toggle {
+        .fa {
+          color: inherit;
+        }
+      }
     }
 
     .accept-control {
@@ -47,80 +56,116 @@
 
       &.right {
         float: right;
+        padding-right: 0;
+      }
+
+      .modify-merge-commit-link {
+        padding: 0;
+
+        background-color: transparent;
+        border: 0;
+
+        color: $gl-text-color;
 
-        a {
-          color: $gl-gray;
+        &:hover,
+        &:focus {
+          text-decoration: underline;
         }
       }
 
-      .remove_source_checkbox {
+      .merge-param-checkbox {
         margin: 0;
       }
+
+      a .fa-question-circle {
+        color: $gl-text-color-secondary;
+
+        &:hover,
+        &:focus {
+          color: $link-hover-color;
+        }
+      }
     }
   }
 
   .ci_widget {
-    border-bottom: 1px solid $widget-inner-border;
+    border-bottom: 1px solid $well-inner-border;
+    color: $gl-text-color;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-align-items: center;
+    align-items: center;
+
+    i,
+    svg {
+      margin-right: 8px;
+    }
 
     svg {
-      margin-right: 4px;
       position: relative;
       top: 1px;
       overflow: visible;
     }
 
-    &.ci-success {
-      color: $gl-success;
-
-      a.environment,
-      a.pipeline {
-        color: inherit;
-      }
+    & > span {
+      padding-right: 4px;
     }
 
-    &.ci-success_with_warnings {
-      color: $gl-success;
-
-      i {
-        color: $gl-warning;
-      }
+    @media (max-width: $screen-xs-max) {
+      flex-wrap: wrap;
     }
 
-    &.ci-skipped {
-      background-color: #eee;
-      color: #888;
+    .ci-status-icon > .icon-link > svg {
+      width: 22px;
+      height: 22px;
     }
+  }
 
-    &.ci-pending {
-      color: $gl-warning;
-    }
+  .mr-widget-body,
+  .ci_widget,
+  .mr-widget-footer {
+    padding: 16px;
+  }
 
-    &.ci-running {
-      color: $blue-normal;
-    }
+  .mr-widget-pipeline-graph {
+    flex-shrink: 0;
 
-    &.ci-failed,
-    &.ci-error {
-      color: $gl-danger;
+    .dropdown-menu {
+      margin-top: 11px;
     }
 
-    &.ci-canceled {
-      color: $gl-gray;
+    .ci-action-icon-wrapper {
+      line-height: 16px;
     }
 
-    a.monospace {
-      color: inherit;
+    @media (min-width: $screen-sm-min) {
+      .stage-cell {
+        padding: 0 4px;
+      }
     }
-  }
 
-  .mr-widget-body,
-  .ci_widget,
-  .mr-widget-footer {
-    padding: $gl-padding;
+    @media (max-width: $screen-xs-max) {
+      order: 1;
+      margin-top: $gl-padding-top;
+      border-radius: 3px;
+      background-color: $white-light;
+      border: 1px solid $gray-darker;
+      width: 100%;
+      text-align: center;
+
+      .dropdown-menu {
+        margin-left: -97.5px;
+      }
+
+      .arrow-up::before,
+      .arrow-up::after, {
+        margin-left: 97.5px;
+      }
+    }
   }
 
   .normal {
-    color: #5c5d5e;
+    color: $gl-text-color;
   }
 
   .js-deployment-link {
@@ -130,19 +175,15 @@
   .mr-widget-body {
     h4 {
       font-weight: 600;
-      font-size: 17px;
+      font-size: 16px;
       margin: 5px 0;
-      color: $gl-gray-dark;
+      color: $gl-text-color;
 
       &.has-conflicts .fa-exclamation-triangle {
         color: $gl-warning;
       }
     }
 
-    p:last-child {
-      margin-bottom: 0;
-    }
-
     .btn-grouped {
       margin-left: 0;
       margin-right: 7px;
@@ -150,7 +191,7 @@
 
     @media (max-width: $screen-xs-max) {
       h4 {
-        font-size: 15px;
+        font-size: 14px;
       }
 
       p {
@@ -163,6 +204,11 @@
         margin-bottom: 4px;
       }
 
+      .btn-grouped {
+        float: none;
+        margin-right: 0;
+      }
+
       .accept-action {
         width: 100%;
         text-align: center;
@@ -177,7 +223,7 @@
   }
 
   .mr-widget-footer {
-    border-top: 1px solid #eee;
+    border-top: 1px solid $gray-darker;
   }
 
   .ci-coverage {
@@ -200,8 +246,7 @@
 
   .commit {
     margin: 0;
-    padding-top: 2px;
-    padding-bottom: 2px;
+    padding: 10px 0;
     list-style: none;
 
     &:hover {
@@ -211,7 +256,7 @@
 }
 
 .label-branch {
-  color: $gl-gray-dark;
+  color: $gl-text-color;
   font-family: $monospace_font;
   font-weight: bold;
   overflow: hidden;
@@ -235,8 +280,15 @@
 
 .mr-list {
   .merge-request {
-    padding: 10px 15px;
+    padding: 10px  0 10px 15px;
     position: relative;
+    display: -webkit-flex;
+    display: flex;
+
+    .issue-info-container {
+      -webkit-flex: 1;
+      flex: 1;
+    }
 
     .merge-request-title {
       margin-bottom: 2px;
@@ -293,8 +345,61 @@
   }
 }
 
+.remove-message-pipes {
+  ul {
+    margin: 10px 0 0 12px;
+    padding: 0;
+    list-style: none;
+    border-left: 2px solid $border-color;
+    display: inline-block;
+  }
+
+  li {
+    position: relative;
+    margin: 0;
+    padding: 0;
+    display: block;
+
+    span {
+      margin-left: 15px;
+      max-height: 20px;
+    }
+  }
+
+  li::before {
+    content: '';
+    position: absolute;
+    border-top: 2px solid $border-color;
+    height: 1px;
+    top: 8px;
+    width: 8px;
+  }
+
+  li:last-child {
+    &::before {
+      top: 18px;
+    }
+
+    span {
+      display: block;
+      position: relative;
+      top: 5px;
+      margin-top: 5px;
+    }
+  }
+}
+
 .mr-source-target {
+  background-color: $gray-light;
   line-height: 31px;
+  border-style: solid;
+  border-width: 1px;
+  border-color: $border-color;
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+  border-bottom: none;
+  padding: 16px;
+  margin-bottom: -1px;
 }
 
 .panel-new-merge-request {
@@ -309,7 +414,7 @@
   }
 
   .panel-footer {
-    padding: 5px 10px;
+    padding: 0;
 
     .btn {
       min-width: auto;
@@ -331,10 +436,6 @@
       left: 0;
       top: 2px;
     }
-
-    .commit-row-info {
-      line-height: 20px;
-    }
   }
 
   .btn-clipboard {
@@ -383,17 +484,24 @@
   }
 }
 
+.assign-to-me-link {
+  padding-left: 12px;
+  white-space: nowrap;
+}
+
 .table-holder {
   .ci-table {
 
     th {
       background-color: $white-light;
-      color: $gl-placeholder-color;
+      color: $gl-text-color-secondary;
     }
   }
 }
 
 .merged-buttons {
+  margin-top: 20px;
+
   .btn {
     float: left;
 
@@ -404,7 +512,7 @@
 }
 
 .mr-version-controls {
-  background: $background-color;
+  background: $gray-light;
   border-bottom: 1px solid $border-color;
   color: $gl-text-color;
 
@@ -437,7 +545,7 @@
   }
 
   .fa-info-circle {
-    color: $orange-normal;
+    color: $orange-500;
     padding-right: 5px;
   }
 }
@@ -446,14 +554,34 @@
   background-color: $white-light;
 
   &.affix {
-    top: 100px;
+    top: 0;
     left: 0;
     z-index: 10;
     transition: right .15s;
+
+    @media (max-width: $screen-xs-max) {
+      right: 0;
+    }
+
+    .merge-request-tabs-container {
+      padding-left: $gl-padding;
+      padding-right: $gl-padding;
+    }
+  }
+}
+
+.limit-container-width {
+  .merge-request-tabs-container {
+    max-width: $limited-layout-width;
+    margin-left: auto;
+    margin-right: auto;
   }
+}
 
-  &:not(.affix) .container-fluid {
-    padding-left: 0;
-    padding-right: 0;
+.limit-container-width:not(.container-limited) {
+  .merge-request-tabs-holder:not(.affix) {
+    .merge-request-tabs-container {
+      max-width: $limited-layout-width - ($gl-padding * 2);
+    }
   }
 }
diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss
index 13402acd8e1..335e587b8f4 100644
--- a/app/assets/stylesheets/pages/milestone.scss
+++ b/app/assets/stylesheets/pages/milestone.scss
@@ -11,6 +11,7 @@
     }
 
     .progress {
+      width: 100%;
       height: 6px;
     }
   }
@@ -24,29 +25,89 @@
   }
 
   .issuable-row {
-    .color-label {
-      border-radius: 2px;
-      padding: 3px !important;
-      margin-right: 7px;
-    }
-
-    // Issue title
     span a {
       color: $gl-text-color;
       word-wrap: break-word;
     }
   }
+
+  .panel-heading {
+    line-height: $line-height-base;
+    padding: 14px 16px;
+    display: -webkit-flex;
+    display: flex;
+
+    .title {
+      -webkit-flex: 1;
+      -webkit-flex-grow: 1;
+      flex: 1;
+      flex-grow: 2;
+    }
+
+    .counter {
+      -webkit-flex: 1;
+      flex: 0;
+      padding-left: 16px;
+    }
+  }
 }
 
-.milestone-summary {
-  margin-bottom: 25px;
+.milestone-sidebar {
+  .gutter-toggle {
+    margin-bottom: 10px;
+  }
+
+  .milestone-progress {
+    .title {
+      padding-top: 5px;
+    }
+
+    .progress {
+      height: 6px;
+      margin: 0;
+    }
+  }
+
+  .collapsed-milestone-date {
+    font-size: 12px;
+  }
+
+  .milestone-date {
+    display: block;
+  }
+
+  .date-separator {
+    line-height: 5px;
+  }
+
+  .remaining-days strong {
+    font-weight: normal;
+  }
 
   .milestone-stat {
-    margin-right: 10px;
+    float: left;
+    margin-right: 14px;
+  }
+
+  .milestone-stat:last-child {
+    margin-right: 0;
+  }
+
+  .milestone-progress {
+    .sidebar-collapsed-icon {
+      clear: both;
+      padding: 15px 5px 5px;
+
+      .progress {
+        margin: 5px 0;
+      }
+    }
   }
 
-  .remaining-days {
-    color: $orange-light;
+  .right-sidebar-collapsed & {
+    .reference {
+      border-top: 1px solid $border-gray-normal;
+    }
   }
 }
 
@@ -57,13 +118,17 @@
     margin-top: 7px;
 
     .issuable-number {
-      color: $gl-placeholder-color;
+      color: $gl-text-color-secondary;
       margin-right: 5px;
     }
 
     .avatar {
       float: none;
     }
+
+    > a:not(:last-of-type) {
+      margin-right: 5px;
+    }
   }
 }
 
@@ -72,7 +137,7 @@
   padding: 20px 0;
 }
 
-@media (max-width: $screen-sm-min) {
+@media (max-width: $screen-xs-max) {
   .milestone-actions {
     @include clearfix();
     padding-top: $gl-vert-padding;
@@ -82,3 +147,56 @@
     }
   }
 }
+
+.milestone-page-header {
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  flex-wrap: wrap;
+
+  .status-box {
+    margin-top: 0;
+  }
+
+  .milestone-buttons {
+    margin-left: auto;
+  }
+
+  .status-box {
+    order: 1;
+  }
+
+  .milestone-buttons {
+    order: 2;
+  }
+
+  .header-text-content {
+    order: 3;
+    width: 100%;
+  }
+
+  .milestone-buttons .verbose {
+    display: none;
+  }
+
+  @media (min-width: $screen-xs-min) {
+    .milestone-buttons .verbose {
+      display: inline;
+    }
+
+    .header-text-content {
+      order: 2;
+      width: auto;
+    }
+
+    .milestone-buttons {
+      order: 3;
+    }
+  }
+}
+
+.issuable-row {
+  background-color: $white-light;
+  cursor: -webkit-grab;
+  cursor: grab;
+}
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 16ddef481bd..927bf9805ce 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -27,6 +27,7 @@
 .new-note,
 .note-edit-form {
   .note-form-actions {
+    position: relative;
     margin-top: $gl-padding;
   }
 
@@ -44,7 +45,7 @@
 .note-textarea {
   display: block;
   padding: 10px 0;
-  color: $gl-gray;
+  color: $gl-text-color;
   font-family: $regular_font;
   border: 0;
 
@@ -62,7 +63,7 @@
 .common-note-form {
   .md-area {
     padding: $gl-padding-top $gl-padding;
-    border: 1px solid $note-form-border-color;
+    border: 1px solid $border-color;
     border-radius: $border-radius-base;
     transition: border-color ease-in-out 0.15s,
                 box-shadow ease-in-out 0.15s;
@@ -109,9 +110,9 @@
   margin: auto;
   margin-top: 0;
   text-align: center;
-  font-size: 13px;
+  font-size: 12px;
 
-  @media (max-width: $screen-md-min) {
+  @media (max-width: $screen-sm-max) {
     // On smaller devices the warning becomes the fourth item in the list,
     // rather than centering, and grows to span the full width of the
     // comment area.
@@ -129,10 +130,10 @@
 
 .note-edit-form {
   display: none;
-  font-size: 15px;
+  font-size: 14px;
 
   .md-area {
-    background-color: #fff;
+    background-color: $white-light;
   }
 }
 
@@ -147,6 +148,18 @@
 .error-alert > .alert {
   margin-top: 5px;
   margin-bottom: 5px;
+
+  &.alert-dismissable {
+    .close {
+      color: $white-light;
+      opacity: 0.85;
+      font-weight: normal;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
 }
 
 .discussion-body,
@@ -177,8 +190,25 @@
       padding-right: 5px;
     }
 
-    &:last-child {
-      padding-left: 5px;
+  }
+
+  .discussion-actions {
+    display: table;
+
+    .new-issue-for-discussion path {
+      fill: $gray-darkest;
+    }
+
+    .btn-group {
+      display: table-cell;
+
+      &:first-child {
+        padding-right: 0;
+      }
+
+      &:first-child:not(:last-child) > div {
+        border-right: 0;
+      }
     }
   }
 
@@ -204,7 +234,7 @@
 
 .comment-toolbar {
   padding-top: $gl-padding-top;
-  color: $note-toolbar-color;
+  color: $gl-text-color-secondary;
   border-top: 1px solid $border-color;
 }
 
@@ -265,3 +295,18 @@
     }
   }
 }
+
+.note-edit-warning.settings-message {
+  display: none;
+  padding: 5px 10px;
+  position: absolute;
+  left: 127px;
+  top: 2px;
+
+  @media (max-width: $screen-xs-max) {
+    position: relative;
+    top: 0;
+    left: 0;
+    margin-bottom: 10px;
+  }
+}
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 526e9ae5cdd..57cf8e136e2 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -3,9 +3,9 @@
  */
 
 @-webkit-keyframes targe3-note {
-  from { background: #fffff0; }
-  50% { background: #ffffd3; }
-  to { background: #fffff0; }
+  from { background: $note-targe3-outside; }
+  50% { background: $note-targe3-inside; }
+  to { background: $note-targe3-outside; }
 }
 
 ul.notes {
@@ -35,11 +35,105 @@ ul.notes {
 
   .system-note {
     font-size: 14px;
-    padding-top: 10px;
-    padding-bottom: 10px;
-    background: #fdfdfd;
+    padding: 0;
+    clear: both;
+
+    &.timeline-entry::after {
+      clear: none;
+    }
+
+    .system-note-message {
+      display: inline;
+
+      &::first-letter {
+        text-transform: lowercase;
+      }
+
+      a {
+        color: $gl-link-color;
+        text-decoration: none;
+      }
+
+      p {
+        display: inline;
+        margin: 0;
+
+        &::first-letter {
+          text-transform: lowercase;
+        }
+      }
+    }
+
+    .timeline-content {
+      padding: 14px 10px;
+    }
+
+    .note-body {
+      overflow: hidden;
+
+      .system-note-commit-list-toggler {
+        color: $gl-link-color;
+        display: none;
+        padding: 10px 0 0;
+        cursor: pointer;
+        position: relative;
+        z-index: 2;
+
+        &:hover {
+          color: $gl-link-color;
+          text-decoration: underline;
+        }
+      }
+
+      .note-text {
+        & p:first-child {
+          display: none;
+        }
+
+        &.system-note-commit-list {
+          max-height: 70px;
+          overflow: hidden;
+          display: block;
+
+          ul {
+            margin: 3px 0 3px 16px !important;
+
+            .gfm-commit {
+              font-family: $monospace_font;
+              font-size: 12px;
+            }
+          }
+
+          p:first-child {
+            display: none;
+          }
+
+          &::after {
+            content: '';
+            width: 100%;
+            height: 67px;
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            background: linear-gradient(rgba($white-light, 0.1) -100px, $white-light 100%);
+          }
+
+          &.hide-shade {
+            max-height: 100%;
+            overflow: auto;
+
+            &::after {
+              display: none;
+              background: transparent;
+            }
+          }
+        }
+      }
+    }
 
     .timeline-icon {
+      display: none;
+
       .avatar {
         visibility: hidden;
 
@@ -63,7 +157,17 @@ ul.notes {
   .note {
     display: block;
     position: relative;
-    border-bottom: 1px solid $table-border-gray;
+    border-bottom: 1px solid $white-normal;
+
+    &.note-discussion {
+      &.timeline-entry {
+        padding: 14px 10px;
+      }
+
+      .system-note {
+        padding: 0;
+      }
+    }
 
     &.is-editting {
       .note-header,
@@ -82,16 +186,14 @@ ul.notes {
     }
 
     .note-body {
-      overflow: auto;
+      overflow-x: auto;
+      overflow-y: hidden;
 
       .note-text {
-        overflow: auto;
         word-wrap: break-word;
         @include md-typography;
-
         // Reset ul style types since we're nested inside a ul already
         @include bulleted-list;
-
         ul.task-list {
           ul:not(.task-list) {
             padding-left: 1.3em;
@@ -164,25 +266,25 @@ ul.notes {
   font-family: $regular_font;
 
   td {
-    border: 1px solid $table-border-gray;
+    border: 1px solid $white-normal;
     border-left: none;
 
     &.notes_line {
       vertical-align: middle;
       text-align: center;
       padding: 10px 0;
-      background: $background-color;
+      background: $gray-light;
       color: $text-color;
     }
 
     &.notes_line2 {
       text-align: center;
       padding: 10px 0;
-      border-left: 1px solid #ddd !important;
+      border-left: 1px solid $note-line2-border !important;
     }
 
     &.notes_content {
-      background-color: $background-color;
+      background-color: $gray-light;
       border-width: 1px 0;
       padding: 0;
       vertical-align: top;
@@ -213,12 +315,28 @@ ul.notes {
 
     &:hover {
       color: $gl-link-color;
+    }
+
+    &:focus,
+    &:hover {
       text-decoration: none;
     }
   }
 
   .author_link {
-    color: $gl-gray;
+    color: $gl-text-color;
+  }
+}
+
+.discussion-header {
+  font-size: 14px;
+}
+
+.note-headline-light {
+  display: inline;
+
+  @media (max-width: $screen-xs-min) {
+    display: block;
   }
 }
 
@@ -241,7 +359,7 @@ ul.notes {
 .note-actions {
   float: right;
   margin-left: 10px;
-  color: $notes-action-color;
+  color: $gray-darkest;
 }
 
 .note-actions {
@@ -250,11 +368,7 @@ ul.notes {
   top: 0;
 
   .note-action-button {
-    margin-left: 10px;
-  }
-
-  @media (min-width: $screen-sm-min) {
-    position: relative;
+    margin-left: 8px;
   }
 }
 
@@ -270,8 +384,7 @@ ul.notes {
 }
 
 .note-action-button {
-  display: inline-block;
-  margin-left: 0;
+  display: inline;
   line-height: 20px;
 
   @media (min-width: $screen-sm-min) {
@@ -280,9 +393,8 @@ ul.notes {
   }
 
   .fa {
-    color: $notes-action-color;
+    color: $gray-darkest;
     position: relative;
-    top: 1px;
     font-size: 17px;
   }
 
@@ -298,8 +410,22 @@ ul.notes {
 }
 
 .discussion-toggle-button {
+  padding: 0;
+  background-color: transparent;
+  border: 0;
   line-height: 20px;
   font-size: 13px;
+  transition: color 0.1s linear;
+
+  &:hover {
+    color: $gl-link-color;
+  }
+
+  &:focus {
+    text-decoration: underline;
+    outline: none;
+    color: $gl-link-color;
+  }
 
   .fa {
     margin-right: 3px;
@@ -318,50 +444,47 @@ ul.notes {
   color: $notes-role-color;
   font-size: 12px;
   line-height: 20px;
-  border: 1px solid $notes-role-border-color;
+  border: 1px solid $border-color;
   border-radius: $border-radius-base;
 }
 
-.diff-file .note .note-actions {
-  right: 0;
-  top: 0;
-}
-
 
 /**
  * Line note button on the side of diffs
  */
 
-.diff-file tr.line_holder {
-  @mixin show-add-diff-note {
-    display: inline-block;
-  }
+.add-diff-note {
+  display: none;
+  margin-top: -2px;
+  border-radius: 50%;
+  background: $white-light;
+  padding: 1px 5px;
+  font-size: 12px;
+  color: $blue-500;
+  margin-left: -55px;
+  position: absolute;
+  z-index: 10;
+  width: 23px;
+  height: 23px;
+  border: 1px solid $blue-500;
+  transition: transform .1s ease-in-out;
 
-  .add-diff-note {
-    margin-top: -4px;
-    border-radius: 40px;
-    background: #fff;
-    padding: 4px;
-    font-size: 16px;
-    color: $gl-link-color;
-    margin-left: -56px;
-    position: absolute;
-    z-index: 10;
-    width: 32px;
-    // "hide" it by default
-    display: none;
+  &:hover {
+    background: $blue-500;
+    border-color: $blue-600;
+    color: $white-light;
+    transform: scale(1.15);
+  }
 
-    &:hover {
-      background: $gl-info;
-      color: #fff;
-      @include show-add-diff-note;
-    }
+  &:active {
+    outline: 0;
   }
+}
 
-  // "show" the icon also if we just hover somewhere over the line
-  &:hover > td {
+.diff-file {
+  .is-over {
     .add-diff-note {
-      @include show-add-diff-note;
+      display: inline-block;
     }
   }
 }
@@ -385,8 +508,8 @@ ul.notes {
 }
 
 .line-resolve-all-container {
+
   .btn-group {
-    margin-top: -1px;
     margin-left: -4px;
   }
 
@@ -394,32 +517,49 @@ ul.notes {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
+
+  .btn.discussion-create-issue-btn {
+    margin-left: -4px;
+    border-radius: 0;
+    border-right: 0;
+
+    a {
+      padding: 0;
+      line-height: 0;
+
+      &:hover {
+        text-decoration: none;
+        border: 0;
+      }
+    }
+
+    .new-issue-for-discussion path {
+      fill: $gray-darkest;
+    }
+  }
+
 }
 
 .line-resolve-all {
+  vertical-align: middle;
   display: inline-block;
-  padding: 5px 10px;
-  background-color: $background-color;
+  padding: 6px 10px;
+  background-color: $gray-light;
   border: 1px solid $border-color;
   border-radius: $border-radius-default;
 
   &.has-next-btn {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
+    border-right: 0;
   }
 
   .line-resolve-btn {
-    vertical-align: middle;
     margin-right: 5px;
   }
 }
 
-.line-resolve-text {
-  vertical-align: middle;
-}
-
 .line-resolve-btn {
-  display: inline-block;
   position: relative;
   top: 2px;
   padding: 0;
@@ -436,18 +576,15 @@ ul.notes {
   &.is-active {
     color: $gl-text-green;
 
-    svg path {
+    svg {
       fill: $gl-text-green;
     }
   }
 
   svg {
-    position: relative;
-    color: $notes-action-color;
-
-    path {
-      fill: $notes-action-color;
-    }
+    fill: $gray-darkest;
+    height: 15px;
+    width: 15px;
   }
 }
 
@@ -460,3 +597,17 @@ ul.notes {
     }
   }
 }
+
+// Merge request notes in diffs
+.diff-file {
+  // Diff is side by side
+  .notes_content.parallel .note-header .note-headline-light {
+    display: block;
+    position: relative;
+  }
+  // Diff is inline
+  .notes_content .note-header .note-headline-light {
+    display: inline-block;
+    position: relative;
+  }
+}
diff --git a/app/assets/stylesheets/pages/notifications.scss b/app/assets/stylesheets/pages/notifications.scss
index 94fbbef3c77..bdf07a99daf 100644
--- a/app/assets/stylesheets/pages/notifications.scss
+++ b/app/assets/stylesheets/pages/notifications.scss
@@ -1,24 +1,16 @@
 .notification-list-item {
   line-height: 34px;
+
+  .dropdown-menu {
+    @extend .dropdown-menu-align-right;
+  }
 }
 
 .notification {
   position: relative;
   top: 1px;
 
-  > .fa {
+  .fa {
     font-size: 18px;
   }
 }
-
-.ns-part {
-  color: $gl-text-green;
-}
-
-.ns-watch {
-  color: $gl-success;
-}
-
-.ns-mute {
-  color: $gl-danger;
-}
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index bf3cb6e7ad9..a4fe652b52f 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -1,4 +1,10 @@
 .pipelines {
+  .realtime-loading {
+    font-size: 40px;
+    text-align: center;
+    margin: 0 auto;
+  }
+
   .stage {
     max-width: 90px;
     width: 90px;
@@ -8,61 +14,110 @@
     white-space: nowrap;
   }
 
-  .commit-title {
-    margin: 0;
+  .empty-state {
+    margin: 5% auto 0;
   }
 
-  .controls {
-    white-space: nowrap;
+  .table-holder {
+    width: 100%;
+
+    @media (max-width: $screen-sm-max) {
+      overflow: auto;
+    }
   }
 
-  .btn {
-    margin: 4px;
+  .commit-title {
+    margin: 0;
   }
 
   .table.ci-table {
-    min-width: 1200px;
+
+    .label {
+      margin-bottom: 3px;
+    }
 
     .pipeline-id {
       color: $black;
     }
 
-    .branch-commit {
-      width: 30%;
+    .stage-cell {
+      min-width: 130px; // Guarantees we show at least 4 stages in line
+      width: 20%;
+    }
 
-      .branch-name {
-        max-width: 195px;
-      }
+    .pipelines-time-ago {
+      text-align: right;
     }
-  }
-}
 
-.content-list {
+    .pipeline-actions {
+      padding-right: 0;
+      min-width: 170px; //Guarantees buttons don't break in several lines.
 
-  &.pipelines,
-  &.builds-content-list {
-    width: 100%;
-    overflow: auto;
+      .btn-default {
+        color: $gl-text-color-secondary;
+      }
+
+      .btn.btn-retry:hover,
+      .btn.btn-retry:focus {
+        border-color: $gray-darkest;
+        background-color: $white-normal;
+      }
+
+      svg path {
+        fill: $gl-text-color-secondary;
+      }
+
+      .dropdown-menu {
+        max-height: 250px;
+        overflow-y: auto;
+      }
+
+      .dropdown-toggle,
+      .dropdown-menu {
+        color: $gl-text-color-secondary;
+
+        .fa {
+          color: $gl-text-color-secondary;
+          font-size: 14px;
+        }
+      }
+
+      .btn-group {
+        &.open {
+          .btn-default {
+            background-color: $white-normal;
+            border-color: $border-white-normal;
+          }
+        }
+
+        .btn {
+          .icon-play {
+            height: 13px;
+            width: 12px;
+          }
+        }
+      }
+
+      .tooltip {
+        white-space: nowrap;
+      }
+    }
   }
 }
 
-.pipeline-holder {
-  width: 100%;
-  overflow: auto;
+@media (max-width: $screen-md-max) {
+  .content-list {
+    &.builds-content-list {
+      width: 100%;
+      overflow: auto;
+    }
+  }
 }
 
 .table.ci-table {
-  min-width: 900px;
-
-  &.pipeline {
-    min-width: 650px;
-  }
-
-  &.builds-page {
 
-    tr {
-      height: 71px;
-    }
+  &.builds-page tbody tr {
+    height: 71px;
   }
 
   tr {
@@ -74,6 +129,18 @@
     td {
       padding: 10px 8px;
     }
+
+    td.environments-actions {
+      padding-right: 0;
+    }
+
+    td.stage-cell {
+      padding: 10px 0;
+    }
+
+    .commit-link {
+      padding: 9px 8px 10px 2px;
+    }
   }
 
   tbody {
@@ -91,14 +158,6 @@
       }
     }
 
-    .ci-status {
-
-      svg {
-        top: 1px;
-        margin-right: 0;
-      }
-    }
-
     a:hover {
       text-decoration: none;
     }
@@ -109,15 +168,11 @@
     float: none;
   }
 
-  .api {
-    color: $code-color;
-  }
-
   .branch-commit {
 
     .branch-name {
       font-weight: bold;
-      max-width: 150px;
+      max-width: 120px;
       overflow: hidden;
       display: inline-block;
       white-space: nowrap;
@@ -129,7 +184,7 @@
       height: 14px;
       width: 14px;
       vertical-align: middle;
-      fill: $table-text-gray;
+      fill: $gl-text-color-secondary;
     }
 
     .fa {
@@ -143,7 +198,7 @@
 
     .commit-title {
       margin-top: 4px;
-      max-width: 300px;
+      max-width: 225px;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -172,48 +227,11 @@
     }
   }
 
-  .stage-cell {
-    font-size: 0;
-
-    svg {
-      height: 18px;
-      width: 18px;
-      position: relative;
-      z-index: 2;
-      vertical-align: middle;
-      overflow: visible;
-    }
-
-    .stage-container {
-      display: inline-block;
-      position: relative;
-      margin-right: 6px;
-
-      .tooltip {
-        white-space: nowrap;
-      }
-
-      &:not(:last-child) {
-        &::after {
-          content: '';
-          width: 8px;
-          position: absolute;
-          right: -7px;
-          bottom: 8px;
-          border-bottom: 2px solid $border-color;
-        }
-      }
-
-      a {
-        display: block;
-      }
-    }
-  }
-
   .duration,
   .finished-at {
-    color: $table-text-gray;
+    color: $gl-text-color-secondary;
     margin: 4px 0;
+    white-space: nowrap;
 
     .fa {
       font-size: 12px;
@@ -228,132 +246,200 @@
     }
   }
 
-  .pipeline-actions {
-    min-width: 140px;
-
-    .btn {
-      margin: 0;
-      color: $table-text-gray;
-    }
+  .build-link a {
+    color: $gl-text-color;
+  }
 
-    .cancel-retry-btns {
-      vertical-align: middle;
+  .btn-group.open .dropdown-toggle {
+    box-shadow: none;
+  }
+}
 
-      .btn:not(:first-child) {
-        margin-left: 8px;
-      }
-    }
+.stage-cell {
+  font-size: 0;
+  padding: 10px 4px;
 
-    .dropdown-toggle,
-    .dropdown-menu {
-      color: $table-text-gray;
+  > .stage-container > div > button > span > svg,
+  > .stage-container > button > svg {
+    height: 22px;
+    width: 22px;
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    z-index: 2;
+    overflow: visible;
+  }
 
-      .fa {
-        color: $table-text-gray;
-        font-size: 14px;
-      }
+  .stage-container {
+    display: inline-block;
+    position: relative;
+    height: 22px;
+    margin: 3px 6px 3px 0;
 
-      svg,
-      .fa {
-        margin-right: 0;
-      }
+    // Hack to show a button tooltip inline
+    button.has-tooltip + .tooltip {
+      min-width: 105px;
     }
 
-    .btn-remove {
-      color: $white-light;
+    // Bootstrap way of showing the content inline for anchors.
+    a.has-tooltip {
+      white-space: nowrap;
     }
 
-    .btn-group {
-      &.open {
-        .btn-default {
-          background-color: $white-normal;
-          border-color: $border-white-normal;
-        }
-      }
-
-      .btn {
-        .icon-play {
-          height: 13px;
-          width: 12px;
-        }
+    &:not(:last-child) {
+      &::after {
+        content: '';
+        width: 7px;
+        position: absolute;
+        right: -7px;
+        top: 10px;
+        border-bottom: 2px solid $border-color;
       }
     }
   }
+}
 
-  .build-link {
-
-    a {
-      color: $gl-dark-link-color;
-    }
-  }
-
-  .btn-group.open .dropdown-toggle {
-    box-shadow: none;
+.admin-builds-table {
+  .ci-table td:last-child {
+    min-width: 120px;
   }
 }
 
 // Pipeline visualization
+.pipeline-actions {
+  border-bottom: none;
+}
 
-.toggle-pipeline-btn {
-  background-color: $gray-dark;
-
-  &.graph-collapsed {
-    background-color: $white-light;
+.tab-pane {
+  &.builds .ci-table tr {
+    height: 71px;
   }
 }
 
+// Pipeline graph
 .pipeline-graph {
   width: 100%;
-  overflow: auto;
+  background-color: $gray-light;
+  padding: $gl-padding;
   white-space: nowrap;
   transition: max-height 0.3s, padding 0.3s;
+  overflow: auto;
 
-  &.graph-collapsed {
-    max-height: 0;
-    padding: 0 16px;
+  .stage-column-list,
+  .builds-container > ul {
+    padding: 0;
   }
-}
 
-.pipeline-visualization {
-  position: relative;
+  a {
+    text-decoration: none;
+    color: $gl-text-color-secondary;
+  }
 
-  ul {
-    padding: 0;
+  svg {
+    vertical-align: middle;
+    margin-right: 3px;
   }
-}
 
-.stage-column {
-  display: inline-block;
-  vertical-align: top;
+  .stage-column {
+    display: inline-block;
+    vertical-align: top;
 
-  &:not(:last-child) {
-    margin-right: 44px;
-  }
+    &:not(:last-child) {
+      margin-right: 44px;
+    }
 
-  &.left-margin {
-    &:not(:first-child) {
-      margin-left: 44px;
-
-      .left-connector {
-        &::before {
-          content: '';
-          position: absolute;
-          top: 48%;
-          left: -48px;
-          border-top: 2px solid $border-color;
-          width: 48px;
-          height: 1px;
+    &.left-margin {
+      &:not(:first-child) {
+        margin-left: 44px;
+
+        .left-connector {
+          &::before {
+            content: '';
+            position: absolute;
+            top: 48%;
+            left: -48px;
+            border-top: 2px solid $border-color;
+            width: 48px;
+            height: 1px;
+          }
         }
       }
     }
-  }
 
-  &.no-margin {
-    margin: 0;
-  }
+    &.no-margin {
+      margin: 0;
+    }
 
-  li {
-    list-style: none;
+    li {
+      list-style: none;
+    }
+
+    &:last-child {
+      .build {
+        // Remove right connecting horizontal line from first build in last stage
+        &:first-child {
+          &::after {
+            border: none;
+          }
+        }
+        // Remove right curved connectors from all builds in last stage
+        &:not(:first-child) {
+          &::after {
+            border: none;
+          }
+        }
+        // Remove opposite curve
+        .curve {
+          &::before {
+            display: none;
+          }
+        }
+      }
+    }
+
+    &:first-child {
+      .build {
+        // Remove left curved connectors from all builds in first stage
+        &:not(:first-child) {
+          &::before {
+            border: none;
+          }
+        }
+        // Remove opposite curve
+        .curve {
+          &::after {
+            display: none;
+          }
+        }
+      }
+    }
+
+    // Curve first child connecting lines in opposite direction
+    .curve {
+      display: none;
+
+      &::before,
+      &::after {
+        content: '';
+        width: 21px;
+        height: 25px;
+        position: absolute;
+        top: -31px;
+        border-top: 2px solid $border-color;
+      }
+
+      &::after {
+        left: -44px;
+        border-right: 2px solid $border-color;
+        border-radius: 0 20px;
+      }
+
+      &::before {
+        right: -44px;
+        border-left: 2px solid $border-color;
+        border-radius: 20px 0 0;
+      }
+    }
   }
 
   .stage-name {
@@ -366,166 +452,110 @@
   }
 
   .build {
-    border: 1px solid $border-color;
     position: relative;
-    padding: 7px 10px 8px;
-    border-radius: 30px;
     width: 186px;
     margin-bottom: 10px;
+    white-space: normal;
+    color: $gl-text-color-secondary;
 
-    &:hover {
-      background-color: $gray-lighter;
-    }
-
-    &.playable {
-
-      svg {
-        height: 13px;
-        width: 20px;
-        position: relative;
-        top: 1px;
-
-        path {
-          fill: $layout-link-gray;
-        }
-      }
-    }
-
-    .build-content {
-      display: -ms-flexbox;
-      display: -webkit-flex;
-      display: flex;
-      width: 164px;
-
-      .ci-status-icon {
-        svg {
-          height: 20px;
-          width: 20px;
-        }
-      }
-
-      .tooltip {
-        white-space: nowrap;
+    // Action Icons in big pipeline-graph nodes
+    > .ci-action-icon-container .ci-action-icon-wrapper {
+      height: 30px;
+      width: 30px;
+      background: $white-light;
+      border: 1px solid $border-color;
+      border-radius: 100%;
+      display: block;
 
-        .tooltip-inner {
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
+      &:hover {
+        background-color: $stage-hover-bg;
+        border: 1px solid $stage-hover-bg;
       }
 
-      .ci-status-text {
-        width: 135px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        vertical-align: middle;
-        display: inline-block;
+      svg {
+        fill: $border-color;
         position: relative;
+        left: -1px;
         top: -1px;
       }
 
-      a {
-        color: $gl-text-color-light;
-        text-decoration: none;
+      &:hover svg {
+        fill: $gl-text-color;
       }
+    }
 
-      .dropdown-menu-toggle {
-        background-color: transparent;
-        border: none;
-        width: auto;
-        padding: 0;
-        color: $gl-text-color-light;
-        flex-grow: 1;
-
-        .ci-status-text {
-          max-width: 112px;
-          width: auto;
-        }
-      }
+    > .ci-action-icon-container {
+      position: absolute;
+      right: 5px;
+      top: 5px;
+    }
 
-      .grouped-pipeline-dropdown {
-        padding: 0;
-        width: 186px;
-        left: auto;
-        right: -197px;
-        top: -9px;
+    .ci-status-icon svg {
+      height: 20px;
+      width: 20px;
+    }
 
-        ul {
-          max-height: 245px;
-          overflow: auto;
+    .dropdown-menu-toggle {
+      background-color: transparent;
+      border: none;
+      padding: 0;
+      color: $gl-text-color-secondary;
 
-          li:first-child {
-            padding-top: 8px;
-          }
+      &:focus {
+        outline: none;
+      }
 
-          li:last-child {
-            padding-bottom: 8px;
-          }
-        }
+      &:hover {
+        color: $gl-text-color;
 
-        a {
+        .dropdown-counter-badge {
           color: $gl-text-color;
-          padding: 7px 8px 8px;
-
-          &:hover {
-            background-color: $blue-light-transparent;
-            border-radius: 3px;
-
-            .ci-status-text {
-              text-decoration: none;
-            }
-          }
         }
+      }
+    }
 
-        svg {
-          width: 14px;
-          height: 14px;
-        }
+    > .build-content {
+      display: inline-block;
+      padding: 8px 10px 9px;
+      width: 100%;
+      border: 1px solid $border-color;
+      border-radius: 30px;
+      background-color: $white-light;
 
-        .ci-status-text {
-          width: 112px;
-        }
+      &:hover {
+        background-color: $stage-hover-bg;
+        border: 1px solid $stage-hover-border;
+        color: $gl-text-color;
+      }
+    }
 
-        .arrow {
-          &::before,
-          &::after {
-            content: '';
-            display: inline-block;
-            position: absolute;
-            width: 0;
-            height: 0;
-            border-color: transparent;
-            border-style: solid;
-            top: 18px;
-          }
 
-          &::before {
-            left: -5px;
-            margin-top: -6px;
-            border-width: 7px 5px 7px 0;
-            border-right-color: $border-color;
-          }
-
-          &::after {
-            left: -4px;
-            margin-top: -9px;
-            border-width: 10px 7px 10px 0;
-            border-right-color: $white-light;
-          }
-        }
+    .arrow {
+      &::before,
+      &::after {
+        content: '';
+        display: inline-block;
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-color: transparent;
+        border-style: solid;
+        top: 18px;
       }
 
-      .badge {
-        background-color: $gray-darker;
-        color: $gl-text-color-light;
-        font-weight: normal;
-        margin-left: $btn-xs-side-margin;
+      &::before {
+        left: -5px;
+        margin-top: -6px;
+        border-width: 7px 5px 7px 0;
+        border-right-color: $border-color;
       }
-    }
 
-    svg {
-      vertical-align: middle;
-      margin-right: 5px;
+      &::after {
+        left: -4px;
+        margin-top: -9px;
+        border-width: 10px 7px 10px 0;
+        border-right-color: $white-light;
+      }
     }
 
     // Connect first build in each stage with right horizontal line
@@ -581,121 +611,353 @@
       }
     }
   }
+}
 
-  &:last-child {
-    .build {
-      // Remove right connecting horizontal line from first build in last stage
-      &:first-child {
-        &::after {
-          border: none;
-        }
-      }
-      // Remove right curved connectors from all builds in last stage
-      &:not(:first-child) {
-        &::after {
-          border: none;
-        }
-      }
-      // Remove opposite curve
-      .curve {
-        &::before {
-          display: none;
-        }
+// Triggers the dropdown in the big pipeline graph
+.dropdown-counter-badge {
+  color: $border-color;
+  font-weight: 100;
+  font-size: 15px;
+  position: absolute;
+  right: 13px;
+  top: 8px;
+}
+
+.ci-status-text {
+  max-width: 110px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+  display: inline-block;
+  position: relative;
+  font-weight: normal;
+}
+
+// Dropdown button in mini pipeline graph
+.mini-pipeline-graph-dropdown-toggle {
+  border-radius: 100px;
+  background-color: $white-light;
+  border-width: 1px;
+  border-style: solid;
+  width: 22px;
+  height: 22px;
+  margin: 0;
+  padding: 0;
+  transition: all 0.2s linear;
+  position: relative;
+
+  > .fa.fa-caret-down {
+    position: absolute;
+    left: 20px;
+    top: 5px;
+    display: inline-block;
+    visibility: hidden;
+    opacity: 0;
+    color: inherit;
+    font-size: 12px;
+    transition: visibility 0.1s, opacity 0.1s linear;
+  }
+
+  &:active,
+  &:focus,
+  &:hover {
+    outline: none;
+    width: 35px;
+
+    .fa.fa-caret-down {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+
+  // Dropdown button animation in mini pipeline graph
+  &.ci-status-icon-success {
+    border-color: $green-500;
+    color: $green-500;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: $green-50;
+      border-color: $green-600;
+      color: $green-600;
+
+      svg {
+        fill: $green-600;
       }
     }
   }
 
-  &:first-child {
-    .build {
-      // Remove left curved connectors from all builds in first stage
-      &:not(:first-child) {
-        &::before {
-          border: none;
-        }
+  &.ci-status-icon-failed {
+    border-color: $red-500;
+    color: $red-500;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: $red-50;
+      border-color: $red-600;
+      color: $red-600;
+
+      svg {
+        fill: $red-600;
       }
-      // Remove opposite curve
-      .curve {
-        &::after {
-          display: none;
-        }
+    }
+  }
+
+  &.ci-status-icon-pending,
+  &.ci-status-icon-success_with_warnings {
+    border-color: $orange-500;
+    color: $orange-500;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: $orange-50;
+      border-color: $orange-600;
+      color: $orange-600;
+
+      svg {
+        fill: $orange-600;
       }
     }
   }
 
-  // Curve first child connecting lines in opposite direction
-  .curve {
-    display: none;
+  &.ci-status-icon-running {
+    border-color: $blue-400;
+    color: $blue-400;
 
-    &::before,
-    &::after {
-      content: '';
-      width: 21px;
-      height: 25px;
-      position: absolute;
-      top: -32px;
-      border-top: 2px solid $border-color;
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: $blue-50;
+      border-color: $blue-600;
+      color: $blue-600;
+
+      svg {
+        fill: $blue-600;
+      }
     }
+  }
 
-    &::after {
-      left: -44px;
-      border-right: 2px solid $border-color;
-      border-radius: 0 20px;
+  &.ci-status-icon-canceled,
+  &.ci-status-icon-disabled,
+  &.ci-status-icon-not-found,
+  &.ci-status-icon-manual {
+    border-color: $gl-text-color;
+    color: $gl-text-color;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: rgba($gl-text-color, 0.1);
+      border-color: $gl-text-color;
     }
+  }
 
-    &::before {
-      right: -44px;
-      border-left: 2px solid $border-color;
-      border-radius: 20px 0 0;
+  &.ci-status-icon-created,
+  &.ci-status-icon-skipped {
+    border-color: $gray-darkest;
+    color: $gray-darkest;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: rgba($gray-darkest, 0.1);
+      border-color: $gray-darkest;
     }
   }
 }
 
-.pipeline-actions {
-  border-bottom: none;
-}
+// dropdown content for big and mini pipeline
+.big-pipeline-graph-dropdown-menu,
+.mini-pipeline-graph-dropdown-menu {
+  width: 195px;
+  max-width: 195px;
 
-.toggle-pipeline-btn {
+  li {
+    padding: 2px 3px;
+  }
 
-  .fa {
-    color: $dropdown-header-color;
+  .scrollable-menu {
+    max-height: 245px;
+    overflow: auto;
   }
-}
 
-.tab-pane {
+  // Loading icon
+  .builds-dropdown-loading {
+    margin: 0 auto;
+    width: 20px;
+  }
+
+  // Action icon on the right
+  a.ci-action-icon-wrapper {
+    color: $action-icon-color;
+    border: 1px solid $action-icon-color;
+    border-radius: 20px;
+    width: 22px;
+    height: 22px;
+    padding: 2px 0 0 5px;
+    cursor: pointer;
+    float: right;
+    margin: -26px 9px 0 0;
+    font-size: 12px;
+    background-color: $white-light;
+
+    &:hover,
+    &:focus {
+      background-color: $stage-hover-bg;
+      border: 1px solid transparent;
+    }
+
+    svg {
+      width: 22px;
+      height: 22px;
+      left: -6px;
+      position: relative;
+      top: -3px;
+      fill: $action-icon-color;
+    }
+
+    &:hover svg,
+    &:focus svg {
+      fill: $gl-text-color;
+    }
+  }
 
-  &.pipelines {
+  // link to the build
+  .mini-pipeline-graph-dropdown-item {
+    padding: 3px 7px 4px;
+    clear: both;
+    font-weight: normal;
+    line-height: 1.428571429;
+    white-space: nowrap;
+    margin: 0 5px;
+    border-radius: 3px;
 
-    .ci-table {
-      min-width: 900px;
+    // build name
+    .ci-build-text {
+      font-weight: 200;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      max-width: 70%;
+      color: $gl-text-color-secondary;
+      margin-left: 2px;
+      display: inline-block;
+      top: 1px;
+      vertical-align: text-bottom;
+      position: relative;
     }
 
-    .content-list.pipelines {
-      overflow: auto;
+    // status icon on the left
+    .ci-status-icon {
+      top: 3px;
+      position: relative;
+
+      > svg {
+        overflow: visible;
+        width: 18px;
+        height: 18px;
+      }
     }
 
-    .stage {
-      max-width: 100px;
-      width: 100px;
+    &:hover,
+    &:focus {
+      outline: none;
+      text-decoration: none;
+      color: $gl-text-color;
+      background-color: $stage-hover-bg;
     }
+  }
+}
 
-    .pipeline-actions {
-      min-width: initial;
+// Dropdown in the big pipeline graph
+.big-pipeline-graph-dropdown-menu {
+  width: 195px;
+  min-width: 195px;
+  left: auto;
+  right: -195px;
+  top: -4px;
+  box-shadow: 0 1px 5px $black-transparent;
+
+  .mini-pipeline-graph-dropdown-item {
+    .ci-status-icon {
+      top: -1px;
+    }
+  }
+}
+
+/**
+ * Top arrow in the dropdown in the mini pipeline graph
+ */
+.mini-pipeline-graph-dropdown-menu {
+  .arrow-up {
+    &::before,
+    &::after {
+      content: '';
+      display: inline-block;
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-color: transparent;
+      border-style: solid;
+      top: -6px;
+      left: 2px;
+      border-width: 0 5px 6px;
+    }
+
+    &::before {
+      border-width: 0 5px 5px;
+      border-bottom-color: $border-color;
+    }
+
+    &::after {
+      margin-top: 1px;
+      border-bottom-color: $white-light;
     }
   }
+}
 
-  &.builds {
+/**
+ * Terminal
+ */
+.terminal-icon {
+  margin-left: 3px;
+}
 
-    .ci-table {
-      tr {
-        height: 71px;
-      }
+.terminal-container {
+  .content-block {
+    border-bottom: none;
+  }
+
+  #terminal {
+    margin-top: 10px;
+    min-height: 450px;
+    box-sizing: border-box;
+
+    > div {
+      min-height: 450px;
     }
   }
 }
 
-.ci-status-icon-created {
+/**
+ * Play button with icon in dropdowns
+ */
+.ci-table .no-btn {
+  border: none;
+  background: none;
+  outline: none;
+  width: 100%;
+  text-align: left;
 
-  svg {
-    fill: $gray-darkest;
+  .icon-play {
+    position: relative;
+    top: 2px;
+    margin-right: 5px;
+    height: 13px;
+    width: 12px;
   }
 }
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index ede29db1979..703c5fc8869 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -23,6 +23,10 @@
   color: $md-link-color;
 }
 
+.private-tokens-reset div.reset-action:not(:first-child) {
+  padding-top: 15px;
+}
+
 .oauth-buttons {
   .btn-group {
     margin-right: 10px;
@@ -56,8 +60,8 @@
 
 .account-well {
   padding: 10px;
-  background-color: $help-well-bg;
-  border: 1px solid $help-well-border;
+  background-color: $gray-light;
+  border: 1px solid $border-color;
   border-radius: $border-radius-base;
 
   ul {
@@ -70,7 +74,6 @@
   display: inline;
 
   a {
-    color: $blue-dark;
     text-decoration: none;
   }
 }
@@ -132,7 +135,7 @@
 .provider-btn-group {
   display: inline-block;
   margin-right: 10px;
-  border: 1px solid $provider-btn-group-border;
+  border: 1px solid $border-color;
   border-radius: 3px;
 
   &:last-child {
@@ -143,7 +146,7 @@
 .provider-btn-image {
   display: inline-block;
   padding: 5px 10px;
-  border-right: 1px solid $provider-btn-group-border;
+  border-right: 1px solid $border-color;
 
   > img {
     width: 20px;
@@ -176,7 +179,7 @@
   .modal-dialog {
     width: 380px;
 
-    @media (max-width: $screen-sm-min) {
+    @media (max-width: $screen-xs-max) {
       width: auto;
     }
 
@@ -194,11 +197,7 @@
 }
 
 .personal-access-tokens-never-expires-label {
-  color: $personal-access-tokens-disabled-label-color;
-}
-
-.datepicker.personal-access-tokens-expires-at .ui-state-disabled span {
-  text-align: center;
+  color: $note-disabled-comment-color;
 }
 
 .created-personal-access-token-container {
@@ -212,8 +211,8 @@
   }
 }
 
-.user-profile {
 
+.user-profile {
   .cover-controls a {
     margin-left: 5px;
   }
@@ -227,8 +226,11 @@
     }
   }
 
-  @media (max-width: $screen-xs-max) {
+  .user-profile-nav {
+    font-size: 0;
+  }
 
+  @media (max-width: $screen-xs-max) {
     .cover-block {
       padding-top: 20px;
     }
@@ -249,6 +251,12 @@
         }
       }
     }
+
+    .user-profile-nav {
+      a {
+        margin-right: 0;
+      }
+    }
   }
 }
 
@@ -257,4 +265,53 @@ table.u2f-registrations {
   td:not(:last-child) {
     border-right: solid 1px transparent;
   }
-}
\ No newline at end of file
+}
+
+.oauth-application-show {
+  .scope-name {
+    font-weight: 600;
+  }
+
+  .scopes-list {
+    padding-left: 18px;
+  }
+}
+
+.user-callout {
+  margin: 0 auto;
+
+  .bordered-box {
+    border: 1px solid $border-color;
+    border-radius: $border-radius-default;
+  }
+
+  .landing {
+    margin-top: $gl-padding;
+    margin-bottom: $gl-padding;
+
+    .close {
+      margin-right: 20px;
+    }
+
+    .dismiss-icon {
+      float: right;
+      cursor: pointer;
+      color: $cycle-analytics-dismiss-icon-color;
+    }
+
+    .svg-container {
+      text-align: center;
+
+      svg {
+        width: 136px;
+        height: 136px;
+      }
+    }
+  }
+
+  @media(max-width: $screen-xs-max) {
+    .inner-content {
+      padding-left: 30px;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/profiles/preferences.scss b/app/assets/stylesheets/pages/profiles/preferences.scss
index f8da0983b77..305feaacaa1 100644
--- a/app/assets/stylesheets/pages/profiles/preferences.scss
+++ b/app/assets/stylesheets/pages/profiles/preferences.scss
@@ -1,42 +1,3 @@
-.application-theme {
-  label {
-    margin-right: 20px;
-    text-align: center;
-
-    .preview {
-      border-radius: 4px;
-
-      height: 80px;
-      margin-bottom: 10px;
-      width: 160px;
-
-      &.ui_blue {
-        background: $theme-blue;
-      }
-
-      &.ui_charcoal {
-        background: $theme-charcoal;
-      }
-
-      &.ui_graphite {
-        background: $theme-graphite;
-      }
-
-      &.ui_gray {
-        background: $theme-gray;
-      }
-
-      &.ui_green {
-        background: $theme-green;
-      }
-
-      &.ui_violet {
-        background: $theme-violet;
-      }
-    }
-  }
-}
-
 .syntax-theme {
   label {
     margin-right: 20px;
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index d9f32642728..eb0c9d2faef 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -6,33 +6,27 @@
   }
 }
 
-.no-ssh-key-message,
-.project-limit-message {
-  background-color: #f28d35;
-  margin-bottom: 0;
-}
-
 .new_project,
 .edit-project {
 
-  fieldset {
-
-    &.features {
+  .sharing-and-permissions {
+    .header {
+      padding-top: $gl-vert-padding;
+    }
 
-      .label-light {
-        margin-bottom: 0;
-      }
+    .label-light {
+      margin-bottom: 0;
+    }
 
-      .help-block {
-        margin-top: 0;
-      }
+    .help-block {
+      margin-top: 0;
     }
 
     .form-group {
       margin-bottom: 5px;
     }
 
-    &> .form-group {
+    & > .form-group {
       padding-left: 0;
     }
   }
@@ -41,12 +35,8 @@
     margin-bottom: 10px;
   }
 
-  .project-path {
-    padding-right: 0;
-
-    .form-control {
-      border-radius: $border-radius-base;
-    }
+  .project-path .form-control {
+    border-radius: $border-radius-base;
   }
 
   .input-group > div {
@@ -76,17 +66,18 @@
     &.static-namespace {
       height: 35px;
       border-radius: 3px;
-      border: 1px solid #e5e5e5;
+      border: 1px solid $border-color;
     }
 
-    &+ .select2 a {
+    & + .select2 a {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
     }
   }
 }
 
-.project-home-panel {
+.project-home-panel,
+.group-home-panel {
   padding-top: 24px;
   padding-bottom: 24px;
 
@@ -94,22 +85,24 @@
     border-bottom: 1px solid $border-color;
   }
 
-  .project-avatar {
+  .project-avatar,
+  .group-avatar {
     float: none;
     margin: 0 auto;
-    border: none;
 
     &.identicon {
       border-radius: 50%;
     }
   }
 
-  .project-title {
+  .project-title,
+  .group-title {
     margin-top: 10px;
     margin-bottom: 10px;
     font-size: 24px;
     font-weight: 400;
     line-height: 1;
+    word-wrap: break-word;
 
     .fa {
       margin-left: 2px;
@@ -118,10 +111,11 @@
     }
   }
 
-  .project-home-desc {
+  .project-home-desc,
+  .group-home-desc {
     margin-left: auto;
     margin-right: auto;
-    margin-bottom: 15px;
+    margin-bottom: 0;
     max-width: 700px;
 
     > p {
@@ -141,13 +135,20 @@
   }
 }
 
-.project-repo-buttons {
-  font-size: 0;
+.nav > .project-repo-buttons {
+  margin-top: 0;
+}
 
+.project-repo-buttons,
+.group-buttons {
   .btn {
     @include btn-gray;
     padding: 3px 10px;
 
+    &:last-child {
+      margin-left: 0;
+    }
+
     .fa {
       color: $layout-link-gray;
     }
@@ -168,22 +169,33 @@
     }
   }
 
-  .project-repo-btn-group,
-  .notification-dropdown,
-  .project-dropdown {
-    margin-left: 10px;
+  .project-action-button {
+    margin: 15px 5px 0;
+    vertical-align: top;
+  }
+
+  .notification-dropdown .dropdown-menu {
+    @extend .dropdown-menu-align-right;
+  }
+
+  .download-button {
+    @media (max-width: $screen-md-max) {
+      margin-left: 0;
+    }
   }
 
   .count-buttons {
     display: inline-block;
     vertical-align: top;
+    margin-top: 15px;
   }
 
   .project-clone-holder {
     display: inline-block;
+    margin: 15px 5px 0 0;
 
     input {
-      height: 29px;
+      height: 28px;
     }
   }
 
@@ -205,7 +217,7 @@
         left: 0;
         margin-top: -6px;
         border-width: 7px 5px 7px 0;
-        border-right-color: #dce0e5;
+        border-right-color: $count-arrow-border;
         pointer-events: none;
       }
 
@@ -220,7 +232,7 @@
         left: 1px;
         margin-top: -9px;
         border-width: 10px 7px 10px 0;
-        border-right-color: #fff;
+        border-right-color: $white-light;
         pointer-events: none;
       }
     }
@@ -228,7 +240,7 @@
     .count {
       @include btn-gray;
       display: inline-block;
-      background: white;
+      background: $white-light;
       border-radius: 2px;
       border-width: 1px;
       border-style: solid;
@@ -237,7 +249,7 @@
       line-height: 13px;
       padding: $gl-vert-padding $gl-padding;
       letter-spacing: .4px;
-      padding: 7px 14px;
+      padding: 6px 14px;
       text-align: center;
       vertical-align: middle;
       touch-action: manipulation;
@@ -250,12 +262,19 @@
       }
 
       &:hover {
-        background: #fff;
+        background: $white-light;
       }
     }
   }
 }
 
+.project-repo-buttons {
+  .project-action-button .dropdown-menu {
+    max-height: 250px;
+    overflow-y: auto;
+  }
+}
+
 .split-one {
   display: inline-table;
   margin-right: 12px;
@@ -277,12 +296,12 @@
     .option-title {
       font-weight: normal;
       display: inline-block;
-      color: $gl-gray-dark;
+      color: $gl-text-color;
     }
 
     .option-descr {
       margin-left: 29px;
-      color: #54565b;
+      color: $project-option-descr-color;
     }
 
     .fa-lock {
@@ -294,7 +313,7 @@
 .save-project-loader {
   margin-top: 50px;
   margin-bottom: 50px;
-  color: #555;
+  color: $save-project-loader-color;
 }
 
 .transfer-project .select2-container {
@@ -320,7 +339,7 @@
 a.deploy-project-label {
   padding: 5px;
   margin-right: 5px;
-  color: $gl-gray;
+  color: $gl-text-color;
   background-color: $row-hover;
 
   &:hover {
@@ -357,11 +376,11 @@ a.deploy-project-label {
 
   > li + li::before {
     padding: 0 3px;
-    color: #999;
+    color: $project-breadcrumb-color;
   }
 
   a {
-    color: $gl-dark-link-color;
+    color: $gl-text-color;
   }
 
   .dropdown-menu {
@@ -400,13 +419,13 @@ a.deploy-project-label {
         width: 100px;
         height: 100px;
         background-color: $gray-light;
-        border: 1px solid $gray-dark;
+        border: 1px solid $white-normal;
         margin: 0 auto;
         border-radius: 50%;
 
         i {
           font-size: 100px;
-          color: $gray-dark;
+          color: $white-normal;
         }
       }
 
@@ -415,7 +434,7 @@ a.deploy-project-label {
         width: 100%;
         height: 100%;
         padding-top: $gl-padding;
-        color: $gl-gray;
+        color: $gl-text-color;
 
         .caption {
           min-height: 30px;
@@ -464,11 +483,12 @@ a.deploy-project-label {
 
 .project-stats {
   font-size: 0;
-  border-bottom: 1px solid $border-color;
+  text-align: center;
 
   .nav {
     padding-top: 12px;
     padding-bottom: 12px;
+    border-bottom: 1px solid $border-color;
   }
 
   .nav > li {
@@ -478,12 +498,12 @@ a.deploy-project-label {
       margin-right: $gl-padding;
     }
 
-    &.project-repo-buttons-right {
-      margin-top: 10px;
+    &.right {
+      vertical-align: top;
+      margin-top: 0;
 
-      @media (min-width: $screen-md-min) {
+      @media (min-width: $screen-lg-min) {
         float: right;
-        margin-top: 0;
       }
     }
   }
@@ -491,18 +511,18 @@ a.deploy-project-label {
   .nav > li > a {
     padding: 0;
     background-color: transparent;
-    font-size: 15px;
+    font-size: 14px;
     line-height: 29px;
     color: $notes-light-color;
 
     &:hover,
     &:focus {
-      color: darken($notes-light-color, 15%);
+      color: $gl-text-color;
     }
   }
 
   li.missing {
-    border: 1px dashed $border-gray-light;
+    border: 1px dashed $border-gray-normal;
     border-radius: $border-radius-default;
 
     a {
@@ -519,20 +539,20 @@ a.deploy-project-label {
 }
 
 pre.light-well {
-  border-color: #f1f1f1;
+  border-color: $well-light-border;
 }
 
 .git-empty {
   margin: 0 7px 7px;
 
   h5 {
-    color: #5c5d5e;
+    color: $gl-text-color;
   }
 
   .light-well {
     border-radius: 2px;
 
-    color: #5b6169;
+    color: $well-light-text-color;
     font-size: 13px;
     line-height: 1.6em;
   }
@@ -552,38 +572,65 @@ pre.light-well {
 /*
  * Projects list rendered on dashboard and user page
  */
-
 .projects-list {
   @include basic-list;
+  display: flex;
+  flex-direction: column;
 
-  .project-row {
-    border-color: $table-border-color;
+  // Disable Flexbox for admin page
+  &.admin-projects {
+    display: block;
 
-    .project-full-name {
-      @include str-truncated;
+    .project-row {
+      display: block;
     }
+  }
 
-    .controls {
-      line-height: $list-text-height;
+  .project-row {
+    display: flex;
+    align-items: center;
+    @include basic-list-stats;
+  }
 
-      a:hover {
-        text-decoration: none;
-      }
+  h3 {
+    font-size: $gl-font-size;
+  }
 
-      > span {
-        margin-left: 10px;
-      }
+  a {
+    color: $gl-text-color;
+  }
 
-      svg {
-        position: relative;
-        top: 2px;
-      }
+  .avatar-container,
+  .controls {
+    flex: 0 0 auto;
+  }
+
+  .avatar-container {
+    align-self: flex-start;
+  }
+
+  .project-details {
+    min-width: 0;
+
+    p,
+    .commit-row-message {
+      @include str-truncated(100%);
+      margin-bottom: 0;
     }
   }
 
-  .bottom {
-    padding-top: $gl-padding;
-    padding-bottom: 0;
+  .controls {
+    margin-left: auto;
+  }
+
+  .ci-status-link {
+    display: inline-block;
+    line-height: 17px;
+    vertical-align: middle;
+
+    &:hover {
+      text-decoration: none;
+    }
   }
 }
 
@@ -592,46 +639,28 @@ pre.light-well {
   margin: 0;
 }
 
-
-.activity-filter-block {
-  .controls {
-    padding-bottom: 7px;
-    margin-top: 8px;
-    border-bottom: 1px solid $border-color;
+.commits-search-form {
+  .input-short {
+    min-width: 200px;
   }
 }
 
 .project-last-commit {
+  background-color: $gray-light;
+  border: 1px solid $border-color;
+  border-radius: $border-radius-base;
+  padding: 12px;
+
   @media (min-width: $screen-sm-min) {
     margin-top: $gl-padding;
   }
 
-  &.container-fluid {
-    padding-top: 12px;
-    padding-bottom: 12px;
-    background-color: $background-color;
-    border: 1px solid $border-color;
-    border-right-width: 0;
-    border-left-width: 0;
-
-    @media (min-width: $screen-sm-min) {
-      border-right-width: 1px;
-      border-left-width: 1px;
-    }
-  }
-
-  &.container-limited {
-    @media (min-width: 1281px) {
-      border-radius: $border-radius-base;
-    }
-  }
-
   .ci-status {
     margin-right: $gl-padding;
   }
 
   .commit-row-message {
-    color: $gl-gray;
+    color: $gl-text-color;
   }
 
   .commit_short_id {
@@ -686,7 +715,7 @@ pre.light-well {
 
   .form-control {
     @extend .monospace;
-    background: #fff;
+    background: $white-light;
     font-size: 14px;
     margin-left: -1px;
     cursor: auto;
@@ -696,17 +725,17 @@ pre.light-well {
 
 .cannot-be-merged,
 .cannot-be-merged:hover {
-  color: #e62958;
+  color: $error-exclamation-point;
   margin-top: 2px;
 }
 
 .private-forks-notice .private-fork-icon {
   i:nth-child(1) {
-    color: #2aa056;
+    color: $project-private-forks-notice-odd;
   }
 
   i:nth-child(2) {
-    color: #fff;
+    color: $white-light;
   }
 }
 
@@ -717,9 +746,20 @@ pre.light-well {
   }
 }
 
+.create-new-protected-branch-button {
+  @include dropdown-link;
+
+  width: 100%;
+  background-color: transparent;
+  border: 0;
+  text-align: left;
+}
+
 .protected-branches-list {
+  margin-bottom: 30px;
+
   a {
-    color: $gl-gray;
+    color: $gl-text-color;
 
     &:hover {
       color: $gl-link-color;
@@ -765,7 +805,8 @@ pre.light-well {
 }
 
 .project-refs-form .dropdown-menu,
-.dropdown-menu-projects {
+.dropdown-menu-projects,
+.dropdown-menu-branches {
   width: 300px;
 
   @media (min-width: $screen-sm-min) {
@@ -779,7 +820,31 @@ pre.light-well {
 
 .compare-form-group {
   .dropdown-menu {
-    width: 300px;
+    width: 100%;
+
+    @media (min-width: $screen-sm-min) {
+      width: 300px;
+    }
+  }
+
+  + .compare-ellipsis {
+    width: 100%;
+    vertical-align: middle;
+    text-align: center;
+    margin-top: -20px;
+
+    @media (min-width: $screen-sm-min) {
+      margin-top: 0;
+      width: auto;
+    }
+  }
+
+  .inline-input-group {
+    width: 100%;
+
+    @media (min-width: $screen-sm-min) {
+      width: 250px;
+    }
   }
 }
 
@@ -834,10 +899,18 @@ pre.light-well {
   }
 }
 
-.project-feature-nested {
+.project-feature {
+  padding-top: 10px;
+
   @media (min-width: $screen-sm-min) {
     padding-left: 45px;
   }
+
+  &.nested {
+    @media (min-width: $screen-sm-min) {
+      padding-left: 90px;
+    }
+  }
 }
 
 .project-repo-select {
@@ -846,3 +919,55 @@ pre.light-well {
     pointer-events: none;
   }
 }
+
+.variables-table {
+  table-layout: fixed;
+
+  &.table-responsive {
+    border: none;
+  }
+
+  .variable-key {
+    width: 300px;
+    max-width: 300px;
+    overflow: hidden;
+    word-wrap: break-word;
+
+    // override bootstrap
+    white-space: normal!important;
+
+    @media (max-width: $screen-sm-max) {
+      width: 150px;
+      max-width: 150px;
+    }
+  }
+
+  .variable-value {
+    @media(max-width: $screen-xs-max) {
+      width: 150px;
+      max-width: 150px;
+      overflow: hidden;
+      word-wrap: break-word;
+    }
+  }
+}
+
+.services-installation-info .row {
+  margin-bottom: 10px;
+}
+
+.service-installation {
+  padding: 32px;
+  margin: 32px;
+  border-radius: 3px;
+  background-color: $white-light;
+
+  h3 {
+    margin-top: 0;
+  }
+
+  hr {
+    margin: 32px 0;
+    border-color: $border-color;
+  }
+}
diff --git a/app/assets/stylesheets/pages/runners.scss b/app/assets/stylesheets/pages/runners.scss
index 7b3878c91df..9b6ff237557 100644
--- a/app/assets/stylesheets/pages/runners.scss
+++ b/app/assets/stylesheets/pages/runners.scss
@@ -1,27 +1,27 @@
 .runner-state {
   padding: 6px 12px;
   margin-right: 10px;
-  color: #fff;
+  color: $white-light;
 
   &.runner-state-shared {
-    background: #32b186;
+    background: $runner-state-shared-bg;
   }
 
   &.runner-state-specific {
-    background: #3498db;
+    background: $runner-state-specific-bg;
   }
 }
 
 .runner-status-online {
-  color: green;
+  color: $runner-status-online-color;
 }
 
 .runner-status-offline {
-  color: gray;
+  color: $runner-status-offline-color;
 }
 
 .runner-status-paused {
-  color: red;
+  color: $runner-status-paused-color;
 }
 
 .runner {
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index bf688af50e2..543d2ece3df 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -8,6 +8,23 @@
       border-bottom: none;
     }
   }
+
+  .blob-result {
+    margin: 5px 0;
+  }
+}
+
+.search form:hover,
+.file-finder-input:hover,
+.issuable-search-form:hover,
+.search-text-input:hover,
+.form-control:hover {
+  border-color: lighten($dropdown-input-focus-border, 20%);
+  box-shadow: 0 0 4px lighten($search-input-focus-shadow-color, 20%);
+}
+
+input[type="checkbox"]:hover {
+  box-shadow: 0 0 2px 2px lighten($search-input-focus-shadow-color, 20%), 0 0 0 1px lighten($search-input-focus-shadow-color, 20%);
 }
 
 .search {
@@ -21,6 +38,11 @@
     padding: 4px;
     width: $search-input-width;
     line-height: 24px;
+
+    &:hover {
+      border-color: lighten($dropdown-input-focus-border, 20%);
+      box-shadow: 0 0 4px lighten($search-input-focus-shadow-color, 20%);
+    }
   }
 
   .location-text {
@@ -28,11 +50,9 @@
   }
 
   .search-input {
-    padding-right: 20px;
     border: none;
     font-size: 14px;
-    outline: none;
-    padding: 0;
+    padding: 0 20px 0 0;
     margin-left: 5px;
     line-height: 25px;
     width: 98%;
@@ -44,9 +64,9 @@
     border-radius: $border-radius-default;
     font-size: 14px;
     font-style: normal;
-    color: $location-badge-color;
+    color: $note-disabled-comment-color;
     display: inline-block;
-    background-color: $location-badge-bg;
+    background-color: $gray-normal;
     vertical-align: top;
     cursor: default;
   }
@@ -133,7 +153,7 @@
 
     .search-input-wrap {
       i {
-        color: $location-icon-active-color;
+        color: $layout-link-gray;
       }
     }
   }
@@ -162,7 +182,8 @@
     display: flex;
   }
 
-  .search-field-holder {
+  .search-field-holder,
+  .project-filter-form {
     -webkit-flex: 1 0 auto;
     flex: 1 0 auto;
     position: relative;
@@ -181,7 +202,8 @@
     pointer-events: none;
   }
 
-  .search-text-input {
+  .search-text-input,
+  .project-filter-form-field {
     padding-left: $gl-padding + 15px;
     padding-right: $gl-padding + 15px;
   }
@@ -229,6 +251,5 @@
   &:hover,
   &:focus {
     color: $gl-link-color;
-    outline: none;
   }
 }
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 2e8f356298d..3889deee21a 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -1,5 +1,5 @@
 .settings-list-icon {
-  color: $gl-placeholder-color;
+  color: $gl-text-color-secondary;
   font-size: $settings-icon-size;
   line-height: 42px;
 }
@@ -20,3 +20,18 @@
 .danger-title {
   color: $gl-danger;
 }
+
+.service-settings .control-label {
+  padding-top: 0;
+}
+
+.token-token-container {
+  #impersonation-token-token {
+    width: 80%;
+    display: inline;
+  }
+
+  .btn-clipboard {
+    margin-left: 5px;
+  }
+}
diff --git a/app/assets/stylesheets/pages/settings_ci_cd.scss b/app/assets/stylesheets/pages/settings_ci_cd.scss
new file mode 100644
index 00000000000..b97a29cd1a0
--- /dev/null
+++ b/app/assets/stylesheets/pages/settings_ci_cd.scss
@@ -0,0 +1,12 @@
+.triggers-container {
+  .label-container {
+    display: inline-block;
+    margin-left: 10px;
+  }
+}
+
+.trigger-actions {
+  .btn {
+    margin-left: 10px;
+  }
+}
diff --git a/app/assets/stylesheets/pages/sherlock.scss b/app/assets/stylesheets/pages/sherlock.scss
index bed6470dbd3..23a9c2ada80 100644
--- a/app/assets/stylesheets/pages/sherlock.scss
+++ b/app/assets/stylesheets/pages/sherlock.scss
@@ -28,6 +28,6 @@ table .sherlock-code {
 }
 
 .sherlock-line-samples-table .slow {
-  color: $red-light;
+  color: $red-500;
   font-weight: bold;
 }
diff --git a/app/assets/stylesheets/pages/snippets.scss b/app/assets/stylesheets/pages/snippets.scss
deleted file mode 100644
index 857eb76131a..00000000000
--- a/app/assets/stylesheets/pages/snippets.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-.snippet-form-holder .file-holder .file-title {
-  padding: 2px;
-}
-
-.markdown-snippet-copy {
-  position: fixed;
-  top: -10px;
-  left: -10px;
-  max-height: 0;
-  max-width: 0;
-}
-
-.snippet-file-content {
-  border-radius: 3px;
-  margin-bottom: $gl-padding;
-
-  .btn-clipboard {
-    @extend .btn;
-  }
-}
-
-.project-snippets .awards {
-  border-bottom: 1px solid $table-border-color;
-  padding-bottom: $gl-padding;
-}
-
-.snippet-title {
-  font-size: 24px;
-  font-weight: 600;
-  padding: $gl-padding;
-  padding-left: 0;
-}
-
-.snippet-actions {
-  @media (min-width: $screen-sm-min) {
-    float: right;
-  }
-}
-
-.snippet-scope-menu .btn-new {
-  margin-top: 15px;
-}
diff --git a/app/assets/stylesheets/pages/stat_graph.scss b/app/assets/stylesheets/pages/stat_graph.scss
index 69288b31cc4..dfa4d033fb8 100644
--- a/app/assets/stylesheets/pages/stat_graph.scss
+++ b/app/assets/stylesheets/pages/stat_graph.scss
@@ -1,16 +1,16 @@
 .tint-box {
-  background: #f3f3f3;
+  background: $stat-graph-common-bg;
   position: relative;
   margin-bottom: 10px;
 }
 
 .area {
-  fill: #1db34f;
+  fill: $stat-graph-area-fill;
   fill-opacity: 0.5;
 }
 
 .axis {
-  fill: #aaa;
+  fill: $stat-graph-axis-fill;
   font-size: 10px;
 }
 
@@ -37,26 +37,26 @@
     @include make-md-column(6);
     margin-top: 10px;
 
-    @media (max-width: $screen-sm-min) {
+    @media (max-width: $screen-xs-max) {
       width: 100%;
     }
   }
 
   .person .spark {
     display: block;
-    background: #f3f3f3;
+    background: $stat-graph-common-bg;
     width: 100%;
   }
 
   .person .area-contributor {
-    fill: #f17f49;
+    fill: $stat-graph-orange-fill;
   }
 }
 
 .selection rect {
-  fill: #333;
+  fill: $stat-graph-selection-fill;
   fill-opacity: 0.1;
-  stroke: #333;
+  stroke: $stat-graph-selection-stroke;
   stroke-width: 1px;
   stroke-opacity: 0.4;
   shape-rendering: crispedges;
diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss
index 92997eae8b9..4a284247143 100644
--- a/app/assets/stylesheets/pages/status.scss
+++ b/app/assets/stylesheets/pages/status.scss
@@ -1,8 +1,8 @@
 .container-fluid {
   .ci-status {
-    padding: 2px 7px;
+    padding: 2px 7px 4px;
     margin-right: 10px;
-    border: 1px solid #eee;
+    border: 1px solid $gray-darker;
     white-space: nowrap;
     border-radius: 4px;
 
@@ -11,80 +11,133 @@
       text-decoration: none;
     }
 
-    &.ci-failed {
-      color: $gl-danger;
-      border-color: $gl-danger;
+    svg {
+      height: 13px;
+      width: 13px;
+      position: relative;
+      top: 2px;
+      overflow: visible;
+    }
+
+    &.ci-failed,
+    &.ci-failed_with_warnings {
+      color: $red-500;
+      border-color: $red-500;
+
+      &:not(span):hover {
+        background-color: $red-50;
+        color: $red-600;
+        border-color: $red-600;
+
+        svg {
+          fill: $red-600;
+        }
+      }
+
+      svg {
+        fill: $red-500;
+      }
     }
 
     &.ci-success,
     &.ci-success_with_warnings {
-      color: $gl-success;
-      border-color: $gl-success;
-    }
+      color: $green-600;
+      border-color: $green-500;
 
-    &.ci-info {
-      color: $gl-info;
-      border-color: $gl-info;
+      &:not(span):hover {
+        background-color: $green-50;
+        color: $green-700;
+        border-color: $green-600;
+
+        svg {
+          fill: $green-600;
+        }
+      }
+
+      svg {
+        fill: $green-500;
+      }
     }
 
     &.ci-canceled,
-    &.ci-skipped,
     &.ci-disabled {
-      color: $gl-gray;
-      border-color: $gl-gray;
+      color: $gl-text-color;
+      border-color: $gl-text-color;
+
+      &:not(span):hover {
+        background-color: rgba($gl-text-color, .07);
+      }
+
+      svg {
+        fill: $gl-text-color;
+      }
     }
 
     &.ci-pending {
-      color: $gl-warning;
-      border-color: $gl-warning;
+      color: $orange-600;
+      border-color: $orange-500;
+
+      &:not(span):hover {
+        background-color: $orange-50;
+        color: $orange-700;
+        border-color: $orange-600;
+
+        svg {
+          fill: $orange-600;
+        }
+      }
+
+      svg {
+        fill: $orange-500;
+      }
     }
 
+    &.ci-info,
     &.ci-running {
-      color: $blue-normal;
-      border-color: $blue-normal;
-    }
+      color: $blue-500;
+      border-color: $blue-500;
 
-    &.ci-created {
-      color: $table-text-gray;
-      border-color: $table-text-gray;
+      &:not(span):hover {
+        background-color: $blue-50;
+        color: $blue-600;
+        border-color: $blue-600;
+
+        svg {
+          fill: $blue-600;
+        }
+      }
 
       svg {
-        fill: $table-text-gray;
+        fill: $blue-500;
       }
     }
 
-    svg {
-      height: 13px;
-      width: 13px;
-      position: relative;
-      top: 1px;
-      margin: 0 3px;
-      overflow: visible;
-    }
-  }
+    &.ci-created,
+    &.ci-skipped {
+      color: $gl-text-color-secondary;
+      border-color: $gl-text-color-secondary;
 
-  .ci-status-icon-success {
-    color: $gl-success;
-  }
+      &:not(span):hover {
+        background-color: rgba($gl-text-color-secondary, .07);
+      }
 
-  .ci-status-icon-failed {
-    color: $gl-danger;
-  }
+      svg {
+        fill: $gl-text-color-secondary;
+      }
+    }
 
-  .ci-status-icon-pending,
-  .ci-status-icon-success_with_warning {
-    color: $gl-warning;
-  }
+    &.ci-manual {
+      color: $gl-text-color;
+      border-color: $gl-text-color;
 
-  .ci-status-icon-running {
-    color: $blue-normal;
-  }
+      &:not(span):hover {
+        background-color: rgba($gl-text-color, .07);
+      }
 
-  .ci-status-icon-canceled,
-  .ci-status-icon-disabled,
-  .ci-status-icon-not-found,
-  .ci-status-icon-skipped {
-    color: $gl-gray;
+      svg {
+        fill: $gl-text-color;
+      }
+    }
   }
 }
 
@@ -95,3 +148,9 @@
     left: 5px;
   }
 }
+
+.ci-status-link {
+  svg {
+    overflow: visible;
+  }
+}
diff --git a/app/assets/stylesheets/pages/tags.scss b/app/assets/stylesheets/pages/tags.scss
deleted file mode 100644
index 24ebd3e7cfa..00000000000
--- a/app/assets/stylesheets/pages/tags.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.tag-buttons {
-  line-height: 40px;
-
-  .btn:not(.dropdown-toggle) {
-    margin-left: 10px;
-  }
-}
diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss
index b3aef2fdd32..a39815319f3 100644
--- a/app/assets/stylesheets/pages/todos.scss
+++ b/app/assets/stylesheets/pages/todos.scss
@@ -3,23 +3,6 @@
  *
  */
 
-.navbar-nav {
-  li {
-    .badge.todos-pending-count {
-      margin-top: -5px;
-      font-weight: normal;
-      background: $todo-alert-blue;
-      margin-left: -17px;
-      font-size: 11px;
-      color: white;
-      padding: 3px;
-      padding-top: 1px;
-      padding-bottom: 1px;
-      border-radius: 3px;
-    }
-  }
-}
-
 .todos-list > .todo {
   // workaround because we cannot use border-colapse
   border-top: 1px solid transparent;
@@ -43,6 +26,13 @@
     }
   }
 
+  .todo-avatar,
+  .todo-actions {
+    @include transition(opacity);
+    -webkit-flex: 0 0 auto;
+    flex: 0 0 auto;
+  }
+
   .todo-actions {
     display: -webkit-flex;
     display: flex;
@@ -55,15 +45,62 @@
   }
 
   .todo-item {
-    -webkit-flex: auto;
-    flex: auto;
+    -webkit-flex: 0 1 100%;
+    flex: 0 1 100%;
+    min-width: 0;
+  }
+
+  &.todo-pending.done-reversible {
+    background-color: $white-light;
+
+    &:hover {
+      border-color: $white-dark;
+      background-color: $gray-light;
+
+      .todo-avatar,
+      .todo-item {
+        opacity: .6;
+      }
+    }
+
+    .todo-avatar,
+    .todo-item {
+      opacity: .2;
+    }
+
+    .btn {
+      background-color: $gray-light;
+    }
   }
 }
 
 .todo-item {
+  @include transition(opacity);
+
   .todo-title {
-    @include str-truncated(calc(100% - 174px));
-    overflow: visible;
+    display: flex;
+
+    & > .title-item {
+      -webkit-flex: 0 0 auto;
+      flex: 0 0 auto;
+      margin: 0 2px;
+
+      &:first-child {
+        margin-left: 0;
+      }
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+
+    .todo-label {
+      -webkit-flex: 0 1 auto;
+      flex: 0 1 auto;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
 
   .status-box {
@@ -76,12 +113,16 @@
     font-size: 14px;
   }
 
+  .action-name {
+    font-weight: normal;
+  }
+
   .todo-body {
     .todo-note {
       word-wrap: break-word;
 
       .md {
-        color: #7f8fa4;
+        color: $gl-grayish-blue;
         font-size: $gl-font-size;
 
         .label {
@@ -90,7 +131,7 @@
         }
 
         p {
-          color: #5c5d5e;
+          color: $gl-text-color;
         }
       }
 
@@ -102,7 +143,7 @@
         border: none;
         background: $gray-light;
         border-radius: 0;
-        color: #777;
+        color: $todo-body-pre-color;
         margin: 0 20px;
         overflow: hidden;
       }
@@ -124,7 +165,11 @@
 @media (max-width: $screen-sm-max) {
   .todos-filters {
     .dropdown-menu-toggle {
-      width: 135px;
+      width: 130px;
+    }
+
+    .dropdown-menu-toggle-sort {
+      width: auto;
     }
   }
 }
@@ -138,24 +183,22 @@
 
   .todo-item {
     .todo-title {
-      white-space: normal;
-      overflow: visible;
-      max-width: 100%;
+      flex-flow: row wrap;
       margin-bottom: 10px;
+
+      .todo-label {
+        white-space: normal;
+      }
     }
 
     .todo-body {
       margin: 0;
-      border-left: 2px solid #ddd;
+      border-left: 2px solid $todo-body-border;
       padding-left: 10px;
     }
   }
 
   .todos-filters {
-    .row-content-block {
-      padding-bottom: 50px;
-    }
-
     .dropdown-menu-toggle {
       width: 100%;
     }
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index 2b836fa1f4a..fc4da4c495f 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -14,14 +14,15 @@
 
   .add-to-tree {
     vertical-align: top;
+    padding: 6px 10px;
   }
 
   .tree-table {
     margin-bottom: 0;
 
     tr {
-      border-bottom: 1px solid $table-border-gray;
-      border-top: 1px solid $table-border-gray;
+      border-bottom: 1px solid $white-normal;
+      border-top: 1px solid $white-normal;
 
       td,
       th {
@@ -31,7 +32,11 @@
       .last-commit {
         @include str-truncated(506px);
 
-        @media (min-width: $screen-sm-max) and (max-width: $screen-md-max) {
+        .fa-angle-right {
+          margin-left: 5px;
+        }
+
+        @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
           @include str-truncated(450px);
         }
 
@@ -39,7 +44,7 @@
 
       .commit-history-link-spacer {
         margin: 0 10px;
-        color: $table-border-color;
+        color: $white-normal;
       }
 
       &:hover {
@@ -53,7 +58,7 @@
 
       &.selected {
         td {
-          background: $gray-dark;
+          background: $white-normal;
           border-top: 1px solid $border-gray-dark;
           border-bottom: 1px solid $border-gray-dark;
         }
@@ -77,7 +82,7 @@
 
       i,
       a {
-        color: $gl-dark-link-color;
+        color: $gl-text-color;
       }
 
       img {
@@ -103,21 +108,21 @@
     padding-right: 8px;
 
     .commit-author-name {
-      color: $gl-gray;
+      color: $gl-text-color;
     }
   }
 
   .tree-time-ago {
     min-width: 135px;
-    color: $gl-gray-light;
+    color: $gl-text-color-secondary;
   }
 
   .tree-commit {
     max-width: 320px;
-    color: $gl-gray-light;
+    color: $gl-text-color-secondary;
 
     .tree-commit-link {
-      color: $gl-gray-light;
+      color: $gl-text-color-secondary;
 
       &:hover {
         text-decoration: underline;
@@ -133,22 +138,11 @@
 
 .blob-commit-info {
   list-style: none;
-  padding: $gl-padding;
-  background: $background-color;
+  background: $gray-light;
+  padding: 16px 16px 16px 6px;
   border: 1px solid $border-color;
   border-bottom: none;
   margin: 0;
-
-  .commit {
-    padding-top: 0;
-    padding-bottom: 0;
-
-    .commit-row-title {
-      .commit-row-message {
-        font-weight: normal;
-      }
-    }
-  }
 }
 
 #modal-remove-blob > .modal-dialog { width: 850px; }
@@ -172,7 +166,33 @@
   position: relative;
   z-index: 2;
 
-  .download-button {
+  .project-action-button {
     margin-left: $btn-side-margin;
   }
 }
+
+.repo-charts {
+  .sub-header {
+    margin: 20px 0;
+  }
+
+  .sub-header-block.border-top {
+    margin-top: 20px;
+    padding: 0;
+    border-top: 1px solid $white-dark;
+    border-bottom: none;
+  }
+
+  .commit-stats li {
+    font-size: 16px;
+  }
+
+  .tree-ref-header {
+    margin-bottom: 20px;
+
+    h4 {
+      margin: 0;
+      line-height: 36px;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/pages/ui_dev_kit.scss b/app/assets/stylesheets/pages/ui_dev_kit.scss
index e73cecc92be..8c87bc3cafd 100644
--- a/app/assets/stylesheets/pages/ui_dev_kit.scss
+++ b/app/assets/stylesheets/pages/ui_dev_kit.scss
@@ -7,11 +7,11 @@
   .example {
     &::before {
       content: "Example";
-      color: #bbb;
+      color: $ui-dev-kit-example-color;
     }
 
     padding: 15px;
-    border: 1px dashed #ddd;
+    border: 1px dashed $ui-dev-kit-example-border;
     margin-bottom: 15px;
   }
 }
diff --git a/app/assets/stylesheets/pages/votes.scss b/app/assets/stylesheets/pages/votes.scss
deleted file mode 100644
index dc9a7d71e8b..00000000000
--- a/app/assets/stylesheets/pages/votes.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.votes-inline {
-  display: inline-block;
-  margin: 0 8px;
-}
diff --git a/app/assets/stylesheets/pages/wiki.scss b/app/assets/stylesheets/pages/wiki.scss
index dfaeba41cf6..9bc47bbe173 100644
--- a/app/assets/stylesheets/pages/wiki.scss
+++ b/app/assets/stylesheets/pages/wiki.scss
@@ -1,6 +1,161 @@
+.new-wiki-page {
+  .new-wiki-page-slug-tip {
+    display: inline-block;
+    max-width: 100%;
+    margin-top: 5px;
+  }
+}
+
 .title .edit-wiki-header {
   width: 780px;
   margin-left: auto;
   margin-right: auto;
   padding-right: 7px;
 }
+
+.wiki-page-header {
+  @extend .top-area;
+  position: relative;
+
+  .wiki-breadcrumb {
+    border-bottom: 1px solid $white-normal;
+    padding: 11px 0;
+  }
+
+  .wiki-page-title {
+    margin: 0;
+    font-size: 22px;
+  }
+
+  .wiki-last-edit-by {
+    display: block;
+    color: $gl-text-color-secondary;
+
+    strong {
+      color: $gl-text-color;
+    }
+  }
+
+  .light {
+    font-weight: normal;
+    color: $gl-text-color-secondary;
+  }
+
+  .git-access-header {
+    padding: 16px 40px 11px 0;
+    line-height: 28px;
+    font-size: 18px;
+  }
+
+  .git-clone-holder {
+    width: 100%;
+    padding-bottom: 40px;
+  }
+
+  button.sidebar-toggle {
+    position: absolute;
+    right: 0;
+    top: 11px;
+    display: block;
+  }
+
+  @media (min-width: $screen-sm-min) {
+    &.has-sidebar-toggle {
+      padding-right: 40px;
+    }
+
+    .git-clone-holder {
+      width: 480px;
+    }
+
+    .nav-controls {
+      width: auto;
+      min-width: 50%;
+      white-space: nowrap;
+    }
+  }
+
+  @media (min-width: $screen-md-min) {
+    &.has-sidebar-toggle {
+      padding-right: 0;
+    }
+
+    button.sidebar-toggle {
+      display: none;
+    }
+  }
+}
+
+.wiki-git-access {
+  margin: $gl-padding 0;
+
+  h3 {
+    font-size: 22px;
+    font-weight: normal;
+    margin-top: 1.4em;
+  }
+}
+
+.right-sidebar.wiki-sidebar {
+  padding: $gl-padding 0;
+
+  &.right-sidebar-collapsed {
+    display: none;
+  }
+
+  .blocks-container {
+    padding: 0 $gl-padding;
+  }
+
+  .block {
+    width: 100%;
+  }
+
+  a {
+    color: $layout-link-gray;
+
+    &:hover,
+    &.active {
+      color: $black;
+    }
+  }
+
+  .active > a {
+    color: $black;
+  }
+
+  ul.wiki-pages,
+  ul.wiki-pages li {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  ul.wiki-pages li {
+    margin: 5px 0 10px;
+  }
+
+  ul.wiki-pages ul {
+    padding-left: 15px;
+  }
+
+  .wiki-sidebar-header {
+    padding: 0 $gl-padding $gl-padding;
+
+    .gutter-toggle {
+      margin-top: 0;
+    }
+  }
+}
+
+ul.wiki-pages-list.content-list {
+  & ul {
+    list-style: none;
+    margin-left: 0;
+    padding-left: 15px;
+  }
+
+  & ul li {
+    padding: 5px 0;
+  }
+}
diff --git a/app/assets/stylesheets/pages/xterm.scss b/app/assets/stylesheets/pages/xterm.scss
index 3fa7fa3d7e3..b085c56390d 100644
--- a/app/assets/stylesheets/pages/xterm.scss
+++ b/app/assets/stylesheets/pages/xterm.scss
@@ -18,7 +18,267 @@
   $l-blue: #81a2be;
   $l-magenta: #b294bb;
   $l-cyan: #8abeb7;
-  $l-white: $ci-text-color;
+  $l-white: $gray-darkest;
+
+  /*
+  * xterm colors
+  */
+  $xterm-fg-0: $black;
+  $xterm-fg-1: #800000;
+  $xterm-fg-2: #008000;
+  $xterm-fg-3: #808000;
+  $xterm-fg-4: #000080;
+  $xterm-fg-5: #800080;
+  $xterm-fg-6: #008080;
+  $xterm-fg-7: #c0c0c0;
+  $xterm-fg-8: #808080;
+  $xterm-fg-9: #f00;
+  $xterm-fg-10: #0f0;
+  $xterm-fg-11: #ff0;
+  $xterm-fg-12: #00f;
+  $xterm-fg-13: #f0f;
+  $xterm-fg-14: #0ff;
+  $xterm-fg-15: $white-light;
+  $xterm-fg-16: $black;
+  $xterm-fg-17: #00005f;
+  $xterm-fg-18: #000087;
+  $xterm-fg-19: #0000af;
+  $xterm-fg-20: #0000d7;
+  $xterm-fg-21: #00f;
+  $xterm-fg-22: #005f00;
+  $xterm-fg-23: #005f5f;
+  $xterm-fg-24: #005f87;
+  $xterm-fg-25: #005faf;
+  $xterm-fg-26: #005fd7;
+  $xterm-fg-27: #005fff;
+  $xterm-fg-28: #008700;
+  $xterm-fg-29: #00875f;
+  $xterm-fg-30: #008787;
+  $xterm-fg-31: #0087af;
+  $xterm-fg-32: #0087d7;
+  $xterm-fg-33: #0087ff;
+  $xterm-fg-34: #00af00;
+  $xterm-fg-35: #00af5f;
+  $xterm-fg-36: #00af87;
+  $xterm-fg-37: #00afaf;
+  $xterm-fg-38: #00afd7;
+  $xterm-fg-39: #00afff;
+  $xterm-fg-40: #00d700;
+  $xterm-fg-41: #00d75f;
+  $xterm-fg-42: #00d787;
+  $xterm-fg-43: #00d7af;
+  $xterm-fg-44: #00d7d7;
+  $xterm-fg-45: #00d7ff;
+  $xterm-fg-46: #0f0;
+  $xterm-fg-47: #00ff5f;
+  $xterm-fg-48: #00ff87;
+  $xterm-fg-49: #00ffaf;
+  $xterm-fg-50: #00ffd7;
+  $xterm-fg-51: #0ff;
+  $xterm-fg-52: #5f0000;
+  $xterm-fg-53: #5f005f;
+  $xterm-fg-54: #5f0087;
+  $xterm-fg-55: #5f00af;
+  $xterm-fg-56: #5f00d7;
+  $xterm-fg-57: #5f00ff;
+  $xterm-fg-58: #5f5f00;
+  $xterm-fg-59: #5f5f5f;
+  $xterm-fg-60: #5f5f87;
+  $xterm-fg-61: #5f5faf;
+  $xterm-fg-62: #5f5fd7;
+  $xterm-fg-63: #5f5fff;
+  $xterm-fg-64: #5f8700;
+  $xterm-fg-65: #5f875f;
+  $xterm-fg-66: #5f8787;
+  $xterm-fg-67: #5f87af;
+  $xterm-fg-68: #5f87d7;
+  $xterm-fg-69: #5f87ff;
+  $xterm-fg-70: #5faf00;
+  $xterm-fg-71: #5faf5f;
+  $xterm-fg-72: #5faf87;
+  $xterm-fg-73: #5fafaf;
+  $xterm-fg-74: #5fafd7;
+  $xterm-fg-75: #5fafff;
+  $xterm-fg-76: #5fd700;
+  $xterm-fg-77: #5fd75f;
+  $xterm-fg-78: #5fd787;
+  $xterm-fg-79: #5fd7af;
+  $xterm-fg-80: #5fd7d7;
+  $xterm-fg-81: #5fd7ff;
+  $xterm-fg-82: #5fff00;
+  $xterm-fg-83: #5fff5f;
+  $xterm-fg-84: #5fff87;
+  $xterm-fg-85: #5fffaf;
+  $xterm-fg-86: #5fffd7;
+  $xterm-fg-87: #5fffff;
+  $xterm-fg-88: #870000;
+  $xterm-fg-89: #87005f;
+  $xterm-fg-90: #870087;
+  $xterm-fg-91: #8700af;
+  $xterm-fg-92: #8700d7;
+  $xterm-fg-93: #8700ff;
+  $xterm-fg-94: #875f00;
+  $xterm-fg-95: #875f5f;
+  $xterm-fg-96: #875f87;
+  $xterm-fg-97: #875faf;
+  $xterm-fg-98: #875fd7;
+  $xterm-fg-99: #875fff;
+  $xterm-fg-100: #878700;
+  $xterm-fg-101: #87875f;
+  $xterm-fg-102: #878787;
+  $xterm-fg-103: #8787af;
+  $xterm-fg-104: #8787d7;
+  $xterm-fg-105: #8787ff;
+  $xterm-fg-106: #87af00;
+  $xterm-fg-107: #87af5f;
+  $xterm-fg-108: #87af87;
+  $xterm-fg-109: #87afaf;
+  $xterm-fg-110: #87afd7;
+  $xterm-fg-111: #87afff;
+  $xterm-fg-112: #87d700;
+  $xterm-fg-113: #87d75f;
+  $xterm-fg-114: #87d787;
+  $xterm-fg-115: #87d7af;
+  $xterm-fg-116: #87d7d7;
+  $xterm-fg-117: #87d7ff;
+  $xterm-fg-118: #87ff00;
+  $xterm-fg-119: #87ff5f;
+  $xterm-fg-120: #87ff87;
+  $xterm-fg-121: #87ffaf;
+  $xterm-fg-122: #87ffd7;
+  $xterm-fg-123: #87ffff;
+  $xterm-fg-124: #af0000;
+  $xterm-fg-125: #af005f;
+  $xterm-fg-126: #af0087;
+  $xterm-fg-127: #af00af;
+  $xterm-fg-128: #af00d7;
+  $xterm-fg-129: #af00ff;
+  $xterm-fg-130: #af5f00;
+  $xterm-fg-131: #af5f5f;
+  $xterm-fg-132: #af5f87;
+  $xterm-fg-133: #af5faf;
+  $xterm-fg-134: #af5fd7;
+  $xterm-fg-135: #af5fff;
+  $xterm-fg-136: #af8700;
+  $xterm-fg-137: #af875f;
+  $xterm-fg-138: #af8787;
+  $xterm-fg-139: #af87af;
+  $xterm-fg-140: #af87d7;
+  $xterm-fg-141: #af87ff;
+  $xterm-fg-142: #afaf00;
+  $xterm-fg-143: #afaf5f;
+  $xterm-fg-144: #afaf87;
+  $xterm-fg-145: #afafaf;
+  $xterm-fg-146: #afafd7;
+  $xterm-fg-147: #afafff;
+  $xterm-fg-148: #afd700;
+  $xterm-fg-149: #afd75f;
+  $xterm-fg-150: #afd787;
+  $xterm-fg-151: #afd7af;
+  $xterm-fg-152: #afd7d7;
+  $xterm-fg-153: #afd7ff;
+  $xterm-fg-154: #afff00;
+  $xterm-fg-155: #afff5f;
+  $xterm-fg-156: #afff87;
+  $xterm-fg-157: #afffaf;
+  $xterm-fg-158: #afffd7;
+  $xterm-fg-159: #afffff;
+  $xterm-fg-160: #d70000;
+  $xterm-fg-161: #d7005f;
+  $xterm-fg-162: #d70087;
+  $xterm-fg-163: #d700af;
+  $xterm-fg-164: #d700d7;
+  $xterm-fg-165: #d700ff;
+  $xterm-fg-166: #d75f00;
+  $xterm-fg-167: #d75f5f;
+  $xterm-fg-168: #d75f87;
+  $xterm-fg-169: #d75faf;
+  $xterm-fg-170: #d75fd7;
+  $xterm-fg-171: #d75fff;
+  $xterm-fg-172: #d78700;
+  $xterm-fg-173: #d7875f;
+  $xterm-fg-174: #d78787;
+  $xterm-fg-175: #d787af;
+  $xterm-fg-176: #d787d7;
+  $xterm-fg-177: #d787ff;
+  $xterm-fg-178: #d7af00;
+  $xterm-fg-179: #d7af5f;
+  $xterm-fg-180: #d7af87;
+  $xterm-fg-181: #d7afaf;
+  $xterm-fg-182: #d7afd7;
+  $xterm-fg-183: #d7afff;
+  $xterm-fg-184: #d7d700;
+  $xterm-fg-185: #d7d75f;
+  $xterm-fg-186: #d7d787;
+  $xterm-fg-187: #d7d7af;
+  $xterm-fg-188: #d7d7d7;
+  $xterm-fg-189: #d7d7ff;
+  $xterm-fg-190: #d7ff00;
+  $xterm-fg-191: #d7ff5f;
+  $xterm-fg-192: #d7ff87;
+  $xterm-fg-193: #d7ffaf;
+  $xterm-fg-194: #d7ffd7;
+  $xterm-fg-195: #d7ffff;
+  $xterm-fg-196: #f00;
+  $xterm-fg-197: #ff005f;
+  $xterm-fg-198: #ff0087;
+  $xterm-fg-199: #ff00af;
+  $xterm-fg-200: #ff00d7;
+  $xterm-fg-201: #f0f;
+  $xterm-fg-202: #ff5f00;
+  $xterm-fg-203: #ff5f5f;
+  $xterm-fg-204: #ff5f87;
+  $xterm-fg-205: #ff5faf;
+  $xterm-fg-206: #ff5fd7;
+  $xterm-fg-207: #ff5fff;
+  $xterm-fg-208: #ff8700;
+  $xterm-fg-209: #ff875f;
+  $xterm-fg-210: #ff8787;
+  $xterm-fg-211: #ff87af;
+  $xterm-fg-212: #ff87d7;
+  $xterm-fg-213: #ff87ff;
+  $xterm-fg-214: #ffaf00;
+  $xterm-fg-215: #ffaf5f;
+  $xterm-fg-216: #ffaf87;
+  $xterm-fg-217: #ffafaf;
+  $xterm-fg-218: #ffafd7;
+  $xterm-fg-219: #ffafff;
+  $xterm-fg-220: #ffd700;
+  $xterm-fg-221: #ffd75f;
+  $xterm-fg-222: #ffd787;
+  $xterm-fg-223: #ffd7af;
+  $xterm-fg-224: #ffd7d7;
+  $xterm-fg-225: #ffd7ff;
+  $xterm-fg-226: #ff0;
+  $xterm-fg-227: #ffff5f;
+  $xterm-fg-228: #ffff87;
+  $xterm-fg-229: #ffffaf;
+  $xterm-fg-230: #ffffd7;
+  $xterm-fg-231: $white-light;
+  $xterm-fg-232: #080808;
+  $xterm-fg-233: #121212;
+  $xterm-fg-234: #1c1c1c;
+  $xterm-fg-235: #262626;
+  $xterm-fg-236: #303030;
+  $xterm-fg-237: #3a3a3a;
+  $xterm-fg-238: #444;
+  $xterm-fg-239: #4e4e4e;
+  $xterm-fg-240: #585858;
+  $xterm-fg-241: #626262;
+  $xterm-fg-242: #6c6c6c;
+  $xterm-fg-243: #767676;
+  $xterm-fg-244: #808080;
+  $xterm-fg-245: #8a8a8a;
+  $xterm-fg-246: #949494;
+  $xterm-fg-247: #9e9e9e;
+  $xterm-fg-248: #a8a8a8;
+  $xterm-fg-249: #b2b2b2;
+  $xterm-fg-250: #bcbcbc;
+  $xterm-fg-251: #c6c6c6;
+  $xterm-fg-252: #d0d0d0;
+  $xterm-fg-253: #dadada;
+  $xterm-fg-254: #e4e4e4;
+  $xterm-fg-255: #eee;
 
   .term-bold {
     font-weight: bold;
@@ -169,1026 +429,1026 @@
   }
 
   .xterm-fg-0 {
-    color: #000;
+    color: $xterm-fg-0;
   }
 
   .xterm-fg-1 {
-    color: #800000;
+    color: $xterm-fg-1;
   }
 
   .xterm-fg-2 {
-    color: #008000;
+    color: $xterm-fg-2;
   }
 
   .xterm-fg-3 {
-    color: #808000;
+    color: $xterm-fg-3;
   }
 
   .xterm-fg-4 {
-    color: #000080;
+    color: $xterm-fg-4;
   }
 
   .xterm-fg-5 {
-    color: #800080;
+    color: $xterm-fg-5;
   }
 
   .xterm-fg-6 {
-    color: #008080;
+    color: $xterm-fg-6;
   }
 
   .xterm-fg-7 {
-    color: #c0c0c0;
+    color: $xterm-fg-7;
   }
 
   .xterm-fg-8 {
-    color: #808080;
+    color: $xterm-fg-8;
   }
 
   .xterm-fg-9 {
-    color: #f00;
+    color: $xterm-fg-9;
   }
 
   .xterm-fg-10 {
-    color: #0f0;
+    color: $xterm-fg-10;
   }
 
   .xterm-fg-11 {
-    color: #ff0;
+    color: $xterm-fg-11;
   }
 
   .xterm-fg-12 {
-    color: #00f;
+    color: $xterm-fg-12;
   }
 
   .xterm-fg-13 {
-    color: #f0f;
+    color: $xterm-fg-13;
   }
 
   .xterm-fg-14 {
-    color: #0ff;
+    color: $xterm-fg-14;
   }
 
   .xterm-fg-15 {
-    color: #fff;
+    color: $white-light;
   }
 
   .xterm-fg-16 {
-    color: #000;
+    color: $black;
   }
 
   .xterm-fg-17 {
-    color: #00005f;
+    color: $xterm-fg-17;
   }
 
   .xterm-fg-18 {
-    color: #000087;
+    color: $xterm-fg-18;
   }
 
   .xterm-fg-19 {
-    color: #0000af;
+    color: $xterm-fg-19;
   }
 
   .xterm-fg-20 {
-    color: #0000d7;
+    color: $xterm-fg-20;
   }
 
   .xterm-fg-21 {
-    color: #00f;
+    color: $xterm-fg-21;
   }
 
   .xterm-fg-22 {
-    color: #005f00;
+    color: $xterm-fg-22;
   }
 
   .xterm-fg-23 {
-    color: #005f5f;
+    color: $xterm-fg-23;
   }
 
   .xterm-fg-24 {
-    color: #005f87;
+    color: $xterm-fg-24;
   }
 
   .xterm-fg-25 {
-    color: #005faf;
+    color: $xterm-fg-25;
   }
 
   .xterm-fg-26 {
-    color: #005fd7;
+    color: $xterm-fg-26;
   }
 
   .xterm-fg-27 {
-    color: #005fff;
+    color: $xterm-fg-27;
   }
 
   .xterm-fg-28 {
-    color: #008700;
+    color: $xterm-fg-28;
   }
 
   .xterm-fg-29 {
-    color: #00875f;
+    color: $xterm-fg-29;
   }
 
   .xterm-fg-30 {
-    color: #008787;
+    color: $xterm-fg-30;
   }
 
   .xterm-fg-31 {
-    color: #0087af;
+    color: $xterm-fg-31;
   }
 
   .xterm-fg-32 {
-    color: #0087d7;
+    color: $xterm-fg-32;
   }
 
   .xterm-fg-33 {
-    color: #0087ff;
+    color: $xterm-fg-33;
   }
 
   .xterm-fg-34 {
-    color: #00af00;
+    color: $xterm-fg-34;
   }
 
   .xterm-fg-35 {
-    color: #00af5f;
+    color: $xterm-fg-35;
   }
 
   .xterm-fg-36 {
-    color: #00af87;
+    color: $xterm-fg-36;
   }
 
   .xterm-fg-37 {
-    color: #00afaf;
+    color: $xterm-fg-37;
   }
 
   .xterm-fg-38 {
-    color: #00afd7;
+    color: $xterm-fg-38;
   }
 
   .xterm-fg-39 {
-    color: #00afff;
+    color: $xterm-fg-39;
   }
 
   .xterm-fg-40 {
-    color: #00d700;
+    color: $xterm-fg-40;
   }
 
   .xterm-fg-41 {
-    color: #00d75f;
+    color: $xterm-fg-41;
   }
 
   .xterm-fg-42 {
-    color: #00d787;
+    color: $xterm-fg-42;
   }
 
   .xterm-fg-43 {
-    color: #00d7af;
+    color: $xterm-fg-43;
   }
 
   .xterm-fg-44 {
-    color: #00d7d7;
+    color: $xterm-fg-44;
   }
 
   .xterm-fg-45 {
-    color: #00d7ff;
+    color: $xterm-fg-45;
   }
 
   .xterm-fg-46 {
-    color: #0f0;
+    color: $xterm-fg-46;
   }
 
   .xterm-fg-47 {
-    color: #00ff5f;
+    color: $xterm-fg-47;
   }
 
   .xterm-fg-48 {
-    color: #00ff87;
+    color: $xterm-fg-48;
   }
 
   .xterm-fg-49 {
-    color: #00ffaf;
+    color: $xterm-fg-49;
   }
 
   .xterm-fg-50 {
-    color: #00ffd7;
+    color: $xterm-fg-50;
   }
 
   .xterm-fg-51 {
-    color: #0ff;
+    color: $xterm-fg-51;
   }
 
   .xterm-fg-52 {
-    color: #5f0000;
+    color: $xterm-fg-52;
   }
 
   .xterm-fg-53 {
-    color: #5f005f;
+    color: $xterm-fg-53;
   }
 
   .xterm-fg-54 {
-    color: #5f0087;
+    color: $xterm-fg-54;
   }
 
   .xterm-fg-55 {
-    color: #5f00af;
+    color: $xterm-fg-55;
   }
 
   .xterm-fg-56 {
-    color: #5f00d7;
+    color: $xterm-fg-56;
   }
 
   .xterm-fg-57 {
-    color: #5f00ff;
+    color: $xterm-fg-57;
   }
 
   .xterm-fg-58 {
-    color: #5f5f00;
+    color: $xterm-fg-58;
   }
 
   .xterm-fg-59 {
-    color: #5f5f5f;
+    color: $xterm-fg-59;
   }
 
   .xterm-fg-60 {
-    color: #5f5f87;
+    color: $xterm-fg-60;
   }
 
   .xterm-fg-61 {
-    color: #5f5faf;
+    color: $xterm-fg-61;
   }
 
   .xterm-fg-62 {
-    color: #5f5fd7;
+    color: $xterm-fg-62;
   }
 
   .xterm-fg-63 {
-    color: #5f5fff;
+    color: $xterm-fg-63;
   }
 
   .xterm-fg-64 {
-    color: #5f8700;
+    color: $xterm-fg-64;
   }
 
   .xterm-fg-65 {
-    color: #5f875f;
+    color: $xterm-fg-65;
   }
 
   .xterm-fg-66 {
-    color: #5f8787;
+    color: $xterm-fg-66;
   }
 
   .xterm-fg-67 {
-    color: #5f87af;
+    color: $xterm-fg-67;
   }
 
   .xterm-fg-68 {
-    color: #5f87d7;
+    color: $xterm-fg-68;
   }
 
   .xterm-fg-69 {
-    color: #5f87ff;
+    color: $xterm-fg-69;
   }
 
   .xterm-fg-70 {
-    color: #5faf00;
+    color: $xterm-fg-70;
   }
 
   .xterm-fg-71 {
-    color: #5faf5f;
+    color: $xterm-fg-71;
   }
 
   .xterm-fg-72 {
-    color: #5faf87;
+    color: $xterm-fg-72;
   }
 
   .xterm-fg-73 {
-    color: #5fafaf;
+    color: $xterm-fg-73;
   }
 
   .xterm-fg-74 {
-    color: #5fafd7;
+    color: $xterm-fg-74;
   }
 
   .xterm-fg-75 {
-    color: #5fafff;
+    color: $xterm-fg-75;
   }
 
   .xterm-fg-76 {
-    color: #5fd700;
+    color: $xterm-fg-76;
   }
 
   .xterm-fg-77 {
-    color: #5fd75f;
+    color: $xterm-fg-77;
   }
 
   .xterm-fg-78 {
-    color: #5fd787;
+    color: $xterm-fg-78;
   }
 
   .xterm-fg-79 {
-    color: #5fd7af;
+    color: $xterm-fg-79;
   }
 
   .xterm-fg-80 {
-    color: #5fd7d7;
+    color: $xterm-fg-80;
   }
 
   .xterm-fg-81 {
-    color: #5fd7ff;
+    color: $xterm-fg-81;
   }
 
   .xterm-fg-82 {
-    color: #5fff00;
+    color: $xterm-fg-82;
   }
 
   .xterm-fg-83 {
-    color: #5fff5f;
+    color: $xterm-fg-83;
   }
 
   .xterm-fg-84 {
-    color: #5fff87;
+    color: $xterm-fg-84;
   }
 
   .xterm-fg-85 {
-    color: #5fffaf;
+    color: $xterm-fg-85;
   }
 
   .xterm-fg-86 {
-    color: #5fffd7;
+    color: $xterm-fg-86;
   }
 
   .xterm-fg-87 {
-    color: #5fffff;
+    color: $xterm-fg-87;
   }
 
   .xterm-fg-88 {
-    color: #870000;
+    color: $xterm-fg-88;
   }
 
   .xterm-fg-89 {
-    color: #87005f;
+    color: $xterm-fg-89;
   }
 
   .xterm-fg-90 {
-    color: #870087;
+    color: $xterm-fg-90;
   }
 
   .xterm-fg-91 {
-    color: #8700af;
+    color: $xterm-fg-91;
   }
 
   .xterm-fg-92 {
-    color: #8700d7;
+    color: $xterm-fg-92;
   }
 
   .xterm-fg-93 {
-    color: #8700ff;
+    color: $xterm-fg-93;
   }
 
   .xterm-fg-94 {
-    color: #875f00;
+    color: $xterm-fg-94;
   }
 
   .xterm-fg-95 {
-    color: #875f5f;
+    color: $xterm-fg-95;
   }
 
   .xterm-fg-96 {
-    color: #875f87;
+    color: $xterm-fg-96;
   }
 
   .xterm-fg-97 {
-    color: #875faf;
+    color: $xterm-fg-97;
   }
 
   .xterm-fg-98 {
-    color: #875fd7;
+    color: $xterm-fg-98;
   }
 
   .xterm-fg-99 {
-    color: #875fff;
+    color: $xterm-fg-99;
   }
 
   .xterm-fg-100 {
-    color: #878700;
+    color: $xterm-fg-100;
   }
 
   .xterm-fg-101 {
-    color: #87875f;
+    color: $xterm-fg-101;
   }
 
   .xterm-fg-102 {
-    color: #878787;
+    color: $xterm-fg-102;
   }
 
   .xterm-fg-103 {
-    color: #8787af;
+    color: $xterm-fg-103;
   }
 
   .xterm-fg-104 {
-    color: #8787d7;
+    color: $xterm-fg-104;
   }
 
   .xterm-fg-105 {
-    color: #8787ff;
+    color: $xterm-fg-105;
   }
 
   .xterm-fg-106 {
-    color: #87af00;
+    color: $xterm-fg-106;
   }
 
   .xterm-fg-107 {
-    color: #87af5f;
+    color: $xterm-fg-107;
   }
 
   .xterm-fg-108 {
-    color: #87af87;
+    color: $xterm-fg-108;
   }
 
   .xterm-fg-109 {
-    color: #87afaf;
+    color: $xterm-fg-109;
   }
 
   .xterm-fg-110 {
-    color: #87afd7;
+    color: $xterm-fg-110;
   }
 
   .xterm-fg-111 {
-    color: #87afff;
+    color: $xterm-fg-111;
   }
 
   .xterm-fg-112 {
-    color: #87d700;
+    color: $xterm-fg-112;
   }
 
   .xterm-fg-113 {
-    color: #87d75f;
+    color: $xterm-fg-113;
   }
 
   .xterm-fg-114 {
-    color: #87d787;
+    color: $xterm-fg-114;
   }
 
   .xterm-fg-115 {
-    color: #87d7af;
+    color: $xterm-fg-115;
   }
 
   .xterm-fg-116 {
-    color: #87d7d7;
+    color: $xterm-fg-116;
   }
 
   .xterm-fg-117 {
-    color: #87d7ff;
+    color: $xterm-fg-117;
   }
 
   .xterm-fg-118 {
-    color: #87ff00;
+    color: $xterm-fg-118;
   }
 
   .xterm-fg-119 {
-    color: #87ff5f;
+    color: $xterm-fg-119;
   }
 
   .xterm-fg-120 {
-    color: #87ff87;
+    color: $xterm-fg-120;
   }
 
   .xterm-fg-121 {
-    color: #87ffaf;
+    color: $xterm-fg-121;
   }
 
   .xterm-fg-122 {
-    color: #87ffd7;
+    color: $xterm-fg-122;
   }
 
   .xterm-fg-123 {
-    color: #87ffff;
+    color: $xterm-fg-123;
   }
 
   .xterm-fg-124 {
-    color: #af0000;
+    color: $xterm-fg-124;
   }
 
   .xterm-fg-125 {
-    color: #af005f;
+    color: $xterm-fg-125;
   }
 
   .xterm-fg-126 {
-    color: #af0087;
+    color: $xterm-fg-126;
   }
 
   .xterm-fg-127 {
-    color: #af00af;
+    color: $xterm-fg-127;
   }
 
   .xterm-fg-128 {
-    color: #af00d7;
+    color: $xterm-fg-128;
   }
 
   .xterm-fg-129 {
-    color: #af00ff;
+    color: $xterm-fg-129;
   }
 
   .xterm-fg-130 {
-    color: #af5f00;
+    color: $xterm-fg-130;
   }
 
   .xterm-fg-131 {
-    color: #af5f5f;
+    color: $xterm-fg-131;
   }
 
   .xterm-fg-132 {
-    color: #af5f87;
+    color: $xterm-fg-132;
   }
 
   .xterm-fg-133 {
-    color: #af5faf;
+    color: $xterm-fg-133;
   }
 
   .xterm-fg-134 {
-    color: #af5fd7;
+    color: $xterm-fg-134;
   }
 
   .xterm-fg-135 {
-    color: #af5fff;
+    color: $xterm-fg-135;
   }
 
   .xterm-fg-136 {
-    color: #af8700;
+    color: $xterm-fg-136;
   }
 
   .xterm-fg-137 {
-    color: #af875f;
+    color: $xterm-fg-137;
   }
 
   .xterm-fg-138 {
-    color: #af8787;
+    color: $xterm-fg-138;
   }
 
   .xterm-fg-139 {
-    color: #af87af;
+    color: $xterm-fg-139;
   }
 
   .xterm-fg-140 {
-    color: #af87d7;
+    color: $xterm-fg-140;
   }
 
   .xterm-fg-141 {
-    color: #af87ff;
+    color: $xterm-fg-141;
   }
 
   .xterm-fg-142 {
-    color: #afaf00;
+    color: $xterm-fg-142;
   }
 
   .xterm-fg-143 {
-    color: #afaf5f;
+    color: $xterm-fg-143;
   }
 
   .xterm-fg-144 {
-    color: #afaf87;
+    color: $xterm-fg-144;
   }
 
   .xterm-fg-145 {
-    color: #afafaf;
+    color: $xterm-fg-145;
   }
 
   .xterm-fg-146 {
-    color: #afafd7;
+    color: $xterm-fg-146;
   }
 
   .xterm-fg-147 {
-    color: #afafff;
+    color: $xterm-fg-147;
   }
 
   .xterm-fg-148 {
-    color: #afd700;
+    color: $xterm-fg-148;
   }
 
   .xterm-fg-149 {
-    color: #afd75f;
+    color: $xterm-fg-149;
   }
 
   .xterm-fg-150 {
-    color: #afd787;
+    color: $xterm-fg-150;
   }
 
   .xterm-fg-151 {
-    color: #afd7af;
+    color: $xterm-fg-151;
   }
 
   .xterm-fg-152 {
-    color: #afd7d7;
+    color: $xterm-fg-152;
   }
 
   .xterm-fg-153 {
-    color: #afd7ff;
+    color: $xterm-fg-153;
   }
 
   .xterm-fg-154 {
-    color: #afff00;
+    color: $xterm-fg-154;
   }
 
   .xterm-fg-155 {
-    color: #afff5f;
+    color: $xterm-fg-155;
   }
 
   .xterm-fg-156 {
-    color: #afff87;
+    color: $xterm-fg-156;
   }
 
   .xterm-fg-157 {
-    color: #afffaf;
+    color: $xterm-fg-157;
   }
 
   .xterm-fg-158 {
-    color: #afffd7;
+    color: $xterm-fg-158;
   }
 
   .xterm-fg-159 {
-    color: #afffff;
+    color: $xterm-fg-159;
   }
 
   .xterm-fg-160 {
-    color: #d70000;
+    color: $xterm-fg-160;
   }
 
   .xterm-fg-161 {
-    color: #d7005f;
+    color: $xterm-fg-161;
   }
 
   .xterm-fg-162 {
-    color: #d70087;
+    color: $xterm-fg-162;
   }
 
   .xterm-fg-163 {
-    color: #d700af;
+    color: $xterm-fg-163;
   }
 
   .xterm-fg-164 {
-    color: #d700d7;
+    color: $xterm-fg-164;
   }
 
   .xterm-fg-165 {
-    color: #d700ff;
+    color: $xterm-fg-165;
   }
 
   .xterm-fg-166 {
-    color: #d75f00;
+    color: $xterm-fg-166;
   }
 
   .xterm-fg-167 {
-    color: #d75f5f;
+    color: $xterm-fg-167;
   }
 
   .xterm-fg-168 {
-    color: #d75f87;
+    color: $xterm-fg-168;
   }
 
   .xterm-fg-169 {
-    color: #d75faf;
+    color: $xterm-fg-169;
   }
 
   .xterm-fg-170 {
-    color: #d75fd7;
+    color: $xterm-fg-170;
   }
 
   .xterm-fg-171 {
-    color: #d75fff;
+    color: $xterm-fg-171;
   }
 
   .xterm-fg-172 {
-    color: #d78700;
+    color: $xterm-fg-172;
   }
 
   .xterm-fg-173 {
-    color: #d7875f;
+    color: $xterm-fg-173;
   }
 
   .xterm-fg-174 {
-    color: #d78787;
+    color: $xterm-fg-174;
   }
 
   .xterm-fg-175 {
-    color: #d787af;
+    color: $xterm-fg-175;
   }
 
   .xterm-fg-176 {
-    color: #d787d7;
+    color: $xterm-fg-176;
   }
 
   .xterm-fg-177 {
-    color: #d787ff;
+    color: $xterm-fg-177;
   }
 
   .xterm-fg-178 {
-    color: #d7af00;
+    color: $xterm-fg-178;
   }
 
   .xterm-fg-179 {
-    color: #d7af5f;
+    color: $xterm-fg-179;
   }
 
   .xterm-fg-180 {
-    color: #d7af87;
+    color: $xterm-fg-180;
   }
 
   .xterm-fg-181 {
-    color: #d7afaf;
+    color: $xterm-fg-181;
   }
 
   .xterm-fg-182 {
-    color: #d7afd7;
+    color: $xterm-fg-182;
   }
 
   .xterm-fg-183 {
-    color: #d7afff;
+    color: $xterm-fg-183;
   }
 
   .xterm-fg-184 {
-    color: #d7d700;
+    color: $xterm-fg-184;
   }
 
   .xterm-fg-185 {
-    color: #d7d75f;
+    color: $xterm-fg-185;
   }
 
   .xterm-fg-186 {
-    color: #d7d787;
+    color: $xterm-fg-186;
   }
 
   .xterm-fg-187 {
-    color: #d7d7af;
+    color: $xterm-fg-187;
   }
 
   .xterm-fg-188 {
-    color: #d7d7d7;
+    color: $xterm-fg-188;
   }
 
   .xterm-fg-189 {
-    color: #d7d7ff;
+    color: $xterm-fg-189;
   }
 
   .xterm-fg-190 {
-    color: #d7ff00;
+    color: $xterm-fg-190;
   }
 
   .xterm-fg-191 {
-    color: #d7ff5f;
+    color: $xterm-fg-191;
   }
 
   .xterm-fg-192 {
-    color: #d7ff87;
+    color: $xterm-fg-192;
   }
 
   .xterm-fg-193 {
-    color: #d7ffaf;
+    color: $xterm-fg-193;
   }
 
   .xterm-fg-194 {
-    color: #d7ffd7;
+    color: $xterm-fg-194;
   }
 
   .xterm-fg-195 {
-    color: #d7ffff;
+    color: $xterm-fg-195;
   }
 
   .xterm-fg-196 {
-    color: #f00;
+    color: $xterm-fg-196;
   }
 
   .xterm-fg-197 {
-    color: #ff005f;
+    color: $xterm-fg-197;
   }
 
   .xterm-fg-198 {
-    color: #ff0087;
+    color: $xterm-fg-198;
   }
 
   .xterm-fg-199 {
-    color: #ff00af;
+    color: $xterm-fg-199;
   }
 
   .xterm-fg-200 {
-    color: #ff00d7;
+    color: $xterm-fg-200;
   }
 
   .xterm-fg-201 {
-    color: #f0f;
+    color: $xterm-fg-201;
   }
 
   .xterm-fg-202 {
-    color: #ff5f00;
+    color: $xterm-fg-202;
   }
 
   .xterm-fg-203 {
-    color: #ff5f5f;
+    color: $xterm-fg-203;
   }
 
   .xterm-fg-204 {
-    color: #ff5f87;
+    color: $xterm-fg-204;
   }
 
   .xterm-fg-205 {
-    color: #ff5faf;
+    color: $xterm-fg-205;
   }
 
   .xterm-fg-206 {
-    color: #ff5fd7;
+    color: $xterm-fg-206;
   }
 
   .xterm-fg-207 {
-    color: #ff5fff;
+    color: $xterm-fg-207;
   }
 
   .xterm-fg-208 {
-    color: #ff8700;
+    color: $xterm-fg-208;
   }
 
   .xterm-fg-209 {
-    color: #ff875f;
+    color: $xterm-fg-209;
   }
 
   .xterm-fg-210 {
-    color: #ff8787;
+    color: $xterm-fg-210;
   }
 
   .xterm-fg-211 {
-    color: #ff87af;
+    color: $xterm-fg-211;
   }
 
   .xterm-fg-212 {
-    color: #ff87d7;
+    color: $xterm-fg-212;
   }
 
   .xterm-fg-213 {
-    color: #ff87ff;
+    color: $xterm-fg-213;
   }
 
   .xterm-fg-214 {
-    color: #ffaf00;
+    color: $xterm-fg-214;
   }
 
   .xterm-fg-215 {
-    color: #ffaf5f;
+    color: $xterm-fg-215;
   }
 
   .xterm-fg-216 {
-    color: #ffaf87;
+    color: $xterm-fg-216;
   }
 
   .xterm-fg-217 {
-    color: #ffafaf;
+    color: $xterm-fg-217;
   }
 
   .xterm-fg-218 {
-    color: #ffafd7;
+    color: $xterm-fg-218;
   }
 
   .xterm-fg-219 {
-    color: #ffafff;
+    color: $xterm-fg-219;
   }
 
   .xterm-fg-220 {
-    color: #ffd700;
+    color: $xterm-fg-220;
   }
 
   .xterm-fg-221 {
-    color: #ffd75f;
+    color: $xterm-fg-221;
   }
 
   .xterm-fg-222 {
-    color: #ffd787;
+    color: $xterm-fg-222;
   }
 
   .xterm-fg-223 {
-    color: #ffd7af;
+    color: $xterm-fg-223;
   }
 
   .xterm-fg-224 {
-    color: #ffd7d7;
+    color: $xterm-fg-224;
   }
 
   .xterm-fg-225 {
-    color: #ffd7ff;
+    color: $xterm-fg-225;
   }
 
   .xterm-fg-226 {
-    color: #ff0;
+    color: $xterm-fg-226;
   }
 
   .xterm-fg-227 {
-    color: #ffff5f;
+    color: $xterm-fg-227;
   }
 
   .xterm-fg-228 {
-    color: #ffff87;
+    color: $xterm-fg-228;
   }
 
   .xterm-fg-229 {
-    color: #ffffaf;
+    color: $xterm-fg-229;
   }
 
   .xterm-fg-230 {
-    color: #ffffd7;
+    color: $xterm-fg-230;
   }
 
   .xterm-fg-231 {
-    color: #fff;
+    color: $xterm-fg-231;
   }
 
   .xterm-fg-232 {
-    color: #080808;
+    color: $xterm-fg-232;
   }
 
   .xterm-fg-233 {
-    color: #121212;
+    color: $xterm-fg-233;
   }
 
   .xterm-fg-234 {
-    color: #1c1c1c;
+    color: $xterm-fg-234;
   }
 
   .xterm-fg-235 {
-    color: #262626;
+    color: $xterm-fg-235;
   }
 
   .xterm-fg-236 {
-    color: #303030;
+    color: $xterm-fg-236;
   }
 
   .xterm-fg-237 {
-    color: #3a3a3a;
+    color: $xterm-fg-237;
   }
 
   .xterm-fg-238 {
-    color: #444;
+    color: $xterm-fg-238;
   }
 
   .xterm-fg-239 {
-    color: #4e4e4e;
+    color: $xterm-fg-239;
   }
 
   .xterm-fg-240 {
-    color: #585858;
+    color: $xterm-fg-240;
   }
 
   .xterm-fg-241 {
-    color: #626262;
+    color: $xterm-fg-241;
   }
 
   .xterm-fg-242 {
-    color: #6c6c6c;
+    color: $xterm-fg-242;
   }
 
   .xterm-fg-243 {
-    color: #767676;
+    color: $xterm-fg-243;
   }
 
   .xterm-fg-244 {
-    color: #808080;
+    color: $xterm-fg-244;
   }
 
   .xterm-fg-245 {
-    color: #8a8a8a;
+    color: $xterm-fg-245;
   }
 
   .xterm-fg-246 {
-    color: #949494;
+    color: $xterm-fg-246;
   }
 
   .xterm-fg-247 {
-    color: #9e9e9e;
+    color: $xterm-fg-247;
   }
 
   .xterm-fg-248 {
-    color: #a8a8a8;
+    color: $xterm-fg-248;
   }
 
   .xterm-fg-249 {
-    color: #b2b2b2;
+    color: $xterm-fg-249;
   }
 
   .xterm-fg-250 {
-    color: #bcbcbc;
+    color: $xterm-fg-250;
   }
 
   .xterm-fg-251 {
-    color: #c6c6c6;
+    color: $xterm-fg-251;
   }
 
   .xterm-fg-252 {
-    color: #d0d0d0;
+    color: $xterm-fg-252;
   }
 
   .xterm-fg-253 {
-    color: #dadada;
+    color: $xterm-fg-253;
   }
 
   .xterm-fg-254 {
-    color: #e4e4e4;
+    color: $xterm-fg-254;
   }
 
   .xterm-fg-255 {
-    color: #eee;
+    color: $xterm-fg-255;
   }
 }
diff --git a/app/assets/stylesheets/print.scss b/app/assets/stylesheets/print.scss
index 0ff3c3f5472..6cc1cc8e263 100644
--- a/app/assets/stylesheets/print.scss
+++ b/app/assets/stylesheets/print.scss
@@ -31,7 +31,6 @@ nav.navbar-collapse.collapse,
 .blob-commit-info,
 .file-title,
 .file-holder,
-.sidebar-wrapper,
 .nav,
 .btn,
 ul.notes-form,
diff --git a/app/controllers/admin/application_settings_controller.rb b/app/controllers/admin/application_settings_controller.rb
index 86e808314f4..0bfbe47eb4f 100644
--- a/app/controllers/admin/application_settings_controller.rb
+++ b/app/controllers/admin/application_settings_controller.rb
@@ -5,7 +5,11 @@ class Admin::ApplicationSettingsController < Admin::ApplicationController
   end
 
   def update
-    if @application_setting.update_attributes(application_setting_params)
+    successful = ApplicationSettings::UpdateService
+      .new(@application_setting, current_user, application_setting_params)
+      .execute
+
+    if successful
       redirect_to admin_application_settings_path,
         notice: 'Application settings saved successfully'
     else
@@ -41,15 +45,6 @@ class Admin::ApplicationSettingsController < Admin::ApplicationController
   end
 
   def application_setting_params
-    restricted_levels = params[:application_setting][:restricted_visibility_levels]
-    if restricted_levels.nil?
-      params[:application_setting][:restricted_visibility_levels] = []
-    else
-      restricted_levels.map! do |level|
-        level.to_i
-      end
-    end
-
     import_sources = params[:application_setting][:import_sources]
     if import_sources.nil?
       params[:application_setting][:import_sources] = []
@@ -67,60 +62,84 @@ class Admin::ApplicationSettingsController < Admin::ApplicationController
     params.delete(:domain_blacklist_raw) if params[:domain_blacklist_file]
 
     params.require(:application_setting).permit(
-      :default_projects_limit,
-      :default_branch_protection,
-      :signup_enabled,
-      :signin_enabled,
-      :require_two_factor_authentication,
-      :two_factor_grace_period,
-      :gravatar_enabled,
-      :sign_in_text,
-      :after_sign_up_text,
-      :help_page_text,
-      :home_page_url,
+      application_setting_params_ce
+    )
+  end
+
+  def application_setting_params_ce
+    [
+      :admin_notification_email,
       :after_sign_out_path,
-      :max_attachment_size,
-      :session_expire_delay,
+      :after_sign_up_text,
+      :akismet_api_key,
+      :akismet_enabled,
+      :container_registry_token_expire_delay,
+      :default_artifacts_expire_in,
+      :default_branch_protection,
+      :default_group_visibility,
       :default_project_visibility,
+      :default_projects_limit,
       :default_snippet_visibility,
-      :default_group_visibility,
-      :domain_whitelist_raw,
       :domain_blacklist_enabled,
-      :domain_blacklist_raw,
       :domain_blacklist_file,
-      :version_check_enabled,
-      :admin_notification_email,
-      :user_oauth_applications,
-      :user_default_external,
-      :shared_runners_enabled,
-      :shared_runners_text,
+      :domain_blacklist_raw,
+      :domain_whitelist_raw,
+      :email_author_in_body,
+      :enabled_git_access_protocol,
+      :gravatar_enabled,
+      :help_page_text,
+      :home_page_url,
+      :housekeeping_bitmaps_enabled,
+      :housekeeping_enabled,
+      :housekeeping_full_repack_period,
+      :housekeeping_gc_period,
+      :housekeeping_incremental_repack_period,
+      :html_emails_enabled,
+      :koding_enabled,
+      :koding_url,
+      :plantuml_enabled,
+      :plantuml_url,
       :max_artifacts_size,
+      :max_attachment_size,
+      :max_pages_size,
       :metrics_enabled,
       :metrics_host,
-      :metrics_port,
-      :metrics_pool_size,
-      :metrics_timeout,
       :metrics_method_call_threshold,
+      :metrics_packet_size,
+      :metrics_pool_size,
+      :metrics_port,
       :metrics_sample_interval,
+      :metrics_timeout,
       :recaptcha_enabled,
-      :recaptcha_site_key,
       :recaptcha_private_key,
-      :sentry_enabled,
-      :sentry_dsn,
-      :akismet_enabled,
-      :akismet_api_key,
-      :koding_enabled,
-      :koding_url,
-      :email_author_in_body,
+      :recaptcha_site_key,
       :repository_checks_enabled,
-      :metrics_packet_size,
+      :require_two_factor_authentication,
+      :session_expire_delay,
+      :sign_in_text,
+      :signin_enabled,
+      :signup_enabled,
+      :sentry_dsn,
+      :sentry_enabled,
       :send_user_confirmation_email,
-      :container_registry_token_expire_delay,
-      :enabled_git_access_protocol,
+      :shared_runners_enabled,
+      :shared_runners_text,
+      :sidekiq_throttling_enabled,
+      :sidekiq_throttling_factor,
+      :two_factor_grace_period,
+      :user_default_external,
+      :user_oauth_applications,
+      :unique_ips_limit_per_user,
+      :unique_ips_limit_time_window,
+      :unique_ips_limit_enabled,
+      :version_check_enabled,
+      :terminal_max_session_time,
+
+      disabled_oauth_sign_in_sources: [],
+      import_sources: [],
       repository_storages: [],
       restricted_visibility_levels: [],
-      import_sources: [],
-      disabled_oauth_sign_in_sources: []
-    )
+      sidekiq_throttling_queues: []
+    ]
   end
 end
diff --git a/app/controllers/admin/applications_controller.rb b/app/controllers/admin/applications_controller.rb
index 471d24934a0..9c9f420c1e0 100644
--- a/app/controllers/admin/applications_controller.rb
+++ b/app/controllers/admin/applications_controller.rb
@@ -1,5 +1,8 @@
 class Admin::ApplicationsController < Admin::ApplicationController
+  include OauthApplications
+
   before_action :set_application, only: [:show, :edit, :update, :destroy]
+  before_action :load_scopes, only: [:new, :create, :edit, :update]
 
   def index
     @applications = Doorkeeper::Application.where("owner_id IS NULL")
@@ -47,6 +50,6 @@ class Admin::ApplicationsController < Admin::ApplicationController
 
   # Only allow a trusted parameter "white list" through.
   def application_params
-    params[:doorkeeper_application].permit(:name, :redirect_uri)
+    params[:doorkeeper_application].permit(:name, :redirect_uri, :scopes)
   end
 end
diff --git a/app/controllers/admin/background_jobs_controller.rb b/app/controllers/admin/background_jobs_controller.rb
index 338496013a0..5f90ad7137d 100644
--- a/app/controllers/admin/background_jobs_controller.rb
+++ b/app/controllers/admin/background_jobs_controller.rb
@@ -1,6 +1,7 @@
 class Admin::BackgroundJobsController < Admin::ApplicationController
   def show
-    ps_output, _ = Gitlab::Popen.popen(%W(ps -U #{Gitlab.config.gitlab.user} -o pid,pcpu,pmem,stat,start,command))
-    @sidekiq_processes = ps_output.split("\n").grep(/sidekiq/)
+    ps_output, _ = Gitlab::Popen.popen(%W(ps ww -U #{Gitlab.config.gitlab.user} -o pid,pcpu,pmem,stat,start,command))
+    @sidekiq_processes = ps_output.split("\n").grep(/sidekiq \d+\.\d+\.\d+/)
+    @concurrency = Sidekiq.options[:concurrency]
   end
 end
diff --git a/app/controllers/admin/dashboard_controller.rb b/app/controllers/admin/dashboard_controller.rb
index c491e5c7550..8360ce08bdc 100644
--- a/app/controllers/admin/dashboard_controller.rb
+++ b/app/controllers/admin/dashboard_controller.rb
@@ -1,7 +1,7 @@
 class Admin::DashboardController < Admin::ApplicationController
   def index
-    @projects = Project.limit(10)
+    @projects = Project.with_route.limit(10)
     @users = User.limit(10)
-    @groups = Group.limit(10)
+    @groups = Group.with_route.limit(10)
   end
 end
diff --git a/app/controllers/admin/deploy_keys_controller.rb b/app/controllers/admin/deploy_keys_controller.rb
index 285e8495342..4f6a7e9e2cb 100644
--- a/app/controllers/admin/deploy_keys_controller.rb
+++ b/app/controllers/admin/deploy_keys_controller.rb
@@ -10,7 +10,7 @@ class Admin::DeployKeysController < Admin::ApplicationController
   end
 
   def create
-    @deploy_key = deploy_keys.new(deploy_key_params)
+    @deploy_key = deploy_keys.new(deploy_key_params.merge(user: current_user))
 
     if @deploy_key.save
       redirect_to admin_deploy_keys_path
@@ -39,6 +39,6 @@ class Admin::DeployKeysController < Admin::ApplicationController
   end
 
   def deploy_key_params
-    params.require(:deploy_key).permit(:key, :title)
+    params.require(:deploy_key).permit(:key, :title, :can_push)
   end
 end
diff --git a/app/controllers/admin/groups_controller.rb b/app/controllers/admin/groups_controller.rb
index aa7570cd896..cea3d088e94 100644
--- a/app/controllers/admin/groups_controller.rb
+++ b/app/controllers/admin/groups_controller.rb
@@ -1,17 +1,18 @@
 class Admin::GroupsController < Admin::ApplicationController
-  before_action :group, only: [:edit, :show, :update, :destroy, :project_update, :members_update]
+  before_action :group, only: [:edit, :update, :destroy, :project_update, :members_update]
 
   def index
-    @groups = Group.all
+    @groups = Group.with_statistics.with_route
     @groups = @groups.sort(@sort = params[:sort])
     @groups = @groups.search(params[:name]) if params[:name].present?
     @groups = @groups.page(params[:page])
   end
 
   def show
+    @group = Group.with_statistics.joins(:route).group('routes.path').find_by_full_path(params[:id])
     @members = @group.members.order("access_level DESC").page(params[:members_page])
     @requesters = AccessRequestsFinder.new(@group).execute(current_user)
-    @projects = @group.projects.page(params[:projects_page])
+    @projects = @group.projects.with_statistics.page(params[:projects_page])
   end
 
   def new
@@ -48,7 +49,7 @@ class Admin::GroupsController < Admin::ApplicationController
   end
 
   def destroy
-    DestroyGroupService.new(@group, current_user).async_execute
+    Groups::DestroyService.new(@group, current_user).async_execute
 
     redirect_to admin_groups_path, alert: "Group '#{@group.name}' was scheduled for deletion."
   end
@@ -56,11 +57,15 @@ class Admin::GroupsController < Admin::ApplicationController
   private
 
   def group
-    @group ||= Group.find_by(path: params[:id])
+    @group ||= Group.find_by_full_path(params[:id])
   end
 
   def group_params
-    params.require(:group).permit(
+    params.require(:group).permit(group_params_ce)
+  end
+
+  def group_params_ce
+    [
       :avatar,
       :description,
       :lfs_enabled,
@@ -68,6 +73,6 @@ class Admin::GroupsController < Admin::ApplicationController
       :path,
       :request_access_enabled,
       :visibility_level
-    )
+    ]
   end
 end
diff --git a/app/controllers/admin/health_check_controller.rb b/app/controllers/admin/health_check_controller.rb
index 241c7be0ea1..caf4c138da8 100644
--- a/app/controllers/admin/health_check_controller.rb
+++ b/app/controllers/admin/health_check_controller.rb
@@ -1,5 +1,5 @@
 class Admin::HealthCheckController < Admin::ApplicationController
   def show
-    @errors = HealthCheck::Utils.process_checks('standard')
+    @errors = HealthCheck::Utils.process_checks(['standard'])
   end
 end
diff --git a/app/controllers/admin/impersonation_tokens_controller.rb b/app/controllers/admin/impersonation_tokens_controller.rb
new file mode 100644
index 00000000000..07c8bf714fc
--- /dev/null
+++ b/app/controllers/admin/impersonation_tokens_controller.rb
@@ -0,0 +1,53 @@
+class Admin::ImpersonationTokensController < Admin::ApplicationController
+  before_action :user
+
+  def index
+    set_index_vars
+  end
+
+  def create
+    @impersonation_token = finder.build(impersonation_token_params)
+
+    if @impersonation_token.save
+      flash[:impersonation_token] = @impersonation_token.token
+      redirect_to admin_user_impersonation_tokens_path, notice: "A new impersonation token has been created."
+    else
+      set_index_vars
+      render :index
+    end
+  end
+
+  def revoke
+    @impersonation_token = finder.find(params[:id])
+
+    if @impersonation_token.revoke!
+      flash[:notice] = "Revoked impersonation token #{@impersonation_token.name}!"
+    else
+      flash[:alert] = "Could not revoke impersonation token #{@impersonation_token.name}."
+    end
+
+    redirect_to admin_user_impersonation_tokens_path
+  end
+
+  private
+
+  def user
+    @user ||= User.find_by!(username: params[:user_id])
+  end
+
+  def finder(options = {})
+    PersonalAccessTokensFinder.new({ user: user, impersonation: true }.merge(options))
+  end
+
+  def impersonation_token_params
+    params.require(:personal_access_token).permit(:name, :expires_at, :impersonation, scopes: [])
+  end
+
+  def set_index_vars
+    @scopes = Gitlab::Auth::API_SCOPES
+
+    @impersonation_token ||= finder.build
+    @inactive_impersonation_tokens = finder(state: 'inactive').execute
+    @active_impersonation_tokens = finder(state: 'active').execute.order(:expires_at)
+  end
+end
diff --git a/app/controllers/admin/labels_controller.rb b/app/controllers/admin/labels_controller.rb
index d496f08a598..4531657268c 100644
--- a/app/controllers/admin/labels_controller.rb
+++ b/app/controllers/admin/labels_controller.rb
@@ -16,10 +16,9 @@ class Admin::LabelsController < Admin::ApplicationController
   end
 
   def create
-    @label = Label.new(label_params)
-    @label.template = true
+    @label = Labels::CreateService.new(label_params).execute(template: true)
 
-    if @label.save
+    if @label.persisted?
       redirect_to admin_labels_url, notice: "Label was created"
     else
       render :new
@@ -27,7 +26,9 @@ class Admin::LabelsController < Admin::ApplicationController
   end
 
   def update
-    if @label.update(label_params)
+    @label = Labels::UpdateService.new(label_params).execute(@label)
+
+    if @label.valid?
       redirect_to admin_labels_path, notice: 'label was successfully updated.'
     else
       render :edit
diff --git a/app/controllers/admin/projects_controller.rb b/app/controllers/admin/projects_controller.rb
index 1d963bdf7d5..daecfc832bf 100644
--- a/app/controllers/admin/projects_controller.rb
+++ b/app/controllers/admin/projects_controller.rb
@@ -3,7 +3,7 @@ class Admin::ProjectsController < Admin::ApplicationController
   before_action :group, only: [:show, :transfer]
 
   def index
-    @projects = Project.all
+    @projects = Project.with_statistics
     @projects = @projects.in_namespace(params[:namespace_id]) if params[:namespace_id].present?
     @projects = @projects.where(visibility_level: params[:visibility_level]) if params[:visibility_level].present?
     @projects = @projects.with_push if params[:with_push].present?
@@ -14,6 +14,15 @@ class Admin::ProjectsController < Admin::ApplicationController
     @projects = @projects.search(params[:name]) if params[:name].present?
     @projects = @projects.sort(@sort = params[:sort])
     @projects = @projects.includes(:namespace).order("namespaces.path, projects.name ASC").page(params[:page])
+
+    respond_to do |format|
+      format.html
+      format.json do
+        render json: {
+          html: view_to_html_string("admin/projects/_projects", locals: { projects: @projects })
+        }
+      end
+    end
   end
 
   def show
@@ -45,7 +54,7 @@ class Admin::ProjectsController < Admin::ApplicationController
   protected
 
   def project
-    @project = Project.find_with_namespace(
+    @project = Project.find_by_full_path(
       [params[:namespace_id], '/', params[:id]].join('')
     )
     @project || render_404
diff --git a/app/controllers/admin/runner_projects_controller.rb b/app/controllers/admin/runner_projects_controller.rb
index bc65dcc33d3..70ac6a75434 100644
--- a/app/controllers/admin/runner_projects_controller.rb
+++ b/app/controllers/admin/runner_projects_controller.rb
@@ -24,7 +24,7 @@ class Admin::RunnerProjectsController < Admin::ApplicationController
   private
 
   def project
-    @project = Project.find_with_namespace(
+    @project = Project.find_by_full_path(
       [params[:namespace_id], '/', params[:project_id]].join('')
     )
     @project || render_404
diff --git a/app/controllers/admin/runners_controller.rb b/app/controllers/admin/runners_controller.rb
index 7345c91f67d..348641e5ecb 100644
--- a/app/controllers/admin/runners_controller.rb
+++ b/app/controllers/admin/runners_controller.rb
@@ -13,7 +13,7 @@ class Admin::RunnersController < Admin::ApplicationController
   end
 
   def update
-    if @runner.update_attributes(runner_params)
+    if Ci::UpdateRunnerService.new(@runner).update(runner_params)
       respond_to do |format|
         format.js
         format.html { redirect_to admin_runner_path(@runner) }
@@ -31,7 +31,7 @@ class Admin::RunnersController < Admin::ApplicationController
   end
 
   def resume
-    if @runner.update_attributes(active: true)
+    if Ci::UpdateRunnerService.new(@runner).update(active: true)
       redirect_to admin_runners_path, notice: 'Runner was successfully updated.'
     else
       redirect_to admin_runners_path, alert: 'Runner was not updated.'
@@ -39,7 +39,7 @@ class Admin::RunnersController < Admin::ApplicationController
   end
 
   def pause
-    if @runner.update_attributes(active: false)
+    if Ci::UpdateRunnerService.new(@runner).update(active: false)
       redirect_to admin_runners_path, notice: 'Runner was successfully updated.'
     else
       redirect_to admin_runners_path, alert: 'Runner was not updated.'
diff --git a/app/controllers/admin/system_info_controller.rb b/app/controllers/admin/system_info_controller.rb
index ca04a17caa1..99039724521 100644
--- a/app/controllers/admin/system_info_controller.rb
+++ b/app/controllers/admin/system_info_controller.rb
@@ -3,7 +3,7 @@ class Admin::SystemInfoController < Admin::ApplicationController
     'nobrowse',
     'read-only',
     'ro'
-  ]
+  ].freeze
 
   EXCLUDED_MOUNT_TYPES = [
     'autofs',
@@ -21,12 +21,13 @@ class Admin::SystemInfoController < Admin::ApplicationController
     'mqueue',
     'proc',
     'pstore',
+    'rpc_pipefs',
     'securityfs',
     'sysfs',
     'tmpfs',
     'tracefs',
     'vfat'
-  ]
+  ].freeze
 
   def show
     @cpus = Vmstat.cpu rescue nil
diff --git a/app/controllers/admin/users_controller.rb b/app/controllers/admin/users_controller.rb
index bb912ed10cc..563bcc65bd6 100644
--- a/app/controllers/admin/users_controller.rb
+++ b/app/controllers/admin/users_controller.rb
@@ -16,9 +16,6 @@ class Admin::UsersController < Admin::ApplicationController
     @joined_projects = user.projects.joined(@user)
   end
 
-  def groups
-  end
-
   def keys
     @keys = user.keys
   end
@@ -32,11 +29,7 @@ class Admin::UsersController < Admin::ApplicationController
   end
 
   def impersonate
-    if user.blocked?
-      flash[:alert] = "You cannot impersonate a blocked user"
-
-      redirect_to admin_user_path(user)
-    else
+    if can?(user, :log_in)
       session[:impersonator_id] = current_user.id
 
       warden.set_user(user, scope: :user)
@@ -46,6 +39,17 @@ class Admin::UsersController < Admin::ApplicationController
       flash[:alert] = "You are now impersonating #{user.username}"
 
       redirect_to root_path
+    else
+      flash[:alert] =
+        if user.blocked?
+          "You cannot impersonate a blocked user"
+        elsif user.internal?
+          "You cannot impersonate an internal user"
+        else
+          "You cannot impersonate a user who cannot log in"
+        end
+
+      redirect_to admin_user_path(user)
     end
   end
 
@@ -91,18 +95,14 @@ class Admin::UsersController < Admin::ApplicationController
 
   def create
     opts = {
-      force_random_password: true,
-      password_expires_at: nil
+      reset_password: true,
+      skip_confirmation: true
     }
 
-    @user = User.new(user_params.merge(opts))
-    @user.created_by_id = current_user.id
-    @user.generate_password
-    @user.generate_reset_token
-    @user.skip_confirmation!
+    @user = Users::CreateService.new(current_user, user_params.merge(opts)).execute
 
     respond_to do |format|
-      if @user.save
+      if @user.persisted?
         format.html { redirect_to [:admin, @user], notice: 'User was successfully created.' }
         format.json { render json: @user, status: :created, location: @user }
       else
@@ -164,15 +164,6 @@ class Admin::UsersController < Admin::ApplicationController
     @user ||= User.find_by!(username: params[:id])
   end
 
-  def user_params
-    params.require(:user).permit(
-      :email, :remember_me, :bio, :name, :username,
-      :skype, :linkedin, :twitter, :website_url, :color_scheme_id, :theme_id, :force_random_password,
-      :extern_uid, :provider, :password_expires_at, :avatar, :hide_no_ssh_key, :hide_no_password,
-      :projects_limit, :can_create_group, :admin, :key_id, :external
-    )
-  end
-
   def redirect_back_or_admin_user(options = {})
     redirect_back_or_default(default: default_route, options: options)
   end
@@ -180,4 +171,35 @@ class Admin::UsersController < Admin::ApplicationController
   def default_route
     [:admin, @user]
   end
+
+  def user_params
+    params.require(:user).permit(user_params_ce)
+  end
+
+  def user_params_ce
+    [
+      :access_level,
+      :avatar,
+      :bio,
+      :can_create_group,
+      :color_scheme_id,
+      :email,
+      :extern_uid,
+      :external,
+      :force_random_password,
+      :hide_no_password,
+      :hide_no_ssh_key,
+      :key_id,
+      :linkedin,
+      :name,
+      :password_expires_at,
+      :projects_limit,
+      :provider,
+      :remember_me,
+      :skype,
+      :twitter,
+      :username,
+      :website_url
+    ]
+  end
 end
diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
index 517ad4f03f3..6a6e335d314 100644
--- a/app/controllers/application_controller.rb
+++ b/app/controllers/application_controller.rb
@@ -12,7 +12,6 @@ class ApplicationController < ActionController::Base
   before_action :authenticate_user_from_private_token!
   before_action :authenticate_user!
   before_action :validate_user_service_ticket!
-  before_action :reject_blocked!
   before_action :check_password_expiration
   before_action :check_2fa_requirement
   before_action :ldap_security_check
@@ -25,7 +24,7 @@ class ApplicationController < ActionController::Base
   protect_from_forgery with: :exception
 
   helper_method :can?, :current_application_settings
-  helper_method :import_sources_enabled?, :github_import_enabled?, :github_import_configured?, :gitlab_import_enabled?, :gitlab_import_configured?, :bitbucket_import_enabled?, :bitbucket_import_configured?, :google_code_import_enabled?, :fogbugz_import_enabled?, :git_import_enabled?, :gitlab_project_import_enabled?
+  helper_method :import_sources_enabled?, :github_import_enabled?, :gitea_import_enabled?, :github_import_configured?, :gitlab_import_enabled?, :gitlab_import_configured?, :bitbucket_import_enabled?, :bitbucket_import_configured?, :google_code_import_enabled?, :fogbugz_import_enabled?, :git_import_enabled?, :gitlab_project_import_enabled?
 
   rescue_from Encoding::CompatibilityError do |exception|
     log_exception(exception)
@@ -41,6 +40,10 @@ class ApplicationController < ActionController::Base
     render_403
   end
 
+  rescue_from Gitlab::Auth::TooManyIps do |e|
+    head :forbidden, retry_after: Gitlab::Auth::UniqueIpsLimiter.config.unique_ips_limit_time_window
+  end
+
   def redirect_back_or_default(default: root_path, options: {})
     redirect_to request.referer.present? ? :back : default, options
   end
@@ -49,14 +52,25 @@ class ApplicationController < ActionController::Base
     render_404
   end
 
+  def route_not_found
+    if current_user
+      not_found
+    else
+      redirect_to new_user_session_path
+    end
+  end
+
   protected
 
   # This filter handles both private tokens and personal access tokens
   def authenticate_user_from_private_token!
-    token_string = params[:private_token].presence || request.headers['PRIVATE-TOKEN'].presence
-    user = User.find_by_authentication_token(token_string) || User.find_by_personal_access_token(token_string)
+    token = params[:private_token].presence || request.headers['PRIVATE-TOKEN'].presence
 
-    if user
+    return unless token.present?
+
+    user = User.find_by_authentication_token(token) || User.find_by_personal_access_token(token)
+
+    if user && can?(user, :log_in)
       # Notice we are passing store false, so the user is not
       # actually stored in the session and a token is needed
       # for every request. If you want the token to work as a
@@ -65,43 +79,21 @@ class ApplicationController < ActionController::Base
     end
   end
 
-  def authenticate_user!(*args)
-    if redirect_to_home_page_url?
-      redirect_to current_application_settings.home_page_url and return
-    end
-
-    super(*args)
-  end
-
   def log_exception(exception)
     application_trace = ActionDispatch::ExceptionWrapper.new(env, exception).application_trace
     application_trace.map!{ |t| "  #{t}\n" }
     logger.error "\n#{exception.class.name} (#{exception.message}):\n#{application_trace.join}"
   end
 
-  def reject_blocked!
-    if current_user && current_user.blocked?
-      sign_out current_user
-      flash[:alert] = "Your account is blocked. Retry when an admin has unblocked it."
-      redirect_to new_user_session_path
-    end
-  end
-
   def after_sign_in_path_for(resource)
-    if resource.is_a?(User) && resource.respond_to?(:blocked?) && resource.blocked?
-      sign_out resource
-      flash[:alert] = "Your account is blocked. Retry when an admin has unblocked it."
-      new_user_session_path
-    else
-      stored_location_for(:redirect) || stored_location_for(resource) || root_path
-    end
+    stored_location_for(:redirect) || stored_location_for(resource) || root_path
   end
 
   def after_sign_out_path_for(resource)
     current_application_settings.after_sign_out_path.presence || new_user_session_path
   end
 
-  def can?(object, action, subject)
+  def can?(object, action, subject = :global)
     Ability.allowed?(object, action, subject)
   end
 
@@ -137,10 +129,6 @@ class ApplicationController < ActionController::Base
     headers['X-XSS-Protection'] = '1; mode=block'
     headers['X-UA-Compatible'] = 'IE=edge'
     headers['X-Content-Type-Options'] = 'nosniff'
-    # Enabling HSTS for non-standard ports would send clients to the wrong port
-    if Gitlab.config.gitlab.https and Gitlab.config.gitlab.port == 443
-      headers['Strict-Transport-Security'] = 'max-age=31536000'
-    end
   end
 
   def validate_user_service_ticket!
@@ -159,7 +147,7 @@ class ApplicationController < ActionController::Base
 
   def check_password_expiration
     if current_user && current_user.password_expires_at && current_user.password_expires_at < Time.now && !current_user.ldap_user?
-      redirect_to new_profile_password_path and return
+      return redirect_to new_profile_password_path
     end
   end
 
@@ -188,7 +176,7 @@ class ApplicationController < ActionController::Base
   end
 
   def gitlab_ldap_access(&block)
-    Gitlab::LDAP::Access.open { |access| block.call(access) }
+    Gitlab::LDAP::Access.open { |access| yield(access) }
   end
 
   # JSON for infinite scroll via Pager object
@@ -224,8 +212,8 @@ class ApplicationController < ActionController::Base
   end
 
   def require_email
-    if current_user && current_user.temp_oauth_email?
-      redirect_to profile_path, notice: 'Please complete your profile with email address' and return
+    if current_user && current_user.temp_oauth_email? && session[:impersonator_id].nil?
+      return redirect_to profile_path, notice: 'Please complete your profile with email address'
     end
   end
 
@@ -237,6 +225,10 @@ class ApplicationController < ActionController::Base
     current_application_settings.import_sources.include?('github')
   end
 
+  def gitea_import_enabled?
+    current_application_settings.import_sources.include?('gitea')
+  end
+
   def github_import_configured?
     Gitlab::OAuth::Provider.enabled?(:github)
   end
@@ -254,7 +246,7 @@ class ApplicationController < ActionController::Base
   end
 
   def bitbucket_import_configured?
-    Gitlab::OAuth::Provider.enabled?(:bitbucket) && Gitlab::BitbucketImport.public_key.present?
+    Gitlab::OAuth::Provider.enabled?(:bitbucket)
   end
 
   def google_code_import_enabled?
@@ -290,19 +282,6 @@ class ApplicationController < ActionController::Base
     session[:skip_tfa] && session[:skip_tfa] > Time.current
   end
 
-  def redirect_to_home_page_url?
-    # If user is not signed-in and tries to access root_path - redirect him to landing page
-    # Don't redirect to the default URL to prevent endless redirections
-    return false unless current_application_settings.home_page_url.present?
-
-    home_page_url = current_application_settings.home_page_url.chomp('/')
-    root_urls = [Gitlab.config.gitlab['url'].chomp('/'), root_url.chomp('/')]
-
-    return false if root_urls.include?(home_page_url)
-
-    current_user.nil? && root_path == request.path
-  end
-
   # U2F (universal 2nd factor) devices need a unique identifier for the application
   # to perform authentication.
   # https://developers.yubico.com/U2F/App_ID.html
diff --git a/app/controllers/autocomplete_controller.rb b/app/controllers/autocomplete_controller.rb
index daa82336208..b79ca034c5b 100644
--- a/app/controllers/autocomplete_controller.rb
+++ b/app/controllers/autocomplete_controller.rb
@@ -11,22 +11,20 @@ class AutocompleteController < ApplicationController
     @users = @users.reorder(:name)
     @users = @users.page(params[:page])
 
-    if params[:todo_filter].present?
+    if params[:todo_filter].present? && current_user
       @users = @users.todo_authors(current_user.id, params[:todo_state_filter])
     end
 
     if params[:search].blank?
       # Include current user if available to filter by "Me"
       if params[:current_user].present? && current_user
-        @users = [*@users, current_user]
+        @users = [current_user, *@users].uniq
       end
 
       if params[:author_id].present?
         author = User.find_by_id(params[:author_id])
-        @users = [author, *@users] if author
+        @users = [author, *@users].uniq if author
       end
-
-      @users.uniq!
     end
 
     render json: @users, only: [:name, :username, :id], methods: [:avatar_url]
@@ -55,7 +53,13 @@ class AutocompleteController < ApplicationController
   def find_users
     @users =
       if @project
-        @project.team.users
+        user_ids = @project.team.users.pluck(:id)
+
+        if params[:author_id].present?
+          user_ids << params[:author_id]
+        end
+
+        User.where(id: user_ids)
       elsif params[:group_id].present?
         group = Group.find(params[:group_id])
         return render_404 unless can?(current_user, :read_group, group)
diff --git a/app/controllers/ci/projects_controller.rb b/app/controllers/ci/projects_controller.rb
deleted file mode 100644
index ff297d6ff13..00000000000
--- a/app/controllers/ci/projects_controller.rb
+++ /dev/null
@@ -1,47 +0,0 @@
-module Ci
-  class ProjectsController < ::ApplicationController
-    before_action :project
-    before_action :no_cache, only: [:badge]
-    before_action :authorize_read_project!, except: [:badge, :index]
-    skip_before_action :authenticate_user!, only: [:badge]
-    protect_from_forgery
-
-    def index
-      redirect_to root_path
-    end
-
-    def show
-      # Temporary compatibility with CI badges pointing to CI project page
-      redirect_to namespace_project_path(project.namespace, project)
-    end
-
-    # Project status badge
-    # Image with build status for sha or ref
-    #
-    # This action in DEPRECATED, this is here only for backwards compatibility
-    # with projects migrated from GitLab CI.
-    #
-    def badge
-      return render_404 unless @project
-
-      image = Ci::ImageForBuildService.new.execute(@project, params)
-      send_file image.path, filename: image.name, disposition: 'inline', type: "image/svg+xml"
-    end
-
-    protected
-
-    def project
-      @project ||= Project.find_by(ci_id: params[:id].to_i)
-    end
-
-    def no_cache
-      response.headers["Cache-Control"] = "no-cache, no-store, max-age=0, must-revalidate"
-      response.headers["Pragma"] = "no-cache"
-      response.headers["Expires"] = "Fri, 01 Jan 1990 00:00:00 GMT"
-    end
-
-    def authorize_read_project!
-      return access_denied! unless can?(current_user, :read_project, project)
-    end
-  end
-end
diff --git a/app/controllers/concerns/authenticates_with_two_factor.rb b/app/controllers/concerns/authenticates_with_two_factor.rb
index 4c497711fc0..ea441b1736b 100644
--- a/app/controllers/concerns/authenticates_with_two_factor.rb
+++ b/app/controllers/concerns/authenticates_with_two_factor.rb
@@ -23,7 +23,7 @@ module AuthenticatesWithTwoFactor
   #
   # Returns nil
   def prompt_for_two_factor(user)
-    return locked_user_redirect(user) if user.access_locked?
+    return locked_user_redirect(user) unless user.can?(:log_in)
 
     session[:otp_user_id] = user.id
     setup_u2f_authentication(user)
@@ -37,10 +37,9 @@ module AuthenticatesWithTwoFactor
 
   def authenticate_with_two_factor
     user = self.resource = find_user
+    return locked_user_redirect(user) unless user.can?(:log_in)
 
-    if user.access_locked?
-      locked_user_redirect(user)
-    elsif user_params[:otp_attempt].present? && session[:otp_user_id]
+    if user_params[:otp_attempt].present? && session[:otp_user_id]
       authenticate_with_two_factor_via_otp(user)
     elsif user_params[:device_response].present? && session[:otp_user_id]
       authenticate_with_two_factor_via_u2f(user)
diff --git a/app/controllers/concerns/creates_commit.rb b/app/controllers/concerns/creates_commit.rb
index dacb5679dd3..9ac8197e45a 100644
--- a/app/controllers/concerns/creates_commit.rb
+++ b/app/controllers/concerns/creates_commit.rb
@@ -5,22 +5,27 @@ module CreatesCommit
     set_commit_variables
 
     commit_params = @commit_params.merge(
-      source_project: @project,
-      source_branch: @ref,
-      target_branch: @target_branch
+      start_project: @mr_target_project,
+      start_branch: @mr_target_branch,
+      target_branch: @mr_source_branch
     )
 
-    result = service.new(@tree_edit_project, current_user, commit_params).execute
+    result = service.new(
+      @mr_source_project, current_user, commit_params).execute
 
     if result[:status] == :success
       update_flash_notice(success_notice)
 
+      success_path = final_success_path(success_path)
+
       respond_to do |format|
-        format.html { redirect_to final_success_path(success_path) }
-        format.json { render json: { message: "success", filePath: final_success_path(success_path) } }
+        format.html { redirect_to success_path }
+        format.json { render json: { message: "success", filePath: success_path } }
       end
     else
       flash[:alert] = result[:message]
+      failure_path = failure_path.call if failure_path.respond_to?(:call)
+
       respond_to do |format|
         format.html do
           if failure_view
@@ -56,9 +61,13 @@ module CreatesCommit
   end
 
   def final_success_path(success_path)
-    return success_path unless create_merge_request?
+    if create_merge_request?
+      merge_request_exists? ? existing_merge_request_path : new_merge_request_path
+    else
+      success_path = success_path.call if success_path.respond_to?(:call)
 
-    merge_request_exists? ? existing_merge_request_path : new_merge_request_path
+      success_path
+    end
   end
 
   def new_merge_request_path
@@ -81,48 +90,35 @@ module CreatesCommit
   def merge_request_exists?
     return @merge_request if defined?(@merge_request)
 
-    @merge_request = @mr_target_project.merge_requests.opened.find_by(
-      source_branch: @mr_source_branch,
-      target_branch: @mr_target_branch
-    )
+    @merge_request = MergeRequestsFinder.new(current_user, project_id: @mr_target_project.id).execute.opened.
+      find_by(source_branch: @mr_source_branch, target_branch: @mr_target_branch, source_project_id: @mr_source_project)
   end
 
   def different_project?
     @mr_source_project != @mr_target_project
   end
 
-  def different_branch?
-    @mr_source_branch != @mr_target_branch || different_project?
-  end
-
   def create_merge_request?
-    params[:create_merge_request].present? && different_branch?
+    # Even if the field is set, if we're checking the same branch
+    # as the target branch in the same project,
+    # we don't want to create a merge request.
+    params[:create_merge_request].present? &&
+      (different_project? || @mr_target_branch != @mr_source_branch)
   end
 
   def set_commit_variables
-    @mr_source_branch ||= @target_branch
-
     if can?(current_user, :push_code, @project)
-      # Edit file in this project
-      @tree_edit_project = @project
       @mr_source_project = @project
-
-      if @project.forked?
-        # Merge request from this project to fork origin
-        @mr_target_project = @project.forked_from_project
-        @mr_target_branch = @mr_target_project.repository.root_ref
-      else
-        # Merge request to this project
-        @mr_target_project = @project
-        @mr_target_branch ||= @ref
-      end
+      @target_branch ||= @ref
     else
-      # Edit file in fork
-      @tree_edit_project = current_user.fork_of(@project)
-      # Merge request from fork to this project
-      @mr_source_project = @tree_edit_project
-      @mr_target_project = @project
-      @mr_target_branch ||= @ref
+      @mr_source_project = current_user.fork_of(@project)
+      @target_branch ||= @mr_source_project.repository.next_branch('patch')
     end
+
+    # Merge request to this project
+    @mr_target_project = @project
+    @mr_target_branch ||= @ref || @target_branch
+
+    @mr_source_branch = @target_branch
   end
 end
diff --git a/app/controllers/concerns/cycle_analytics_params.rb b/app/controllers/concerns/cycle_analytics_params.rb
new file mode 100644
index 00000000000..52e06f4945a
--- /dev/null
+++ b/app/controllers/concerns/cycle_analytics_params.rb
@@ -0,0 +1,11 @@
+module CycleAnalyticsParams
+  extend ActiveSupport::Concern
+
+  def options(params)
+    @options ||= { from: start_date(params), current_user: current_user }
+  end
+
+  def start_date(params)
+    params[:start_date] == '30' ? 30.days.ago : 90.days.ago
+  end
+end
diff --git a/app/controllers/concerns/diff_for_path.rb b/app/controllers/concerns/diff_for_path.rb
index aeec3009f15..1efa9fe060f 100644
--- a/app/controllers/concerns/diff_for_path.rb
+++ b/app/controllers/concerns/diff_for_path.rb
@@ -3,7 +3,7 @@ module DiffForPath
 
   def render_diff_for_path(diffs)
     diff_file = diffs.diff_files.find do |diff|
-      diff.old_path == params[:old_path] && diff.new_path == params[:new_path]
+      diff.file_identifier == params[:file_identifier]
     end
 
     return render_404 unless diff_file
diff --git a/app/controllers/concerns/filter_projects.rb b/app/controllers/concerns/filter_projects.rb
index 586f97c5eb4..6014112256a 100644
--- a/app/controllers/concerns/filter_projects.rb
+++ b/app/controllers/concerns/filter_projects.rb
@@ -8,7 +8,7 @@ module FilterProjects
   extend ActiveSupport::Concern
 
   def filter_projects(projects)
-    projects = projects.search(params[:filter_projects]) if params[:filter_projects].present?
+    projects = projects.search(params[:name]) if params[:name].present?
     projects = projects.non_archived if params[:archived].blank?
     projects = projects.personal(current_user) if params[:personal].present? && current_user
 
diff --git a/app/controllers/concerns/global_milestones.rb b/app/controllers/concerns/global_milestones.rb
deleted file mode 100644
index 5c503c5b698..00000000000
--- a/app/controllers/concerns/global_milestones.rb
+++ /dev/null
@@ -1,20 +0,0 @@
-module GlobalMilestones
-  extend ActiveSupport::Concern
-
-  def milestones
-    epoch = DateTime.parse('1970-01-01')
-    @milestones = MilestonesFinder.new.execute(@projects, params)
-    @milestones = GlobalMilestone.build_collection(@milestones)
-    @milestones = @milestones.sort_by { |x| x.due_date.nil? ? epoch : x.due_date }
-  end
-
-  def milestone
-    milestones = Milestone.of_projects(@projects).where(title: params[:title])
-
-    if milestones.present?
-      @milestone = GlobalMilestone.new(params[:title], milestones)
-    else
-      render_404
-    end
-  end
-end
diff --git a/app/controllers/concerns/issuable_actions.rb b/app/controllers/concerns/issuable_actions.rb
index be86fa106f8..3ccf2a9ce33 100644
--- a/app/controllers/concerns/issuable_actions.rb
+++ b/app/controllers/concerns/issuable_actions.rb
@@ -12,7 +12,7 @@ module IssuableActions
     destroy_method = "destroy_#{issuable.class.name.underscore}".to_sym
     TodoService.new.public_send(destroy_method, issuable, current_user)
 
-    name = issuable.class.name.titleize.downcase
+    name = issuable.human_class_name
     flash[:notice] = "The #{name} was successfully deleted."
     redirect_to polymorphic_path([@project.namespace.becomes(Namespace), @project, issuable.class])
   end
@@ -26,6 +26,23 @@ module IssuableActions
 
   private
 
+  def render_conflict_response
+    respond_to do |format|
+      format.html do
+        @conflict = true
+        render :edit
+      end
+
+      format.json do
+        render json: {
+          errors: [
+            "Someone edited this #{issuable.human_class_name} at the same time you did. Please refresh your browser and make sure your changes will not unintentionally remove theirs."
+          ]
+        }, status: 409
+      end
+    end
+  end
+
   def labels
     @labels ||= LabelsFinder.new(current_user, project_id: @project.id).execute
   end
diff --git a/app/controllers/concerns/issuable_collections.rb b/app/controllers/concerns/issuable_collections.rb
index b5e79099e39..85ae4985e58 100644
--- a/app/controllers/concerns/issuable_collections.rb
+++ b/app/controllers/concerns/issuable_collections.rb
@@ -9,12 +9,42 @@ module IssuableCollections
 
   private
 
+  def issuable_meta_data(issuable_collection, collection_type)
+    # map has to be used here since using pluck or select will
+    # throw an error when ordering issuables by priority which inserts
+    # a new order into the collection.
+    # We cannot use reorder to not mess up the paginated collection.
+    issuable_ids = issuable_collection.map(&:id)
+    issuable_note_count = Note.count_for_collection(issuable_ids, @collection_type)
+    issuable_votes_count = AwardEmoji.votes_for_collection(issuable_ids, @collection_type)
+    issuable_merge_requests_count =
+      if collection_type == 'Issue'
+        MergeRequestsClosingIssues.count_for_collection(issuable_ids)
+      else
+        []
+      end
+
+    issuable_ids.each_with_object({}) do |id, issuable_meta|
+      downvotes = issuable_votes_count.find { |votes| votes.awardable_id == id && votes.downvote? }
+      upvotes = issuable_votes_count.find { |votes| votes.awardable_id == id && votes.upvote? }
+      notes = issuable_note_count.find { |notes| notes.noteable_id == id }
+      merge_requests = issuable_merge_requests_count.find { |mr| mr.first == id }
+
+      issuable_meta[id] = Issuable::IssuableMeta.new(
+        upvotes.try(:count).to_i,
+        downvotes.try(:count).to_i,
+        notes.try(:count).to_i,
+        merge_requests.try(:last).to_i
+      )
+    end
+  end
+
   def issues_collection
-    issues_finder.execute
+    issues_finder.execute.preload(:project, :author, :assignee, :labels, :milestone, project: :namespace)
   end
 
   def merge_requests_collection
-    merge_requests_finder.execute
+    merge_requests_finder.execute.preload(:source_project, :target_project, :author, :assignee, :labels, :milestone, :merge_request_diff, target_project: :namespace)
   end
 
   def issues_finder
diff --git a/app/controllers/concerns/issues_action.rb b/app/controllers/concerns/issues_action.rb
index b89fb94be6e..b17c138d5c7 100644
--- a/app/controllers/concerns/issues_action.rb
+++ b/app/controllers/concerns/issues_action.rb
@@ -7,9 +7,11 @@ module IssuesAction
 
     @issues = issues_collection
               .non_archived
-              .preload(:author, :project)
               .page(params[:page])
 
+    @collection_type    = "Issue"
+    @issuable_meta_data = issuable_meta_data(@issues, @collection_type)
+
     respond_to do |format|
       format.html
       format.atom { render layout: false }
diff --git a/app/controllers/concerns/lfs_request.rb b/app/controllers/concerns/lfs_request.rb
new file mode 100644
index 00000000000..ed22b1e5470
--- /dev/null
+++ b/app/controllers/concerns/lfs_request.rb
@@ -0,0 +1,109 @@
+# This concern assumes:
+# - a `#project` accessor
+# - a `#user` accessor
+# - a `#authentication_result` accessor
+# - a `#can?(object, action, subject)` method
+# - a `#ci?` method
+# - a `#download_request?` method
+# - a `#upload_request?` method
+# - a `#has_authentication_ability?(ability)` method
+module LfsRequest
+  extend ActiveSupport::Concern
+
+  included do
+    before_action :require_lfs_enabled!
+    before_action :lfs_check_access!
+  end
+
+  private
+
+  def require_lfs_enabled!
+    return if Gitlab.config.lfs.enabled
+
+    render(
+      json: {
+        message: 'Git LFS is not enabled on this GitLab server, contact your admin.',
+        documentation_url: help_url,
+      },
+      status: 501
+    )
+  end
+
+  def lfs_check_access!
+    return if download_request? && lfs_download_access?
+    return if upload_request? && lfs_upload_access?
+
+    if project.public? || can?(user, :read_project, project)
+      lfs_forbidden!
+    else
+      render_lfs_not_found
+    end
+  end
+
+  def lfs_forbidden!
+    render_lfs_forbidden
+  end
+
+  def render_lfs_forbidden
+    render(
+      json: {
+        message: 'Access forbidden. Check your access level.',
+        documentation_url: help_url,
+      },
+      content_type: "application/vnd.git-lfs+json",
+      status: 403
+    )
+  end
+
+  def render_lfs_not_found
+    render(
+      json: {
+        message: 'Not found.',
+        documentation_url: help_url,
+      },
+      content_type: "application/vnd.git-lfs+json",
+      status: 404
+    )
+  end
+
+  def lfs_download_access?
+    return false unless project.lfs_enabled?
+
+    ci? || lfs_deploy_token? || user_can_download_code? || build_can_download_code?
+  end
+
+  def lfs_upload_access?
+    return false unless project.lfs_enabled?
+
+    has_authentication_ability?(:push_code) && can?(user, :push_code, project)
+  end
+
+  def lfs_deploy_token?
+    authentication_result.lfs_deploy_token?(project)
+  end
+
+  def user_can_download_code?
+    has_authentication_ability?(:download_code) && can?(user, :download_code, project)
+  end
+
+  def build_can_download_code?
+    has_authentication_ability?(:build_download_code) && can?(user, :build_download_code, project)
+  end
+
+  def storage_project
+    @storage_project ||= begin
+      result = project
+
+      loop do
+        break unless result.forked?
+        result = result.forked_from_project
+      end
+
+      result
+    end
+  end
+
+  def objects
+    @objects ||= (params[:objects] || []).to_a
+  end
+end
diff --git a/app/controllers/concerns/merge_requests_action.rb b/app/controllers/concerns/merge_requests_action.rb
index a1b0eee37f9..d3c8e4888bc 100644
--- a/app/controllers/concerns/merge_requests_action.rb
+++ b/app/controllers/concerns/merge_requests_action.rb
@@ -6,8 +6,15 @@ module MergeRequestsAction
     @label = merge_requests_finder.labels.first
 
     @merge_requests = merge_requests_collection
-                      .non_archived
-                      .preload(:author, :target_project)
                       .page(params[:page])
+
+    @collection_type    = "MergeRequest"
+    @issuable_meta_data = issuable_meta_data(@merge_requests, @collection_type)
+  end
+
+  private
+
+  def filter_params
+    super.merge(non_archived: true)
   end
 end
diff --git a/app/controllers/concerns/oauth_applications.rb b/app/controllers/concerns/oauth_applications.rb
new file mode 100644
index 00000000000..9849aa93fa6
--- /dev/null
+++ b/app/controllers/concerns/oauth_applications.rb
@@ -0,0 +1,19 @@
+module OauthApplications
+  extend ActiveSupport::Concern
+
+  included do
+    before_action :prepare_scopes, only: [:create, :update]
+  end
+
+  def prepare_scopes
+    scopes = params.fetch(:doorkeeper_application, {}).fetch(:scopes, nil)
+
+    if scopes
+      params[:doorkeeper_application][:scopes] = scopes.join(' ')
+    end
+  end
+
+  def load_scopes
+    @scopes = Doorkeeper.configuration.scopes
+  end
+end
diff --git a/app/controllers/concerns/repository_settings_redirect.rb b/app/controllers/concerns/repository_settings_redirect.rb
new file mode 100644
index 00000000000..0854c73a02f
--- /dev/null
+++ b/app/controllers/concerns/repository_settings_redirect.rb
@@ -0,0 +1,7 @@
+module RepositorySettingsRedirect
+  extend ActiveSupport::Concern
+
+  def redirect_to_repository_settings(project)
+    redirect_to namespace_project_settings_repository_path(project.namespace, project)
+  end
+end
diff --git a/app/controllers/concerns/service_params.rb b/app/controllers/concerns/service_params.rb
index c33d7eecb9f..a8c0937569c 100644
--- a/app/controllers/concerns/service_params.rb
+++ b/app/controllers/concerns/service_params.rb
@@ -1,31 +1,72 @@
 module ServiceParams
   extend ActiveSupport::Concern
 
-  ALLOWED_PARAMS = [:title, :token, :type, :active, :api_key, :api_url, :api_version, :subdomain,
-                    :room, :recipients, :project_url, :webhook,
-                    :user_key, :device, :priority, :sound, :bamboo_url, :username, :password,
-                    :build_key, :server, :teamcity_url, :drone_url, :build_type,
-                    :description, :issues_url, :new_issue_url, :restrict_to_branch, :channel,
-                    :colorize_messages, :channels,
-                    # We're using `issues_events` and `merge_requests_events`
-                    # in the view so we still need to explicitly state them
-                    # here. `Service#event_names` would only give
-                    # `issue_events` and `merge_request_events` (singular!)
-                    # See app/helpers/services_helper.rb for how we
-                    # make those event names plural as special case.
-                    :issues_events, :confidential_issues_events, :merge_requests_events,
-                    :notify_only_broken_builds, :notify_only_broken_pipelines,
-                    :add_pusher, :send_from_committer_email, :disable_diffs,
-                    :external_wiki_url, :notify, :color,
-                    :server_host, :server_port, :default_irc_uri, :enable_ssl_verification,
-                    :jira_issue_transition_id, :url, :project_key]
+  ALLOWED_PARAMS_CE = [
+    :active,
+    :add_pusher,
+    :api_key,
+    :api_url,
+    :api_version,
+    :bamboo_url,
+    :build_key,
+    :build_type,
+    :ca_pem,
+    :channel,
+    :channels,
+    :color,
+    :colorize_messages,
+    :confidential_issues_events,
+    :default_irc_uri,
+    :description,
+    :device,
+    :disable_diffs,
+    :drone_url,
+    :enable_ssl_verification,
+    :external_wiki_url,
+    # We're using `issues_events` and `merge_requests_events`
+    # in the view so we still need to explicitly state them
+    # here. `Service#event_names` would only give
+    # `issue_events` and `merge_request_events` (singular!)
+    # See app/helpers/services_helper.rb for how we
+    # make those event names plural as special case.
+    :issues_events,
+    :issues_url,
+    :jira_issue_transition_id,
+    :merge_requests_events,
+    :mock_service_url,
+    :namespace,
+    :new_issue_url,
+    :notify,
+    :notify_only_broken_pipelines,
+    :password,
+    :priority,
+    :project_key,
+    :project_url,
+    :recipients,
+    :restrict_to_branch,
+    :room,
+    :send_from_committer_email,
+    :server,
+    :server_host,
+    :server_port,
+    :sound,
+    :subdomain,
+    :teamcity_url,
+    :title,
+    :token,
+    :type,
+    :url,
+    :user_key,
+    :username,
+    :webhook
+  ].freeze
 
   # Parameters to ignore if no value is specified
-  FILTER_BLANK_PARAMS = [:password]
+  FILTER_BLANK_PARAMS = [:password].freeze
 
   def service_params
     dynamic_params = @service.event_channel_names + @service.event_names
-    service_params = params.permit(:id, service: ALLOWED_PARAMS + dynamic_params)
+    service_params = params.permit(:id, service: ALLOWED_PARAMS_CE + dynamic_params)
 
     if service_params[:service].is_a?(Hash)
       FILTER_BLANK_PARAMS.each do |param|
diff --git a/app/controllers/concerns/snippets_actions.rb b/app/controllers/concerns/snippets_actions.rb
new file mode 100644
index 00000000000..ca6dffe1cc5
--- /dev/null
+++ b/app/controllers/concerns/snippets_actions.rb
@@ -0,0 +1,21 @@
+module SnippetsActions
+  extend ActiveSupport::Concern
+
+  def edit
+  end
+
+  def raw
+    send_data(
+      convert_line_endings(@snippet.content),
+      type: 'text/plain; charset=utf-8',
+      disposition: 'inline',
+      filename: @snippet.sanitized_file_name
+    )
+  end
+
+  private
+
+  def convert_line_endings(content)
+    params[:line_ending] == 'raw' ? content : content.gsub(/\r\n/, "\n")
+  end
+end
diff --git a/app/controllers/concerns/spammable_actions.rb b/app/controllers/concerns/spammable_actions.rb
index 99acd98ae13..d0a692070d9 100644
--- a/app/controllers/concerns/spammable_actions.rb
+++ b/app/controllers/concerns/spammable_actions.rb
@@ -1,13 +1,15 @@
 module SpammableActions
   extend ActiveSupport::Concern
 
+  include Recaptcha::Verify
+
   included do
     before_action :authorize_submit_spammable!, only: :mark_as_spam
   end
 
   def mark_as_spam
     if SpamService.new(spammable).mark_as_spam!
-      redirect_to spammable, notice: "#{spammable.class} was submitted to Akismet successfully."
+      redirect_to spammable, notice: "#{spammable.spammable_entity_type.titlecase} was submitted to Akismet successfully."
     else
       redirect_to spammable, alert: 'Error with Akismet. Please check the logs for more info.'
     end
@@ -15,6 +17,33 @@ module SpammableActions
 
   private
 
+  def recaptcha_check_with_fallback(&fallback)
+    if spammable.valid?
+      redirect_to spammable
+    elsif render_recaptcha?
+      if params[:recaptcha_verification]
+        flash[:alert] = 'There was an error with the reCAPTCHA. Please solve the reCAPTCHA again.'
+      end
+
+      render :verify
+    else
+      yield
+    end
+  end
+
+  def spammable_params
+    default_params = { request: request }
+
+    recaptcha_check = params[:recaptcha_verification] &&
+      Gitlab::Recaptcha.load_configurations! &&
+      verify_recaptcha
+
+    return default_params unless recaptcha_check
+
+    { recaptcha_verified: true,
+      spam_log_id: params[:spam_log_id] }.merge(default_params)
+  end
+
   def spammable
     raise NotImplementedError, "#{self.class} does not implement #{__method__}"
   end
@@ -22,4 +51,11 @@ module SpammableActions
   def authorize_submit_spammable!
     access_denied! unless current_user.admin?
   end
+
+  def render_recaptcha?
+    return false if spammable.errors.count > 1 # re-render "new" template in case there are other errors
+    return false unless Gitlab::Recaptcha.enabled?
+
+    spammable.spam
+  end
 end
diff --git a/app/controllers/concerns/toggle_award_emoji.rb b/app/controllers/concerns/toggle_award_emoji.rb
index 3717c49f272..fbf9a026b10 100644
--- a/app/controllers/concerns/toggle_award_emoji.rb
+++ b/app/controllers/concerns/toggle_award_emoji.rb
@@ -1,11 +1,8 @@
 module ToggleAwardEmoji
   extend ActiveSupport::Concern
 
-  included do
-    before_action :authenticate_user!, only: [:toggle_award_emoji]
-  end
-
   def toggle_award_emoji
+    authenticate_user!
     name = params.require(:name)
 
     if awardable.user_can_award?(current_user, name)
diff --git a/app/controllers/concerns/toggle_subscription_action.rb b/app/controllers/concerns/toggle_subscription_action.rb
index 9e3b9be2ff4..92cb534343e 100644
--- a/app/controllers/concerns/toggle_subscription_action.rb
+++ b/app/controllers/concerns/toggle_subscription_action.rb
@@ -4,13 +4,17 @@ module ToggleSubscriptionAction
   def toggle_subscription
     return unless current_user
 
-    subscribable_resource.toggle_subscription(current_user)
+    subscribable_resource.toggle_subscription(current_user, subscribable_project)
 
     head :ok
   end
 
   private
 
+  def subscribable_project
+    @project || raise(NotImplementedError)
+  end
+
   def subscribable_resource
     raise NotImplementedError
   end
diff --git a/app/controllers/concerns/workhorse_request.rb b/app/controllers/concerns/workhorse_request.rb
new file mode 100644
index 00000000000..43c0f1b173c
--- /dev/null
+++ b/app/controllers/concerns/workhorse_request.rb
@@ -0,0 +1,13 @@
+module WorkhorseRequest
+  extend ActiveSupport::Concern
+
+  included do
+    before_action :verify_workhorse_api!
+  end
+
+  private
+
+  def verify_workhorse_api!
+    Gitlab::Workhorse.verify_api_request!(request.headers)
+  end
+end
diff --git a/app/controllers/confirmations_controller.rb b/app/controllers/confirmations_controller.rb
index 3da44b9b888..306afb65f10 100644
--- a/app/controllers/confirmations_controller.rb
+++ b/app/controllers/confirmations_controller.rb
@@ -14,12 +14,8 @@ class ConfirmationsController < Devise::ConfirmationsController
     if signed_in?(resource_name)
       after_sign_in_path_for(resource)
     else
-      sign_in(resource)
-      if signed_in?(resource_name)
-        after_sign_in_path_for(resource)
-      else
-        new_session_path(resource_name)
-      end
+      flash[:notice] += " Please sign in."
+      new_session_path(resource_name)
     end
   end
 end
diff --git a/app/controllers/dashboard/groups_controller.rb b/app/controllers/dashboard/groups_controller.rb
index de6bc689bb7..d03265e9f20 100644
--- a/app/controllers/dashboard/groups_controller.rb
+++ b/app/controllers/dashboard/groups_controller.rb
@@ -1,5 +1,17 @@
 class Dashboard::GroupsController < Dashboard::ApplicationController
   def index
-    @group_members = current_user.group_members.includes(:source).page(params[:page])
+    @group_members = current_user.group_members.includes(source: :route).joins(:group)
+    @group_members = @group_members.merge(Group.search(params[:filter_groups])) if params[:filter_groups].present?
+    @group_members = @group_members.merge(Group.sort(@sort = params[:sort]))
+    @group_members = @group_members.page(params[:page])
+
+    respond_to do |format|
+      format.html
+      format.json do
+        render json: {
+          html: view_to_html_string("dashboard/groups/_groups", locals: { group_members: @group_members })
+        }
+      end
+    end
   end
 end
diff --git a/app/controllers/dashboard/milestones_controller.rb b/app/controllers/dashboard/milestones_controller.rb
index fa9c6c054f0..df528d10f6e 100644
--- a/app/controllers/dashboard/milestones_controller.rb
+++ b/app/controllers/dashboard/milestones_controller.rb
@@ -1,12 +1,11 @@
 class Dashboard::MilestonesController < Dashboard::ApplicationController
-  include GlobalMilestones
-
   before_action :projects
   before_action :milestone, only: [:show]
 
   def index
     respond_to do |format|
       format.html do
+        @milestone_states = GlobalMilestone.states_count(@projects)
         @milestones = Kaminari.paginate_array(milestones).page(params[:page])
       end
       format.json do
@@ -17,4 +16,15 @@ class Dashboard::MilestonesController < Dashboard::ApplicationController
 
   def show
   end
+
+  private
+
+  def milestones
+    @milestones = DashboardMilestone.build_collection(@projects, params)
+  end
+
+  def milestone
+    @milestone = DashboardMilestone.build(@projects, params[:title])
+    render_404 unless @milestone
+  end
 end
diff --git a/app/controllers/dashboard/projects_controller.rb b/app/controllers/dashboard/projects_controller.rb
index c08eb811532..be00d765f73 100644
--- a/app/controllers/dashboard/projects_controller.rb
+++ b/app/controllers/dashboard/projects_controller.rb
@@ -1,21 +1,14 @@
 class Dashboard::ProjectsController < Dashboard::ApplicationController
   include FilterProjects
 
-  before_action :event_filter
-
   def index
-    @projects = current_user.authorized_projects.sorted_by_activity
-    @projects = filter_projects(@projects)
-    @projects = @projects.includes(:namespace)
+    @projects = load_projects(current_user.authorized_projects)
     @projects = @projects.sort(@sort = params[:sort])
     @projects = @projects.page(params[:page])
 
-    @last_push = current_user.recent_push
-
     respond_to do |format|
-      format.html
+      format.html { @last_push = current_user.recent_push }
       format.atom do
-        event_filter
         load_events
         render layout: false
       end
@@ -28,9 +21,8 @@ class Dashboard::ProjectsController < Dashboard::ApplicationController
   end
 
   def starred
-    @projects = current_user.viewable_starred_projects.sorted_by_activity
-    @projects = filter_projects(@projects)
-    @projects = @projects.includes(:namespace, :forked_from_project, :tags)
+    @projects = load_projects(current_user.viewable_starred_projects)
+    @projects = @projects.includes(:forked_from_project, :tags)
     @projects = @projects.sort(@sort = params[:sort])
     @projects = @projects.page(params[:page])
 
@@ -39,7 +31,6 @@ class Dashboard::ProjectsController < Dashboard::ApplicationController
 
     respond_to do |format|
       format.html
-
       format.json do
         render json: {
           html: view_to_html_string("dashboard/projects/_projects", locals: { projects: @projects })
@@ -50,9 +41,15 @@ class Dashboard::ProjectsController < Dashboard::ApplicationController
 
   private
 
+  def load_projects(base_scope)
+    projects = base_scope.sorted_by_activity.includes(:route, namespace: :route)
+
+    filter_projects(projects)
+  end
+
   def load_events
-    @events = Event.in_projects(@projects)
-    @events = @event_filter.apply_filter(@events).with_associations
+    @events = Event.in_projects(load_projects(current_user.authorized_projects))
+    @events = event_filter.apply_filter(@events).with_associations
     @events = @events.limit(20).offset(params[:offset] || 0)
   end
 end
diff --git a/app/controllers/dashboard/todos_controller.rb b/app/controllers/dashboard/todos_controller.rb
index d425d0f9014..498690e8f11 100644
--- a/app/controllers/dashboard/todos_controller.rb
+++ b/app/controllers/dashboard/todos_controller.rb
@@ -1,9 +1,14 @@
 class Dashboard::TodosController < Dashboard::ApplicationController
+  include ActionView::Helpers::NumberHelper
+
   before_action :find_todos, only: [:index, :destroy_all]
 
   def index
     @sort = params[:sort]
     @todos = @todos.page(params[:page])
+    if @todos.out_of_range? && @todos.total_pages != 0
+      redirect_to url_for(params.merge(page: @todos.total_pages))
+    end
   end
 
   def destroy
@@ -17,15 +22,32 @@ class Dashboard::TodosController < Dashboard::ApplicationController
   end
 
   def destroy_all
-    TodoService.new.mark_todos_as_done(@todos, current_user)
+    updated_ids = TodoService.new.mark_todos_as_done(@todos, current_user)
 
     respond_to do |format|
       format.html { redirect_to dashboard_todos_path, notice: 'All todos were marked as done.' }
       format.js { head :ok }
-      format.json { render json: todos_counts }
+      format.json { render json: todos_counts.merge(updated_ids: updated_ids) }
     end
   end
 
+  def restore
+    TodoService.new.mark_todos_as_pending_by_ids([params[:id]], current_user)
+
+    render json: todos_counts
+  end
+
+  def bulk_restore
+    TodoService.new.mark_todos_as_pending_by_ids(params[:ids], current_user)
+
+    render json: todos_counts
+  end
+
+  # Used in TodosHelper also
+  def self.todos_count_format(count)
+    count >= 100 ? '99+' : count
+  end
+
   private
 
   def find_todos
@@ -34,8 +56,8 @@ class Dashboard::TodosController < Dashboard::ApplicationController
 
   def todos_counts
     {
-      count: current_user.todos_pending_count,
-      done_count: current_user.todos_done_count
+      count: number_with_delimiter(current_user.todos_pending_count),
+      done_count: number_with_delimiter(current_user.todos_done_count)
     }
   end
 end
diff --git a/app/controllers/dashboard_controller.rb b/app/controllers/dashboard_controller.rb
index 4dda4e51f6a..79d420a32d3 100644
--- a/app/controllers/dashboard_controller.rb
+++ b/app/controllers/dashboard_controller.rb
@@ -4,6 +4,7 @@ class DashboardController < Dashboard::ApplicationController
 
   before_action :event_filter, only: :activity
   before_action :projects, only: [:issues, :merge_requests]
+  before_action :set_show_full_reference, only: [:issues, :merge_requests]
 
   respond_to :html
 
@@ -34,4 +35,8 @@ class DashboardController < Dashboard::ApplicationController
     @events = @event_filter.apply_filter(@events).with_associations
     @events = @events.limit(20).offset(params[:offset] || 0)
   end
+
+  def set_show_full_reference
+    @show_full_reference = true
+  end
 end
diff --git a/app/controllers/emojis_controller.rb b/app/controllers/emojis_controller.rb
deleted file mode 100644
index 1bec5a7d27f..00000000000
--- a/app/controllers/emojis_controller.rb
+++ /dev/null
@@ -1,6 +0,0 @@
-class EmojisController < ApplicationController
-  layout false
-
-  def index
-  end
-end
diff --git a/app/controllers/explore/application_controller.rb b/app/controllers/explore/application_controller.rb
index a1ab8b99048..baf54520b9c 100644
--- a/app/controllers/explore/application_controller.rb
+++ b/app/controllers/explore/application_controller.rb
@@ -1,5 +1,5 @@
 class Explore::ApplicationController < ApplicationController
-  skip_before_action :authenticate_user!, :reject_blocked!
+  skip_before_action :authenticate_user!
 
   layout 'explore'
 end
diff --git a/app/controllers/explore/groups_controller.rb b/app/controllers/explore/groups_controller.rb
index a962f9a0937..68228c095da 100644
--- a/app/controllers/explore/groups_controller.rb
+++ b/app/controllers/explore/groups_controller.rb
@@ -1,8 +1,17 @@
 class Explore::GroupsController < Explore::ApplicationController
   def index
     @groups = GroupsFinder.new.execute(current_user)
-    @groups = @groups.search(params[:search]) if params[:search].present?
+    @groups = @groups.search(params[:filter_groups]) if params[:filter_groups].present?
     @groups = @groups.sort(@sort = params[:sort])
     @groups = @groups.page(params[:page])
+
+    respond_to do |format|
+      format.html
+      format.json do
+        render json: {
+          html: view_to_html_string("explore/groups/_groups", locals: { groups: @groups })
+        }
+      end
+    end
   end
 end
diff --git a/app/controllers/explore/projects_controller.rb b/app/controllers/explore/projects_controller.rb
index a62c6211372..6167f9bd335 100644
--- a/app/controllers/explore/projects_controller.rb
+++ b/app/controllers/explore/projects_controller.rb
@@ -2,7 +2,7 @@ class Explore::ProjectsController < Explore::ApplicationController
   include FilterProjects
 
   def index
-    @projects = ProjectsFinder.new.execute(current_user)
+    @projects = load_projects
     @tags = @projects.tags_on(:tags)
     @projects = @projects.tagged_with(params[:tag]) if params[:tag].present?
     @projects = @projects.where(visibility_level: params[:visibility_level]) if params[:visibility_level].present?
@@ -21,7 +21,9 @@ class Explore::ProjectsController < Explore::ApplicationController
   end
 
   def trending
-    @projects = filter_projects(Project.trending)
+    @projects = load_projects(Project.trending)
+    @projects = filter_projects(@projects)
+    @projects = @projects.sort(@sort = params[:sort])
     @projects = @projects.page(params[:page])
 
     respond_to do |format|
@@ -35,7 +37,7 @@ class Explore::ProjectsController < Explore::ApplicationController
   end
 
   def starred
-    @projects = ProjectsFinder.new.execute(current_user)
+    @projects = load_projects
     @projects = filter_projects(@projects)
     @projects = @projects.reorder('star_count DESC')
     @projects = @projects.page(params[:page])
@@ -49,4 +51,11 @@ class Explore::ProjectsController < Explore::ApplicationController
       end
     end
   end
+
+  protected
+
+  def load_projects(base_scope = nil)
+    base_scope ||= ProjectsFinder.new.execute(current_user)
+    base_scope.includes(:route, namespace: :route)
+  end
 end
diff --git a/app/controllers/groups/application_controller.rb b/app/controllers/groups/application_controller.rb
index 949b4a6c25a..c411c21bb80 100644
--- a/app/controllers/groups/application_controller.rb
+++ b/app/controllers/groups/application_controller.rb
@@ -9,7 +9,7 @@ class Groups::ApplicationController < ApplicationController
   def group
     unless @group
       id = params[:group_id] || params[:id]
-      @group = Group.find_by(path: id)
+      @group = Group.find_by_full_path(id)
 
       unless @group && can?(current_user, :read_group, @group)
         @group = nil
diff --git a/app/controllers/groups/group_members_controller.rb b/app/controllers/groups/group_members_controller.rb
index 940a3ad20ba..0cbf3eb58a3 100644
--- a/app/controllers/groups/group_members_controller.rb
+++ b/app/controllers/groups/group_members_controller.rb
@@ -1,20 +1,20 @@
 class Groups::GroupMembersController < Groups::ApplicationController
   include MembershipActions
+  include SortingHelper
 
   # Authorize
   before_action :authorize_admin_group_member!, except: [:index, :leave, :request_access]
 
   def index
+    @sort = params[:sort].presence || sort_value_name
     @project = @group.projects.find(params[:project_id]) if params[:project_id]
-    @members = @group.group_members
-    @members = @members.non_invite unless can?(current_user, :admin_group, @group)
 
-    if params[:search].present?
-      users = @group.users.search(params[:search]).to_a
-      @members = @members.where(user_id: users)
-    end
+    @members = GroupMembersFinder.new(@group).execute
+    @members = @members.non_invite unless can?(current_user, :admin_group, @group)
+    @members = @members.search(params[:search]) if params[:search].present?
+    @members = @members.sort(@sort)
+    @members = @members.page(params[:page]).per(50)
 
-    @members = @members.order('access_level DESC').page(params[:page]).per(50)
     @requesters = AccessRequestsFinder.new(@group).execute(current_user)
 
     @group_member = @group.group_members.new
diff --git a/app/controllers/groups/labels_controller.rb b/app/controllers/groups/labels_controller.rb
index 29528b2cfaa..facb25525b5 100644
--- a/app/controllers/groups/labels_controller.rb
+++ b/app/controllers/groups/labels_controller.rb
@@ -1,4 +1,6 @@
 class Groups::LabelsController < Groups::ApplicationController
+  include ToggleSubscriptionAction
+
   before_action :label, only: [:edit, :update, :destroy]
   before_action :authorize_admin_labels!, only: [:new, :create, :edit, :update, :destroy]
   before_action :save_previous_label_path, only: [:edit]
@@ -24,7 +26,7 @@ class Groups::LabelsController < Groups::ApplicationController
   end
 
   def create
-    @label = @group.labels.create(label_params)
+    @label = Labels::CreateService.new(label_params).execute(group: group)
 
     if @label.valid?
       redirect_to group_labels_path(@group)
@@ -38,7 +40,9 @@ class Groups::LabelsController < Groups::ApplicationController
   end
 
   def update
-    if @label.update_attributes(label_params)
+    @label = Labels::UpdateService.new(label_params).execute(@label)
+
+    if @label.valid?
       redirect_back_or_group_labels_path
     else
       render :edit
@@ -69,6 +73,11 @@ class Groups::LabelsController < Groups::ApplicationController
   def label
     @label ||= @group.labels.find(params[:id])
   end
+  alias_method :subscribable_resource, :label
+
+  def subscribable_project
+    nil
+  end
 
   def label_params
     params.require(:label).permit(:title, :description, :color)
diff --git a/app/controllers/groups/milestones_controller.rb b/app/controllers/groups/milestones_controller.rb
index 9d5a28e8d4d..43102596201 100644
--- a/app/controllers/groups/milestones_controller.rb
+++ b/app/controllers/groups/milestones_controller.rb
@@ -1,6 +1,4 @@
 class Groups::MilestonesController < Groups::ApplicationController
-  include GlobalMilestones
-
   before_action :group_projects
   before_action :milestone, only: [:show, :update]
   before_action :authorize_admin_milestones!, only: [:new, :create, :update]
@@ -8,6 +6,7 @@ class Groups::MilestonesController < Groups::ApplicationController
   def index
     respond_to do |format|
       format.html do
+        @milestone_states = GlobalMilestone.states_count(@projects)
         @milestones = Kaminari.paginate_array(milestones).page(params[:page])
       end
     end
@@ -58,7 +57,7 @@ class Groups::MilestonesController < Groups::ApplicationController
 
   def render_new_with_error(empty_project_ids)
     @milestone = Milestone.new(milestone_params)
-    @milestone.errors.add(:project_id, "Please select at least one project.") if empty_project_ids
+    @milestone.errors.add(:base, "Please select at least one project.") if empty_project_ids
     render :new
   end
 
@@ -67,10 +66,19 @@ class Groups::MilestonesController < Groups::ApplicationController
   end
 
   def milestone_params
-    params.require(:milestone).permit(:title, :description, :due_date, :state_event)
+    params.require(:milestone).permit(:title, :description, :start_date, :due_date, :state_event)
   end
 
   def milestone_path(title)
     group_milestone_path(@group, title.to_slug.to_s, title: title)
   end
+
+  def milestones
+    @milestones = GroupMilestone.build_collection(@group, @projects, params)
+  end
+
+  def milestone
+    @milestone = GroupMilestone.build(@group, @projects, params[:title])
+    render_404 unless @milestone
+  end
 end
diff --git a/app/controllers/groups_controller.rb b/app/controllers/groups_controller.rb
index b83c3a872cf..05f9ee1ee90 100644
--- a/app/controllers/groups_controller.rb
+++ b/app/controllers/groups_controller.rb
@@ -13,9 +13,11 @@ class GroupsController < Groups::ApplicationController
   before_action :authorize_create_group!, only: [:new, :create]
 
   # Load group projects
-  before_action :group_projects, only: [:show, :projects, :activity, :issues, :merge_requests]
+  before_action :group_projects, only: [:projects, :activity, :issues, :merge_requests]
   before_action :event_filter, only: [:activity]
 
+  before_action :user_actions, only: [:show, :subgroups]
+
   layout :determine_layout
 
   def index
@@ -30,18 +32,19 @@ class GroupsController < Groups::ApplicationController
     @group = Groups::CreateService.new(current_user, group_params).execute
 
     if @group.persisted?
-      redirect_to @group, notice: "Group '#{@group.name}' was successfully created."
+      notice = if @group.chat_team.present?
+                 "Group '#{@group.name}' and its Mattermost team were successfully created."
+               else
+                 "Group '#{@group.name}' was successfully created."
+               end
+
+      redirect_to @group, notice: notice
     else
       render action: "new"
     end
   end
 
   def show
-    if current_user
-      @last_push            = current_user.recent_push
-      @notification_setting = current_user.notification_settings_for(group)
-    end
-
     setup_projects
 
     respond_to do |format|
@@ -60,6 +63,11 @@ class GroupsController < Groups::ApplicationController
     end
   end
 
+  def subgroups
+    @nested_groups = group.children
+    @nested_groups = @nested_groups.search(params[:filter_groups]) if params[:filter_groups].present?
+  end
+
   def activity
     respond_to do |format|
       format.html
@@ -75,19 +83,21 @@ class GroupsController < Groups::ApplicationController
   end
 
   def projects
-    @projects = @group.projects.page(params[:page])
+    @projects = @group.projects.with_statistics.page(params[:page])
   end
 
   def update
     if Groups::UpdateService.new(@group, current_user, group_params).execute
       redirect_to edit_group_path(@group), notice: "Group '#{@group.name}' was successfully updated."
     else
+      @group.restore_path!
+
       render action: "edit"
     end
   end
 
   def destroy
-    DestroyGroupService.new(@group, current_user).async_execute
+    Groups::DestroyService.new(@group, current_user).async_execute
 
     redirect_to root_path, alert: "Group '#{@group.name}' was scheduled for deletion."
   end
@@ -95,17 +105,20 @@ class GroupsController < Groups::ApplicationController
   protected
 
   def setup_projects
+    options = {}
+    options[:only_owned] = true if params[:shared] == '0'
+    options[:only_shared] = true if params[:shared] == '1'
+
+    @projects = GroupProjectsFinder.new(group, options).execute(current_user)
     @projects = @projects.includes(:namespace)
     @projects = @projects.sorted_by_activity
     @projects = filter_projects(@projects)
     @projects = @projects.sort(@sort = params[:sort])
-    @projects = @projects.page(params[:page]) if params[:filter_projects].blank?
-
-    @shared_projects = GroupProjectsFinder.new(group, only_shared: true).execute(current_user)
+    @projects = @projects.page(params[:page]) if params[:name].blank?
   end
 
   def authorize_create_group!
-    unless can?(current_user, :create_group, nil)
+    unless can?(current_user, :create_group)
       return render_404
     end
   end
@@ -121,7 +134,11 @@ class GroupsController < Groups::ApplicationController
   end
 
   def group_params
-    params.require(:group).permit(
+    params.require(:group).permit(group_params_ce)
+  end
+
+  def group_params_ce
+    [
       :avatar,
       :description,
       :lfs_enabled,
@@ -130,8 +147,11 @@ class GroupsController < Groups::ApplicationController
       :public,
       :request_access_enabled,
       :share_with_group_lock,
-      :visibility_level
-    )
+      :visibility_level,
+      :parent_id,
+      :create_chat_team,
+      :chat_team_name
+    ]
   end
 
   def load_events
@@ -139,4 +159,11 @@ class GroupsController < Groups::ApplicationController
     @events = event_filter.apply_filter(@events).with_associations
     @events = @events.limit(20).offset(params[:offset] || 0)
   end
+
+  def user_actions
+    if current_user
+      @last_push = current_user.recent_push
+      @notification_setting = current_user.notification_settings_for(group)
+    end
+  end
 end
diff --git a/app/controllers/help_controller.rb b/app/controllers/help_controller.rb
index 4eca278599f..87c0f8905ff 100644
--- a/app/controllers/help_controller.rb
+++ b/app/controllers/help_controller.rb
@@ -1,14 +1,16 @@
 class HelpController < ApplicationController
-  skip_before_action :authenticate_user!, :reject_blocked!
+  skip_before_action :authenticate_user!
 
   layout 'help'
 
   def index
     @help_index = File.read(Rails.root.join('doc', 'README.md'))
 
-    # Prefix Markdown links with `help/` unless they already have been
-    # See http://rubular.com/r/nwwhzH6Z8X
-    @help_index.gsub!(/(\]\()(?!help\/)([^\)\(]+)(\))/, '\1help/\2\3')
+    # Prefix Markdown links with `help/` unless they are external links
+    # See http://rubular.com/r/X3baHTbPO2
+    @help_index.gsub!(%r{(?<delim>\]\()(?!.+://)(?!/)(?<link>[^\)\(]+\))}) do
+      "#{$~[:delim]}#{Gitlab.config.gitlab.relative_url_root}/help/#{$~[:link]}"
+    end
   end
 
   def show
diff --git a/app/controllers/import/base_controller.rb b/app/controllers/import/base_controller.rb
index 256c41e6145..eeee027ef2d 100644
--- a/app/controllers/import/base_controller.rb
+++ b/app/controllers/import/base_controller.rb
@@ -11,7 +11,7 @@ class Import::BaseController < ApplicationController
       namespace.add_owner(current_user)
       namespace
     rescue ActiveRecord::RecordNotUnique, ActiveRecord::RecordInvalid
-      Namespace.find_by_path_or_name(name)
+      Namespace.find_by_full_path(name)
     end
   end
 end
diff --git a/app/controllers/import/bitbucket_controller.rb b/app/controllers/import/bitbucket_controller.rb
index 6ea54744da8..5ad1e116e4e 100644
--- a/app/controllers/import/bitbucket_controller.rb
+++ b/app/controllers/import/bitbucket_controller.rb
@@ -2,50 +2,57 @@ class Import::BitbucketController < Import::BaseController
   before_action :verify_bitbucket_import_enabled
   before_action :bitbucket_auth, except: :callback
 
-  rescue_from OAuth::Error, with: :bitbucket_unauthorized
-  rescue_from Gitlab::BitbucketImport::Client::Unauthorized, with: :bitbucket_unauthorized
+  rescue_from OAuth2::Error, with: :bitbucket_unauthorized
+  rescue_from Bitbucket::Error::Unauthorized, with: :bitbucket_unauthorized
 
   def callback
-    request_token = session.delete(:oauth_request_token)
-    raise "Session expired!" if request_token.nil?
+    response = client.auth_code.get_token(params[:code], redirect_uri: callback_import_bitbucket_url)
 
-    request_token.symbolize_keys!
-
-    access_token = client.get_token(request_token, params[:oauth_verifier], callback_import_bitbucket_url)
-
-    session[:bitbucket_access_token] = access_token.token
-    session[:bitbucket_access_token_secret] = access_token.secret
+    session[:bitbucket_token]         = response.token
+    session[:bitbucket_expires_at]    = response.expires_at
+    session[:bitbucket_expires_in]    = response.expires_in
+    session[:bitbucket_refresh_token] = response.refresh_token
 
     redirect_to status_import_bitbucket_url
   end
 
   def status
-    @repos = client.projects
-    @incompatible_repos = client.incompatible_projects
+    bitbucket_client = Bitbucket::Client.new(credentials)
+    repos = bitbucket_client.repos
+
+    @repos, @incompatible_repos = repos.partition { |repo| repo.valid? }
 
-    @already_added_projects = current_user.created_projects.where(import_type: "bitbucket")
+    @already_added_projects = current_user.created_projects.where(import_type: 'bitbucket')
     already_added_projects_names = @already_added_projects.pluck(:import_source)
 
-    @repos.to_a.reject!{ |repo| already_added_projects_names.include? "#{repo["owner"]}/#{repo["slug"]}" }
+    @repos.to_a.reject! { |repo| already_added_projects_names.include?(repo.full_name) }
   end
 
   def jobs
-    jobs = current_user.created_projects.where(import_type: "bitbucket").to_json(only: [:id, :import_status])
-    render json: jobs
+    render json: current_user.created_projects
+                             .where(import_type: 'bitbucket')
+                             .to_json(only: [:id, :import_status])
   end
 
   def create
+    bitbucket_client = Bitbucket::Client.new(credentials)
+
     @repo_id = params[:repo_id].to_s
-    repo = client.project(@repo_id.gsub('___', '/'))
-    @project_name = repo['slug']
-    @target_namespace = find_or_create_namespace(repo['owner'], client.user['user']['username'])
+    name = @repo_id.gsub('___', '/')
+    repo = bitbucket_client.repo(name)
+    @project_name = params[:new_name].presence || repo.name
 
-    unless Gitlab::BitbucketImport::KeyAdder.new(repo, current_user, access_params).execute
-      render 'deploy_key' and return
-    end
+    repo_owner = repo.owner
+    repo_owner = current_user.username if repo_owner == bitbucket_client.user.username
+    namespace_path = params[:new_namespace].presence || repo_owner
+
+    @target_namespace = find_or_create_namespace(namespace_path, current_user)
 
     if current_user.can?(:create_projects, @target_namespace)
-      @project = Gitlab::BitbucketImport::ProjectCreator.new(repo, @target_namespace, current_user, access_params).execute
+      # The token in a session can be expired, we need to get most recent one because
+      # Bitbucket::Connection class refreshes it.
+      session[:bitbucket_token] = bitbucket_client.connection.token
+      @project = Gitlab::BitbucketImport::ProjectCreator.new(repo, @project_name, @target_namespace, current_user, credentials).execute
     else
       render 'unauthorized'
     end
@@ -54,8 +61,15 @@ class Import::BitbucketController < Import::BaseController
   private
 
   def client
-    @client ||= Gitlab::BitbucketImport::Client.new(session[:bitbucket_access_token],
-                                                    session[:bitbucket_access_token_secret])
+    @client ||= OAuth2::Client.new(provider.app_id, provider.app_secret, options)
+  end
+
+  def provider
+    Gitlab::OAuth::Provider.config_for('bitbucket')
+  end
+
+  def options
+    OmniAuth::Strategies::Bitbucket.default_options[:client_options].deep_symbolize_keys
   end
 
   def verify_bitbucket_import_enabled
@@ -63,26 +77,23 @@ class Import::BitbucketController < Import::BaseController
   end
 
   def bitbucket_auth
-    if session[:bitbucket_access_token].blank?
-      go_to_bitbucket_for_permissions
-    end
+    go_to_bitbucket_for_permissions if session[:bitbucket_token].blank?
   end
 
   def go_to_bitbucket_for_permissions
-    request_token = client.request_token(callback_import_bitbucket_url)
-    session[:oauth_request_token] = request_token
-
-    redirect_to client.authorize_url(request_token, callback_import_bitbucket_url)
+    redirect_to client.auth_code.authorize_url(redirect_uri: callback_import_bitbucket_url)
   end
 
   def bitbucket_unauthorized
     go_to_bitbucket_for_permissions
   end
 
-  def access_params
+  def credentials
     {
-      bitbucket_access_token: session[:bitbucket_access_token],
-      bitbucket_access_token_secret: session[:bitbucket_access_token_secret]
+      token: session[:bitbucket_token],
+      expires_at: session[:bitbucket_expires_at],
+      expires_in: session[:bitbucket_expires_in],
+      refresh_token: session[:bitbucket_refresh_token]
     }
   end
 end
diff --git a/app/controllers/import/fogbugz_controller.rb b/app/controllers/import/fogbugz_controller.rb
index 99b10b2f9b3..5df6bd34185 100644
--- a/app/controllers/import/fogbugz_controller.rb
+++ b/app/controllers/import/fogbugz_controller.rb
@@ -29,7 +29,7 @@ class Import::FogbugzController < Import::BaseController
     unless user_map.is_a?(Hash) && user_map.all? { |k, v| !v[:name].blank? }
       flash.now[:alert] = 'All users must have a name.'
 
-      render 'new_user_map' and return
+      return render 'new_user_map'
     end
 
     session[:fogbugz_user_map] = user_map
diff --git a/app/controllers/import/gitea_controller.rb b/app/controllers/import/gitea_controller.rb
new file mode 100644
index 00000000000..fbd851c64a7
--- /dev/null
+++ b/app/controllers/import/gitea_controller.rb
@@ -0,0 +1,45 @@
+class Import::GiteaController < Import::GithubController
+  def new
+    if session[access_token_key].present? && session[host_key].present?
+      redirect_to status_import_url
+    end
+  end
+
+  def personal_access_token
+    session[host_key] = params[host_key]
+    super
+  end
+
+  def status
+    @gitea_host_url = session[host_key]
+    super
+  end
+
+  private
+
+  def host_key
+    :"#{provider}_host_url"
+  end
+
+  # Overriden methods
+  def provider
+    :gitea
+  end
+
+  # Gitea is not yet an OAuth provider
+  # See https://github.com/go-gitea/gitea/issues/27
+  def logged_in_with_provider?
+    false
+  end
+
+  def provider_auth
+    if session[access_token_key].blank? || session[host_key].blank?
+      redirect_to new_import_gitea_url,
+        alert: 'You need to specify both an Access Token and a Host URL.'
+    end
+  end
+
+  def client_options
+    { host: session[host_key], api_version: 'v1' }
+  end
+end
diff --git a/app/controllers/import/github_controller.rb b/app/controllers/import/github_controller.rb
index ee7d498c59c..53a5981e564 100644
--- a/app/controllers/import/github_controller.rb
+++ b/app/controllers/import/github_controller.rb
@@ -1,39 +1,37 @@
 class Import::GithubController < Import::BaseController
-  before_action :verify_github_import_enabled
-  before_action :github_auth, only: [:status, :jobs, :create]
+  before_action :verify_import_enabled
+  before_action :provider_auth, only: [:status, :jobs, :create]
 
-  rescue_from Octokit::Unauthorized, with: :github_unauthorized
-
-  helper_method :logged_in_with_github?
+  rescue_from Octokit::Unauthorized, with: :provider_unauthorized
 
   def new
-    if logged_in_with_github?
-      go_to_github_for_permissions
-    elsif session[:github_access_token]
-      redirect_to status_import_github_url
+    if logged_in_with_provider?
+      go_to_provider_for_permissions
+    elsif session[access_token_key]
+      redirect_to status_import_url
     end
   end
 
   def callback
-    session[:github_access_token] = client.get_token(params[:code])
-    redirect_to status_import_github_url
+    session[access_token_key] = client.get_token(params[:code])
+    redirect_to status_import_url
   end
 
   def personal_access_token
-    session[:github_access_token] = params[:personal_access_token]
-    redirect_to status_import_github_url
+    session[access_token_key] = params[:personal_access_token]
+    redirect_to status_import_url
   end
 
   def status
     @repos = client.repos
-    @already_added_projects = current_user.created_projects.where(import_type: "github")
+    @already_added_projects = current_user.created_projects.where(import_type: provider)
     already_added_projects_names = @already_added_projects.pluck(:import_source)
 
-    @repos.reject!{ |repo| already_added_projects_names.include? repo.full_name }
+    @repos.reject! { |repo| already_added_projects_names.include? repo.full_name }
   end
 
   def jobs
-    jobs = current_user.created_projects.where(import_type: "github").to_json(only: [:id, :import_status])
+    jobs = current_user.created_projects.where(import_type: provider).to_json(only: [:id, :import_status])
     render json: jobs
   end
 
@@ -44,8 +42,8 @@ class Import::GithubController < Import::BaseController
     namespace_path = params[:target_namespace].presence || current_user.namespace_path
     @target_namespace = find_or_create_namespace(namespace_path, current_user.namespace_path)
 
-    if current_user.can?(:create_projects, @target_namespace)
-      @project = Gitlab::GithubImport::ProjectCreator.new(repo, @project_name, @target_namespace, current_user, access_params).execute
+    if can?(current_user, :create_projects, @target_namespace)
+      @project = Gitlab::GithubImport::ProjectCreator.new(repo, @project_name, @target_namespace, current_user, access_params, type: provider).execute
     else
       render 'unauthorized'
     end
@@ -54,34 +52,63 @@ class Import::GithubController < Import::BaseController
   private
 
   def client
-    @client ||= Gitlab::GithubImport::Client.new(session[:github_access_token])
+    @client ||= Gitlab::GithubImport::Client.new(session[access_token_key], client_options)
   end
 
-  def verify_github_import_enabled
-    render_404 unless github_import_enabled?
+  def verify_import_enabled
+    render_404 unless import_enabled?
   end
 
-  def github_auth
-    if session[:github_access_token].blank?
-      go_to_github_for_permissions
-    end
+  def go_to_provider_for_permissions
+    redirect_to client.authorize_url(callback_import_url)
   end
 
-  def go_to_github_for_permissions
-    redirect_to client.authorize_url(callback_import_github_url)
+  def import_enabled?
+    __send__("#{provider}_import_enabled?")
   end
 
-  def github_unauthorized
-    session[:github_access_token] = nil
-    redirect_to new_import_github_url,
-      alert: 'Access denied to your GitHub account.'
+  def new_import_url
+    public_send("new_import_#{provider}_url")
   end
 
-  def logged_in_with_github?
-    current_user.identities.exists?(provider: 'github')
+  def status_import_url
+    public_send("status_import_#{provider}_url")
+  end
+
+  def callback_import_url
+    public_send("callback_import_#{provider}_url")
+  end
+
+  def provider_unauthorized
+    session[access_token_key] = nil
+    redirect_to new_import_url,
+      alert: "Access denied to your #{Gitlab::ImportSources.title(provider.to_s)} account."
+  end
+
+  def access_token_key
+    :"#{provider}_access_token"
   end
 
   def access_params
-    { github_access_token: session[:github_access_token] }
+    { github_access_token: session[access_token_key] }
+  end
+
+  # The following methods are overriden in subclasses
+  def provider
+    :github
+  end
+
+  def logged_in_with_provider?
+    current_user.identities.exists?(provider: provider)
+  end
+
+  def provider_auth
+    if session[access_token_key].blank?
+      go_to_provider_for_permissions
+    end
+  end
+
+  def client_options
+    {}
   end
 end
diff --git a/app/controllers/import/google_code_controller.rb b/app/controllers/import/google_code_controller.rb
index 8d0de158f98..7d7f13ce5d5 100644
--- a/app/controllers/import/google_code_controller.rb
+++ b/app/controllers/import/google_code_controller.rb
@@ -44,13 +44,13 @@ class Import::GoogleCodeController < Import::BaseController
     rescue
       flash.now[:alert] = "The entered user map is not a valid JSON user map."
 
-      render "new_user_map" and return
+      return render "new_user_map"
     end
 
     unless user_map.is_a?(Hash) && user_map.all? { |k, v| k.is_a?(String) && v.is_a?(String) }
       flash.now[:alert] = "The entered user map is not a valid JSON user map."
 
-      render "new_user_map" and return
+      return render "new_user_map"
     end
 
     # This is the default, so let's not save it into the database.
diff --git a/app/controllers/invites_controller.rb b/app/controllers/invites_controller.rb
index 58964a0e65d..7625187c7be 100644
--- a/app/controllers/invites_controller.rb
+++ b/app/controllers/invites_controller.rb
@@ -42,9 +42,7 @@ class InvitesController < ApplicationController
     @token = params[:id]
     @member = Member.find_by_invite_token(@token)
 
-    unless @member
-      render_404 and return
-    end
+    return render_404 unless @member
 
     @member
   end
diff --git a/app/controllers/jwt_controller.rb b/app/controllers/jwt_controller.rb
index 7e4da73bc11..3109439b2ff 100644
--- a/app/controllers/jwt_controller.rb
+++ b/app/controllers/jwt_controller.rb
@@ -5,14 +5,14 @@ class JwtController < ApplicationController
 
   SERVICES = {
     Auth::ContainerRegistryAuthenticationService::AUDIENCE => Auth::ContainerRegistryAuthenticationService,
-  }
+  }.freeze
 
   def auth
     service = SERVICES[params[:service]]
     return head :not_found unless service
 
     result = service.new(@authentication_result.project, @authentication_result.actor, auth_params).
-      execute(authentication_abilities: @authentication_result.authentication_abilities || [])
+      execute(authentication_abilities: @authentication_result.authentication_abilities)
 
     render json: result, status: result[:http_status]
   end
@@ -20,13 +20,13 @@ class JwtController < ApplicationController
   private
 
   def authenticate_project_or_user
-    @authentication_result = Gitlab::Auth::Result.new
+    @authentication_result = Gitlab::Auth::Result.new(nil, nil, :none, Gitlab::Auth.read_authentication_abilities)
 
     authenticate_with_http_basic do |login, password|
       @authentication_result = Gitlab::Auth.find_for_git_client(login, password, project: nil, ip: request.ip)
 
       render_unauthorized unless @authentication_result.success? &&
-        (@authentication_result.actor.nil? || @authentication_result.actor.is_a?(User))
+          (@authentication_result.actor.nil? || @authentication_result.actor.is_a?(User))
     end
   rescue Gitlab::Auth::MissingPersonalTokenError
     render_missing_personal_token
@@ -39,7 +39,8 @@ class JwtController < ApplicationController
           message: "HTTP Basic: Access denied\n" \
                    "You have 2FA enabled, please use a personal access token for Git over HTTP.\n" \
                    "You can generate one at #{profile_personal_access_tokens_url}" }
-      ] }, status: 401
+      ]
+    }, status: 401
   end
 
   def render_unauthorized
@@ -47,7 +48,8 @@ class JwtController < ApplicationController
       errors: [
         { code: 'UNAUTHORIZED',
           message: 'HTTP Basic: Access denied' }
-      ] }, status: 401
+      ]
+    }, status: 401
   end
 
   def auth_params
diff --git a/app/controllers/koding_controller.rb b/app/controllers/koding_controller.rb
index f3759b4c0ea..6b1e64ce819 100644
--- a/app/controllers/koding_controller.rb
+++ b/app/controllers/koding_controller.rb
@@ -1,5 +1,5 @@
 class KodingController < ApplicationController
-  before_action :check_integration!, :authenticate_user!, :reject_blocked!
+  before_action :check_integration!
   layout 'koding'
 
   def index
diff --git a/app/controllers/oauth/applications_controller.rb b/app/controllers/oauth/applications_controller.rb
index 0f54dfa4efc..2ae4785b12c 100644
--- a/app/controllers/oauth/applications_controller.rb
+++ b/app/controllers/oauth/applications_controller.rb
@@ -2,10 +2,12 @@ class Oauth::ApplicationsController < Doorkeeper::ApplicationsController
   include Gitlab::CurrentSettings
   include Gitlab::GonHelper
   include PageLayoutHelper
+  include OauthApplications
 
   before_action :verify_user_oauth_applications_enabled
   before_action :authenticate_user!
   before_action :add_gon_variables
+  before_action :load_scopes, only: [:index, :create, :edit]
 
   layout 'profile'
 
diff --git a/app/controllers/oauth/authorizations_controller.rb b/app/controllers/oauth/authorizations_controller.rb
index c721dca58d9..05190103767 100644
--- a/app/controllers/oauth/authorizations_controller.rb
+++ b/app/controllers/oauth/authorizations_controller.rb
@@ -1,8 +1,8 @@
 class Oauth::AuthorizationsController < Doorkeeper::AuthorizationsController
-  before_action :authenticate_resource_owner!
-
   layout 'profile'
 
+  # Overriden from Doorkeeper::AuthorizationsController to
+  # include the call to session.delete
   def new
     if pre_auth.authorizable?
       if skip_authorization? || matching_token?
@@ -16,44 +16,4 @@ class Oauth::AuthorizationsController < Doorkeeper::AuthorizationsController
       render "doorkeeper/authorizations/error"
     end
   end
-
-  # TODO: Handle raise invalid authorization
-  def create
-    redirect_or_render authorization.authorize
-  end
-
-  def destroy
-    redirect_or_render authorization.deny
-  end
-
-  private
-
-  def matching_token?
-    Doorkeeper::AccessToken.matching_token_for(pre_auth.client,
-                                               current_resource_owner.id,
-                                               pre_auth.scopes)
-  end
-
-  def redirect_or_render(auth)
-    if auth.redirectable?
-      redirect_to auth.redirect_uri
-    else
-      render json: auth.body, status: auth.status
-    end
-  end
-
-  def pre_auth
-    @pre_auth ||=
-      Doorkeeper::OAuth::PreAuthorization.new(Doorkeeper.configuration,
-                                              server.client_via_uid,
-                                              params)
-  end
-
-  def authorization
-    @authorization ||= strategy.request
-  end
-
-  def strategy
-    @strategy ||= server.authorization_request(pre_auth.response_type)
-  end
 end
diff --git a/app/controllers/omniauth_callbacks_controller.rb b/app/controllers/omniauth_callbacks_controller.rb
index f54c79c2e37..58d50ad647b 100644
--- a/app/controllers/omniauth_callbacks_controller.rb
+++ b/app/controllers/omniauth_callbacks_controller.rb
@@ -78,6 +78,13 @@ class OmniauthCallbacksController < Devise::OmniauthCallbacksController
     handle_omniauth
   end
 
+  def authentiq
+    if params['sid']
+      handle_service_ticket oauth['provider'], params['sid']
+    end
+    handle_omniauth
+  end
+
   private
 
   def handle_omniauth
@@ -115,7 +122,7 @@ class OmniauthCallbacksController < Devise::OmniauthCallbacksController
     else
       error_message = @user.errors.full_messages.to_sentence
 
-      redirect_to omniauth_error_path(oauth['provider'], error: error_message) and return
+      return redirect_to omniauth_error_path(oauth['provider'], error: error_message)
     end
   end
 
diff --git a/app/controllers/profiles/accounts_controller.rb b/app/controllers/profiles/accounts_controller.rb
index 69959fe3687..7d1aa8d1ce0 100644
--- a/app/controllers/profiles/accounts_controller.rb
+++ b/app/controllers/profiles/accounts_controller.rb
@@ -1,11 +1,22 @@
 class Profiles::AccountsController < Profiles::ApplicationController
+  include AuthHelper
+
   def show
     @user = current_user
   end
 
   def unlink
     provider = params[:provider]
-    current_user.identities.find_by(provider: provider).destroy unless provider.to_s == 'saml'
+    identity = current_user.identities.find_by(provider: provider)
+
+    return render_404 unless identity
+
+    if unlink_allowed?(provider)
+      identity.destroy
+    else
+      flash[:alert] = "You are not allowed to unlink your primary login account"
+    end
+
     redirect_to profile_account_path
   end
 end
diff --git a/app/controllers/profiles/avatars_controller.rb b/app/controllers/profiles/avatars_controller.rb
index f193adb46b4..daa51ae41df 100644
--- a/app/controllers/profiles/avatars_controller.rb
+++ b/app/controllers/profiles/avatars_controller.rb
@@ -4,7 +4,6 @@ class Profiles::AvatarsController < Profiles::ApplicationController
     @user.remove_avatar!
 
     @user.save
-    @user.reset_events_cache
 
     redirect_to profile_path
   end
diff --git a/app/controllers/profiles/chat_names_controller.rb b/app/controllers/profiles/chat_names_controller.rb
new file mode 100644
index 00000000000..6a1f468ba5a
--- /dev/null
+++ b/app/controllers/profiles/chat_names_controller.rb
@@ -0,0 +1,64 @@
+class Profiles::ChatNamesController < Profiles::ApplicationController
+  before_action :chat_name_token, only: [:new]
+  before_action :chat_name_params, only: [:new, :create, :deny]
+
+  def index
+    @chat_names = current_user.chat_names
+  end
+
+  def new
+  end
+
+  def create
+    new_chat_name = current_user.chat_names.new(chat_name_params)
+
+    if new_chat_name.save
+      flash[:notice] = "Authorized #{new_chat_name.chat_name}"
+    else
+      flash[:alert] = "Could not authorize chat nickname. Try again!"
+    end
+
+    delete_chat_name_token
+    redirect_to profile_chat_names_path
+  end
+
+  def deny
+    delete_chat_name_token
+
+    flash[:notice] = "Denied authorization of chat nickname #{chat_name_params[:user_name]}."
+
+    redirect_to profile_chat_names_path
+  end
+
+  def destroy
+    @chat_name = chat_names.find(params[:id])
+
+    if @chat_name.destroy
+      flash[:notice] = "Deleted chat nickname: #{@chat_name.chat_name}!"
+    else
+      flash[:alert] = "Could not delete chat nickname #{@chat_name.chat_name}."
+    end
+
+    redirect_to profile_chat_names_path
+  end
+
+  private
+
+  def delete_chat_name_token
+    chat_name_token.delete
+  end
+
+  def chat_name_params
+    @chat_name_params ||= chat_name_token.get || render_404
+  end
+
+  def chat_name_token
+    return render_404 unless params[:token] || render_404
+
+    @chat_name_token ||= Gitlab::ChatNameToken.new(params[:token])
+  end
+
+  def chat_names
+    @chat_names ||= current_user.chat_names
+  end
+end
diff --git a/app/controllers/profiles/keys_controller.rb b/app/controllers/profiles/keys_controller.rb
index 830e0b9591b..e4452f46056 100644
--- a/app/controllers/profiles/keys_controller.rb
+++ b/app/controllers/profiles/keys_controller.rb
@@ -10,11 +10,6 @@ class Profiles::KeysController < Profiles::ApplicationController
     @key = current_user.keys.find(params[:id])
   end
 
-  # Back-compat: We need to support this URL since git-annex webapp points to it
-  def new
-    redirect_to profile_keys_path
-  end
-
   def create
     @key = current_user.keys.new(key_params)
 
@@ -45,13 +40,13 @@ class Profiles::KeysController < Profiles::ApplicationController
         if user.present?
           render text: user.all_ssh_keys.join("\n"), content_type: "text/plain"
         else
-          render_404 and return
+          return render_404
         end
       rescue => e
         render text: e.message
       end
     else
-      render_404 and return
+      return render_404
     end
   end
 
diff --git a/app/controllers/profiles/notifications_controller.rb b/app/controllers/profiles/notifications_controller.rb
index b8b71d295f6..a271e2dfc4b 100644
--- a/app/controllers/profiles/notifications_controller.rb
+++ b/app/controllers/profiles/notifications_controller.rb
@@ -17,6 +17,6 @@ class Profiles::NotificationsController < Profiles::ApplicationController
   end
 
   def user_params
-    params.require(:user).permit(:notification_email)
+    params.require(:user).permit(:notification_email, :notified_of_own_activity)
   end
 end
diff --git a/app/controllers/profiles/personal_access_tokens_controller.rb b/app/controllers/profiles/personal_access_tokens_controller.rb
index 508b82a9a6c..0abe7ea3c9b 100644
--- a/app/controllers/profiles/personal_access_tokens_controller.rb
+++ b/app/controllers/profiles/personal_access_tokens_controller.rb
@@ -1,24 +1,22 @@
 class Profiles::PersonalAccessTokensController < Profiles::ApplicationController
-  before_action :load_personal_access_tokens, only: :index
-
   def index
-    @personal_access_token = current_user.personal_access_tokens.build
+    set_index_vars
   end
 
   def create
-    @personal_access_token = current_user.personal_access_tokens.generate(personal_access_token_params)
+    @personal_access_token = finder.build(personal_access_token_params)
 
     if @personal_access_token.save
       flash[:personal_access_token] = @personal_access_token.token
       redirect_to profile_personal_access_tokens_path, notice: "Your new personal access token has been created."
     else
-      load_personal_access_tokens
+      set_index_vars
       render :index
     end
   end
 
   def revoke
-    @personal_access_token = current_user.personal_access_tokens.find(params[:id])
+    @personal_access_token = finder.find(params[:id])
 
     if @personal_access_token.revoke!
       flash[:notice] = "Revoked personal access token #{@personal_access_token.name}!"
@@ -31,12 +29,19 @@ class Profiles::PersonalAccessTokensController < Profiles::ApplicationController
 
   private
 
+  def finder(options = {})
+    PersonalAccessTokensFinder.new({ user: current_user, impersonation: false }.merge(options))
+  end
+
   def personal_access_token_params
-    params.require(:personal_access_token).permit(:name, :expires_at)
+    params.require(:personal_access_token).permit(:name, :expires_at, scopes: [])
   end
 
-  def load_personal_access_tokens
-    @active_personal_access_tokens = current_user.personal_access_tokens.active.order(:expires_at)
-    @inactive_personal_access_tokens = current_user.personal_access_tokens.inactive
+  def set_index_vars
+    @scopes = Gitlab::Auth::API_SCOPES
+
+    @personal_access_token = finder.build
+    @inactive_personal_access_tokens = finder(state: 'inactive').execute
+    @active_personal_access_tokens = finder(state: 'active').execute.order(:expires_at)
   end
 end
diff --git a/app/controllers/profiles/preferences_controller.rb b/app/controllers/profiles/preferences_controller.rb
index a9a06ecc808..0d891ef4004 100644
--- a/app/controllers/profiles/preferences_controller.rb
+++ b/app/controllers/profiles/preferences_controller.rb
@@ -34,7 +34,6 @@ class Profiles::PreferencesController < Profiles::ApplicationController
       :layout,
       :dashboard,
       :project_view,
-      :theme_id
     )
   end
 end
diff --git a/app/controllers/profiles/two_factor_auths_controller.rb b/app/controllers/profiles/two_factor_auths_controller.rb
index 9eb75bb3891..26e7e93533e 100644
--- a/app/controllers/profiles/two_factor_auths_controller.rb
+++ b/app/controllers/profiles/two_factor_auths_controller.rb
@@ -22,6 +22,7 @@ class Profiles::TwoFactorAuthsController < Profiles::ApplicationController
     end
 
     @qr_code = build_qr_code
+    @account_string = account_string
     setup_u2f_registration
   end
 
@@ -78,9 +79,12 @@ class Profiles::TwoFactorAuthsController < Profiles::ApplicationController
   private
 
   def build_qr_code
-    issuer = "#{issuer_host} | #{current_user.email}"
-    uri = current_user.otp_provisioning_uri(current_user.email, issuer: issuer)
-    RQRCode::render_qrcode(uri, :svg, level: :m, unit: 3)
+    uri = current_user.otp_provisioning_uri(account_string, issuer: issuer_host)
+    RQRCode.render_qrcode(uri, :svg, level: :m, unit: 3)
+  end
+
+  def account_string
+    "#{issuer_host}:#{current_user.email}"
   end
 
   def issuer_host
diff --git a/app/controllers/profiles_controller.rb b/app/controllers/profiles_controller.rb
index f71e0a1302b..987b95e89b9 100644
--- a/app/controllers/profiles_controller.rb
+++ b/app/controllers/profiles_controller.rb
@@ -26,7 +26,15 @@ class ProfilesController < Profiles::ApplicationController
 
   def reset_private_token
     if current_user.reset_authentication_token!
-      flash[:notice] = "Token was successfully updated"
+      flash[:notice] = "Private token was successfully reset"
+    end
+
+    redirect_to profile_account_path
+  end
+
+  def reset_incoming_email_token
+    if current_user.reset_incoming_email_token!
+      flash[:notice] = "Incoming email token was successfully reset"
     end
 
     redirect_to profile_account_path
@@ -39,11 +47,14 @@ class ProfilesController < Profiles::ApplicationController
   end
 
   def update_username
-    @user.update_attributes(username: user_params[:username])
-
-    respond_to do |format|
-      format.js
+    if @user.update_attributes(username: user_params[:username])
+      options = { notice: "Username successfully changed" }
+    else
+      message = @user.errors.full_messages.uniq.join('. ')
+      options = { alert: "Username change failed - #{message}" }
     end
+
+    redirect_back_or_default(default: { action: 'show' }, options: options)
   end
 
   private
diff --git a/app/controllers/projects/application_controller.rb b/app/controllers/projects/application_controller.rb
index b2ff36f6538..f1a93ccb3ad 100644
--- a/app/controllers/projects/application_controller.rb
+++ b/app/controllers/projects/application_controller.rb
@@ -18,13 +18,13 @@ class Projects::ApplicationController < ApplicationController
       # to
       #   localhost/group/project
       #
-      if id =~ /\.git\Z/
+      if params[:format] == 'git'
         redirect_to request.original_url.gsub(/\.git\/?\Z/, '')
         return
       end
 
       project_path = "#{namespace}/#{id}"
-      @project = Project.find_with_namespace(project_path)
+      @project = Project.find_by_full_path(project_path)
 
       if can?(current_user, :read_project, @project) && !@project.pending_delete?
         if @project.path_with_namespace != project_path
@@ -83,11 +83,15 @@ class Projects::ApplicationController < ApplicationController
   end
 
   def apply_diff_view_cookie!
-    @show_changes_tab = params[:view].present?
     cookies.permanent[:diff_view] = params.delete(:view) if params[:view].present?
   end
 
   def builds_enabled
     return render_404 unless @project.feature_available?(:builds, current_user)
   end
+
+  def update_ref
+    branch_exists = @repository.find_branch(@target_branch)
+    @ref = @target_branch if branch_exists
+  end
 end
diff --git a/app/controllers/projects/autocomplete_sources_controller.rb b/app/controllers/projects/autocomplete_sources_controller.rb
new file mode 100644
index 00000000000..ffb54390965
--- /dev/null
+++ b/app/controllers/projects/autocomplete_sources_controller.rb
@@ -0,0 +1,44 @@
+class Projects::AutocompleteSourcesController < Projects::ApplicationController
+  before_action :load_autocomplete_service, except: [:members]
+
+  def members
+    render json: ::Projects::ParticipantsService.new(@project, current_user).execute(noteable)
+  end
+
+  def issues
+    render json: @autocomplete_service.issues
+  end
+
+  def merge_requests
+    render json: @autocomplete_service.merge_requests
+  end
+
+  def labels
+    render json: @autocomplete_service.labels
+  end
+
+  def milestones
+    render json: @autocomplete_service.milestones
+  end
+
+  def commands
+    render json: @autocomplete_service.commands(noteable, params[:type])
+  end
+
+  private
+
+  def load_autocomplete_service
+    @autocomplete_service = ::Projects::AutocompleteService.new(@project, current_user)
+  end
+
+  def noteable
+    case params[:type]
+    when 'Issue'
+      IssuesFinder.new(current_user, project_id: @project.id).execute.find_by(iid: params[:type_id])
+    when 'MergeRequest'
+      MergeRequestsFinder.new(current_user, project_id: @project.id).execute.find_by(iid: params[:type_id])
+    when 'Commit'
+      @project.commit(params[:type_id])
+    end
+  end
+end
diff --git a/app/controllers/projects/avatars_controller.rb b/app/controllers/projects/avatars_controller.rb
index ada7db3c552..53788687076 100644
--- a/app/controllers/projects/avatars_controller.rb
+++ b/app/controllers/projects/avatars_controller.rb
@@ -20,7 +20,6 @@ class Projects::AvatarsController < Projects::ApplicationController
     @project.remove_avatar!
 
     @project.save
-    @project.reset_events_cache
 
     redirect_to edit_project_path(@project)
   end
diff --git a/app/controllers/projects/blame_controller.rb b/app/controllers/projects/blame_controller.rb
index f576d0be1fc..6461eeac11c 100644
--- a/app/controllers/projects/blame_controller.rb
+++ b/app/controllers/projects/blame_controller.rb
@@ -8,6 +8,12 @@ class Projects::BlameController < Projects::ApplicationController
 
   def show
     @blob = @repository.blob_at(@commit.id, @path)
+
+    return render_404 unless @blob
+
+    environment_params = @repository.branch_exists?(@ref) ? { ref: @ref } : { commit: @commit }
+    @environment = EnvironmentsFinder.new(@project, current_user, environment_params).execute.last
+
     @blame_groups = Gitlab::Blame.new(@blob, @commit).groups
   end
 end
diff --git a/app/controllers/projects/blob_controller.rb b/app/controllers/projects/blob_controller.rb
index b78cc6585ba..80a95c6158b 100644
--- a/app/controllers/projects/blob_controller.rb
+++ b/app/controllers/projects/blob_controller.rb
@@ -5,7 +5,7 @@ class Projects::BlobController < Projects::ApplicationController
   include ActionView::Helpers::SanitizeHelper
 
   # Raised when given an invalid file path
-  class InvalidPathError < StandardError; end
+  InvalidPathError = Class.new(StandardError)
 
   before_action :require_non_empty_project, except: [:new, :create]
   before_action :authorize_download_code!
@@ -13,7 +13,6 @@ class Projects::BlobController < Projects::ApplicationController
   before_action :assign_blob_vars
   before_action :commit, except: [:new, :create]
   before_action :blob, except: [:new, :create]
-  before_action :from_merge_request, only: [:edit, :update]
   before_action :require_branch_head, only: [:edit, :update]
   before_action :editor_variables, except: [:show, :preview, :diff]
   before_action :validate_diff_params, only: :diff
@@ -24,13 +23,17 @@ class Projects::BlobController < Projects::ApplicationController
   end
 
   def create
+    update_ref
+
     create_commit(Files::CreateService, success_notice: "The file has been successfully created.",
-                                        success_path: namespace_project_blob_path(@project.namespace, @project, File.join(@target_branch, @file_path)),
+                                        success_path: -> { namespace_project_blob_path(@project.namespace, @project, File.join(@target_branch, @file_path)) },
                                         failure_view: :new,
                                         failure_path: namespace_project_new_blob_path(@project.namespace, @project, @ref))
   end
 
   def show
+    environment_params = @repository.branch_exists?(@ref) ? { ref: @ref } : { commit: @commit }
+    @environment = EnvironmentsFinder.new(@project, current_user, environment_params).execute.last
   end
 
   def edit
@@ -39,15 +42,7 @@ class Projects::BlobController < Projects::ApplicationController
 
   def update
     @path = params[:file_path] if params[:file_path].present?
-    after_edit_path =
-      if from_merge_request && @target_branch == @ref
-        diffs_namespace_project_merge_request_path(from_merge_request.target_project.namespace, from_merge_request.target_project, from_merge_request) +
-          "#file-path-#{hexdigest(@path)}"
-      else
-        namespace_project_blob_path(@project.namespace, @project, File.join(@target_branch, @path))
-      end
-
-    create_commit(Files::UpdateService, success_path: after_edit_path,
+    create_commit(Files::UpdateService, success_path: -> { after_edit_path },
                                         failure_view: :edit,
                                         failure_path: namespace_project_blob_path(@project.namespace, @project, @id))
 
@@ -68,10 +63,10 @@ class Projects::BlobController < Projects::ApplicationController
   end
 
   def destroy
-    create_commit(Files::DeleteService, success_notice: "The file has been successfully deleted.",
-                                        success_path: namespace_project_tree_path(@project.namespace, @project, @target_branch),
-                                        failure_view: :show,
-                                        failure_path: namespace_project_blob_path(@project.namespace, @project, @id))
+    create_commit(Files::DestroyService, success_notice: "The file has been successfully deleted.",
+                                         success_path: -> { namespace_project_tree_path(@project.namespace, @project, @target_branch) },
+                                         failure_view: :show,
+                                         failure_path: namespace_project_blob_path(@project.namespace, @project, @id))
   end
 
   def diff
@@ -102,7 +97,7 @@ class Projects::BlobController < Projects::ApplicationController
     else
       if tree = @repository.tree(@commit.id, @path)
         if tree.entries.any?
-          redirect_to namespace_project_tree_path(@project.namespace, @project, File.join(@ref, @path)) and return
+          return redirect_to namespace_project_tree_path(@project.namespace, @project, File.join(@ref, @path))
         end
       end
 
@@ -124,9 +119,14 @@ class Projects::BlobController < Projects::ApplicationController
     render_404
   end
 
-  def from_merge_request
-    # If blob edit was initiated from merge request page
-    @from_merge_request ||= MergeRequest.find_by(id: params[:from_merge_request_id])
+  def after_edit_path
+    from_merge_request = MergeRequestsFinder.new(current_user, project_id: @project.id).execute.find_by(iid: params[:from_merge_request_iid])
+    if from_merge_request && @target_branch == @ref
+      diffs_namespace_project_merge_request_path(from_merge_request.target_project.namespace, from_merge_request.target_project, from_merge_request) +
+        "##{hexdigest(@path)}"
+    else
+      namespace_project_blob_path(@project.namespace, @project, File.join(@target_branch, @path))
+    end
   end
 
   def editor_variables
diff --git a/app/controllers/projects/boards/issues_controller.rb b/app/controllers/projects/boards/issues_controller.rb
index dc33e1405f2..28c9646910d 100644
--- a/app/controllers/projects/boards/issues_controller.rb
+++ b/app/controllers/projects/boards/issues_controller.rb
@@ -7,7 +7,8 @@ module Projects
 
       def index
         issues = ::Boards::Issues::ListService.new(project, current_user, filter_params).execute
-        issues = issues.page(params[:page])
+        issues = issues.page(params[:page]).per(params[:per] || 20)
+        make_sure_position_is_set(issues)
 
         render json: {
           issues: serialize_as_json(issues),
@@ -38,6 +39,12 @@ module Projects
 
       private
 
+      def make_sure_position_is_set(issues)
+        issues.each do |issue|
+          issue.move_to_end && issue.save unless issue.relative_position
+        end
+      end
+
       def issue
         @issue ||=
           IssuesFinder.new(current_user, project_id: project.id)
@@ -59,11 +66,11 @@ module Projects
       end
 
       def filter_params
-        params.merge(board_id: params[:board_id], id: params[:list_id])
+        params.merge(board_id: params[:board_id], id: params[:list_id]).compact
       end
 
       def move_params
-        params.permit(:board_id, :id, :from_list_id, :to_list_id)
+        params.permit(:board_id, :id, :from_list_id, :to_list_id, :move_before_iid, :move_after_iid)
       end
 
       def issue_params
@@ -73,7 +80,7 @@ module Projects
       def serialize_as_json(resource)
         resource.as_json(
           labels: true,
-          only: [:iid, :title, :confidential, :due_date],
+          only: [:id, :iid, :title, :confidential, :due_date, :relative_position],
           include: {
             assignee: { only: [:id, :name, :username], methods: [:avatar_url] },
             milestone: { only: [:id, :title] }
diff --git a/app/controllers/projects/branches_controller.rb b/app/controllers/projects/branches_controller.rb
index 2de8ada3e29..840405f38cb 100644
--- a/app/controllers/projects/branches_controller.rb
+++ b/app/controllers/projects/branches_controller.rb
@@ -1,25 +1,29 @@
 class Projects::BranchesController < Projects::ApplicationController
   include ActionView::Helpers::SanitizeHelper
   include SortingHelper
+
   # Authorize
-  before_action :require_non_empty_project
+  before_action :require_non_empty_project, except: :create
   before_action :authorize_download_code!
-  before_action :authorize_push_code!, only: [:new, :create, :destroy]
+  before_action :authorize_push_code!, only: [:new, :create, :destroy, :destroy_all_merged]
 
   def index
     @sort = params[:sort].presence || sort_value_name
     @branches = BranchesFinder.new(@repository, params).execute
-    @branches = Kaminari.paginate_array(@branches).page(params[:page])
-
-    @max_commits = @branches.reduce(0) do |memo, branch|
-      diverging_commit_counts = repository.diverging_commit_counts(branch)
-      [memo, diverging_commit_counts[:behind], diverging_commit_counts[:ahead]].max
-    end
 
     respond_to do |format|
-      format.html
+      format.html do
+        paginate_branches
+        @refs_pipelines = @project.pipelines.latest_successful_for_refs(@branches.map(&:name))
+
+        @max_commits = @branches.reduce(0) do |memo, branch|
+          diverging_commit_counts = repository.diverging_commit_counts(branch)
+          [memo, diverging_commit_counts[:behind], diverging_commit_counts[:ahead]].max
+        end
+      end
       format.json do
-        render json: @repository.branch_names
+        paginate_branches unless params[:show_all]
+        render json: @branches.map(&:name)
       end
     end
   end
@@ -32,18 +36,27 @@ class Projects::BranchesController < Projects::ApplicationController
     branch_name = sanitize(strip_tags(params[:branch_name]))
     branch_name = Addressable::URI.unescape(branch_name)
 
+    redirect_to_autodeploy = project.empty_repo? && project.deployment_services.present?
+
     result = CreateBranchService.new(project, current_user).
         execute(branch_name, ref)
 
     if params[:issue_iid]
-      issue = @project.issues.find_by(iid: params[:issue_iid])
+      issue = IssuesFinder.new(current_user, project_id: @project.id).find_by(iid: params[:issue_iid])
       SystemNoteService.new_issue_branch(issue, @project, current_user, branch_name) if issue
     end
 
     if result[:status] == :success
       @branch = result[:branch]
-      redirect_to namespace_project_tree_path(@project.namespace, @project,
-                                              @branch.name)
+
+      if redirect_to_autodeploy
+        redirect_to(
+          url_to_autodeploy_setup(project, branch_name),
+          notice: view_context.autodeploy_flash_notice(branch_name))
+      else
+        redirect_to namespace_project_tree_path(@project.namespace, @project,
+                                                @branch.name)
+      end
     else
       @error = result[:message]
       render action: 'new'
@@ -62,6 +75,13 @@ class Projects::BranchesController < Projects::ApplicationController
     end
   end
 
+  def destroy_all_merged
+    DeleteMergedBranchesService.new(@project, current_user).async_execute
+
+    redirect_to namespace_project_branches_path(@project.namespace, @project),
+      notice: 'Merged branches are being deleted. This can take some time depending on the number of branches. Please refresh the page to see changes.'
+  end
+
   private
 
   def ref
@@ -69,7 +89,23 @@ class Projects::BranchesController < Projects::ApplicationController
       ref_escaped = sanitize(strip_tags(params[:ref]))
       Addressable::URI.unescape(ref_escaped)
     else
-      @project.default_branch
+      @project.default_branch || 'master'
     end
   end
+
+  def paginate_branches
+    @branches = Kaminari.paginate_array(@branches).page(params[:page])
+  end
+
+  def url_to_autodeploy_setup(project, branch_name)
+    namespace_project_new_blob_path(
+      project.namespace,
+      project,
+      branch_name,
+      file_name: '.gitlab-ci.yml',
+      commit_message: 'Set up auto deploy',
+      target_branch: branch_name,
+      context: 'autodeploy'
+    )
+  end
 end
diff --git a/app/controllers/projects/builds_controller.rb b/app/controllers/projects/builds_controller.rb
index fbe391fc58c..3f3c90a49ab 100644
--- a/app/controllers/projects/builds_controller.rb
+++ b/app/controllers/projects/builds_controller.rb
@@ -1,7 +1,7 @@
 class Projects::BuildsController < Projects::ApplicationController
   before_action :build, except: [:index, :cancel_all]
   before_action :authorize_read_build!, except: [:cancel, :cancel_all, :retry, :play]
-  before_action :authorize_update_build!, except: [:index, :show, :status, :raw]
+  before_action :authorize_update_build!, except: [:index, :show, :status, :raw, :trace]
   layout 'project'
 
   def index
@@ -74,7 +74,9 @@ class Projects::BuildsController < Projects::ApplicationController
   end
 
   def status
-    render json: @build.to_json(only: [:status, :id, :sha, :coverage], methods: :sha)
+    render json: BuildSerializer
+      .new(project: @project, user: @current_user)
+      .represent_status(@build)
   end
 
   def erase
@@ -94,7 +96,7 @@ class Projects::BuildsController < Projects::ApplicationController
   private
 
   def build
-    @build ||= project.builds.find_by!(id: params[:id])
+    @build ||= project.builds.find_by!(id: params[:id]).present(current_user: current_user)
   end
 
   def build_path(build)
diff --git a/app/controllers/projects/commit_controller.rb b/app/controllers/projects/commit_controller.rb
index cdfc1ba7b92..cc67f688d51 100644
--- a/app/controllers/projects/commit_controller.rb
+++ b/app/controllers/projects/commit_controller.rb
@@ -8,13 +8,10 @@ class Projects::CommitController < Projects::ApplicationController
 
   # Authorize
   before_action :require_non_empty_project
-  before_action :authorize_download_code!, except: [:cancel_builds, :retry_builds]
-  before_action :authorize_update_build!, only: [:cancel_builds, :retry_builds]
+  before_action :authorize_download_code!
   before_action :authorize_read_pipeline!, only: [:pipelines]
-  before_action :authorize_read_commit_status!, only: [:builds]
   before_action :commit
-  before_action :define_commit_vars, only: [:show, :diff_for_path, :builds, :pipelines]
-  before_action :define_status_vars, only: [:show, :builds, :pipelines]
+  before_action :define_commit_vars, only: [:show, :diff_for_path, :pipelines]
   before_action :define_note_vars, only: [:show, :diff_for_path]
   before_action :authorize_edit_tree!, only: [:revert, :cherry_pick]
 
@@ -33,25 +30,16 @@ class Projects::CommitController < Projects::ApplicationController
   end
 
   def pipelines
-  end
-
-  def builds
-  end
-
-  def cancel_builds
-    ci_builds.running_or_pending.each(&:cancel)
-
-    redirect_back_or_default default: builds_namespace_project_commit_path(project.namespace, project, commit.sha)
-  end
+    @pipelines = @commit.pipelines.order(id: :desc)
 
-  def retry_builds
-    ci_builds.latest.failed.each do |build|
-      if build.retryable?
-        Ci::Build.retry(build, current_user)
+    respond_to do |format|
+      format.html
+      format.json do
+        render json: PipelineSerializer
+          .new(project: @project, user: @current_user)
+          .represent(@pipelines)
       end
     end
-
-    redirect_back_or_default default: builds_namespace_project_commit_path(project.namespace, project, commit.sha)
   end
 
   def branches
@@ -61,49 +49,55 @@ class Projects::CommitController < Projects::ApplicationController
   end
 
   def revert
-    assign_change_commit_vars(@commit.revert_branch_name)
+    assign_change_commit_vars
 
-    return render_404 if @target_branch.blank?
+    return render_404 if @start_branch.blank?
 
-    create_commit(Commits::RevertService, success_notice: "The #{@commit.change_type_title} has been successfully reverted.",
-                                          success_path: successful_change_path, failure_path: failed_change_path)
+    @target_branch = create_new_branch? ? @commit.revert_branch_name : @start_branch
+
+    @mr_target_branch = @start_branch
+
+    create_commit(Commits::RevertService, success_notice: "The #{@commit.change_type_title(current_user)} has been successfully reverted.",
+                                          success_path: -> { successful_change_path }, failure_path: failed_change_path)
   end
 
   def cherry_pick
-    assign_change_commit_vars(@commit.cherry_pick_branch_name)
+    assign_change_commit_vars
+
+    return render_404 if @start_branch.blank?
 
-    return render_404 if @target_branch.blank?
+    @target_branch = create_new_branch? ? @commit.cherry_pick_branch_name : @start_branch
 
-    create_commit(Commits::CherryPickService, success_notice: "The #{@commit.change_type_title} has been successfully cherry-picked.",
-                                              success_path: successful_change_path, failure_path: failed_change_path)
+    @mr_target_branch = @start_branch
+
+    create_commit(Commits::CherryPickService, success_notice: "The #{@commit.change_type_title(current_user)} has been successfully cherry-picked.",
+                                              success_path: -> { successful_change_path }, failure_path: failed_change_path)
   end
 
   private
 
-  def successful_change_path
-    return referenced_merge_request_url if @commit.merged_merge_request
+  def create_new_branch?
+    params[:create_merge_request].present? || !can?(current_user, :push_code, @project)
+  end
 
-    namespace_project_commits_url(@project.namespace, @project, @target_branch)
+  def successful_change_path
+    referenced_merge_request_url || namespace_project_commits_url(@project.namespace, @project, @target_branch)
   end
 
   def failed_change_path
-    return referenced_merge_request_url if @commit.merged_merge_request
-
-    namespace_project_commit_url(@project.namespace, @project, params[:id])
+    referenced_merge_request_url || namespace_project_commit_url(@project.namespace, @project, params[:id])
   end
 
   def referenced_merge_request_url
-    namespace_project_merge_request_url(@project.namespace, @project, @commit.merged_merge_request)
+    if merge_request = @commit.merged_merge_request(current_user)
+      namespace_project_merge_request_url(merge_request.target_project.namespace, merge_request.target_project, merge_request)
+    end
   end
 
   def commit
     @noteable = @commit ||= @project.commit(params[:id])
   end
 
-  def ci_builds
-    @ci_builds ||= Ci::Build.where(pipeline: pipelines)
-  end
-
   def define_commit_vars
     return git_not_found! unless commit
 
@@ -112,6 +106,8 @@ class Projects::CommitController < Projects::ApplicationController
 
     @diffs = commit.diffs(opts)
     @notes_count = commit.notes.count
+
+    @environment = EnvironmentsFinder.new(@project, current_user, commit: @commit).execute.last
   end
 
   def define_note_vars
@@ -133,20 +129,8 @@ class Projects::CommitController < Projects::ApplicationController
     }
   end
 
-  def define_status_vars
-    @ci_pipelines = project.pipelines.where(sha: commit.sha)
-    @statuses = CommitStatus.where(pipeline: @ci_pipelines).relevant
-    @builds = Ci::Build.where(pipeline: @ci_pipelines).relevant
-  end
-
-  def assign_change_commit_vars(mr_source_branch)
-    @commit = project.commit(params[:id])
-    @target_branch = params[:target_branch]
-    @mr_source_branch = mr_source_branch
-    @mr_target_branch = @target_branch
-    @commit_params = {
-      commit: @commit,
-      create_merge_request: params[:create_merge_request].present? || different_project?
-    }
+  def assign_change_commit_vars
+    @start_branch = params[:start_branch]
+    @commit_params = { commit: @commit }
   end
 end
diff --git a/app/controllers/projects/commits_controller.rb b/app/controllers/projects/commits_controller.rb
index aba87b6144b..ad92f05a42d 100644
--- a/app/controllers/projects/commits_controller.rb
+++ b/app/controllers/projects/commits_controller.rb
@@ -21,7 +21,7 @@ class Projects::CommitsController < Projects::ApplicationController
     @note_counts = project.notes.where(commit_id: @commits.map(&:id)).
       group(:commit_id).count
 
-    @merge_request = @project.merge_requests.opened.
+    @merge_request = MergeRequestsFinder.new(current_user, project_id: @project.id).execute.opened.
       find_by(source_project: @project, source_branch: @ref, target_branch: @repository.root_ref)
 
     respond_to do |format|
diff --git a/app/controllers/projects/compare_controller.rb b/app/controllers/projects/compare_controller.rb
index bee3d56076c..c6651254d70 100644
--- a/app/controllers/projects/compare_controller.rb
+++ b/app/controllers/projects/compare_controller.rb
@@ -25,8 +25,17 @@ class Projects::CompareController < Projects::ApplicationController
   end
 
   def create
-    redirect_to namespace_project_compare_path(@project.namespace, @project,
+    if params[:from].blank? || params[:to].blank?
+      flash[:alert] = "You must select from and to branches"
+      from_to_vars = {
+        from: params[:from].presence,
+        to: params[:to].presence
+      }
+      redirect_to namespace_project_compare_index_path(@project.namespace, @project, from_to_vars)
+    else
+      redirect_to namespace_project_compare_path(@project.namespace, @project,
                                                params[:from], params[:to])
+    end
   end
 
   private
@@ -37,7 +46,8 @@ class Projects::CompareController < Projects::ApplicationController
   end
 
   def define_diff_vars
-    @compare = CompareService.new.execute(@project, @head_ref, @project, @start_ref)
+    @compare = CompareService.new(@project, @head_ref)
+      .execute(@project, @start_ref)
 
     if @compare
       @commits = @compare.commits
@@ -47,13 +57,16 @@ class Projects::CompareController < Projects::ApplicationController
 
       @diffs = @compare.diffs(diff_options)
 
+      environment_params = @repository.branch_exists?(@head_ref) ? { ref: @head_ref } : { commit: @commit }
+      @environment = EnvironmentsFinder.new(@project, current_user, environment_params).execute.last
+
       @diff_notes_disabled = true
       @grouped_diff_discussions = {}
     end
   end
 
   def merge_request
-    @merge_request ||= @project.merge_requests.opened.
+    @merge_request ||= MergeRequestsFinder.new(current_user, project_id: @project.id).execute.opened.
       find_by(source_project: @project, source_branch: @head_ref, target_branch: @start_ref)
   end
 end
diff --git a/app/controllers/projects/cycle_analytics/events_controller.rb b/app/controllers/projects/cycle_analytics/events_controller.rb
new file mode 100644
index 00000000000..b69d46f2c41
--- /dev/null
+++ b/app/controllers/projects/cycle_analytics/events_controller.rb
@@ -0,0 +1,61 @@
+module Projects
+  module CycleAnalytics
+    class EventsController < Projects::ApplicationController
+      include CycleAnalyticsParams
+    
+      before_action :authorize_read_cycle_analytics!
+      before_action :authorize_read_build!, only: [:test, :staging]
+      before_action :authorize_read_issue!, only: [:issue, :production]
+      before_action :authorize_read_merge_request!, only: [:code, :review]
+
+      def issue
+        render_events(cycle_analytics[:issue].events)
+      end
+    
+      def plan
+        render_events(cycle_analytics[:plan].events)
+      end
+    
+      def code
+        render_events(cycle_analytics[:code].events)
+      end
+    
+      def test
+        options(events_params)[:branch] = events_params[:branch_name]
+    
+        render_events(cycle_analytics[:test].events)
+      end
+    
+      def review
+        render_events(cycle_analytics[:review].events)
+      end
+    
+      def staging
+        render_events(cycle_analytics[:staging].events)
+      end
+    
+      def production
+        render_events(cycle_analytics[:production].events)
+      end
+    
+      private
+
+      def render_events(events)
+        respond_to do |format|
+          format.html
+          format.json { render json: { events: events } }
+        end
+      end
+    
+      def cycle_analytics
+        @cycle_analytics ||= ::CycleAnalytics.new(project, options(events_params))
+      end
+    
+      def events_params
+        return {} unless params[:events].present?
+    
+        params[:events].permit(:start_date, :branch_name)
+      end
+    end
+  end
+end
diff --git a/app/controllers/projects/cycle_analytics_controller.rb b/app/controllers/projects/cycle_analytics_controller.rb
index 16a7b1fc6e2..88ac3ad046b 100644
--- a/app/controllers/projects/cycle_analytics_controller.rb
+++ b/app/controllers/projects/cycle_analytics_controller.rb
@@ -1,11 +1,14 @@
 class Projects::CycleAnalyticsController < Projects::ApplicationController
   include ActionView::Helpers::DateHelper
   include ActionView::Helpers::TextHelper
+  include CycleAnalyticsParams
 
   before_action :authorize_read_cycle_analytics!
 
   def show
-    @cycle_analytics = CycleAnalytics.new(@project, from: parse_start_date)
+    @cycle_analytics = ::CycleAnalytics.new(@project, options(cycle_analytics_params))
+
+    @cycle_analytics_no_data = @cycle_analytics.no_stats?
 
     respond_to do |format|
       format.html
@@ -15,53 +18,17 @@ class Projects::CycleAnalyticsController < Projects::ApplicationController
 
   private
 
-  def parse_start_date
-    case cycle_analytics_params[:start_date]
-    when '30' then 30.days.ago
-    when '90' then 90.days.ago
-    else 90.days.ago
-    end
-  end
-
   def cycle_analytics_params
     return {} unless params[:cycle_analytics].present?
 
-    { start_date: params[:cycle_analytics][:start_date] }
+    params[:cycle_analytics].permit(:start_date)
   end
 
   def cycle_analytics_json
-    cycle_analytics_view_data = [[:issue, "Issue", "Time before an issue gets scheduled"],
-                                 [:plan, "Plan", "Time before an issue starts implementation"],
-                                 [:code, "Code", "Time until first merge request"],
-                                 [:test, "Test", "Total test time for all commits/merges"],
-                                 [:review, "Review", "Time between merge request creation and merge/close"],
-                                 [:staging, "Staging", "From merge request merge until deploy to production"],
-                                 [:production, "Production", "From issue creation until deploy to production"]]
-
-    stats = cycle_analytics_view_data.reduce([]) do |stats, (stage_method, stage_text, stage_description)|
-      value = @cycle_analytics.send(stage_method).presence
-
-      stats << {
-        title: stage_text,
-        description: stage_description,
-        value: value && !value.zero? ? distance_of_time_in_words(value) : nil
-      }
-      stats
-    end
-
-    issues = @cycle_analytics.summary.new_issues
-    commits = @cycle_analytics.summary.commits
-    deploys = @cycle_analytics.summary.deploys
-
-    summary = [
-      { title: "New Issue".pluralize(issues), value: issues },
-      { title: "Commit".pluralize(commits), value: commits },
-      { title: "Deploy".pluralize(deploys), value: deploys }
-    ]
-
     {
-      summary: summary,
-      stats: stats
+      summary: @cycle_analytics.summary,
+      stats: @cycle_analytics.stats,
+      permissions: @cycle_analytics.permissions(user: current_user)
     }
   end
 end
diff --git a/app/controllers/projects/deploy_keys_controller.rb b/app/controllers/projects/deploy_keys_controller.rb
index 529e0aa2d33..d0c44e297e3 100644
--- a/app/controllers/projects/deploy_keys_controller.rb
+++ b/app/controllers/projects/deploy_keys_controller.rb
@@ -1,4 +1,5 @@
 class Projects::DeployKeysController < Projects::ApplicationController
+  include RepositorySettingsRedirect
   respond_to :html
 
   # Authorize
@@ -7,52 +8,39 @@ class Projects::DeployKeysController < Projects::ApplicationController
   layout "project_settings"
 
   def index
-    @key = DeployKey.new
-    set_index_vars
+    redirect_to_repository_settings(@project)
   end
 
   def new
-    redirect_to namespace_project_deploy_keys_path(@project.namespace, @project)
+    redirect_to_repository_settings(@project)
   end
 
   def create
-    @key = DeployKey.new(deploy_key_params)
-    set_index_vars
+    @key = DeployKey.new(deploy_key_params.merge(user: current_user))
 
-    if @key.valid? && @project.deploy_keys << @key
-      redirect_to namespace_project_deploy_keys_path(@project.namespace, @project)
-    else
-      render "index"
+    unless @key.valid? && @project.deploy_keys << @key
+      flash[:alert] = @key.errors.full_messages.join(', ').html_safe      
     end
+    redirect_to_repository_settings(@project)
   end
 
   def enable
     Projects::EnableDeployKeyService.new(@project, current_user, params).execute
 
-    redirect_to namespace_project_deploy_keys_path(@project.namespace, @project)
+    redirect_to_repository_settings(@project)
   end
 
   def disable
-    @project.deploy_keys_projects.find_by(deploy_key_id: params[:id]).destroy
+    deploy_key_project = @project.deploy_keys_projects.find_by(deploy_key_id: params[:id])
+    return render_404 unless deploy_key_project
 
-    redirect_back_or_default(default: { action: 'index' })
+    deploy_key_project.destroy!
+    redirect_to_repository_settings(@project)
   end
 
   protected
 
-  def set_index_vars
-    @enabled_keys           ||= @project.deploy_keys
-
-    @available_keys         ||= current_user.accessible_deploy_keys - @enabled_keys
-    @available_project_keys ||= current_user.project_deploy_keys - @enabled_keys
-    @available_public_keys  ||= DeployKey.are_public - @enabled_keys
-
-    # Public keys that are already used by another accessible project are already
-    # in @available_project_keys.
-    @available_public_keys -= @available_project_keys
-  end
-
   def deploy_key_params
-    params.require(:deploy_key).permit(:key, :title)
+    params.require(:deploy_key).permit(:key, :title, :can_push)
   end
 end
diff --git a/app/controllers/projects/discussions_controller.rb b/app/controllers/projects/discussions_controller.rb
index d174e1145a7..1349b015a63 100644
--- a/app/controllers/projects/discussions_controller.rb
+++ b/app/controllers/projects/discussions_controller.rb
@@ -5,9 +5,7 @@ class Projects::DiscussionsController < Projects::ApplicationController
   before_action :authorize_resolve_discussion!
 
   def resolve
-    discussion.resolve!(current_user)
-
-    MergeRequests::ResolvedDiscussionNotificationService.new(project, current_user).execute(merge_request)
+    Discussions::ResolveService.new(project, current_user, merge_request: merge_request).execute(discussion)
 
     render json: {
       resolved_by: discussion.resolved_by.try(:name),
@@ -26,7 +24,7 @@ class Projects::DiscussionsController < Projects::ApplicationController
   private
 
   def merge_request
-    @merge_request ||= @project.merge_requests.find_by!(iid: params[:merge_request_id])
+    @merge_request ||= MergeRequestsFinder.new(current_user, project_id: @project.id).find_by!(iid: params[:merge_request_id])
   end
 
   def discussion
diff --git a/app/controllers/projects/environments_controller.rb b/app/controllers/projects/environments_controller.rb
index ea22b2dcc15..fa37963dfd4 100644
--- a/app/controllers/projects/environments_controller.rb
+++ b/app/controllers/projects/environments_controller.rb
@@ -4,17 +4,47 @@ class Projects::EnvironmentsController < Projects::ApplicationController
   before_action :authorize_create_environment!, only: [:new, :create]
   before_action :authorize_create_deployment!, only: [:stop]
   before_action :authorize_update_environment!, only: [:edit, :update]
-  before_action :environment, only: [:show, :edit, :update, :stop]
+  before_action :authorize_admin_environment!, only: [:terminal, :terminal_websocket_authorize]
+  before_action :environment, only: [:show, :edit, :update, :stop, :terminal, :terminal_websocket_authorize, :metrics]
+  before_action :verify_api_request!, only: :terminal_websocket_authorize
 
   def index
-    @scope = params[:scope]
-    @all_environments = project.environments
-    @environments =
-      if @scope == 'stopped'
-        @all_environments.stopped
-      else
-        @all_environments.available
+    @environments = project.environments
+      .with_state(params[:scope] || :available)
+
+    respond_to do |format|
+      format.html
+      format.json do
+        render json: {
+          environments: EnvironmentSerializer
+            .new(project: @project, user: @current_user)
+            .with_pagination(request, response)
+            .within_folders
+            .represent(@environments),
+          available_count: project.environments.available.count,
+          stopped_count: project.environments.stopped.count
+        }
+      end
+    end
+  end
+
+  def folder
+    folder_environments = project.environments.where(environment_type: params[:id])
+    @environments = folder_environments.with_state(params[:scope] || :available)
+
+    respond_to do |format|
+      format.html
+      format.json do
+        render json: {
+          environments: EnvironmentSerializer
+            .new(project: @project, user: @current_user)
+            .with_pagination(request, response)
+            .represent(@environments),
+          available_count: folder_environments.available.count,
+          stopped_count: folder_environments.stopped.count
+        }
       end
+    end
   end
 
   def show
@@ -47,14 +77,57 @@ class Projects::EnvironmentsController < Projects::ApplicationController
   end
 
   def stop
-    return render_404 unless @environment.stoppable?
+    return render_404 unless @environment.available?
+
+    stop_action = @environment.stop_with_action!(current_user)
+
+    if stop_action
+      redirect_to polymorphic_path([project.namespace.becomes(Namespace), project, stop_action])
+    else
+      redirect_to namespace_project_environment_path(project.namespace, project, @environment)
+    end
+  end
+
+  def terminal
+    # Currently, this acts as a hint to load the terminal details into the cache
+    # if they aren't there already. In the future, users will need these details
+    # to choose between terminals to connect to.
+    @terminals = environment.terminals
+  end
+
+  # GET .../terminal.ws : implemented in gitlab-workhorse
+  def terminal_websocket_authorize
+    # Just return the first terminal for now. If the list is in the process of
+    # being looked up, this may result in a 404 response, so the frontend
+    # should retry those errors
+    terminal = environment.terminals.try(:first)
+    if terminal
+      set_workhorse_internal_api_content_type
+      render json: Gitlab::Workhorse.terminal_websocket(terminal)
+    else
+      render text: 'Not found', status: 404
+    end
+  end
+
+  def metrics
+    # Currently, this acts as a hint to load the metrics details into the cache
+    # if they aren't there already
+    @metrics = environment.metrics || {}
 
-    new_action = @environment.stop!(current_user)
-    redirect_to polymorphic_path([project.namespace.becomes(Namespace), project, new_action])
+    respond_to do |format|
+      format.html
+      format.json do
+        render json: @metrics, status: @metrics.any? ? :ok : :no_content
+      end
+    end
   end
 
   private
 
+  def verify_api_request!
+    Gitlab::Workhorse.verify_api_request!(request.headers)
+  end
+
   def environment_params
     params.require(:environment).permit(:name, :external_url)
   end
diff --git a/app/controllers/projects/forks_controller.rb b/app/controllers/projects/forks_controller.rb
index ade01c706a7..ba46e2528e6 100644
--- a/app/controllers/projects/forks_controller.rb
+++ b/app/controllers/projects/forks_controller.rb
@@ -4,6 +4,7 @@ class Projects::ForksController < Projects::ApplicationController
   # Authorize
   before_action :require_non_empty_project
   before_action :authorize_download_code!
+  before_action :authenticate_user!, only: [:new, :create]
 
   def index
     base_query = project.forks.includes(:creator)
diff --git a/app/controllers/projects/git_http_client_controller.rb b/app/controllers/projects/git_http_client_controller.rb
index 383e184d796..9a1bf037a95 100644
--- a/app/controllers/projects/git_http_client_controller.rb
+++ b/app/controllers/projects/git_http_client_controller.rb
@@ -18,13 +18,17 @@ class Projects::GitHttpClientController < Projects::ApplicationController
 
   private
 
+  def download_request?
+    raise NotImplementedError
+  end
+
+  def upload_request?
+    raise NotImplementedError
+  end
+
   def authenticate_user
     @authentication_result = Gitlab::Auth::Result.new
 
-    if project && project.public? && download_request?
-      return # Allow access
-    end
-
     if allow_basic_auth? && basic_auth_provided?
       login, password = user_name_and_password(request)
 
@@ -41,6 +45,10 @@ class Projects::GitHttpClientController < Projects::ApplicationController
         send_final_spnego_response
         return # Allow access
       end
+    elsif project && download_request? && Guest.can?(:download_code, project)
+      @authentication_result = Gitlab::Auth::Result.new(nil, project, :none, [:download_code])
+
+      return # Allow access
     end
 
     send_challenges
@@ -68,11 +76,12 @@ class Projects::GitHttpClientController < Projects::ApplicationController
     return @project if defined?(@project)
 
     project_id, _ = project_id_with_suffix
-    if project_id.blank?
-      @project = nil
-    else
-      @project = Project.find_with_namespace("#{params[:namespace_id]}/#{project_id}")
-    end
+    @project =
+      if project_id.blank?
+        nil
+      else
+        Project.find_by_full_path("#{params[:namespace_id]}/#{project_id}")
+      end
   end
 
   # This method returns two values so that we can parse
@@ -101,12 +110,14 @@ class Projects::GitHttpClientController < Projects::ApplicationController
   end
 
   def repository
+    wiki? ? project.wiki.repository : project.repository
+  end
+
+  def wiki?
+    return @wiki if defined?(@wiki)
+
     _, suffix = project_id_with_suffix
-    if suffix == '.wiki.git'
-      project.wiki.repository
-    else
-      project.repository
-    end
+    @wiki = suffix == '.wiki.git'
   end
 
   def render_not_found
@@ -130,10 +141,6 @@ class Projects::GitHttpClientController < Projects::ApplicationController
     authentication_result.ci?(project)
   end
 
-  def lfs_deploy_token?
-    authentication_result.lfs_deploy_token?(project)
-  end
-
   def authentication_has_download_access?
     has_authentication_ability?(:download_code) || has_authentication_ability?(:build_download_code)
   end
@@ -149,8 +156,4 @@ class Projects::GitHttpClientController < Projects::ApplicationController
   def authentication_project
     authentication_result.project
   end
-
-  def verify_workhorse_api!
-    Gitlab::Workhorse.verify_api_request!(request.headers)
-  end
 end
diff --git a/app/controllers/projects/git_http_controller.rb b/app/controllers/projects/git_http_controller.rb
index 662d38b10a5..278098fcc58 100644
--- a/app/controllers/projects/git_http_controller.rb
+++ b/app/controllers/projects/git_http_controller.rb
@@ -1,7 +1,5 @@
-# This file should be identical in GitLab Community Edition and Enterprise Edition
-
 class Projects::GitHttpController < Projects::GitHttpClientController
-  before_action :verify_workhorse_api!
+  include WorkhorseRequest
 
   # GET /foo/bar.git/info/refs?service=git-upload-pack (git pull)
   # GET /foo/bar.git/info/refs?service=git-receive-pack (git push)
@@ -67,26 +65,26 @@ class Projects::GitHttpController < Projects::GitHttpClientController
   end
 
   def render_denied
-    if user && user.can?(:read_project, project)
-      render plain: 'Access denied', status: :forbidden
+    if user && can?(user, :read_project, project)
+      render plain: access_denied_message, status: :forbidden
     else
       # Do not leak information about project existence
       render_not_found
     end
   end
 
+  def access_denied_message
+    'Access denied'
+  end
+
   def upload_pack_allowed?
     return false unless Gitlab.config.gitlab_shell.upload_pack
 
-    if user
-      access_check.allowed?
-    else
-      ci? || project.public?
-    end
+    access_check.allowed? || ci?
   end
 
   def access
-    @access ||= Gitlab::GitAccess.new(user, project, 'http', authentication_abilities: authentication_abilities)
+    @access ||= access_klass.new(user, project, 'http', authentication_abilities: authentication_abilities)
   end
 
   def access_check
@@ -104,4 +102,8 @@ class Projects::GitHttpController < Projects::GitHttpClientController
 
     access_check.allowed?
   end
+
+  def access_klass
+    @access_klass ||= wiki? ? Gitlab::GitAccessWiki : Gitlab::GitAccess
+  end
 end
diff --git a/app/controllers/projects/graphs_controller.rb b/app/controllers/projects/graphs_controller.rb
index 923e7340e69..43fc0c39801 100644
--- a/app/controllers/projects/graphs_controller.rb
+++ b/app/controllers/projects/graphs_controller.rb
@@ -17,6 +17,25 @@ class Projects::GraphsController < Projects::ApplicationController
   end
 
   def commits
+    redirect_to action: 'charts'
+  end
+
+  def languages
+    redirect_to action: 'charts'
+  end
+
+  def charts
+    get_commits
+    get_languages
+  end
+
+  def ci
+    redirect_to charts_namespace_project_pipelines_path(@project.namespace, @project)
+  end
+
+  private
+
+  def get_commits
     @commits = @project.repository.commits(@ref, limit: 2000, skip_merges: true)
     @commits_graph = Gitlab::Graphs::Commits.new(@commits)
     @commits_per_week_days = @commits_graph.commits_per_week_days
@@ -24,15 +43,7 @@ class Projects::GraphsController < Projects::ApplicationController
     @commits_per_month = @commits_graph.commits_per_month
   end
 
-  def ci
-    @charts = {}
-    @charts[:week] = Ci::Charts::WeekChart.new(project)
-    @charts[:month] = Ci::Charts::MonthChart.new(project)
-    @charts[:year] = Ci::Charts::YearChart.new(project)
-    @charts[:build_times] = Ci::Charts::BuildTime.new(project)
-  end
-
-  def languages
+  def get_languages
     @languages = Linguist::Repository.new(@repository.rugged, @repository.rugged.head.target_id).languages
     total = @languages.map(&:last).sum
 
@@ -52,8 +63,6 @@ class Projects::GraphsController < Projects::ApplicationController
     end
   end
 
-  private
-
   def fetch_graph
     @commits = @project.repository.commits(@ref, limit: 6000, skip_merges: true)
     @log = []
diff --git a/app/controllers/projects/group_links_controller.rb b/app/controllers/projects/group_links_controller.rb
index 9eaf26a0dbf..66b7bdbd988 100644
--- a/app/controllers/projects/group_links_controller.rb
+++ b/app/controllers/projects/group_links_controller.rb
@@ -4,10 +4,7 @@ class Projects::GroupLinksController < Projects::ApplicationController
   before_action :authorize_admin_project_member!, only: [:update]
 
   def index
-    @group_links = project.project_group_links.all
-
-    @skip_groups = @group_links.pluck(:group_id)
-    @skip_groups << project.namespace_id unless project.personal?
+    redirect_to namespace_project_settings_members_path
   end
 
   def create
@@ -25,7 +22,7 @@ class Projects::GroupLinksController < Projects::ApplicationController
       flash[:alert] = 'Please select a group.'
     end
 
-    redirect_to namespace_project_group_links_path(project.namespace, project)
+    redirect_to namespace_project_settings_members_path(project.namespace, project)
   end
 
   def update
@@ -39,7 +36,7 @@ class Projects::GroupLinksController < Projects::ApplicationController
 
     respond_to do |format|
       format.html do
-        redirect_to namespace_project_group_links_path(project.namespace, project)
+        redirect_to namespace_project_settings_members_path(project.namespace, project)
       end
       format.js { head :ok }
     end
diff --git a/app/controllers/projects/hooks_controller.rb b/app/controllers/projects/hooks_controller.rb
index 0ae8ff98009..b668a9331e7 100644
--- a/app/controllers/projects/hooks_controller.rb
+++ b/app/controllers/projects/hooks_controller.rb
@@ -6,21 +6,15 @@ class Projects::HooksController < Projects::ApplicationController
 
   layout "project_settings"
 
-  def index
-    @hooks = @project.hooks
-    @hook = ProjectHook.new
-  end
-
   def create
     @hook = @project.hooks.new(hook_params)
     @hook.save
 
-    if @hook.valid?
-      redirect_to namespace_project_hooks_path(@project.namespace, @project)
-    else
+    unless @hook.valid?      
       @hooks = @project.hooks.select(&:persisted?)
-      render :index
+      flash[:alert] = @hook.errors.full_messages.join.html_safe
     end
+    redirect_to namespace_project_settings_integrations_path(@project.namespace, @project)
   end
 
   def test
@@ -44,7 +38,7 @@ class Projects::HooksController < Projects::ApplicationController
   def destroy
     hook.destroy
 
-    redirect_to namespace_project_hooks_path(@project.namespace, @project)
+    redirect_to namespace_project_settings_integrations_path(@project.namespace, @project)
   end
 
   private
diff --git a/app/controllers/projects/issues_controller.rb b/app/controllers/projects/issues_controller.rb
index 3f1a1d1c511..d984e6d3918 100644
--- a/app/controllers/projects/issues_controller.rb
+++ b/app/controllers/projects/issues_controller.rb
@@ -6,6 +6,8 @@ class Projects::IssuesController < Projects::ApplicationController
   include IssuableCollections
   include SpammableActions
 
+  prepend_before_action :authenticate_user!, only: [:new]
+
   before_action :redirect_to_external_issue_tracker, only: [:index, :new]
   before_action :module_enabled
   before_action :issue, only: [:edit, :update, :show, :referenced_merge_requests,
@@ -23,13 +25,31 @@ class Projects::IssuesController < Projects::ApplicationController
   respond_to :html
 
   def index
-    @issues = issues_collection
-    @issues = @issues.page(params[:page])
+    @collection_type    = "Issue"
+    @issues             = issues_collection
+    @issues             = @issues.page(params[:page])
+    @issuable_meta_data = issuable_meta_data(@issues, @collection_type)
+
+    if @issues.out_of_range? && @issues.total_pages != 0
+      return redirect_to url_for(params.merge(page: @issues.total_pages))
+    end
 
     if params[:label_name].present?
       @labels = LabelsFinder.new(current_user, project_id: @project.id, title: params[:label_name]).execute
     end
 
+    @users = []
+
+    if params[:assignee_id].present?
+      assignee = User.find_by_id(params[:assignee_id])
+      @users.push(assignee) if assignee
+    end
+
+    if params[:author_id].present?
+      author = User.find_by_id(params[:author_id])
+      @users.push(author) if author
+    end
+
     respond_to do |format|
       format.html
       format.atom { render layout: false }
@@ -46,8 +66,16 @@ class Projects::IssuesController < Projects::ApplicationController
     params[:issue] ||= ActionController::Parameters.new(
       assignee_id: ""
     )
+    build_params = issue_params.merge(
+      merge_request_to_resolve_discussions_of: params[:merge_request_to_resolve_discussions_of],
+      discussion_to_resolve: params[:discussion_to_resolve]
+    )
+    service = Issues::BuildService.new(project, current_user, build_params)
+
+    @issue = @noteable = service.execute
+    @merge_request_to_resolve_discussions_of = service.merge_request_to_resolve_discussions_of
+    @discussion_to_resolve = service.discussions_to_resolve.first if params[:discussion_to_resolve]
 
-    @issue = @noteable = @project.issues.new(issue_params)
     respond_with(@issue)
   end
 
@@ -69,21 +97,31 @@ class Projects::IssuesController < Projects::ApplicationController
     respond_to do |format|
       format.html
       format.json do
-        render json: @issue.to_json(include: [:milestone, :labels])
+        render json: IssueSerializer.new.represent(@issue)
       end
     end
   end
 
   def create
-    @issue = Issues::CreateService.new(project, current_user, issue_params.merge(request: request)).execute
+    create_params = issue_params.merge(spammable_params).merge(
+      merge_request_to_resolve_discussions_of: params[:merge_request_to_resolve_discussions_of],
+      discussion_to_resolve: params[:discussion_to_resolve]
+    )
+
+    service = Issues::CreateService.new(project, current_user, create_params)
+    @issue = service.execute
+
+    if service.discussions_to_resolve.count(&:resolved?) > 0
+      flash[:notice] = if service.discussion_to_resolve_id
+                         "Resolved 1 discussion."
+                       else
+                         "Resolved all discussions."
+                       end
+    end
 
     respond_to do |format|
       format.html do
-        if @issue.valid?
-          redirect_to issue_path(@issue)
-        else
-          render :new
-        end
+        recaptcha_check_with_fallback { render :new }
       end
       format.js do
         @link = @issue.attachment.url.to_js
@@ -92,7 +130,9 @@ class Projects::IssuesController < Projects::ApplicationController
   end
 
   def update
-    @issue = Issues::UpdateService.new(project, current_user, issue_params).execute(issue)
+    update_params = issue_params.merge(spammable_params)
+
+    @issue = Issues::UpdateService.new(project, current_user, update_params).execute(issue)
 
     if params[:move_to_project_id].to_i > 0
       new_project = Project.find(params[:move_to_project_id])
@@ -104,21 +144,23 @@ class Projects::IssuesController < Projects::ApplicationController
 
     respond_to do |format|
       format.html do
-        if @issue.valid?
-          redirect_to issue_path(@issue)
-        else
-          render :edit
-        end
+        recaptcha_check_with_fallback { render :edit }
       end
 
       format.json do
-        render json: @issue.to_json(include: { milestone: {}, assignee: { methods: :avatar_url }, labels: { methods: :text_color } }, methods: [:task_status, :task_status_short])
+        if @issue.valid?
+          render json: @issue.to_json(methods: [:task_status, :task_status_short],
+                                      include: { milestone: {},
+                                                 assignee: { only: [:name, :username], methods: [:avatar_url] },
+                                                 labels: { methods: :text_color } })
+        else
+          render json: { errors: @issue.errors.full_messages }, status: :unprocessable_entity
+        end
       end
     end
 
   rescue ActiveRecord::StaleObjectError
-    @conflict = true
-    render :edit
+    render_conflict_response
   end
 
   def referenced_merge_requests
@@ -218,4 +260,13 @@ class Projects::IssuesController < Projects::ApplicationController
       :milestone_id, :due_date, :state_event, :task_num, :lock_version, label_ids: []
     )
   end
+
+  def authenticate_user!
+    return if current_user
+
+    notice = "Please sign in to create the new issue."
+
+    store_location_for :user, request.fullpath
+    redirect_to new_user_session_path, notice: notice
+  end
 end
diff --git a/app/controllers/projects/labels_controller.rb b/app/controllers/projects/labels_controller.rb
index 42fd09e9b7e..2f55ba4e700 100644
--- a/app/controllers/projects/labels_controller.rb
+++ b/app/controllers/projects/labels_controller.rb
@@ -2,12 +2,13 @@ class Projects::LabelsController < Projects::ApplicationController
   include ToggleSubscriptionAction
 
   before_action :module_enabled
-  before_action :label, only: [:edit, :update, :destroy]
-  before_action :find_labels, only: [:index, :set_priorities, :remove_priority]
+  before_action :label, only: [:edit, :update, :destroy, :promote]
+  before_action :find_labels, only: [:index, :set_priorities, :remove_priority, :toggle_subscription]
   before_action :authorize_read_label!
   before_action :authorize_admin_labels!, only: [:new, :create, :edit, :update,
                                                  :generate, :destroy, :remove_priority,
                                                  :set_priorities]
+  before_action :authorize_admin_group!, only: [:promote]
 
   respond_to :js, :html
 
@@ -28,7 +29,7 @@ class Projects::LabelsController < Projects::ApplicationController
   end
 
   def create
-    @label = @project.labels.create(label_params)
+    @label = Labels::CreateService.new(label_params).execute(project: @project)
 
     if @label.valid?
       respond_to do |format|
@@ -47,7 +48,9 @@ class Projects::LabelsController < Projects::ApplicationController
   end
 
   def update
-    if @label.update_attributes(label_params)
+    @label = Labels::UpdateService.new(label_params).execute(@label)
+
+    if @label.valid?
       redirect_to namespace_project_labels_path(@project.namespace, @project)
     else
       render :edit
@@ -71,13 +74,7 @@ class Projects::LabelsController < Projects::ApplicationController
     @label.destroy
     @labels = find_labels
 
-    respond_to do |format|
-      format.html do
-        redirect_to(namespace_project_labels_path(@project.namespace, @project),
-                    notice: 'Label was removed')
-      end
-      format.js
-    end
+    redirect_to(namespace_project_labels_path(@project.namespace, @project), notice: 'Label was removed')
   end
 
   def remove_priority
@@ -108,6 +105,32 @@ class Projects::LabelsController < Projects::ApplicationController
     end
   end
 
+  def promote
+    promote_service = Labels::PromoteService.new(@project, @current_user)
+
+    begin
+      return render_404 unless promote_service.execute(@label)
+      respond_to do |format|
+        format.html do
+          redirect_to(namespace_project_labels_path(@project.namespace, @project),
+                      notice: 'Label was promoted to a Group Label')
+        end
+        format.js
+      end
+    rescue ActiveRecord::RecordInvalid => e
+      Gitlab::AppLogger.error "Failed to promote label \"#{@label.title}\" to group label"
+      Gitlab::AppLogger.error e
+
+      respond_to do |format|
+        format.html do
+          redirect_to(namespace_project_labels_path(@project.namespace, @project),
+                      notice: 'Failed to promote label due to internal error. Please contact administrators.')
+        end
+        format.js
+      end
+    end
+  end
+
   protected
 
   def module_enabled
@@ -123,7 +146,10 @@ class Projects::LabelsController < Projects::ApplicationController
   def label
     @label ||= @project.labels.find(params[:id])
   end
-  alias_method :subscribable_resource, :label
+
+  def subscribable_resource
+    @available_labels.find(params[:id])
+  end
 
   def find_labels
     @available_labels ||= LabelsFinder.new(current_user, project_id: @project.id).execute
@@ -132,4 +158,8 @@ class Projects::LabelsController < Projects::ApplicationController
   def authorize_admin_labels!
     return render_404 unless can?(current_user, :admin_label, @project)
   end
+
+  def authorize_admin_group!
+    return render_404 unless can?(current_user, :admin_group, @project.group)
+  end
 end
diff --git a/app/controllers/projects/lfs_api_controller.rb b/app/controllers/projects/lfs_api_controller.rb
index ece49dcd922..8a5a645ed0e 100644
--- a/app/controllers/projects/lfs_api_controller.rb
+++ b/app/controllers/projects/lfs_api_controller.rb
@@ -1,8 +1,7 @@
 class Projects::LfsApiController < Projects::GitHttpClientController
-  include LfsHelper
+  include LfsRequest
 
-  before_action :require_lfs_enabled!
-  before_action :lfs_check_access!, except: [:deprecated]
+  skip_before_action :lfs_check_access!, only: [:deprecated]
 
   def batch
     unless objects.present?
@@ -31,8 +30,12 @@ class Projects::LfsApiController < Projects::GitHttpClientController
 
   private
 
-  def objects
-    @objects ||= (params[:objects] || []).to_a
+  def download_request?
+    params[:operation] == 'download'
+  end
+
+  def upload_request?
+    params[:operation] == 'upload'
   end
 
   def existing_oids
@@ -45,6 +48,10 @@ class Projects::LfsApiController < Projects::GitHttpClientController
     objects.each do |object|
       if existing_oids.include?(object[:oid])
         object[:actions] = download_actions(object)
+
+        if Guest.can?(:download_code, project)
+          object[:authenticated] = true
+        end
       else
         object[:error] = {
           code: 404,
@@ -83,12 +90,4 @@ class Projects::LfsApiController < Projects::GitHttpClientController
       }
     }
   end
-
-  def download_request?
-    params[:operation] == 'download'
-  end
-
-  def upload_request?
-    params[:operation] == 'upload'
-  end
 end
diff --git a/app/controllers/projects/lfs_storage_controller.rb b/app/controllers/projects/lfs_storage_controller.rb
index 9005b104e90..32759672b6c 100644
--- a/app/controllers/projects/lfs_storage_controller.rb
+++ b/app/controllers/projects/lfs_storage_controller.rb
@@ -1,9 +1,8 @@
 class Projects::LfsStorageController < Projects::GitHttpClientController
-  include LfsHelper
+  include LfsRequest
+  include WorkhorseRequest
 
-  before_action :require_lfs_enabled!
-  before_action :lfs_check_access!
-  before_action :verify_workhorse_api!, only: [:upload_authorize]
+  skip_before_action :verify_workhorse_api!, only: [:download, :upload_finalize]
 
   def download
     lfs_object = LfsObject.find_by_oid(oid)
diff --git a/app/controllers/projects/mattermosts_controller.rb b/app/controllers/projects/mattermosts_controller.rb
new file mode 100644
index 00000000000..38f7e6eb5e9
--- /dev/null
+++ b/app/controllers/projects/mattermosts_controller.rb
@@ -0,0 +1,43 @@
+class Projects::MattermostsController < Projects::ApplicationController
+  include TriggersHelper
+  include ActionView::Helpers::AssetUrlHelper
+
+  layout 'project_settings'
+
+  before_action :authorize_admin_project!
+  before_action :service
+  before_action :teams, only: [:new]
+
+  def new
+  end
+
+  def create
+    result, message = @service.configure(current_user, configure_params)
+
+    if result
+      flash[:notice] = 'This service is now configured'
+      redirect_to edit_namespace_project_service_path(
+        @project.namespace, @project, service)
+    else
+      flash[:alert] = message || 'Failed to configure service'
+      redirect_to new_namespace_project_mattermost_path(
+        @project.namespace, @project)
+    end
+  end
+
+  private
+
+  def configure_params
+    params.require(:mattermost).permit(:trigger, :team_id).merge(
+      url: service_trigger_url(@service),
+      icon_url: asset_url('slash-command-logo.png'))
+  end
+
+  def teams
+    @teams, @teams_error_message = @service.list_teams(current_user)
+  end
+
+  def service
+    @service ||= @project.find_or_initialize_service('mattermost_slash_commands')
+  end
+end
diff --git a/app/controllers/projects/merge_requests_controller.rb b/app/controllers/projects/merge_requests_controller.rb
index 9f104d903cc..9621b30b251 100644..100755
--- a/app/controllers/projects/merge_requests_controller.rb
+++ b/app/controllers/projects/merge_requests_controller.rb
@@ -9,12 +9,12 @@ class Projects::MergeRequestsController < Projects::ApplicationController
 
   before_action :module_enabled
   before_action :merge_request, only: [
-    :edit, :update, :show, :diffs, :commits, :conflicts, :conflict_for_path, :builds, :pipelines, :merge, :merge_check,
-    :ci_status, :ci_environments_status, :toggle_subscription, :cancel_merge_when_build_succeeds, :remove_wip, :resolve_conflicts, :assign_related_issues
+    :edit, :update, :show, :diffs, :commits, :conflicts, :conflict_for_path, :pipelines, :merge, :merge_check,
+    :ci_status, :pipeline_status, :ci_environments_status, :toggle_subscription, :cancel_merge_when_pipeline_succeeds, :remove_wip, :resolve_conflicts, :assign_related_issues
   ]
-  before_action :validates_merge_request, only: [:show, :diffs, :commits, :builds, :pipelines]
+  before_action :validates_merge_request, only: [:show, :diffs, :commits, :pipelines]
   before_action :define_show_vars, only: [:show, :diffs, :commits, :conflicts, :conflict_for_path, :builds, :pipelines]
-  before_action :define_widget_vars, only: [:merge, :cancel_merge_when_build_succeeds, :merge_check]
+  before_action :define_widget_vars, only: [:merge, :cancel_merge_when_pipeline_succeeds, :merge_check]
   before_action :define_commit_vars, only: [:diffs]
   before_action :define_diff_comment_vars, only: [:diffs]
   before_action :ensure_ref_fetched, only: [:show, :diffs, :commits, :builds, :conflicts, :conflict_for_path, :pipelines]
@@ -36,15 +36,31 @@ class Projects::MergeRequestsController < Projects::ApplicationController
   before_action :authorize_can_resolve_conflicts!, only: [:conflicts, :conflict_for_path, :resolve_conflicts]
 
   def index
-    @merge_requests = merge_requests_collection
-    @merge_requests = @merge_requests.page(params[:page])
-    @merge_requests = @merge_requests.preload(:target_project)
+    @collection_type    = "MergeRequest"
+    @merge_requests     = merge_requests_collection
+    @merge_requests     = @merge_requests.page(params[:page])
+    @issuable_meta_data = issuable_meta_data(@merge_requests, @collection_type)
+
+    if @merge_requests.out_of_range? && @merge_requests.total_pages != 0
+      return redirect_to url_for(params.merge(page: @merge_requests.total_pages))
+    end
 
     if params[:label_name].present?
       labels_params = { project_id: @project.id, title: params[:label_name] }
       @labels = LabelsFinder.new(current_user, labels_params).execute
     end
 
+    @users = []
+    if params[:assignee_id].present?
+      assignee = User.find_by_id(params[:assignee_id])
+      @users.push(assignee) if assignee
+    end
+
+    if params[:author_id].present?
+      author = User.find_by_id(params[:author_id])
+      @users.push(author) if author
+    end
+
     respond_to do |format|
       format.html
       format.json do
@@ -61,7 +77,7 @@ class Projects::MergeRequestsController < Projects::ApplicationController
       format.html { define_discussion_vars }
 
       format.json do
-        render json: @merge_request
+        render json: MergeRequestSerializer.new.represent(@merge_request)
       end
 
       format.patch  do
@@ -81,28 +97,31 @@ class Projects::MergeRequestsController < Projects::ApplicationController
   def diffs
     apply_diff_view_cookie!
 
-    @merge_request_diff =
-      if params[:diff_id]
-        @merge_request.merge_request_diffs.find(params[:diff_id])
-      else
-        @merge_request.merge_request_diff
-      end
-
-    @merge_request_diffs = @merge_request.merge_request_diffs.select_without_diff
-    @comparable_diffs = @merge_request_diffs.select { |diff| diff.id < @merge_request_diff.id }
-
-    if params[:start_sha].present?
-      @start_sha = params[:start_sha]
-      @start_version = @comparable_diffs.find { |diff| diff.head_commit_sha == @start_sha }
-
-      unless @start_version
-        render_404
-      end
-    end
-
     respond_to do |format|
       format.html { define_discussion_vars }
       format.json do
+        @merge_request_diff =
+          if params[:diff_id]
+            @merge_request.merge_request_diffs.viewable.find(params[:diff_id])
+          else
+            @merge_request.merge_request_diff
+          end
+
+        @merge_request_diffs = @merge_request.merge_request_diffs.viewable.select_without_diff
+        @comparable_diffs = @merge_request_diffs.select { |diff| diff.id < @merge_request_diff.id }
+
+        if params[:start_sha].present?
+          @start_sha = params[:start_sha]
+          @start_version = @comparable_diffs.find { |diff| diff.head_commit_sha == @start_sha }
+
+          unless @start_version
+            @start_sha = @merge_request_diff.head_commit_sha
+            @start_version = @merge_request_diff
+          end
+        end
+
+        @environment = @merge_request.environments_for(current_user).last
+
         if @start_sha
           compared_diff_version
         else
@@ -202,17 +221,6 @@ class Projects::MergeRequestsController < Projects::ApplicationController
     end
   end
 
-  def builds
-    respond_to do |format|
-      format.html do
-        define_discussion_vars
-
-        render 'show'
-      end
-      format.json { render json: { html: view_to_html_string('projects/merge_requests/show/_builds') } }
-    end
-  end
-
   def pipelines
     @pipelines = @merge_request.all_pipelines
 
@@ -222,18 +230,35 @@ class Projects::MergeRequestsController < Projects::ApplicationController
 
         render 'show'
       end
-      format.json { render json: { html: view_to_html_string('projects/merge_requests/show/_pipelines') } }
+
+      format.json do
+        render json: PipelineSerializer
+          .new(project: @project, user: @current_user)
+          .represent(@pipelines)
+      end
     end
   end
 
   def new
-    define_new_vars
+    respond_to do |format|
+      format.html { define_new_vars }
+      format.json do
+        define_pipelines_vars
+
+        render json: {
+          pipelines: PipelineSerializer
+          .new(project: @project, user: @current_user)
+          .represent(@pipelines)
+        }
+      end
+    end
   end
 
   def new_diffs
     respond_to do |format|
       format.html do
         define_new_vars
+        @show_changes_tab = true
         render "new"
       end
       format.json do
@@ -244,7 +269,9 @@ class Projects::MergeRequestsController < Projects::ApplicationController
                  end
         @diff_notes_disabled = true
 
-        render json: { html: view_to_html_string('projects/merge_requests/_new_diffs', diffs: @diffs) }
+        @environment = @merge_request.environments_for(current_user).last
+
+        render json: { html: view_to_html_string('projects/merge_requests/_new_diffs', diffs: @diffs, environment: @environment) }
       end
     end
   end
@@ -271,22 +298,21 @@ class Projects::MergeRequestsController < Projects::ApplicationController
   def update
     @merge_request = MergeRequests::UpdateService.new(project, current_user, merge_request_params).execute(@merge_request)
 
-    if @merge_request.valid?
-      respond_to do |format|
-        format.html do
-          redirect_to([@merge_request.target_project.namespace.becomes(Namespace),
-                       @merge_request.target_project, @merge_request])
-        end
-        format.json do
-          render json: @merge_request.to_json(include: { milestone: {}, assignee: { methods: :avatar_url }, labels: { methods: :text_color } }, methods: [:task_status, :task_status_short])
+    respond_to do |format|
+      format.html do
+        if @merge_request.valid?
+          redirect_to([@merge_request.target_project.namespace.becomes(Namespace), @merge_request.target_project, @merge_request])
+        else
+          render :edit
         end
       end
-    else
-      render "edit"
+
+      format.json do
+        render json: @merge_request.to_json(include: { milestone: {}, assignee: { only: [:name, :username], methods: [:avatar_url] }, labels: { methods: :text_color } }, methods: [:task_status, :task_status_short])
+      end
     end
   rescue ActiveRecord::StaleObjectError
-    @conflict = true
-    render :edit
+    render_conflict_response
   end
 
   def remove_wip
@@ -298,22 +324,27 @@ class Projects::MergeRequestsController < Projects::ApplicationController
 
   def merge_check
     @merge_request.check_if_can_be_merged
+    @pipelines = @merge_request.all_pipelines
 
     render partial: "projects/merge_requests/widget/show.html.haml", layout: false
   end
 
-  def cancel_merge_when_build_succeeds
-    return access_denied! unless @merge_request.can_cancel_merge_when_build_succeeds?(current_user)
+  def cancel_merge_when_pipeline_succeeds
+    unless @merge_request.can_cancel_merge_when_pipeline_succeeds?(current_user)
+      return access_denied!
+    end
 
-    MergeRequests::MergeWhenBuildSucceedsService.new(@project, current_user).cancel(@merge_request)
+    MergeRequests::MergeWhenPipelineSucceedsService
+      .new(@project, current_user)
+      .cancel(@merge_request)
   end
 
   def merge
     return access_denied! unless @merge_request.can_be_merged_by?(current_user)
 
-    # Disable the CI check if merge_when_build_succeeds is enabled since we have
+    # Disable the CI check if merge_when_pipeline_succeeds is enabled since we have
     # to wait until CI completes to know
-    unless @merge_request.mergeable?(skip_ci_check: merge_when_build_succeeds_active?)
+    unless @merge_request.mergeable?(skip_ci_check: merge_when_pipeline_succeeds_active?)
       @status = :failed
       return
     end
@@ -325,17 +356,19 @@ class Projects::MergeRequestsController < Projects::ApplicationController
 
     @merge_request.update(merge_error: nil)
 
-    if params[:merge_when_build_succeeds].present?
-      unless @merge_request.pipeline
+    if params[:merge_when_pipeline_succeeds].present?
+      unless @merge_request.head_pipeline
         @status = :failed
         return
       end
 
-      if @merge_request.pipeline.active?
-        MergeRequests::MergeWhenBuildSucceedsService.new(@project, current_user, merge_params)
-                                                        .execute(@merge_request)
-        @status = :merge_when_build_succeeds
-      elsif @merge_request.pipeline.success?
+      if @merge_request.head_pipeline.active?
+        MergeRequests::MergeWhenPipelineSucceedsService
+          .new(@project, current_user, merge_params)
+          .execute(@merge_request)
+
+        @status = :merge_when_pipeline_succeeds
+      elsif @merge_request.head_pipeline.success?
         # This can be triggered when a user clicks the auto merge button while
         # the tests finish at about the same time
         MergeWorker.perform_async(@merge_request.id, current_user.id, params)
@@ -349,13 +382,27 @@ class Projects::MergeRequestsController < Projects::ApplicationController
     end
   end
 
+  def merge_widget_refresh
+    @status =
+      if merge_request.merge_when_pipeline_succeeds
+        :merge_when_pipeline_succeeds
+      else
+        # Only MRs that can be merged end in this action
+        # MR can be already picked up for merge / merged already or can be waiting for worker to be picked up
+        # in last case it does not have any special status. Possible error is handled inside widget js function
+        :success
+      end
+
+    render 'merge'
+  end
+
   def branch_from
     # This is always source
     @source_project = @merge_request.nil? ? @project : @merge_request.source_project
 
     if params[:ref].present?
       @ref = params[:ref]
-      @commit = @repository.commit(@ref)
+      @commit = @repository.commit("refs/heads/#{@ref}")
     end
 
     render layout: false
@@ -366,7 +413,7 @@ class Projects::MergeRequestsController < Projects::ApplicationController
 
     if params[:ref].present?
       @ref = params[:ref]
-      @commit = @target_project.commit(@ref)
+      @commit = @target_project.commit("refs/heads/#{@ref}")
     end
 
     render layout: false
@@ -399,7 +446,9 @@ class Projects::MergeRequestsController < Projects::ApplicationController
   end
 
   def ci_status
-    pipeline = @merge_request.pipeline
+    pipeline = @merge_request.head_pipeline
+    @pipelines = @merge_request.all_pipelines
+
     if pipeline
       status = pipeline.status
       coverage = pipeline.try(:coverage)
@@ -410,33 +459,35 @@ class Projects::MergeRequestsController < Projects::ApplicationController
     else
       ci_service = @merge_request.source_project.try(:ci_service)
       status = ci_service.commit_status(merge_request.diff_head_sha, merge_request.source_branch) if ci_service
-
-      if ci_service.respond_to?(:commit_coverage)
-        coverage = ci_service.commit_coverage(merge_request.diff_head_sha, merge_request.source_branch)
-      end
     end
 
     response = {
       title: merge_request.title,
-      sha: merge_request.diff_head_commit.short_id,
+      sha: (merge_request.diff_head_commit.short_id if merge_request.diff_head_sha),
       status: status,
-      coverage: coverage
+      coverage: coverage,
+      pipeline: pipeline.try(:id),
+      has_ci: @merge_request.has_ci?
     }
 
     render json: response
   end
 
+  def pipeline_status
+    render json: PipelineSerializer
+      .new(project: @project, user: @current_user)
+      .represent_status(@merge_request.head_pipeline)
+  end
+
   def ci_environments_status
     environments =
       begin
-        @merge_request.environments.map do |environment|
-          next unless can?(current_user, :read_environment, environment)
-
+        @merge_request.environments_for(current_user).map do |environment|
           project = environment.project
           deployment = environment.first_deployment_for(@merge_request.diff_head_commit)
 
           stop_url =
-            if environment.stoppable? && can?(current_user, :create_deployment, environment)
+            if environment.stop_action? && can?(current_user, :create_deployment, environment)
               stop_namespace_project_environment_path(project.namespace, project, environment)
             end
 
@@ -492,7 +543,7 @@ class Projects::MergeRequestsController < Projects::ApplicationController
   def validates_merge_request
     # Show git not found page
     # if there is no saved commits between source & target branch
-    if @merge_request.commits.blank?
+    if @merge_request.has_no_commits?
       # and if target branch doesn't exist
       return invalid_mr unless @merge_request.target_branch_exists?
     end
@@ -500,13 +551,14 @@ class Projects::MergeRequestsController < Projects::ApplicationController
 
   def define_show_vars
     @noteable = @merge_request
-    @commits_count = @merge_request.commits.count
+    @commits_count = @merge_request.commits_count
 
     if @merge_request.locked_long_ago?
       @merge_request.unlock_mr
       @merge_request.close
     end
 
+    labels
     define_pipelines_vars
   end
 
@@ -534,7 +586,7 @@ class Projects::MergeRequestsController < Projects::ApplicationController
   end
 
   def define_widget_vars
-    @pipeline = @merge_request.pipeline
+    @pipeline = @merge_request.head_pipeline
   end
 
   def define_commit_vars
@@ -563,11 +615,8 @@ class Projects::MergeRequestsController < Projects::ApplicationController
 
   def define_pipelines_vars
     @pipelines = @merge_request.all_pipelines
-
-    if @pipelines.present?
-      @pipeline = @pipelines.first
-      @statuses = @pipeline.statuses.relevant
-    end
+    @pipeline = @merge_request.head_pipeline
+    @statuses_count = @pipeline.present? ? @pipeline.statuses.relevant.count : 0
   end
 
   def define_new_vars
@@ -590,6 +639,8 @@ class Projects::MergeRequestsController < Projects::ApplicationController
 
     @labels = LabelsFinder.new(current_user, project_id: @project.id).execute
 
+    @show_changes_tab = params[:show_changes].present?
+
     define_pipelines_vars
   end
 
@@ -632,9 +683,9 @@ class Projects::MergeRequestsController < Projects::ApplicationController
     @merge_request.ensure_ref_fetched
   end
 
-  def merge_when_build_succeeds_active?
-    params[:merge_when_build_succeeds].present? &&
-      @merge_request.pipeline && @merge_request.pipeline.active?
+  def merge_when_pipeline_succeeds_active?
+    params[:merge_when_pipeline_succeeds].present? &&
+      @merge_request.head_pipeline && @merge_request.head_pipeline.active?
   end
 
   def build_merge_request
diff --git a/app/controllers/projects/milestones_controller.rb b/app/controllers/projects/milestones_controller.rb
index ff63f22cb5b..5922e686cd0 100644
--- a/app/controllers/projects/milestones_controller.rb
+++ b/app/controllers/projects/milestones_controller.rb
@@ -13,11 +13,14 @@ class Projects::MilestonesController < Projects::ApplicationController
   def index
     @milestones =
       case params[:state]
-      when 'all' then @project.milestones.reorder(due_date: :desc, title: :asc)
-      when 'closed' then @project.milestones.closed.reorder(due_date: :desc, title: :asc)
-      else @project.milestones.active.reorder(due_date: :asc, title: :asc)
+      when 'all' then @project.milestones
+      when 'closed' then @project.milestones.closed
+      else @project.milestones.active
       end
 
+    @sort = params[:sort] || 'due_date_asc'
+    @milestones = @milestones.sort(@sort)
+
     @milestones = @milestones.includes(:project)
     respond_to do |format|
       format.html do
@@ -112,6 +115,6 @@ class Projects::MilestonesController < Projects::ApplicationController
   end
 
   def milestone_params
-    params.require(:milestone).permit(:title, :description, :due_date, :state_event)
+    params.require(:milestone).permit(:title, :description, :start_date, :due_date, :state_event)
   end
 end
diff --git a/app/controllers/projects/network_controller.rb b/app/controllers/projects/network_controller.rb
index 34318391dd9..33a152ad34f 100644
--- a/app/controllers/projects/network_controller.rb
+++ b/app/controllers/projects/network_controller.rb
@@ -5,17 +5,29 @@ class Projects::NetworkController < Projects::ApplicationController
   before_action :require_non_empty_project
   before_action :assign_ref_vars
   before_action :authorize_download_code!
+  before_action :assign_commit
 
   def show
     @url = namespace_project_network_path(@project.namespace, @project, @ref, @options.merge(format: :json))
     @commit_url = namespace_project_commit_path(@project.namespace, @project, 'ae45ca32').gsub("ae45ca32", "%s")
 
     respond_to do |format|
-      format.html
+      format.html do
+        if @options[:extended_sha1] && !@commit
+          flash.now[:alert] = "Git revision '#{@options[:extended_sha1]}' does not exist."
+        end
+      end
 
       format.json do
         @graph = Network::Graph.new(project, @ref, @commit, @options[:filter_ref])
       end
     end
   end
+
+  def assign_commit
+    return if params[:extended_sha1].blank?
+
+    @options[:extended_sha1] = params[:extended_sha1]
+    @commit = @repo.commit(@options[:extended_sha1])
+  end
 end
diff --git a/app/controllers/projects/notes_controller.rb b/app/controllers/projects/notes_controller.rb
index 0948ad21649..d00177e7612 100644
--- a/app/controllers/projects/notes_controller.rb
+++ b/app/controllers/projects/notes_controller.rb
@@ -23,7 +23,8 @@ class Projects::NotesController < Projects::ApplicationController
   end
 
   def create
-    @note = Notes::CreateService.new(project, current_user, note_params).execute
+    create_params = note_params.merge(merge_request_diff_head_sha: params[:merge_request_diff_head_sha])
+    @note = Notes::CreateService.new(project, current_user, create_params).execute
 
     if @note.is_a?(Note)
       Banzai::NoteRenderer.render([@note], @project, current_user)
@@ -50,7 +51,7 @@ class Projects::NotesController < Projects::ApplicationController
 
   def destroy
     if note.editable?
-      Notes::DeleteService.new(project, current_user).execute(note)
+      Notes::DestroyService.new(project, current_user).execute(note)
     end
 
     respond_to do |format|
@@ -146,24 +147,19 @@ class Projects::NotesController < Projects::ApplicationController
   end
 
   def note_json(note)
-    if note.is_a?(AwardEmoji)
-      {
-        valid:  note.valid?,
-        award:  true,
-        id:     note.id,
-        name:   note.name
-      }
-    elsif note.persisted?
+    attrs = {
+      id: note.id
+    }
+
+    if note.persisted?
       Banzai::NoteRenderer.render([note], @project, current_user)
 
-      attrs = {
+      attrs.merge!(
         valid: true,
-        id: note.id,
         discussion_id: note.discussion_id,
         html: note_html(note),
-        award: false,
         note: note.note
-      }
+      )
 
       if note.diff_note?
         discussion = note.to_discussion
@@ -188,15 +184,15 @@ class Projects::NotesController < Projects::ApplicationController
           attrs[:original_discussion_id] = note.original_discussion_id
         end
       end
-
-      attrs
     else
-      {
+      attrs.merge!(
         valid: false,
-        award: false,
         errors: note.errors
-      }
+      )
     end
+
+    attrs[:commands_changes] = note.commands_changes
+    attrs
   end
 
   def authorize_admin_note!
@@ -215,6 +211,11 @@ class Projects::NotesController < Projects::ApplicationController
   end
 
   def find_current_user_notes
-    @notes = NotesFinder.new.execute(project, current_user, params)
+    @notes = NotesFinder.new(project, current_user, params.merge(last_fetched_at: last_fetched_at))
+      .execute.inc_author
+  end
+
+  def last_fetched_at
+    request.headers['X-Last-Fetched-At']
   end
 end
diff --git a/app/controllers/projects/pages_controller.rb b/app/controllers/projects/pages_controller.rb
new file mode 100644
index 00000000000..fbd18b68141
--- /dev/null
+++ b/app/controllers/projects/pages_controller.rb
@@ -0,0 +1,22 @@
+class Projects::PagesController < Projects::ApplicationController
+  layout 'project_settings'
+
+  before_action :authorize_read_pages!, only: [:show]
+  before_action :authorize_update_pages!, except: [:show]
+
+  def show
+    @domains = @project.pages_domains.order(:domain)
+  end
+
+  def destroy
+    project.remove_pages
+    project.pages_domains.destroy_all
+
+    respond_to do |format|
+      format.html  do
+        redirect_to(namespace_project_pages_path(@project.namespace, @project),
+                    notice: 'Pages were removed')
+      end
+    end
+  end
+end
diff --git a/app/controllers/projects/pages_domains_controller.rb b/app/controllers/projects/pages_domains_controller.rb
new file mode 100644
index 00000000000..b8c253f6ae3
--- /dev/null
+++ b/app/controllers/projects/pages_domains_controller.rb
@@ -0,0 +1,49 @@
+class Projects::PagesDomainsController < Projects::ApplicationController
+  layout 'project_settings'
+
+  before_action :authorize_update_pages!, except: [:show]
+  before_action :domain, only: [:show, :destroy]
+
+  def show
+  end
+
+  def new
+    @domain = @project.pages_domains.new
+  end
+
+  def create
+    @domain = @project.pages_domains.create(pages_domain_params)
+
+    if @domain.valid?
+      redirect_to namespace_project_pages_path(@project.namespace, @project)
+    else
+      render 'new'
+    end
+  end
+
+  def destroy
+    @domain.destroy
+
+    respond_to do |format|
+      format.html do
+        redirect_to(namespace_project_pages_path(@project.namespace, @project),
+                    notice: 'Domain was removed')
+      end
+      format.js
+    end
+  end
+
+  private
+
+  def pages_domain_params
+    params.require(:pages_domain).permit(
+      :certificate,
+      :key,
+      :domain
+    )
+  end
+
+  def domain
+    @domain ||= @project.pages_domains.find_by(domain: params[:id].to_s)
+  end
+end
diff --git a/app/controllers/projects/pipelines_controller.rb b/app/controllers/projects/pipelines_controller.rb
index 371cc3787fb..43a1abaa662 100644
--- a/app/controllers/projects/pipelines_controller.rb
+++ b/app/controllers/projects/pipelines_controller.rb
@@ -1,16 +1,48 @@
 class Projects::PipelinesController < Projects::ApplicationController
-  before_action :pipeline, except: [:index, :new, :create]
-  before_action :commit, only: [:show]
+  before_action :pipeline, except: [:index, :new, :create, :charts]
+  before_action :commit, only: [:show, :builds]
   before_action :authorize_read_pipeline!
   before_action :authorize_create_pipeline!, only: [:new, :create]
   before_action :authorize_update_pipeline!, only: [:retry, :cancel]
+  before_action :builds_enabled, only: :charts
 
   def index
     @scope = params[:scope]
-    @pipelines = PipelinesFinder.new(project).execute(scope: @scope).page(params[:page]).per(30)
+    @pipelines = PipelinesFinder
+      .new(project)
+      .execute(scope: @scope)
+      .page(params[:page])
+      .per(30)
 
-    @running_or_pending_count = PipelinesFinder.new(project).execute(scope: 'running').count
-    @pipelines_count = PipelinesFinder.new(project).execute.count
+    @running_count = PipelinesFinder
+      .new(project).execute(scope: 'running').count
+
+    @pending_count = PipelinesFinder
+      .new(project).execute(scope: 'pending').count
+
+    @finished_count = PipelinesFinder
+      .new(project).execute(scope: 'finished').count
+
+    @pipelines_count = PipelinesFinder
+      .new(project).execute.count
+
+    respond_to do |format|
+      format.html
+      format.json do
+        render json: {
+          pipelines: PipelineSerializer
+            .new(project: @project, user: @current_user)
+            .with_pagination(request, response)
+            .represent(@pipelines),
+          count: {
+            all: @pipelines_count,
+            running: @running_count,
+            pending: @pending_count,
+            finished: @finished_count,
+          }
+        }
+      end
+    end
   end
 
   def new
@@ -18,7 +50,9 @@ class Projects::PipelinesController < Projects::ApplicationController
   end
 
   def create
-    @pipeline = Ci::CreatePipelineService.new(project, current_user, create_params).execute(ignore_skip_ci: true, save_on_errors: false)
+    @pipeline = Ci::CreatePipelineService
+      .new(project, current_user, create_params)
+      .execute(ignore_skip_ci: true, save_on_errors: false)
     unless @pipeline.persisted?
       render 'new'
       return
@@ -30,6 +64,29 @@ class Projects::PipelinesController < Projects::ApplicationController
   def show
   end
 
+  def builds
+    respond_to do |format|
+      format.html do
+        render 'show'
+      end
+    end
+  end
+
+  def status
+    render json: PipelineSerializer
+      .new(project: @project, user: @current_user)
+      .represent_status(@pipeline)
+  end
+
+  def stage
+    @stage = pipeline.stage(params[:stage])
+    return not_found unless @stage
+
+    respond_to do |format|
+      format.json { render json: { html: view_to_html_string('projects/pipelines/_stage') } }
+    end
+  end
+
   def retry
     pipeline.retry_failed(current_user)
 
@@ -42,6 +99,14 @@ class Projects::PipelinesController < Projects::ApplicationController
     redirect_back_or_default default: namespace_project_pipelines_path(project.namespace, project)
   end
 
+  def charts
+    @charts = {}
+    @charts[:week] = Ci::Charts::WeekChart.new(project)
+    @charts[:month] = Ci::Charts::MonthChart.new(project)
+    @charts[:year] = Ci::Charts::YearChart.new(project)
+    @charts[:build_times] = Ci::Charts::BuildTime.new(project)
+  end
+
   private
 
   def create_params
diff --git a/app/controllers/projects/pipelines_settings_controller.rb b/app/controllers/projects/pipelines_settings_controller.rb
index 9136633b87a..c8c80551ac9 100644
--- a/app/controllers/projects/pipelines_settings_controller.rb
+++ b/app/controllers/projects/pipelines_settings_controller.rb
@@ -2,22 +2,15 @@ class Projects::PipelinesSettingsController < Projects::ApplicationController
   before_action :authorize_admin_pipeline!
 
   def show
-    @ref = params[:ref] || @project.default_branch || 'master'
-
-    @badges = [Gitlab::Badge::Build::Status,
-               Gitlab::Badge::Coverage::Report]
-
-    @badges.map! do |badge|
-      badge.new(@project, @ref).metadata
-    end
+    redirect_to namespace_project_settings_ci_cd_path(@project.namespace, @project, params: params)
   end
 
   def update
     if @project.update_attributes(update_params)
       flash[:notice] = "CI/CD Pipelines settings for '#{@project.name}' were successfully updated."
-      redirect_to namespace_project_pipelines_settings_path(@project.namespace, @project)
+      redirect_to namespace_project_settings_ci_cd_path(@project.namespace, @project)
     else
-      render 'index'
+      render 'show'
     end
   end
 
diff --git a/app/controllers/projects/project_members_controller.rb b/app/controllers/projects/project_members_controller.rb
index 699a56ae2f8..6e158e685e9 100644
--- a/app/controllers/projects/project_members_controller.rb
+++ b/app/controllers/projects/project_members_controller.rb
@@ -1,33 +1,19 @@
 class Projects::ProjectMembersController < Projects::ApplicationController
   include MembershipActions
+  include SortingHelper
 
   # Authorize
   before_action :authorize_admin_project_member!, except: [:index, :leave, :request_access]
 
   def index
-    @group_links = @project.project_group_links
-
-    @project_members = @project.project_members
-    @project_members = @project_members.non_invite unless can?(current_user, :admin_project, @project)
-
-    if params[:search].present?
-      users = @project.users.search(params[:search]).to_a
-      @project_members = @project_members.where(user_id: users)
-
-      @group_links = @project.project_group_links.where(group_id: @project.invited_groups.search(params[:search]).select(:id))
-    end
-
-    @project_members = @project_members.order(access_level: :desc).page(params[:page])
-
-    @requesters = AccessRequestsFinder.new(@project).execute(current_user)
-
-    @project_member = @project.project_members.new
+    sort = params[:sort].presence || sort_value_name
+    redirect_to namespace_project_settings_members_path(@project.namespace, @project, sort: sort)
   end
 
   def create
     status = Members::CreateService.new(@project, current_user, params).execute
 
-    redirect_url = namespace_project_project_members_path(@project.namespace, @project)
+    redirect_url = namespace_project_settings_members_path(@project.namespace, @project)
 
     if status
       redirect_to redirect_url, notice: 'Users were successfully added.'
@@ -50,14 +36,14 @@ class Projects::ProjectMembersController < Projects::ApplicationController
 
     respond_to do |format|
       format.html do
-        redirect_to namespace_project_project_members_path(@project.namespace, @project)
+        redirect_to namespace_project_settings_members_path(@project.namespace, @project)
       end
       format.js { head :ok }
     end
   end
 
   def resend_invite
-    redirect_path = namespace_project_project_members_path(@project.namespace, @project)
+    redirect_path = namespace_project_settings_members_path(@project.namespace, @project)
 
     @project_member = @project.project_members.find(params[:id])
 
@@ -80,7 +66,7 @@ class Projects::ProjectMembersController < Projects::ApplicationController
       return render_404
     end
 
-    redirect_to(namespace_project_project_members_path(project.namespace, project),
+    redirect_to(namespace_project_settings_members_path(project.namespace, project),
                 notice: notice)
   end
 
diff --git a/app/controllers/projects/protected_branches_controller.rb b/app/controllers/projects/protected_branches_controller.rb
index 9a438d5512c..a8cb07eb67a 100644
--- a/app/controllers/projects/protected_branches_controller.rb
+++ b/app/controllers/projects/protected_branches_controller.rb
@@ -1,26 +1,22 @@
 class Projects::ProtectedBranchesController < Projects::ApplicationController
+  include RepositorySettingsRedirect
   # Authorize
   before_action :require_non_empty_project
   before_action :authorize_admin_project!
   before_action :load_protected_branch, only: [:show, :update, :destroy]
-  before_action :load_protected_branches, only: [:index]
 
   layout "project_settings"
 
   def index
-    @protected_branch = @project.protected_branches.new
-    load_gon_index
+    redirect_to_repository_settings(@project)
   end
 
   def create
     @protected_branch = ::ProtectedBranches::CreateService.new(@project, current_user, protected_branch_params).execute
-    if @protected_branch.persisted?
-      redirect_to namespace_project_protected_branches_path(@project.namespace, @project)
-    else
-      load_protected_branches
-      load_gon_index
-      render :index
+    unless @protected_branch.persisted?
+      flash[:alert] = @protected_branches.errors.full_messages.join(', ').html_safe
     end
+    redirect_to_repository_settings(@project)
   end
 
   def show
@@ -45,7 +41,7 @@ class Projects::ProtectedBranchesController < Projects::ApplicationController
     @protected_branch.destroy
 
     respond_to do |format|
-      format.html { redirect_to namespace_project_protected_branches_path }
+      format.html { redirect_to_repository_settings(@project) }
       format.js { head :ok }
     end
   end
@@ -61,20 +57,4 @@ class Projects::ProtectedBranchesController < Projects::ApplicationController
                                              merge_access_levels_attributes: [:access_level, :id],
                                              push_access_levels_attributes: [:access_level, :id])
   end
-
-  def load_protected_branches
-    @protected_branches = @project.protected_branches.order(:name).page(params[:page])
-  end
-
-  def access_levels_options
-    {
-      push_access_levels: ProtectedBranch::PushAccessLevel.human_access_levels.map { |id, text| { id: id, text: text, before_divider: true } },
-      merge_access_levels: ProtectedBranch::MergeAccessLevel.human_access_levels.map { |id, text| { id: id, text: text, before_divider: true } }
-    }
-  end
-
-  def load_gon_index
-    params = { open_branches: @project.open_branches.map { |br| { text: br.name, id: br.name, title: br.name } } }
-    gon.push(params.merge(access_levels_options))
-  end
 end
diff --git a/app/controllers/projects/raw_controller.rb b/app/controllers/projects/raw_controller.rb
index 10d24da16d7..c55b37ae0dd 100644
--- a/app/controllers/projects/raw_controller.rb
+++ b/app/controllers/projects/raw_controller.rb
@@ -15,7 +15,7 @@ class Projects::RawController < Projects::ApplicationController
 
       return if cached_blob?
 
-      if @blob.lfs_pointer?
+      if @blob.lfs_pointer? && project.lfs_enabled?
         send_lfs_object
       else
         send_git_blob @repository, @blob
diff --git a/app/controllers/projects/refs_controller.rb b/app/controllers/projects/refs_controller.rb
index 3602b3d5e58..667f4870c7a 100644
--- a/app/controllers/projects/refs_controller.rb
+++ b/app/controllers/projects/refs_controller.rb
@@ -32,12 +32,6 @@ class Projects::RefsController < Projects::ApplicationController
 
         redirect_to new_path
       end
-      format.js do
-        @ref = params[:ref]
-        define_tree_vars
-        tree
-        render "tree"
-      end
     end
   end
 
diff --git a/app/controllers/projects/releases_controller.rb b/app/controllers/projects/releases_controller.rb
index 0825a4311cb..2c097cb4d8d 100644
--- a/app/controllers/projects/releases_controller.rb
+++ b/app/controllers/projects/releases_controller.rb
@@ -10,7 +10,14 @@ class Projects::ReleasesController < Projects::ApplicationController
   end
 
   def update
-    release.update_attributes(release_params)
+    # Release belongs to Tag which is not active record object,
+    # it exists only to save a description to each Tag.
+    # If description is empty we should destroy the existing record.
+    if release_params[:description].present?
+      release.update_attributes(release_params)
+    else
+      release.destroy
+    end
 
     redirect_to namespace_project_tag_path(@project.namespace, @project, @tag.name)
   end
diff --git a/app/controllers/projects/runners_controller.rb b/app/controllers/projects/runners_controller.rb
index 53c36635efe..8b50ea207a5 100644
--- a/app/controllers/projects/runners_controller.rb
+++ b/app/controllers/projects/runners_controller.rb
@@ -5,18 +5,14 @@ class Projects::RunnersController < Projects::ApplicationController
   layout 'project_settings'
 
   def index
-    @project_runners = project.runners.ordered
-    @assignable_runners = current_user.ci_authorized_runners.
-      assignable_for(project).ordered.page(params[:page]).per(20)
-    @shared_runners = Ci::Runner.shared.active
-    @shared_runners_count = @shared_runners.count(:all)
+    redirect_to namespace_project_settings_ci_cd_path(@project.namespace, @project)
   end
 
   def edit
   end
 
   def update
-    if @runner.update_attributes(runner_params)
+    if Ci::UpdateRunnerService.new(@runner).update(runner_params)
       redirect_to runner_path(@runner), notice: 'Runner was successfully updated.'
     else
       render 'edit'
@@ -32,7 +28,7 @@ class Projects::RunnersController < Projects::ApplicationController
   end
 
   def resume
-    if @runner.update_attributes(active: true)
+    if Ci::UpdateRunnerService.new(@runner).update(active: true)
       redirect_to runner_path(@runner), notice: 'Runner was successfully updated.'
     else
       redirect_to runner_path(@runner), alert: 'Runner was not updated.'
@@ -40,7 +36,7 @@ class Projects::RunnersController < Projects::ApplicationController
   end
 
   def pause
-    if @runner.update_attributes(active: false)
+    if Ci::UpdateRunnerService.new(@runner).update(active: false)
       redirect_to runner_path(@runner), notice: 'Runner was successfully updated.'
     else
       redirect_to runner_path(@runner), alert: 'Runner was not updated.'
@@ -53,7 +49,7 @@ class Projects::RunnersController < Projects::ApplicationController
   def toggle_shared_runners
     project.toggle!(:shared_runners_enabled)
 
-    redirect_to namespace_project_runners_path(project.namespace, project)
+    redirect_to namespace_project_settings_ci_cd_path(@project.namespace, @project)
   end
 
   protected
diff --git a/app/controllers/projects/services_controller.rb b/app/controllers/projects/services_controller.rb
index 97e6e9471e0..f9d798d0455 100644
--- a/app/controllers/projects/services_controller.rb
+++ b/app/controllers/projects/services_controller.rb
@@ -9,16 +9,12 @@ class Projects::ServicesController < Projects::ApplicationController
 
   layout "project_settings"
 
-  def index
-    @project.build_missing_services
-    @services = @project.services.visible.reload
-  end
-
   def edit
   end
 
   def update
-    if @service.update_attributes(service_params[:service])
+    @service.assign_attributes(service_params[:service])
+    if @service.save(context: :manual_change)
       redirect_to(
         edit_namespace_project_service_path(@project.namespace, @project, @service.to_param),
         notice: 'Successfully updated.'
@@ -29,6 +25,8 @@ class Projects::ServicesController < Projects::ApplicationController
   end
 
   def test
+    return render_404 unless @service.can_test?
+
     data = @service.test_data(project, current_user)
     outcome = @service.test(data)
 
@@ -46,6 +44,6 @@ class Projects::ServicesController < Projects::ApplicationController
   private
 
   def service
-    @service ||= @project.services.find { |service| service.to_param == params[:id] }
+    @service ||= @project.find_or_initialize_service(params[:id])
   end
 end
diff --git a/app/controllers/projects/settings/ci_cd_controller.rb b/app/controllers/projects/settings/ci_cd_controller.rb
new file mode 100644
index 00000000000..6f009d61950
--- /dev/null
+++ b/app/controllers/projects/settings/ci_cd_controller.rb
@@ -0,0 +1,44 @@
+module Projects
+  module Settings
+    class CiCdController < Projects::ApplicationController
+      before_action :authorize_admin_pipeline!
+
+      def show
+        define_runners_variables
+        define_secret_variables
+        define_triggers_variables
+        define_badges_variables
+      end
+
+      private
+
+      def define_runners_variables
+        @project_runners = @project.runners.ordered
+        @assignable_runners = current_user.ci_authorized_runners.
+          assignable_for(project).ordered.page(params[:page]).per(20)
+        @shared_runners = Ci::Runner.shared.active
+        @shared_runners_count = @shared_runners.count(:all)
+      end
+
+      def define_secret_variables
+        @variable = Ci::Variable.new
+      end
+
+      def define_triggers_variables
+        @triggers = @project.triggers
+        @trigger = Ci::Trigger.new
+      end
+
+      def define_badges_variables
+        @ref = params[:ref] || @project.default_branch || 'master'
+
+        @badges = [Gitlab::Badge::Build::Status,
+                   Gitlab::Badge::Coverage::Report]
+
+        @badges.map! do |badge|
+          badge.new(@project, @ref).metadata
+        end
+      end
+    end
+  end
+end
diff --git a/app/controllers/projects/settings/integrations_controller.rb b/app/controllers/projects/settings/integrations_controller.rb
new file mode 100644
index 00000000000..fb2a4837735
--- /dev/null
+++ b/app/controllers/projects/settings/integrations_controller.rb
@@ -0,0 +1,18 @@
+module Projects
+  module Settings
+    class IntegrationsController < Projects::ApplicationController
+      include ServiceParams
+
+      before_action :authorize_admin_project!
+      layout "project_settings"
+      
+      def show
+        @hooks = @project.hooks
+        @hook = ProjectHook.new
+
+        # Services
+        @services = @project.find_or_initialize_services
+      end
+    end
+  end
+end
diff --git a/app/controllers/projects/settings/members_controller.rb b/app/controllers/projects/settings/members_controller.rb
new file mode 100644
index 00000000000..54f9dceddef
--- /dev/null
+++ b/app/controllers/projects/settings/members_controller.rb
@@ -0,0 +1,27 @@
+module Projects
+  module Settings
+    class MembersController < Projects::ApplicationController
+      include SortingHelper
+
+      def show
+        @sort = params[:sort].presence || sort_value_name
+        @group_links = @project.project_group_links
+
+        @skip_groups = @group_links.pluck(:group_id)
+        @skip_groups << @project.namespace_id unless @project.personal?
+        @skip_groups += @project.group.ancestors.pluck(:id) if @project.group
+
+        @project_members = MembersFinder.new(@project, current_user).execute
+
+        if params[:search].present?
+          @project_members = @project_members.joins(:user).merge(User.search(params[:search]))
+          @group_links = @group_links.where(group_id: @project.invited_groups.search(params[:search]).select(:id))
+        end
+
+        @project_members = @project_members.sort(@sort).page(params[:page])
+        @requesters = AccessRequestsFinder.new(@project).execute(current_user)
+        @project_member = @project.project_members.new
+      end
+    end
+  end
+end
diff --git a/app/controllers/projects/settings/repository_controller.rb b/app/controllers/projects/settings/repository_controller.rb
new file mode 100644
index 00000000000..b6ce4abca45
--- /dev/null
+++ b/app/controllers/projects/settings/repository_controller.rb
@@ -0,0 +1,50 @@
+module Projects
+  module Settings
+    class RepositoryController < Projects::ApplicationController
+      before_action :authorize_admin_project!
+
+      def show
+        @deploy_keys = DeployKeysPresenter
+          .new(@project, current_user: current_user)
+
+        define_protected_branches
+      end
+
+      private
+
+      def define_protected_branches
+        load_protected_branches
+        @protected_branch = @project.protected_branches.new
+        load_gon_index
+      end
+
+      def load_protected_branches
+        @protected_branches = @project.protected_branches.order(:name).page(params[:page])
+      end
+
+      def access_levels_options
+        {
+          push_access_levels: {
+            roles: ProtectedBranch::PushAccessLevel.human_access_levels.map do |id, text|
+              { id: id, text: text, before_divider: true }
+            end
+          },
+          merge_access_levels: {
+            roles: ProtectedBranch::MergeAccessLevel.human_access_levels.map do |id, text|
+              { id: id, text: text, before_divider: true }
+            end
+          }
+        }
+      end
+
+      def open_branches
+        branches = @project.open_branches.map { |br| { text: br.name, id: br.name, title: br.name } }
+        { open_branches: branches }
+      end
+
+      def load_gon_index
+        gon.push(open_branches.merge(access_levels_options))
+      end
+    end
+  end
+end
diff --git a/app/controllers/projects/snippets_controller.rb b/app/controllers/projects/snippets_controller.rb
index e290a0eadda..ea1a97b7cf0 100644
--- a/app/controllers/projects/snippets_controller.rb
+++ b/app/controllers/projects/snippets_controller.rb
@@ -1,8 +1,10 @@
 class Projects::SnippetsController < Projects::ApplicationController
   include ToggleAwardEmoji
+  include SpammableActions
+  include SnippetsActions
 
   before_action :module_enabled
-  before_action :snippet, only: [:show, :edit, :destroy, :update, :raw, :toggle_award_emoji]
+  before_action :snippet, only: [:show, :edit, :destroy, :update, :raw, :toggle_award_emoji, :mark_as_spam]
 
   # Allow read any snippet
   before_action :authorize_read_project_snippet!, except: [:new, :create, :index]
@@ -19,11 +21,16 @@ class Projects::SnippetsController < Projects::ApplicationController
   respond_to :html
 
   def index
-    @snippets = SnippetsFinder.new.execute(current_user, {
+    @snippets = SnippetsFinder.new.execute(
+      current_user,
       filter: :by_project,
-      project: @project
-    })
+      project: @project,
+      scope: params[:scope]
+    )
     @snippets = @snippets.page(params[:page])
+    if @snippets.out_of_range? && @snippets.total_pages != 0
+      redirect_to namespace_project_snippets_path(page: @snippets.total_pages)
+    end
   end
 
   def new
@@ -31,27 +38,19 @@ class Projects::SnippetsController < Projects::ApplicationController
   end
 
   def create
-    @snippet = CreateSnippetService.new(@project, current_user,
-                                        snippet_params).execute
-
-    if @snippet.valid?
-      respond_with(@snippet,
-                   location: namespace_project_snippet_path(@project.namespace,
-                                                            @project, @snippet))
-    else
-      render :new
-    end
-  end
+    create_params = snippet_params.merge(spammable_params)
+
+    @snippet = CreateSnippetService.new(@project, current_user, create_params).execute
 
-  def edit
+    recaptcha_check_with_fallback { render :new }
   end
 
   def update
-    UpdateSnippetService.new(project, current_user, @snippet,
-                             snippet_params).execute
-    respond_with(@snippet,
-                 location: namespace_project_snippet_path(@project.namespace,
-                                                          @project, @snippet))
+    update_params = snippet_params.merge(spammable_params)
+
+    UpdateSnippetService.new(project, current_user, @snippet, update_params).execute
+
+    recaptcha_check_with_fallback { render :edit }
   end
 
   def show
@@ -68,21 +67,13 @@ class Projects::SnippetsController < Projects::ApplicationController
     redirect_to namespace_project_snippets_path(@project.namespace, @project)
   end
 
-  def raw
-    send_data(
-      @snippet.content,
-      type: 'text/plain; charset=utf-8',
-      disposition: 'inline',
-      filename: @snippet.sanitized_file_name
-    )
-  end
-
   protected
 
   def snippet
     @snippet ||= @project.snippets.find(params[:id])
   end
   alias_method :awardable, :snippet
+  alias_method :spammable, :snippet
 
   def authorize_read_project_snippet!
     return render_404 unless can?(current_user, :read_project_snippet, @snippet)
diff --git a/app/controllers/projects/tags_controller.rb b/app/controllers/projects/tags_controller.rb
index 953091492ae..e13f0bde315 100644
--- a/app/controllers/projects/tags_controller.rb
+++ b/app/controllers/projects/tags_controller.rb
@@ -8,13 +8,15 @@ class Projects::TagsController < Projects::ApplicationController
   before_action :authorize_admin_project!, only: [:destroy]
 
   def index
-    params[:sort] = params[:sort].presence || 'name'
+    params[:sort] = params[:sort].presence || sort_value_recently_updated
 
     @sort = params[:sort]
     @tags = TagsFinder.new(@repository, params).execute
     @tags = Kaminari.paginate_array(@tags).page(params[:page])
 
-    @releases = project.releases.where(tag: @tags.map(&:name))
+    tag_names = @tags.map(&:name)
+    @tags_pipelines = @project.pipelines.latest_successful_for_refs(tag_names)
+    @releases = project.releases.where(tag: tag_names)
   end
 
   def show
@@ -27,7 +29,7 @@ class Projects::TagsController < Projects::ApplicationController
   end
 
   def create
-    result = CreateTagService.new(@project, current_user).
+    result = Tags::CreateService.new(@project, current_user).
       execute(params[:tag_name], params[:ref], params[:message], params[:release_description])
 
     if result[:status] == :success
@@ -41,13 +43,27 @@ class Projects::TagsController < Projects::ApplicationController
   end
 
   def destroy
-    DeleteTagService.new(project, current_user).execute(params[:id])
+    result = Tags::DestroyService.new(project, current_user).execute(params[:id])
 
     respond_to do |format|
-      format.html do
-        redirect_to namespace_project_tags_path(@project.namespace, @project)
+      if result[:status] == :success
+        format.html do
+          redirect_to namespace_project_tags_path(@project.namespace, @project)
+        end
+
+        format.js
+      else
+        @error = result[:message]
+
+        format.html do
+          redirect_to namespace_project_tags_path(@project.namespace, @project),
+            alert: @error
+        end
+
+        format.js do
+          render status: :unprocessable_entity
+        end
       end
-      format.js
     end
   end
 end
diff --git a/app/controllers/projects/todos_controller.rb b/app/controllers/projects/todos_controller.rb
index 5685d0f4e7c..a41fcb85c40 100644
--- a/app/controllers/projects/todos_controller.rb
+++ b/app/controllers/projects/todos_controller.rb
@@ -16,15 +16,9 @@ class Projects::TodosController < Projects::ApplicationController
     @issuable ||= begin
       case params[:issuable_type]
       when "issue"
-        issue = @project.issues.find(params[:issuable_id])
-
-        if can?(current_user, :read_issue, issue)
-          issue
-        else
-          render_404
-        end
+        IssuesFinder.new(current_user, project_id: @project.id).find(params[:issuable_id])
       when "merge_request"
-        @project.merge_requests.find(params[:issuable_id])
+        MergeRequestsFinder.new(current_user, project_id: @project.id).find(params[:issuable_id])
       end
     end
   end
diff --git a/app/controllers/projects/tree_controller.rb b/app/controllers/projects/tree_controller.rb
index cb3ed0f6f9c..637b61504d8 100644
--- a/app/controllers/projects/tree_controller.rb
+++ b/app/controllers/projects/tree_controller.rb
@@ -15,10 +15,10 @@ class Projects::TreeController < Projects::ApplicationController
 
     if tree.entries.empty?
       if @repository.blob_at(@commit.id, @path)
-        redirect_to(
+        return redirect_to(
           namespace_project_blob_path(@project.namespace, @project,
                                       File.join(@ref, @path))
-        ) and return
+        )
       elsif @path.present?
         return render_404
       end
@@ -34,6 +34,7 @@ class Projects::TreeController < Projects::ApplicationController
   def create_dir
     return render_404 unless @commit_params.values.all?
 
+    update_ref
     create_commit(Files::CreateDirService,  success_notice: "The directory has been successfully created.",
                                             success_path: namespace_project_tree_path(@project.namespace, @project, File.join(@target_branch, @dir_name)),
                                             failure_path: namespace_project_tree_path(@project.namespace, @project, @ref))
diff --git a/app/controllers/projects/triggers_controller.rb b/app/controllers/projects/triggers_controller.rb
index 92359745cec..c47198c5eb6 100644
--- a/app/controllers/projects/triggers_controller.rb
+++ b/app/controllers/projects/triggers_controller.rb
@@ -1,34 +1,77 @@
 class Projects::TriggersController < Projects::ApplicationController
   before_action :authorize_admin_build!
+  before_action :authorize_manage_trigger!, except: [:index, :create]
+  before_action :authorize_admin_trigger!, only: [:edit, :update]
+  before_action :trigger, only: [:take_ownership, :edit, :update, :destroy]
 
   layout 'project_settings'
 
   def index
-    @triggers = project.triggers
-    @trigger = Ci::Trigger.new
+    redirect_to namespace_project_settings_ci_cd_path(@project.namespace, @project)
   end
 
   def create
-    @trigger = project.triggers.new
-    @trigger.save
+    @trigger = project.triggers.create(create_params.merge(owner: current_user))
 
     if @trigger.valid?
-      redirect_to namespace_project_triggers_path(@project.namespace, @project)
+      flash[:notice] = 'Trigger was created successfully.'
     else
-      @triggers = project.triggers.select(&:persisted?)
-      render :index
+      flash[:alert] = 'You could not create a new trigger.'
+    end
+
+    redirect_to namespace_project_settings_ci_cd_path(@project.namespace, @project)
+  end
+
+  def take_ownership
+    if trigger.update(owner: current_user)
+      flash[:notice] = 'Trigger was re-assigned.'
+    else
+      flash[:alert] = 'You could not take ownership of trigger.'
+    end
+
+    redirect_to namespace_project_settings_ci_cd_path(@project.namespace, @project)
+  end
+
+  def edit
+  end
+
+  def update
+    if trigger.update(update_params)
+      redirect_to namespace_project_settings_ci_cd_path(@project.namespace, @project), notice: 'Trigger was successfully updated.'
+    else
+      render action: "edit"
     end
   end
 
   def destroy
-    trigger.destroy
+    if trigger.destroy
+      flash[:notice] = "Trigger removed."
+    else
+      flash[:alert] = "Could not remove the trigger."
+    end
 
-    redirect_to namespace_project_triggers_path(@project.namespace, @project)
+    redirect_to namespace_project_settings_ci_cd_path(@project.namespace, @project)
   end
 
   private
 
+  def authorize_manage_trigger!
+    access_denied! unless can?(current_user, :manage_trigger, trigger)
+  end
+
+  def authorize_admin_trigger!
+    access_denied! unless can?(current_user, :admin_trigger, trigger)
+  end
+
   def trigger
-    @trigger ||= project.triggers.find(params[:id])
+    @trigger ||= project.triggers.find(params[:id]) || render_404
+  end
+
+  def create_params
+    params.require(:trigger).permit(:description)
+  end
+
+  def update_params
+    params.require(:trigger).permit(:description)
   end
 end
diff --git a/app/controllers/projects/uploads_controller.rb b/app/controllers/projects/uploads_controller.rb
index e617be8f9fb..61686499bd3 100644
--- a/app/controllers/projects/uploads_controller.rb
+++ b/app/controllers/projects/uploads_controller.rb
@@ -1,6 +1,6 @@
 class Projects::UploadsController < Projects::ApplicationController
-  skip_before_action :reject_blocked!, :project,
-    :repository, if: -> { action_name == 'show' && image_or_video? }
+  skip_before_action :project, :repository,
+    if: -> { action_name == 'show' && image_or_video? }
 
   before_action :authorize_upload_file!, only: [:create]
 
@@ -36,7 +36,7 @@ class Projects::UploadsController < Projects::ApplicationController
     namespace = params[:namespace_id]
     id = params[:project_id]
 
-    file_project = Project.find_with_namespace("#{namespace}/#{id}")
+    file_project = Project.find_by_full_path("#{namespace}/#{id}")
 
     if file_project.nil?
       @uploader = nil
diff --git a/app/controllers/projects/variables_controller.rb b/app/controllers/projects/variables_controller.rb
index 6f068729390..a4d1b1ee69b 100644
--- a/app/controllers/projects/variables_controller.rb
+++ b/app/controllers/projects/variables_controller.rb
@@ -4,7 +4,7 @@ class Projects::VariablesController < Projects::ApplicationController
   layout 'project_settings'
 
   def index
-    @variable = Ci::Variable.new
+    redirect_to namespace_project_settings_ci_cd_path(@project.namespace, @project)
   end
 
   def show
@@ -25,9 +25,10 @@ class Projects::VariablesController < Projects::ApplicationController
     @variable = Ci::Variable.new(project_params)
 
     if @variable.valid? && @project.variables << @variable
-      redirect_to namespace_project_variables_path(project.namespace, project), notice: 'Variables were successfully updated.'
+      flash[:notice] = 'Variables were successfully updated.'
+      redirect_to namespace_project_settings_ci_cd_path(project.namespace, project)
     else
-      render action: "index"
+      render "show"
     end
   end
 
@@ -35,7 +36,7 @@ class Projects::VariablesController < Projects::ApplicationController
     @key = @project.variables.find(params[:id])
     @key.destroy
 
-    redirect_to namespace_project_variables_path(project.namespace, project), notice: 'Variable was successfully removed.'
+    redirect_to namespace_project_settings_ci_cd_path(project.namespace, project), notice: 'Variable was successfully removed.'
   end
 
   private
diff --git a/app/controllers/projects/wikis_controller.rb b/app/controllers/projects/wikis_controller.rb
index 177ccf5eec9..c5e24b9e365 100644
--- a/app/controllers/projects/wikis_controller.rb
+++ b/app/controllers/projects/wikis_controller.rb
@@ -1,5 +1,3 @@
-require 'project_wiki'
-
 class Projects::WikisController < Projects::ApplicationController
   before_action :authorize_read_wiki!
   before_action :authorize_create_wiki!, only: [:edit, :create, :history]
@@ -8,6 +6,7 @@ class Projects::WikisController < Projects::ApplicationController
 
   def pages
     @wiki_pages = Kaminari.paginate_array(@project_wiki.pages).page(params[:page])
+    @wiki_entries = WikiPage.group_by_directory(@wiki_pages)
   end
 
   def show
@@ -46,8 +45,9 @@ class Projects::WikisController < Projects::ApplicationController
     return render('empty') unless can?(current_user, :create_wiki, @project)
 
     @page = @project_wiki.find_page(params[:id])
+    @page = WikiPages::UpdateService.new(@project, current_user, wiki_params).execute(@page)
 
-    if @page = WikiPages::UpdateService.new(@project, current_user, wiki_params).execute(@page)
+    if @page.valid?
       redirect_to(
         namespace_project_wiki_path(@project.namespace, @project, @page),
         notice: 'Wiki was successfully updated.'
@@ -83,7 +83,7 @@ class Projects::WikisController < Projects::ApplicationController
 
   def destroy
     @page = @project_wiki.find_page(params[:id])
-    @page.delete if @page
+    WikiPages::DestroyService.new(@project, current_user).execute(@page)
 
     redirect_to(
       namespace_project_wiki_path(@project.namespace, @project, :home),
@@ -115,6 +115,8 @@ class Projects::WikisController < Projects::ApplicationController
 
     # Call #wiki to make sure the Wiki Repo is initialized
     @project_wiki.wiki
+
+    @sidebar_wiki_entries = WikiPage.group_by_directory(@project_wiki.pages.first(15))
   rescue ProjectWiki::CouldNotCreateWikiError
     flash[:notice] = "Could not create Wiki Repository at this time. Please try again later."
     redirect_to project_path(@project)
@@ -122,6 +124,6 @@ class Projects::WikisController < Projects::ApplicationController
   end
 
   def wiki_params
-    params[:wiki].slice(:title, :content, :format, :message)
+    params.require(:wiki).permit(:title, :content, :format, :message)
   end
 end
diff --git a/app/controllers/projects_controller.rb b/app/controllers/projects_controller.rb
index 6988527a3be..47f7e0b1b28 100644
--- a/app/controllers/projects_controller.rb
+++ b/app/controllers/projects_controller.rb
@@ -2,9 +2,9 @@ class ProjectsController < Projects::ApplicationController
   include IssuableCollections
   include ExtractsPath
 
-  before_action :authenticate_user!, except: [:show, :activity, :refs]
-  before_action :project, except: [:new, :create]
-  before_action :repository, except: [:new, :create]
+  before_action :authenticate_user!, except: [:index, :show, :activity, :refs]
+  before_action :project, except: [:index, :new, :create]
+  before_action :repository, except: [:index, :new, :create]
   before_action :assign_ref_vars, only: [:show], if: :repo_exists?
   before_action :tree, only: [:show], if: [:repo_exists?, :project_view_files?]
 
@@ -42,19 +42,16 @@ class ProjectsController < Projects::ApplicationController
   end
 
   def update
-    status = ::Projects::UpdateService.new(@project, current_user, project_params).execute
+    result = ::Projects::UpdateService.new(@project, current_user, project_params).execute
 
     # Refresh the repo in case anything changed
-    @repository = project.repository
+    @repository = @project.repository
 
     respond_to do |format|
-      if status
+      if result[:status] == :success
         flash[:notice] = "Project '#{@project.name}' was successfully updated."
         format.html do
-          redirect_to(
-            edit_project_path(@project),
-            notice: "Project '#{@project.name}' was successfully updated."
-          )
+          redirect_to(edit_project_path(@project))
         end
       else
         format.html { render 'edit' }
@@ -120,44 +117,18 @@ class ProjectsController < Projects::ApplicationController
     return access_denied! unless can?(current_user, :remove_project, @project)
 
     ::Projects::DestroyService.new(@project, current_user, {}).async_execute
-    flash[:alert] = "Project '#{@project.name}' will be deleted."
+    flash[:alert] = "Project '#{@project.name_with_namespace}' will be deleted."
 
     redirect_to dashboard_projects_path
   rescue Projects::DestroyService::DestroyError => ex
     redirect_to edit_project_path(@project), alert: ex.message
   end
 
-  def autocomplete_sources
-    noteable =
-      case params[:type]
-      when 'Issue'
-        IssuesFinder.new(current_user, project_id: @project.id).
-          execute.find_by(iid: params[:type_id])
-      when 'MergeRequest'
-        MergeRequestsFinder.new(current_user, project_id: @project.id).
-          execute.find_by(iid: params[:type_id])
-      when 'Commit'
-        @project.commit(params[:type_id])
-      else
-        nil
-      end
-
-    autocomplete = ::Projects::AutocompleteService.new(@project, current_user)
-    participants = ::Projects::ParticipantsService.new(@project, current_user).execute(noteable)
-
-    @suggestions = {
-      emojis: Gitlab::AwardEmoji.urls,
-      issues: autocomplete.issues,
-      milestones: autocomplete.milestones,
-      mergerequests: autocomplete.merge_requests,
-      labels: autocomplete.labels,
-      members: participants,
-      commands: autocomplete.commands(noteable, params[:type])
-    }
+  def new_issue_address
+    return render_404 unless Gitlab::IncomingEmail.supports_issue_creation?
 
-    respond_to do |format|
-      format.json { render json: @suggestions }
-    end
+    current_user.reset_incoming_email_token!
+    render json: { new_issue_address: @project.new_issue_address(current_user) }
   end
 
   def archive
@@ -260,12 +231,16 @@ class ProjectsController < Projects::ApplicationController
   end
 
   def refs
+    branches = BranchesFinder.new(@repository, params).execute.map(&:name)
+
     options = {
-      'Branches' => @repository.branch_names,
+      'Branches' => branches.take(100),
     }
 
     unless @repository.tag_count.zero?
-      options['Tags'] = VersionSorter.rsort(@repository.tag_names)
+      tags = TagsFinder.new(@repository, params).execute.map(&:name)
+
+      options['Tags'] = tags.take(100)
     end
 
     # If reference is commit id - we should add it to branch/tag selectbox
@@ -292,8 +267,9 @@ class ProjectsController < Projects::ApplicationController
         @project_wiki = @project.wiki
         @wiki_home = @project_wiki.find_page('home', params[:version_id])
       elsif @project.feature_available?(:issues, current_user)
-        @issues = issues_collection
-        @issues = @issues.page(params[:page])
+        @issues = issues_collection.page(params[:page])
+        @collection_type = 'Issue'
+        @issuable_meta_data = issuable_meta_data(@issues, @collection_type)
       end
 
       render :show
@@ -318,26 +294,45 @@ class ProjectsController < Projects::ApplicationController
   end
 
   def project_params
-    project_feature_attributes =
-      {
-        project_feature_attributes:
-          [
-            :issues_access_level, :builds_access_level,
-            :wiki_access_level, :merge_requests_access_level,
-            :snippets_access_level, :repository_access_level
-          ]
-      }
+    params.require(:project)
+      .permit(project_params_ce)
+  end
 
-    params.require(:project).permit(
-      :name, :path, :description, :issues_tracker, :tag_list, :runners_token,
+  def project_params_ce
+    [
+      :avatar,
+      :build_allow_git_fetch,
+      :build_coverage_regex,
+      :build_timeout_in_minutes,
       :container_registry_enabled,
-      :issues_tracker_id, :default_branch,
-      :visibility_level, :import_url, :last_activity_at, :namespace_id, :avatar,
-      :build_allow_git_fetch, :build_timeout_in_minutes, :build_coverage_regex,
-      :public_builds, :only_allow_merge_if_build_succeeds, :request_access_enabled,
+      :default_branch,
+      :description,
+      :import_url,
+      :issues_tracker,
+      :issues_tracker_id,
+      :last_activity_at,
+      :lfs_enabled,
+      :name,
+      :namespace_id,
       :only_allow_merge_if_all_discussions_are_resolved,
-      :lfs_enabled, project_feature_attributes
-    )
+      :only_allow_merge_if_pipeline_succeeds,
+      :printing_merge_request_link_enabled,
+      :path,
+      :public_builds,
+      :request_access_enabled,
+      :runners_token,
+      :tag_list,
+      :visibility_level,
+
+      project_feature_attributes: %i[
+        builds_access_level
+        issues_access_level
+        merge_requests_access_level
+        repository_access_level
+        snippets_access_level
+        wiki_access_level
+      ]
+    ]
   end
 
   def repo_exists?
diff --git a/app/controllers/registrations_controller.rb b/app/controllers/registrations_controller.rb
index 3327f4f2b87..a49a1f50a81 100644
--- a/app/controllers/registrations_controller.rb
+++ b/app/controllers/registrations_controller.rb
@@ -1,5 +1,4 @@
 class RegistrationsController < Devise::RegistrationsController
-  before_action :signup_enabled?
   include Recaptcha::Verify
 
   def new
@@ -7,27 +6,32 @@ class RegistrationsController < Devise::RegistrationsController
   end
 
   def create
-    if !Gitlab::Recaptcha.load_configurations! || verify_recaptcha
-      # To avoid duplicate form fields on the login page, the registration form
-      # names fields using `new_user`, but Devise still wants the params in
-      # `user`.
-      if params["new_#{resource_name}"].present? && params[resource_name].blank?
-        params[resource_name] = params.delete(:"new_#{resource_name}")
-      end
+    # To avoid duplicate form fields on the login page, the registration form
+    # names fields using `new_user`, but Devise still wants the params in
+    # `user`.
+    if params["new_#{resource_name}"].present? && params[resource_name].blank?
+      params[resource_name] = params.delete(:"new_#{resource_name}")
+    end
 
+    if !Gitlab::Recaptcha.load_configurations! || verify_recaptcha
       super
     else
-      flash[:alert] = "There was an error with the reCAPTCHA code below. Please re-enter the code."
+      flash[:alert] = 'There was an error with the reCAPTCHA. Please solve the reCAPTCHA again.'
       flash.delete :recaptcha_error
       render action: 'new'
     end
+  rescue Gitlab::Access::AccessDeniedError
+    redirect_to(new_user_session_path)
   end
 
   def destroy
-    DeleteUserService.new(current_user).execute(current_user)
+    Users::DestroyService.new(current_user).execute(current_user)
 
     respond_to do |format|
-      format.html { redirect_to new_user_session_path, notice: "Account successfully removed." }
+      format.html do
+        session.try(:destroy)
+        redirect_to new_user_session_path, notice: "Account successfully removed."
+      end
     end
   end
 
@@ -47,14 +51,8 @@ class RegistrationsController < Devise::RegistrationsController
 
   private
 
-  def signup_enabled?
-    unless current_application_settings.signup_enabled?
-      redirect_to(new_user_session_path)
-    end
-  end
-
   def sign_up_params
-    params.require(:user).permit(:username, :email, :name, :password, :password_confirmation)
+    params.require(:user).permit(:username, :email, :email_confirmation, :name, :password)
   end
 
   def resource_name
@@ -62,7 +60,7 @@ class RegistrationsController < Devise::RegistrationsController
   end
 
   def resource
-    @resource ||= User.new(sign_up_params)
+    @resource ||= Users::CreateService.new(current_user, sign_up_params).build
   end
 
   def devise_mapping
diff --git a/app/controllers/root_controller.rb b/app/controllers/root_controller.rb
index 627be74a38f..1b4545e4a49 100644
--- a/app/controllers/root_controller.rb
+++ b/app/controllers/root_controller.rb
@@ -7,7 +7,10 @@
 # For users who haven't customized the setting, we simply delegate to
 # `DashboardController#show`, which is the default.
 class RootController < Dashboard::ProjectsController
-  before_action :redirect_to_custom_dashboard, only: [:index]
+  skip_before_action :authenticate_user!, only: [:index]
+
+  before_action :redirect_unlogged_user, if: -> { current_user.nil? }
+  before_action :redirect_logged_user, if: -> { current_user.present? }
 
   def index
     super
@@ -15,23 +18,38 @@ class RootController < Dashboard::ProjectsController
 
   private
 
-  def redirect_to_custom_dashboard
-    return unless current_user
+  def redirect_unlogged_user
+    if redirect_to_home_page_url?
+      redirect_to(current_application_settings.home_page_url)
+    else
+      redirect_to(new_user_session_path)
+    end
+  end
 
+  def redirect_logged_user
     case current_user.dashboard
     when 'stars'
       flash.keep
-      redirect_to starred_dashboard_projects_path
+      redirect_to(starred_dashboard_projects_path)
     when 'project_activity'
-      redirect_to activity_dashboard_path
+      redirect_to(activity_dashboard_path)
     when 'starred_project_activity'
-      redirect_to activity_dashboard_path(filter: 'starred')
+      redirect_to(activity_dashboard_path(filter: 'starred'))
     when 'groups'
-      redirect_to dashboard_groups_path
+      redirect_to(dashboard_groups_path)
     when 'todos'
-      redirect_to dashboard_todos_path
-    else
-      return
+      redirect_to(dashboard_todos_path)
     end
   end
+
+  def redirect_to_home_page_url?
+    # If user is not signed-in and tries to access root_path - redirect him to landing page
+    # Don't redirect to the default URL to prevent endless redirections
+    return false unless current_application_settings.home_page_url.present?
+
+    home_page_url = current_application_settings.home_page_url.chomp('/')
+    root_urls = [Gitlab.config.gitlab['url'].chomp('/'), root_url.chomp('/')]
+
+    root_urls.exclude?(home_page_url)
+  end
 end
diff --git a/app/controllers/search_controller.rb b/app/controllers/search_controller.rb
index d01e0dedf52..4a579601785 100644
--- a/app/controllers/search_controller.rb
+++ b/app/controllers/search_controller.rb
@@ -1,50 +1,26 @@
 class SearchController < ApplicationController
-  skip_before_action :authenticate_user!, :reject_blocked!
+  skip_before_action :authenticate_user!
 
   include SearchHelper
 
   layout 'search'
 
   def show
-    if params[:project_id].present?
-      @project = Project.find_by(id: params[:project_id])
-      @project = nil unless can?(current_user, :download_code, @project)
-    end
+    search_service = SearchService.new(current_user, params)
 
-    if params[:group_id].present?
-      @group = Group.find_by(id: params[:group_id])
-      @group = nil unless can?(current_user, :read_group, @group)
-    end
+    @project = search_service.project
+    @group = search_service.group
 
-    return if params[:search].nil? || params[:search].blank?
+    return if params[:search].blank?
 
     @search_term = params[:search]
 
-    @scope = params[:scope]
-    @show_snippets = params[:snippets].eql? 'true'
-
-    @search_results =
-      if @project
-        unless %w(blobs notes issues merge_requests milestones wiki_blobs
-                  commits).include?(@scope)
-          @scope = 'blobs'
-        end
-
-        Search::ProjectService.new(@project, current_user, params).execute
-      elsif @show_snippets
-        unless %w(snippet_blobs snippet_titles).include?(@scope)
-          @scope = 'snippet_blobs'
-        end
-
-        Search::SnippetService.new(current_user, params).execute
-      else
-        unless %w(projects issues merge_requests milestones).include?(@scope)
-          @scope = 'projects'
-        end
-        Search::GlobalService.new(current_user, params).execute
-      end
-
-    @search_objects = @search_results.objects(@scope, params[:page])
+    @scope = search_service.scope
+    @show_snippets = search_service.show_snippets?
+    @search_results = search_service.search_results
+    @search_objects = search_service.search_objects
+
+    check_single_commit_result
   end
 
   def autocomplete
@@ -59,4 +35,16 @@ class SearchController < ApplicationController
 
     render json: search_autocomplete_opts(term).to_json
   end
+
+  private
+
+  def check_single_commit_result
+    if @search_results.single_commit_result?
+      only_commit = @search_results.objects('commits').first
+      query = params[:search].strip.downcase
+      found_by_commit_sha = Commit.valid_hash?(query) && only_commit.sha.start_with?(query)
+
+      redirect_to namespace_project_commit_path(@project.namespace, @project, only_commit) if found_by_commit_sha
+    end
+  end
 end
diff --git a/app/controllers/sent_notifications_controller.rb b/app/controllers/sent_notifications_controller.rb
index 3085ff33aba..04c36b3ebfe 100644
--- a/app/controllers/sent_notifications_controller.rb
+++ b/app/controllers/sent_notifications_controller.rb
@@ -12,7 +12,7 @@ class SentNotificationsController < ApplicationController
 
   def unsubscribe_and_redirect
     noteable = @sent_notification.noteable
-    noteable.unsubscribe(@sent_notification.recipient)
+    noteable.unsubscribe(@sent_notification.recipient, @sent_notification.project)
 
     flash[:notice] = "You have been unsubscribed from this thread."
 
diff --git a/app/controllers/sessions_controller.rb b/app/controllers/sessions_controller.rb
index 5d7ecfeacf4..d8561871098 100644
--- a/app/controllers/sessions_controller.rb
+++ b/app/controllers/sessions_controller.rb
@@ -15,11 +15,12 @@ class SessionsController < Devise::SessionsController
 
   def new
     set_minimum_password_length
-    if Gitlab.config.ldap.enabled
-      @ldap_servers = Gitlab::LDAP::Config.servers
-    else
-      @ldap_servers = []
-    end
+    @ldap_servers =
+      if Gitlab.config.ldap.enabled
+        Gitlab::LDAP::Config.servers
+      else
+        []
+      end
 
     super
   end
@@ -31,10 +32,18 @@ class SessionsController < Devise::SessionsController
         resource.update_attributes(reset_password_token: nil,
                                    reset_password_sent_at: nil)
       end
+      # hide the signed-in notification
+      flash[:notice] = nil
       log_audit_event(current_user, with: authentication_method)
     end
   end
 
+  def destroy
+    super
+    # hide the signed_out notice
+    flash[:notice] = nil
+  end
+
   private
 
   # Handle an "initial setup" state, where there's only one user, it's an admin,
@@ -70,7 +79,7 @@ class SessionsController < Devise::SessionsController
       if request.referer.present? && (params['redirect_to_referer'] == 'yes')
         referer_uri = URI(request.referer)
         if referer_uri.host == Gitlab.config.gitlab.host
-          referer_uri.path
+          referer_uri.request_uri
         else
           request.fullpath
         end
@@ -106,7 +115,7 @@ class SessionsController < Devise::SessionsController
 
   def valid_otp_attempt?(user)
     user.validate_and_consume_otp!(user_params[:otp_attempt]) ||
-    user.invalidate_otp_backup_code!(user_params[:otp_attempt])
+      user.invalidate_otp_backup_code!(user_params[:otp_attempt])
   end
 
   def log_audit_event(user, options = {})
diff --git a/app/controllers/snippets_controller.rb b/app/controllers/snippets_controller.rb
index dee57e4a388..f3fd3da8b20 100644
--- a/app/controllers/snippets_controller.rb
+++ b/app/controllers/snippets_controller.rb
@@ -1,5 +1,7 @@
 class SnippetsController < ApplicationController
   include ToggleAwardEmoji
+  include SpammableActions
+  include SnippetsActions
 
   before_action :snippet, only: [:show, :edit, :destroy, :update, :raw, :download]
 
@@ -21,13 +23,14 @@ class SnippetsController < ApplicationController
     if params[:username].present?
       @user = User.find_by(username: params[:username])
 
-      render_404 and return unless @user
+      return render_404 unless @user
 
       @snippets = SnippetsFinder.new.execute(current_user, {
         filter: :by_user,
         user: @user,
-        scope: params[:scope] }).
-      page(params[:page])
+        scope: params[:scope]
+      })
+      .page(params[:page])
 
       render 'index'
     else
@@ -40,19 +43,19 @@ class SnippetsController < ApplicationController
   end
 
   def create
-    @snippet = CreateSnippetService.new(nil, current_user,
-                                        snippet_params).execute
+    create_params = snippet_params.merge(spammable_params)
 
-    respond_with @snippet.becomes(Snippet)
-  end
+    @snippet = CreateSnippetService.new(nil, current_user, create_params).execute
 
-  def edit
+    recaptcha_check_with_fallback { render :new }
   end
 
   def update
-    UpdateSnippetService.new(nil, current_user, @snippet,
-                             snippet_params).execute
-    respond_with @snippet.becomes(Snippet)
+    update_params = snippet_params.merge(spammable_params)
+
+    UpdateSnippetService.new(nil, current_user, @snippet, update_params).execute
+
+    recaptcha_check_with_fallback { render :edit }
   end
 
   def show
@@ -66,18 +69,9 @@ class SnippetsController < ApplicationController
     redirect_to snippets_path
   end
 
-  def raw
-    send_data(
-      @snippet.content,
-      type: 'text/plain; charset=utf-8',
-      disposition: 'inline',
-      filename: @snippet.sanitized_file_name
-    )
-  end
-
   def download
     send_data(
-      @snippet.content,
+      convert_line_endings(@snippet.content),
       type: 'text/plain; charset=utf-8',
       filename: @snippet.sanitized_file_name
     )
@@ -96,6 +90,7 @@ class SnippetsController < ApplicationController
                  end
   end
   alias_method :awardable, :snippet
+  alias_method :spammable, :snippet
 
   def authorize_read_snippet!
     authenticate_user! unless can?(current_user, :read_personal_snippet, @snippet)
diff --git a/app/controllers/uploads_controller.rb b/app/controllers/uploads_controller.rb
index 509f4f412ca..f1bfd574f04 100644
--- a/app/controllers/uploads_controller.rb
+++ b/app/controllers/uploads_controller.rb
@@ -14,6 +14,8 @@ class UploadsController < ApplicationController
     end
 
     disposition = uploader.image? ? 'inline' : 'attachment'
+
+    expires_in 0.seconds, must_revalidate: true, private: true
     send_file uploader.file.path, disposition: disposition
   end
 
diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb
index 6a881b271d7..2683614d2e8 100644
--- a/app/controllers/users_controller.rb
+++ b/app/controllers/users_controller.rb
@@ -39,7 +39,7 @@ class UsersController < ApplicationController
       format.html { render 'show' }
       format.json do
         render json: {
-          html: view_to_html_string("shared/projects/_list", projects: @projects, remote: true)
+          html: view_to_html_string("shared/projects/_list", projects: @projects)
         }
       end
     end
@@ -65,7 +65,7 @@ class UsersController < ApplicationController
       format.html { render 'show' }
       format.json do
         render json: {
-          html: view_to_html_string("snippets/_snippets", collection: @snippets, remote: true)
+          html: view_to_html_string("snippets/_snippets", collection: @snippets)
         }
       end
     end
@@ -86,7 +86,7 @@ class UsersController < ApplicationController
   end
 
   def exists
-    render json: { exists: Namespace.where(path: params[:username].downcase).any? }
+    render json: { exists: !!Namespace.find_by_path_or_name(params[:username]) }
   end
 
   private
@@ -104,8 +104,7 @@ class UsersController < ApplicationController
   end
 
   def contributions_calendar
-    @contributions_calendar ||= Gitlab::ContributionsCalendar.
-      new(contributed_projects, user)
+    @contributions_calendar ||= Gitlab::ContributionsCalendar.new(user, current_user)
   end
 
   def load_events
diff --git a/app/finders/environments_finder.rb b/app/finders/environments_finder.rb
new file mode 100644
index 00000000000..a59f8c1efa3
--- /dev/null
+++ b/app/finders/environments_finder.rb
@@ -0,0 +1,55 @@
+class EnvironmentsFinder
+  attr_reader :project, :current_user, :params
+
+  def initialize(project, current_user, params = {})
+    @project, @current_user, @params = project, current_user, params
+  end
+
+  def execute
+    deployments = project.deployments
+    deployments =
+      if ref
+        deployments_query = params[:with_tags] ? 'ref = :ref OR tag IS TRUE' : 'ref = :ref'
+        deployments.where(deployments_query, ref: ref.to_s)
+      elsif commit
+        deployments.where(sha: commit.sha)
+      else
+        deployments.none
+      end
+
+    environment_ids = deployments
+      .group(:environment_id)
+      .select(:environment_id)
+
+    environments = project.environments.available
+      .where(id: environment_ids).order_by_last_deployed_at.to_a
+
+    environments.select! do |environment|
+      Ability.allowed?(current_user, :read_environment, environment)
+    end
+
+    if ref && commit
+      environments.select! do |environment|
+        environment.includes_commit?(commit)
+      end
+    end
+
+    if ref && params[:recently_updated]
+      environments.select! do |environment|
+        environment.recently_updated_on_branch?(ref)
+      end
+    end
+
+    environments
+  end
+
+  private
+
+  def ref
+    params[:ref].try(:to_s)
+  end
+
+  def commit
+    params[:commit]
+  end
+end
diff --git a/app/finders/group_finder.rb b/app/finders/group_finder.rb
new file mode 100644
index 00000000000..24c84d2d1aa
--- /dev/null
+++ b/app/finders/group_finder.rb
@@ -0,0 +1,17 @@
+class GroupFinder
+  include Gitlab::Allowable
+
+  def initialize(current_user)
+    @current_user = current_user
+  end
+
+  def execute(*params)
+    group = Group.find_by(*params)
+
+    if can?(@current_user, :read_group, group)
+      group
+    else
+      nil
+    end
+  end
+end
diff --git a/app/finders/group_members_finder.rb b/app/finders/group_members_finder.rb
new file mode 100644
index 00000000000..fce3775f40e
--- /dev/null
+++ b/app/finders/group_members_finder.rb
@@ -0,0 +1,20 @@
+class GroupMembersFinder
+  def initialize(group)
+    @group = group
+  end
+
+  def execute
+    group_members = @group.members
+
+    return group_members unless @group.parent
+
+    parents_members = GroupMember.non_request.
+      where(source_id: @group.ancestors.select(:id)).
+      where.not(user_id: @group.users.select(:id))
+
+    wheres = ["members.id IN (#{group_members.select(:id).to_sql})"]
+    wheres << "members.id IN (#{parents_members.select(:id).to_sql})"
+
+    GroupMember.where(wheres.join(' OR '))
+  end
+end
diff --git a/app/finders/group_projects_finder.rb b/app/finders/group_projects_finder.rb
index aa8f4c1d0e4..3b9a421b118 100644
--- a/app/finders/group_projects_finder.rb
+++ b/app/finders/group_projects_finder.rb
@@ -18,7 +18,7 @@ class GroupProjectsFinder < UnionFinder
     projects = []
 
     if current_user
-      if @group.users.include?(current_user) || current_user.admin?
+      if @group.users.include?(current_user)
         projects << @group.projects unless only_shared
         projects << @group.shared_projects unless only_owned
       else
diff --git a/app/finders/groups_finder.rb b/app/finders/groups_finder.rb
index 4e43f42e9e1..d932a17883f 100644
--- a/app/finders/groups_finder.rb
+++ b/app/finders/groups_finder.rb
@@ -2,7 +2,7 @@ class GroupsFinder < UnionFinder
   def execute(current_user = nil)
     segments = all_groups(current_user)
 
-    find_union(segments, Group).order_id_desc
+    find_union(segments, Group).with_route.order_id_desc
   end
 
   private
diff --git a/app/finders/issuable_finder.rb b/app/finders/issuable_finder.rb
index cc2073081b5..f7ebb1807d7 100644
--- a/app/finders/issuable_finder.rb
+++ b/app/finders/issuable_finder.rb
@@ -7,7 +7,7 @@
 #   current_user - which user use
 #   params:
 #     scope: 'created-by-me' or 'assigned-to-me' or 'all'
-#     state: 'open' or 'closed' or 'all'
+#     state: 'opened' or 'closed' or 'all'
 #     group_id: integer
 #     project_id: integer
 #     milestone_title: string
@@ -15,15 +15,15 @@
 #     search: string
 #     label_name: string
 #     sort: string
+#     non_archived: boolean
+#     iids: integer[]
 #
-require_relative 'projects_finder'
-
 class IssuableFinder
-  NONE = '0'
+  NONE = '0'.freeze
 
   attr_accessor :current_user, :params
 
-  def initialize(current_user, params)
+  def initialize(current_user, params = {})
     @current_user = current_user
     @params = params
   end
@@ -33,16 +33,58 @@ class IssuableFinder
     items = by_scope(items)
     items = by_state(items)
     items = by_group(items)
-    items = by_project(items)
     items = by_search(items)
-    items = by_milestone(items)
     items = by_assignee(items)
     items = by_author(items)
-    items = by_label(items)
     items = by_due_date(items)
+    items = by_non_archived(items)
+    items = by_iids(items)
+    items = by_milestone(items)
+    items = by_label(items)
+
+    # Filtering by project HAS TO be the last because we use the project IDs yielded by the issuable query thus far
+    items = by_project(items)
     sort(items)
   end
 
+  def find(*params)
+    execute.find(*params)
+  end
+
+  def find_by(*params)
+    execute.find_by(*params)
+  end
+
+  # We often get counts for each state by running a query per state, and
+  # counting those results. This is typically slower than running one query
+  # (even if that query is slower than any of the individual state queries) and
+  # grouping and counting within that query.
+  #
+  def count_by_state
+    count_params = params.merge(state: nil, sort: nil)
+    labels_count = label_names.any? ? label_names.count : 1
+    finder = self.class.new(current_user, count_params)
+    counts = Hash.new(0)
+
+    # Searching by label includes a GROUP BY in the query, but ours will be last
+    # because it is added last. Searching by multiple labels also includes a row
+    # per issuable, so we have to count those in Ruby - which is bad, but still
+    # better than performing multiple queries.
+    #
+    finder.execute.reorder(nil).group(:state).count.each do |key, value|
+      counts[Array(key).last.to_sym] += value / labels_count
+    end
+
+    counts[:all] = counts.values.sum
+    counts[:opened] += counts[:reopened]
+
+    counts
+  end
+
+  def find_by!(*params)
+    execute.find_by!(*params)
+  end
+
   def group
     return @group if defined?(@group)
 
@@ -61,31 +103,25 @@ class IssuableFinder
   def project
     return @project if defined?(@project)
 
-    if project?
-      @project = Project.find(params[:project_id])
-
-      unless Ability.allowed?(current_user, :read_project, @project)
-        @project = nil
-      end
-    else
-      @project = nil
-    end
+    project = Project.find(params[:project_id])
+    project = nil unless Ability.allowed?(current_user, :"read_#{klass.to_ability_name}", project)
 
-    @project
+    @project = project
   end
 
-  def projects
-    return @projects if defined?(@projects)
+  def projects(items = nil)
+    return @projects = project if project?
 
-    if project?
-      @projects = project
-    elsif current_user && params[:authorized_only].presence && !current_user_related?
-      @projects = current_user.authorized_projects.reorder(nil)
-    elsif group
-      @projects = GroupProjectsFinder.new(group).execute(current_user).reorder(nil)
-    else
-      @projects = ProjectsFinder.new.execute(current_user).reorder(nil)
-    end
+    projects =
+      if current_user && params[:authorized_only].presence && !current_user_related?
+        current_user.authorized_projects
+      elsif group
+        GroupProjectsFinder.new(group).execute(current_user)
+      else
+        projects_finder.execute(current_user, item_project_ids(items))
+      end
+
+    @projects = projects.with_feature_available_for_user(klass, current_user).reorder(nil)
   end
 
   def search
@@ -132,31 +168,53 @@ class IssuableFinder
       end
   end
 
-  def assignee?
-    params[:assignee_id].present?
+  def assignee_id?
+    params[:assignee_id].present? && params[:assignee_id] != NONE
+  end
+
+  def assignee_username?
+    params[:assignee_username].present? && params[:assignee_username] != NONE
+  end
+
+  def no_assignee?
+    # Assignee_id takes precedence over assignee_username
+    params[:assignee_id] == NONE || params[:assignee_username] == NONE
   end
 
   def assignee
     return @assignee if defined?(@assignee)
 
     @assignee =
-      if assignee? && params[:assignee_id] != NONE
-        User.find(params[:assignee_id])
+      if assignee_id?
+        User.find_by(id: params[:assignee_id])
+      elsif assignee_username?
+        User.find_by(username: params[:assignee_username])
       else
         nil
       end
   end
 
-  def author?
-    params[:author_id].present?
+  def author_id?
+    params[:author_id].present? && params[:author_id] != NONE
+  end
+
+  def author_username?
+    params[:author_username].present? && params[:author_username] != NONE
+  end
+
+  def no_author?
+    # author_id takes precedence over author_username
+    params[:author_id] == NONE || params[:author_username] == NONE
   end
 
   def author
     return @author if defined?(@author)
 
     @author =
-      if author? && params[:author_id] != NONE
-        User.find(params[:author_id])
+      if author_id?
+        User.find_by(id: params[:author_id])
+      elsif author_username?
+        User.find_by(username: params[:author_username])
       else
         nil
       end
@@ -180,10 +238,13 @@ class IssuableFinder
   end
 
   def by_state(items)
-    params[:state] ||= 'all'
-
-    if items.respond_to?(params[:state])
-      items.public_send(params[:state])
+    case params[:state].to_s
+    when 'closed'
+      items.closed
+    when 'merged'
+      items.respond_to?(:merged) ? items.merged : items.closed
+    when 'opened'
+      items.opened
     else
       items
     end
@@ -197,9 +258,9 @@ class IssuableFinder
   def by_project(items)
     items =
       if project?
-        items.of_projects(projects).references_project
-      elsif projects
-        items.merge(projects.reorder(nil)).join_project
+        items.of_projects(projects(items)).references_project
+      elsif projects(items)
+        items.merge(projects(items).reorder(nil)).join_project
       else
         items.none
       end
@@ -208,16 +269,11 @@ class IssuableFinder
   end
 
   def by_search(items)
-    if search
-      items =
-        if search =~ iid_pattern
-          items.where(iid: $~[:iid])
-        else
-          items.full_search(search)
-        end
-    end
+    search ? items.full_search(search) : items
+  end
 
-    items
+  def by_iids(items)
+    params[:iids].present? ? items.where(iid: params[:iids]) : items
   end
 
   def sort(items)
@@ -227,16 +283,24 @@ class IssuableFinder
   end
 
   def by_assignee(items)
-    if assignee?
-      items = items.where(assignee_id: assignee.try(:id))
+    if assignee
+      items = items.where(assignee_id: assignee.id)
+    elsif no_assignee?
+      items = items.where(assignee_id: nil)
+    elsif assignee_id? || assignee_username? # assignee not found
+      items = items.none
     end
 
     items
   end
 
   def by_author(items)
-    if author?
-      items = items.where(author_id: author.try(:id))
+    if author
+      items = items.where(author_id: author.id)
+    elsif no_author?
+      items = items.where(author_id: nil)
+    elsif author_id? || author_username? # author not found
+      items = items.none
     end
 
     items
@@ -246,18 +310,25 @@ class IssuableFinder
     params[:milestone_title] == Milestone::Upcoming.name
   end
 
+  def filter_by_started_milestone?
+    params[:milestone_title] == Milestone::Started.name
+  end
+
   def by_milestone(items)
     if milestones?
       if filter_by_no_milestone?
         items = items.left_joins_milestones.where(milestone_id: [-1, nil])
       elsif filter_by_upcoming_milestone?
-        upcoming_ids = Milestone.upcoming_ids_by_projects(projects)
+        upcoming_ids = Milestone.upcoming_ids_by_projects(projects(items))
         items = items.left_joins_milestones.where(milestone_id: upcoming_ids)
+      elsif filter_by_started_milestone?
+        items = items.left_joins_milestones.where('milestones.start_date <= NOW()')
       else
         items = items.with_milestone(params[:milestone_title])
+        items_projects = projects(items)
 
-        if projects
-          items = items.where(milestones: { project_id: projects })
+        if items_projects
+          items = items.where(milestones: { project_id: items_projects })
         end
       end
     end
@@ -271,9 +342,10 @@ class IssuableFinder
         items = items.without_label
       else
         items = items.with_label(label_names, params[:sort])
+        items_projects = projects(items)
 
-        if projects
-          label_ids = LabelsFinder.new(current_user, project_ids: projects).execute(skip_authorization: true).select(:id)
+        if items_projects
+          label_ids = LabelsFinder.new(current_user, project_ids: items_projects).execute(skip_authorization: true).select(:id)
           items = items.where(labels: { id: label_ids })
         end
       end
@@ -326,7 +398,15 @@ class IssuableFinder
     end
   end
 
+  def by_non_archived(items)
+    params[:non_archived].present? ? items.non_archived : items
+  end
+
   def current_user_related?
     params[:scope] == 'created-by-me' || params[:scope] == 'authored' || params[:scope] == 'assigned-to-me'
   end
+
+  def projects_finder
+    @projects_finder ||= ProjectsFinder.new
+  end
 end
diff --git a/app/finders/issues_finder.rb b/app/finders/issues_finder.rb
index be00a219205..08713272947 100644
--- a/app/finders/issues_finder.rb
+++ b/app/finders/issues_finder.rb
@@ -23,10 +23,26 @@ class IssuesFinder < IssuableFinder
   private
 
   def init_collection
-    Issue.visible_to_user(current_user)
+    IssuesFinder.not_restricted_by_confidentiality(current_user)
   end
 
-  def iid_pattern
-    @iid_pattern ||= %r{\A#{Regexp.escape(Issue.reference_prefix)}(?<iid>\d+)\z}
+  def self.not_restricted_by_confidentiality(user)
+    return Issue.where('issues.confidential IS NULL OR issues.confidential IS FALSE') if user.blank?
+
+    return Issue.all if user.admin?
+
+    Issue.where('
+      issues.confidential IS NULL
+      OR issues.confidential IS FALSE
+      OR (issues.confidential = TRUE
+        AND (issues.author_id = :user_id
+          OR issues.assignee_id = :user_id
+          OR issues.project_id IN(:project_ids)))',
+      user_id: user.id,
+      project_ids: user.authorized_projects(Gitlab::Access::REPORTER).select(:id))
+  end
+
+  def item_project_ids(items)
+    items&.reorder(nil)&.select(:project_id)
   end
 end
diff --git a/app/finders/labels_finder.rb b/app/finders/labels_finder.rb
index 865f093f04a..e52083f86e4 100644
--- a/app/finders/labels_finder.rb
+++ b/app/finders/labels_finder.rb
@@ -6,7 +6,7 @@ class LabelsFinder < UnionFinder
 
   def execute(skip_authorization: false)
     @skip_authorization = skip_authorization
-    items = find_union(label_ids, Label)
+    items = find_union(label_ids, Label) || Label.none
     items = with_title(items)
     sort(items)
   end
@@ -18,9 +18,20 @@ class LabelsFinder < UnionFinder
   def label_ids
     label_ids = []
 
-    if project
-      label_ids << project.group.labels if project.group.present?
-      label_ids << project.labels
+    if project?
+      if project
+        if project.group.present?
+          labels_table = Label.arel_table
+
+          label_ids << Label.where(
+            labels_table[:type].eq('GroupLabel').and(labels_table[:group_id].eq(project.group.id)).or(
+              labels_table[:type].eq('ProjectLabel').and(labels_table[:project_id].eq(project.id))
+            )
+          )
+        else
+          label_ids << project.labels
+        end
+      end
     else
       label_ids << Label.where(group_id: projects.group_ids)
       label_ids << Label.where(project_id: projects.select(:id))
@@ -40,16 +51,16 @@ class LabelsFinder < UnionFinder
     items.where(title: title)
   end
 
-  def group_id
-    params[:group_id].presence
+  def group?
+    params[:group_id].present?
   end
 
-  def project_id
-    params[:project_id].presence
+  def project?
+    params[:project_id].present?
   end
 
-  def projects_ids
-    params[:project_ids]
+  def projects?
+    params[:project_ids].present?
   end
 
   def title
@@ -59,8 +70,9 @@ class LabelsFinder < UnionFinder
   def project
     return @project if defined?(@project)
 
-    if project_id
-      @project = find_project
+    if project?
+      @project = Project.find(params[:project_id])
+      @project = nil unless authorized_to_read_labels?(@project)
     else
       @project = nil
     end
@@ -68,26 +80,20 @@ class LabelsFinder < UnionFinder
     @project
   end
 
-  def find_project
-    if skip_authorization
-      Project.find_by(id: project_id)
-    else
-      available_projects.find_by(id: project_id)
-    end
-  end
-
   def projects
     return @projects if defined?(@projects)
 
-    @projects = skip_authorization ? Project.all : available_projects
-    @projects = @projects.in_namespace(group_id) if group_id
-    @projects = @projects.where(id: projects_ids) if projects_ids
+    @projects = skip_authorization ? Project.all : ProjectsFinder.new.execute(current_user)
+    @projects = @projects.in_namespace(params[:group_id]) if group?
+    @projects = @projects.where(id: params[:project_ids]) if projects?
     @projects = @projects.reorder(nil)
 
     @projects
   end
 
-  def available_projects
-    @available_projects ||= ProjectsFinder.new.execute(current_user)
+  def authorized_to_read_labels?(project)
+    return true if skip_authorization
+
+    Ability.allowed?(current_user, :read_label, project)
   end
 end
diff --git a/app/finders/members_finder.rb b/app/finders/members_finder.rb
new file mode 100644
index 00000000000..af24045886e
--- /dev/null
+++ b/app/finders/members_finder.rb
@@ -0,0 +1,35 @@
+class MembersFinder
+  attr_reader :project, :current_user, :group
+
+  def initialize(project, current_user)
+    @project = project
+    @current_user = current_user
+    @group = project.group
+  end
+
+  def execute
+    project_members = project.project_members
+    project_members = project_members.non_invite unless can?(current_user, :admin_project, project)
+    wheres = ["members.id IN (#{project_members.select(:id).to_sql})"]
+
+    if group
+      # We need `.where.not(user_id: nil)` here otherwise when a group has an
+      # invitee, it would make the following query return 0 rows since a NULL
+      # user_id would be present in the subquery
+      # See http://stackoverflow.com/questions/129077/not-in-clause-and-null-values
+      non_null_user_ids = project_members.where.not(user_id: nil).select(:user_id)
+
+      group_members = GroupMembersFinder.new(group).execute
+      group_members = group_members.where.not(user_id: non_null_user_ids)
+      group_members = group_members.non_invite unless can?(current_user, :admin_group, group)
+
+      wheres << "members.id IN (#{group_members.select(:id).to_sql})"
+    end
+
+    Member.where(wheres.join(' OR '))
+  end
+
+  def can?(*args)
+    Ability.allowed?(*args)
+  end
+end
diff --git a/app/finders/merge_requests_finder.rb b/app/finders/merge_requests_finder.rb
index 3b254e7d9d5..1eec45d9cb5 100644
--- a/app/finders/merge_requests_finder.rb
+++ b/app/finders/merge_requests_finder.rb
@@ -14,6 +14,7 @@
 #     search: string
 #     label_name: string
 #     sort: string
+#     non_archived: boolean
 #
 class MergeRequestsFinder < IssuableFinder
   def klass
@@ -22,11 +23,7 @@ class MergeRequestsFinder < IssuableFinder
 
   private
 
-  def iid_pattern
-    @iid_pattern ||= %r{\A[
-      #{Regexp.escape(MergeRequest.reference_prefix)}
-      #{Regexp.escape(Issue.reference_prefix)}
-      ](?<iid>\d+)\z
-    }x
+  def item_project_ids(items)
+    items&.reorder(nil)&.select(:target_project_id)
   end
 end
diff --git a/app/finders/notes_finder.rb b/app/finders/notes_finder.rb
index 0b7832e6583..6630c6384f2 100644
--- a/app/finders/notes_finder.rb
+++ b/app/finders/notes_finder.rb
@@ -1,27 +1,103 @@
 class NotesFinder
   FETCH_OVERLAP = 5.seconds
 
-  def execute(project, current_user, params)
-    target_type = params[:target_type]
-    target_id   = params[:target_id]
-    # Default to 0 to remain compatible with old clients
-    last_fetched_at = Time.at(params.fetch(:last_fetched_at, 0).to_i)
-
-    notes =
-      case target_type
-      when "commit"
-        project.notes.for_commit_id(target_id).non_diff_notes
-      when "issue"
-        project.issues.visible_to_user(current_user).find(target_id).notes.inc_author
-      when "merge_request"
-        project.merge_requests.find(target_id).mr_and_commit_notes.inc_author
-      when "snippet", "project_snippet"
-        project.snippets.find(target_id).notes
+  # Used to filter Notes
+  # When used with target_type and target_id this returns notes specifically for the controller
+  #
+  # Arguments:
+  #   current_user - which user check authorizations with
+  #   project - which project to look for notes on
+  #   params:
+  #     target_type: string
+  #     target_id: integer
+  #     last_fetched_at: time
+  #     search: string
+  #
+  def initialize(project, current_user, params = {})
+    @project = project
+    @current_user = current_user
+    @params = params
+    init_collection
+  end
+
+  def execute
+    @notes = since_fetch_at(@params[:last_fetched_at]) if @params[:last_fetched_at]
+    @notes
+  end
+
+  private
+
+  def init_collection
+    @notes =
+      if @params[:target_id]
+        on_target(@params[:target_type], @params[:target_id])
+      else
+        notes_of_any_type
+      end
+  end
+
+  def notes_of_any_type
+    types = %w(commit issue merge_request snippet)
+    note_relations = types.map { |t| notes_for_type(t) }
+    note_relations.map!{ |notes| search(@params[:search], notes) } if @params[:search]
+    UnionFinder.new.find_union(note_relations, Note)
+  end
+
+  def noteables_for_type(noteable_type)
+    case noteable_type
+    when "issue"
+      IssuesFinder.new(@current_user, project_id: @project.id).execute
+    when "merge_request"
+      MergeRequestsFinder.new(@current_user, project_id: @project.id).execute
+    when "snippet", "project_snippet"
+      SnippetsFinder.new.execute(@current_user, filter: :by_project, project: @project)
+    else
+      raise 'invalid target_type'
+    end
+  end
+
+  def notes_for_type(noteable_type)
+    if noteable_type == "commit"
+      if Ability.allowed?(@current_user, :download_code, @project)
+        @project.notes.where(noteable_type: 'Commit')
+      else
+        Note.none
+      end
+    else
+      finder = noteables_for_type(noteable_type)
+      @project.notes.where(noteable_type: finder.base_class.name, noteable_id: finder.reorder(nil))
+    end
+  end
+
+  def on_target(target_type, target_id)
+    if target_type == "commit"
+      notes_for_type('commit').for_commit_id(target_id)
+    else
+      target = noteables_for_type(target_type).find(target_id)
+
+      if target.respond_to?(:related_notes)
+        target.related_notes
       else
-        raise 'invalid target_type'
+        target.notes
       end
+    end
+  end
+
+  # Searches for notes matching the given query.
+  #
+  # This method uses ILIKE on PostgreSQL and LIKE on MySQL.
+  #
+  def search(query, notes_relation = @notes)
+    pattern = "%#{query}%"
+    notes_relation.where(Note.arel_table[:note].matches(pattern))
+  end
+
+  # Notes changed since last fetch
+  # Uses overlapping intervals to avoid worrying about race conditions
+  def since_fetch_at(fetch_time)
+    # Default to 0 to remain compatible with old clients
+    last_fetched_at = Time.at(@params.fetch(:last_fetched_at, 0).to_i)
 
-    # Use overlapping intervals to avoid worrying about race conditions
-    notes.where('updated_at > ?', last_fetched_at - FETCH_OVERLAP).fresh
+    @notes.where('updated_at > ?', last_fetched_at - FETCH_OVERLAP).fresh
   end
 end
diff --git a/app/finders/personal_access_tokens_finder.rb b/app/finders/personal_access_tokens_finder.rb
new file mode 100644
index 00000000000..760166b453f
--- /dev/null
+++ b/app/finders/personal_access_tokens_finder.rb
@@ -0,0 +1,45 @@
+class PersonalAccessTokensFinder
+  attr_accessor :params
+
+  delegate :build, :find, :find_by, to: :execute
+
+  def initialize(params = {})
+    @params = params
+  end
+
+  def execute
+    tokens = PersonalAccessToken.all
+    tokens = by_user(tokens)
+    tokens = by_impersonation(tokens)
+    by_state(tokens)
+  end
+
+  private
+
+  def by_user(tokens)
+    return tokens unless @params[:user]
+    tokens.where(user: @params[:user])
+  end
+
+  def by_impersonation(tokens)
+    case @params[:impersonation]
+    when true
+      tokens.with_impersonation
+    when false
+      tokens.without_impersonation
+    else
+      tokens
+    end
+  end
+
+  def by_state(tokens)
+    case @params[:state]
+    when 'active'
+      tokens.active
+    when 'inactive'
+      tokens.inactive
+    else
+      tokens
+    end
+  end
+end
diff --git a/app/finders/pipelines_finder.rb b/app/finders/pipelines_finder.rb
index 32aea75486d..a9172f6767f 100644
--- a/app/finders/pipelines_finder.rb
+++ b/app/finders/pipelines_finder.rb
@@ -10,7 +10,11 @@ class PipelinesFinder
     scoped_pipelines =
       case scope
       when 'running'
-        pipelines.running_or_pending
+        pipelines.running
+      when 'pending'
+        pipelines.pending
+      when 'finished'
+        pipelines.finished
       when 'branches'
         from_ids(ids_for_ref(branches))
       when 'tags'
diff --git a/app/finders/projects_finder.rb b/app/finders/projects_finder.rb
index c7911736812..18ec45f300d 100644
--- a/app/finders/projects_finder.rb
+++ b/app/finders/projects_finder.rb
@@ -3,7 +3,7 @@ class ProjectsFinder < UnionFinder
     segments = all_projects(current_user)
     segments.map! { |s| s.where(id: project_ids_relation) } if project_ids_relation
 
-    find_union(segments, Project)
+    find_union(segments, Project).with_route
   end
 
   private
diff --git a/app/finders/snippets_finder.rb b/app/finders/snippets_finder.rb
index 00ff1611039..da6e6e87a6f 100644
--- a/app/finders/snippets_finder.rb
+++ b/app/finders/snippets_finder.rb
@@ -1,14 +1,17 @@
 class SnippetsFinder
   def execute(current_user, params = {})
     filter = params[:filter]
+    user = params.fetch(:user, current_user)
 
     case filter
     when :all then
       snippets(current_user).fresh
+    when :public then
+      Snippet.are_public.fresh
     when :by_user then
-      by_user(current_user, params[:user], params[:scope])
+      by_user(current_user, user, params[:scope])
     when :by_project
-      by_project(current_user, params[:project])
+      by_project(current_user, params[:project], params[:scope])
     end
   end
 
@@ -29,35 +32,35 @@ class SnippetsFinder
   def by_user(current_user, user, scope)
     snippets = user.snippets.fresh
 
-    return snippets.are_public unless current_user
-
-    if user == current_user
-      case scope
-      when 'are_internal' then
-        snippets.are_internal
-      when 'are_private' then
-        snippets.are_private
-      when 'are_public' then
-        snippets.are_public
-      else
-        snippets
-      end
+    if current_user
+      include_private = user == current_user
+      by_scope(snippets, scope, include_private)
     else
-      snippets.public_and_internal
+      snippets.are_public
     end
   end
 
-  def by_project(current_user, project)
+  def by_project(current_user, project, scope)
     snippets = project.snippets.fresh
 
     if current_user
-      if project.team.member?(current_user) || current_user.admin?
-        snippets
-      else
-        snippets.public_and_internal
-      end
+      include_private = project.team.member?(current_user) || current_user.admin?
+      by_scope(snippets, scope, include_private)
     else
       snippets.are_public
     end
   end
+
+  def by_scope(snippets, scope = nil, include_private = false)
+    case scope.to_s
+    when 'are_private'
+      include_private ? snippets.are_private : Snippet.none
+    when 'are_internal'
+      snippets.are_internal
+    when 'are_public'
+      snippets.are_public
+    else
+      include_private ? snippets : snippets.public_and_internal
+    end
+  end
 end
diff --git a/app/finders/todos_finder.rb b/app/finders/todos_finder.rb
index a93a63bdb9b..b7f091f334d 100644
--- a/app/finders/todos_finder.rb
+++ b/app/finders/todos_finder.rb
@@ -13,7 +13,7 @@
 #
 
 class TodosFinder
-  NONE = '0'
+  NONE = '0'.freeze
 
   attr_accessor :current_user, :params
 
@@ -99,7 +99,7 @@ class TodosFinder
   end
 
   def type?
-    type.present? && ['Issue', 'MergeRequest'].include?(type)
+    type.present? && %w(Issue MergeRequest).include?(type)
   end
 
   def type
diff --git a/app/helpers/accounts_helper.rb b/app/helpers/accounts_helper.rb
new file mode 100644
index 00000000000..5d27d30eaa3
--- /dev/null
+++ b/app/helpers/accounts_helper.rb
@@ -0,0 +1,5 @@
+module AccountsHelper
+  def incoming_email_token_enabled?
+    current_user.incoming_email_token && Gitlab::IncomingEmail.supports_issue_creation?
+  end
+end
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index ebd78bf9888..e5b811f3300 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -37,7 +37,7 @@ module ApplicationHelper
       if project_id.is_a?(Project)
         project_id
       else
-        Project.find_with_namespace(project_id)
+        Project.find_by_full_path(project_id)
       end
 
     if project.avatar_url
@@ -69,11 +69,12 @@ module ApplicationHelper
   end
 
   def avatar_icon(user_or_email = nil, size = nil, scale = 2)
-    if user_or_email.is_a?(User)
-      user = user_or_email
-    else
-      user = User.find_by_any_email(user_or_email.try(:downcase))
-    end
+    user =
+      if user_or_email.is_a?(User)
+        user_or_email
+      else
+        User.find_by_any_email(user_or_email.try(:downcase))
+      end
 
     if user
       user.avatar_url(size) || default_avatar
@@ -151,7 +152,6 @@ module ApplicationHelper
   # time       - Time object
   # placement  - Tooltip placement String (default: "top")
   # html_class - Custom class for `time` element (default: "time_ago")
-  # skip_js    - When true, exclude the `script` tag (default: false)
   #
   # By default also includes a `script` element with Javascript necessary to
   # initialize the `timeago` jQuery extension. If this method is called many
@@ -163,22 +163,19 @@ module ApplicationHelper
   # `html_class` argument is provided.
   #
   # Returns an HTML-safe String
-  def time_ago_with_tooltip(time, placement: 'top', html_class: '', skip_js: false, short_format: false)
+  def time_ago_with_tooltip(time, placement: 'top', html_class: '', short_format: false)
     css_classes = short_format ? 'js-short-timeago' : 'js-timeago'
     css_classes << " #{html_class}" unless html_class.blank?
-    css_classes << ' js-timeago-pending' unless skip_js
 
-    element = content_tag :time, time.to_s,
+    element = content_tag :time, time.strftime("%b %d, %Y"),
       class: css_classes,
-      datetime: time.to_time.getutc.iso8601,
       title: time.to_time.in_time_zone.to_s(:medium),
-      data: { toggle: 'tooltip', placement: placement, container: 'body' }
-
-    unless skip_js
-      element << javascript_tag(
-        "$('.js-timeago-pending').removeClass('js-timeago-pending').timeago()"
-      )
-    end
+      datetime: time.to_time.getutc.iso8601,
+      data: {
+        toggle: 'tooltip',
+        placement: placement,
+        container: 'body'
+      }
 
     element
   end
@@ -248,7 +245,9 @@ module ApplicationHelper
       scope: params[:scope],
       milestone_title: params[:milestone_title],
       assignee_id: params[:assignee_id],
+      assignee_username: params[:assignee_username],
       author_id: params[:author_id],
+      author_username: params[:author_username],
       search: params[:search],
       label_name: params[:label_name]
     }
@@ -298,4 +297,17 @@ module ApplicationHelper
   def page_class
     "issue-boards-page" if current_controller?(:boards)
   end
+
+  # Returns active css class when condition returns true
+  # otherwise returns nil.
+  #
+  # Example:
+  #   %li{ class: active_when(params[:filter] == '1') }
+  def active_when(condition)
+    'active' if condition
+  end
+
+  def show_user_callout?
+    cookies[:user_callout_dismissed] == 'true'
+  end
 end
diff --git a/app/helpers/application_settings_helper.rb b/app/helpers/application_settings_helper.rb
index 45a567a1eba..ca326dd0627 100644
--- a/app/helpers/application_settings_helper.rb
+++ b/app/helpers/application_settings_helper.rb
@@ -1,28 +1,15 @@
 module ApplicationSettingsHelper
-  def gravatar_enabled?
-    current_application_settings.gravatar_enabled?
-  end
-
-  def signup_enabled?
-    current_application_settings.signup_enabled?
-  end
-
-  def signin_enabled?
-    current_application_settings.signin_enabled?
-  end
+  delegate  :gravatar_enabled?,
+            :signup_enabled?,
+            :signin_enabled?,
+            :akismet_enabled?,
+            :koding_enabled?,
+            to: :current_application_settings
 
   def user_oauth_applications?
     current_application_settings.user_oauth_applications
   end
 
-  def askimet_enabled?
-    current_application_settings.akismet_enabled?
-  end
-
-  def koding_enabled?
-    current_application_settings.koding_enabled?
-  end
-
   def allowed_protocols_present?
     current_application_settings.enabled_git_access_protocol.present?
   end
@@ -50,14 +37,14 @@ module ApplicationSettingsHelper
   def restricted_level_checkboxes(help_block_id)
     Gitlab::VisibilityLevel.options.map do |name, level|
       checked = restricted_visibility_levels(true).include?(level)
-      css_class = 'btn'
-      css_class += ' active' if checked
-      checkbox_name = 'application_setting[restricted_visibility_levels][]'
+      css_class = checked ? 'active' : ''
+      checkbox_name = "application_setting[restricted_visibility_levels][]"
 
-      label_tag(checkbox_name, class: css_class) do
+      label_tag(name, class: css_class) do
         check_box_tag(checkbox_name, level, checked,
                       autocomplete: 'off',
-                      'aria-describedby' => help_block_id) + name
+                      'aria-describedby' => help_block_id,
+                      id: name) + visibility_level_icon(level) + name
       end
     end
   end
@@ -67,14 +54,14 @@ module ApplicationSettingsHelper
   def import_sources_checkboxes(help_block_id)
     Gitlab::ImportSources.options.map do |name, source|
       checked = current_application_settings.import_sources.include?(source)
-      css_class = 'btn'
-      css_class += ' active' if checked
+      css_class = checked ? 'active' : ''
       checkbox_name = 'application_setting[import_sources][]'
 
-      label_tag(checkbox_name, class: css_class) do
+      label_tag(name, class: css_class) do
         check_box_tag(checkbox_name, source, checked,
                       autocomplete: 'off',
-                      'aria-describedby' => help_block_id) + name
+                      'aria-describedby' => help_block_id,
+                      id: name.tr(' ', '_')) + name
       end
     end
   end
@@ -94,10 +81,14 @@ module ApplicationSettingsHelper
   end
 
   def repository_storages_options_for_select
-    options = Gitlab.config.repositories.storages.map do |name, path|
-      ["#{name} - #{path}", name]
+    options = Gitlab.config.repositories.storages.map do |name, storage|
+      ["#{name} - #{storage['path']}", name]
     end
 
     options_for_select(options, @application_setting.repository_storages)
   end
+
+  def sidekiq_queue_options_for_select
+    options_for_select(Sidekiq::Queue.all.map(&:name), @application_setting.sidekiq_throttling_queues)
+  end
 end
diff --git a/app/helpers/auth_helper.rb b/app/helpers/auth_helper.rb
index cd4d778e508..101fe579da2 100644
--- a/app/helpers/auth_helper.rb
+++ b/app/helpers/auth_helper.rb
@@ -1,9 +1,9 @@
 module AuthHelper
-  PROVIDERS_WITH_ICONS = %w(twitter github gitlab bitbucket google_oauth2 facebook azure_oauth2).freeze
+  PROVIDERS_WITH_ICONS = %w(twitter github gitlab bitbucket google_oauth2 facebook azure_oauth2 authentiq).freeze
   FORM_BASED_PROVIDERS = [/\Aldap/, 'crowd'].freeze
 
   def ldap_enabled?
-    Gitlab.config.ldap.enabled
+    Gitlab::LDAP::Config.enabled?
   end
 
   def omniauth_enabled?
@@ -76,5 +76,9 @@ module AuthHelper
       (current_user.otp_grace_period_started_at + current_application_settings.two_factor_grace_period.hours) < Time.current
   end
 
+  def unlink_allowed?(provider)
+    %w(saml cas3).exclude?(provider.to_s)
+  end
+
   extend self
 end
diff --git a/app/helpers/blob_helper.rb b/app/helpers/blob_helper.rb
index e13b7cdd707..8631bc54509 100644
--- a/app/helpers/blob_helper.rb
+++ b/app/helpers/blob_helper.rb
@@ -21,7 +21,7 @@ module BlobHelper
                                      options[:link_opts])
 
     if !on_top_of_branch?(project, ref)
-      button_tag "Edit", class: "btn disabled has-tooltip btn-file-option", title: "You can only edit files when you are on a branch", data: { container: 'body' }
+      button_tag "Edit", class: "btn disabled has-tooltip", title: "You can only edit files when you are on a branch", data: { container: 'body' }
     elsif can_edit_blob?(blob, project, ref)
       link_to "Edit", edit_path, class: 'btn btn-sm'
     elsif can?(current_user, :fork_project, project)
@@ -32,7 +32,7 @@ module BlobHelper
       }
       fork_path = namespace_project_forks_path(project.namespace, project, namespace_key: current_user.namespace.id, continue: continue_params)
 
-      link_to "Edit", fork_path, class: 'btn btn-file-option', method: :post
+      link_to "Edit", fork_path, class: 'btn', method: :post
     end
   end
 
@@ -153,16 +153,17 @@ module BlobHelper
     # Because we are opionated we set the cache headers ourselves.
     response.cache_control[:public] = @project.public?
 
-    if @ref && @commit && @ref == @commit.id
-      # This is a link to a commit by its commit SHA. That means that the blob
-      # is immutable. The only reason to invalidate the cache is if the commit
-      # was deleted or if the user lost access to the repository.
-      response.cache_control[:max_age] = Blob::CACHE_TIME_IMMUTABLE
-    else
-      # A branch or tag points at this blob. That means that the expected blob
-      # value may change over time.
-      response.cache_control[:max_age] = Blob::CACHE_TIME
-    end
+    response.cache_control[:max_age] =
+      if @ref && @commit && @ref == @commit.id
+        # This is a link to a commit by its commit SHA. That means that the blob
+        # is immutable. The only reason to invalidate the cache is if the commit
+        # was deleted or if the user lost access to the repository.
+        Blob::CACHE_TIME_IMMUTABLE
+      else
+        # A branch or tag points at this blob. That means that the expected blob
+        # value may change over time.
+        Blob::CACHE_TIME
+      end
 
     response.etag = @blob.id
     !stale
@@ -179,33 +180,6 @@ module BlobHelper
     }
   end
 
-  def selected_template(issuable)
-    templates = issuable_templates(issuable)
-    params[:issuable_template] if templates.include?(params[:issuable_template])
-  end
-
-  def can_add_template?(issuable)
-    names = issuable_templates(issuable)
-    names.empty? && can?(current_user, :push_code, @project) && !@project.private?
-  end
-
-  def merge_request_template_names
-    @merge_request_templates ||= Gitlab::Template::MergeRequestTemplate.dropdown_names(ref_project)
-  end
-
-  def issue_template_names
-    @issue_templates ||= Gitlab::Template::IssueTemplate.dropdown_names(ref_project)
-  end
-
-  def issuable_templates(issuable)
-    @issuable_templates ||=
-      if issuable.is_a?(Issue)
-        issue_template_names
-      elsif issuable.is_a?(MergeRequest)
-        merge_request_template_names
-      end
-  end
-
   def ref_project
     @ref_project ||= @target_project || @project
   end
@@ -215,7 +189,11 @@ module BlobHelper
   end
 
   def gitlab_ci_ymls
-    @gitlab_ci_ymls ||= Gitlab::Template::GitlabCiYmlTemplate.dropdown_names
+    @gitlab_ci_ymls ||= Gitlab::Template::GitlabCiYmlTemplate.dropdown_names(params[:context])
+  end
+
+  def dockerfile_names
+    @dockerfile_names ||= Gitlab::Template::DockerfileTemplate.dropdown_names
   end
 
   def blob_editor_paths
@@ -225,4 +203,18 @@ module BlobHelper
       'blob-language' => @blob && @blob.language.try(:ace_mode)
     }
   end
+
+  def copy_file_path_button(file_path)
+    clipboard_button(clipboard_text: file_path, class: 'btn-clipboard btn-transparent prepend-left-5', title: 'Copy file path to clipboard')
+  end
+
+  def copy_blob_content_button(blob)
+    return if markup?(blob.name)
+
+    clipboard_button(clipboard_target: ".blob-content[data-blob-id='#{blob.id}']", class: "btn btn-sm", title: "Copy content to clipboard")
+  end
+
+  def open_raw_file_button(path)
+    link_to icon('file-code-o'), path, class: 'btn btn-sm has-tooltip', target: '_blank', rel: 'noopener noreferrer', title: 'Open raw', data: { container: 'body' }
+  end
 end
diff --git a/app/helpers/boards_helper.rb b/app/helpers/boards_helper.rb
index 38c586ccd31..f43827da446 100644
--- a/app/helpers/boards_helper.rb
+++ b/app/helpers/boards_helper.rb
@@ -6,7 +6,9 @@ module BoardsHelper
       endpoint: namespace_project_boards_path(@project.namespace, @project),
       board_id: board.id,
       disabled: "#{!can?(current_user, :admin_list, @project)}",
-      issue_link_base: namespace_project_issues_path(@project.namespace, @project)
+      issue_link_base: namespace_project_issues_path(@project.namespace, @project),
+      root_path: root_path,
+      bulk_update_path: bulk_update_namespace_project_issues_path(@project.namespace, @project),
     }
   end
 end
diff --git a/app/helpers/builds_helper.rb b/app/helpers/builds_helper.rb
index f3aaff9140d..2fcb7a59fc3 100644
--- a/app/helpers/builds_helper.rb
+++ b/app/helpers/builds_helper.rb
@@ -1,8 +1,25 @@
 module BuildsHelper
   def sidebar_build_class(build, current_build)
     build_class = ''
-    build_class += ' active' if build == current_build
+    build_class += ' active' if build.id === current_build.id
     build_class += ' retried' if build.retried?
     build_class
   end
+
+  def javascript_build_options
+    {
+      page_url: namespace_project_build_url(@project.namespace, @project, @build),
+      build_url: namespace_project_build_url(@project.namespace, @project, @build, :json),
+      build_status: @build.status,
+      build_stage: @build.stage,
+      log_state: ''
+    }
+  end
+
+  def build_failed_issue_options
+    {
+      title: "Build Failed ##{@build.id}",
+      description: namespace_project_build_url(@project.namespace, @project, @build)
+    }
+  end
 end
diff --git a/app/helpers/button_helper.rb b/app/helpers/button_helper.rb
index dee3c78df47..0b30471f2ae 100644
--- a/app/helpers/button_helper.rb
+++ b/app/helpers/button_helper.rb
@@ -16,10 +16,10 @@ module ButtonHelper
   # See http://clipboardjs.com/#usage
   def clipboard_button(data = {})
     css_class = data[:class] || 'btn-clipboard btn-transparent'
-    title = data[:title] || 'Copy to Clipboard'
+    title = data[:title] || 'Copy to clipboard'
     data = { toggle: 'tooltip', placement: 'bottom', container: 'body' }.merge(data)
     content_tag :button,
-      icon('clipboard'),
+      icon('clipboard', 'aria-hidden': 'true'),
       class: "btn #{css_class}",
       data: data,
       type: :button,
@@ -34,7 +34,7 @@ module ButtonHelper
 
     content_tag (append_link ? :a : :span), protocol,
       class: klass,
-      href: (project.http_url_to_repo if append_link),
+      href: (project.http_url_to_repo(current_user) if append_link),
       data: {
         html: true,
         placement: placement,
diff --git a/app/helpers/ci_status_helper.rb b/app/helpers/ci_status_helper.rb
index 895c3d728ad..2de9e0de310 100644
--- a/app/helpers/ci_status_helper.rb
+++ b/app/helpers/ci_status_helper.rb
@@ -1,25 +1,22 @@
 module CiStatusHelper
   def ci_status_path(pipeline)
     project = pipeline.project
-    builds_namespace_project_commit_path(project.namespace, project, pipeline.sha)
+    namespace_project_pipeline_path(project.namespace, project, pipeline)
   end
 
-  def ci_status_with_icon(status, target = nil)
-    content = ci_icon_for_status(status) + '&nbsp;'.html_safe + ci_label_for_status(status)
-    klass = "ci-status ci-#{status}"
-    if target
-      link_to content, target, class: klass
-    else
-      content_tag :span, content, class: klass
+  # Is used by Commit and Merge Request Widget
+  def ci_label_for_status(status)
+    if detailed_status?(status)
+      return status.label
     end
-  end
 
-  def ci_label_for_status(status)
     case status
     when 'success'
       'passed'
     when 'success_with_warnings'
       'passed with warnings'
+    when 'manual'
+      'waiting for manual action'
     else
       status
     end
@@ -31,6 +28,10 @@ module CiStatusHelper
   end
 
   def ci_icon_for_status(status)
+    if detailed_status?(status)
+      return custom_icon(status.icon)
+    end
+
     icon_name =
       case status
       when 'success'
@@ -49,6 +50,8 @@ module CiStatusHelper
         'icon_status_created'
       when 'skipped'
         'icon_status_skipped'
+      when 'manual'
+        'icon_status_manual'
       else
         'icon_status_canceled'
       end
@@ -56,6 +59,24 @@ module CiStatusHelper
     custom_icon(icon_name)
   end
 
+  def pipeline_status_cache_key(pipeline_status)
+    "pipeline-status/#{pipeline_status.sha}-#{pipeline_status.status}"
+  end
+
+  def render_project_pipeline_status(pipeline_status, tooltip_placement: 'auto left')
+    project = pipeline_status.project
+    path = pipelines_namespace_project_commit_path(
+      project.namespace,
+      project,
+      pipeline_status.sha)
+
+    render_status_with_link(
+      'commit',
+      pipeline_status.status,
+      path,
+      tooltip_placement: tooltip_placement)
+  end
+
   def render_commit_status(commit, ref: nil, tooltip_placement: 'auto left')
     project = commit.project
     path = pipelines_namespace_project_commit_path(
@@ -94,4 +115,10 @@ module CiStatusHelper
               class: klass, title: title, data: data
     end
   end
+
+  def detailed_status?(status)
+    status.respond_to?(:text) &&
+      status.respond_to?(:label) &&
+      status.respond_to?(:icon)
+  end
 end
diff --git a/app/helpers/commits_helper.rb b/app/helpers/commits_helper.rb
index ed402b698fb..cef624430da 100644
--- a/app/helpers/commits_helper.rb
+++ b/app/helpers/commits_helper.rb
@@ -128,50 +128,11 @@ module CommitsHelper
   end
 
   def revert_commit_link(commit, continue_to_path, btn_class: nil, has_tooltip: true)
-    return unless current_user
-
-    tooltip = "Revert this #{commit.change_type_title} in a new merge request" if has_tooltip
-
-    if can_collaborate_with_project?
-      btn_class = "btn btn-warning btn-#{btn_class}" unless btn_class.nil?
-      link_to 'Revert', '#modal-revert-commit', 'data-toggle' => 'modal', 'data-container' => 'body', title: (tooltip if has_tooltip), class: "#{btn_class} #{'has-tooltip' if has_tooltip}"
-    elsif can?(current_user, :fork_project, @project)
-      continue_params = {
-        to: continue_to_path,
-        notice: edit_in_new_fork_notice + ' Try to revert this commit again.',
-        notice_now: edit_in_new_fork_notice_now
-      }
-      fork_path = namespace_project_forks_path(@project.namespace, @project,
-        namespace_key: current_user.namespace.id,
-        continue: continue_params)
-
-      btn_class = "btn btn-grouped btn-warning" unless btn_class.nil?
-
-      link_to 'Revert', fork_path, class: btn_class, method: :post, 'data-toggle' => 'tooltip', 'data-container' => 'body', title: (tooltip if has_tooltip)
-    end
+    commit_action_link('revert', commit, continue_to_path, btn_class: btn_class, has_tooltip: has_tooltip)
   end
 
   def cherry_pick_commit_link(commit, continue_to_path, btn_class: nil, has_tooltip: true)
-    return unless current_user
-
-    tooltip = "Cherry-pick this #{commit.change_type_title} in a new merge request"
-
-    if can_collaborate_with_project?
-      btn_class = "btn btn-default btn-#{btn_class}" unless btn_class.nil?
-      link_to 'Cherry-pick', '#modal-cherry-pick-commit', 'data-toggle' => 'modal', 'data-container' => 'body', title: (tooltip if has_tooltip), class: "#{btn_class} #{'has-tooltip' if has_tooltip}"
-    elsif can?(current_user, :fork_project, @project)
-      continue_params = {
-        to: continue_to_path,
-        notice: edit_in_new_fork_notice + ' Try to cherry-pick this commit again.',
-        notice_now: edit_in_new_fork_notice_now
-      }
-      fork_path = namespace_project_forks_path(@project.namespace, @project,
-        namespace_key: current_user.namespace.id,
-        continue: continue_params)
-
-      btn_class = "btn btn-grouped btn-close" unless btn_class.nil?
-      link_to 'Cherry-pick', fork_path, class: "#{btn_class}", method: :post, 'data-toggle' => 'tooltip', 'data-container' => 'body', title: (tooltip if has_tooltip)
-    end
+    commit_action_link('cherry-pick', commit, continue_to_path, btn_class: btn_class, has_tooltip: has_tooltip)
   end
 
   protected
@@ -211,17 +172,50 @@ module CommitsHelper
     end
   end
 
-  def view_file_btn(commit_sha, diff_new_path, project)
+  def commit_action_link(action, commit, continue_to_path, btn_class: nil, has_tooltip: true)
+    return unless current_user
+
+    tooltip = "#{action.capitalize} this #{commit.change_type_title(current_user)} in a new merge request" if has_tooltip
+    btn_class = "btn btn-#{btn_class}" unless btn_class.nil?
+
+    if can_collaborate_with_project?
+      link_to action.capitalize, "#modal-#{action}-commit", 'data-toggle' => 'modal', 'data-container' => 'body', title: (tooltip if has_tooltip), class: "#{btn_class} #{'has-tooltip' if has_tooltip}"
+    elsif can?(current_user, :fork_project, @project)
+      continue_params = {
+        to: continue_to_path,
+        notice: "#{edit_in_new_fork_notice} Try to #{action} this commit again.",
+        notice_now: edit_in_new_fork_notice_now
+      }
+      fork_path = namespace_project_forks_path(@project.namespace, @project,
+        namespace_key: current_user.namespace.id,
+        continue: continue_params)
+
+      link_to action.capitalize, fork_path, class: btn_class, method: :post, 'data-toggle' => 'tooltip', 'data-container' => 'body', title: (tooltip if has_tooltip)
+    end
+  end
+
+  def view_file_button(commit_sha, diff_new_path, project)
     link_to(
       namespace_project_blob_path(project.namespace, project,
                                   tree_join(commit_sha, diff_new_path)),
-      class: 'btn view-file js-view-file btn-file-option'
+      class: 'btn view-file js-view-file'
     ) do
       raw('View file @') + content_tag(:span, commit_sha[0..6],
                                        class: 'commit-short-id')
     end
   end
 
+  def view_on_environment_button(commit_sha, diff_new_path, environment)
+    return unless environment && commit_sha
+
+    external_url = environment.external_url_for(diff_new_path, commit_sha)
+    return unless external_url
+
+    link_to(external_url, class: 'btn btn-file-option has-tooltip', target: '_blank', rel: 'noopener noreferrer', title: "View on #{environment.formatted_external_url}", data: { container: 'body' }) do
+      icon('external-link')
+    end
+  end
+
   def truncate_sha(sha)
     Commit.truncate_sha(sha)
   end
diff --git a/app/helpers/compare_helper.rb b/app/helpers/compare_helper.rb
index aa54ee07bdc..2aa0449c46e 100644
--- a/app/helpers/compare_helper.rb
+++ b/app/helpers/compare_helper.rb
@@ -3,7 +3,7 @@ module CompareHelper
     from.present? &&
       to.present? &&
       from != to &&
-      project.feature_available?(:merge_requests, current_user) &&
+      can?(current_user, :create_merge_request, project) &&
       project.repository.branch_names.include?(from) &&
       project.repository.branch_names.include?(to)
   end
diff --git a/app/helpers/components_helper.rb b/app/helpers/components_helper.rb
new file mode 100644
index 00000000000..8893209b314
--- /dev/null
+++ b/app/helpers/components_helper.rb
@@ -0,0 +1,9 @@
+module ComponentsHelper
+  def gitlab_workhorse_version
+    if request.headers['Gitlab-Workhorse'].present?
+      request.headers['Gitlab-Workhorse'].split('-').first
+    else
+      Gitlab::Workhorse.version
+    end
+  end
+end
diff --git a/app/helpers/diff_helper.rb b/app/helpers/diff_helper.rb
index 0725c3f4c56..aed1d7c839f 100644
--- a/app/helpers/diff_helper.rb
+++ b/app/helpers/diff_helper.rb
@@ -51,11 +51,12 @@ module DiffHelper
     html.html_safe
   end
 
-  def diff_line_content(line, line_type = nil)
+  def diff_line_content(line)
     if line.blank?
-      " &nbsp;".html_safe
+      "&nbsp;".html_safe
     else
-      line[0] = ' ' if %w[new old].include?(line_type)
+      # We can't use `sub` because the HTML-safeness of `line` will not survive.
+      line[0] = '' if line.start_with?('+', '-', ' ')
       line
     end
   end
@@ -164,4 +165,10 @@ module DiffHelper
 
     link_to "#{hide_whitespace? ? 'Show' : 'Hide'} whitespace changes", url, class: options[:class]
   end
+
+  def render_overflow_warning?(diff_files)
+    diffs = @merge_request_diff.presence || diff_files
+
+    diffs.overflow?
+  end
 end
diff --git a/app/helpers/dropdowns_helper.rb b/app/helpers/dropdowns_helper.rb
index cbab1fd5967..81e0b6bb5ae 100644
--- a/app/helpers/dropdowns_helper.rb
+++ b/app/helpers/dropdowns_helper.rb
@@ -43,7 +43,7 @@ module DropdownsHelper
     default_label = data_attr[:default_label]
     content_tag(:button, class: "dropdown-menu-toggle #{options[:toggle_class] if options.has_key?(:toggle_class)}", id: (options[:id] if options.has_key?(:id)), type: "button", data: data_attr) do
       output = content_tag(:span, toggle_text, class: "dropdown-toggle-text #{'is-default' if toggle_text == default_label}")
-      output << icon('caret-down')
+      output << icon('chevron-down')
       output.html_safe
     end
   end
diff --git a/app/helpers/emails_helper.rb b/app/helpers/emails_helper.rb
index 2843ad96efa..f927cfc998f 100644
--- a/app/helpers/emails_helper.rb
+++ b/app/helpers/emails_helper.rb
@@ -1,4 +1,6 @@
 module EmailsHelper
+  include AppearancesHelper
+
   # Google Actions
   # https://developers.google.com/gmail/markup/reference/go-to-action
   def email_action(url)
@@ -22,7 +24,7 @@ module EmailsHelper
 
   def action_title(url)
     return unless url
-    ["merge_requests", "issues", "commit"].each do |action|
+    %w(merge_requests issues commit).each do |action|
       if url.split("/").include?(action)
         return "View #{action.humanize.singularize}"
       end
@@ -49,4 +51,19 @@ module EmailsHelper
     msg = "This link is valid for #{password_reset_token_valid_time}.  "
     msg << "After it expires, you can #{link_tag}."
   end
+
+  def header_logo
+    if brand_item && brand_item.header_logo?
+      image_tag(
+        brand_item.header_logo,
+        style: 'height: 50px'
+      )
+    else
+      image_tag(
+        image_url('mailers/gitlab_header_logo.gif'),
+        size: "55x50",
+        alt: "GitLab"
+      )
+    end
+  end
 end
diff --git a/app/helpers/emoji_helper.rb b/app/helpers/emoji_helper.rb
new file mode 100644
index 00000000000..482f68f412b
--- /dev/null
+++ b/app/helpers/emoji_helper.rb
@@ -0,0 +1,5 @@
+module EmojiHelper
+  def emoji_icon(*args)
+    raw Gitlab::Emoji.gl_emoji_tag(*args)
+  end
+end
diff --git a/app/helpers/environment_helper.rb b/app/helpers/environment_helper.rb
new file mode 100644
index 00000000000..ff8550439d0
--- /dev/null
+++ b/app/helpers/environment_helper.rb
@@ -0,0 +1,31 @@
+module EnvironmentHelper
+  def environment_for_build(project, build)
+    return unless build.environment
+
+    project.environments.find_by(name: build.expanded_environment_name)
+  end
+
+  def environment_link_for_build(project, build)
+    environment = environment_for_build(project, build)
+    if environment
+      link_to environment.name, namespace_project_environment_path(project.namespace, project, environment)
+    else
+      content_tag :span, build.expanded_environment_name
+    end
+  end
+
+  def deployment_link(deployment, text: nil)
+    return unless deployment
+
+    link_label = text ? text : "##{deployment.iid}"
+
+    link_to link_label, [deployment.project.namespace.becomes(Namespace), deployment.project, deployment.deployable]
+  end
+
+  def last_deployment_link_for_environment_build(project, build)
+    environment = environment_for_build(project, build)
+    return unless environment
+
+    deployment_link(environment.last_deployment)
+  end
+end
diff --git a/app/helpers/environments_helper.rb b/app/helpers/environments_helper.rb
new file mode 100644
index 00000000000..515e802e01e
--- /dev/null
+++ b/app/helpers/environments_helper.rb
@@ -0,0 +1,7 @@
+module EnvironmentsHelper
+  def environments_list_data
+    {
+      endpoint: namespace_project_environments_path(@project.namespace, @project, format: :json)
+    }
+  end
+end
diff --git a/app/helpers/events_helper.rb b/app/helpers/events_helper.rb
index 00e64076408..fb872a13f74 100644
--- a/app/helpers/events_helper.rb
+++ b/app/helpers/events_helper.rb
@@ -45,6 +45,12 @@ module EventsHelper
     @project.feature_available?(feature_key, current_user)
   end
 
+  def comments_visible?
+    event_filter_visible(:repository) ||
+      event_filter_visible(:merge_requests) ||
+      event_filter_visible(:issues)
+  end
+
   def event_preposition(event)
     if event.push? || event.commented? || event.target
       "at"
@@ -86,7 +92,7 @@ module EventsHelper
     elsif event.merge_request?
       namespace_project_merge_request_url(event.project.namespace,
                                           event.project, event.merge_request)
-    elsif event.note? && event.commit_note?
+    elsif event.commit_note?
       namespace_project_commit_url(event.project.namespace, event.project,
                                    event.note_target)
     elsif event.note?
@@ -127,7 +133,7 @@ module EventsHelper
   end
 
   def event_note_target_path(event)
-    if event.note? && event.commit_note?
+    if event.commit_note?
       namespace_project_commit_path(event.project.namespace,
                                     event.project,
                                     event.note_target,
@@ -156,7 +162,12 @@ module EventsHelper
 
   def event_note(text, options = {})
     text = first_line_in_markdown(text, 150, options)
-    sanitize(text, tags: %w(a img b pre code p span))
+
+    sanitize(
+      text,
+      tags: %w(a img gl-emoji b pre code p span),
+      attributes: Rails::Html::WhiteListSanitizer.allowed_attributes + ['style', 'data-name', 'data-unicode-version']
+    )
   end
 
   def event_commit_title(message)
diff --git a/app/helpers/explore_helper.rb b/app/helpers/explore_helper.rb
index 2b1f3825adc..7bd212a3ef9 100644
--- a/app/helpers/explore_helper.rb
+++ b/app/helpers/explore_helper.rb
@@ -1,20 +1,33 @@
 module ExploreHelper
   def filter_projects_path(options = {})
     exist_opts = {
-      sort: params[:sort],
+      sort: params[:sort] || @sort,
       scope: params[:scope],
       group: params[:group],
       tag: params[:tag],
       visibility_level: params[:visibility_level],
+      name: params[:name],
+      personal: params[:personal],
+      archived: params[:archived],
+      shared: params[:shared],
+      namespace_id: params[:namespace_id],
     }
 
-    options = exist_opts.merge(options)
-    path = request.path
-    path << "?#{options.to_param}"
-    path
+    options = exist_opts.merge(options).delete_if { |key, value| value.blank? }
+    request_path_with_options(options)
+  end
+
+  def filter_groups_path(options = {})
+    request_path_with_options(options)
   end
 
   def explore_controller?
     controller.class.name.split("::").first == "Explore"
   end
+
+  private
+
+  def request_path_with_options(options = {})
+    request.path + "?#{options.to_param}"
+  end
 end
diff --git a/app/helpers/form_helper.rb b/app/helpers/form_helper.rb
index 6a43be2cf3e..1182939f656 100644
--- a/app/helpers/form_helper.rb
+++ b/app/helpers/form_helper.rb
@@ -7,12 +7,12 @@ module FormHelper
 
     content_tag(:div, class: 'alert alert-danger', id: 'error_explanation') do
       content_tag(:h4, headline) <<
-      content_tag(:ul) do
-        model.errors.full_messages.
-          map { |msg| content_tag(:li, msg) }.
-          join.
-          html_safe
-      end
+        content_tag(:ul) do
+          model.errors.full_messages.
+            map { |msg| content_tag(:li, msg) }.
+            join.
+            html_safe
+        end
     end
   end
 end
diff --git a/app/helpers/gitlab_markdown_helper.rb b/app/helpers/gitlab_markdown_helper.rb
index 0772d848289..cd442237086 100644
--- a/app/helpers/gitlab_markdown_helper.rb
+++ b/app/helpers/gitlab_markdown_helper.rb
@@ -110,6 +110,28 @@ module GitlabMarkdownHelper
     end
   end
 
+  # Returns the text necessary to reference `entity` across projects
+  #
+  # project - Project to reference
+  # entity  - Object that responds to `to_reference`
+  #
+  # Examples:
+  #
+  #   cross_project_reference(project, project.issues.first)
+  #   # => 'namespace1/project1#123'
+  #
+  #   cross_project_reference(project, project.merge_requests.first)
+  #   # => 'namespace1/project1!345'
+  #
+  # Returns a String
+  def cross_project_reference(project, entity)
+    if entity.respond_to?(:to_reference)
+      entity.to_reference(project, full: true)
+    else
+      ''
+    end
+  end
+
   private
 
   # Return +text+, truncated to +max_chars+ characters, excluding any HTML
@@ -150,7 +172,9 @@ module GitlabMarkdownHelper
   # text hasn't already been truncated, then append "..." to the node contents
   # and return true.  Otherwise return false.
   def truncate_if_block(node, truncated)
-    if node.element? && node.description.block? && !truncated
+    return true if truncated
+
+    if node.element? && (node.description&.block? || node.matches?('pre > code > .line'))
       node.inner_html = "#{node.inner_html}..." if node.next_sibling
       true
     else
@@ -158,28 +182,6 @@ module GitlabMarkdownHelper
     end
   end
 
-  # Returns the text necessary to reference `entity` across projects
-  #
-  # project - Project to reference
-  # entity  - Object that responds to `to_reference`
-  #
-  # Examples:
-  #
-  #   cross_project_reference(project, project.issues.first)
-  #   # => 'namespace1/project1#123'
-  #
-  #   cross_project_reference(project, project.merge_requests.first)
-  #   # => 'namespace1/project1!345'
-  #
-  # Returns a String
-  def cross_project_reference(project, entity)
-    if entity.respond_to?(:to_reference)
-      "#{project.to_reference}#{entity.to_reference}"
-    else
-      ''
-    end
-  end
-
   def markdown_toolbar_button(options = {})
     data = options[:data].merge({ container: "body" })
     content_tag :button,
diff --git a/app/helpers/gitlab_routing_helper.rb b/app/helpers/gitlab_routing_helper.rb
index bccf64d1aac..e9b7cbbad6a 100644
--- a/app/helpers/gitlab_routing_helper.rb
+++ b/app/helpers/gitlab_routing_helper.rb
@@ -74,6 +74,10 @@ module GitlabRoutingHelper
     namespace_project_environment_path(environment.project.namespace, environment.project, environment, *args)
   end
 
+  def environment_metrics_path(environment, *args)
+    metrics_namespace_project_environment_path(environment.project.namespace, environment.project, environment, *args)
+  end
+
   def issue_path(entity, *args)
     namespace_project_issue_path(entity.project.namespace, entity.project, entity, *args)
   end
@@ -82,6 +86,10 @@ module GitlabRoutingHelper
     namespace_project_merge_request_path(entity.project.namespace, entity.project, entity, *args)
   end
 
+  def pipeline_path(pipeline, *args)
+    namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id, *args)
+  end
+
   def milestone_path(entity, *args)
     namespace_project_milestone_path(entity.project.namespace, entity.project, entity, *args)
   end
@@ -155,6 +163,11 @@ module GitlabRoutingHelper
     resend_invite_namespace_project_project_member_path(project_member.source.namespace, project_member.source, project_member)
   end
 
+  # Snippets
+  def personal_snippet_url(snippet, *args)
+    snippet_url(snippet)
+  end
+
   # Groups
 
   ## Members
@@ -197,4 +210,17 @@ module GitlabRoutingHelper
       file_namespace_project_build_artifacts_path(*args)
     end
   end
+
+  # Settings
+  def project_settings_integrations_path(project, *args)
+    namespace_project_settings_integrations_path(project.namespace, project, *args)
+  end
+
+  def project_settings_members_path(project, *args)
+    namespace_project_settings_members_path(project.namespace, project, *args)
+  end
+
+  def project_settings_ci_cd_path(project, *args)
+    namespace_project_settings_ci_cd_path(project.namespace, project, *args)
+  end
 end
diff --git a/app/helpers/groups_helper.rb b/app/helpers/groups_helper.rb
index ab880ed6de0..a6014088e92 100644
--- a/app/helpers/groups_helper.rb
+++ b/app/helpers/groups_helper.rb
@@ -5,22 +5,26 @@ module GroupsHelper
 
   def group_icon(group)
     if group.is_a?(String)
-      group = Group.find_by(path: group)
+      group = Group.find_by_full_path(group)
     end
 
-    if group && group.avatar.present?
-      group.avatar.url
-    else
-      image_path('no_group_avatar.png')
-    end
+    group.try(:avatar_url) || image_path('no_group_avatar.png')
   end
 
   def group_title(group, name = nil, url = nil)
-    full_title = link_to(simple_sanitize(group.name), group_path(group))
-    full_title += ' &middot; '.html_safe + link_to(simple_sanitize(name), url) if name
+    @has_group_title = true
+    full_title = ''
 
-    content_tag :span do
-      full_title
+    group.ancestors.each do |parent|
+      full_title += link_to(simple_sanitize(parent.name), group_path(parent), class: 'group-path hidable')
+      full_title += '<span class="hidable"> / </span>'.html_safe
+    end
+
+    full_title += link_to(simple_sanitize(group.name), group_path(group), class: 'group-path')
+    full_title += ' &middot; '.html_safe + link_to(simple_sanitize(name), url, class: 'group-path') if name
+
+    content_tag :span, class: 'group-title' do
+      full_title.html_safe
     end
   end
 
@@ -48,4 +52,8 @@ module GroupsHelper
       "#{status.humanize} #{projects_lfs_status(group)}"
     end
   end
+
+  def group_issues(group)
+    IssuesFinder.new(current_user, group_id: group.id).execute
+  end
 end
diff --git a/app/helpers/import_helper.rb b/app/helpers/import_helper.rb
index 021d2b14718..a57b5a8fea5 100644
--- a/app/helpers/import_helper.rb
+++ b/app/helpers/import_helper.rb
@@ -4,8 +4,10 @@ module ImportHelper
     "#{namespace}/#{name}"
   end
 
-  def github_project_link(path_with_namespace)
-    link_to path_with_namespace, github_project_url(path_with_namespace), target: '_blank'
+  def provider_project_link(provider, path_with_namespace)
+    url = __send__("#{provider}_project_url", path_with_namespace)
+
+    link_to path_with_namespace, url, target: '_blank', rel: 'noopener noreferrer'
   end
 
   private
@@ -20,4 +22,8 @@ module ImportHelper
     provider = Gitlab.config.omniauth.providers.find { |p| p.name == 'github' }
     @github_url = provider.fetch('url', 'https://github.com') if provider
   end
+
+  def gitea_project_url(path_with_namespace)
+    "#{@gitea_host_url.sub(%r{/+\z}, '')}/#{path_with_namespace}"
+  end
 end
diff --git a/app/helpers/issuables_helper.rb b/app/helpers/issuables_helper.rb
index ef6cfb235a9..ec57fec4f99 100644
--- a/app/helpers/issuables_helper.rb
+++ b/app/helpers/issuables_helper.rb
@@ -1,6 +1,8 @@
 module IssuablesHelper
+  include GitlabRoutingHelper
+
   def sidebar_gutter_toggle_icon
-    sidebar_gutter_collapsed? ? icon('angle-double-left') : icon('angle-double-right')
+    sidebar_gutter_collapsed? ? icon('angle-double-left', { 'aria-hidden': 'true' }) : icon('angle-double-right', { 'aria-hidden': 'true' })
   end
 
   def sidebar_gutter_collapsed_class
@@ -23,13 +25,44 @@ module IssuablesHelper
   def issuable_json_path(issuable)
     project = issuable.project
 
-    if issuable.kind_of?(MergeRequest)
+    if issuable.is_a?(MergeRequest)
       namespace_project_merge_request_path(project.namespace, project, issuable.iid, :json)
     else
       namespace_project_issue_path(project.namespace, project, issuable.iid, :json)
     end
   end
 
+  def serialize_issuable(issuable)
+    case issuable
+    when Issue
+      IssueSerializer.new.represent(issuable).to_json
+    when MergeRequest
+      MergeRequestSerializer.new.represent(issuable).to_json
+    end
+  end
+
+  def template_dropdown_tag(issuable, &block)
+    title = selected_template(issuable) || "Choose a template"
+    options = {
+      toggle_class: 'js-issuable-selector',
+      title: title,
+      filter: true,
+      placeholder: 'Filter',
+      footer_content: true,
+      data: {
+        data: issuable_templates(issuable),
+        field_name: 'issuable_template',
+        selected: selected_template(issuable),
+        project_path: ref_project.path,
+        namespace_path: ref_project.namespace.full_path
+      }
+    }
+
+    dropdown_tag(title, options: options) do
+      capture(&block)
+    end
+  end
+
   def user_dropdown_label(user_id, default_label)
     return default_label if user_id.nil?
     return "Unassigned" if user_id == "0"
@@ -57,15 +90,33 @@ module IssuablesHelper
   end
 
   def milestone_dropdown_label(milestone_title, default_label = "Milestone")
-    if milestone_title == Milestone::Upcoming.name
-      milestone_title = Milestone::Upcoming.title
-    end
+    title =
+      case milestone_title
+      when Milestone::Upcoming.name then Milestone::Upcoming.title
+      when Milestone::Started.name then Milestone::Started.title
+      else milestone_title.presence
+      end
 
-    h(milestone_title.presence || default_label)
+    h(title || default_label)
+  end
+
+  def to_url_reference(issuable)
+    case issuable
+    when Issue
+      link_to issuable.to_reference, issue_url(issuable)
+    when MergeRequest
+      link_to issuable.to_reference, merge_request_url(issuable)
+    else
+      issuable.to_reference
+    end
   end
 
   def issuable_meta(issuable, project, text)
-    output = content_tag :strong, "#{text} #{issuable.to_reference}", class: "identifier"
+    output = content_tag(:strong, class: "identifier") do
+      concat("#{text} ")
+      concat(to_url_reference(issuable))
+    end
+
     output << " opened #{time_ago_with_tooltip(issuable.created_at)} by ".html_safe
     output << content_tag(:strong) do
       author_output = link_to_member(project, issuable.author, size: 24, mobile_classes: "hidden-xs", tooltip: true)
@@ -74,8 +125,8 @@ module IssuablesHelper
 
     if issuable.tasks?
       output << "&ensp;".html_safe
-      output << content_tag(:span, issuable.task_status, id: "task_status", class: "hidden-xs")
-      output << content_tag(:span, issuable.task_status_short, id: "task_status_short", class: "hidden-sm hidden-md hidden-lg")
+      output << content_tag(:span, issuable.task_status, id: "task_status", class: "hidden-xs hidden-sm")
+      output << content_tag(:span, issuable.task_status_short, id: "task_status_short", class: "hidden-md hidden-lg")
     end
 
     output
@@ -114,8 +165,37 @@ module IssuablesHelper
     html.html_safe
   end
 
+  def cached_assigned_issuables_count(assignee, issuable_type, state)
+    cache_key = hexdigest(['assigned_issuables_count', assignee.id, issuable_type, state].join('-'))
+    Rails.cache.fetch(cache_key, expires_in: 2.minutes) do
+      assigned_issuables_count(assignee, issuable_type, state)
+    end
+  end
+
+  def issuable_filter_params
+    [
+      :search,
+      :author_id,
+      :assignee_id,
+      :milestone_title,
+      :label_name
+    ]
+  end
+
+  def issuable_reference(issuable)
+    @show_full_reference ? issuable.to_reference(full: true) : issuable.to_reference(@group || @project)
+  end
+
+  def issuable_filter_present?
+    issuable_filter_params.any? { |k| params.key?(k) }
+  end
+
   private
 
+  def assigned_issuables_count(assignee, issuable_type, state)
+    assignee.public_send("assigned_#{issuable_type}").public_send(state).count
+  end
+
   def sidebar_gutter_collapsed?
     cookies[:collapsed_gutter] == 'true'
   end
@@ -132,25 +212,60 @@ module IssuablesHelper
     end
   end
 
-  def issuable_filters_present
-    params[:search] || params[:author_id] || params[:assignee_id] || params[:milestone_title] || params[:label_name]
-  end
-
   def issuables_count_for_state(issuable_type, state)
-    issuables_finder = public_send("#{issuable_type}_finder")
-    issuables_finder.params[:state] = state
-
-    issuables_finder.execute.page(1).total_count
+    @counts ||= {}
+    @counts[issuable_type] ||= public_send("#{issuable_type}_finder").count_by_state
+    @counts[issuable_type][state]
   end
 
-  IRRELEVANT_PARAMS_FOR_CACHE_KEY = %i[utf8 sort page]
+  IRRELEVANT_PARAMS_FOR_CACHE_KEY = %i[utf8 sort page].freeze
   private_constant :IRRELEVANT_PARAMS_FOR_CACHE_KEY
 
   def issuables_state_counter_cache_key(issuable_type, state)
     opts = params.with_indifferent_access
     opts[:state] = state
     opts.except!(*IRRELEVANT_PARAMS_FOR_CACHE_KEY)
+    opts.delete_if { |_, value| value.blank? }
 
     hexdigest(['issuables_count', issuable_type, opts.sort].flatten.join('-'))
   end
+
+  def issuable_templates(issuable)
+    @issuable_templates ||=
+      case issuable
+      when Issue
+        issue_template_names
+      when MergeRequest
+        merge_request_template_names
+      else
+        raise 'Unknown issuable type!'
+      end
+  end
+
+  def merge_request_template_names
+    @merge_request_templates ||= Gitlab::Template::MergeRequestTemplate.dropdown_names(ref_project)
+  end
+
+  def issue_template_names
+    @issue_templates ||= Gitlab::Template::IssueTemplate.dropdown_names(ref_project)
+  end
+
+  def selected_template(issuable)
+    params[:issuable_template] if issuable_templates(issuable).any?{ |template| template[:name] == params[:issuable_template] }
+  end
+
+  def issuable_todo_button_data(issuable, todo, is_collapsed)
+    {
+      todo_text: "Add todo",
+      mark_text: "Mark done",
+      todo_icon: (is_collapsed ? icon('plus-square') : nil),
+      mark_icon: (is_collapsed ? icon('check-square', class: 'todo-undone') : nil),
+      issuable_id: issuable.id,
+      issuable_type: issuable.class.name.underscore,
+      url: namespace_project_todos_path(@project.namespace, @project),
+      delete_path: (dashboard_todo_path(todo) if todo),
+      placement: (is_collapsed ? 'left' : nil),
+      container: (is_collapsed ? 'body' : nil)
+    }
+  end
 end
diff --git a/app/helpers/issues_helper.rb b/app/helpers/issues_helper.rb
index 1644c346dd8..6978b0c89fd 100644
--- a/app/helpers/issues_helper.rb
+++ b/app/helpers/issues_helper.rb
@@ -58,12 +58,14 @@ module IssuesHelper
   end
 
   def status_box_class(item)
-    if item.respond_to?(:expired?) && item.expired?
+    if item.try(:expired?)
       'status-box-expired'
-    elsif item.respond_to?(:merged?) && item.merged?
+    elsif item.try(:merged?)
       'status-box-merged'
     elsif item.closed?
       'status-box-closed'
+    elsif item.try(:upcoming?)
+      'status-box-upcoming'
     else
       'status-box-open'
     end
@@ -85,34 +87,6 @@ module IssuesHelper
     icon('eye-slash') if issue.confidential?
   end
 
-  def emoji_icon(name, unicode = nil, aliases = [], sprite: true)
-    unicode ||= Gitlab::Emoji.emoji_filename(name) rescue ""
-
-    data = {
-      aliases: aliases.join(" "),
-      emoji: name,
-      unicode_name: unicode
-    }
-
-    if sprite
-      # Emoji icons for the emoji menu, these use a spritesheet.
-      content_tag :div, "",
-        class: "icon emoji-icon emoji-#{unicode}",
-        title: name,
-        data: data
-    else
-      # Emoji icons displayed separately, used for the awards already given
-      # to an issue or merge request.
-      content_tag :img, "",
-        class: "icon emoji",
-        title: name,
-        height: "20px",
-        width: "20px",
-        src: url_to_image("#{unicode}.png"),
-        data: data
-    end
-  end
-
   def award_user_list(awards, current_user, limit: 10)
     names = awards.map do |award|
       award.user == current_user ? 'You' : award.user.name
@@ -126,8 +100,10 @@ module IssuesHelper
     names.to_sentence
   end
 
-  def award_active_class(awards, current_user)
-    if current_user && awards.find { |a| a.user_id == current_user.id }
+  def award_state_class(awards, current_user)
+    if !current_user
+      "disabled"
+    elsif current_user && awards.find { |a| a.user_id == current_user.id }
       "active"
     else
       ""
@@ -158,6 +134,20 @@ module IssuesHelper
     options_from_collection_for_select(options, 'name', 'title', params[:due_date])
   end
 
+  def link_to_discussions_to_resolve(merge_request, single_discussion = nil)
+    link_text = merge_request.to_reference
+    link_text += " (discussion #{single_discussion.first_note.id})" if single_discussion
+
+    path = if single_discussion
+             Gitlab::UrlBuilder.build(single_discussion.first_note)
+           else
+             project = merge_request.project
+             namespace_project_merge_request_path(project.namespace, project, merge_request)
+           end
+
+    link_to link_text, path
+  end
+
   # Required for Banzai::Filter::IssueReferenceFilter
   module_function :url_for_issue
 end
diff --git a/app/helpers/javascript_helper.rb b/app/helpers/javascript_helper.rb
index 0e456214d37..68c09c922a6 100644
--- a/app/helpers/javascript_helper.rb
+++ b/app/helpers/javascript_helper.rb
@@ -1,5 +1,9 @@
 module JavascriptHelper
   def page_specific_javascript_tag(js)
-    javascript_include_tag asset_path(js), { "data-turbolinks-track" => true }
+    javascript_include_tag asset_path(js)
+  end
+
+  def page_specific_javascript_bundle_tag(js)
+    javascript_include_tag(*webpack_asset_paths(js))
   end
 end
diff --git a/app/helpers/labels_helper.rb b/app/helpers/labels_helper.rb
index 221a84b042f..e5b1e6e8bc7 100644
--- a/app/helpers/labels_helper.rb
+++ b/app/helpers/labels_helper.rb
@@ -68,14 +68,6 @@ module LabelsHelper
     end
   end
 
-  def toggle_subscription_data(label)
-    return unless label.is_a?(ProjectLabel)
-
-    {
-      url: toggle_subscription_namespace_project_label_path(label.project.namespace, label.project, label)
-    }
-  end
-
   def render_colored_label(label, label_suffix = '', tooltip: true)
     label_color = label.color || Label::DEFAULT_COLOR
     text_color = text_color_for_bg(label_color)
@@ -90,12 +82,6 @@ module LabelsHelper
     span.html_safe
   end
 
-  def render_colored_cross_project_label(label, source_project = nil, tooltip: true)
-    label_suffix = source_project ? source_project.name_with_namespace : label.project.name_with_namespace
-    label_suffix = " <i>in #{escape_once(label_suffix)}</i>"
-    render_colored_label(label, label_suffix, tooltip: tooltip)
-  end
-
   def suggested_colors
     [
       '#0033CC',
@@ -148,20 +134,24 @@ module LabelsHelper
     end
   end
 
-  def label_subscription_status(label)
-    case label
-    when GroupLabel then 'Subscribing to group labels is currently not supported.'
-    when ProjectLabel then label.subscribed?(current_user) ? 'subscribed' : 'unsubscribed'
-    end
+  def label_subscription_status(label, project)
+    return 'project-level' if label.subscribed?(current_user, project)
+    return 'group-level' if label.subscribed?(current_user)
+
+    'unsubscribed'
   end
 
-  def label_subscription_toggle_button_text(label)
-    case label
-    when GroupLabel then 'Subscribing to group labels is currently not supported.'
-    when ProjectLabel then label.subscribed?(current_user) ? 'Unsubscribe' : 'Subscribe'
+  def group_label_unsubscribe_path(label, project)
+    case label_subscription_status(label, project)
+    when 'project-level' then toggle_subscription_namespace_project_label_path(@project.namespace, @project, label)
+    when 'group-level' then toggle_subscription_group_label_path(label.group, label)
     end
   end
 
+  def label_subscription_toggle_button_text(label, project)
+    label.subscribed?(current_user, project) ? 'Unsubscribe' : 'Subscribe'
+  end
+
   def label_deletion_confirm_text(label)
     case label
     when GroupLabel then 'Remove this label? This will affect all projects within the group. Are you sure?'
@@ -170,6 +160,5 @@ module LabelsHelper
   end
 
   # Required for Banzai::Filter::LabelReferenceFilter
-  module_function :render_colored_label, :render_colored_cross_project_label,
-                  :text_color_for_bg, :escape_once
+  module_function :render_colored_label, :text_color_for_bg, :escape_once
 end
diff --git a/app/helpers/lfs_helper.rb b/app/helpers/lfs_helper.rb
deleted file mode 100644
index 95b60aeab5f..00000000000
--- a/app/helpers/lfs_helper.rb
+++ /dev/null
@@ -1,81 +0,0 @@
-module LfsHelper
-  include Gitlab::Routing.url_helpers
-  
-  def require_lfs_enabled!
-    return if Gitlab.config.lfs.enabled
-
-    render(
-      json: {
-        message: 'Git LFS is not enabled on this GitLab server, contact your admin.',
-        documentation_url: help_url,
-      },
-      status: 501
-    )
-  end
-
-  def lfs_check_access!
-    return if download_request? && lfs_download_access?
-    return if upload_request? && lfs_upload_access?
-
-    if project.public? || (user && user.can?(:read_project, project))
-      render_lfs_forbidden
-    else
-      render_lfs_not_found
-    end
-  end
-
-  def lfs_download_access?
-    return false unless project.lfs_enabled?
-
-    project.public? || ci? || lfs_deploy_token? || user_can_download_code? || build_can_download_code?
-  end
-
-  def user_can_download_code?
-    has_authentication_ability?(:download_code) && can?(user, :download_code, project)
-  end
-
-  def build_can_download_code?
-    has_authentication_ability?(:build_download_code) && can?(user, :build_download_code, project)
-  end
-
-  def lfs_upload_access?
-    return false unless project.lfs_enabled?
-
-    has_authentication_ability?(:push_code) && can?(user, :push_code, project)
-  end
-
-  def render_lfs_forbidden
-    render(
-      json: {
-        message: 'Access forbidden. Check your access level.',
-        documentation_url: help_url,
-      },
-      content_type: "application/vnd.git-lfs+json",
-      status: 403
-    )
-  end
-
-  def render_lfs_not_found
-    render(
-      json: {
-        message: 'Not found.',
-        documentation_url: help_url,
-      },
-      content_type: "application/vnd.git-lfs+json",
-      status: 404
-    )
-  end
-
-  def storage_project
-    @storage_project ||= begin
-      result = project
-
-      loop do
-        break unless result.forked?
-        result = result.forked_from_project
-      end
-
-      result
-    end
-  end
-end
diff --git a/app/helpers/mattermost_helper.rb b/app/helpers/mattermost_helper.rb
new file mode 100644
index 00000000000..27ff4051c8d
--- /dev/null
+++ b/app/helpers/mattermost_helper.rb
@@ -0,0 +1,7 @@
+module MattermostHelper
+  def mattermost_teams_options(teams)
+    teams.map do |team|
+      [team['display_name'] || team['name'], team['id']]
+    end
+  end
+end
diff --git a/app/helpers/members_helper.rb b/app/helpers/members_helper.rb
index 877c77050be..41d471cc92f 100644
--- a/app/helpers/members_helper.rb
+++ b/app/helpers/members_helper.rb
@@ -36,4 +36,12 @@ module MembersHelper
     "Are you sure you want to leave the " \
     "\"#{member_source.human_name}\" #{member_source.class.to_s.humanize(capitalize: false)}?"
   end
+
+  def filter_group_project_member_path(options = {})
+    options = params.slice(:search, :sort).merge(options)
+
+    path = request.path
+    path << "?#{options.to_param}"
+    path
+  end
 end
diff --git a/app/helpers/merge_requests_helper.rb b/app/helpers/merge_requests_helper.rb
index a6659ea2fd1..38be073c8dc 100644
--- a/app/helpers/merge_requests_helper.rb
+++ b/app/helpers/merge_requests_helper.rb
@@ -19,6 +19,14 @@ module MergeRequestsHelper
     }
   end
 
+  def mr_widget_refresh_url(mr)
+    if mr && mr.target_project
+      merge_widget_refresh_namespace_project_merge_request_url(mr.target_project.namespace, mr.target_project, mr)
+    else
+      ''
+    end
+  end
+
   def mr_css_classes(mr)
     classes = "merge-request"
     classes << " closed" if mr.closed?
@@ -56,17 +64,21 @@ module MergeRequestsHelper
   end
 
   def mr_closes_issues
-    @mr_closes_issues ||= @merge_request.closes_issues
+    @mr_closes_issues ||= @merge_request.closes_issues(current_user)
+  end
+
+  def mr_issues_mentioned_but_not_closing
+    @mr_issues_mentioned_but_not_closing ||= @merge_request.issues_mentioned_but_not_closing(current_user)
   end
 
   def mr_change_branches_path(merge_request)
     new_namespace_project_merge_request_path(
       @project.namespace, @project,
       merge_request: {
-        source_project_id: @merge_request.source_project_id,
-        target_project_id: @merge_request.target_project_id,
-        source_branch: @merge_request.source_branch,
-        target_branch: @merge_request.target_branch,
+        source_project_id: merge_request.source_project_id,
+        target_project_id: merge_request.target_project_id,
+        source_branch: merge_request.source_branch,
+        target_branch: merge_request.target_branch,
       },
       change_branches: true
     )
@@ -131,4 +143,16 @@ module MergeRequestsHelper
   def different_base?(version1, version2)
     version1 && version2 && version1.base_commit_sha != version2.base_commit_sha
   end
+
+  def merge_params(merge_request)
+    {
+      merge_when_pipeline_succeeds: true,
+      should_remove_source_branch: true,
+      sha: merge_request.diff_head_sha
+    }.merge(merge_params_ee(merge_request))
+  end
+
+  def merge_params_ee(merge_request)
+    {}
+  end
 end
diff --git a/app/helpers/milestones_helper.rb b/app/helpers/milestones_helper.rb
index 83a2a4ad3ec..c9e70faa52e 100644
--- a/app/helpers/milestones_helper.rb
+++ b/app/helpers/milestones_helper.rb
@@ -19,8 +19,8 @@ module MilestonesHelper
     end
   end
 
-  def milestones_browse_issuables_path(milestone, type:)
-    opts = { milestone_title: milestone.title }
+  def milestones_browse_issuables_path(milestone, state: nil, type:)
+    opts = { milestone_title: milestone.title, state: state }
 
     if @project
       polymorphic_path([@project.namespace.becomes(Namespace), @project, type], opts)
@@ -82,10 +82,37 @@ module MilestonesHelper
   def milestone_remaining_days(milestone)
     if milestone.expired?
       content_tag(:strong, 'Past due')
+    elsif milestone.upcoming?
+      content_tag(:strong, 'Upcoming')
     elsif milestone.due_date
-      days    = milestone.remaining_days
+      time_ago = time_ago_in_words(milestone.due_date)
+      content = time_ago.gsub(/\d+/) { |match| "<strong>#{match}</strong>" }
+      content.slice!("about ")
+      content << " remaining"
+      content.html_safe
+    elsif milestone.start_date && milestone.start_date.past?
+      days    = milestone.elapsed_days
       content = content_tag(:strong, days)
-      content << " #{'day'.pluralize(days)} remaining"
+      content << " #{'day'.pluralize(days)} elapsed"
+      content.html_safe
+    end
+  end
+
+  def milestone_date_range(milestone)
+    if milestone.start_date && milestone.due_date
+      "#{milestone.start_date.to_s(:medium)}–#{milestone.due_date.to_s(:medium)}"
+    elsif milestone.due_date
+      if milestone.due_date.past?
+        "expired on #{milestone.due_date.to_s(:medium)}"
+      else
+        "expires on #{milestone.due_date.to_s(:medium)}"
+      end
+    elsif milestone.start_date
+      if milestone.start_date.past?
+        "started on #{milestone.start_date.to_s(:medium)}"
+      else
+        "starts on #{milestone.start_date.to_s(:medium)}"
+      end
     end
   end
 end
diff --git a/app/helpers/namespaces_helper.rb b/app/helpers/namespaces_helper.rb
index e0b8dc1393b..7f656b8caae 100644
--- a/app/helpers/namespaces_helper.rb
+++ b/app/helpers/namespaces_helper.rb
@@ -1,8 +1,18 @@
 module NamespacesHelper
+  def namespace_id_from(params)
+    params.dig(:project, :namespace_id) || params[:namespace_id]
+  end
+
   def namespaces_options(selected = :current_user, display_path: false, extra_group: nil)
     groups = current_user.owned_groups + current_user.masters_groups
 
-    groups << extra_group if extra_group && !Group.exists?(name: extra_group.name)
+    unless extra_group.nil? || extra_group.is_a?(Group)
+      extra_group = Group.find(extra_group) if Namespace.find(extra_group).kind == 'group'
+    end
+
+    if extra_group && extra_group.is_a?(Group) && (!Group.exists?(name: extra_group.name) || Ability.allowed?(current_user, :read_group, extra_group))
+      groups |= [extra_group]
+    end
 
     users = [current_user.namespace]
 
@@ -10,7 +20,7 @@ module NamespacesHelper
     data_attr_users = { 'data-options-parent' => 'users' }
 
     group_opts = [
-      "Groups", groups.sort_by(&:human_name).map { |g| [display_path ? g.path : g.human_name, g.id, data_attr_group] }
+      "Groups", groups.sort_by(&:human_name).map { |g| [display_path ? g.full_path : g.human_name, g.id, data_attr_group] }
     ]
 
     users_opts = [
@@ -29,7 +39,7 @@ module NamespacesHelper
   end
 
   def namespace_icon(namespace, size = 40)
-    if namespace.kind_of?(Group)
+    if namespace.is_a?(Group)
       group_icon(namespace)
     else
       avatar_icon(namespace.owner.email, size)
diff --git a/app/helpers/nav_helper.rb b/app/helpers/nav_helper.rb
index df87fac132d..17bfd07e00f 100644
--- a/app/helpers/nav_helper.rb
+++ b/app/helpers/nav_helper.rb
@@ -1,18 +1,13 @@
 module NavHelper
-  def page_sidebar_class
-    if pinned_nav?
-      "page-sidebar-expanded page-sidebar-pinned"
-    end
-  end
-
   def page_gutter_class
     if current_path?('merge_requests#show') ||
-      current_path?('merge_requests#diffs') ||
-      current_path?('merge_requests#commits') ||
-      current_path?('merge_requests#builds') ||
-      current_path?('merge_requests#conflicts') ||
-      current_path?('merge_requests#pipelines') ||
-      current_path?('issues#show')
+        current_path?('merge_requests#diffs') ||
+        current_path?('merge_requests#commits') ||
+        current_path?('merge_requests#builds') ||
+        current_path?('merge_requests#conflicts') ||
+        current_path?('merge_requests#pipelines') ||
+        current_path?('issues#show') ||
+        current_path?('milestones#show')
       if cookies[:collapsed_gutter] == 'true'
         "page-gutter right-sidebar-collapsed"
       else
@@ -20,6 +15,12 @@ module NavHelper
       end
     elsif current_path?('builds#show')
       "page-gutter build-sidebar right-sidebar-expanded"
+    elsif current_path?('wikis#show') ||
+        current_path?('wikis#edit') ||
+        current_path?('wikis#update') ||
+        current_path?('wikis#history') ||
+        current_path?('wikis#git_access')
+      "page-gutter wiki-sidebar right-sidebar-expanded"
     end
   end
 
@@ -27,22 +28,18 @@ module NavHelper
     class_name = ''
     class_name << " with-horizontal-nav" if defined?(nav) && nav
 
-    if pinned_nav?
-      class_name << " header-sidebar-expanded header-sidebar-pinned"
-    end
-
     class_name
   end
 
   def layout_nav_class
-    "page-with-layout-nav" if defined?(nav) && nav
+    class_name = ''
+    class_name << " page-with-layout-nav" if defined?(nav) && nav
+    class_name << " page-with-sub-nav" if content_for?(:sub_nav)
+
+    class_name
   end
 
   def nav_control_class
     "nav-control" if current_user
   end
-
-  def pinned_nav?
-    cookies[:pin_nav] == 'true'
-  end
 end
diff --git a/app/helpers/notifications_helper.rb b/app/helpers/notifications_helper.rb
index 7e8369d0a05..03cc8f2b6bd 100644
--- a/app/helpers/notifications_helper.rb
+++ b/app/helpers/notifications_helper.rb
@@ -74,4 +74,13 @@ module NotificationsHelper
     return unless notification_setting.source_type
     hidden_field_tag "#{notification_setting.source_type.downcase}_id", notification_setting.source_id
   end
+
+  def notification_event_name(event)
+    case event
+    when :success_pipeline
+      'Successful pipeline'
+    else
+      event.to_s.humanize
+    end
+  end
 end
diff --git a/app/helpers/page_layout_helper.rb b/app/helpers/page_layout_helper.rb
index 7d4d049101a..3286a92a8a7 100644
--- a/app/helpers/page_layout_helper.rb
+++ b/app/helpers/page_layout_helper.rb
@@ -34,6 +34,10 @@ module PageLayoutHelper
     end
   end
 
+  def favicon
+    Rails.env.development? ? 'favicon-blue.ico' : 'favicon.ico'
+  end
+
   def page_image
     default = image_url('gitlab_logo.png')
 
diff --git a/app/helpers/preferences_helper.rb b/app/helpers/preferences_helper.rb
index a46f2c6e17d..243ef39ef61 100644
--- a/app/helpers/preferences_helper.rb
+++ b/app/helpers/preferences_helper.rb
@@ -23,7 +23,7 @@ module PreferencesHelper
 
     if defined.size != DASHBOARD_CHOICES.size
       # Ensure that anyone adding new options updates this method too
-      raise RuntimeError, "`User` defines #{defined.size} dashboard choices," +
+      raise "`User` defines #{defined.size} dashboard choices," \
         " but `DASHBOARD_CHOICES` defined #{DASHBOARD_CHOICES.size}."
     else
       defined.map do |key, _|
@@ -35,22 +35,17 @@ module PreferencesHelper
 
   def project_view_choices
     [
-      ['Readme (default)', :readme],
-      ['Activity view', :activity],
-      ['Files view', :files]
+      ['Files and Readme (default)', :files],
+      ['Activity', :activity]
     ]
   end
 
-  def user_application_theme
-    Gitlab::Themes.for_user(current_user).css_class
-  end
-
   def user_color_scheme
     Gitlab::ColorSchemes.for_user(current_user).css_class
   end
 
   def default_project_view
-    return 'readme' unless current_user
+    return anonymous_project_view unless current_user
 
     user_view = current_user.project_view
 
@@ -66,4 +61,8 @@ module PreferencesHelper
       "customize_workflow"
     end
   end
+
+  def anonymous_project_view
+    @project.empty_repo? || !can?(current_user, :download_code, @project) ? 'activity' : 'readme'
+  end
 end
diff --git a/app/helpers/projects_helper.rb b/app/helpers/projects_helper.rb
index 42c00ec3cd5..bd0c2cd661e 100644
--- a/app/helpers/projects_helper.rb
+++ b/app/helpers/projects_helper.rb
@@ -49,10 +49,10 @@ module ProjectsHelper
     end
   end
 
-  def project_title(project, name = nil, url = nil)
+  def project_title(project)
     namespace_link =
       if project.group
-        link_to(simple_sanitize(project.group.name), group_path(project.group))
+        group_title(project.group)
       else
         owner = project.namespace.owner
         link_to(simple_sanitize(owner.name), user_path(owner))
@@ -61,15 +61,12 @@ module ProjectsHelper
     project_link = link_to simple_sanitize(project.name), project_path(project), { class: "project-item-select-holder" }
 
     if current_user
-      project_link << button_tag(type: 'button', class: "dropdown-toggle-caret js-projects-dropdown-toggle", aria: { label: "Toggle switch project dropdown" }, data: { target: ".js-dropdown-menu-projects", toggle: "dropdown" }) do
+      project_link << button_tag(type: 'button', class: 'dropdown-toggle-caret js-projects-dropdown-toggle', aria: { label: 'Toggle switch project dropdown' }, data: { target: '.js-dropdown-menu-projects', toggle: 'dropdown', order_by: 'last_activity_at' }) do
         icon("chevron-down")
       end
     end
 
-    full_title = "#{namespace_link} / #{project_link}".html_safe
-    full_title << ' &middot; '.html_safe << link_to(simple_sanitize(name), url) if name
-
-    full_title
+    "#{namespace_link} / #{project_link}".html_safe
   end
 
   def remove_project_message(project)
@@ -93,10 +90,12 @@ module ProjectsHelper
   end
 
   def project_for_deploy_key(deploy_key)
-    if deploy_key.projects.include?(@project)
+    if deploy_key.has_access_to?(@project)
       @project
     else
-      deploy_key.projects.find { |project| can?(current_user, :read_project, project) }
+      deploy_key.projects.find do |project|
+        can?(current_user, :read_project, project)
+      end
     end
   end
 
@@ -151,6 +150,22 @@ module ProjectsHelper
     ).html_safe
   end
 
+  def link_to_autodeploy_doc
+    link_to 'About auto deploy', help_page_path('ci/autodeploy/index'), target: '_blank'
+  end
+
+  def autodeploy_flash_notice(branch_name)
+    "Branch <strong>#{truncate(sanitize(branch_name))}</strong> was created. To set up auto deploy, \
+      choose a GitLab CI Yaml template and commit your changes. #{link_to_autodeploy_doc}".html_safe
+  end
+
+  def project_list_cache_key(project)
+    key = [project.namespace.cache_key, project.cache_key, controller.controller_name, controller.action_name, current_application_settings.cache_key, 'v2.3']
+    key << pipeline_status_cache_key(project.pipeline_status) if project.pipeline_status.has_status?
+
+    key
+  end
+
   private
 
   def repo_children_classes(field)
@@ -174,48 +189,27 @@ module ProjectsHelper
       nav_tabs << :merge_requests
     end
 
-    if can?(current_user, :read_pipeline, project)
-      nav_tabs << :pipelines
-    end
-
-    if can?(current_user, :read_build, project)
-      nav_tabs << :builds
-    end
-
     if Gitlab.config.registry.enabled && can?(current_user, :read_container_image, project)
       nav_tabs << :container_registry
     end
 
-    if can?(current_user, :read_environment, project)
-      nav_tabs << :environments
-    end
-
-    if can?(current_user, :admin_project, project)
-      nav_tabs << :settings
-    end
-
-    if can?(current_user, :read_project_member, project)
-      nav_tabs << :team
-    end
-
-    if can?(current_user, :read_issue, project)
-      nav_tabs << :issues
-    end
-
-    if can?(current_user, :read_wiki, project)
-      nav_tabs << :wiki
-    end
-
-    if can?(current_user, :read_project_snippet, project)
-      nav_tabs << :snippets
-    end
-
-    if can?(current_user, :read_label, project)
-      nav_tabs << :labels
-    end
+    tab_ability_map = {
+      environments: :read_environment,
+      milestones:   :read_milestone,
+      pipelines:    :read_pipeline,
+      snippets:     :read_project_snippet,
+      settings:     :admin_project,
+      builds:       :read_build,
+      labels:       :read_label,
+      issues:       :read_issue,
+      team:         :read_project_member,
+      wiki:         :read_wiki
+    }
 
-    if can?(current_user, :read_milestone, project)
-      nav_tabs << :milestones
+    tab_ability_map.each do |tab, ability|
+      if can?(current_user, ability, project)
+        nav_tabs << tab
+      end
     end
 
     nav_tabs.flatten
@@ -249,17 +243,12 @@ module ProjectsHelper
     end
   end
 
-  def repository_size(project = @project)
-    size_in_bytes = project.repository_size * 1.megabyte
-    number_to_human_size(size_in_bytes, delimiter: ',', precision: 2)
-  end
-
   def default_url_to_repo(project = @project)
     case default_clone_protocol
     when 'ssh'
       project.ssh_url_to_repo
     else
-      project.http_url_to_repo
+      project.http_url_to_repo(current_user)
     end
   end
 
@@ -283,13 +272,15 @@ module ProjectsHelper
     end
   end
 
-  def add_special_file_path(project, file_name:, commit_message: nil)
+  def add_special_file_path(project, file_name:, commit_message: nil, target_branch: nil, context: nil)
     namespace_project_new_blob_path(
       project.namespace,
       project,
       project.default_branch || 'master',
       file_name:      file_name,
-      commit_message: commit_message || "Add #{file_name.downcase}"
+      commit_message: commit_message || "Add #{file_name.downcase}",
+      target_branch: target_branch,
+      context: context
     )
   end
 
@@ -394,39 +385,11 @@ module ProjectsHelper
     end
   end
 
-  def new_readme_path
-    ref = @repository.root_ref if @repository
-    ref ||= 'master'
-
-    namespace_project_new_blob_path(@project.namespace, @project, tree_join(ref), file_name: 'README.md')
-  end
-
-  def new_license_path
-    ref = @repository.root_ref if @repository
-    ref ||= 'master'
-
-    namespace_project_new_blob_path(@project.namespace, @project, tree_join(ref), file_name: 'LICENSE')
-  end
-
   def readme_cache_key
     sha = @project.commit.try(:sha) || 'nil'
     [@project.path_with_namespace, sha, "readme"].join('-')
   end
 
-  def round_commit_count(project)
-    count = project.commit_count
-
-    if count > 10000
-      '10000+'
-    elsif count > 5000
-      '5000+'
-    elsif count > 1000
-      '1000+'
-    else
-      count
-    end
-  end
-
   def current_ref
     @ref || @repository.try(:root_ref)
   end
@@ -458,4 +421,19 @@ module ProjectsHelper
   def project_child_container_class(view_path)
     view_path == "projects/issues/issues" ? "prepend-top-default" : "project-show-#{view_path}"
   end
+
+  def project_issues(project)
+    IssuesFinder.new(current_user, project_id: project.id).execute
+  end
+
+  def visibility_select_options(project, selected_level)
+    levels_options_array = Gitlab::VisibilityLevel.values.map do |level|
+      [
+        visibility_level_label(level),
+        { data: { description: visibility_level_description(level, project) } },
+        level
+      ]
+    end
+    options_for_select(levels_options_array, selected_level)
+  end
 end
diff --git a/app/helpers/rss_helper.rb b/app/helpers/rss_helper.rb
new file mode 100644
index 00000000000..ea5d2932ef4
--- /dev/null
+++ b/app/helpers/rss_helper.rb
@@ -0,0 +1,5 @@
+module RssHelper
+  def rss_url_options
+    { format: :atom, private_token: current_user.try(:private_token) }
+  end
+end
diff --git a/app/helpers/search_helper.rb b/app/helpers/search_helper.rb
index aba3a3f9c5d..8ff8db16514 100644
--- a/app/helpers/search_helper.rb
+++ b/app/helpers/search_helper.rb
@@ -31,34 +31,7 @@ module SearchHelper
   end
 
   def parse_search_result(result)
-    ref = nil
-    filename = nil
-    basename = nil
-    startline = 0
-
-    result.each_line.each_with_index do |line, index|
-      if line =~ /^.*:.*:\d+:/
-        ref, filename, startline = line.split(':')
-        startline = startline.to_i - index
-        extname = Regexp.escape(File.extname(filename))
-        basename = filename.sub(/#{extname}$/, '')
-        break
-      end
-    end
-
-    data = ""
-
-    result.each_line do |line|
-      data << line.sub(ref, '').sub(filename, '').sub(/^:-\d+-/, '').sub(/^::\d+:/, '')
-    end
-
-    OpenStruct.new(
-      filename: filename,
-      basename: basename,
-      ref: ref,
-      startline: startline,
-      data: data
-    )
+    Gitlab::ProjectSearchResults.parse_search_result(result)
   end
 
   private
@@ -66,7 +39,7 @@ module SearchHelper
   # Autocomplete results for various settings pages
   def default_autocomplete
     [
-      { category: "Settings", label: "Profile settings", url: profile_path },
+      { category: "Settings", label: "User settings",    url: profile_path },
       { category: "Settings", label: "SSH Keys",         url: profile_keys_path },
       { category: "Settings", label: "Dashboard",        url: root_path },
       { category: "Settings", label: "Admin Section",    url: admin_root_path },
@@ -83,7 +56,7 @@ module SearchHelper
       { category: "Help", label: "Rake Tasks Help",    url: help_page_path("raketasks/README") },
       { category: "Help", label: "SSH Keys Help",      url: help_page_path("ssh/README") },
       { category: "Help", label: "System Hooks Help",  url: help_page_path("system_hooks/system_hooks") },
-      { category: "Help", label: "Webhooks Help",      url: help_page_path("web_hooks/web_hooks") },
+      { category: "Help", label: "Webhooks Help",      url: help_page_path("user/project/integrations/webhooks") },
       { category: "Help", label: "Workflow Help",      url: help_page_path("workflow/README") },
     ]
   end
@@ -102,7 +75,7 @@ module SearchHelper
         { category: "Current Project", label: "Merge Requests", url: namespace_project_merge_requests_path(@project.namespace, @project) },
         { category: "Current Project", label: "Milestones",     url: namespace_project_milestones_path(@project.namespace, @project) },
         { category: "Current Project", label: "Snippets",       url: namespace_project_snippets_path(@project.namespace, @project) },
-        { category: "Current Project", label: "Members",        url: namespace_project_project_members_path(@project.namespace, @project) },
+        { category: "Current Project", label: "Members",        url: namespace_project_settings_members_path(@project.namespace, @project) },
         { category: "Current Project", label: "Wiki",           url: namespace_project_wikis_path(@project.namespace, @project) },
       ]
     else
@@ -116,7 +89,7 @@ module SearchHelper
       {
         category: "Groups",
         id: group.id,
-        label: "#{search_result_sanitize(group.name)}",
+        label: "#{search_result_sanitize(group.full_name)}",
         url: group_path(group)
       }
     end
diff --git a/app/helpers/services_helper.rb b/app/helpers/services_helper.rb
index 3d4abf76419..715e5893a2c 100644
--- a/app/helpers/services_helper.rb
+++ b/app/helpers/services_helper.rb
@@ -1,22 +1,24 @@
 module ServicesHelper
   def service_event_description(event)
     case event
-    when "push"
+    when "push", "push_events"
       "Event will be triggered by a push to the repository"
-    when "tag_push"
+    when "tag_push", "tag_push_events"
       "Event will be triggered when a new tag is pushed to the repository"
-    when "note"
+    when "note", "note_events"
       "Event will be triggered when someone adds a comment"
-    when "issue"
+    when "issue", "issue_events"
       "Event will be triggered when an issue is created/updated/closed"
-    when "confidential_issue"
+    when "confidential_issue", "confidential_issue_events"
       "Event will be triggered when a confidential issue is created/updated/closed"
-    when "merge_request"
+    when "merge_request", "merge_request_events"
       "Event will be triggered when a merge request is created/updated/merged"
-    when "build"
+    when "build", "build_events"
       "Event will be triggered when a build status changes"
-    when "wiki_page"
+    when "wiki_page", "wiki_page_events"
       "Event will be triggered when a wiki page is created/updated"
+    when "commit", "commit_events"
+      "Event will be triggered when a commit is created/updated"
     end
   end
 
@@ -24,4 +26,6 @@ module ServicesHelper
     event = event.pluralize if %w[merge_request issue confidential_issue].include?(event)
     "#{event}_events"
   end
+
+  extend self
 end
diff --git a/app/helpers/sidekiq_helper.rb b/app/helpers/sidekiq_helper.rb
index 56749d80bd3..55f4da0ef85 100644
--- a/app/helpers/sidekiq_helper.rb
+++ b/app/helpers/sidekiq_helper.rb
@@ -3,17 +3,13 @@ module SidekiqHelper
     (?<pid>\d+)\s+
     (?<cpu>[\d\.,]+)\s+
     (?<mem>[\d\.,]+)\s+
-    (?<state>[DRSTWXZNLsl\+<]+)\s+
-    (?<start>.+)\s+
-    (?<command>sidekiq.*\])\s*
+    (?<state>[DIEKNRSTVWXZNLpsl\+<>\/\d]+)\s+
+    (?<start>.+?)\s+
+    (?<command>(?:ruby\d+:\s+)?sidekiq.*\].*)
     \z/x
 
   def parse_sidekiq_ps(line)
-    match = line.match(SIDEKIQ_PS_REGEXP)
-    if match
-      match[1..6]
-    else
-      %w[? ? ? ? ? ?]
-    end
+    match = line.strip.match(SIDEKIQ_PS_REGEXP)
+    match ? match[1..6] : Array.new(6, '?')
   end
 end
diff --git a/app/helpers/snippets_helper.rb b/app/helpers/snippets_helper.rb
index 7e33a562077..8c02b4061ca 100644
--- a/app/helpers/snippets_helper.rb
+++ b/app/helpers/snippets_helper.rb
@@ -8,6 +8,17 @@ module SnippetsHelper
     end
   end
 
+  # Return the path of a snippets index for a user or for a project
+  #
+  # @returns String, path to snippet index
+  def subject_snippets_path(subject = nil, opts = nil)
+    if subject.is_a?(Project)
+      namespace_project_snippets_path(subject.namespace, subject, opts)
+    else # assume subject === User
+      dashboard_snippets_path(opts)
+    end
+  end
+
   # Get an array of line numbers surrounding a matching
   # line, bounded by min/max.
   #
diff --git a/app/helpers/sorting_helper.rb b/app/helpers/sorting_helper.rb
index 8b138a8e69f..5c89cbea3fc 100644
--- a/app/helpers/sorting_helper.rb
+++ b/app/helpers/sorting_helper.rb
@@ -2,6 +2,7 @@ module SortingHelper
   def sort_options_hash
     {
       sort_value_name => sort_title_name,
+      sort_value_name_desc => sort_title_name_desc,
       sort_value_recently_updated => sort_title_recently_updated,
       sort_value_oldest_updated => sort_title_oldest_updated,
       sort_value_recently_created => sort_title_recently_created,
@@ -11,11 +12,13 @@ module SortingHelper
       sort_value_due_date_soon => sort_title_due_date_soon,
       sort_value_due_date_later => sort_title_due_date_later,
       sort_value_largest_repo => sort_title_largest_repo,
+      sort_value_largest_group => sort_title_largest_group,
       sort_value_recently_signin => sort_title_recently_signin,
       sort_value_oldest_signin => sort_title_oldest_signin,
       sort_value_downvotes => sort_title_downvotes,
       sort_value_upvotes => sort_title_upvotes,
-      sort_value_priority => sort_title_priority
+      sort_value_priority => sort_title_priority,
+      sort_value_label_priority => sort_title_label_priority
     }
   end
 
@@ -25,20 +28,48 @@ module SortingHelper
       sort_value_recently_updated => sort_title_recently_updated,
       sort_value_oldest_updated => sort_title_oldest_updated,
       sort_value_recently_created => sort_title_recently_created,
-      sort_value_oldest_created => sort_title_oldest_created,
+      sort_value_oldest_created => sort_title_oldest_created
     }
 
     if current_controller?('admin/projects')
-      options.merge!(sort_value_largest_repo => sort_title_largest_repo)
+      options[sort_value_largest_repo] = sort_title_largest_repo
     end
 
     options
   end
 
+  def member_sort_options_hash
+    {
+      sort_value_access_level_asc => sort_title_access_level_asc,
+      sort_value_access_level_desc => sort_title_access_level_desc,
+      sort_value_last_joined => sort_title_last_joined,
+      sort_value_oldest_joined => sort_title_oldest_joined,
+      sort_value_name => sort_title_name_asc,
+      sort_value_name_desc => sort_title_name_desc,
+      sort_value_recently_signin => sort_title_recently_signin,
+      sort_value_oldest_signin => sort_title_oldest_signin
+    }
+  end
+
+  def milestone_sort_options_hash
+    {
+      sort_value_name => sort_title_name_asc,
+      sort_value_name_desc => sort_title_name_desc,
+      sort_value_due_date_soon => sort_title_due_date_soon,
+      sort_value_due_date_later => sort_title_due_date_later,
+      sort_value_start_date_soon => sort_title_start_date_soon,
+      sort_value_start_date_later => sort_title_start_date_later,
+    }
+  end
+
   def sort_title_priority
     'Priority'
   end
 
+  def sort_title_label_priority
+    'Label priority'
+  end
+
   def sort_title_oldest_updated
     'Oldest updated'
   end
@@ -71,6 +102,14 @@ module SortingHelper
     'Due later'
   end
 
+  def sort_title_start_date_soon
+    'Start soon'
+  end
+
+  def sort_title_start_date_later
+    'Start later'
+  end
+
   def sort_title_name
     'Name'
   end
@@ -79,6 +118,10 @@ module SortingHelper
     'Largest repository'
   end
 
+  def sort_title_largest_group
+    'Largest group'
+  end
+
   def sort_title_recently_signin
     'Recent sign in'
   end
@@ -95,10 +138,58 @@ module SortingHelper
     'Most popular'
   end
 
+  def sort_title_last_joined
+    'Last joined'
+  end
+
+  def sort_title_oldest_joined
+    'Oldest joined'
+  end
+
+  def sort_title_access_level_asc
+    'Access level, ascending'
+  end
+
+  def sort_title_access_level_desc
+    'Access level, descending'
+  end
+
+  def sort_title_name_asc
+    'Name, ascending'
+  end
+
+  def sort_title_name_desc
+    'Name, descending'
+  end
+
+  def sort_value_last_joined
+    'last_joined'
+  end
+
+  def sort_value_oldest_joined
+    'oldest_joined'
+  end
+
+  def sort_value_access_level_asc
+    'access_level_asc'
+  end
+
+  def sort_value_access_level_desc
+    'access_level_desc'
+  end
+
+  def sort_value_name_desc
+    'name_desc'
+  end
+
   def sort_value_priority
     'priority'
   end
 
+  def sort_value_label_priority
+    'label_priority'
+  end
+
   def sort_value_oldest_updated
     'updated_asc'
   end
@@ -131,12 +222,24 @@ module SortingHelper
     'due_date_desc'
   end
 
+  def sort_value_start_date_soon
+    'start_date_asc'
+  end
+
+  def sort_value_start_date_later
+    'start_date_desc'
+  end
+
   def sort_value_name
     'name_asc'
   end
 
   def sort_value_largest_repo
-    'repository_size_desc'
+    'storage_size_desc'
+  end
+
+  def sort_value_largest_group
+    'storage_size_desc'
   end
 
   def sort_value_recently_signin
diff --git a/app/helpers/storage_helper.rb b/app/helpers/storage_helper.rb
new file mode 100644
index 00000000000..e19c67a37ca
--- /dev/null
+++ b/app/helpers/storage_helper.rb
@@ -0,0 +1,7 @@
+module StorageHelper
+  def storage_counter(size_in_bytes)
+    precision = size_in_bytes < 1.megabyte ? 0 : 1
+
+    number_to_human_size(size_in_bytes, delimiter: ',', precision: precision, significant: false)
+  end
+end
diff --git a/app/helpers/submodule_helper.rb b/app/helpers/submodule_helper.rb
index b3f50ceebe4..fb95f2b565e 100644
--- a/app/helpers/submodule_helper.rb
+++ b/app/helpers/submodule_helper.rb
@@ -37,8 +37,8 @@ module SubmoduleHelper
   end
 
   def self_url?(url, namespace, project)
-    return true if url == [ Gitlab.config.gitlab.url, '/', namespace, '/',
-                            project, '.git' ].join('')
+    return true if url == [Gitlab.config.gitlab.url, '/', namespace, '/',
+                           project, '.git'].join('')
     url == gitlab_shell.url_to_repo([namespace, '/', project].join(''))
   end
 
@@ -48,8 +48,8 @@ module SubmoduleHelper
   end
 
   def standard_links(host, namespace, project, commit)
-    base = [ 'https://', host, '/', namespace, '/', project ].join('')
-    [base, [ base, '/tree/', commit ].join('')]
+    base = ['https://', host, '/', namespace, '/', project].join('')
+    [base, [base, '/tree/', commit].join('')]
   end
 
   def relative_self_links(url, commit)
@@ -63,7 +63,7 @@ module SubmoduleHelper
     namespace = components.pop.gsub(/^\.\.$/, '')
 
     if namespace.empty?
-      namespace = @project.namespace.path
+      namespace = @project.namespace.full_path
     end
 
     [
diff --git a/app/helpers/tab_helper.rb b/app/helpers/tab_helper.rb
index 563ddd2a511..1a55ee05996 100644
--- a/app/helpers/tab_helper.rb
+++ b/app/helpers/tab_helper.rb
@@ -99,16 +99,16 @@ module TabHelper
       return 'active'
     end
 
-    if ['services', 'hooks', 'deploy_keys', 'protected_branches'].include? controller.controller_name
+    if %w(services hooks deploy_keys protected_branches).include? controller.controller_name
       "active"
     end
   end
 
   def branches_tab_class
     if current_controller?(:protected_branches) ||
-      current_controller?(:branches) ||
-      current_page?(namespace_project_repository_path(@project.namespace,
-                                                      @project))
+        current_controller?(:branches) ||
+        current_page?(namespace_project_repository_path(@project.namespace,
+                                                        @project))
       'active'
     end
   end
diff --git a/app/helpers/todos_helper.rb b/app/helpers/todos_helper.rb
index a9db8bb2b82..4f5adf623f2 100644
--- a/app/helpers/todos_helper.rb
+++ b/app/helpers/todos_helper.rb
@@ -3,6 +3,10 @@ module TodosHelper
     @todos_pending_count ||= current_user.todos_pending_count
   end
 
+  def todos_count_format(count)
+    count > 99 ? '99+' : count
+  end
+
   def todos_done_count
     @todos_done_count ||= current_user.todos_done_count
   end
@@ -11,9 +15,11 @@ module TodosHelper
     case todo.action
     when Todo::ASSIGNED then 'assigned you'
     when Todo::MENTIONED then 'mentioned you on'
-    when Todo::BUILD_FAILED then 'The build failed for your'
+    when Todo::BUILD_FAILED then 'The build failed for'
     when Todo::MARKED then 'added a todo for'
     when Todo::APPROVAL_REQUIRED then 'set you as an approver for'
+    when Todo::UNMERGEABLE then 'Could not merge'
+    when Todo::DIRECTLY_ADDRESSED then 'directly addressed you on'
     end
   end
 
@@ -35,7 +41,7 @@ module TodosHelper
     else
       path = [todo.project.namespace.becomes(Namespace), todo.project, todo.target]
 
-      path.unshift(:builds) if todo.build_failed?
+      path.unshift(:pipelines) if todo.build_failed?
 
       polymorphic_path(path, anchor: anchor)
     end
@@ -61,6 +67,10 @@ module TodosHelper
     }
   end
 
+  def todos_filter_empty?
+    todos_filter_params.values.none?
+  end
+
   def todos_filter_path(options = {})
     without = options.delete(:without)
 
@@ -81,13 +91,15 @@ module TodosHelper
     [
       { id: '', text: 'Any Action' },
       { id: Todo::ASSIGNED, text: 'Assigned' },
-      { id: Todo::MENTIONED, text: 'Mentioned' }
+      { id: Todo::MENTIONED, text: 'Mentioned' },
+      { id: Todo::MARKED, text: 'Added' },
+      { id: Todo::BUILD_FAILED, text: 'Pipelines' },
+      { id: Todo::DIRECTLY_ADDRESSED, text: 'Directly addressed' }
     ]
   end
 
   def todo_projects_options
-    projects = current_user.authorized_projects.sorted_by_activity.non_archived
-    projects = projects.includes(:namespace)
+    projects = current_user.authorized_projects.sorted_by_activity.non_archived.with_route
 
     projects = projects.map do |project|
       { id: project.id, text: project.name_with_namespace }
@@ -137,6 +149,6 @@ module TodosHelper
   private
 
   def show_todo_state?(todo)
-    (todo.target.is_a?(MergeRequest) || todo.target.is_a?(Issue)) && ['closed', 'merged'].include?(todo.target.state)
+    (todo.target.is_a?(MergeRequest) || todo.target.is_a?(Issue)) && %w(closed merged).include?(todo.target.state)
   end
 end
diff --git a/app/helpers/triggers_helper.rb b/app/helpers/triggers_helper.rb
index 8cad994d10f..a48d4475e97 100644
--- a/app/helpers/triggers_helper.rb
+++ b/app/helpers/triggers_helper.rb
@@ -1,5 +1,13 @@
 module TriggersHelper
-  def builds_trigger_url(project_id)
-    "#{Settings.gitlab.url}/api/v3/projects/#{project_id}/trigger/builds"
+  def builds_trigger_url(project_id, ref: nil)
+    if ref.nil?
+      "#{Settings.gitlab.url}/api/v4/projects/#{project_id}/trigger/pipeline"
+    else
+      "#{Settings.gitlab.url}/api/v4/projects/#{project_id}/ref/#{ref}/trigger/pipeline"
+    end
+  end
+
+  def service_trigger_url(service)
+    "#{Settings.gitlab.url}/api/v3/projects/#{service.project_id}/services/#{service.to_param}/trigger"
   end
 end
diff --git a/app/helpers/users_helper.rb b/app/helpers/users_helper.rb
new file mode 100644
index 00000000000..9c623c9ba7c
--- /dev/null
+++ b/app/helpers/users_helper.rb
@@ -0,0 +1,7 @@
+module UsersHelper
+  def user_link(user)
+    link_to(user.name, user_path(user),
+            title: user.email,
+            class: 'has-tooltip commit-committer-link')
+  end
+end
diff --git a/app/helpers/version_check_helper.rb b/app/helpers/version_check_helper.rb
index a674564c4ec..456598b4c28 100644
--- a/app/helpers/version_check_helper.rb
+++ b/app/helpers/version_check_helper.rb
@@ -1,7 +1,8 @@
 module VersionCheckHelper
   def version_status_badge
     if Rails.env.production? && current_application_settings.version_check_enabled
-      image_tag VersionCheck.new.url
+      image_url = VersionCheck.new.url
+      image_tag image_url, class: 'js-version-status-badge'
     end
   end
 end
diff --git a/app/helpers/visibility_level_helper.rb b/app/helpers/visibility_level_helper.rb
index 3a83ae15dd8..169cedeb796 100644
--- a/app/helpers/visibility_level_helper.rb
+++ b/app/helpers/visibility_level_helper.rb
@@ -89,17 +89,9 @@ module VisibilityLevelHelper
     current_application_settings.restricted_visibility_levels || []
   end
 
-  def default_project_visibility
-    current_application_settings.default_project_visibility
-  end
-
-  def default_snippet_visibility
-    current_application_settings.default_snippet_visibility
-  end
-
-  def default_group_visibility
-    current_application_settings.default_group_visibility
-  end
+  delegate  :default_project_visibility,
+            :default_group_visibility,
+            to: :current_application_settings
 
   def skip_level?(form_model, level)
     form_model.is_a?(Project) && !form_model.visibility_level_allowed?(level)
diff --git a/app/helpers/wiki_helper.rb b/app/helpers/wiki_helper.rb
new file mode 100644
index 00000000000..3e3f6246fc5
--- /dev/null
+++ b/app/helpers/wiki_helper.rb
@@ -0,0 +1,13 @@
+module WikiHelper
+  # Produces a pure text breadcrumb for a given page.
+  #
+  # page_slug - The slug of a WikiPage object.
+  #
+  # Returns a String composed of the capitalized name of each directory and the
+  # capitalized name of the page itself.
+  def breadcrumb(page_slug)
+    page_slug.split('/').
+      map { |dir_or_page| WikiPage.unhyphenize(dir_or_page).capitalize }.
+      join(' / ')
+  end
+end
diff --git a/app/mailers/base_mailer.rb b/app/mailers/base_mailer.rb
index 61a574d3dc0..79c3c2e62c5 100644
--- a/app/mailers/base_mailer.rb
+++ b/app/mailers/base_mailer.rb
@@ -1,6 +1,6 @@
 class BaseMailer < ActionMailer::Base
-  add_template_helper ApplicationHelper
-  add_template_helper GitlabMarkdownHelper
+  helper ApplicationHelper
+  helper GitlabMarkdownHelper
 
   attr_accessor :current_user
   helper_method :current_user, :can?
diff --git a/app/mailers/emails/builds.rb b/app/mailers/emails/builds.rb
deleted file mode 100644
index 3853af6201a..00000000000
--- a/app/mailers/emails/builds.rb
+++ /dev/null
@@ -1,30 +0,0 @@
-module Emails
-  module Builds
-    def build_fail_email(build_id, to)
-      @build = Ci::Build.find(build_id)
-      @project = @build.project
-
-      add_project_headers
-      add_build_headers('failed')
-
-      mail(to: to, subject: subject("Build failed for #{@project.name}", @build.short_sha))
-    end
-
-    def build_success_email(build_id, to)
-      @build = Ci::Build.find(build_id)
-      @project = @build.project
-
-      add_project_headers
-      add_build_headers('success')
-      mail(to: to, subject: subject("Build success for #{@project.name}", @build.short_sha))
-    end
-
-    private
-
-    def add_build_headers(status)
-      headers['X-GitLab-Build-Id'] = @build.id
-      headers['X-GitLab-Build-Ref'] = @build.ref
-      headers['X-GitLab-Build-Status'] = status.to_s
-    end
-  end
-end
diff --git a/app/mailers/emails/notes.rb b/app/mailers/emails/notes.rb
index 96116e916dd..46fa6fd9f6d 100644
--- a/app/mailers/emails/notes.rb
+++ b/app/mailers/emails/notes.rb
@@ -4,6 +4,7 @@ module Emails
       setup_note_mail(note_id, recipient_id)
 
       @commit = @note.noteable
+      @discussion = @note.to_discussion if @note.diff_note?
       @target_url = namespace_project_commit_url(*note_target_url_options)
 
       mail_answer_thread(@commit,
@@ -24,6 +25,7 @@ module Emails
       setup_note_mail(note_id, recipient_id)
 
       @merge_request = @note.noteable
+      @discussion = @note.to_discussion if @note.diff_note?
       @target_url = namespace_project_merge_request_url(*note_target_url_options)
       mail_answer_thread(@merge_request, note_thread_options(recipient_id))
     end
@@ -36,6 +38,14 @@ module Emails
       mail_answer_thread(@snippet, note_thread_options(recipient_id))
     end
 
+    def note_personal_snippet_email(recipient_id, note_id)
+      setup_note_mail(note_id, recipient_id)
+
+      @snippet = @note.noteable
+      @target_url = snippet_url(@note.noteable)
+      mail_answer_thread(@snippet, note_thread_options(recipient_id))
+    end
+
     private
 
     def note_target_url_options
diff --git a/app/mailers/emails/pipelines.rb b/app/mailers/emails/pipelines.rb
index 601c8b5cd62..f9f45ab987b 100644
--- a/app/mailers/emails/pipelines.rb
+++ b/app/mailers/emails/pipelines.rb
@@ -1,24 +1,29 @@
 module Emails
   module Pipelines
-    def pipeline_success_email(pipeline, to)
-      pipeline_mail(pipeline, to, 'succeeded')
+    def pipeline_success_email(pipeline, recipients)
+      pipeline_mail(pipeline, recipients, 'succeeded')
     end
 
-    def pipeline_failed_email(pipeline, to)
-      pipeline_mail(pipeline, to, 'failed')
+    def pipeline_failed_email(pipeline, recipients)
+      pipeline_mail(pipeline, recipients, 'failed')
     end
 
     private
 
-    def pipeline_mail(pipeline, to, status)
+    def pipeline_mail(pipeline, recipients, status)
       @project = pipeline.project
       @pipeline = pipeline
       @merge_request = pipeline.merge_requests.first
       add_headers
 
-      mail(to: to, subject: pipeline_subject(status), skip_premailer: true) do |format|
-        format.html { render layout: false }
-        format.text
+      # We use bcc here because we don't want to generate this emails for a
+      # thousand times. This could be potentially expensive in a loop, and
+      # recipients would contain all project watchers so it could be a lot.
+      mail(bcc: recipients,
+           subject: pipeline_subject(status),
+           skip_premailer: true) do |format|
+        format.html { render layout: 'mailer' }
+        format.text { render layout: 'mailer' }
       end
     end
 
diff --git a/app/mailers/notify.rb b/app/mailers/notify.rb
index eca6ec29767..14df6f8f0a3 100644
--- a/app/mailers/notify.rb
+++ b/app/mailers/notify.rb
@@ -6,16 +6,15 @@ class Notify < BaseMailer
   include Emails::Notes
   include Emails::Projects
   include Emails::Profile
-  include Emails::Builds
   include Emails::Pipelines
   include Emails::Members
 
-  add_template_helper MergeRequestsHelper
-  add_template_helper DiffHelper
-  add_template_helper BlobHelper
-  add_template_helper EmailsHelper
-  add_template_helper MembersHelper
-  add_template_helper GitlabRoutingHelper
+  helper MergeRequestsHelper
+  helper DiffHelper
+  helper BlobHelper
+  helper EmailsHelper
+  helper MembersHelper
+  helper GitlabRoutingHelper
 
   def test_email(recipient_email, subject, body)
     mail(to: recipient_email,
@@ -107,15 +106,11 @@ class Notify < BaseMailer
 
   def mail_thread(model, headers = {})
     add_project_headers
+    add_unsubscription_headers_and_links
+
     headers["X-GitLab-#{model.class.name}-ID"] = model.id
     headers['X-GitLab-Reply-Key'] = reply_key
 
-    if !@labels_url && @sent_notification && @sent_notification.unsubscribable?
-      headers['List-Unsubscribe'] = "<#{unsubscribe_sent_notification_url(@sent_notification, force: true)}>"
-
-      @sent_notification_url = unsubscribe_sent_notification_url(@sent_notification)
-    end
-
     if Gitlab::IncomingEmail.enabled?
       address = Mail::Address.new(Gitlab::IncomingEmail.reply_address(reply_key))
       address.display_name = @project.name_with_namespace
@@ -155,7 +150,7 @@ class Notify < BaseMailer
     headers['In-Reply-To'] = message_id(model)
     headers['References'] = message_id(model)
 
-    headers[:subject].prepend('Re: ') if headers[:subject]
+    headers[:subject]&.prepend('Re: ')
 
     mail_thread(model, headers)
   end
@@ -171,4 +166,16 @@ class Notify < BaseMailer
     headers['X-GitLab-Project-Id'] = @project.id
     headers['X-GitLab-Project-Path'] = @project.path_with_namespace
   end
+
+  def add_unsubscription_headers_and_links
+    return unless !@labels_url && @sent_notification && @sent_notification.unsubscribable?
+
+    list_unsubscribe_methods = [unsubscribe_sent_notification_url(@sent_notification, force: true)]
+    if Gitlab::IncomingEmail.enabled? && Gitlab::IncomingEmail.supports_wildcard?
+      list_unsubscribe_methods << "mailto:#{Gitlab::IncomingEmail.unsubscribe_address(reply_key)}"
+    end
+
+    headers['List-Unsubscribe'] = list_unsubscribe_methods.map { |e| "<#{e}>" }.join(',')
+    @sent_notification_url = unsubscribe_sent_notification_url(@sent_notification)
+  end
 end
diff --git a/app/mailers/repository_check_mailer.rb b/app/mailers/repository_check_mailer.rb
index 21db2fe04a0..22a9f5da646 100644
--- a/app/mailers/repository_check_mailer.rb
+++ b/app/mailers/repository_check_mailer.rb
@@ -1,10 +1,11 @@
 class RepositoryCheckMailer < BaseMailer
   def notify(failed_count)
-    if failed_count == 1
-      @message = "One project failed its last repository check"
-    else
-      @message = "#{failed_count} projects failed their last repository check"
-    end
+    @message =
+      if failed_count == 1
+        "One project failed its last repository check"
+      else
+        "#{failed_count} projects failed their last repository check"
+      end
 
     mail(
       to: User.admins.pluck(:email),
diff --git a/app/models/ability.rb b/app/models/ability.rb
index fa8f8bc3a5f..f3692a5a067 100644
--- a/app/models/ability.rb
+++ b/app/models/ability.rb
@@ -22,6 +22,17 @@ class Ability
       end
     end
 
+    # Given a list of users and a snippet this method returns the users that can
+    # read the given snippet.
+    def users_that_can_read_personal_snippet(users, snippet)
+      case snippet.visibility_level
+      when Snippet::INTERNAL, Snippet::PUBLIC
+        users
+      when Snippet::PRIVATE
+        users.include?(snippet.author) ? [snippet.author] : []
+      end
+    end
+
     # Returns an Array of Issues that can be read by the given user.
     #
     # issues - The issues to reduce down to those readable by the user.
@@ -45,15 +56,16 @@ class Ability
       end
     end
 
-    def allowed?(user, action, subject)
+    def allowed?(user, action, subject = :global)
       allowed(user, subject).include?(action)
     end
 
-    def allowed(user, subject)
+    def allowed(user, subject = :global)
+      return BasePolicy::RuleSet.none if subject.nil?
       return uncached_allowed(user, subject) unless RequestStore.active?
 
       user_key = user ? user.id : 'anonymous'
-      subject_key = subject ? "#{subject.class.name}/#{subject.id}" : 'global'
+      subject_key = subject == :global ? 'global' : "#{subject.class.name}/#{subject.id}"
       key = "/ability/#{user_key}/#{subject_key}"
       RequestStore[key] ||= uncached_allowed(user, subject).freeze
     end
diff --git a/app/models/appearance.rb b/app/models/appearance.rb
index e4106e1c2e9..c79326e8427 100644
--- a/app/models/appearance.rb
+++ b/app/models/appearance.rb
@@ -10,4 +10,5 @@ class Appearance < ActiveRecord::Base
 
   mount_uploader :logo,         AttachmentUploader
   mount_uploader :header_logo,  AttachmentUploader
+  has_many :uploads, as: :model, dependent: :destroy
 end
diff --git a/app/models/application_setting.rb b/app/models/application_setting.rb
index 6e7a90e7d9c..671a0fe98cc 100644
--- a/app/models/application_setting.rb
+++ b/app/models/application_setting.rb
@@ -5,7 +5,7 @@ class ApplicationSetting < ActiveRecord::Base
   add_authentication_token_field :runners_registration_token
   add_authentication_token_field :health_check_access_token
 
-  CACHE_KEY = 'application_setting.last'
+  CACHE_KEY = 'application_setting.last'.freeze
   DOMAIN_LIST_SEPARATOR = %r{\s*[,;]\s*     # comma or semicolon, optionally surrounded by whitespace
                             |               # or
                             \s              # any whitespace character
@@ -19,6 +19,7 @@ class ApplicationSetting < ActiveRecord::Base
   serialize :domain_whitelist, Array
   serialize :domain_blacklist, Array
   serialize :repository_storages
+  serialize :sidekiq_throttling_queues, Array
 
   cache_markdown_field :sign_in_text
   cache_markdown_field :help_page_text
@@ -63,14 +64,34 @@ class ApplicationSetting < ActiveRecord::Base
             presence: true,
             if: :akismet_enabled
 
+  validates :unique_ips_limit_per_user,
+            numericality: { greater_than_or_equal_to: 1 },
+            presence: true,
+            if: :unique_ips_limit_enabled
+
+  validates :unique_ips_limit_time_window,
+            numericality: { greater_than_or_equal_to: 0 },
+            presence: true,
+            if: :unique_ips_limit_enabled
+
   validates :koding_url,
             presence: true,
             if: :koding_enabled
 
+  validates :plantuml_url,
+            presence: true,
+            if: :plantuml_enabled
+
   validates :max_attachment_size,
             presence: true,
             numericality: { only_integer: true, greater_than: 0 }
 
+  validates :max_artifacts_size,
+            presence: true,
+            numericality: { only_integer: true, greater_than: 0 }
+
+  validates :default_artifacts_expire_in, presence: true, duration: true
+
   validates :container_registry_token_expire_delay,
             presence: true,
             numericality: { only_integer: true, greater_than: 0 }
@@ -85,32 +106,51 @@ class ApplicationSetting < ActiveRecord::Base
             presence: { message: 'Domain blacklist cannot be empty if Blacklist is enabled.' },
             if: :domain_blacklist_enabled?
 
+  validates :sidekiq_throttling_factor,
+            numericality: { greater_than: 0, less_than: 1 },
+            presence: { message: 'Throttling factor cannot be empty if Sidekiq Throttling is enabled.' },
+            if: :sidekiq_throttling_enabled?
+
+  validates :sidekiq_throttling_queues,
+            presence: { message: 'Queues to throttle cannot be empty if Sidekiq Throttling is enabled.' },
+            if: :sidekiq_throttling_enabled?
+
+  validates :housekeeping_incremental_repack_period,
+            presence: true,
+            numericality: { only_integer: true, greater_than: 0 }
+
+  validates :housekeeping_full_repack_period,
+            presence: true,
+            numericality: { only_integer: true, greater_than: :housekeeping_incremental_repack_period }
+
+  validates :housekeeping_gc_period,
+            presence: true,
+            numericality: { only_integer: true, greater_than: :housekeeping_full_repack_period }
+
+  validates :terminal_max_session_time,
+            presence: true,
+            numericality: { only_integer: true, greater_than_or_equal_to: 0 }
+
   validates_each :restricted_visibility_levels do |record, attr, value|
-    unless value.nil?
-      value.each do |level|
-        unless Gitlab::VisibilityLevel.options.has_value?(level)
-          record.errors.add(attr, "'#{level}' is not a valid visibility level")
-        end
+    value&.each do |level|
+      unless Gitlab::VisibilityLevel.options.has_value?(level)
+        record.errors.add(attr, "'#{level}' is not a valid visibility level")
       end
     end
   end
 
   validates_each :import_sources do |record, attr, value|
-    unless value.nil?
-      value.each do |source|
-        unless Gitlab::ImportSources.options.has_value?(source)
-          record.errors.add(attr, "'#{source}' is not a import source")
-        end
+    value&.each do |source|
+      unless Gitlab::ImportSources.options.has_value?(source)
+        record.errors.add(attr, "'#{source}' is not a import source")
       end
     end
   end
 
   validates_each :disabled_oauth_sign_in_sources do |record, attr, value|
-    unless value.nil?
-      value.each do |source|
-        unless Devise.omniauth_providers.include?(source.to_sym)
-          record.errors.add(attr, "'#{source}' is not an OAuth sign-in source")
-        end
+    value&.each do |source|
+      unless Devise.omniauth_providers.include?(source.to_sym)
+        record.errors.add(attr, "'#{source}' is not an OAuth sign-in source")
       end
     end
   end
@@ -123,6 +163,8 @@ class ApplicationSetting < ActiveRecord::Base
   end
 
   def self.current
+    ensure_cache_setup
+
     Rails.cache.fetch(CACHE_KEY) do
       ApplicationSetting.last
     end
@@ -130,57 +172,101 @@ class ApplicationSetting < ActiveRecord::Base
 
   def self.expire
     Rails.cache.delete(CACHE_KEY)
+  rescue
+    # Gracefully handle when Redis is not available. For example,
+    # omnibus may fail here during gitlab:assets:compile.
   end
 
   def self.cached
+    ensure_cache_setup
     Rails.cache.fetch(CACHE_KEY)
   end
 
-  def self.create_from_defaults
-    create(
-      default_projects_limit: Settings.gitlab['default_projects_limit'],
-      default_branch_protection: Settings.gitlab['default_branch_protection'],
-      signup_enabled: Settings.gitlab['signup_enabled'],
-      signin_enabled: Settings.gitlab['signin_enabled'],
-      gravatar_enabled: Settings.gravatar['enabled'],
-      sign_in_text: nil,
+  def self.ensure_cache_setup
+    # This is a workaround for a Rails bug that causes attribute methods not
+    # to be loaded when read from cache: https://github.com/rails/rails/issues/27348
+    ApplicationSetting.define_attribute_methods
+  end
+
+  def self.defaults_ce
+    {
       after_sign_up_text: nil,
-      help_page_text: nil,
-      shared_runners_text: nil,
-      restricted_visibility_levels: Settings.gitlab['restricted_visibility_levels'],
-      max_attachment_size: Settings.gitlab['max_attachment_size'],
-      session_expire_delay: Settings.gitlab['session_expire_delay'],
+      akismet_enabled: false,
+      container_registry_token_expire_delay: 5,
+      default_artifacts_expire_in: '30 days',
+      default_branch_protection: Settings.gitlab['default_branch_protection'],
       default_project_visibility: Settings.gitlab.default_projects_features['visibility_level'],
+      default_projects_limit: Settings.gitlab['default_projects_limit'],
       default_snippet_visibility: Settings.gitlab.default_projects_features['visibility_level'],
+      default_group_visibility: Settings.gitlab.default_projects_features['visibility_level'],
+      disabled_oauth_sign_in_sources: [],
       domain_whitelist: Settings.gitlab['domain_whitelist'],
+      gravatar_enabled: Settings.gravatar['enabled'],
+      help_page_text: nil,
+      unique_ips_limit_per_user: 10,
+      unique_ips_limit_time_window: 3600,
+      unique_ips_limit_enabled: false,
+      housekeeping_bitmaps_enabled: true,
+      housekeeping_enabled: true,
+      housekeeping_full_repack_period: 50,
+      housekeeping_gc_period: 200,
+      housekeeping_incremental_repack_period: 10,
       import_sources: Gitlab::ImportSources.values,
-      shared_runners_enabled: Settings.gitlab_ci['shared_runners_enabled'],
-      max_artifacts_size: Settings.artifacts['max_size'],
-      require_two_factor_authentication: false,
-      two_factor_grace_period: 48,
-      recaptcha_enabled: false,
-      akismet_enabled: false,
       koding_enabled: false,
       koding_url: nil,
+      max_artifacts_size: Settings.artifacts['max_size'],
+      max_attachment_size: Settings.gitlab['max_attachment_size'],
+      plantuml_enabled: false,
+      plantuml_url: nil,
+      recaptcha_enabled: false,
       repository_checks_enabled: true,
-      disabled_oauth_sign_in_sources: [],
-      send_user_confirmation_email: false,
-      container_registry_token_expire_delay: 5,
       repository_storages: ['default'],
-      user_default_external: false,
-    )
+      require_two_factor_authentication: false,
+      restricted_visibility_levels: Settings.gitlab['restricted_visibility_levels'],
+      session_expire_delay: Settings.gitlab['session_expire_delay'],
+      send_user_confirmation_email: false,
+      shared_runners_enabled: Settings.gitlab_ci['shared_runners_enabled'],
+      shared_runners_text: nil,
+      sidekiq_throttling_enabled: false,
+      sign_in_text: nil,
+      signin_enabled: Settings.gitlab['signin_enabled'],
+      signup_enabled: Settings.gitlab['signup_enabled'],
+      terminal_max_session_time: 0,
+      two_factor_grace_period: 48,
+      user_default_external: false
+    }
+  end
+
+  def self.defaults
+    defaults_ce
+  end
+
+  def self.create_from_defaults
+    create(defaults)
+  end
+
+  def self.human_attribute_name(attr, _options = {})
+    if attr == :default_artifacts_expire_in
+      'Default artifacts expiration'
+    else
+      super
+    end
   end
 
   def home_page_url_column_exist
     ActiveRecord::Base.connection.column_exists?(:application_settings, :home_page_url)
   end
 
+  def sidekiq_throttling_column_exists?
+    ActiveRecord::Base.connection.column_exists?(:application_settings, :sidekiq_throttling_enabled)
+  end
+
   def domain_whitelist_raw
-    self.domain_whitelist.join("\n") unless self.domain_whitelist.nil?
+    self.domain_whitelist&.join("\n")
   end
 
   def domain_blacklist_raw
-    self.domain_blacklist.join("\n") unless self.domain_blacklist.nil?
+    self.domain_blacklist&.join("\n")
   end
 
   def domain_whitelist_raw=(values)
@@ -202,11 +288,7 @@ class ApplicationSetting < ActiveRecord::Base
   end
 
   def repository_storages
-    value = read_attribute(:repository_storages)
-    value = [value] if value.is_a?(String)
-    value = [] if value.nil?
-
-    value
+    Array(read_attribute(:repository_storages))
   end
 
   # repository_storage is still required in the API. Remove in 9.0
@@ -218,6 +300,22 @@ class ApplicationSetting < ActiveRecord::Base
     self.repository_storages = [value]
   end
 
+  def default_project_visibility=(level)
+    super(Gitlab::VisibilityLevel.level_value(level))
+  end
+
+  def default_snippet_visibility=(level)
+    super(Gitlab::VisibilityLevel.level_value(level))
+  end
+
+  def default_group_visibility=(level)
+    super(Gitlab::VisibilityLevel.level_value(level))
+  end
+
+  def restricted_visibility_levels=(levels)
+    super(levels.map { |level| Gitlab::VisibilityLevel.level_value(level) })
+  end
+
   # Choose one of the available repository storage options. Currently all have
   # equal weighting.
   def pick_repository_storage
@@ -232,6 +330,12 @@ class ApplicationSetting < ActiveRecord::Base
     ensure_health_check_access_token!
   end
 
+  def sidekiq_throttling_enabled?
+    return false unless sidekiq_throttling_column_exists?
+
+    sidekiq_throttling_enabled
+  end
+
   private
 
   def check_repository_storages
diff --git a/app/models/award_emoji.rb b/app/models/award_emoji.rb
index 46b17479d6d..6937ad3bdd9 100644
--- a/app/models/award_emoji.rb
+++ b/app/models/award_emoji.rb
@@ -16,6 +16,14 @@ class AwardEmoji < ActiveRecord::Base
   scope :downvotes, -> { where(name: DOWNVOTE_NAME) }
   scope :upvotes,   -> { where(name: UPVOTE_NAME) }
 
+  class << self
+    def votes_for_collection(ids, type)
+      select('name', 'awardable_id', 'COUNT(*) as count').
+        where('name IN (?) AND awardable_type = ? AND awardable_id IN (?)', [DOWNVOTE_NAME, UPVOTE_NAME], type, ids).
+        group('name', 'awardable_id')
+    end
+  end
+
   def downvote?
     self.name == DOWNVOTE_NAME
   end
diff --git a/app/models/blob.rb b/app/models/blob.rb
index ab92e820335..95d2111a992 100644
--- a/app/models/blob.rb
+++ b/app/models/blob.rb
@@ -46,6 +46,10 @@ class Blob < SimpleDelegator
     text? && language && language.name == 'SVG'
   end
 
+  def ipython_notebook?
+    text? && language&.name == 'Jupyter Notebook'
+  end
+
   def size_within_svg_limits?
     size <= MAXIMUM_SVG_SIZE
   end
@@ -54,11 +58,17 @@ class Blob < SimpleDelegator
     UploaderHelper::VIDEO_EXT.include?(extname.downcase.delete('.'))
   end
 
-  def to_partial_path
+  def to_partial_path(project)
     if lfs_pointer?
-      'download'
+      if project.lfs_enabled?
+        'download'
+      else
+        'text'
+      end
     elsif image? || svg?
       'image'
+    elsif ipython_notebook?
+      'notebook'
     elsif text?
       'text'
     else
diff --git a/app/models/board.rb b/app/models/board.rb
index c56422914a9..cf8317891b5 100644
--- a/app/models/board.rb
+++ b/app/models/board.rb
@@ -5,11 +5,7 @@ class Board < ActiveRecord::Base
 
   validates :project, presence: true
 
-  def backlog_list
-    lists.merge(List.backlog).take
-  end
-
-  def done_list
-    lists.merge(List.done).take
+  def closed_list
+    lists.merge(List.closed).take
   end
 end
diff --git a/app/models/chat_name.rb b/app/models/chat_name.rb
new file mode 100644
index 00000000000..f321db75eeb
--- /dev/null
+++ b/app/models/chat_name.rb
@@ -0,0 +1,12 @@
+class ChatName < ActiveRecord::Base
+  belongs_to :service
+  belongs_to :user
+
+  validates :user, presence: true
+  validates :service, presence: true
+  validates :team_id, presence: true
+  validates :chat_id, presence: true
+
+  validates :user_id, uniqueness: { scope: [:service_id] }
+  validates :chat_id, uniqueness: { scope: [:service_id, :team_id] }
+end
diff --git a/app/models/chat_team.rb b/app/models/chat_team.rb
new file mode 100644
index 00000000000..c52b6f15913
--- /dev/null
+++ b/app/models/chat_team.rb
@@ -0,0 +1,6 @@
+class ChatTeam < ActiveRecord::Base
+  validates :team_id, presence: true
+  validates :namespace, uniqueness: true
+
+  belongs_to :namespace
+end
diff --git a/app/models/ci/build.rb b/app/models/ci/build.rb
index bf5f92f8462..ad0be70c32a 100644
--- a/app/models/ci/build.rb
+++ b/app/models/ci/build.rb
@@ -2,16 +2,30 @@ module Ci
   class Build < CommitStatus
     include TokenAuthenticatable
     include AfterCommitQueue
+    include Presentable
 
     belongs_to :runner
     belongs_to :trigger_request
     belongs_to :erased_by, class_name: 'User'
 
+    has_many :deployments, as: :deployable
+    has_one :last_deployment, -> { order('deployments.id DESC') }, as: :deployable, class_name: 'Deployment'
+
+    # The "environment" field for builds is a String, and is the unexpanded name
+    def persisted_environment
+      @persisted_environment ||= Environment.find_by(
+        name: expanded_environment_name,
+        project: project
+      )
+    end
+
     serialize :options
-    serialize :yaml_variables
+    serialize :yaml_variables, Gitlab::Serializer::Ci::Variables
+
+    delegate :name, to: :project, prefix: true
 
     validates :coverage, numericality: true, allow_blank: true
-    validates_presence_of :ref
+    validates :ref, presence: true
 
     scope :unstarted, ->() { where(runner_id: nil) }
     scope :ignore_failures, ->() { where(allow_failure: false) }
@@ -30,51 +44,35 @@ module Ci
 
     before_save :update_artifacts_size, if: :artifacts_file_changed?
     before_save :ensure_token
-    before_destroy { project }
+    before_destroy { unscoped_project }
 
     after_create :execute_hooks
+    after_save :update_project_statistics, if: :artifacts_size_changed?
+    after_destroy :update_project_statistics
 
     class << self
       def first_pending
         pending.unstarted.order('created_at ASC').first
       end
 
-      def create_from(build)
-        new_build = build.dup
-        new_build.status = 'pending'
-        new_build.runner_id = nil
-        new_build.trigger_request_id = nil
-        new_build.token = nil
-        new_build.save
-      end
-
-      def retry(build, user = nil)
-        new_build = Ci::Build.create(
-          ref: build.ref,
-          tag: build.tag,
-          options: build.options,
-          commands: build.commands,
-          tag_list: build.tag_list,
-          project: build.project,
-          pipeline: build.pipeline,
-          name: build.name,
-          allow_failure: build.allow_failure,
-          stage: build.stage,
-          stage_idx: build.stage_idx,
-          trigger_request: build.trigger_request,
-          yaml_variables: build.yaml_variables,
-          when: build.when,
-          user: user,
-          environment: build.environment,
-          status_event: 'enqueue'
-        )
-        MergeRequests::AddTodoWhenBuildFailsService.new(build.project, nil).close(new_build)
-        build.pipeline.mark_as_processable_after_stage(build.stage_idx)
-        new_build
+      def retry(build, current_user)
+        Ci::RetryBuildService
+          .new(build.project, current_user)
+          .execute(build)
       end
     end
 
     state_machine :status do
+      event :actionize do
+        transition created: :manual
+      end
+
+      after_transition any => [:pending] do |build|
+        build.run_after_commit do
+          BuildQueueWorker.perform_async(id)
+        end
+      end
+
       after_transition pending: :running do |build|
         build.run_after_commit do
           BuildHooksWorker.perform_async(id)
@@ -94,8 +92,10 @@ module Ci
       end
     end
 
-    def manual?
-      self.when == 'manual'
+    def detailed_status(current_user)
+      Gitlab::Ci::Status::Build::Factory
+        .new(self, current_user)
+        .fabricate!
     end
 
     def other_actions
@@ -103,10 +103,19 @@ module Ci
     end
 
     def playable?
-      project.builds_enabled? && commands.present? && manual? && skipped?
+      project.builds_enabled? && has_commands? &&
+        action? && manual?
+    end
+
+    def action?
+      self.when == 'manual'
     end
 
-    def play(current_user = nil)
+    def has_commands?
+      commands.present?
+    end
+
+    def play(current_user)
       # Try to queue a current build
       if self.enqueue
         self.update(user: current_user)
@@ -117,14 +126,43 @@ module Ci
       end
     end
 
+    def cancelable?
+      active?
+    end
+
     def retryable?
-      project.builds_enabled? && commands.present? && complete?
+      project.builds_enabled? && has_commands? &&
+        (success? || failed? || canceled?)
     end
 
     def retried?
       !self.pipeline.statuses.latest.include?(self)
     end
 
+    def expanded_environment_name
+      ExpandVariables.expand(environment, simple_variables) if environment
+    end
+
+    def has_environment?
+      environment.present?
+    end
+
+    def starts_environment?
+      has_environment? && self.environment_action == 'start'
+    end
+
+    def stops_environment?
+      has_environment? && self.environment_action == 'stop'
+    end
+
+    def environment_action
+      self.options.fetch(:environment, {}).fetch(:action, 'start') if self.options
+    end
+
+    def outdated_deployment?
+      success? && !last_deployment.try(:last?)
+    end
+
     def depends_on_builds
       # Get builds of the same type
       latest_builds = self.pipeline.builds.latest
@@ -150,12 +188,25 @@ module Ci
       project.build_timeout
     end
 
-    def variables
+    # A slugified version of the build ref, suitable for inclusion in URLs and
+    # domain names. Rules:
+    #
+    #   * Lowercased
+    #   * Anything not matching [a-z0-9-] is replaced with a -
+    #   * Maximum length is 63 bytes
+    def ref_slug
+      slugified = ref.to_s.downcase
+      slugified.gsub(/[^a-z0-9]/, '-')[0..62]
+    end
+
+    # Variables whose value does not depend on other variables
+    def simple_variables
       variables = predefined_variables
       variables += project.predefined_variables
       variables += pipeline.predefined_variables
       variables += runner.predefined_variables if runner
       variables += project.container_registry_variables
+      variables += project.deployment_variables if has_environment?
       variables += yaml_variables
       variables += user_variables
       variables += project.secret_variables
@@ -163,24 +214,24 @@ module Ci
       variables
     end
 
+    # All variables, including those dependent on other variables
+    def variables
+      variables = simple_variables
+      variables += persisted_environment.predefined_variables if persisted_environment.present?
+      variables
+    end
+
     def merge_request
       merge_requests = MergeRequest.includes(:merge_request_diff)
-                                   .where(source_branch: ref, source_project_id: pipeline.gl_project_id)
+                                   .where(source_branch: ref,
+                                          source_project: pipeline.project)
                                    .reorder(iid: :asc)
 
       merge_requests.find do |merge_request|
-        merge_request.commits.any? { |ci| ci.id == pipeline.sha }
+        merge_request.commits_sha.include?(pipeline.sha)
       end
     end
 
-    def project_id
-      pipeline.project_id
-    end
-
-    def project_name
-      project.name
-    end
-
     def repo_url
       auth = "gitlab-ci-token:#{ensure_token!}@"
       project.http_url_to_repo.sub(/^https?:\/\//) do |prefix|
@@ -193,29 +244,23 @@ module Ci
     end
 
     def update_coverage
-      return unless project
-      coverage_regex = project.build_coverage_regex
-      return unless coverage_regex
       coverage = extract_coverage(trace, coverage_regex)
-
-      if coverage.is_a? Numeric
-        update_attributes(coverage: coverage)
-      end
+      update_attributes(coverage: coverage) if coverage.present?
     end
 
     def extract_coverage(text, regex)
-      begin
-        matches = text.scan(Regexp.new(regex)).last
-        matches = matches.last if matches.kind_of?(Array)
-        coverage = matches.gsub(/\d+(\.\d+)?/).first
+      return unless regex
 
-        if coverage.present?
-          coverage.to_f
-        end
-      rescue
-        # if bad regex or something goes wrong we dont want to interrupt transition
-        # so we just silentrly ignore error for now
+      matches = text.scan(Regexp.new(regex)).last
+      matches = matches.last if matches.is_a?(Array)
+      coverage = matches.gsub(/\d+(\.\d+)?/).first
+
+      if coverage.present?
+        coverage.to_f
       end
+    rescue
+      # if bad regex or something goes wrong we dont want to interrupt transition
+      # so we just silentrly ignore error for now
     end
 
     def has_trace_file?
@@ -271,6 +316,7 @@ module Ci
 
     def append_trace(trace_part, offset)
       recreate_trace_dir
+      touch if needs_touch?
 
       trace_part = hide_secrets(trace_part)
 
@@ -280,6 +326,10 @@ module Ci
       end
     end
 
+    def needs_touch?
+      Time.now - updated_at > 15.minutes.to_i
+    end
+
     def trace_file_path
       if has_old_trace_file?
         old_path_to_trace
@@ -335,16 +385,23 @@ module Ci
     # This method returns old path to artifacts only if it already exists.
     #
     def artifacts_path
+      # We need the project even if it's soft deleted, because whenever
+      # we're really deleting the project, we'll also delete the builds,
+      # and in order to delete the builds, we need to know where to find
+      # the artifacts, which is depending on the data of the project.
+      # We need to retain the project in this case.
+      the_project = project || unscoped_project
+
       old = File.join(created_at.utc.strftime('%Y_%m'),
-                      project.ci_id.to_s,
+                      the_project.ci_id.to_s,
                       id.to_s)
 
       old_store = File.join(ArtifactUploader.artifacts_path, old)
-      return old if project.ci_id && File.directory?(old_store)
+      return old if the_project.ci_id && File.directory?(old_store)
 
       File.join(
         created_at.utc.strftime('%Y_%m'),
-        project.id.to_s,
+        the_project.id.to_s,
         id.to_s
       )
     end
@@ -370,6 +427,7 @@ module Ci
       build_data = Gitlab::DataBuilder::Build.build(self)
       project.execute_hooks(build_data.dup, :build_hooks)
       project.execute_services(build_data.dup, :build_hooks)
+      PagesService.new(build_data).execute
       project.running_or_pending_build_count(force: true)
     end
 
@@ -423,14 +481,22 @@ module Ci
     def artifacts_expire_in=(value)
       self.artifacts_expire_at =
         if value
-          Time.now + ChronicDuration.parse(value)
+          ChronicDuration.parse(value)&.seconds&.from_now
         end
     end
 
+    def has_expiring_artifacts?
+      artifacts_expire_at.present?
+    end
+
     def keep_artifacts!
       self.update(artifacts_expire_at: nil)
     end
 
+    def coverage_regex
+      super || project.try(:build_coverage_regex)
+    end
+
     def when
       read_attribute(:when) || build_attributes_from_config[:when] || 'on_success'
     end
@@ -448,6 +514,41 @@ module Ci
       ]
     end
 
+    def steps
+      [Gitlab::Ci::Build::Step.from_commands(self),
+       Gitlab::Ci::Build::Step.from_after_script(self)].compact
+    end
+
+    def image
+      Gitlab::Ci::Build::Image.from_image(self)
+    end
+
+    def services
+      Gitlab::Ci::Build::Image.from_services(self)
+    end
+
+    def artifacts
+      [options[:artifacts]]
+    end
+
+    def cache
+      [options[:cache]]
+    end
+
+    def credentials
+      Gitlab::Ci::Build::Credentials::Factory.new(self).create!
+    end
+
+    def dependencies
+      depended_jobs = depends_on_builds
+
+      return depended_jobs unless options[:dependencies].present?
+
+      depended_jobs.select do |job|
+        options[:dependencies].include?(job.name)
+      end
+    end
+
     private
 
     def update_artifacts_size
@@ -466,24 +567,52 @@ module Ci
       self.update(erased_by: user, erased_at: Time.now, artifacts_expire_at: nil)
     end
 
+    def unscoped_project
+      @unscoped_project ||= Project.unscoped.find_by(id: project_id)
+    end
+
+    CI_REGISTRY_USER = 'gitlab-ci-token'.freeze
+
     def predefined_variables
       variables = [
         { key: 'CI', value: 'true', public: true },
         { key: 'GITLAB_CI', value: 'true', public: true },
+        { key: 'CI_SERVER_NAME', value: 'GitLab', public: true },
+        { key: 'CI_SERVER_VERSION', value: Gitlab::VERSION, public: true },
+        { key: 'CI_SERVER_REVISION', value: Gitlab::REVISION, public: true },
+        { key: 'CI_JOB_ID', value: id.to_s, public: true },
+        { key: 'CI_JOB_NAME', value: name, public: true },
+        { key: 'CI_JOB_STAGE', value: stage, public: true },
+        { key: 'CI_JOB_TOKEN', value: token, public: false },
+        { key: 'CI_COMMIT_SHA', value: sha, public: true },
+        { key: 'CI_COMMIT_REF_NAME', value: ref, public: true },
+        { key: 'CI_COMMIT_REF_SLUG', value: ref_slug, public: true },
+        { key: 'CI_REGISTRY_USER', value: CI_REGISTRY_USER, public: true },
+        { key: 'CI_REGISTRY_PASSWORD', value: token, public: false },
+        { key: 'CI_REPOSITORY_URL', value: repo_url, public: false }
+      ]
+
+      variables << { key: "CI_COMMIT_TAG", value: ref, public: true } if tag?
+      variables << { key: "CI_PIPELINE_TRIGGERED", value: 'true', public: true } if trigger_request
+      variables << { key: "CI_JOB_MANUAL", value: 'true', public: true } if action?
+      variables.concat(legacy_variables)
+    end
+
+    def legacy_variables
+      variables = [
         { key: 'CI_BUILD_ID', value: id.to_s, public: true },
         { key: 'CI_BUILD_TOKEN', value: token, public: false },
         { key: 'CI_BUILD_REF', value: sha, public: true },
         { key: 'CI_BUILD_BEFORE_SHA', value: before_sha, public: true },
         { key: 'CI_BUILD_REF_NAME', value: ref, public: true },
+        { key: 'CI_BUILD_REF_SLUG', value: ref_slug, public: true },
         { key: 'CI_BUILD_NAME', value: name, public: true },
-        { key: 'CI_BUILD_STAGE', value: stage, public: true },
-        { key: 'CI_SERVER_NAME', value: 'GitLab', public: true },
-        { key: 'CI_SERVER_VERSION', value: Gitlab::VERSION, public: true },
-        { key: 'CI_SERVER_REVISION', value: Gitlab::REVISION, public: true }
+        { key: 'CI_BUILD_STAGE', value: stage, public: true }
       ]
-      variables << { key: 'CI_BUILD_TAG', value: ref, public: true } if tag?
-      variables << { key: 'CI_BUILD_TRIGGERED', value: 'true', public: true } if trigger_request
-      variables << { key: 'CI_BUILD_MANUAL', value: 'true', public: true } if manual?
+
+      variables << { key: "CI_BUILD_TAG", value: ref, public: true } if tag?
+      variables << { key: "CI_BUILD_TRIGGERED", value: 'true', public: true } if trigger_request
+      variables << { key: "CI_BUILD_MANUAL", value: 'true', public: true } if action?
       variables
     end
 
@@ -501,5 +630,11 @@ module Ci
       Ci::MaskSecret.mask!(trace, token)
       trace
     end
+
+    def update_project_statistics
+      return unless project
+
+      ProjectCacheWorker.perform_async(project_id, [], [:build_artifacts_size])
+    end
   end
 end
diff --git a/app/models/ci/pipeline.rb b/app/models/ci/pipeline.rb
index d3432632899..ad7e0b23ff4 100644
--- a/app/models/ci/pipeline.rb
+++ b/app/models/ci/pipeline.rb
@@ -5,23 +5,22 @@ module Ci
     include Importable
     include AfterCommitQueue
 
-    self.table_name = 'ci_commits'
-
-    belongs_to :project, foreign_key: :gl_project_id
+    belongs_to :project
     belongs_to :user
 
     has_many :statuses, class_name: 'CommitStatus', foreign_key: :commit_id
     has_many :builds, foreign_key: :commit_id
     has_many :trigger_requests, dependent: :destroy, foreign_key: :commit_id
 
-    validates_presence_of :sha, unless: :importing?
-    validates_presence_of :ref, unless: :importing?
-    validates_presence_of :status, unless: :importing?
+    delegate :id, to: :project, prefix: true
+
+    validates :sha, presence: { unless: :importing? }
+    validates :ref, presence: { unless: :importing? }
+    validates :status, presence: { unless: :importing? }
     validate :valid_commit_sha, unless: :importing?
 
     after_create :keep_around_commits, unless: :importing?
-
-    delegate :stages, to: :statuses
+    after_create :refresh_build_status_cache
 
     state_machine :status, initial: :created do
       event :enqueue do
@@ -49,6 +48,10 @@ module Ci
         transition any - [:canceled] => :canceled
       end
 
+      event :block do
+        transition any - [:manual] => :manual
+      end
+
       # IMPORTANT
       # Do not add any operations to this state_machine
       # Create a separate worker for each new operation
@@ -81,32 +84,89 @@ module Ci
           PipelineHooksWorker.perform_async(id)
         end
       end
+
+      after_transition any => [:success, :failed] do |pipeline|
+        pipeline.run_after_commit do
+          PipelineNotificationWorker.perform_async(pipeline.id)
+        end
+      end
     end
 
     # ref can't be HEAD or SHA, can only be branch/tag name
+    scope :latest, ->(ref = nil) do
+      max_id = unscope(:select)
+        .select("max(#{quoted_table_name}.id)")
+        .group(:ref, :sha)
+
+      if ref
+        where(ref: ref, id: max_id.where(ref: ref))
+      else
+        where(id: max_id)
+      end
+    end
+
+    def self.latest_status(ref = nil)
+      latest(ref).status
+    end
+
     def self.latest_successful_for(ref)
-      where(ref: ref).order(id: :desc).success.first
+      success.latest(ref).order(id: :desc).first
     end
 
-    def self.truncate_sha(sha)
-      sha[0...8]
+    def self.latest_successful_for_refs(refs)
+      success.latest(refs).order(id: :desc).each_with_object({}) do |pipeline, hash|
+        hash[pipeline.ref] ||= pipeline
+      end
     end
 
-    def self.stages
-      # We use pluck here due to problems with MySQL which doesn't allow LIMIT/OFFSET in queries
-      CommitStatus.where(pipeline: pluck(:id)).stages
+    def self.truncate_sha(sha)
+      sha[0...8]
     end
 
     def self.total_duration
       where.not(duration: nil).sum(:duration)
     end
 
-    def stages_with_latest_statuses
-      statuses.latest.includes(project: :namespace).order(:stage_idx).group_by(&:stage)
+    def stage(name)
+      stage = Ci::Stage.new(self, name: name)
+      stage unless stage.statuses_count.zero?
+    end
+
+    def stages_count
+      statuses.select(:stage).distinct.count
     end
 
-    def project_id
-      project.id
+    def stages_name
+      statuses.order(:stage_idx).distinct.
+        pluck(:stage, :stage_idx).map(&:first)
+    end
+
+    def stages
+      # TODO, this needs refactoring, see gitlab-ce#26481.
+
+      stages_query = statuses
+        .group('stage').select(:stage).order('max(stage_idx)')
+
+      status_sql = statuses.latest.where('stage=sg.stage').status_sql
+
+      warnings_sql = statuses.latest.select('COUNT(*)')
+        .where('stage=sg.stage').failed_but_allowed.to_sql
+
+      stages_with_statuses = CommitStatus.from(stages_query, :sg)
+        .pluck('sg.stage', status_sql, "(#{warnings_sql})")
+
+      stages_with_statuses.map do |stage|
+        Ci::Stage.new(self, Hash[%i[name status warnings].zip(stage)])
+      end
+    end
+
+    def artifacts
+      builds.latest.with_artifacts_not_expired.includes(project: [:namespace])
+    end
+
+    # For now the only user who participates is the user who triggered
+    def participants(_current_user = nil)
+      Array(user)
     end
 
     def valid_commit_sha
@@ -146,31 +206,35 @@ module Ci
     end
 
     def manual_actions
-      builds.latest.manual_actions
+      builds.latest.manual_actions.includes(project: [:namespace])
+    end
+
+    def stuck?
+      builds.pending.includes(:project).any?(&:stuck?)
     end
 
     def retryable?
-      builds.latest.any? do |build|
-        (build.failed? || build.canceled?) && build.retryable?
-      end
+      builds.latest.failed_or_canceled.any?(&:retryable?)
     end
 
     def cancelable?
-      builds.running_or_pending.any?
+      statuses.cancelable.any?
     end
 
     def cancel_running
-      builds.running_or_pending.each(&:cancel)
+      Gitlab::OptimisticLocking.retry_lock(
+        statuses.cancelable) do |cancelable|
+          cancelable.find_each(&:cancel)
+        end
     end
 
-    def retry_failed(user)
-      builds.latest.failed.select(&:retryable?).each do |build|
-        Ci::Build.retry(build, user)
-      end
+    def retry_failed(current_user)
+      Ci::RetryPipelineService.new(project, current_user)
+        .execute(self)
     end
 
     def mark_as_processable_after_stage(stage_idx)
-      builds.skipped.where('stage_idx > ?', stage_idx).find_each(&:process)
+      builds.skipped.after_stage(stage_idx).find_each(&:process)
     end
 
     def latest?
@@ -225,13 +289,11 @@ module Ci
     def ci_yaml_file
       return @ci_yaml_file if defined?(@ci_yaml_file)
 
-      @ci_yaml_file ||= begin
-        blob = project.repository.blob_at(sha, '.gitlab-ci.yml')
-        blob.load_all_data!(project.repository)
-        blob.data
-      rescue
-        nil
-      end
+      @ci_yaml_file = project.repository.gitlab_ci_yml_for(sha) rescue nil
+    end
+
+    def has_yaml_errors?
+      yaml_errors.present?
     end
 
     def environments
@@ -268,8 +330,10 @@ module Ci
         when 'failed' then drop
         when 'canceled' then cancel
         when 'skipped' then skip
+        when 'manual' then block
         end
       end
+      refresh_build_status_cache
     end
 
     def predefined_variables
@@ -302,7 +366,17 @@ module Ci
     def merge_requests
       @merge_requests ||= project.merge_requests
         .where(source_branch: self.ref)
-        .select { |merge_request| merge_request.pipeline.try(:id) == self.id }
+        .select { |merge_request| merge_request.head_pipeline.try(:id) == self.id }
+    end
+
+    def detailed_status(current_user)
+      Gitlab::Ci::Status::Pipeline::Factory
+        .new(self, current_user)
+        .fabricate!
+    end
+
+    def refresh_build_status_cache
+      Ci::PipelineStatus.new(project, sha: sha, status: status).store_in_cache_if_needed
     end
 
     private
diff --git a/app/models/ci/pipeline_status.rb b/app/models/ci/pipeline_status.rb
new file mode 100644
index 00000000000..048047d0e34
--- /dev/null
+++ b/app/models/ci/pipeline_status.rb
@@ -0,0 +1,86 @@
+# This class is not backed by a table in the main database.
+# It loads the latest Pipeline for the HEAD of a repository, and caches that
+# in Redis.
+module Ci
+  class PipelineStatus
+    attr_accessor :sha, :status, :project, :loaded
+
+    delegate :commit, to: :project
+
+    def self.load_for_project(project)
+      new(project).tap do |status|
+        status.load_status
+      end
+    end
+
+    def initialize(project, sha: nil, status: nil)
+      @project = project
+      @sha = sha
+      @status = status
+    end
+
+    def has_status?
+      loaded? && sha.present? && status.present?
+    end
+
+    def load_status
+      return if loaded?
+
+      if has_cache?
+        load_from_cache
+      else
+        load_from_commit
+        store_in_cache
+      end
+
+      self.loaded = true
+    end
+
+    def load_from_commit
+      return unless commit
+
+      self.sha = commit.sha
+      self.status = commit.status
+    end
+
+    # We only cache the status for the HEAD commit of a project
+    # This status is rendered in project lists
+    def store_in_cache_if_needed
+      return unless sha
+      return delete_from_cache unless commit
+      store_in_cache if commit.sha == self.sha
+    end
+
+    def load_from_cache
+      Gitlab::Redis.with do |redis|
+        self.sha, self.status = redis.hmget(cache_key, :sha, :status)
+      end
+    end
+
+    def store_in_cache
+      Gitlab::Redis.with do |redis|
+        redis.mapped_hmset(cache_key, { sha: sha, status: status })
+      end
+    end
+
+    def delete_from_cache
+      Gitlab::Redis.with do |redis|
+        redis.del(cache_key)
+      end
+    end
+
+    def has_cache?
+      Gitlab::Redis.with do |redis|
+        redis.exists(cache_key)
+      end
+    end
+
+    def loaded?
+      self.loaded
+    end
+
+    def cache_key
+      "projects/#{project.id}/build_status"
+    end
+  end
+end
diff --git a/app/models/ci/runner.rb b/app/models/ci/runner.rb
index 123930273e0..487ba61bc9c 100644
--- a/app/models/ci/runner.rb
+++ b/app/models/ci/runner.rb
@@ -2,13 +2,14 @@ module Ci
   class Runner < ActiveRecord::Base
     extend Ci::Model
 
+    RUNNER_QUEUE_EXPIRY_TIME = 60.minutes
     LAST_CONTACT_TIME = 1.hour.ago
-    AVAILABLE_SCOPES = %w[specific shared active paused online]
-    FORM_EDITABLE = %i[description tag_list active run_untagged locked]
+    AVAILABLE_SCOPES = %w[specific shared active paused online].freeze
+    FORM_EDITABLE = %i[description tag_list active run_untagged locked].freeze
 
     has_many :builds
     has_many :runner_projects, dependent: :destroy
-    has_many :projects, through: :runner_projects, foreign_key: :gl_project_id
+    has_many :projects, through: :runner_projects
 
     has_one :last_build, ->() { order('id DESC') }, class_name: 'Ci::Build'
 
@@ -23,7 +24,7 @@ module Ci
 
     scope :owned_or_shared, ->(project_id) do
       joins('LEFT JOIN ci_runner_projects ON ci_runner_projects.runner_id = ci_runners.id')
-        .where("ci_runner_projects.gl_project_id = :project_id OR ci_runners.is_shared = true", project_id: project_id)
+        .where("ci_runner_projects.project_id = :project_id OR ci_runners.is_shared = true", project_id: project_id)
     end
 
     scope :assignable_for, ->(project) do
@@ -37,6 +38,8 @@ module Ci
 
     acts_as_taggable
 
+    after_destroy :cleanup_runner_queue
+
     # Searches for runners matching the given query.
     #
     # This method uses ILIKE on PostgreSQL and LIKE on MySQL.
@@ -122,8 +125,35 @@ module Ci
       ]
     end
 
+    def tick_runner_queue
+      SecureRandom.hex.tap do |new_update|
+        ::Gitlab::Workhorse.set_key_and_notify(runner_queue_key, new_update,
+          expire: RUNNER_QUEUE_EXPIRY_TIME, overwrite: true)
+      end
+    end
+
+    def ensure_runner_queue_value
+      new_value = SecureRandom.hex
+      ::Gitlab::Workhorse.set_key_and_notify(runner_queue_key, new_value,
+        expire: RUNNER_QUEUE_EXPIRY_TIME, overwrite: false)
+    end
+
+    def is_runner_queue_value_latest?(value)
+      ensure_runner_queue_value == value if value.present?
+    end
+
     private
 
+    def cleanup_runner_queue
+      Gitlab::Redis.with do |redis|
+        redis.del(runner_queue_key)
+      end
+    end
+
+    def runner_queue_key
+      "runner:build_queue:#{self.token}"
+    end
+
     def tag_constraints
       unless has_tags? || run_untagged?
         errors.add(:tags_list,
diff --git a/app/models/ci/runner_project.rb b/app/models/ci/runner_project.rb
index 1f9baeca5b1..5f01a0daae9 100644
--- a/app/models/ci/runner_project.rb
+++ b/app/models/ci/runner_project.rb
@@ -1,10 +1,10 @@
 module Ci
   class RunnerProject < ActiveRecord::Base
     extend Ci::Model
-    
+
     belongs_to :runner
-    belongs_to :project, foreign_key: :gl_project_id
+    belongs_to :project
 
-    validates_uniqueness_of :runner_id, scope: :gl_project_id
+    validates :runner_id, uniqueness: { scope: :project_id }
   end
 end
diff --git a/app/models/ci/stage.rb b/app/models/ci/stage.rb
new file mode 100644
index 00000000000..e7d6b17d445
--- /dev/null
+++ b/app/models/ci/stage.rb
@@ -0,0 +1,56 @@
+module Ci
+  # Currently this is artificial object, constructed dynamically
+  # We should migrate this object to actual database record in the future
+  class Stage
+    include StaticModel
+
+    attr_reader :pipeline, :name
+
+    delegate :project, to: :pipeline
+
+    def initialize(pipeline, name:, status: nil, warnings: nil)
+      @pipeline = pipeline
+      @name = name
+      @status = status
+      @warnings = warnings
+    end
+
+    def to_param
+      name
+    end
+
+    def statuses_count
+      @statuses_count ||= statuses.count
+    end
+
+    def status
+      @status ||= statuses.latest.status
+    end
+
+    def detailed_status(current_user)
+      Gitlab::Ci::Status::Stage::Factory
+        .new(self, current_user)
+        .fabricate!
+    end
+
+    def statuses
+      @statuses ||= pipeline.statuses.where(stage: name)
+    end
+
+    def builds
+      @builds ||= pipeline.builds.where(stage: name)
+    end
+
+    def success?
+      status.to_s == 'success'
+    end
+
+    def has_warnings?
+      if @warnings.is_a?(Integer)
+        @warnings > 0
+      else
+        statuses.latest.failed_but_allowed.any?
+      end
+    end
+  end
+end
diff --git a/app/models/ci/trigger.rb b/app/models/ci/trigger.rb
index 62889fe80d8..cba1d81a861 100644
--- a/app/models/ci/trigger.rb
+++ b/app/models/ci/trigger.rb
@@ -4,11 +4,12 @@ module Ci
 
     acts_as_paranoid
 
-    belongs_to :project, foreign_key: :gl_project_id
+    belongs_to :project
+    belongs_to :owner, class_name: "User"
+
     has_many :trigger_requests, dependent: :destroy
 
-    validates_presence_of :token
-    validates_uniqueness_of :token
+    validates :token, presence: true, uniqueness: true
 
     before_validation :set_default_values
 
@@ -25,7 +26,15 @@ module Ci
     end
 
     def short_token
-      token[0...10]
+      token[0...4]
+    end
+
+    def legacy?
+      self.owner_id.blank?
+    end
+
+    def can_access_project?
+      self.owner_id.blank? || Ability.allowed?(self.owner, :create_build, project)
     end
   end
 end
diff --git a/app/models/ci/variable.rb b/app/models/ci/variable.rb
index 94d9e2b3208..6c6586110c5 100644
--- a/app/models/ci/variable.rb
+++ b/app/models/ci/variable.rb
@@ -2,12 +2,12 @@ module Ci
   class Variable < ActiveRecord::Base
     extend Ci::Model
 
-    belongs_to :project, foreign_key: :gl_project_id
+    belongs_to :project
 
-    validates_uniqueness_of :key, scope: :gl_project_id
     validates :key,
       presence: true,
-      length: { within: 0..255 },
+      uniqueness: { scope: :project_id },
+      length: { maximum: 255 },
       format: { with: /\A[a-zA-Z0-9_]+\z/,
                 message: "can contain only letters, digits and '_'." }
 
diff --git a/app/models/commit.rb b/app/models/commit.rb
index 9e7fde9503d..ce92cc369ad 100644
--- a/app/models/commit.rb
+++ b/app/models/commit.rb
@@ -21,10 +21,13 @@ class Commit
   DIFF_HARD_LIMIT_FILES = 1000
   DIFF_HARD_LIMIT_LINES = 50000
 
+  # The SHA can be between 7 and 40 hex characters.
+  COMMIT_SHA_PATTERN = '\h{7,40}'.freeze
+
   class << self
     def decorate(commits, project)
       commits.map do |commit|
-        if commit.kind_of?(Commit)
+        if commit.is_a?(Commit)
           commit
         else
           self.new(commit, project)
@@ -48,6 +51,14 @@ class Commit
         max_lines: DIFF_HARD_LIMIT_LINES,
       }
     end
+
+    def from_hash(hash, project)
+      new(Gitlab::Git::Commit.new(hash), project)
+    end
+
+    def valid_hash?(key)
+      !!(/\A#{COMMIT_SHA_PATTERN}\z/ =~ key)
+    end
   end
 
   attr_accessor :raw
@@ -73,8 +84,6 @@ class Commit
 
   # Pattern used to extract commit references from text
   #
-  # The SHA can be between 7 and 40 hex characters.
-  #
   # This pattern supports cross-project references.
   def self.reference_pattern
     @reference_pattern ||= %r{
@@ -84,27 +93,19 @@ class Commit
   end
 
   def self.link_reference_pattern
-    @link_reference_pattern ||= super("commit", /(?<commit>\h{7,40})/)
+    @link_reference_pattern ||= super("commit", /(?<commit>#{COMMIT_SHA_PATTERN})/)
   end
 
-  def to_reference(from_project = nil)
-    if cross_project_reference?(from_project)
-      project.to_reference + self.class.reference_prefix + self.id
-    else
-      self.id
-    end
+  def to_reference(from_project = nil, full: false)
+    commit_reference(from_project, id, full: full)
   end
 
-  def reference_link_text(from_project = nil)
-    if cross_project_reference?(from_project)
-      project.to_reference + self.class.reference_prefix + self.short_id
-    else
-      self.short_id
-    end
+  def reference_link_text(from_project = nil, full: false)
+    commit_reference(from_project, short_id, full: full)
   end
 
   def diff_line_count
-    @diff_line_count ||= Commit::diff_line_count(raw_diffs)
+    @diff_line_count ||= Commit.diff_line_count(raw_diffs)
     @diff_line_count
   end
 
@@ -121,11 +122,12 @@ class Commit
   def full_title
     return @full_title if @full_title
 
-    if safe_message.blank?
-      @full_title = no_commit_message
-    else
-      @full_title = safe_message.split("\n", 2).first
-    end
+    @full_title =
+      if safe_message.blank?
+        no_commit_message
+      else
+        safe_message.split("\n", 2).first
+      end
   end
 
   # Returns the commits description
@@ -229,16 +231,16 @@ class Commit
     project.pipelines.where(sha: sha)
   end
 
+  def latest_pipeline
+    pipelines.last
+  end
+
   def status(ref = nil)
     @statuses ||= {}
 
-    if @statuses.key?(ref)
-      @statuses[ref]
-    elsif ref
-      @statuses[ref] = pipelines.where(ref: ref).status
-    else
-      @statuses[ref] = pipelines.status
-    end
+    return @statuses[ref] if @statuses.key?(ref)
+
+    @statuses[ref] = pipelines.latest_status(ref)
   end
 
   def revert_branch_name
@@ -249,44 +251,47 @@ class Commit
     project.repository.next_branch("cherry-pick-#{short_id}", mild: true)
   end
 
-  def revert_description
-    if merged_merge_request
-      "This reverts merge request #{merged_merge_request.to_reference}"
+  def revert_description(user)
+    if merged_merge_request?(user)
+      "This reverts merge request #{merged_merge_request(user).to_reference}"
     else
       "This reverts commit #{sha}"
     end
   end
 
-  def revert_message
-    %Q{Revert "#{title.strip}"\n\n#{revert_description}}
+  def revert_message(user)
+    %Q{Revert "#{title.strip}"\n\n#{revert_description(user)}}
   end
 
-  def reverts_commit?(commit)
-    description? && description.include?(commit.revert_description)
+  def reverts_commit?(commit, user)
+    description? && description.include?(commit.revert_description(user))
   end
 
   def merge_commit?
     parents.size > 1
   end
 
-  def merged_merge_request
-    return @merged_merge_request if defined?(@merged_merge_request)
+  def merged_merge_request(current_user)
+    # Memoize with per-user access check
+    @merged_merge_request_hash ||= Hash.new do |hash, user|
+      hash[user] = merged_merge_request_no_cache(user)
+    end
 
-    @merged_merge_request = project.merge_requests.find_by(merge_commit_sha: id) if merge_commit?
+    @merged_merge_request_hash[current_user]
   end
 
-  def has_been_reverted?(current_user = nil, noteable = self)
+  def has_been_reverted?(current_user, noteable = self)
     ext = all_references(current_user)
 
     noteable.notes_with_associations.system.each do |note|
       note.all_references(current_user, extractor: ext)
     end
 
-    ext.commits.any? { |commit_ref| commit_ref.reverts_commit?(self) }
+    ext.commits.any? { |commit_ref| commit_ref.reverts_commit?(self, current_user) }
   end
 
-  def change_type_title
-    merged_merge_request ? 'merge request' : 'commit'
+  def change_type_title(user)
+    merged_merge_request?(user) ? 'merge request' : 'commit'
   end
 
   # Get the URI type of the given path
@@ -316,15 +321,46 @@ class Commit
   end
 
   def raw_diffs(*args)
-    raw.diffs(*args)
+    use_gitaly = Gitlab::GitalyClient.feature_enabled?(:commit_raw_diffs)
+    deltas_only = args.last.is_a?(Hash) && args.last[:deltas_only]
+
+    if use_gitaly && !deltas_only
+      Gitlab::GitalyClient::Commit.diff_from_parent(self, *args)
+    else
+      raw.diffs(*args)
+    end
   end
 
   def diffs(diff_options = nil)
     Gitlab::Diff::FileCollection::Commit.new(self, diff_options: diff_options)
   end
 
+  def persisted?
+    true
+  end
+
+  def touch
+    # no-op but needs to be defined since #persisted? is defined
+  end
+
+  WIP_REGEX = /\A\s*(((?i)(\[WIP\]|WIP:|WIP)\s|WIP$))|(fixup!|squash!)\s/.freeze
+
+  def work_in_progress?
+    !!(title =~ WIP_REGEX)
+  end
+
   private
 
+  def commit_reference(from_project, referable_commit_id, full: false)
+    reference = project.to_reference(from_project, full: full)
+
+    if reference.present?
+      "#{reference}#{self.class.reference_prefix}#{referable_commit_id}"
+    else
+      referable_commit_id
+    end
+  end
+
   def find_author_by_any_email
     User.find_by_any_email(author_email.downcase)
   end
@@ -344,4 +380,12 @@ class Commit
 
     changes
   end
+
+  def merged_merge_request?(user)
+    !!merged_merge_request(user)
+  end
+
+  def merged_merge_request_no_cache(user)
+    MergeRequestsFinder.new(user, project_id: project.id).find_by(merge_commit_sha: id) if merge_commit?
+  end
 end
diff --git a/app/models/commit_range.rb b/app/models/commit_range.rb
index ac2477fd973..84e2e8a5dd5 100644
--- a/app/models/commit_range.rb
+++ b/app/models/commit_range.rb
@@ -89,22 +89,25 @@ class CommitRange
 
   alias_method :id, :to_s
 
-  def to_reference(from_project = nil)
-    if cross_project_reference?(from_project)
-      project.to_reference + self.class.reference_prefix + self.id
+  def to_reference(from_project = nil, full: false)
+    project_reference = project.to_reference(from_project, full: full)
+
+    if project_reference.present?
+      project_reference + self.class.reference_prefix + self.id
     else
       self.id
     end
   end
 
   def reference_link_text(from_project = nil)
-    reference = ref_from + notation + ref_to
+    project_reference = project.to_reference(from_project)
+    reference         = ref_from + notation + ref_to
 
-    if cross_project_reference?(from_project)
-      reference = project.to_reference + self.class.reference_prefix + reference
+    if project_reference.present?
+      project_reference + self.class.reference_prefix + reference
+    else
+      reference
     end
-
-    reference
   end
 
   # Return a Hash of parameters for passing to a URL helper
diff --git a/app/models/commit_status.rb b/app/models/commit_status.rb
index d159fc6c5c7..17b322b5ae3 100644
--- a/app/models/commit_status.rb
+++ b/app/models/commit_status.rb
@@ -5,15 +5,16 @@ class CommitStatus < ActiveRecord::Base
 
   self.table_name = 'ci_builds'
 
-  belongs_to :project, foreign_key: :gl_project_id
+  belongs_to :project
   belongs_to :pipeline, class_name: 'Ci::Pipeline', foreign_key: :commit_id
   belongs_to :user
 
   delegate :commit, to: :pipeline
+  delegate :sha, :short_sha, to: :pipeline
 
   validates :pipeline, presence: true, unless: :importing?
 
-  validates_presence_of :name
+  validates :name, presence: true
 
   alias_attribute :author, :user
 
@@ -23,34 +24,31 @@ class CommitStatus < ActiveRecord::Base
     where(id: max_id.group(:name, :commit_id))
   end
 
-  scope :retried, -> { where.not(id: latest) }
-  scope :ordered, -> { order(:name) }
-
   scope :failed_but_allowed, -> do
     where(allow_failure: true, status: [:failed, :canceled])
   end
 
   scope :exclude_ignored, -> do
-    quoted_when = connection.quote_column_name('when')
-    # We want to ignore failed_but_allowed jobs
+    # We want to ignore failed but allowed to fail jobs.
+    #
+    # TODO, we also skip ignored optional manual actions.
     where("allow_failure = ? OR status IN (?)",
-      false, all_state_names - [:failed, :canceled]).
-      # We want to ignore skipped manual jobs
-      where("#{quoted_when} <> ? OR status <> ?", 'manual', 'skipped').
-      # We want to ignore skipped on_failure
-      where("#{quoted_when} <> ? OR status <> ?", 'on_failure', 'skipped')
+      false, all_state_names - [:failed, :canceled, :manual])
   end
 
-  scope :latest_ci_stages, -> { latest.ordered.includes(project: :namespace) }
-  scope :retried_ci_stages, -> { retried.ordered.includes(project: :namespace) }
+  scope :retried, -> { where.not(id: latest) }
+  scope :ordered, -> { order(:name) }
+  scope :latest_ordered, -> { latest.ordered.includes(project: :namespace) }
+  scope :retried_ordered, -> { retried.ordered.includes(project: :namespace) }
+  scope :after_stage, -> (index) { where('stage_idx > ?', index) }
 
   state_machine :status do
     event :enqueue do
-      transition [:created, :skipped] => :pending
+      transition [:created, :skipped, :manual] => :pending
     end
 
     event :process do
-      transition skipped: :created
+      transition [:skipped, :manual] => :created
     end
 
     event :run do
@@ -70,7 +68,7 @@ class CommitStatus < ActiveRecord::Base
     end
 
     event :cancel do
-      transition [:created, :pending, :running] => :canceled
+      transition [:created, :pending, :running, :manual] => :canceled
     end
 
     before_transition created: [:pending, :running] do |commit_status|
@@ -90,7 +88,7 @@ class CommitStatus < ActiveRecord::Base
 
       commit_status.run_after_commit do
         pipeline.try do |pipeline|
-          if complete?
+          if complete? || manual?
             PipelineProcessWorker.perform_async(pipeline.id)
           else
             PipelineUpdateWorker.perform_async(pipeline.id)
@@ -107,7 +105,9 @@ class CommitStatus < ActiveRecord::Base
     end
   end
 
-  delegate :sha, :short_sha, to: :pipeline
+  def locking_enabled?
+    status_changed?
+  end
 
   def before_sha
     pipeline.before_sha || Gitlab::Git::BLANK_SHA
@@ -117,33 +117,41 @@ class CommitStatus < ActiveRecord::Base
     name.gsub(/\d+[\s:\/\\]+\d+\s*/, '').strip
   end
 
-  def self.stages
-    # We group by stage name, but order stages by theirs' index
-    unscoped.from(all, :sg).group('stage').order('max(stage_idx)', 'stage').pluck('sg.stage')
-  end
-
-  def self.stages_status
-    # We execute subquery for each stage to calculate a stage status
-    statuses = unscoped.from(all, :sg).group('stage').pluck('sg.stage', all.where('stage=sg.stage').status_sql)
-    statuses.inject({}) do |h, k|
-      h[k.first] = k.last
-      h
-    end
-  end
-
   def failed_but_allowed?
     allow_failure? && (failed? || canceled?)
   end
 
+  def duration
+    calculate_duration
+  end
+
   def playable?
     false
   end
 
-  def duration
-    calculate_duration
+  def stuck?
+    false
   end
 
-  def stuck?
+  def has_trace?
     false
   end
+
+  # Added in 9.0 to keep backward compatibility for projects exported in 8.17
+  # and prior.
+  def gl_project_id
+    'dummy'
+  end
+
+  def detailed_status(current_user)
+    Gitlab::Ci::Status::Factory
+      .new(self, current_user)
+      .fabricate!
+  end
+
+  def sortable_name
+    name.split(/(\d+)/).map do |v|
+      v =~ /\d+/ ? v.to_i : v
+    end
+  end
 end
diff --git a/app/models/concerns/awardable.rb b/app/models/concerns/awardable.rb
index 073ac4c1b65..a7fd0a15f0f 100644
--- a/app/models/concerns/awardable.rb
+++ b/app/models/concerns/awardable.rb
@@ -101,6 +101,6 @@ module Awardable
   private
 
   def normalize_name(name)
-    Gitlab::AwardEmoji.normalize_emoji_name(name)
+    Gitlab::Emoji.normalize_emoji_name(name)
   end
 end
diff --git a/app/models/concerns/cache_markdown_field.rb b/app/models/concerns/cache_markdown_field.rb
index 90bd6490a02..8ea95beed79 100644
--- a/app/models/concerns/cache_markdown_field.rb
+++ b/app/models/concerns/cache_markdown_field.rb
@@ -11,14 +11,15 @@ module CacheMarkdownField
   # Knows about the relationship between markdown and html field names, and
   # stores the rendering contexts for the latter
   class FieldData
-    extend Forwardable
-
     def initialize
       @data = {}
     end
 
-    def_delegators :@data, :[], :[]=
-    def_delegator :@data, :keys, :markdown_fields
+    delegate :[], :[]=, to: :@data
+
+    def markdown_fields
+      @data.keys
+    end
 
     def html_field(markdown_field)
       "#{markdown_field}_html"
@@ -45,12 +46,16 @@ module CacheMarkdownField
     Project
     Release
     Snippet
-  ]
+  ].freeze
 
   def self.caching_classes
     CACHING_CLASSES.map(&:constantize)
   end
 
+  def skip_project_check?
+    false
+  end
+
   extend ActiveSupport::Concern
 
   included do
@@ -112,7 +117,8 @@ module CacheMarkdownField
       invalidation_method = "#{html_field}_invalidated?".to_sym
 
       define_method(cache_method) do
-        html = Banzai::Renderer.cacheless_render_field(self, markdown_field)
+        options = { skip_project_check: skip_project_check? }
+        html = Banzai::Renderer.cacheless_render_field(self, markdown_field, options)
         __send__("#{html_field}=", html)
         true
       end
diff --git a/app/models/concerns/case_sensitivity.rb b/app/models/concerns/case_sensitivity.rb
index fe0cea8465f..034e9f40ff0 100644
--- a/app/models/concerns/case_sensitivity.rb
+++ b/app/models/concerns/case_sensitivity.rb
@@ -13,11 +13,12 @@ module CaseSensitivity
       params.each do |key, value|
         column = ActiveRecord::Base.connection.quote_table_name(key)
 
-        if cast_lower
-          condition = "LOWER(#{column}) = LOWER(:value)"
-        else
-          condition = "#{column} = :value"
-        end
+        condition =
+          if cast_lower
+            "LOWER(#{column}) = LOWER(:value)"
+          else
+            "#{column} = :value"
+          end
 
         criteria = criteria.where(condition, value: value)
       end
diff --git a/app/models/concerns/has_status.rb b/app/models/concerns/has_status.rb
index ef3e73a4072..0a1a65da05a 100644
--- a/app/models/concerns/has_status.rb
+++ b/app/models/concerns/has_status.rb
@@ -1,34 +1,37 @@
 module HasStatus
   extend ActiveSupport::Concern
 
-  AVAILABLE_STATUSES = %w[created pending running success failed canceled skipped]
-  STARTED_STATUSES = %w[running success failed skipped]
-  ACTIVE_STATUSES = %w[pending running]
-  COMPLETED_STATUSES = %w[success failed canceled]
-  ORDERED_STATUSES = %w[failed pending running canceled success skipped]
+  DEFAULT_STATUS = 'created'.freeze
+  BLOCKED_STATUS = 'manual'.freeze
+  AVAILABLE_STATUSES = %w[created pending running success failed canceled skipped manual].freeze
+  STARTED_STATUSES = %w[running success failed skipped manual].freeze
+  ACTIVE_STATUSES = %w[pending running].freeze
+  COMPLETED_STATUSES = %w[success failed canceled skipped].freeze
+  ORDERED_STATUSES = %w[failed pending running manual canceled success skipped created].freeze
 
   class_methods do
     def status_sql
-      scope = if respond_to?(:exclude_ignored)
-                exclude_ignored
-              else
-                all
-              end
+      scope = respond_to?(:exclude_ignored) ? exclude_ignored : all
+
       builds = scope.select('count(*)').to_sql
       created = scope.created.select('count(*)').to_sql
       success = scope.success.select('count(*)').to_sql
+      manual = scope.manual.select('count(*)').to_sql
       pending = scope.pending.select('count(*)').to_sql
       running = scope.running.select('count(*)').to_sql
       skipped = scope.skipped.select('count(*)').to_sql
       canceled = scope.canceled.select('count(*)').to_sql
 
       "(CASE
+        WHEN (#{builds})=(#{skipped}) THEN 'skipped'
         WHEN (#{builds})=(#{success}) THEN 'success'
         WHEN (#{builds})=(#{created}) THEN 'created'
-        WHEN (#{builds})=(#{success})+(#{skipped}) THEN 'skipped'
+        WHEN (#{builds})=(#{success})+(#{skipped}) THEN 'success'
         WHEN (#{builds})=(#{success})+(#{skipped})+(#{canceled}) THEN 'canceled'
         WHEN (#{builds})=(#{created})+(#{skipped})+(#{pending}) THEN 'pending'
-        WHEN (#{running})+(#{pending})+(#{created})>0 THEN 'running'
+        WHEN (#{running})+(#{pending})>0 THEN 'running'
+        WHEN (#{manual})>0 THEN 'manual'
+        WHEN (#{created})>0 THEN 'running'
         ELSE 'failed'
       END)"
     end
@@ -61,6 +64,7 @@ module HasStatus
       state :success, value: 'success'
       state :canceled, value: 'canceled'
       state :skipped, value: 'skipped'
+      state :manual, value: 'manual'
     end
 
     scope :created, -> { where(status: 'created') }
@@ -71,8 +75,14 @@ module HasStatus
     scope :failed, -> { where(status: 'failed')  }
     scope :canceled, -> { where(status: 'canceled')  }
     scope :skipped, -> { where(status: 'skipped')  }
+    scope :manual, -> { where(status: 'manual')  }
     scope :running_or_pending, -> { where(status: [:running, :pending]) }
     scope :finished, -> { where(status: [:success, :failed, :canceled]) }
+    scope :failed_or_canceled, -> { where(status: [:failed, :canceled]) }
+
+    scope :cancelable, -> do
+      where(status: [:running, :pending, :created, :manual])
+    end
   end
 
   def started?
@@ -87,6 +97,10 @@ module HasStatus
     COMPLETED_STATUSES.include?(status)
   end
 
+  def blocked?
+    BLOCKED_STATUS == status
+  end
+
   private
 
   def calculate_duration
diff --git a/app/models/concerns/issuable.rb b/app/models/concerns/issuable.rb
index 613444e0d70..4d54426b79e 100644
--- a/app/models/concerns/issuable.rb
+++ b/app/models/concerns/issuable.rb
@@ -13,6 +13,12 @@ module Issuable
   include StripAttribute
   include Awardable
   include Taskable
+  include TimeTrackable
+
+  # This object is used to gather issuable meta data for displaying
+  # upvotes, downvotes, notes and closing merge requests count for issues and merge requests
+  # lists avoiding n+1 queries and improving performance.
+  IssuableMeta = Struct.new(:upvotes, :downvotes, :notes_count, :merge_requests_count)
 
   included do
     cache_markdown_field :title, pipeline: :single_line
@@ -40,12 +46,27 @@ module Issuable
 
     has_one :metrics
 
+    delegate :name,
+             :email,
+             :public_email,
+             to: :author,
+             allow_nil: true,
+             prefix: true
+
+    delegate :name,
+             :email,
+             :public_email,
+             to: :assignee,
+             allow_nil: true,
+             prefix: true
+
     validates :author, presence: true
-    validates :title, presence: true, length: { within: 0..255 }
+    validates :title, presence: true, length: { maximum: 255 }
 
     scope :authored, ->(user) { where(author_id: user) }
     scope :assigned_to, ->(u) { where(assignee_id: u.id)}
     scope :recent, -> { reorder(id: :desc) }
+    scope :order_position_asc, -> { reorder(position: :asc) }
     scope :assigned, -> { where("assignee_id IS NOT NULL") }
     scope :unassigned, -> { where("assignee_id IS NULL") }
     scope :of_projects, ->(ids) { where(project_id: ids) }
@@ -62,21 +83,10 @@ module Issuable
 
     scope :without_label, -> { joins("LEFT OUTER JOIN label_links ON label_links.target_type = '#{name}' AND label_links.target_id = #{table_name}.id").where(label_links: { id: nil }) }
     scope :join_project, -> { joins(:project) }
-    scope :inc_notes_with_associations, -> { includes(notes: [ :project, :author, :award_emoji ]) }
+    scope :inc_notes_with_associations, -> { includes(notes: [:project, :author, :award_emoji]) }
     scope :references_project, -> { references(:project) }
     scope :non_archived, -> { join_project.where(projects: { archived: false }) }
 
-    delegate :name,
-             :email,
-             to: :author,
-             prefix: true
-
-    delegate :name,
-             :email,
-             to: :assignee,
-             allow_nil: true,
-             prefix: true
-
     attr_mentionable :title, pipeline: :single_line
     attr_mentionable :description
 
@@ -92,9 +102,10 @@ module Issuable
     after_save :record_metrics
 
     def update_assignee_cache_counts
-      # make sure we flush the cache for both the old *and* new assignee
-      User.find(assignee_id_was).update_cache_counts if assignee_id_was
-      assignee.update_cache_counts if assignee
+      # make sure we flush the cache for both the old *and* new assignees(if they exist)
+      previous_assignee = User.find_by_id(assignee_id_was) if assignee_id_was
+      previous_assignee&.update_cache_counts
+      assignee&.update_cache_counts
     end
 
     # We want to use optimistic lock for cases when only title or description are involved
@@ -136,7 +147,9 @@ module Issuable
                when 'milestone_due_desc' then order_milestone_due_desc
                when 'downvotes_desc' then order_downvotes_desc
                when 'upvotes_desc' then order_upvotes_desc
-               when 'priority' then order_labels_priority(excluded_labels: excluded_labels)
+               when 'label_priority' then order_labels_priority(excluded_labels: excluded_labels)
+               when 'priority' then order_due_date_and_labels_priority(excluded_labels: excluded_labels)
+               when 'position_asc' then  order_position_asc
                else
                  order_by(method)
                end
@@ -145,7 +158,28 @@ module Issuable
       sorted.order(id: :desc)
     end
 
-    def order_labels_priority(excluded_labels: [])
+    def order_due_date_and_labels_priority(excluded_labels: [])
+      # The order_ methods also modify the query in other ways:
+      #
+      # - For milestones, we add a JOIN.
+      # - For label priority, we change the SELECT, and add a GROUP BY.#
+      #
+      # After doing those, we need to reorder to the order we want. The existing
+      # ORDER BYs won't work because:
+      #
+      # 1. We need milestone due date first.
+      # 2. We can't ORDER BY a column that isn't in the GROUP BY and doesn't
+      #    have an aggregate function applied, so we do a useless MIN() instead.
+      #
+      milestones_due_date = 'MIN(milestones.due_date)'
+
+      order_milestone_due_asc.
+        order_labels_priority(excluded_labels: excluded_labels, extra_select_columns: [milestones_due_date]).
+        reorder(Gitlab::Database.nulls_last_order(milestones_due_date, 'ASC'),
+                Gitlab::Database.nulls_last_order('highest_priority', 'ASC'))
+    end
+
+    def order_labels_priority(excluded_labels: [], extra_select_columns: [])
       params = {
         target_type: name,
         target_column: "#{table_name}.id",
@@ -155,7 +189,12 @@ module Issuable
 
       highest_priority = highest_label_priority(params).to_sql
 
-      select("#{table_name}.*, (#{highest_priority}) AS highest_priority").
+      select_columns = [
+        "#{table_name}.*",
+        "(#{highest_priority}) AS highest_priority"
+      ] + extra_select_columns
+
+      select(select_columns.join(', ')).
         group(arel_table[:id]).
         reorder(Gitlab::Database.nulls_last_order('highest_priority', 'ASC'))
     end
@@ -175,7 +214,7 @@ module Issuable
     def grouping_columns(sort)
       grouping_columns = [arel_table[:id]]
 
-      if ["milestone_due_desc", "milestone_due_asc"].include?(sort)
+      if %w(milestone_due_desc milestone_due_asc).include?(sort)
         milestone_table = Milestone.arel_table
         grouping_columns << milestone_table[:id]
         grouping_columns << milestone_table[:due_date]
@@ -183,6 +222,10 @@ module Issuable
 
       grouping_columns
     end
+
+    def to_ability_name
+      model_name.singular
+    end
   end
 
   def today?
@@ -211,7 +254,7 @@ module Issuable
     end
   end
 
-  def subscribed_without_subscriptions?(user)
+  def subscribed_without_subscriptions?(user, project)
     participants(user).include?(user)
   end
 
@@ -221,10 +264,11 @@ module Issuable
       user: user.hook_attrs,
       project: project.hook_attrs,
       object_attributes: hook_attrs,
+      labels: labels.map(&:hook_attrs),
       # DEPRECATED
       repository: project.hook_attrs.slice(:name, :url, :description, :homepage)
     }
-    hook_data.merge!(assignee: assignee.hook_attrs) if assignee
+    hook_data[:assignee] = assignee.hook_attrs if assignee
 
     hook_data
   end
@@ -244,7 +288,18 @@ module Issuable
   #   issuable.class           # => MergeRequest
   #   issuable.to_ability_name # => "merge_request"
   def to_ability_name
-    self.class.to_s.underscore
+    self.class.to_ability_name
+  end
+
+  # Convert this Issuable class name to a format usable by notifications.
+  #
+  # Examples:
+  #
+  #   issuable.class           # => MergeRequest
+  #   issuable.human_class_name # => "merge request"
+
+  def human_class_name
+    @human_class_name ||= self.class.name.titleize.downcase
   end
 
   # Returns a Hash of attributes to be used for Twitter card metadata
@@ -286,6 +341,11 @@ module Issuable
     false
   end
 
+  def assignee_or_author?(user)
+    # We're comparing IDs here so we don't need to load any associations.
+    author_id == user.id || assignee_id == user.id
+  end
+
   def record_metrics
     metrics = self.metrics || create_metrics
     metrics.record!
diff --git a/app/models/concerns/mentionable.rb b/app/models/concerns/mentionable.rb
index eb2ff0428f6..7e56e371b27 100644
--- a/app/models/concerns/mentionable.rb
+++ b/app/models/concerns/mentionable.rb
@@ -1,6 +1,6 @@
 # == Mentionable concern
 #
-# Contains functionality related to objects that can mention Users, Issues, MergeRequests, or Commits by
+# Contains functionality related to objects that can mention Users, Issues, MergeRequests, Commits or Snippets by
 # GFM references.
 #
 # Used by Issue, Note, MergeRequest, and Commit.
@@ -44,23 +44,38 @@ module Mentionable
   end
 
   def all_references(current_user = nil, extractor: nil)
-    extractor ||= Gitlab::ReferenceExtractor.
-      new(project, current_user)
+    # Use custom extractor if it's passed in the function parameters.
+    if extractor
+      @extractor = extractor
+    else
+      @extractor ||= Gitlab::ReferenceExtractor.
+        new(project, current_user)
+
+      @extractor.reset_memoized_values
+    end
 
     self.class.mentionable_attrs.each do |attr, options|
       text    = __send__(attr)
-      options = options.merge(cache_key: [self, attr], author: author)
+      options = options.merge(
+        cache_key: [self, attr],
+        author: author,
+        skip_project_check: skip_project_check?
+      )
 
-      extractor.analyze(text, options)
+      @extractor.analyze(text, options)
     end
 
-    extractor
+    @extractor
   end
 
   def mentioned_users(current_user = nil)
     all_references(current_user).users
   end
 
+  def directly_addressed_users(current_user = nil)
+    all_references(current_user).directly_addressed_users
+  end
+
   # Extract GFM references to other Mentionables from this Mentionable. Always excludes its #local_reference.
   def referenced_mentionables(current_user = self.author)
     refs = all_references(current_user)
@@ -121,4 +136,8 @@ module Mentionable
   def cross_reference_exists?(target)
     SystemNoteService.cross_reference_exists?(target, local_reference)
   end
+
+  def skip_project_check?
+    false
+  end
 end
diff --git a/app/models/concerns/milestoneish.rb b/app/models/concerns/milestoneish.rb
index 7bcc78247ba..f449229864d 100644
--- a/app/models/concerns/milestoneish.rb
+++ b/app/models/concerns/milestoneish.rb
@@ -1,17 +1,25 @@
 module Milestoneish
-  def closed_items_count(user = nil)
-    issues_visible_to_user(user).closed.size + merge_requests.closed_and_merged.size
+  def closed_items_count(user)
+    memoize_per_user(user, :closed_items_count) do
+      (count_issues_by_state(user)['closed'] || 0) + merge_requests.closed_and_merged.size
+    end
   end
 
-  def total_items_count(user = nil)
-    issues_visible_to_user(user).size + merge_requests.size
+  def total_items_count(user)
+    memoize_per_user(user, :total_items_count) do
+      total_issues_count(user) + merge_requests.size
+    end
   end
 
-  def complete?(user = nil)
+  def total_issues_count(user)
+    count_issues_by_state(user).values.sum
+  end
+
+  def complete?(user)
     total_items_count(user) > 0 && total_items_count(user) == closed_items_count(user)
   end
 
-  def percent_complete(user = nil)
+  def percent_complete(user)
     ((closed_items_count(user) * 100) / total_items_count(user)).abs
   rescue ZeroDivisionError
     0
@@ -23,7 +31,54 @@ module Milestoneish
     (due_date - Date.today).to_i
   end
 
-  def issues_visible_to_user(user = nil)
-    issues.visible_to_user(user)
+  def elapsed_days
+    return 0 if !start_date || start_date.future?
+
+    (Date.today - start_date).to_i
+  end
+
+  def issues_visible_to_user(user)
+    memoize_per_user(user, :issues_visible_to_user) do
+      IssuesFinder.new(user, issues_finder_params)
+        .execute.where(milestone_id: milestoneish_ids)
+    end
+  end
+
+  def upcoming?
+    start_date && start_date.future?
+  end
+
+  def expires_at
+    if due_date
+      if due_date.past?
+        "expired on #{due_date.to_s(:medium)}"
+      else
+        "expires on #{due_date.to_s(:medium)}"
+      end
+    end
+  end
+
+  def expired?
+    due_date && due_date.past?
+  end
+
+  private
+
+  def count_issues_by_state(user)
+    memoize_per_user(user, :count_issues_by_state) do
+      issues_visible_to_user(user).reorder(nil).group(:state).count
+    end
+  end
+
+  def memoize_per_user(user, method_name)
+    @memoized ||= {}
+    @memoized[method_name] ||= {}
+    @memoized[method_name][user&.id] ||= yield
+  end
+
+  # override in a class that includes this module to get a faster query
+  # from IssuesFinder
+  def issues_finder_params
+    {}
   end
 end
diff --git a/app/models/concerns/participable.rb b/app/models/concerns/participable.rb
index 70740c76e43..4865c0a14b1 100644
--- a/app/models/concerns/participable.rb
+++ b/app/models/concerns/participable.rb
@@ -96,6 +96,11 @@ module Participable
 
     participants.merge(ext.users)
 
-    Ability.users_that_can_read_project(participants.to_a, project)
+    case self
+    when PersonalSnippet
+      Ability.users_that_can_read_personal_snippet(participants.to_a, self)
+    else
+      Ability.users_that_can_read_project(participants.to_a, project)
+    end
   end
 end
diff --git a/app/models/concerns/presentable.rb b/app/models/concerns/presentable.rb
new file mode 100644
index 00000000000..7b33b837004
--- /dev/null
+++ b/app/models/concerns/presentable.rb
@@ -0,0 +1,7 @@
+module Presentable
+  def present(**attributes)
+    Gitlab::View::Presenter::Factory
+      .new(self, attributes)
+      .fabricate!
+  end
+end
diff --git a/app/models/concerns/project_features_compatibility.rb b/app/models/concerns/project_features_compatibility.rb
index 6d88951c713..60734bc6660 100644
--- a/app/models/concerns/project_features_compatibility.rb
+++ b/app/models/concerns/project_features_compatibility.rb
@@ -32,6 +32,6 @@ module ProjectFeaturesCompatibility
     build_project_feature unless project_feature
 
     access_level = Gitlab::Utils.to_boolean(value) ? ProjectFeature::ENABLED : ProjectFeature::DISABLED
-    project_feature.update_attribute(field, access_level)
+    project_feature.send(:write_attribute, field, access_level)
   end
 end
diff --git a/app/models/concerns/protected_branch_access.rb b/app/models/concerns/protected_branch_access.rb
index 7fd0905ee81..9dd4d9c6f24 100644
--- a/app/models/concerns/protected_branch_access.rb
+++ b/app/models/concerns/protected_branch_access.rb
@@ -2,6 +2,9 @@ module ProtectedBranchAccess
   extend ActiveSupport::Concern
 
   included do
+    belongs_to :protected_branch
+    delegate :project, to: :protected_branch
+
     scope :master, -> { where(access_level: Gitlab::Access::MASTER) }
     scope :developer, -> { where(access_level: Gitlab::Access::DEVELOPER) }
   end
@@ -9,4 +12,10 @@ module ProtectedBranchAccess
   def humanize
     self.class.human_access_levels[self.access_level]
   end
+
+  def check_access(user)
+    return true if user.is_admin?
+
+    project.team.max_member_access(user.id) >= access_level
+  end
 end
diff --git a/app/models/concerns/reactive_caching.rb b/app/models/concerns/reactive_caching.rb
new file mode 100644
index 00000000000..2589215ad19
--- /dev/null
+++ b/app/models/concerns/reactive_caching.rb
@@ -0,0 +1,118 @@
+# The ReactiveCaching concern is used to fetch some data in the background and
+# store it in the Rails cache, keeping it up-to-date for as long as it is being
+# requested.  If the data hasn't been requested for +reactive_cache_lifetime+,
+# it stop being refreshed, and then be removed.
+#
+# Example of use:
+#
+#    class Foo < ActiveRecord::Base
+#      include ReactiveCaching
+#
+#      self.reactive_cache_key = ->(thing) { ["foo", thing.id] }
+#
+#      after_save :clear_reactive_cache!
+#
+#      def calculate_reactive_cache
+#        # Expensive operation here. The return value of this method is cached
+#      end
+#
+#      def result
+#        with_reactive_cache do |data|
+#          # ...
+#        end
+#      end
+#    end
+#
+# In this example, the first time `#result` is called, it will return `nil`.
+# However, it will enqueue a background worker to call `#calculate_reactive_cache`
+# and set an initial cache lifetime of ten minutes.
+#
+# Each time the background job completes, it stores the return value of
+# `#calculate_reactive_cache`. It is also re-enqueued to run again after
+# `reactive_cache_refresh_interval`, so keeping the stored value up to date.
+# Calculations are never run concurrently.
+#
+# Calling `#result` while a value is in the cache will call the block given to
+# `#with_reactive_cache`, yielding the cached value. It will also extend the
+# lifetime by `reactive_cache_lifetime`.
+#
+# Once the lifetime has expired, no more background jobs will be enqueued and
+# calling `#result` will again return `nil` - starting the process all over
+# again
+module ReactiveCaching
+  extend ActiveSupport::Concern
+
+  included do
+    class_attribute :reactive_cache_lease_timeout
+
+    class_attribute :reactive_cache_key
+    class_attribute :reactive_cache_lifetime
+    class_attribute :reactive_cache_refresh_interval
+
+    # defaults
+    self.reactive_cache_lease_timeout = 2.minutes
+
+    self.reactive_cache_refresh_interval = 1.minute
+    self.reactive_cache_lifetime = 10.minutes
+
+    def calculate_reactive_cache(*args)
+      raise NotImplementedError
+    end
+
+    def with_reactive_cache(*args, &blk)
+      within_reactive_cache_lifetime(*args) do
+        data = Rails.cache.read(full_reactive_cache_key(*args))
+        yield data if data.present?
+      end
+    ensure
+      Rails.cache.write(alive_reactive_cache_key(*args), true, expires_in: self.class.reactive_cache_lifetime)
+      ReactiveCachingWorker.perform_async(self.class, id, *args)
+    end
+
+    def clear_reactive_cache!(*args)
+      Rails.cache.delete(full_reactive_cache_key(*args))
+    end
+
+    def exclusively_update_reactive_cache!(*args)
+      locking_reactive_cache(*args) do
+        within_reactive_cache_lifetime(*args) do
+          enqueuing_update(*args) do
+            value = calculate_reactive_cache(*args)
+            Rails.cache.write(full_reactive_cache_key(*args), value)
+          end
+        end
+      end
+    end
+
+    private
+
+    def full_reactive_cache_key(*qualifiers)
+      prefix = self.class.reactive_cache_key
+      prefix = prefix.call(self) if prefix.respond_to?(:call)
+
+      ([prefix].flatten + qualifiers).join(':')
+    end
+
+    def alive_reactive_cache_key(*qualifiers)
+      full_reactive_cache_key(*(qualifiers + ['alive']))
+    end
+
+    def locking_reactive_cache(*args)
+      lease = Gitlab::ExclusiveLease.new(full_reactive_cache_key(*args), timeout: reactive_cache_lease_timeout)
+      uuid = lease.try_obtain
+      yield if uuid
+    ensure
+      Gitlab::ExclusiveLease.cancel(full_reactive_cache_key(*args), uuid)
+    end
+
+    def within_reactive_cache_lifetime(*args)
+      yield if Rails.cache.read(alive_reactive_cache_key(*args))
+    end
+
+    def enqueuing_update(*args)
+      yield
+    ensure
+      ReactiveCachingWorker.perform_in(self.class.reactive_cache_refresh_interval, self.class, id, *args)
+    end
+  end
+end
diff --git a/app/models/concerns/reactive_service.rb b/app/models/concerns/reactive_service.rb
new file mode 100644
index 00000000000..713246039c1
--- /dev/null
+++ b/app/models/concerns/reactive_service.rb
@@ -0,0 +1,10 @@
+module ReactiveService
+  extend ActiveSupport::Concern
+
+  included do
+    include ReactiveCaching
+
+    # Default cache key: class name + project_id
+    self.reactive_cache_key = ->(service) { [service.class.model_name.singular, service.project_id] }
+  end
+end
diff --git a/app/models/concerns/referable.rb b/app/models/concerns/referable.rb
index dee940a3f88..da803c7f481 100644
--- a/app/models/concerns/referable.rb
+++ b/app/models/concerns/referable.rb
@@ -17,7 +17,7 @@ module Referable
   #   Issue.last.to_reference(other_project) # => "cross-project#1"
   #
   # Returns a String
-  def to_reference(_from_project = nil)
+  def to_reference(_from_project = nil, full:)
     ''
   end
 
@@ -72,17 +72,4 @@ module Referable
       }x
     end
   end
-
-  private
-
-  # Check if a reference is being done cross-project
-  #
-  # from_project - Refering Project object
-  def cross_project_reference?(from_project)
-    if self.is_a?(Project)
-      self != from_project
-    else
-      from_project && self.project && self.project != from_project
-    end
-  end
 end
diff --git a/app/models/concerns/relative_positioning.rb b/app/models/concerns/relative_positioning.rb
new file mode 100644
index 00000000000..f1d8532a6d6
--- /dev/null
+++ b/app/models/concerns/relative_positioning.rb
@@ -0,0 +1,139 @@
+module RelativePositioning
+  extend ActiveSupport::Concern
+
+  MIN_POSITION = 0
+  START_POSITION = Gitlab::Database::MAX_INT_VALUE / 2
+  MAX_POSITION = Gitlab::Database::MAX_INT_VALUE
+  IDEAL_DISTANCE = 500
+
+  included do
+    after_save :save_positionable_neighbours
+  end
+
+  def max_relative_position
+    self.class.in_projects(project.id).maximum(:relative_position)
+  end
+
+  def prev_relative_position
+    prev_pos = nil
+
+    if self.relative_position
+      prev_pos = self.class.
+        in_projects(project.id).
+        where('relative_position < ?', self.relative_position).
+        maximum(:relative_position)
+    end
+
+    prev_pos
+  end
+
+  def next_relative_position
+    next_pos = nil
+
+    if self.relative_position
+      next_pos = self.class.
+        in_projects(project.id).
+        where('relative_position > ?', self.relative_position).
+        minimum(:relative_position)
+    end
+
+    next_pos
+  end
+
+  def move_between(before, after)
+    return move_after(before) unless after
+    return move_before(after) unless before
+
+    # If there is no place to insert an issue we need to create one by moving the before issue closer
+    # to its predecessor. This process will recursively move all the predecessors until we have a place
+    if (after.relative_position - before.relative_position) < 2
+      before.move_before
+      @positionable_neighbours = [before]
+    end
+
+    self.relative_position = position_between(before.relative_position, after.relative_position)
+  end
+
+  def move_after(before = self)
+    pos_before = before.relative_position
+    pos_after = before.next_relative_position
+
+    if before.shift_after?
+      issue_to_move = self.class.in_projects(project.id).find_by!(relative_position: pos_after)
+      issue_to_move.move_after
+      @positionable_neighbours = [issue_to_move]
+
+      pos_after = issue_to_move.relative_position
+    end
+
+    self.relative_position = position_between(pos_before, pos_after)
+  end
+
+  def move_before(after = self)
+    pos_after = after.relative_position
+    pos_before = after.prev_relative_position
+
+    if after.shift_before?
+      issue_to_move = self.class.in_projects(project.id).find_by!(relative_position: pos_before)
+      issue_to_move.move_before
+      @positionable_neighbours = [issue_to_move]
+
+      pos_before = issue_to_move.relative_position
+    end
+
+    self.relative_position = position_between(pos_before, pos_after)
+  end
+
+  def move_to_end
+    self.relative_position = position_between(max_relative_position || START_POSITION, MAX_POSITION)
+  end
+
+  # Indicates if there is an issue that should be shifted to free the place
+  def shift_after?
+    next_pos = next_relative_position
+    next_pos && (next_pos - relative_position) == 1
+  end
+
+  # Indicates if there is an issue that should be shifted to free the place
+  def shift_before?
+    prev_pos = prev_relative_position
+    prev_pos && (relative_position - prev_pos) == 1
+  end
+
+  private
+
+  # This method takes two integer values (positions) and
+  # calculates the position between them. The range is huge as
+  # the maximum integer value is 2147483647. We are incrementing position by IDEAL_DISTANCE * 2 every time
+  # when we have enough space. If distance is less then IDEAL_DISTANCE we are calculating an average number
+  def position_between(pos_before, pos_after)
+    pos_before ||= MIN_POSITION
+    pos_after ||= MAX_POSITION
+
+    pos_before, pos_after = [pos_before, pos_after].sort
+
+    halfway = (pos_after + pos_before) / 2
+    distance_to_halfway = pos_after - halfway
+
+    if distance_to_halfway < IDEAL_DISTANCE
+      halfway
+    else
+      if pos_before == MIN_POSITION
+        pos_after - IDEAL_DISTANCE
+      elsif pos_after == MAX_POSITION
+        pos_before + IDEAL_DISTANCE
+      else
+        halfway
+      end
+    end
+  end
+
+  def save_positionable_neighbours
+    return unless @positionable_neighbours
+
+    status = @positionable_neighbours.all?(&:save)
+    @positionable_neighbours = nil
+
+    status
+  end
+end
diff --git a/app/models/concerns/routable.rb b/app/models/concerns/routable.rb
new file mode 100644
index 00000000000..529fb5ce988
--- /dev/null
+++ b/app/models/concerns/routable.rb
@@ -0,0 +1,146 @@
+# Store object full path in separate table for easy lookup and uniq validation
+# Object must have name and path db fields and respond to parent and parent_changed? methods.
+module Routable
+  extend ActiveSupport::Concern
+
+  included do
+    has_one :route, as: :source, autosave: true, dependent: :destroy
+
+    validates_associated :route
+    validates :route, presence: true
+
+    scope :with_route, -> { includes(:route) }
+
+    before_validation do
+      if full_path_changed? || full_name_changed?
+        prepare_route
+      end
+    end
+  end
+
+  class_methods do
+    # Finds a single object by full path match in routes table.
+    #
+    # Usage:
+    #
+    #     Klass.find_by_full_path('gitlab-org/gitlab-ce')
+    #
+    # Returns a single object, or nil.
+    def find_by_full_path(path)
+      # On MySQL we want to ensure the ORDER BY uses a case-sensitive match so
+      # any literal matches come first, for this we have to use "BINARY".
+      # Without this there's still no guarantee in what order MySQL will return
+      # rows.
+      binary = Gitlab::Database.mysql? ? 'BINARY' : ''
+
+      order_sql = "(CASE WHEN #{binary} routes.path = #{connection.quote(path)} THEN 0 ELSE 1 END)"
+
+      where_full_path_in([path]).reorder(order_sql).take
+    end
+
+    # Builds a relation to find multiple objects by their full paths.
+    #
+    # Usage:
+    #
+    #     Klass.where_full_path_in(%w{gitlab-org/gitlab-ce gitlab-org/gitlab-ee})
+    #
+    # Returns an ActiveRecord::Relation.
+    def where_full_path_in(paths)
+      wheres = []
+      cast_lower = Gitlab::Database.postgresql?
+
+      paths.each do |path|
+        path = connection.quote(path)
+
+        where =
+          if cast_lower
+            "(LOWER(routes.path) = LOWER(#{path}))"
+          else
+            "(routes.path = #{path})"
+          end
+
+        wheres << where
+      end
+
+      if wheres.empty?
+        none
+      else
+        joins(:route).where(wheres.join(' OR '))
+      end
+    end
+
+    # Builds a relation to find multiple objects that are nested under user membership
+    #
+    # Usage:
+    #
+    #     Klass.member_descendants(1)
+    #
+    # Returns an ActiveRecord::Relation.
+    def member_descendants(user_id)
+      joins(:route).
+        joins("INNER JOIN routes r2 ON routes.path LIKE CONCAT(r2.path, '/%')
+               INNER JOIN members ON members.source_id = r2.source_id
+               AND members.source_type = r2.source_type").
+        where('members.user_id = ?', user_id)
+    end
+  end
+
+  def full_name
+    if route && route.name.present?
+      @full_name ||= route.name
+    else
+      update_route if persisted?
+
+      build_full_name
+    end
+  end
+
+  def full_path
+    if route && route.path.present?
+      @full_path ||= route.path
+    else
+      update_route if persisted?
+
+      build_full_path
+    end
+  end
+
+  private
+
+  def full_name_changed?
+    name_changed? || parent_changed?
+  end
+
+  def full_path_changed?
+    path_changed? || parent_changed?
+  end
+
+  def build_full_name
+    if parent && name
+      parent.human_name + ' / ' + name
+    else
+      name
+    end
+  end
+
+  def build_full_path
+    if parent && path
+      parent.full_path + '/' + path
+    else
+      path
+    end
+  end
+
+  def update_route
+    prepare_route
+    route.save
+  end
+
+  def prepare_route
+    route || build_route(source: self)
+    route.path = build_full_path
+    route.name = build_full_name
+    @full_path = nil
+    @full_name = nil
+  end
+end
diff --git a/app/models/concerns/select_for_project_authorization.rb b/app/models/concerns/select_for_project_authorization.rb
new file mode 100644
index 00000000000..50a1d7fc3e1
--- /dev/null
+++ b/app/models/concerns/select_for_project_authorization.rb
@@ -0,0 +1,9 @@
+module SelectForProjectAuthorization
+  extend ActiveSupport::Concern
+
+  module ClassMethods
+    def select_for_project_authorization
+      select("members.user_id, projects.id AS project_id, members.access_level")
+    end
+  end
+end
diff --git a/app/models/concerns/sortable.rb b/app/models/concerns/sortable.rb
index 7edb0acd56c..b9a2d812edd 100644
--- a/app/models/concerns/sortable.rb
+++ b/app/models/concerns/sortable.rb
@@ -46,11 +46,12 @@ module Sortable
         where("label_links.target_id = #{target_column}").
         reorder(nil)
 
-      if target_type_column
-        query = query.where("label_links.target_type = #{target_type_column}")
-      else
-        query = query.where(label_links: { target_type: target_type })
-      end
+      query =
+        if target_type_column
+          query.where("label_links.target_type = #{target_type_column}")
+        else
+          query.where(label_links: { target_type: target_type })
+        end
 
       query = query.where.not(title: excluded_labels) if excluded_labels.present?
 
diff --git a/app/models/concerns/spammable.rb b/app/models/concerns/spammable.rb
index 1aa97debe42..647a6cad3d7 100644
--- a/app/models/concerns/spammable.rb
+++ b/app/models/concerns/spammable.rb
@@ -11,8 +11,9 @@ module Spammable
     has_one :user_agent_detail, as: :subject, dependent: :destroy
 
     attr_accessor :spam
+    attr_accessor :spam_log
 
-    after_validation :check_for_spam, on: :create
+    after_validation :check_for_spam, on: [:create, :update]
 
     cattr_accessor :spammable_attrs, instance_accessor: false do
       []
@@ -21,6 +22,10 @@ module Spammable
     delegate :ip_address, :user_agent, to: :user_agent_detail, allow_nil: true
   end
 
+  def submittable_as_spam_by?(current_user)
+    current_user && current_user.admin? && submittable_as_spam?
+  end
+
   def submittable_as_spam?
     if user_agent_detail
       user_agent_detail.submittable? && current_application_settings.akismet_enabled
@@ -34,7 +39,18 @@ module Spammable
   end
 
   def check_for_spam
-    self.errors.add(:base, "Your #{self.class.name.underscore} has been recognized as spam and has been discarded.") if spam?
+    error_msg = if Gitlab::Recaptcha.enabled?
+                  "Your #{spammable_entity_type} has been recognized as spam. "\
+                  "Please, change the content or solve the reCAPTCHA to proceed."
+                else
+                  "Your #{spammable_entity_type} has been recognized as spam and has been discarded."
+                end
+
+    self.errors.add(:base, error_msg) if spam?
+  end
+
+  def spammable_entity_type
+    self.class.name.underscore
   end
 
   def spam_title
diff --git a/app/models/concerns/subscribable.rb b/app/models/concerns/subscribable.rb
index 083257f1005..83daa9b1a64 100644
--- a/app/models/concerns/subscribable.rb
+++ b/app/models/concerns/subscribable.rb
@@ -12,39 +12,71 @@ module Subscribable
     has_many :subscriptions, dependent: :destroy, as: :subscribable
   end
 
-  def subscribed?(user)
-    if subscription = subscriptions.find_by_user_id(user.id)
+  def subscribed?(user, project = nil)
+    if subscription = subscriptions.find_by(user: user, project: project)
       subscription.subscribed
     else
-      subscribed_without_subscriptions?(user)
+      subscribed_without_subscriptions?(user, project)
     end
   end
 
   # Override this method to define custom logic to consider a subscribable as
   # subscribed without an explicit subscription record.
-  def subscribed_without_subscriptions?(user)
+  def subscribed_without_subscriptions?(user, project)
     false
   end
 
-  def subscribers
-    subscriptions.where(subscribed: true).map(&:user)
+  def subscribers(project)
+    subscriptions_available(project).
+      where(subscribed: true).
+      map(&:user)
   end
 
-  def toggle_subscription(user)
-    subscriptions.
-      find_or_initialize_by(user_id: user.id).
-      update(subscribed: !subscribed?(user))
+  def toggle_subscription(user, project = nil)
+    unsubscribe_from_other_levels(user, project)
+
+    find_or_initialize_subscription(user, project).
+      update(subscribed: !subscribed?(user, project))
+  end
+
+  def subscribe(user, project = nil)
+    unsubscribe_from_other_levels(user, project)
+
+    find_or_initialize_subscription(user, project)
+      .update(subscribed: true)
+  end
+
+  def unsubscribe(user, project = nil)
+    unsubscribe_from_other_levels(user, project)
+
+    find_or_initialize_subscription(user, project)
+      .update(subscribed: false)
   end
 
-  def subscribe(user)
+  private
+
+  def unsubscribe_from_other_levels(user, project)
+    other_subscriptions = subscriptions.where(user: user)
+
+    other_subscriptions =
+      if project.blank?
+        other_subscriptions.where.not(project: nil)
+      else
+        other_subscriptions.where(project: nil)
+      end
+
+    other_subscriptions.update_all(subscribed: false)
+  end
+
+  def find_or_initialize_subscription(user, project)
     subscriptions.
-      find_or_initialize_by(user_id: user.id).
-      update(subscribed: true)
+      find_or_initialize_by(user_id: user.id, project_id: project.try(:id))
   end
 
-  def unsubscribe(user)
+  def subscriptions_available(project)
+    t = Subscription.arel_table
+
     subscriptions.
-      find_or_initialize_by(user_id: user.id).
-      update(subscribed: false)
+      where(t[:project_id].eq(nil).or(t[:project_id].eq(project.try(:id))))
   end
 end
diff --git a/app/models/concerns/taskable.rb b/app/models/concerns/taskable.rb
index ebc75100a54..25e2d8ea24e 100644
--- a/app/models/concerns/taskable.rb
+++ b/app/models/concerns/taskable.rb
@@ -11,10 +11,10 @@ module Taskable
   INCOMPLETE   = 'incomplete'.freeze
   ITEM_PATTERN = /
     ^
-    (?:\s*[-+*]|(?:\d+\.))? # optional list prefix
-    \s*                     # optional whitespace prefix
-    (\[\s\]|\[[xX]\])       # checkbox
-    (\s.+)                  # followed by whitespace and some text.
+    \s*(?:[-+*]|(?:\d+\.)) # list prefix required - task item has to be always in a list
+    \s+                       # whitespace prefix has to be always presented for a list item
+    (\[\s\]|\[[xX]\])         # checkbox
+    (\s.+)                    # followed by whitespace and some text.
   /x
 
   def self.get_tasks(content)
diff --git a/app/models/concerns/time_trackable.rb b/app/models/concerns/time_trackable.rb
new file mode 100644
index 00000000000..9cf83440784
--- /dev/null
+++ b/app/models/concerns/time_trackable.rb
@@ -0,0 +1,72 @@
+# == TimeTrackable concern
+#
+# Contains functionality related to objects that support time tracking.
+#
+# Used by Issue and MergeRequest.
+#
+
+module TimeTrackable
+  extend ActiveSupport::Concern
+
+  included do
+    attr_reader :time_spent, :time_spent_user
+
+    alias_method :time_spent?, :time_spent
+
+    default_value_for :time_estimate, value: 0, allows_nil: false
+
+    validates :time_estimate, numericality: { message: 'has an invalid format' }, allow_nil: false
+    validate  :check_negative_time_spent
+
+    has_many :timelogs, dependent: :destroy
+  end
+
+  def spend_time(options)
+    @time_spent = options[:duration]
+    @time_spent_user = options[:user]
+    @original_total_time_spent = nil
+
+    return if @time_spent == 0
+
+    if @time_spent == :reset
+      reset_spent_time
+    else
+      add_or_subtract_spent_time
+    end
+  end
+  alias_method :spend_time=, :spend_time
+
+  def total_time_spent
+    timelogs.sum(:time_spent)
+  end
+
+  def human_total_time_spent
+    Gitlab::TimeTrackingFormatter.output(total_time_spent)
+  end
+
+  def human_time_estimate
+    Gitlab::TimeTrackingFormatter.output(time_estimate)
+  end
+
+  private
+
+  def reset_spent_time
+    timelogs.new(time_spent: total_time_spent * -1, user: @time_spent_user)
+  end
+
+  def add_or_subtract_spent_time
+    timelogs.new(time_spent: time_spent, user: @time_spent_user)
+  end
+
+  def check_negative_time_spent
+    return if time_spent.nil? || time_spent == :reset
+
+    # we need to cache the total time spent so multiple calls to #valid?
+    # doesn't give a false error
+    @original_total_time_spent ||= total_time_spent
+
+    if time_spent < 0 && (time_spent.abs > @original_total_time_spent)
+      errors.add(:time_spent, 'Time to subtract exceeds the total time spent')
+    end
+  end
+end
diff --git a/app/models/concerns/token_authenticatable.rb b/app/models/concerns/token_authenticatable.rb
index 24c7b26d223..1ca7f91dc03 100644
--- a/app/models/concerns/token_authenticatable.rb
+++ b/app/models/concerns/token_authenticatable.rb
@@ -4,17 +4,21 @@ module TokenAuthenticatable
   private
 
   def write_new_token(token_field)
-    new_token = generate_token(token_field)
+    new_token = generate_available_token(token_field)
     write_attribute(token_field, new_token)
   end
 
-  def generate_token(token_field)
+  def generate_available_token(token_field)
     loop do
-      token = Devise.friendly_token
+      token = generate_token(token_field)
       break token unless self.class.unscoped.find_by(token_field => token)
     end
   end
 
+  def generate_token(token_field)
+    Devise.friendly_token
+  end
+
   class_methods do
     def authentication_token_fields
       @token_fields || []
@@ -35,6 +39,10 @@ module TokenAuthenticatable
         current_token.blank? ? write_new_token(token_field) : current_token
       end
 
+      define_method("set_#{token_field}") do |token|
+        write_attribute(token_field, token) if token
+      end
+
       define_method("ensure_#{token_field}!") do
         send("reset_#{token_field}!") if read_attribute(token_field).blank?
         read_attribute(token_field)
diff --git a/app/models/concerns/uniquify.rb b/app/models/concerns/uniquify.rb
new file mode 100644
index 00000000000..a7fe5951b6e
--- /dev/null
+++ b/app/models/concerns/uniquify.rb
@@ -0,0 +1,30 @@
+class Uniquify
+  # Return a version of the given 'base' string that is unique
+  # by appending a counter to it. Uniqueness is determined by
+  # repeated calls to the passed block.
+  #
+  # If `base` is a function/proc, we expect that calling it with a
+  # candidate counter returns a string to test/return.
+  def string(base)
+    @base = base
+    @counter = nil
+
+    increment_counter! while yield(base_string)
+    base_string
+  end
+
+  private
+
+  def base_string
+    if @base.respond_to?(:call)
+      @base.call(@counter)
+    else
+      "#{@base}#{@counter}"
+    end
+  end
+
+  def increment_counter!
+    @counter ||= 0
+    @counter += 1
+  end
+end
diff --git a/app/models/concerns/valid_attribute.rb b/app/models/concerns/valid_attribute.rb
new file mode 100644
index 00000000000..8c35cea8d58
--- /dev/null
+++ b/app/models/concerns/valid_attribute.rb
@@ -0,0 +1,10 @@
+module ValidAttribute
+  extend ActiveSupport::Concern
+
+  # Checks whether an attribute has failed validation or not
+  #
+  # +attribute+ The symbolised name of the attribute i.e :name
+  def valid_attribute?(attribute)
+    self.errors.empty? || self.errors.messages[attribute].nil?
+  end
+end
diff --git a/app/models/cycle_analytics.rb b/app/models/cycle_analytics.rb
index 8ed4a56b19b..d2e626c22e8 100644
--- a/app/models/cycle_analytics.rb
+++ b/app/models/cycle_analytics.rb
@@ -1,103 +1,38 @@
 class CycleAnalytics
-  include Gitlab::Database::Median
-  include Gitlab::Database::DateTime
+  STAGES = %i[issue plan code test review staging production].freeze
 
-  DEPLOYMENT_METRIC_STAGES = %i[production staging]
-
-  def initialize(project, from:)
+  def initialize(project, options)
     @project = project
-    @from = from
+    @options = options
   end
 
   def summary
-    @summary ||= Summary.new(@project, from: @from)
-  end
-
-  def issue
-    calculate_metric(:issue,
-                     Issue.arel_table[:created_at],
-                     [Issue::Metrics.arel_table[:first_associated_with_milestone_at],
-                      Issue::Metrics.arel_table[:first_added_to_board_at]])
-  end
-
-  def plan
-    calculate_metric(:plan,
-                     [Issue::Metrics.arel_table[:first_associated_with_milestone_at],
-                      Issue::Metrics.arel_table[:first_added_to_board_at]],
-                     Issue::Metrics.arel_table[:first_mentioned_in_commit_at])
-  end
-
-  def code
-    calculate_metric(:code,
-                     Issue::Metrics.arel_table[:first_mentioned_in_commit_at],
-                     MergeRequest.arel_table[:created_at])
+    @summary ||= ::Gitlab::CycleAnalytics::StageSummary.new(@project,
+                                                            from: @options[:from],
+                                                            current_user: @options[:current_user]).data
   end
 
-  def test
-    calculate_metric(:test,
-                     MergeRequest::Metrics.arel_table[:latest_build_started_at],
-                     MergeRequest::Metrics.arel_table[:latest_build_finished_at])
+  def stats
+    @stats ||= stats_per_stage
   end
 
-  def review
-    calculate_metric(:review,
-                     MergeRequest.arel_table[:created_at],
-                     MergeRequest::Metrics.arel_table[:merged_at])
+  def no_stats?
+    stats.all? { |hash| hash[:value].nil? }
   end
 
-  def staging
-    calculate_metric(:staging,
-                     MergeRequest::Metrics.arel_table[:merged_at],
-                     MergeRequest::Metrics.arel_table[:first_deployed_to_production_at])
+  def permissions(user:)
+    Gitlab::CycleAnalytics::Permissions.get(user: user, project: @project)
   end
 
-  def production
-    calculate_metric(:production,
-                     Issue.arel_table[:created_at],
-                     MergeRequest::Metrics.arel_table[:first_deployed_to_production_at])
+  def [](stage_name)
+    Gitlab::CycleAnalytics::Stage[stage_name].new(project: @project, options: @options)
   end
 
   private
 
-  def calculate_metric(name, start_time_attrs, end_time_attrs)
-    cte_table = Arel::Table.new("cte_table_for_#{name}")
-
-    # Build a `SELECT` query. We find the first of the `end_time_attrs` that isn't `NULL` (call this end_time).
-    # Next, we find the first of the start_time_attrs that isn't `NULL` (call this start_time).
-    # We compute the (end_time - start_time) interval, and give it an alias based on the current
-    # cycle analytics stage.
-    interval_query = Arel::Nodes::As.new(
-      cte_table,
-      subtract_datetimes(base_query_for(name), end_time_attrs, start_time_attrs, name.to_s))
-
-    median_datetime(cte_table, interval_query, name)
-  end
-
-  # Join table with a row for every <issue,merge_request> pair (where the merge request
-  # closes the given issue) with issue and merge request metrics included. The metrics
-  # are loaded with an inner join, so issues / merge requests without metrics are
-  # automatically excluded.
-  def base_query_for(name)
-    arel_table = MergeRequestsClosingIssues.arel_table
-
-    # Load issues
-    query = arel_table.join(Issue.arel_table).on(Issue.arel_table[:id].eq(arel_table[:issue_id])).
-            join(Issue::Metrics.arel_table).on(Issue.arel_table[:id].eq(Issue::Metrics.arel_table[:issue_id])).
-            where(Issue.arel_table[:project_id].eq(@project.id)).
-            where(Issue.arel_table[:deleted_at].eq(nil)).
-            where(Issue.arel_table[:created_at].gteq(@from))
-
-    # Load merge_requests
-    query = query.join(MergeRequest.arel_table, Arel::Nodes::OuterJoin).
-            on(MergeRequest.arel_table[:id].eq(arel_table[:merge_request_id])).
-            join(MergeRequest::Metrics.arel_table).
-            on(MergeRequest.arel_table[:id].eq(MergeRequest::Metrics.arel_table[:merge_request_id]))
-
-    if DEPLOYMENT_METRIC_STAGES.include?(name)
-      # Limit to merge requests that have been deployed to production after `@from`
-      query.where(MergeRequest::Metrics.arel_table[:first_deployed_to_production_at].gteq(@from))
+  def stats_per_stage
+    STAGES.map do |stage_name|
+      self[stage_name].as_json
     end
-
-    query
   end
 end
diff --git a/app/models/cycle_analytics/summary.rb b/app/models/cycle_analytics/summary.rb
index b46db449bf3..e69de29bb2d 100644
--- a/app/models/cycle_analytics/summary.rb
+++ b/app/models/cycle_analytics/summary.rb
@@ -1,42 +0,0 @@
-class CycleAnalytics
-  class Summary
-    def initialize(project, from:)
-      @project = project
-      @from = from
-    end
-
-    def new_issues
-      @project.issues.created_after(@from).count
-    end
-
-    def commits
-      ref = @project.default_branch.presence
-      count_commits_for(ref)
-    end
-
-    def deploys
-      @project.deployments.where("created_at > ?", @from).count
-    end
-
-    private
-
-    # Don't use the `Gitlab::Git::Repository#log` method, because it enforces
-    # a limit. Since we need a commit count, we _can't_ enforce a limit, so
-    # the easiest way forward is to replicate the relevant portions of the
-    # `log` function here.
-    def count_commits_for(ref)
-      return unless ref
-
-      repository = @project.repository.raw_repository
-      sha = @project.repository.commit(ref).sha
-
-      cmd = %W(git --git-dir=#{repository.path} log)
-      cmd << '--format=%H'
-      cmd << "--after=#{@from.iso8601}"
-      cmd << sha
-
-      raw_output = IO.popen(cmd) { |io| io.read }
-      raw_output.lines.count
-    end
-  end
-end
diff --git a/app/models/dashboard_milestone.rb b/app/models/dashboard_milestone.rb
new file mode 100644
index 00000000000..646c1e5ce1a
--- /dev/null
+++ b/app/models/dashboard_milestone.rb
@@ -0,0 +1,5 @@
+class DashboardMilestone < GlobalMilestone
+  def issues_finder_params
+    { authorized_only: true }
+  end
+end
diff --git a/app/models/deploy_key.rb b/app/models/deploy_key.rb
index 2c525d4cd7a..053f2a11aa0 100644
--- a/app/models/deploy_key.rb
+++ b/app/models/deploy_key.rb
@@ -20,4 +20,18 @@ class DeployKey < Key
   def destroyed_when_orphaned?
     self.private?
   end
+
+  def has_access_to?(project)
+    projects.include?(project)
+  end
+
+  def can_push_to?(project)
+    can_push? && has_access_to?(project)
+  end
+
+  private
+
+  # we don't want to notify the user for deploy keys
+  def notify_user
+  end
 end
diff --git a/app/models/deployment.rb b/app/models/deployment.rb
index 91d85c2279b..afad001d50f 100644
--- a/app/models/deployment.rb
+++ b/app/models/deployment.rb
@@ -91,7 +91,7 @@ class Deployment < ActiveRecord::Base
     @stop_action ||= manual_actions.find_by(name: on_stop)
   end
 
-  def stoppable?
+  def stop_action?
     stop_action.present?
   end
 
diff --git a/app/models/diff_note.rb b/app/models/diff_note.rb
index 559b3075905..895a91139c9 100644
--- a/app/models/diff_note.rb
+++ b/app/models/diff_note.rb
@@ -8,7 +8,7 @@ class DiffNote < Note
   validates :position, presence: true
   validates :diff_line, presence: true
   validates :line_code, presence: true, line_code: true
-  validates :noteable_type, inclusion: { in: ['Commit', 'MergeRequest'] }
+  validates :noteable_type, inclusion: { in: %w(Commit MergeRequest) }
   validates :resolved_by, presence: true, if: :resolved?
   validate :positions_complete
   validate :verify_supported
diff --git a/app/models/directly_addressed_user.rb b/app/models/directly_addressed_user.rb
new file mode 100644
index 00000000000..0d519c6ac22
--- /dev/null
+++ b/app/models/directly_addressed_user.rb
@@ -0,0 +1,7 @@
+class DirectlyAddressedUser
+  class << self
+    def reference_pattern
+      User.reference_pattern
+    end
+  end
+end
diff --git a/app/models/discussion.rb b/app/models/discussion.rb
index de06c13481a..bbe813db823 100644
--- a/app/models/discussion.rb
+++ b/app/models/discussion.rb
@@ -25,7 +25,12 @@ class Discussion
             to: :last_resolved_note,
             allow_nil: true
 
-  delegate :blob, :highlighted_diff_lines, to: :diff_file, allow_nil: true
+  delegate  :blob,
+            :highlighted_diff_lines,
+            :diff_lines,
+
+            to: :diff_file,
+            allow_nil: true
 
   def self.for_notes(notes)
     notes.group_by(&:discussion_id).values.map { |notes| new(notes) }
@@ -83,6 +88,10 @@ class Discussion
     @first_note ||= @notes.first
   end
 
+  def first_note_to_resolve
+    @first_note_to_resolve ||= notes.detect(&:to_be_resolved?)
+  end
+
   def last_note
     @last_note ||= @notes.last
   end
@@ -159,10 +168,11 @@ class Discussion
   end
 
   # Returns an array of at most 16 highlighted lines above a diff note
-  def truncated_diff_lines
+  def truncated_diff_lines(highlight: true)
+    lines = highlight ? highlighted_diff_lines : diff_lines
     prev_lines = []
 
-    highlighted_diff_lines.each do |line|
+    lines.each do |line|
       if line.meta?
         prev_lines.clear
       else
diff --git a/app/models/environment.rb b/app/models/environment.rb
index 73f415c0ef0..bf33010fd21 100644
--- a/app/models/environment.rb
+++ b/app/models/environment.rb
@@ -1,28 +1,50 @@
 class Environment < ActiveRecord::Base
+  # Used to generate random suffixes for the slug
+  LETTERS = 'a'..'z'
+  NUMBERS = '0'..'9'
+  SUFFIX_CHARS = LETTERS.to_a + NUMBERS.to_a
+
   belongs_to :project, required: true, validate: true
 
-  has_many :deployments
+  has_many :deployments, dependent: :destroy
+  has_one :last_deployment, -> { order('deployments.id DESC') }, class_name: 'Deployment'
 
   before_validation :nullify_external_url
+  before_validation :generate_slug, if: ->(env) { env.slug.blank? }
+
   before_save :set_environment_type
 
   validates :name,
             presence: true,
             uniqueness: { scope: :project_id },
-            length: { within: 0..255 },
+            length: { maximum: 255 },
             format: { with: Gitlab::Regex.environment_name_regex,
                       message: Gitlab::Regex.environment_name_regex_message }
 
+  validates :slug,
+            presence: true,
+            uniqueness: { scope: :project_id },
+            length: { maximum: 24 },
+            format: { with: Gitlab::Regex.environment_slug_regex,
+                      message: Gitlab::Regex.environment_slug_regex_message }
+
   validates :external_url,
             uniqueness: { scope: :project_id },
             length: { maximum: 255 },
             allow_nil: true,
             addressable_url: true
 
-  delegate :stop_action, to: :last_deployment, allow_nil: true
+  delegate :stop_action, :manual_actions, to: :last_deployment, allow_nil: true
 
   scope :available, -> { with_state(:available) }
   scope :stopped, -> { with_state(:stopped) }
+  scope :order_by_last_deployed_at, -> do
+    max_deployment_id_sql =
+      Deployment.select(Deployment.arel_table[:id].maximum).
+      where(Deployment.arel_table[:environment_id].eq(arel_table[:id])).
+      to_sql
+    order(Gitlab::Database.nulls_first_order("(#{max_deployment_id_sql})", 'ASC'))
+  end
 
   state_machine :state, initial: :available do
     event :start do
@@ -37,8 +59,15 @@ class Environment < ActiveRecord::Base
     state :stopped
   end
 
-  def last_deployment
-    deployments.last
+  def predefined_variables
+    [
+      { key: 'CI_ENVIRONMENT_NAME', value: name, public: true },
+      { key: 'CI_ENVIRONMENT_SLUG', value: slug, public: true },
+    ]
+  end
+
+  def recently_updated_on_branch?(ref)
+    ref.to_s == last_deployment.try(:ref)
   end
 
   def nullify_external_url
@@ -62,8 +91,12 @@ class Environment < ActiveRecord::Base
     last_deployment.includes_commit?(commit)
   end
 
+  def last_deployed_at
+    last_deployment.try(:created_at)
+  end
+
   def update_merge_request_metrics?
-    self.name == "production"
+    (environment_type || name) == "production"
   end
 
   def first_deployment_for(commit)
@@ -85,13 +118,91 @@ class Environment < ActiveRecord::Base
     external_url.gsub(/\A.*?:\/\//, '')
   end
 
-  def stoppable?
+  def stop_action?
     available? && stop_action.present?
   end
 
-  def stop!(current_user)
-    return unless stoppable?
+  def stop_with_action!(current_user)
+    return unless available?
+
+    stop!
+    stop_action&.play(current_user)
+  end
+
+  def actions_for(environment)
+    return [] unless manual_actions
+
+    manual_actions.select do |action|
+      action.expanded_environment_name == environment
+    end
+  end
+
+  def has_terminals?
+    project.deployment_service.present? && available? && last_deployment.present?
+  end
+
+  def terminals
+    project.deployment_service.terminals(self) if has_terminals?
+  end
+
+  def has_metrics?
+    project.monitoring_service.present? && available? && last_deployment.present?
+  end
+
+  def metrics
+    project.monitoring_service.metrics(self) if has_metrics?
+  end
+
+  # An environment name is not necessarily suitable for use in URLs, DNS
+  # or other third-party contexts, so provide a slugified version. A slug has
+  # the following properties:
+  #   * contains only lowercase letters (a-z), numbers (0-9), and '-'
+  #   * begins with a letter
+  #   * has a maximum length of 24 bytes (OpenShift limitation)
+  #   * cannot end with `-`
+  def generate_slug
+    # Lowercase letters and numbers only
+    slugified = name.to_s.downcase.gsub(/[^a-z0-9]/, '-')
+
+    # Must start with a letter
+    slugified = 'env-' + slugified unless LETTERS.cover?(slugified[0])
+
+    # Repeated dashes are invalid (OpenShift limitation)
+    slugified.gsub!(/\-+/, '-')
+
+    # Maximum length: 24 characters (OpenShift limitation)
+    slugified = slugified[0..23]
+
+    # Cannot end with a dash (Kubernetes label limitation)
+    slugified.chop! if slugified.end_with?('-')
+
+    # Add a random suffix, shortening the current string if necessary, if it
+    # has been slugified. This ensures uniqueness.
+    if slugified != name
+      slugified = slugified[0..16]
+      slugified << '-' unless slugified.end_with?('-')
+      slugified << random_suffix
+    end
+
+    self.slug = slugified
+  end
+
+  def external_url_for(path, commit_sha)
+    return unless self.external_url
+
+    public_path = project.public_path_for_source_path(path, commit_sha)
+    return unless public_path
+
+    [external_url, public_path].join('/')
+  end
+
+  private
 
-    stop_action.play(current_user)
+  # Slugifying a name may remove the uniqueness guarantee afforded by it being
+  # based on name (which must be unique). To compensate, we add a random
+  # 6-byte suffix in those circumstances. This is not *guaranteed* uniqueness,
+  # but the chance of collisions is vanishingly small
+  def random_suffix
+    (0..5).map { SUFFIX_CHARS.sample }.join
   end
 end
diff --git a/app/models/event.rb b/app/models/event.rb
index 43e67069b70..5c34844b5d3 100644
--- a/app/models/event.rb
+++ b/app/models/event.rb
@@ -16,7 +16,7 @@ class Event < ActiveRecord::Base
 
   RESET_PROJECT_ACTIVITY_INTERVAL = 1.hour
 
-  delegate :name, :email, to: :author, prefix: true, allow_nil: true
+  delegate :name, :email, :public_email, to: :author, prefix: true, allow_nil: true
   delegate :title, to: :issue, prefix: true, allow_nil: true
   delegate :title, to: :merge_request, prefix: true, allow_nil: true
   delegate :title, to: :note, prefix: true, allow_nil: true
@@ -36,23 +36,19 @@ class Event < ActiveRecord::Base
   scope :code_push, -> { where(action: PUSHED) }
 
   scope :in_projects, ->(projects) do
-    where(project_id: projects.map(&:id)).recent
+    where(project_id: projects.pluck(:id)).recent
   end
 
-  scope :with_associations, -> { includes(project: :namespace) }
+  scope :with_associations, -> { includes(:author, :project, project: :namespace).preload(:target) }
   scope :for_milestone_id, ->(milestone_id) { where(target_type: "Milestone", target_id: milestone_id) }
 
   class << self
-    def reset_event_cache_for(target)
-      Event.where(target_id: target.id, target_type: target.class.to_s).
-        order('id DESC').limit(100).
-        update_all(updated_at: Time.now)
-    end
-
+    # Update Gitlab::ContributionsCalendar#activity_dates if this changes
     def contributions
-      where("action = ? OR (target_type in (?) AND action in (?))",
-            Event::PUSHED, ["MergeRequest", "Issue"],
-            [Event::CREATED, Event::CLOSED, Event::MERGED])
+      where("action = ? OR (target_type IN (?) AND action IN (?)) OR (target_type = ? AND action = ?)",
+            Event::PUSHED,
+            %w(MergeRequest Issue), [Event::CREATED, Event::CLOSED, Event::MERGED],
+            "Note", Event::COMMENTED)
     end
 
     def limit_recent(limit = 20, offset = nil)
@@ -61,8 +57,8 @@ class Event < ActiveRecord::Base
   end
 
   def visible_to_user?(user = nil)
-    if push?
-      true
+    if push? || commit_note?
+      Ability.allowed?(user, :download_code, project)
     elsif membership_changed?
       true
     elsif created_project?
@@ -282,7 +278,7 @@ class Event < ActiveRecord::Base
   end
 
   def commit_note?
-    target.for_commit?
+    note? && target && target.for_commit?
   end
 
   def issue_note?
@@ -294,7 +290,7 @@ class Event < ActiveRecord::Base
   end
 
   def project_snippet_note?
-    target.for_snippet?
+    note? && target && target.for_snippet?
   end
 
   def note_target
@@ -352,6 +348,10 @@ class Event < ActiveRecord::Base
       update_all(last_activity_at: created_at)
   end
 
+  def authored_by?(user)
+    user ? author_id == user.id : false
+  end
+
   private
 
   def recent_update?
diff --git a/app/models/external_issue.rb b/app/models/external_issue.rb
index fd9a8c1b8b7..e63f89a9f85 100644
--- a/app/models/external_issue.rb
+++ b/app/models/external_issue.rb
@@ -24,17 +24,31 @@ class ExternalIssue
   def ==(other)
     other.is_a?(self.class) && (to_s == other.to_s)
   end
+  alias_method :eql?, :==
+
+  def hash
+    [self.class, to_s].hash
+  end
 
   def project
     @project
   end
 
-  def to_reference(_from_project = nil)
+  def project_id
+    @project.id
+  end
+
+  # Pattern used to extract `JIRA-123` issue references from text
+  def self.reference_pattern
+    @reference_pattern ||= %r{(?<issue>\b([A-Z][A-Z0-9_]+-)\d+)}
+  end
+
+  def to_reference(_from_project = nil, full: nil)
     id
   end
 
   def reference_link_text(from_project = nil)
-    return "##{id}" if /^\d+$/.match(id)
+    return "##{id}" if id =~ /^\d+$/
 
     id
   end
diff --git a/app/models/forked_project_link.rb b/app/models/forked_project_link.rb
index 9803bae0bee..36cf7ad6a28 100644
--- a/app/models/forked_project_link.rb
+++ b/app/models/forked_project_link.rb
@@ -1,4 +1,4 @@
 class ForkedProjectLink < ActiveRecord::Base
-  belongs_to :forked_to_project, class_name: Project
-  belongs_to :forked_from_project, class_name: Project
+  belongs_to :forked_to_project, class_name: 'Project'
+  belongs_to :forked_from_project, class_name: 'Project'
 end
diff --git a/app/models/generic_commit_status.rb b/app/models/generic_commit_status.rb
index fa54e3540d0..8867ba0d2ff 100644
--- a/app/models/generic_commit_status.rb
+++ b/app/models/generic_commit_status.rb
@@ -1,6 +1,10 @@
 class GenericCommitStatus < CommitStatus
   before_validation :set_default_values
 
+  validates :target_url, addressable_url: true,
+                         length: { maximum: 255 },
+                         allow_nil: true
+
   # GitHub compatible API
   alias_attribute :context, :name
 
@@ -12,4 +16,10 @@ class GenericCommitStatus < CommitStatus
   def tags
     [:external]
   end
+
+  def detailed_status(current_user)
+    Gitlab::Ci::Status::External::Factory
+      .new(self, current_user)
+      .fabricate!
+  end
 end
diff --git a/app/models/global_milestone.rb b/app/models/global_milestone.rb
index cde4a568577..0afbca2cb32 100644
--- a/app/models/global_milestone.rb
+++ b/app/models/global_milestone.rb
@@ -1,6 +1,8 @@
 class GlobalMilestone
   include Milestoneish
 
+  EPOCH = DateTime.parse('1970-01-01')
+
   attr_accessor :title, :milestones
   alias_attribute :name, :title
 
@@ -8,15 +10,46 @@ class GlobalMilestone
     @first_milestone
   end
 
-  def self.build_collection(milestones)
-    milestones = milestones.group_by(&:title)
+  def self.build_collection(projects, params)
+    child_milestones = MilestonesFinder.new.execute(projects, params)
 
-    milestones.map do |title, milestones|
-      milestones_relation = Milestone.where(id: milestones.map(&:id))
+    milestones = child_milestones.select(:id, :title).group_by(&:title).map do |title, grouped|
+      milestones_relation = Milestone.where(id: grouped.map(&:id))
       new(title, milestones_relation)
     end
+
+    milestones.sort_by { |milestone| milestone.due_date || EPOCH }
+  end
+
+  def self.build(projects, title)
+    child_milestones = Milestone.of_projects(projects).where(title: title)
+    return if child_milestones.blank?
+
+    new(title, child_milestones)
   end
 
+  def self.states_count(projects)
+    relation = MilestonesFinder.new.execute(projects, state: 'all')
+    milestones_by_state_and_title = relation.reorder(nil).group(:state, :title).count
+
+    opened = count_by_state(milestones_by_state_and_title, 'active')
+    closed = count_by_state(milestones_by_state_and_title, 'closed')
+    all = milestones_by_state_and_title.map { |(_, title), _| title }.uniq.count
+
+    { 
+      opened: opened,
+      closed: closed,
+      all: all
+    }
+  end
+
+  def self.count_by_state(milestones_by_state_and_title, state)
+    milestones_by_state_and_title.count do |(milestone_state, _), _|
+      milestone_state == state
+    end
+  end
+  private_class_method :count_by_state
+
   def initialize(title, milestones)
     @title = title
     @name = title
@@ -24,30 +57,24 @@ class GlobalMilestone
     @first_milestone = milestones.find {|m| m.description.present? } || milestones.first
   end
 
-  def safe_title
-    @title.to_slug.normalize.to_s
+  def milestoneish_ids
+    milestones.select(:id)
   end
 
-  def expired?
-    if due_date
-      due_date.past?
-    else
-      false
-    end
+  def safe_title
+    @title.to_slug.normalize.to_s
   end
 
   def projects
-    @projects ||= Project.for_milestones(milestones.select(:id))
+    @projects ||= Project.for_milestones(milestoneish_ids)
   end
 
   def state
-    state = milestones.map { |milestone| milestone.state }
-
-    if state.count('closed') == state.size
-      'closed'
-    else
-      'active'
+    milestones.each do |milestone|
+      return 'active' if milestone.state != 'closed'
     end
+
+    'closed'
   end
 
   def active?
@@ -59,11 +86,11 @@ class GlobalMilestone
   end
 
   def issues
-    @issues ||= Issue.of_milestones(milestones.select(:id)).includes(:project, :assignee, :labels)
+    @issues ||= Issue.of_milestones(milestoneish_ids).includes(:project, :assignee, :labels)
   end
 
   def merge_requests
-    @merge_requests ||= MergeRequest.of_milestones(milestones.select(:id)).includes(:target_project, :assignee, :labels)
+    @merge_requests ||= MergeRequest.of_milestones(milestoneish_ids).includes(:target_project, :assignee, :labels)
   end
 
   def participants
@@ -81,18 +108,15 @@ class GlobalMilestone
     @due_date =
       if @milestones.all? { |x| x.due_date == @milestones.first.due_date }
         @milestones.first.due_date
-      else
-        nil
       end
   end
 
-  def expires_at
-    if due_date
-      if due_date.past?
-        "expired on #{due_date.to_s(:medium)}"
-      else
-        "expires on #{due_date.to_s(:medium)}"
+  def start_date
+    return @start_date if defined?(@start_date)
+
+    @start_date =
+      if @milestones.all? { |x| x.start_date == @milestones.first.start_date }
+        @milestones.first.start_date
       end
-    end
   end
 end
diff --git a/app/models/group.rb b/app/models/group.rb
index d9e90cd256a..60274386103 100644
--- a/app/models/group.rb
+++ b/app/models/group.rb
@@ -5,6 +5,7 @@ class Group < Namespace
   include Gitlab::VisibilityLevel
   include AccessRequestable
   include Referable
+  include SelectForProjectAuthorization
 
   has_many :group_members, -> { where(requested_at: nil) }, dependent: :destroy, as: :source
   alias_method :members, :group_members
@@ -27,6 +28,7 @@ class Group < Namespace
   validates :avatar, file_size: { maximum: 200.kilobytes.to_i }
 
   mount_uploader :avatar, AvatarUploader
+  has_many :uploads, as: :model, dependent: :destroy
 
   after_create :post_create_hook
   after_destroy :post_destroy_hook
@@ -47,7 +49,13 @@ class Group < Namespace
     end
 
     def sort(method)
-      order_by(method)
+      if method == 'storage_size_desc'
+        # storage_size is a virtual column so we need to
+        # pass a string to avoid AR adding the table name
+        reorder('storage_size DESC, namespaces.id DESC')
+      else
+        order_by(method)
+      end
     end
 
     def reference_prefix
@@ -61,10 +69,20 @@ class Group < Namespace
     def visible_to_user(user)
       where(id: user.authorized_groups.select(:id).reorder(nil))
     end
+
+    def select_for_project_authorization
+      if current_scope.joins_values.include?(:shared_projects)
+        joins('INNER JOIN namespaces project_namespace ON project_namespace.id = projects.namespace_id')
+          .where('project_namespace.share_with_group_lock = ?',  false)
+          .select("members.user_id, projects.id AS project_id, LEAST(project_group_links.group_access, members.access_level) AS access_level")
+      else
+        super
+      end
+    end
   end
 
-  def to_reference(_from_project = nil)
-    "#{self.class.reference_prefix}#{name}"
+  def to_reference(_from_project = nil, full: nil)
+    "#{self.class.reference_prefix}#{full_path}"
   end
 
   def web_url
@@ -72,11 +90,11 @@ class Group < Namespace
   end
 
   def human_name
-    name
+    full_name
   end
 
   def visibility_level_field
-    visibility_level
+    :visibility_level
   end
 
   def visibility_level_allowed_by_projects
@@ -144,15 +162,17 @@ class Group < Namespace
   end
 
   def has_owner?(user)
-    owners.include?(user)
+    members_with_parents.owners.where(user_id: user).any?
   end
 
   def has_master?(user)
-    members.masters.where(user_id: user).any?
+    members_with_parents.masters.where(user_id: user).any?
   end
 
+  # Check if user is a last owner of the group.
+  # Parent owners are ignored for nested groups.
   def last_owner?(user)
-    has_owner?(user) && owners.size == 1
+    owners.include?(user) && owners.size == 1
   end
 
   def avatar_type
@@ -176,4 +196,31 @@ class Group < Namespace
   def system_hook_service
     SystemHooksService.new
   end
+
+  def refresh_members_authorized_projects
+    UserProjectAccessChangedService.new(user_ids_for_project_authorizations).
+      execute
+  end
+
+  def user_ids_for_project_authorizations
+    users_with_parents.pluck(:id)
+  end
+
+  def members_with_parents
+    GroupMember.non_request.where(source_id: ancestors.pluck(:id).push(id))
+  end
+
+  def users_with_parents
+    User.where(id: members_with_parents.select(:user_id))
+  end
+
+  def mattermost_team_params
+    max_length = 59
+
+    {
+      name: path[0..max_length],
+      display_name: name[0..max_length],
+      type: public? ? 'O' : 'I' # Open vs Invite-only
+    }
+  end
 end
diff --git a/app/models/group_label.rb b/app/models/group_label.rb
index 68841ace2e6..92c83b54861 100644
--- a/app/models/group_label.rb
+++ b/app/models/group_label.rb
@@ -8,8 +8,4 @@ class GroupLabel < Label
   def subject_foreign_key
     'group_id'
   end
-
-  def to_reference(source_project = nil, target_project = nil, format: :id)
-    super(source_project, target_project, format: format)
-  end
 end
diff --git a/app/models/group_milestone.rb b/app/models/group_milestone.rb
new file mode 100644
index 00000000000..86d38e5468b
--- /dev/null
+++ b/app/models/group_milestone.rb
@@ -0,0 +1,19 @@
+class GroupMilestone < GlobalMilestone
+  attr_accessor :group
+
+  def self.build_collection(group, projects, params)
+    super(projects, params).each do |milestone|
+      milestone.group = group
+    end
+  end
+
+  def self.build(group, projects, title)
+    super(projects, title).tap do |milestone|
+      milestone&.group = group
+    end
+  end
+
+  def issues_finder_params
+    { group_id: group.id }
+  end
+end
diff --git a/app/models/guest.rb b/app/models/guest.rb
new file mode 100644
index 00000000000..df287c277a7
--- /dev/null
+++ b/app/models/guest.rb
@@ -0,0 +1,7 @@
+class Guest
+  class << self
+    def can?(action, subject = :global)
+      Ability.allowed?(nil, action, subject)
+    end
+  end
+end
diff --git a/app/models/issue.rb b/app/models/issue.rb
index 4f02b02c488..10a5d9d2a24 100644
--- a/app/models/issue.rb
+++ b/app/models/issue.rb
@@ -7,6 +7,7 @@ class Issue < ActiveRecord::Base
   include Sortable
   include Spammable
   include FasterCacheKeys
+  include RelativePositioning
 
   DueDateStruct = Struct.new(:title, :name).freeze
   NoDueDate     = DueDateStruct.new('No Due Date', '0').freeze
@@ -15,8 +16,6 @@ class Issue < ActiveRecord::Base
   DueThisWeek   = DueDateStruct.new('Due This Week', 'week').freeze
   DueThisMonth  = DueDateStruct.new('Due This Month', 'month').freeze
 
-  ActsAsTaggableOn.strict_case_match = true
-
   belongs_to :project
   belongs_to :moved_to, class_name: 'Issue'
 
@@ -39,6 +38,8 @@ class Issue < ActiveRecord::Base
 
   scope :created_after, -> (datetime) { where("created_at >= ?", datetime) }
 
+  scope :include_associations, -> { includes(:assignee, :labels, project: :namespace) }
+
   attr_spammable :title, spam_title: true
   attr_spammable :description, spam_description: true
 
@@ -54,65 +55,24 @@ class Issue < ActiveRecord::Base
     state :opened
     state :reopened
     state :closed
-  end
 
-  def hook_attrs
-    attributes
-  end
+    before_transition any => :closed do |issue|
+      issue.closed_at = Time.zone.now
+    end
 
-  class << self
-    private
-
-    # Returns the project that the current scope belongs to if any, nil otherwise.
-    #
-    # Examples:
-    # - my_project.issues.without_due_date.owner_project => my_project
-    # - Issue.all.owner_project => nil
-    def owner_project
-      # No owner if we're not being called from an association
-      return unless all.respond_to?(:proxy_association)
-
-      owner = all.proxy_association.owner
-
-      # Check if the association is or belongs to a project
-      if owner.is_a?(Project)
-        owner
-      else
-        begin
-          owner.association(:project).target
-        rescue ActiveRecord::AssociationNotFoundError
-          nil
-        end
-      end
+    before_transition closed: any do |issue|
+      issue.closed_at = nil
     end
   end
 
-  def self.visible_to_user(user)
-    return where('issues.confidential IS NULL OR issues.confidential IS FALSE') if user.blank?
-    return all if user.admin?
-
-    # Check if we are scoped to a specific project's issues
-    if owner_project
-      if owner_project.authorized_for_user?(user, Gitlab::Access::REPORTER)
-        # If the project is authorized for the user, they can see all issues in the project
-        return all
-      else
-        # else only non confidential and authored/assigned to them
-        return where('issues.confidential IS NULL OR issues.confidential IS FALSE
-          OR issues.author_id = :user_id OR issues.assignee_id = :user_id',
-          user_id: user.id)
-      end
-    end
+  def hook_attrs
+    attrs = {
+      total_time_spent: total_time_spent,
+      human_total_time_spent: human_total_time_spent,
+      human_time_estimate: human_time_estimate
+    }
 
-    where('
-      issues.confidential IS NULL
-      OR issues.confidential IS FALSE
-      OR (issues.confidential = TRUE
-        AND (issues.author_id = :user_id
-          OR issues.assignee_id = :user_id
-          OR issues.project_id IN(:project_ids)))',
-      user_id: user.id,
-      project_ids: user.authorized_projects(Gitlab::Access::REPORTER).select(:id))
+    attributes.merge!(attrs)
   end
 
   def self.reference_prefix
@@ -150,14 +110,18 @@ class Issue < ActiveRecord::Base
     end
   end
 
-  def to_reference(from_project = nil)
-    reference = "#{self.class.reference_prefix}#{iid}"
+  def self.order_by_position_and_priority
+    order_labels_priority.
+      reorder(Gitlab::Database.nulls_last_order('relative_position', 'ASC'),
+              Gitlab::Database.nulls_last_order('highest_priority', 'ASC'),
+              "id DESC")
+  end
 
-    if cross_project_reference?(from_project)
-      reference = project.to_reference + reference
-    end
+  # `from` argument can be a Namespace or Project.
+  def to_reference(from = nil, full: false)
+    reference = "#{self.class.reference_prefix}#{iid}"
 
-    reference
+    "#{project.to_reference(from, full: full)}#{reference}"
   end
 
   def referenced_merge_requests(current_user = nil)
@@ -182,18 +146,6 @@ class Issue < ActiveRecord::Base
     branches_with_iid - branches_with_merge_request
   end
 
-  # Reset issue events cache
-  #
-  # Since we do cache @event we need to reset cache in special cases:
-  # * when an issue is updated
-  # Events cache stored like  events/23-20130109142513.
-  # The cache key includes updated_at timestamp.
-  # Thus it will automatically generate a new fragment
-  # when the event is updated because the key changes.
-  def reset_events_cache
-    Event.reset_event_cache_for(self)
-  end
-
   # To allow polymorphism with MergeRequest.
   def source_project
     project
@@ -250,10 +202,40 @@ class Issue < ActiveRecord::Base
   # Returns `true` if the current issue can be viewed by either a logged in User
   # or an anonymous user.
   def visible_to_user?(user = nil)
+    return false unless project.feature_available?(:issues, user)
+
     user ? readable_by?(user) : publicly_visible?
   end
 
+  def overdue?
+    due_date.try(:past?) || false
+  end
+
+  def check_for_spam?
+    project.public? && (title_changed? || description_changed?)
+  end
+
+  def as_json(options = {})
+    super(options).tap do |json|
+      json[:subscribed] = subscribed?(options[:user], project) if options.has_key?(:user) && options[:user]
+
+      if options.has_key?(:labels)
+        json[:labels] = labels.as_json(
+          project: project,
+          only: [:id, :title, :description, :color, :priority],
+          methods: [:text_color]
+        )
+      end
+    end
+  end
+
+  private
+
   # Returns `true` if the given User can read the current Issue.
+  #
+  # This method duplicates the same check of issue_policy.rb
+  # for performance reasons, check commit: 002ad215818450d2cbbc5fa065850a953dc7ada8
+  # Make sure to sync this method with issue_policy.rb
   def readable_by?(user)
     if user.admin?
       true
@@ -274,27 +256,4 @@ class Issue < ActiveRecord::Base
   def publicly_visible?
     project.public? && !confidential?
   end
-
-  def overdue?
-    due_date.try(:past?) || false
-  end
-
-  # Only issues on public projects should be checked for spam
-  def check_for_spam?
-    project.public?
-  end
-
-  def as_json(options = {})
-    super(options).tap do |json|
-      json[:subscribed] = subscribed?(options[:user]) if options.has_key?(:user)
-
-      if options.has_key?(:labels)
-        json[:labels] = labels.as_json(
-          project: project,
-          only: [:id, :title, :description, :color, :priority],
-          methods: [:text_color]
-        )
-      end
-    end
-  end
 end
diff --git a/app/models/issue_collection.rb b/app/models/issue_collection.rb
new file mode 100644
index 00000000000..f0b7d9914c8
--- /dev/null
+++ b/app/models/issue_collection.rb
@@ -0,0 +1,42 @@
+# IssueCollection can be used to reduce a list of issues down to a subset.
+#
+# IssueCollection is not meant to be some sort of Enumerable, instead it's meant
+# to take a list of issues and return a new list of issues based on some
+# criteria. For example, given a list of issues you may want to return a list of
+# issues that can be read or updated by a given user.
+class IssueCollection
+  attr_reader :collection
+
+  def initialize(collection)
+    @collection = collection
+  end
+
+  # Returns all the issues that can be updated by the user.
+  def updatable_by_user(user)
+    return collection if user.admin?
+
+    # Given all the issue projects we get a list of projects that the current
+    # user has at least reporter access to.
+    projects_with_reporter_access = user.
+      projects_with_reporter_access_limited_to(project_ids).
+      pluck(:id)
+
+    collection.select do |issue|
+      if projects_with_reporter_access.include?(issue.project_id)
+        true
+      elsif issue.is_a?(Issue)
+        issue.assignee_or_author?(user)
+      else
+        false
+      end
+    end
+  end
+
+  alias_method :visible_to, :updatable_by_user
+
+  private
+
+  def project_ids
+    @project_ids ||= collection.map(&:project_id).uniq
+  end
+end
diff --git a/app/models/key.rb b/app/models/key.rb
index 568a60b8af3..9c74ca84753 100644
--- a/app/models/key.rb
+++ b/app/models/key.rb
@@ -4,14 +4,24 @@ class Key < ActiveRecord::Base
   include AfterCommitQueue
   include Sortable
 
-  belongs_to :user
+  LAST_USED_AT_REFRESH_TIME = 1.day.to_i
 
-  before_validation :strip_white_space, :generate_fingerprint
+  belongs_to :user
 
-  validates :title, presence: true, length: { within: 0..255 }
-  validates :key, presence: true, length: { within: 0..5000 }, format: { with: /\A(ssh|ecdsa)-.*\Z/ }
-  validates :key, format: { without: /\n|\r/, message: 'should be a single line' }
-  validates :fingerprint, uniqueness: true, presence: { message: 'cannot be generated' }
+  before_validation :generate_fingerprint
+
+  validates :title,
+    presence: true,
+    length: { maximum: 255 }
+  validates :key,
+    presence: true,
+    length: { maximum: 5000 },
+    format: { with: /\A(ssh|ecdsa)-.*\Z/ }
+  validates :key,
+    format: { without: /\n|\r/, message: 'should be a single line' }
+  validates :fingerprint,
+    uniqueness: true,
+    presence: { message: 'cannot be generated' }
 
   delegate :name, :email, to: :user, prefix: true
 
@@ -21,8 +31,9 @@ class Key < ActiveRecord::Base
   after_destroy :remove_from_shell
   after_destroy :post_destroy_hook
 
-  def strip_white_space
-    self.key = key.strip unless key.blank?
+  def key=(value)
+    value.strip! unless value.blank?
+    write_attribute(:key, value)
   end
 
   def publishable_key
@@ -40,6 +51,13 @@ class Key < ActiveRecord::Base
     "key-#{id}"
   end
 
+  def update_last_used_at
+    lease = Gitlab::ExclusiveLease.new("key_update_last_used_at:#{id}", timeout: LAST_USED_AT_REFRESH_TIME)
+    return unless lease.try_obtain
+
+    UseKeyWorker.perform_async(id)
+  end
+
   def add_to_shell
     GitlabShellWorker.perform_async(
       :add_key,
@@ -48,10 +66,6 @@ class Key < ActiveRecord::Base
     )
   end
 
-  def notify_user
-    run_after_commit { NotificationService.new.new_key(self) }
-  end
-
   def post_create_hook
     SystemHooksService.new.execute_hooks_for(self, :create)
   end
@@ -77,4 +91,8 @@ class Key < ActiveRecord::Base
 
     self.fingerprint = Gitlab::KeyFingerprint.new(self.key).fingerprint
   end
+
+  def notify_user
+    run_after_commit { NotificationService.new.new_key(self) }
+  end
 end
diff --git a/app/models/label.rb b/app/models/label.rb
index d9287f2dc29..568fa6d44f5 100644
--- a/app/models/label.rb
+++ b/app/models/label.rb
@@ -11,7 +11,7 @@ class Label < ActiveRecord::Base
 
   cache_markdown_field :description, pipeline: :single_line
 
-  DEFAULT_COLOR = '#428BCA'
+  DEFAULT_COLOR = '#428BCA'.freeze
 
   default_value_for :color, DEFAULT_COLOR
 
@@ -26,6 +26,7 @@ class Label < ActiveRecord::Base
   # Don't allow ',' for label titles
   validates :title, presence: true, format: { with: /\A[^,]+\z/ }
   validates :title, uniqueness: { scope: [:group_id, :project_id] }
+  validates :title, length: { maximum: 255 }
 
   default_scope { order(title: :asc) }
 
@@ -144,18 +145,19 @@ class Label < ActiveRecord::Base
   #
   # Examples:
   #
-  #   Label.first.to_reference                     # => "~1"
-  #   Label.first.to_reference(format: :name)      # => "~\"bug\""
-  #   Label.first.to_reference(project1, project2) # => "gitlab-org/gitlab-ce~1"
+  #   Label.first.to_reference                                     # => "~1"
+  #   Label.first.to_reference(format: :name)                      # => "~\"bug\""
+  #   Label.first.to_reference(project, target_project: same_namespace_project)    # => "gitlab-ce~1"
+  #   Label.first.to_reference(project, target_project: another_namespace_project) # => "gitlab-org/gitlab-ce~1"
   #
   # Returns a String
   #
-  def to_reference(source_project = nil, target_project = nil, format: :id)
+  def to_reference(from_project = nil, target_project: nil, format: :id, full: false)
     format_reference = label_format_reference(format)
     reference = "#{self.class.reference_prefix}#{format_reference}"
 
-    if cross_project_reference?(source_project, target_project)
-      source_project.to_reference + reference
+    if from_project
+      "#{from_project.to_reference(target_project, full: full)}#{reference}"
     else
       reference
     end
@@ -167,12 +169,12 @@ class Label < ActiveRecord::Base
     end
   end
 
-  private
-
-  def cross_project_reference?(source_project, target_project)
-    source_project && target_project && source_project != target_project
+  def hook_attrs
+    attributes
   end
 
+  private
+
   def issues_count(user, params = {})
     params.merge!(subject_foreign_key => subject.id, label_name: title, scope: 'all')
     IssuesFinder.new(user, params.with_indifferent_access).execute.count
diff --git a/app/models/lfs_objects_project.rb b/app/models/lfs_objects_project.rb
index 0fd5f089db9..007eed5600a 100644
--- a/app/models/lfs_objects_project.rb
+++ b/app/models/lfs_objects_project.rb
@@ -5,4 +5,13 @@ class LfsObjectsProject < ActiveRecord::Base
   validates :lfs_object_id, presence: true
   validates :lfs_object_id, uniqueness: { scope: [:project_id], message: "already exists in project" }
   validates :project_id, presence: true
+
+  after_create :update_project_statistics
+  after_destroy :update_project_statistics
+
+  private
+
+  def update_project_statistics
+    ProjectCacheWorker.perform_async(project_id, [], [:lfs_objects_size])
+  end
 end
diff --git a/app/models/list.rb b/app/models/list.rb
index 065d75bd1dc..fbd19acd1f5 100644
--- a/app/models/list.rb
+++ b/app/models/list.rb
@@ -2,7 +2,7 @@ class List < ActiveRecord::Base
   belongs_to :board
   belongs_to :label
 
-  enum list_type: { backlog: 0, label: 1, done: 2 }
+  enum list_type: { label: 1, closed: 2 }
 
   validates :board, :list_type, presence: true
   validates :label, :position, presence: true, if: :label?
diff --git a/app/models/member.rb b/app/models/member.rb
index b89ba8ecbb8..0545bd4eedf 100644
--- a/app/models/member.rb
+++ b/app/models/member.rb
@@ -10,6 +10,8 @@ class Member < ActiveRecord::Base
   belongs_to :user
   belongs_to :source, polymorphic: true
 
+  delegate :name, :username, :email, to: :user, prefix: true
+
   validates :user, presence: true, unless: :invite?
   validates :source, presence: true
   validates :user_id, uniqueness: { scope: [:source_type, :source_id],
@@ -47,6 +49,7 @@ class Member < ActiveRecord::Base
   scope :invite, -> { where.not(invite_token: nil) }
   scope :non_invite, -> { where(invite_token: nil) }
   scope :request, -> { where.not(requested_at: nil) }
+  scope :non_request, -> { where(requested_at: nil) }
 
   scope :has_access, -> { active.where('access_level > 0') }
 
@@ -57,6 +60,11 @@ class Member < ActiveRecord::Base
   scope :owners,  -> { active.where(access_level: OWNER) }
   scope :owners_and_masters,  -> { active.where(access_level: [OWNER, MASTER]) }
 
+  scope :order_name_asc, -> { left_join_users.reorder(Gitlab::Database.nulls_last_order('users.name', 'ASC')) }
+  scope :order_name_desc, -> { left_join_users.reorder(Gitlab::Database.nulls_last_order('users.name', 'DESC')) }
+  scope :order_recent_sign_in, -> { left_join_users.reorder(Gitlab::Database.nulls_last_order('users.last_sign_in_at', 'DESC')) }
+  scope :order_oldest_sign_in, -> { left_join_users.reorder(Gitlab::Database.nulls_last_order('users.last_sign_in_at', 'ASC')) }
+
   before_validation :generate_invite_token, on: :create, if: -> (member) { member.invite_email.present? }
 
   after_create :send_invite, if: :invite?, unless: :importing?
@@ -65,12 +73,39 @@ class Member < ActiveRecord::Base
   after_create :post_create_hook, unless: [:pending?, :importing?]
   after_update :post_update_hook, unless: [:pending?, :importing?]
   after_destroy :post_destroy_hook, unless: :pending?
-
-  delegate :name, :username, :email, to: :user, prefix: true
+  after_commit :refresh_member_authorized_projects
 
   default_value_for :notification_level, NotificationSetting.levels[:global]
 
   class << self
+    def search(query)
+      joins(:user).merge(User.search(query))
+    end
+
+    def sort(method)
+      case method.to_s
+      when 'access_level_asc' then reorder(access_level: :asc)
+      when 'access_level_desc' then reorder(access_level: :desc)
+      when 'recent_sign_in' then order_recent_sign_in
+      when 'oldest_sign_in' then order_oldest_sign_in
+      when 'last_joined' then order_created_desc
+      when 'oldest_joined' then order_created_asc
+      else
+        order_by(method)
+      end
+    end
+
+    def left_join_users
+      users = User.arel_table
+      members = Member.arel_table
+
+      member_users = members.join(users, Arel::Nodes::OuterJoin).
+                             on(members[:user_id].eq(users[:id])).
+                             join_sources
+
+      joins(member_users)
+    end
+
     def access_for_user_ids(user_ids)
       where(user_id: user_ids).has_access.pluck(:user_id, :access_level).to_h
     end
@@ -88,8 +123,8 @@ class Member < ActiveRecord::Base
       member =
         if user.is_a?(User)
           source.members.find_by(user_id: user.id) ||
-          source.requesters.find_by(user_id: user.id) ||
-          source.members.build(user_id: user.id)
+            source.requesters.find_by(user_id: user.id) ||
+            source.members.build(user_id: user.id)
         else
           source.members.build(invite_email: user)
         end
@@ -243,13 +278,28 @@ class Member < ActiveRecord::Base
   end
 
   def post_update_hook
-    # override in subclass
+    # override in sub class
   end
 
   def post_destroy_hook
     system_hook_service.execute_hooks_for(self, :destroy)
   end
 
+  # Refreshes authorizations of the current member.
+  #
+  # This method schedules a job using Sidekiq and as such **must not** be called
+  # in a transaction. Doing so can lead to the job running before the
+  # transaction has been committed, resulting in the job either throwing an
+  # error or not doing any meaningful work.
+  def refresh_member_authorized_projects
+    # If user/source is being destroyed, project access are going to be
+    # destroyed eventually because of DB foreign keys, so we shouldn't bother
+    # with refreshing after each member is destroyed through association
+    return if destroyed_by_association.present?
+
+    UserProjectAccessChangedService.new(user_id).execute
+  end
+
   def after_accept_invite
     post_create_hook
   end
diff --git a/app/models/members/group_member.rb b/app/models/members/group_member.rb
index 204f34f0269..446f9f8f8a7 100644
--- a/app/models/members/group_member.rb
+++ b/app/models/members/group_member.rb
@@ -1,11 +1,11 @@
 class GroupMember < Member
-  SOURCE_TYPE = 'Namespace'
+  SOURCE_TYPE = 'Namespace'.freeze
 
   belongs_to :group, foreign_key: 'source_id'
 
   # Make sure group member points only to group as it source
   default_value_for :source_type, SOURCE_TYPE
-  validates_format_of :source_type, with: /\ANamespace\z/
+  validates :source_type, format: { with: /\ANamespace\z/ }
   default_scope { where(source_type: SOURCE_TYPE) }
 
   def self.access_level_roles
diff --git a/app/models/members/project_member.rb b/app/models/members/project_member.rb
index 008fff0857c..912820b51ac 100644
--- a/app/models/members/project_member.rb
+++ b/app/models/members/project_member.rb
@@ -1,5 +1,5 @@
 class ProjectMember < Member
-  SOURCE_TYPE = 'Project'
+  SOURCE_TYPE = 'Project'.freeze
 
   include Gitlab::ShellAdapter
 
@@ -7,7 +7,7 @@ class ProjectMember < Member
 
   # Make sure project member points only to project as it source
   default_value_for :source_type, SOURCE_TYPE
-  validates_format_of :source_type, with: /\AProject\z/
+  validates :source_type, format: { with: /\AProject\z/ }
   validates :access_level, inclusion: { in: Gitlab::Access.values }
   default_scope { where(source_type: SOURCE_TYPE) }
 
diff --git a/app/models/merge_request.rb b/app/models/merge_request.rb
index d76feb9680e..5ff83944d8c 100644
--- a/app/models/merge_request.rb
+++ b/app/models/merge_request.rb
@@ -22,7 +22,8 @@ class MergeRequest < ActiveRecord::Base
   after_create :ensure_merge_request_diff, unless: :importing?
   after_update :reload_diff_if_branch_changed
 
-  delegate :commits, :real_size, to: :merge_request_diff, prefix: nil
+  delegate :commits, :real_size, :commits_sha, :commits_count,
+    to: :merge_request_diff, prefix: nil
 
   # When this attribute is true some MR validation is ignored
   # It allows us to close or modify broken merge requests
@@ -96,11 +97,13 @@ class MergeRequest < ActiveRecord::Base
   validates :source_branch, presence: true
   validates :target_project, presence: true
   validates :target_branch, presence: true
-  validates :merge_user, presence: true, if: :merge_when_build_succeeds?
+  validates :merge_user, presence: true, if: :merge_when_pipeline_succeeds?, unless: :importing?
   validate :validate_branches, unless: [:allow_broken, :importing?, :closed_without_fork?]
   validate :validate_fork, unless: :closed_without_fork?
 
-  scope :by_branch, ->(branch_name) { where("(source_branch LIKE :branch) OR (target_branch LIKE :branch)", branch: branch_name) }
+  scope :by_source_or_target_branch, ->(branch_name) do
+    where("source_branch = :branch OR target_branch = :branch", branch: branch_name)
+  end
   scope :cared, ->(user) { where('assignee_id = :user OR author_id = :user', user: user.id) }
   scope :by_milestone, ->(milestone) { where(milestone_id: milestone) }
   scope :of_projects, ->(ids) { where(target_project_id: ids) }
@@ -151,8 +154,10 @@ class MergeRequest < ActiveRecord::Base
   #
   # Returns an ActiveRecord::Relation.
   def self.in_projects(relation)
-    source = where(source_project_id: relation).select(:id)
-    target = where(target_project_id: relation).select(:id)
+    # unscoping unnecessary conditions that'll be applied
+    # when executing `where("merge_requests.id IN (#{union.to_sql})")`
+    source = unscoped.where(source_project_id: relation).select(:id)
+    target = unscoped.where(target_project_id: relation).select(:id)
     union  = Gitlab::SQL::Union.new([source, target])
 
     where("merge_requests.id IN (#{union.to_sql})")
@@ -172,14 +177,11 @@ class MergeRequest < ActiveRecord::Base
     work_in_progress?(title) ? title : "WIP: #{title}"
   end
 
-  def to_reference(from_project = nil)
+  # `from` argument can be a Namespace or Project.
+  def to_reference(from = nil, full: false)
     reference = "#{self.class.reference_prefix}#{iid}"
 
-    if cross_project_reference?(from_project)
-      reference = project.to_reference + reference
-    end
-
-    reference
+    "#{project.to_reference(from, full: full)}#{reference}"
   end
 
   def first_commit
@@ -199,7 +201,13 @@ class MergeRequest < ActiveRecord::Base
   end
 
   def diff_size
-    diffs(diff_options).size
+    # The `#diffs` method ends up at an instance of a class inheriting from
+    # `Gitlab::Diff::FileCollection::Base`, so use those options as defaults
+    # here too, to get the same diff size without performing highlighting.
+    #
+    opts = Gitlab::Diff::FileCollection::Base.default_options.merge(diff_options || {})
+
+    raw_diffs(opts).size
   end
 
   def diff_base_commit
@@ -220,7 +228,7 @@ class MergeRequest < ActiveRecord::Base
   # true base commit, so we can't simply have `#diff_base_commit` fall back on
   # this method.
   def likely_diff_base_commit
-    first_commit.parent || first_commit
+    first_commit.try(:parent) || first_commit
   end
 
   def diff_start_commit
@@ -430,7 +438,7 @@ class MergeRequest < ActiveRecord::Base
     true
   end
 
-  def can_cancel_merge_when_build_succeeds?(current_user)
+  def can_cancel_merge_when_pipeline_succeeds?(current_user)
     can_be_merged_by?(current_user) || self.author == current_user
   end
 
@@ -453,7 +461,7 @@ class MergeRequest < ActiveRecord::Base
     should_remove_source_branch? || force_remove_source_branch?
   end
 
-  def mr_and_commit_notes
+  def related_notes
     # Fetch comments only from last 100 commits
     commits_for_notes_limit = 100
     commit_ids = commits.last(commits_for_notes_limit).map(&:id)
@@ -469,7 +477,7 @@ class MergeRequest < ActiveRecord::Base
   end
 
   def discussions
-    @discussions ||= self.mr_and_commit_notes.
+    @discussions ||= self.related_notes.
       inc_relations_for_view.
       fresh.
       discussions
@@ -479,6 +487,14 @@ class MergeRequest < ActiveRecord::Base
     @diff_discussions ||= self.notes.diff_notes.discussions
   end
 
+  def resolvable_discussions
+    @resolvable_discussions ||= diff_discussions.select(&:to_be_resolved?)
+  end
+
+  def discussions_can_be_resolved_by?(user)
+    resolvable_discussions.all? { |discussion| discussion.can_resolve?(user) }
+  end
+
   def find_diff_discussion(discussion_id)
     notes = self.notes.diff_notes.where(discussion_id: discussion_id).fresh.to_a
     return if notes.empty?
@@ -494,10 +510,14 @@ class MergeRequest < ActiveRecord::Base
     discussions_resolvable? && diff_discussions.none?(&:to_be_resolved?)
   end
 
+  def discussions_to_be_resolved?
+    discussions_resolvable? && !discussions_resolved?
+  end
+
   def mergeable_discussions_state?
     return true unless project.only_allow_merge_if_all_discussions_are_resolved?
 
-    discussions_resolved?
+    !discussions_to_be_resolved?
   end
 
   def hook_attrs
@@ -505,11 +525,14 @@ class MergeRequest < ActiveRecord::Base
       source: source_project.try(:hook_attrs),
       target: target_project.hook_attrs,
       last_commit: nil,
-      work_in_progress: work_in_progress?
+      work_in_progress: work_in_progress?,
+      total_time_spent: total_time_spent,
+      human_total_time_spent: human_total_time_spent,
+      human_time_estimate: human_time_estimate
     }
 
     if diff_head_commit
-      attrs.merge!(last_commit: diff_head_commit.hook_attrs)
+      attrs[:last_commit] = diff_head_commit.hook_attrs
     end
 
     attributes.merge!(attrs)
@@ -528,7 +551,7 @@ class MergeRequest < ActiveRecord::Base
   # Calculating this information for a number of merge requests requires
   # running `ReferenceExtractor` on each of them separately.
   # This optimization does not apply to issues from external sources.
-  def cache_merge_request_closes_issues!(current_user = self.author)
+  def cache_merge_request_closes_issues!(current_user)
     return if project.has_external_issue_tracker?
 
     transaction do
@@ -540,14 +563,10 @@ class MergeRequest < ActiveRecord::Base
     end
   end
 
-  def closes_issue?(issue)
-    closes_issues.include?(issue)
-  end
-
   # Return the set of issues that will be closed if this merge request is accepted.
   def closes_issues(current_user = self.author)
     if target_branch == project.default_branch
-      messages = [description]
+      messages = [title, description]
       messages.concat(commits.map(&:safe_message)) if merge_request_diff
 
       Gitlab::ClosingIssueExtractor.new(project, current_user).
@@ -557,6 +576,15 @@ class MergeRequest < ActiveRecord::Base
     end
   end
 
+  def issues_mentioned_but_not_closing(current_user)
+    return [] unless target_branch == project.default_branch
+
+    ext = Gitlab::ReferenceExtractor.new(project, current_user)
+    ext.analyze("#{title}\n#{description}")
+
+    ext.issues - closes_issues(current_user)
+  end
+
   def target_project_path
     if target_project
       target_project.path_with_namespace
@@ -575,7 +603,7 @@ class MergeRequest < ActiveRecord::Base
 
   def source_project_namespace
     if source_project && source_project.namespace
-      source_project.namespace.path
+      source_project.namespace.full_path
     else
       "(removed)"
     end
@@ -583,7 +611,7 @@ class MergeRequest < ActiveRecord::Base
 
   def target_project_namespace
     if target_project && target_project.namespace
-      target_project.namespace.path
+      target_project.namespace.full_path
     else
       "(removed)"
     end
@@ -601,31 +629,30 @@ class MergeRequest < ActiveRecord::Base
     self.target_project.repository.branch_names.include?(self.target_branch)
   end
 
-  # Reset merge request events cache
-  #
-  # Since we do cache @event we need to reset cache in special cases:
-  # * when a merge request is updated
-  # Events cache stored like  events/23-20130109142513.
-  # The cache key includes updated_at timestamp.
-  # Thus it will automatically generate a new fragment
-  # when the event is updated because the key changes.
-  def reset_events_cache
-    Event.reset_event_cache_for(self)
-  end
-
-  def merge_commit_message
-    message = "Merge branch '#{source_branch}' into '#{target_branch}'\n\n"
-    message << "#{title}\n\n"
-    message << "#{description}\n\n" if description.present?
+  def merge_commit_message(include_description: false)
+    closes_issues_references = closes_issues.map do |issue|
+      issue.to_reference(target_project)
+    end
+
+    message = [
+      "Merge branch '#{source_branch}' into '#{target_branch}'",
+      title
+    ]
+
+    if !include_description && closes_issues_references.present?
+      message << "Closes #{closes_issues_references.to_sentence}"
+    end
+
+    message << "#{description}" if include_description && description.present?
     message << "See merge request #{to_reference}"
 
-    message
+    message.join("\n\n")
   end
 
-  def reset_merge_when_build_succeeds
-    return unless merge_when_build_succeeds?
+  def reset_merge_when_pipeline_succeeds
+    return unless merge_when_pipeline_succeeds?
 
-    self.merge_when_build_succeeds = false
+    self.merge_when_pipeline_succeeds = false
     self.merge_user = nil
     if merge_params
       merge_params.delete('should_remove_source_branch')
@@ -662,7 +689,10 @@ class MergeRequest < ActiveRecord::Base
   end
 
   def has_ci?
-    source_project.try(:ci_service) && commits.any?
+    has_ci_integration = source_project.try(:ci_service)
+    uses_gitlab_ci = all_pipelines.any?
+
+    (has_ci_integration || uses_gitlab_ci) && commits.any?
   end
 
   def branch_missing?
@@ -670,7 +700,7 @@ class MergeRequest < ActiveRecord::Base
   end
 
   def broken?
-    self.commits.blank? || branch_missing? || cannot_be_merged?
+    has_no_commits? || branch_missing? || cannot_be_merged?
   end
 
   def can_be_merged_by?(user)
@@ -684,20 +714,27 @@ class MergeRequest < ActiveRecord::Base
   end
 
   def mergeable_ci_state?
-    return true unless project.only_allow_merge_if_build_succeeds?
+    return true unless project.only_allow_merge_if_pipeline_succeeds?
 
-    !pipeline || pipeline.success?
+    !head_pipeline || head_pipeline.success? || head_pipeline.skipped?
   end
 
-  def environments
+  def environments_for(current_user)
     return [] unless diff_head_commit
 
-    @environments ||=
-      begin
-        envs = target_project.environments_for(target_branch, diff_head_commit, with_tags: true)
-        envs.concat(source_project.environments_for(source_branch, diff_head_commit)) if source_project
-        envs.uniq
+    @environments ||= Hash.new do |h, current_user|
+      envs = EnvironmentsFinder.new(target_project, current_user,
+        ref: target_branch, commit: diff_head_commit, with_tags: true).execute
+
+      if source_project
+        envs.concat EnvironmentsFinder.new(source_project, current_user,
+          ref: source_branch, commit: diff_head_commit).execute
       end
+
+      h[current_user] = envs.uniq
+    end
+
+    @environments[current_user]
   end
 
   def state_human_name
@@ -775,18 +812,14 @@ class MergeRequest < ActiveRecord::Base
     diverged_commits_count > 0
   end
 
-  def commits_sha
-    commits.map(&:sha)
-  end
-
-  def pipeline
+  def head_pipeline
     return unless diff_head_sha && source_project
 
-    @pipeline ||= source_project.pipeline_for(source_branch, diff_head_sha)
+    @head_pipeline ||= source_project.pipeline_for(source_branch, diff_head_sha)
   end
 
   def all_pipelines
-    return unless source_project
+    return Ci::Pipeline.none unless source_project
 
     @all_pipelines ||= source_project.pipelines
       .where(sha: all_commits_sha, ref: source_branch)
@@ -809,7 +842,7 @@ class MergeRequest < ActiveRecord::Base
     @merge_commit ||= project.commit(merge_commit_sha) if merge_commit_sha
   end
 
-  def can_be_reverted?(current_user = nil)
+  def can_be_reverted?(current_user)
     merge_commit && !merge_commit.has_been_reverted?(current_user, self)
   end
 
@@ -841,9 +874,11 @@ class MergeRequest < ActiveRecord::Base
       paths: paths
     )
 
-    active_diff_notes.each do |note|
-      service.execute(note)
-      Gitlab::Timeless.timeless(note, &:save)
+    transaction do
+      active_diff_notes.each do |note|
+        service.execute(note)
+        Gitlab::Timeless.timeless(note, &:save)
+      end
     end
   end
 
@@ -876,4 +911,24 @@ class MergeRequest < ActiveRecord::Base
       @conflicts_can_be_resolved_in_ui = false
     end
   end
+
+  def has_commits?
+    merge_request_diff && commits_count > 0
+  end
+
+  def has_no_commits?
+    !has_commits?
+  end
+
+  def mergeable_with_slash_command?(current_user, autocomplete_precheck: false, last_diff_sha: nil)
+    return false unless can_be_merged_by?(current_user)
+
+    return true if autocomplete_precheck
+
+    return false unless mergeable?(skip_ci_check: true)
+    return false if head_pipeline && !(head_pipeline.success? || head_pipeline.active?)
+    return false if last_diff_sha != diff_head_sha
+
+    true
+  end
 end
diff --git a/app/models/merge_request/metrics.rb b/app/models/merge_request/metrics.rb
index 99c49a020c9..cdc408738be 100644
--- a/app/models/merge_request/metrics.rb
+++ b/app/models/merge_request/metrics.rb
@@ -1,5 +1,6 @@
 class MergeRequest::Metrics < ActiveRecord::Base
   belongs_to :merge_request
+  belongs_to :pipeline, class_name: 'Ci::Pipeline', foreign_key: :pipeline_id
 
   def record!
     if merge_request.merged? && self.merged_at.blank?
diff --git a/app/models/merge_request_diff.rb b/app/models/merge_request_diff.rb
index dd65a9a8b86..baee00b8fcd 100644
--- a/app/models/merge_request_diff.rb
+++ b/app/models/merge_request_diff.rb
@@ -1,16 +1,19 @@
 class MergeRequestDiff < ActiveRecord::Base
   include Sortable
   include Importable
-  include EncodingHelper
+  include Gitlab::Git::EncodingHelper
 
   # Prevent store of diff if commits amount more then 500
   COMMITS_SAFE_SIZE = 100
 
   # Valid types of serialized diffs allowed by Gitlab::Git::Diff
-  VALID_CLASSES = [Hash, Rugged::Patch, Rugged::Diff::Delta]
+  VALID_CLASSES = [Hash, Rugged::Patch, Rugged::Diff::Delta].freeze
 
   belongs_to :merge_request
 
+  serialize :st_commits
+  serialize :st_diffs
+
   state_machine :state, initial: :empty do
     state :collected
     state :overflow
@@ -22,8 +25,7 @@ class MergeRequestDiff < ActiveRecord::Base
     state :overflow_diff_lines_limit
   end
 
-  serialize :st_commits
-  serialize :st_diffs
+  scope :viewable, -> { without_state(:empty) }
 
   # All diff information is collected from repository after object is created.
   # It allows you to override variables like head_commit_sha before getting diff.
@@ -125,11 +127,7 @@ class MergeRequestDiff < ActiveRecord::Base
   end
 
   def commits_sha
-    if @commits
-      commits.map(&:sha)
-    else
-      st_commits.map { |commit| commit[:id] }
-    end
+    st_commits.map { |commit| commit[:id] }
   end
 
   def diff_refs
@@ -171,7 +169,12 @@ class MergeRequestDiff < ActiveRecord::Base
     # When compare merge request versions we want diff A..B instead of A...B
     # so we handle cases when user does squash and rebase of the commits between versions.
     # For this reason we set straight to true by default.
-    CompareService.new.execute(project, head_commit_sha, project, sha, straight: straight)
+    CompareService.new(project, head_commit_sha)
+      .execute(project, sha, straight: straight)
+  end
+
+  def commits_count
+    st_commits.count
   end
 
   private
@@ -232,28 +235,28 @@ class MergeRequestDiff < ActiveRecord::Base
   # and save it as array of hashes in st_diffs db field
   def save_diffs
     new_attributes = {}
-    new_diffs = []
 
     if commits.size.zero?
       new_attributes[:state] = :empty
     else
       diff_collection = compare.diffs(Commit.max_diff_options)
-
-      if diff_collection.overflow?
-        # Set our state to 'overflow' to make the #empty? and #collected?
-        # methods (generated by StateMachine) return false.
-        new_attributes[:state] = :overflow
-      end
-
-      new_attributes[:real_size] = diff_collection.real_size
+      new_attributes[:real_size] = compare.diffs.real_size
 
       if diff_collection.any?
         new_diffs = dump_diffs(diff_collection)
         new_attributes[:state] = :collected
       end
+
+      new_attributes[:st_diffs] = new_diffs || []
+
+      # Set our state to 'overflow' to make the #empty? and #collected?
+      # methods (generated by StateMachine) return false.
+      #
+      # This attribution has to come at the end of the method so 'overflow'
+      # state does not get overridden by 'collected'.
+      new_attributes[:state] = :overflow if diff_collection.overflow?
     end
 
-    new_attributes[:st_diffs] = new_diffs
     update_columns_serialized(new_attributes)
   end
 
diff --git a/app/models/merge_requests_closing_issues.rb b/app/models/merge_requests_closing_issues.rb
index ab597c37947..daafb137be4 100644
--- a/app/models/merge_requests_closing_issues.rb
+++ b/app/models/merge_requests_closing_issues.rb
@@ -4,4 +4,12 @@ class MergeRequestsClosingIssues < ActiveRecord::Base
 
   validates :merge_request_id, uniqueness: { scope: :issue_id }, presence: true
   validates :issue_id, presence: true
+
+  class << self
+    def count_for_collection(ids)
+      group(:issue_id).
+        where(issue_id: ids).
+        pluck('issue_id', 'COUNT(*) as count')
+    end
+  end
 end
diff --git a/app/models/milestone.rb b/app/models/milestone.rb
index 23aecbfa3a6..e85d5709624 100644
--- a/app/models/milestone.rb
+++ b/app/models/milestone.rb
@@ -5,6 +5,7 @@ class Milestone < ActiveRecord::Base
   None = MilestoneStruct.new('No Milestone', 'No Milestone', 0)
   Any = MilestoneStruct.new('Any Milestone', '', -1)
   Upcoming = MilestoneStruct.new('Upcoming', '#upcoming', -2)
+  Started = MilestoneStruct.new('Started', '#started', -3)
 
   include CacheMarkdownField
   include InternalId
@@ -29,6 +30,7 @@ class Milestone < ActiveRecord::Base
 
   validates :title, presence: true, uniqueness: { scope: :project_id }
   validates :project, presence: true
+  validate :start_date_should_be_less_than_due_date, if: Proc.new { |m| m.start_date.present? && m.due_date.present? }
 
   strip_attributes :title
 
@@ -105,6 +107,21 @@ class Milestone < ActiveRecord::Base
     end
   end
 
+  def self.sort(method)
+    case method.to_s
+    when 'due_date_asc'
+      reorder(Gitlab::Database.nulls_last_order('due_date', 'ASC'))
+    when 'due_date_desc'
+      reorder(Gitlab::Database.nulls_last_order('due_date', 'DESC'))
+    when 'start_date_asc'
+      reorder(Gitlab::Database.nulls_last_order('start_date', 'ASC'))
+    when 'start_date_desc'
+      reorder(Gitlab::Database.nulls_last_order('start_date', 'DESC'))
+    else
+      order_by(method)
+    end
+  end
+
   ##
   # Returns the String necessary to reference this Milestone in Markdown
   #
@@ -112,41 +129,24 @@ class Milestone < ActiveRecord::Base
   #
   # Examples:
   #
-  #   Milestone.first.to_reference                # => "%1"
-  #   Milestone.first.to_reference(format: :name) # => "%\"goal\""
-  #   Milestone.first.to_reference(project)       # => "gitlab-org/gitlab-ce%1"
+  #   Milestone.first.to_reference                           # => "%1"
+  #   Milestone.first.to_reference(format: :name)            # => "%\"goal\""
+  #   Milestone.first.to_reference(cross_namespace_project)  # => "gitlab-org/gitlab-ce%1"
+  #   Milestone.first.to_reference(same_namespace_project)   # => "gitlab-ce%1"
   #
-  def to_reference(from_project = nil, format: :iid)
+  def to_reference(from_project = nil, format: :iid, full: false)
     format_reference = milestone_format_reference(format)
     reference = "#{self.class.reference_prefix}#{format_reference}"
 
-    if cross_project_reference?(from_project)
-      project.to_reference + reference
-    else
-      reference
-    end
+    "#{project.to_reference(from_project, full: full)}#{reference}"
   end
 
   def reference_link_text(from_project = nil)
     self.title
   end
 
-  def expired?
-    if due_date
-      due_date.past?
-    else
-      false
-    end
-  end
-
-  def expires_at
-    if due_date
-      if due_date.past?
-        "expired on #{due_date.to_s(:medium)}"
-      else
-        "expires on #{due_date.to_s(:medium)}"
-      end
-    end
+  def milestoneish_ids
+    id
   end
 
   def can_be_closed?
@@ -212,4 +212,14 @@ class Milestone < ActiveRecord::Base
   def sanitize_title(value)
     CGI.unescape_html(Sanitize.clean(value.to_s))
   end
+
+  def start_date_should_be_less_than_due_date
+    if due_date <= start_date
+      errors.add(:start_date, "Can't be greater than due date")
+    end
+  end
+
+  def issues_finder_params
+    { project_id: project_id }
+  end
 end
diff --git a/app/models/namespace.rb b/app/models/namespace.rb
index b67049f0f55..1d4b1f7d590 100644
--- a/app/models/namespace.rb
+++ b/app/models/namespace.rb
@@ -4,36 +4,62 @@ class Namespace < ActiveRecord::Base
   include CacheMarkdownField
   include Sortable
   include Gitlab::ShellAdapter
+  include Gitlab::CurrentSettings
+  include Routable
+
+  # Prevent users from creating unreasonably deep level of nesting.
+  # The number 20 was taken based on maximum nesting level of
+  # Android repo (15) + some extra backup.
+  NUMBER_OF_ANCESTORS_ALLOWED = 20
 
   cache_markdown_field :description, pipeline: :description
 
   has_many :projects, dependent: :destroy
+  has_many :project_statistics
   belongs_to :owner, class_name: "User"
 
+  belongs_to :parent, class_name: "Namespace"
+  has_many :children, class_name: "Namespace", foreign_key: :parent_id
+  has_one :chat_team, dependent: :destroy
+
   validates :owner, presence: true, unless: ->(n) { n.type == "Group" }
   validates :name,
-    length: { within: 0..255 },
-    namespace_name: true,
     presence: true,
-    uniqueness: true
+    uniqueness: { scope: :parent_id },
+    length: { maximum: 255 },
+    namespace_name: true
 
-  validates :description, length: { within: 0..255 }
+  validates :description, length: { maximum: 255 }
   validates :path,
-    length: { within: 1..255 },
-    namespace: true,
     presence: true,
-    uniqueness: { case_sensitive: false }
+    length: { maximum: 255 },
+    namespace: true
+
+  validate :nesting_level_allowed
 
   delegate :name, to: :owner, allow_nil: true, prefix: true
 
   after_update :move_dir, if: :path_changed?
+  after_commit :refresh_access_of_projects_invited_groups, on: :update, if: -> { previous_changes.key?('share_with_group_lock') }
 
   # Save the storage paths before the projects are destroyed to use them on after destroy
-  before_destroy(prepend: true) { @old_repository_storage_paths = repository_storage_paths }
+  before_destroy(prepend: true) { prepare_for_destroy }
   after_destroy :rm_dir
 
   scope :root, -> { where('type IS NULL') }
 
+  scope :with_statistics, -> do
+    joins('LEFT JOIN project_statistics ps ON ps.namespace_id = namespaces.id')
+      .group('namespaces.id')
+      .select(
+        'namespaces.*',
+        'COALESCE(SUM(ps.storage_size), 0) AS storage_size',
+        'COALESCE(SUM(ps.repository_size), 0) AS repository_size',
+        'COALESCE(SUM(ps.lfs_objects_size), 0) AS lfs_objects_size',
+        'COALESCE(SUM(ps.build_artifacts_size), 0) AS build_artifacts_size',
+      )
+  end
+
   class << self
     def by_path(path)
       find_by('lower(path) = :value', value: path.downcase)
@@ -73,19 +99,13 @@ class Namespace < ActiveRecord::Base
       # Work around that by setting their username to "blank", followed by a counter.
       path = "blank" if path.blank?
 
-      counter = 0
-      base = path
-      while Namespace.find_by_path_or_name(path)
-        counter += 1
-        path = "#{base}#{counter}"
-      end
-
-      path
+      uniquify = Uniquify.new
+      uniquify.string(path) { |s| Namespace.find_by_path_or_name(s) }
     end
   end
 
   def to_param
-    path
+    full_path
   end
 
   def human_name
@@ -94,22 +114,27 @@ class Namespace < ActiveRecord::Base
 
   def move_dir
     if any_project_has_container_registry_tags?
-      raise Exception.new('Namespace cannot be moved, because at least one project has tags in container registry')
+      raise Gitlab::UpdatePathError.new('Namespace cannot be moved, because at least one project has tags in container registry')
     end
 
     # Move the namespace directory in all storages paths used by member projects
     repository_storage_paths.each do |repository_storage_path|
       # Ensure old directory exists before moving it
-      gitlab_shell.add_namespace(repository_storage_path, path_was)
+      gitlab_shell.add_namespace(repository_storage_path, full_path_was)
+
+      unless gitlab_shell.mv_namespace(repository_storage_path, full_path_was, full_path)
+        Rails.logger.error "Exception moving path #{repository_storage_path} from #{full_path_was} to #{full_path}"
 
-      unless gitlab_shell.mv_namespace(repository_storage_path, path_was, path)
         # if we cannot move namespace directory we should rollback
         # db changes in order to prevent out of sync between db and fs
-        raise Exception.new('namespace directory cannot be moved')
+        raise Gitlab::UpdatePathError.new('namespace directory cannot be moved')
       end
     end
 
-    Gitlab::UploadsTransfer.new.rename_namespace(path_was, path)
+    Gitlab::UploadsTransfer.new.rename_namespace(full_path_was, full_path)
+    Gitlab::PagesTransfer.new.rename_namespace(full_path_was, full_path)
+
+    remove_exports!
 
     # If repositories moved successfully we need to
     # send update instructions to users.
@@ -130,7 +155,7 @@ class Namespace < ActiveRecord::Base
 
   def send_update_instructions
     projects.each do |project|
-      project.send_move_instructions("#{path_was}/#{project.path}")
+      project.send_move_instructions("#{full_path_was}/#{project.path}")
     end
   end
 
@@ -147,6 +172,48 @@ class Namespace < ActiveRecord::Base
     Gitlab.config.lfs.enabled
   end
 
+  def shared_runners_enabled?
+    projects.with_shared_runners.any?
+  end
+
+  # Scopes the model on ancestors of the record
+  def ancestors
+    if parent_id
+      path = route ? route.path : full_path
+      paths = []
+
+      until path.blank?
+        path = path.rpartition('/').first
+        paths << path
+      end
+
+      self.class.joins(:route).where('routes.path IN (?)', paths).reorder('routes.path ASC')
+    else
+      self.class.none
+    end
+  end
+
+  # Scopes the model on direct and indirect children of the record
+  def descendants
+    self.class.joins(:route).merge(Route.inside_path(route.path)).reorder('routes.path ASC')
+  end
+
+  def user_ids_for_project_authorizations
+    [owner_id]
+  end
+
+  def parent_changed?
+    parent_id_changed?
+  end
+
+  def prepare_for_destroy
+    old_repository_storage_paths
+  end
+
+  def old_repository_storage_paths
+    @old_repository_storage_paths ||= repository_storage_paths
+  end
+
   private
 
   def repository_storage_paths
@@ -160,13 +227,13 @@ class Namespace < ActiveRecord::Base
 
   def rm_dir
     # Remove the namespace directory in all storages paths used by member projects
-    @old_repository_storage_paths.each do |repository_storage_path|
+    old_repository_storage_paths.each do |repository_storage_path|
       # Move namespace directory into trash.
       # We will remove it later async
-      new_path = "#{path}+#{id}+deleted"
+      new_path = "#{full_path}+#{id}+deleted"
 
-      if gitlab_shell.mv_namespace(repository_storage_path, path, new_path)
-        message = "Namespace directory \"#{path}\" moved to \"#{new_path}\""
+      if gitlab_shell.mv_namespace(repository_storage_path, full_path, new_path)
+        message = "Namespace directory \"#{full_path}\" moved to \"#{new_path}\""
         Gitlab::AppLogger.info message
 
         # Remove namespace directroy async with delay so
@@ -174,5 +241,36 @@ class Namespace < ActiveRecord::Base
         GitlabShellWorker.perform_in(5.minutes, :rm_namespace, repository_storage_path, new_path)
       end
     end
+
+    remove_exports!
+  end
+
+  def refresh_access_of_projects_invited_groups
+    Group.
+      joins(project_group_links: :project).
+      where(projects: { namespace_id: id }).
+      find_each(&:refresh_members_authorized_projects)
+  end
+
+  def remove_exports!
+    Gitlab::Popen.popen(%W(find #{export_path} -not -path #{export_path} -delete))
+  end
+
+  def export_path
+    File.join(Gitlab::ImportExport.storage_path, full_path_was)
+  end
+
+  def full_path_was
+    if parent
+      parent.full_path + '/' + path_was
+    else
+      path_was
+    end
+  end
+
+  def nesting_level_allowed
+    if ancestors.count > Group::NUMBER_OF_ANCESTORS_ALLOWED
+      errors.add(:parent_id, "has too deep level of nesting")
+    end
   end
 end
diff --git a/app/models/network/graph.rb b/app/models/network/graph.rb
index 345041a6ad1..0bbc9451ffd 100644
--- a/app/models/network/graph.rb
+++ b/app/models/network/graph.rb
@@ -161,8 +161,8 @@ module Network
     def is_overlap?(range, overlap_space)
       range.each do |i|
         if i != range.first &&
-          i != range.last &&
-          @commits[i].spaces.include?(overlap_space)
+            i != range.last &&
+            @commits[i].spaces.include?(overlap_space)
 
           return true
         end
@@ -188,11 +188,12 @@ module Network
       end
 
       # and mark it as reserved
-      if parent_time.nil?
-        min_time = leaves.first.time
-      else
-        min_time = parent_time + 1
-      end
+      min_time =
+        if parent_time.nil?
+          leaves.first.time
+        else
+          parent_time + 1
+        end
 
       max_time = leaves.last.time
       leaves.last.parents(@map).each do |parent|
diff --git a/app/models/note.rb b/app/models/note.rb
index 2d644b03e4d..16d66cb1427 100644
--- a/app/models/note.rb
+++ b/app/models/note.rb
@@ -7,6 +7,7 @@ class Note < ActiveRecord::Base
   include Importable
   include FasterCacheKeys
   include CacheMarkdownField
+  include AfterCommitQueue
 
   cache_markdown_field :note, pipeline: :note
 
@@ -18,6 +19,9 @@ class Note < ActiveRecord::Base
   # Banzai::ObjectRenderer
   attr_accessor :user_visible_reference_count
 
+  # Attribute used to store the attributes that have ben changed by slash commands.
+  attr_accessor :commands_changes
+
   default_value_for :system, false
 
   attr_mentionable :note, pipeline: :note
@@ -33,13 +37,15 @@ class Note < ActiveRecord::Base
 
   has_many :todos, dependent: :destroy
   has_many :events, as: :target, dependent: :destroy
+  has_one :system_note_metadata
 
   delegate :gfm_reference, :local_reference, to: :noteable
   delegate :name, to: :project, prefix: true
   delegate :name, :email, to: :author, prefix: true
   delegate :title, to: :noteable, allow_nil: true
 
-  validates :note, :project, presence: true
+  validates :note, presence: true
+  validates :project, presence: true, unless: :for_personal_snippet?
 
   # Attachments are deprecated and are handled by Markdown uploader
   validates :attachment, file_size: { maximum: :max_attachment_size }
@@ -49,7 +55,7 @@ class Note < ActiveRecord::Base
   validates :commit_id, presence: true, if: :for_commit?
   validates :author, presence: true
 
-  validate unless: [:for_commit?, :importing?] do |note|
+  validate unless: [:for_commit?, :importing?, :for_personal_snippet?] do |note|
     unless note.noteable.try(:project) == note.project
       errors.add(:invalid_project, 'Note and noteable project mismatch')
     end
@@ -65,9 +71,11 @@ class Note < ActiveRecord::Base
   scope :fresh, ->{ order(created_at: :asc, id: :asc) }
   scope :inc_author_project, ->{ includes(:project, :author) }
   scope :inc_author, ->{ includes(:author) }
-  scope :inc_relations_for_view, ->{ includes(:project, :author, :updated_by, :resolved_by, :award_emoji) }
+  scope :inc_relations_for_view, -> do
+    includes(:project, :author, :updated_by, :resolved_by, :award_emoji, :system_note_metadata)
+  end
 
-  scope :diff_notes, ->{ where(type: ['LegacyDiffNote', 'DiffNote']) }
+  scope :diff_notes, ->{ where(type: %w(LegacyDiffNote DiffNote)) }
   scope :non_diff_notes, ->{ where(type: ['Note', nil]) }
 
   scope :with_associations, -> do
@@ -79,7 +87,8 @@ class Note < ActiveRecord::Base
   after_initialize :ensure_discussion_id
   before_validation :nullify_blank_type, :nullify_blank_line_code
   before_validation :set_discussion_id
-  after_save :keep_around_commit
+  after_save :keep_around_commit, unless: :for_personal_snippet?
+  after_save :expire_etag_cache
 
   class << self
     def model_name
@@ -95,7 +104,7 @@ class Note < ActiveRecord::Base
     end
 
     def discussions
-      Discussion.for_notes(all)
+      Discussion.for_notes(fresh)
     end
 
     def grouped_diff_discussions
@@ -104,21 +113,10 @@ class Note < ActiveRecord::Base
         map { |d| [d.line_code, d] }.to_h
     end
 
-    # Searches for notes matching the given query.
-    #
-    # This method uses ILIKE on PostgreSQL and LIKE on MySQL.
-    #
-    # query   - The search query as a String.
-    # as_user - Limit results to those viewable by a specific user
-    #
-    # Returns an ActiveRecord::Relation.
-    def search(query, as_user: nil)
-      table   = arel_table
-      pattern = "%#{query}%"
-
-      Note.joins('LEFT JOIN issues ON issues.id = noteable_id').
-        where(table[:note].matches(pattern)).
-        merge(Issue.visible_to_user(as_user))
+    def count_for_collection(ids, type)
+      user.select('noteable_id', 'COUNT(*) as count').
+        group(:noteable_id).
+        where(noteable_type: type, noteable_id: ids)
     end
   end
 
@@ -178,6 +176,14 @@ class Note < ActiveRecord::Base
     noteable_type == "Snippet"
   end
 
+  def for_personal_snippet?
+    noteable.is_a?(PersonalSnippet)
+  end
+
+  def skip_project_check?
+    for_personal_snippet?
+  end
+
   # override to return commits, which are not active record
   def noteable
     if for_commit?
@@ -197,19 +203,6 @@ class Note < ActiveRecord::Base
     super(noteable_type.to_s.classify.constantize.base_class.to_s)
   end
 
-  # Reset notes events cache
-  #
-  # Since we do cache @event we need to reset cache in special cases:
-  # * when a note is updated
-  # * when a note is removed
-  # Events cache stored like  events/23-20130109142513.
-  # The cache key includes updated_at timestamp.
-  # Thus it will automatically generate a new fragment
-  # when the event is updated because the key changes.
-  def reset_events_cache
-    Event.reset_event_cache_for(self)
-  end
-
   def editable?
     !system?
   end
@@ -242,8 +235,8 @@ class Note < ActiveRecord::Base
     note =~ /\A#{Banzai::Filter::EmojiFilter.emoji_pattern}\s?\Z/
   end
 
-  def award_emoji_name
-    note.match(Banzai::Filter::EmojiFilter.emoji_pattern)[1]
+  def to_ability_name
+    for_personal_snippet? ? 'personal_snippet' : noteable_type.underscore
   end
 
   private
@@ -283,4 +276,16 @@ class Note < ActiveRecord::Base
       self.class.build_discussion_id(noteable_type, noteable_id || commit_id)
     end
   end
+
+  def expire_etag_cache
+    return unless for_issue?
+
+    key = Gitlab::Routing.url_helpers.namespace_project_noteable_notes_path(
+      noteable.project.namespace,
+      noteable.project,
+      target_type: noteable_type.underscore,
+      target_id: noteable.id
+    )
+    Gitlab::EtagCaching::Store.new.touch(key)
+  end
 end
diff --git a/app/models/notification_setting.rb b/app/models/notification_setting.rb
index 121b598b8f3..52577bd52ea 100644
--- a/app/models/notification_setting.rb
+++ b/app/models/notification_setting.rb
@@ -32,8 +32,14 @@ class NotificationSetting < ActiveRecord::Base
     :reopen_merge_request,
     :close_merge_request,
     :reassign_merge_request,
-    :merge_merge_request
-  ]
+    :merge_merge_request,
+    :failed_pipeline,
+    :success_pipeline
+  ].freeze
+
+  EXCLUDED_WATCHER_EVENTS = [
+    :success_pipeline
+  ].freeze
 
   store :events, accessors: EMAIL_EVENTS, coder: JSON
 
diff --git a/app/models/oauth_access_grant.rb b/app/models/oauth_access_grant.rb
new file mode 100644
index 00000000000..3a997406565
--- /dev/null
+++ b/app/models/oauth_access_grant.rb
@@ -0,0 +1,4 @@
+class OauthAccessGrant < Doorkeeper::AccessGrant
+  belongs_to :resource_owner, class_name: 'User'
+  belongs_to :application, class_name: 'Doorkeeper::Application'
+end
diff --git a/app/models/oauth_access_token.rb b/app/models/oauth_access_token.rb
index 116fb71ac08..b85f5dbaf2e 100644
--- a/app/models/oauth_access_token.rb
+++ b/app/models/oauth_access_token.rb
@@ -1,4 +1,4 @@
-class OauthAccessToken < ActiveRecord::Base
+class OauthAccessToken < Doorkeeper::AccessToken
   belongs_to :resource_owner, class_name: 'User'
   belongs_to :application, class_name: 'Doorkeeper::Application'
 end
diff --git a/app/models/pages_domain.rb b/app/models/pages_domain.rb
new file mode 100644
index 00000000000..f2f2fc1e32a
--- /dev/null
+++ b/app/models/pages_domain.rb
@@ -0,0 +1,119 @@
+class PagesDomain < ActiveRecord::Base
+  belongs_to :project
+
+  validates :domain, hostname: true
+  validates :domain, uniqueness: { case_sensitive: false }
+  validates :certificate, certificate: true, allow_nil: true, allow_blank: true
+  validates :key, certificate_key: true, allow_nil: true, allow_blank: true
+
+  validate :validate_pages_domain
+  validate :validate_matching_key, if: ->(domain) { domain.certificate.present? || domain.key.present? }
+  validate :validate_intermediates, if: ->(domain) { domain.certificate.present? }
+
+  attr_encrypted :key,
+    mode: :per_attribute_iv_and_salt,
+    insecure_mode: true,
+    key: Gitlab::Application.secrets.db_key_base,
+    algorithm: 'aes-256-cbc'
+
+  after_create :update
+  after_save :update
+  after_destroy :update
+
+  def to_param
+    domain
+  end
+
+  def url
+    return unless domain
+
+    if certificate
+      "https://#{domain}"
+    else
+      "http://#{domain}"
+    end
+  end
+
+  def has_matching_key?
+    return false unless x509
+    return false unless pkey
+
+    # We compare the public key stored in certificate with public key from certificate key
+    x509.check_private_key(pkey)
+  end
+
+  def has_intermediates?
+    return false unless x509
+
+    # self-signed certificates doesn't have the certificate chain
+    return true if x509.verify(x509.public_key)
+
+    store = OpenSSL::X509::Store.new
+    store.set_default_paths
+
+    # This forces to load all intermediate certificates stored in `certificate`
+    Tempfile.open('certificate_chain') do |f|
+      f.write(certificate)
+      f.flush
+      store.add_file(f.path)
+    end
+
+    store.verify(x509)
+  rescue OpenSSL::X509::StoreError
+    false
+  end
+
+  def expired?
+    return false unless x509
+    current = Time.new
+    current < x509.not_before || x509.not_after < current
+  end
+
+  def subject
+    return unless x509
+    x509.subject.to_s
+  end
+
+  def certificate_text
+    @certificate_text ||= x509.try(:to_text)
+  end
+
+  private
+
+  def update
+    ::Projects::UpdatePagesConfigurationService.new(project).execute
+  end
+
+  def validate_matching_key
+    unless has_matching_key?
+      self.errors.add(:key, "doesn't match the certificate")
+    end
+  end
+
+  def validate_intermediates
+    unless has_intermediates?
+      self.errors.add(:certificate, 'misses intermediates')
+    end
+  end
+
+  def validate_pages_domain
+    return unless domain
+    if domain.downcase.ends_with?(".#{Settings.pages.host}".downcase)
+      self.errors.add(:domain, "*.#{Settings.pages.host} is restricted")
+    end
+  end
+
+  def x509
+    return unless certificate
+    @x509 ||= OpenSSL::X509::Certificate.new(certificate)
+  rescue OpenSSL::X509::CertificateError
+    nil
+  end
+
+  def pkey
+    return unless key
+    @pkey ||= OpenSSL::PKey::RSA.new(key)
+  rescue OpenSSL::PKey::PKeyError, OpenSSL::Cipher::CipherError
+    nil
+  end
+end
diff --git a/app/models/personal_access_token.rb b/app/models/personal_access_token.rb
index c4b095e0c04..e8b000ddad6 100644
--- a/app/models/personal_access_token.rb
+++ b/app/models/personal_access_token.rb
@@ -1,20 +1,36 @@
 class PersonalAccessToken < ActiveRecord::Base
+  include Expirable
   include TokenAuthenticatable
   add_authentication_token_field :token
 
+  serialize :scopes, Array
+
   belongs_to :user
 
-  scope :active, -> { where(revoked: false).where("expires_at >= NOW() OR expires_at IS NULL") }
+  before_save :ensure_token
+
+  scope :active, -> { where("revoked = false AND (expires_at >= NOW() OR expires_at IS NULL)") }
   scope :inactive, -> { where("revoked = true OR expires_at < NOW()") }
+  scope :with_impersonation, -> { where(impersonation: true) }
+  scope :without_impersonation, -> { where(impersonation: false) }
 
-  def self.generate(params)
-    personal_access_token = self.new(params)
-    personal_access_token.ensure_token
-    personal_access_token
-  end
+  validates :scopes, presence: true
+  validate :validate_api_scopes
 
   def revoke!
     self.revoked = true
     self.save
   end
+
+  def active?
+    !revoked? && !expired?
+  end
+
+  protected
+
+  def validate_api_scopes
+    unless scopes.all? { |scope| Gitlab::Auth::API_SCOPES.include?(scope.to_sym) }
+      errors.add :scopes, "can only contain API scopes"
+    end
+  end
 end
diff --git a/app/models/project.rb b/app/models/project.rb
index 686d285410b..f1bba56d32c 100644
--- a/app/models/project.rb
+++ b/app/models/project.rb
@@ -12,18 +12,23 @@ class Project < ActiveRecord::Base
   include AfterCommitQueue
   include CaseSensitivity
   include TokenAuthenticatable
+  include ValidAttribute
   include ProjectFeaturesCompatibility
+  include SelectForProjectAuthorization
+  include Routable
 
   extend Gitlab::ConfigHelper
 
-  class BoardLimitExceeded < StandardError; end
+  BoardLimitExceeded = Class.new(StandardError)
 
   NUMBER_OF_PERMITTED_BOARDS = 1
-  UNKNOWN_IMPORT_URL = 'http://unknown.git'
+  UNKNOWN_IMPORT_URL = 'http://unknown.git'.freeze
 
   cache_markdown_field :description, pipeline: :description
 
-  delegate :feature_available?, :builds_enabled?, :wiki_enabled?, :merge_requests_enabled?, to: :project_feature, allow_nil: true
+  delegate :feature_available?, :builds_enabled?, :wiki_enabled?,
+           :merge_requests_enabled?, :issues_enabled?, to: :project_feature,
+                                                       allow_nil: true
 
   default_value_for :archived, false
   default_value_for :visibility_level, gitlab_config_features.visibility_level
@@ -35,10 +40,12 @@ class Project < ActiveRecord::Base
   default_value_for :builds_enabled, gitlab_config_features.builds
   default_value_for :wiki_enabled, gitlab_config_features.wiki
   default_value_for :snippets_enabled, gitlab_config_features.snippets
+  default_value_for :only_allow_merge_if_all_discussions_are_resolved, false
 
   after_create :ensure_dir_exist
   after_create :create_project_feature, unless: :project_feature
   after_save :ensure_dir_exist, if: :namespace_id_changed?
+  after_save :update_project_statistics, if: :namespace_id_changed?
 
   # set last_activity_at to the same as created_at
   after_create :set_last_activity_at
@@ -46,6 +53,8 @@ class Project < ActiveRecord::Base
     update_column(:last_activity_at, self.created_at)
   end
 
+  after_destroy :remove_pages
+
   # update visibility_level of forks
   after_update :update_forks_visibility_level
   def update_forks_visibility_level
@@ -59,8 +68,9 @@ class Project < ActiveRecord::Base
     end
   end
 
-  ActsAsTaggableOn.strict_case_match = true
-  acts_as_taggable_on :tags
+  after_validation :check_pending_delete
+
+  acts_as_taggable
 
   attr_accessor :new_default_branch
   attr_accessor :old_path_with_namespace
@@ -76,11 +86,9 @@ class Project < ActiveRecord::Base
   has_many :boards, before_add: :validate_board_limit, dependent: :destroy
 
   # Project services
-  has_many :services
   has_one :campfire_service, dependent: :destroy
   has_one :drone_ci_service, dependent: :destroy
   has_one :emails_on_push_service, dependent: :destroy
-  has_one :builds_email_service, dependent: :destroy
   has_one :pipelines_email_service, dependent: :destroy
   has_one :irker_service, dependent: :destroy
   has_one :pivotaltracker_service, dependent: :destroy
@@ -89,6 +97,9 @@ class Project < ActiveRecord::Base
   has_one :assembla_service, dependent: :destroy
   has_one :asana_service, dependent: :destroy
   has_one :gemnasium_service, dependent: :destroy
+  has_one :mattermost_slash_commands_service, dependent: :destroy
+  has_one :mattermost_service, dependent: :destroy
+  has_one :slack_slash_commands_service, dependent: :destroy
   has_one :slack_service, dependent: :destroy
   has_one :buildkite_service, dependent: :destroy
   has_one :bamboo_service, dependent: :destroy
@@ -100,6 +111,9 @@ class Project < ActiveRecord::Base
   has_one :bugzilla_service, dependent: :destroy
   has_one :gitlab_issue_tracker_service, dependent: :destroy, inverse_of: :project
   has_one :external_wiki_service, dependent: :destroy
+  has_one :kubernetes_service, dependent: :destroy, inverse_of: :project
+  has_one :prometheus_service, dependent: :destroy, inverse_of: :project
+  has_one :mock_ci_service, dependent: :destroy
 
   has_one  :forked_project_link,  dependent: :destroy, foreign_key: "forked_to_project_id"
   has_one  :forked_from_project,  through:   :forked_project_link
@@ -109,8 +123,6 @@ class Project < ActiveRecord::Base
 
   # Merge Requests for target project should be removed with it
   has_many :merge_requests,     dependent: :destroy, foreign_key: 'target_project_id'
-  # Merge requests from source project should be kept when source project was removed
-  has_many :fork_merge_requests, foreign_key: 'source_project_id', class_name: MergeRequest
   has_many :issues,             dependent: :destroy
   has_many :labels,             dependent: :destroy, class_name: 'ProjectLabel'
   has_many :services,           dependent: :destroy
@@ -121,6 +133,8 @@ class Project < ActiveRecord::Base
   has_many :hooks,              dependent: :destroy, class_name: 'ProjectHook'
   has_many :protected_branches, dependent: :destroy
 
+  has_many :project_authorizations
+  has_many :authorized_users, through: :project_authorizations, source: :user, class_name: 'User'
   has_many :project_members, -> { where(requested_at: nil) }, dependent: :destroy, as: :source
   alias_method :members, :project_members
   has_many :users, through: :project_members
@@ -136,19 +150,21 @@ class Project < ActiveRecord::Base
   has_many :lfs_objects, through: :lfs_objects_projects
   has_many :project_group_links, dependent: :destroy
   has_many :invited_groups, through: :project_group_links, source: :group
+  has_many :pages_domains, dependent: :destroy
   has_many :todos, dependent: :destroy
   has_many :notification_settings, dependent: :destroy, as: :source
 
   has_one :import_data, dependent: :destroy, class_name: "ProjectImportData"
   has_one :project_feature, dependent: :destroy
+  has_one :statistics, class_name: 'ProjectStatistics', dependent: :delete
 
-  has_many :commit_statuses, dependent: :destroy, foreign_key: :gl_project_id
-  has_many :pipelines, dependent: :destroy, class_name: 'Ci::Pipeline', foreign_key: :gl_project_id
-  has_many :builds, class_name: 'Ci::Build', foreign_key: :gl_project_id # the builds are created from the commit_statuses
-  has_many :runner_projects, dependent: :destroy, class_name: 'Ci::RunnerProject', foreign_key: :gl_project_id
+  has_many :commit_statuses, dependent: :destroy
+  has_many :pipelines, dependent: :destroy, class_name: 'Ci::Pipeline'
+  has_many :builds, class_name: 'Ci::Build' # the builds are created from the commit_statuses
+  has_many :runner_projects, dependent: :destroy, class_name: 'Ci::RunnerProject'
   has_many :runners, through: :runner_projects, source: :runner, class_name: 'Ci::Runner'
-  has_many :variables, dependent: :destroy, class_name: 'Ci::Variable', foreign_key: :gl_project_id
-  has_many :triggers, dependent: :destroy, class_name: 'Ci::Trigger', foreign_key: :gl_project_id
+  has_many :variables, dependent: :destroy, class_name: 'Ci::Variable'
+  has_many :triggers, dependent: :destroy, class_name: 'Ci::Trigger'
   has_many :environments, dependent: :destroy
   has_many :deployments, dependent: :destroy
 
@@ -156,26 +172,31 @@ class Project < ActiveRecord::Base
   accepts_nested_attributes_for :project_feature
 
   delegate :name, to: :owner, allow_nil: true, prefix: true
+  delegate :count, to: :forks, prefix: true
   delegate :members, to: :team, prefix: true
   delegate :add_user, to: :team
+  delegate :add_guest, :add_reporter, :add_developer, :add_master, to: :team
+  delegate :empty_repo?, to: :repository
 
   # Validations
   validates :creator, presence: true, on: :create
   validates :description, length: { maximum: 2000 }, allow_blank: true
   validates :name,
     presence: true,
-    length: { within: 0..255 },
+    length: { maximum: 255 },
     format: { with: Gitlab::Regex.project_name_regex,
               message: Gitlab::Regex.project_name_regex_message }
   validates :path,
     presence: true,
-    length: { within: 0..255 },
+    project_path: true,
+    length: { maximum: 255 },
     format: { with: Gitlab::Regex.project_path_regex,
               message: Gitlab::Regex.project_path_regex_message }
   validates :namespace, presence: true
-  validates_uniqueness_of :name, scope: :namespace_id
-  validates_uniqueness_of :path, scope: :namespace_id
+  validates :name, uniqueness: { scope: :namespace_id }
+  validates :path, uniqueness: { scope: :namespace_id }
   validates :import_url, addressable_url: true, if: :external_import?
+  validates :import_url, importable_url: true, if: [:external_import?, :import_url_changed?]
   validates :star_count, numericality: { greater_than_or_equal_to: 0 }
   validate :check_limit, on: :create
   validate :avatar_type,
@@ -192,10 +213,13 @@ class Project < ActiveRecord::Base
   before_save :ensure_runners_token
 
   mount_uploader :avatar, AvatarUploader
+  has_many :uploads, as: :model, dependent: :destroy
 
   # Scopes
   default_scope { where(pending_delete: false) }
 
+  scope :with_deleted, -> { unscope(where: :pending_delete) }
+
   scope :sorted_by_activity, -> { reorder(last_activity_at: :desc) }
   scope :sorted_by_stars, -> { reorder('projects.star_count DESC') }
 
@@ -207,8 +231,46 @@ class Project < ActiveRecord::Base
   scope :for_milestones, ->(ids) { joins(:milestones).where('milestones.id' => ids).distinct }
   scope :with_push, -> { joins(:events).where('events.action = ?', Event::PUSHED) }
 
-  scope :with_builds_enabled, -> { joins('LEFT JOIN project_features ON projects.id = project_features.project_id').where('project_features.builds_access_level IS NULL or project_features.builds_access_level > 0') }
-  scope :with_issues_enabled, -> { joins('LEFT JOIN project_features ON projects.id = project_features.project_id').where('project_features.issues_access_level IS NULL or project_features.issues_access_level > 0') }
+  scope :with_project_feature, -> { joins('LEFT JOIN project_features ON projects.id = project_features.project_id') }
+  scope :with_statistics, -> { includes(:statistics) }
+  scope :with_shared_runners, -> { where(shared_runners_enabled: true) }
+  scope :inside_path, ->(path) do
+    # We need routes alias rs for JOIN so it does not conflict with
+    # includes(:route) which we use in ProjectsFinder.
+    joins("INNER JOIN routes rs ON rs.source_id = projects.id AND rs.source_type = 'Project'").
+      where('rs.path LIKE ?', "#{sanitize_sql_like(path)}/%")
+  end
+
+  # "enabled" here means "not disabled". It includes private features!
+  scope :with_feature_enabled, ->(feature) {
+    access_level_attribute = ProjectFeature.access_level_attribute(feature)
+    with_project_feature.where(project_features: { access_level_attribute => [nil, ProjectFeature::PRIVATE, ProjectFeature::ENABLED] })
+  }
+
+  # Picks a feature where the level is exactly that given.
+  scope :with_feature_access_level, ->(feature, level) {
+    access_level_attribute = ProjectFeature.access_level_attribute(feature)
+    with_project_feature.where(project_features: { access_level_attribute => level })
+  }
+
+  scope :with_builds_enabled, -> { with_feature_enabled(:builds) }
+  scope :with_issues_enabled, -> { with_feature_enabled(:issues) }
+
+  # project features may be "disabled", "internal" or "enabled". If "internal",
+  # they are only available to team members. This scope returns projects where
+  # the feature is either enabled, or internal with permission for the user.
+  def self.with_feature_available_for_user(feature, user)
+    return with_feature_enabled(feature) if user.try(:admin?)
+
+    unconditional = with_feature_access_level(feature, [nil, ProjectFeature::ENABLED])
+    return unconditional if user.nil?
+
+    conditional = with_feature_access_level(feature, ProjectFeature::PRIVATE)
+    authorized = user.authorized_projects.merge(conditional.reorder(nil))
+
+    union = Gitlab::SQL::Union.new([unconditional.select(:id), authorized.select(:id)])
+    where(arel_table[:id].in(Arel::Nodes::SqlLiteral.new(union.to_sql)))
+  end
 
   scope :active, -> { joins(:issues, :notes, :merge_requests).order('issues.created_at, notes.created_at, merge_requests.created_at DESC') }
   scope :abandoned, -> { where('projects.last_activity_at < ?', 6.months.ago) }
@@ -252,20 +314,15 @@ class Project < ActiveRecord::Base
       ntable  = Namespace.arel_table
       pattern = "%#{query}%"
 
-      projects = select(:id).where(
+      # unscoping unnecessary conditions that'll be applied
+      # when executing `where("projects.id IN (#{union.to_sql})")`
+      projects = unscoped.select(:id).where(
         ptable[:path].matches(pattern).
           or(ptable[:name].matches(pattern)).
           or(ptable[:description].matches(pattern))
       )
 
-      # We explicitly remove any eager loading clauses as they're:
-      #
-      # 1. Not needed by this query
-      # 2. Combined with .joins(:namespace) lead to all columns from the
-      #    projects & namespaces tables being selected, leading to a SQL error
-      #    due to the columns of all UNION'd queries no longer being the same.
-      namespaces = select(:id).
-        except(:includes).
+      namespaces = unscoped.select(:id).
         joins(:namespace).
         where(ntable[:name].matches(pattern))
 
@@ -275,7 +332,7 @@ class Project < ActiveRecord::Base
     end
 
     def search_by_visibility(level)
-      where(visibility_level: Gitlab::VisibilityLevel.const_get(level.upcase))
+      where(visibility_level: Gitlab::VisibilityLevel.string_options[level])
     end
 
     def search_by_title(query)
@@ -285,102 +342,27 @@ class Project < ActiveRecord::Base
       non_archived.where(table[:name].matches(pattern))
     end
 
-    # Finds a single project for the given path.
-    #
-    # path - The full project path (including namespace path).
-    #
-    # Returns a Project, or nil if no project could be found.
-    def find_with_namespace(path)
-      namespace_path, project_path = path.split('/', 2)
-
-      return unless namespace_path && project_path
-
-      namespace_path = connection.quote(namespace_path)
-      project_path = connection.quote(project_path)
-
-      # On MySQL we want to ensure the ORDER BY uses a case-sensitive match so
-      # any literal matches come first, for this we have to use "BINARY".
-      # Without this there's still no guarantee in what order MySQL will return
-      # rows.
-      binary = Gitlab::Database.mysql? ? 'BINARY' : ''
-
-      order_sql = "(CASE WHEN #{binary} namespaces.path = #{namespace_path} " \
-        "AND #{binary} projects.path = #{project_path} THEN 0 ELSE 1 END)"
-
-      where_paths_in([path]).reorder(order_sql).take
-    end
-
-    # Builds a relation to find multiple projects by their full paths.
-    #
-    # Each path must be in the following format:
-    #
-    #     namespace_path/project_path
-    #
-    # For example:
-    #
-    #     gitlab-org/gitlab-ce
-    #
-    # Usage:
-    #
-    #     Project.where_paths_in(%w{gitlab-org/gitlab-ce gitlab-org/gitlab-ee})
-    #
-    # This would return the projects with the full paths matching the values
-    # given.
-    #
-    # paths - An Array of full paths (namespace path + project path) for which
-    #         to find the projects.
-    #
-    # Returns an ActiveRecord::Relation.
-    def where_paths_in(paths)
-      wheres = []
-      cast_lower = Gitlab::Database.postgresql?
-
-      paths.each do |path|
-        namespace_path, project_path = path.split('/', 2)
-
-        next unless namespace_path && project_path
-
-        namespace_path = connection.quote(namespace_path)
-        project_path = connection.quote(project_path)
-
-        where = "(namespaces.path = #{namespace_path}
-          AND projects.path = #{project_path})"
-
-        if cast_lower
-          where = "(
-            #{where}
-            OR (
-              LOWER(namespaces.path) = LOWER(#{namespace_path})
-              AND LOWER(projects.path) = LOWER(#{project_path})
-            )
-          )"
-        end
-
-        wheres << where
-      end
-
-      if wheres.empty?
-        none
-      else
-        joins(:namespace).where(wheres.join(' OR '))
-      end
-    end
-
     def visibility_levels
       Gitlab::VisibilityLevel.options
     end
 
     def sort(method)
-      if method == 'repository_size_desc'
-        reorder(repository_size: :desc, id: :desc)
+      if method == 'storage_size_desc'
+        # storage_size is a joined column so we need to
+        # pass a string to avoid AR adding the table name
+        reorder('project_statistics.storage_size DESC, projects.id DESC')
       else
         order_by(method)
       end
     end
 
     def reference_pattern
-      name_pattern = Gitlab::Regex::NAMESPACE_REGEX_STR
-      %r{(?<project>#{name_pattern}/#{name_pattern})}
+      name_pattern = Gitlab::Regex::FULL_NAMESPACE_REGEX_STR
+
+      %r{
+        ((?<namespace>#{name_pattern})\/)?
+        (?<project>#{name_pattern})
+      }x
     end
 
     def trending
@@ -406,7 +388,7 @@ class Project < ActiveRecord::Base
   end
 
   def repository_storage_path
-    Gitlab.config.repositories.storages[repository_storage]
+    Gitlab.config.repositories.storages[repository_storage]['path']
   end
 
   def team
@@ -470,13 +452,14 @@ class Project < ActiveRecord::Base
   end
 
   def add_import_job
-    if forked?
-      job_id = RepositoryForkWorker.perform_async(id, forked_from_project.repository_storage_path,
-                                                  forked_from_project.path_with_namespace,
-                                                  self.namespace.path)
-    else
-      job_id = RepositoryImportWorker.perform_async(self.id)
-    end
+    job_id =
+      if forked?
+        RepositoryForkWorker.perform_async(id, forked_from_project.repository_storage_path,
+          forked_from_project.path_with_namespace,
+          self.namespace.full_path)
+      else
+        RepositoryImportWorker.perform_async(self.id)
+      end
 
     if job_id
       Rails.logger.info "Import job started for #{path_with_namespace} with job ID #{job_id}"
@@ -488,7 +471,7 @@ class Project < ActiveRecord::Base
   def reset_cache_and_import_attrs
     ProjectCacheWorker.perform_async(self.id)
 
-    self.import_data.destroy if self.import_data
+    self.import_data&.destroy
   end
 
   def import_url=(value)
@@ -564,8 +547,12 @@ class Project < ActiveRecord::Base
     import_type == 'gitlab_project'
   end
 
+  def gitea_import?
+    import_type == 'gitea'
+  end
+
   def check_limit
-    unless creator.can_create_project? or namespace.kind == 'group'
+    unless creator.can_create_project? || namespace.kind == 'group'
       projects_limit = creator.projects_limit
 
       if projects_limit == 0
@@ -611,26 +598,34 @@ class Project < ActiveRecord::Base
     end
   end
 
-  def to_reference(_from_project = nil)
-    path_with_namespace
+  # `from` argument can be a Namespace or Project.
+  def to_reference(from = nil, full: false)
+    if full || cross_namespace_reference?(from)
+      path_with_namespace
+    elsif cross_project_reference?(from)
+      path
+    end
   end
 
-  def web_url
-    Gitlab::Routing.url_helpers.namespace_project_url(self.namespace, self)
+  def to_human_reference(from_project = nil)
+    if cross_namespace_reference?(from_project)
+      name_with_namespace
+    elsif cross_project_reference?(from_project)
+      name
+    end
   end
 
-  def web_url_without_protocol
-    web_url.split('://')[1]
+  def web_url
+    Gitlab::Routing.url_helpers.namespace_project_url(self.namespace, self)
   end
 
   def new_issue_address(author)
-    # This feature is disabled for the time being.
-    return nil
+    return unless Gitlab::IncomingEmail.supports_issue_creation? && author
 
-    if Gitlab::IncomingEmail.enabled? && author # rubocop:disable Lint/UnreachableCode
-      Gitlab::IncomingEmail.reply_address(
-        "#{path_with_namespace}+#{author.authentication_token}")
-    end
+    author.ensure_incoming_email_token!
+
+    Gitlab::IncomingEmail.reply_address(
+      "#{path_with_namespace}+#{author.incoming_email_token}")
   end
 
   def build_commit_note(commit)
@@ -649,9 +644,9 @@ class Project < ActiveRecord::Base
     self.id
   end
 
-  def get_issue(issue_id)
+  def get_issue(issue_id, current_user)
     if default_issues_tracker?
-      issues.find_by(iid: issue_id)
+      IssuesFinder.new(current_user, project_id: id).find_by(iid: issue_id)
     else
       ExternalIssue.new(issue_id, self)
     end
@@ -719,27 +714,32 @@ class Project < ActiveRecord::Base
     update_column(:has_external_wiki, services.external_wikis.any?)
   end
 
-  def build_missing_services
+  def find_or_initialize_services
     services_templates = Service.where(template: true)
 
-    Service.available_services_names.each do |service_name|
+    Service.available_services_names.map do |service_name|
       service = find_service(services, service_name)
 
-      # If service is available but missing in db
-      if service.nil?
+      if service
+        service
+      else
         # We should check if template for the service exists
         template = find_service(services_templates, service_name)
 
         if template.nil?
-          # If no template, we should create an instance. Ex `create_gitlab_ci_service`
-          public_send("create_#{service_name}_service")
+          # If no template, we should create an instance. Ex `build_gitlab_ci_service`
+          public_send("build_#{service_name}_service")
         else
-          Service.create_from_template(self.id, template)
+          Service.build_from_template(id, template)
         end
       end
     end
   end
 
+  def find_or_initialize_service(name)
+    find_or_initialize_services.find { |service| service.to_param == name }
+  end
+
   def create_labels
     Label.templates.each do |label|
       params = label.attributes.except('id', 'template', 'created_at', 'updated_at')
@@ -759,6 +759,22 @@ class Project < ActiveRecord::Base
     @ci_service ||= ci_services.reorder(nil).find_by(active: true)
   end
 
+  def deployment_services
+    services.where(category: :deployment)
+  end
+
+  def deployment_service
+    @deployment_service ||= deployment_services.reorder(nil).find_by(active: true)
+  end
+
+  def monitoring_services
+    services.where(category: :monitoring)
+  end
+
+  def monitoring_service
+    @monitoring_service ||= monitoring_services.reorder(nil).find_by(active: true)
+  end
+
   def jira_tracker?
     issues_tracker.to_param == 'jira'
   end
@@ -809,25 +825,6 @@ class Project < ActiveRecord::Base
     end
   end
 
-  def name_with_namespace
-    @name_with_namespace ||= begin
-                               if namespace
-                                 namespace.human_name + ' / ' + name
-                               else
-                                 name
-                               end
-                             end
-  end
-  alias_method :human_name, :name_with_namespace
-
-  def path_with_namespace
-    if namespace
-      namespace.path + '/' + path
-    else
-      path
-    end
-  end
-
   def execute_hooks(data, hooks_scope = :push_hooks)
     hooks.send(hooks_scope).each do |hook|
       hook.async_execute(data, hooks_scope.to_s)
@@ -848,10 +845,6 @@ class Project < ActiveRecord::Base
     false
   end
 
-  def empty_repo?
-    !repository.exists? || !repository.has_visible_content?
-  end
-
   def repo
     repository.raw
   end
@@ -860,10 +853,6 @@ class Project < ActiveRecord::Base
     gitlab_shell.url_to_repo(path_with_namespace)
   end
 
-  def namespace_dir
-    namespace.try(:path) || ''
-  end
-
   def repo_exists?
     @repo_exists ||= repository.exists?
   rescue
@@ -886,8 +875,10 @@ class Project < ActiveRecord::Base
     url_to_repo
   end
 
-  def http_url_to_repo
-    "#{web_url}.git"
+  def http_url_to_repo(user = nil)
+    credentials = Gitlab::UrlSanitizer.http_credentials_for_user(user)
+
+    Gitlab::UrlSanitizer.new("#{web_url}.git", credentials: credentials).full_url
   end
 
   # Check if current branch name is marked as protected in the system
@@ -912,8 +903,8 @@ class Project < ActiveRecord::Base
 
   def rename_repo
     path_was = previous_changes['path'].first
-    old_path_with_namespace = File.join(namespace_dir, path_was)
-    new_path_with_namespace = File.join(namespace_dir, path)
+    old_path_with_namespace = File.join(namespace.full_path, path_was)
+    new_path_with_namespace = File.join(namespace.full_path, path)
 
     Rails.logger.error "Attempting to rename #{old_path_with_namespace} -> #{new_path_with_namespace}"
 
@@ -923,7 +914,7 @@ class Project < ActiveRecord::Base
       Rails.logger.error "Project #{old_path_with_namespace} cannot be renamed because container registry tags are present"
 
       # we currently doesn't support renaming repository if it contains tags in container registry
-      raise Exception.new('Project cannot be renamed, because tags are present in its container registry')
+      raise StandardError.new('Project cannot be renamed, because tags are present in its container registry')
     end
 
     if gitlab_shell.mv_repository(repository_storage_path, old_path_with_namespace, new_path_with_namespace)
@@ -933,7 +924,6 @@ class Project < ActiveRecord::Base
       begin
         gitlab_shell.mv_repository(repository_storage_path, "#{old_path_with_namespace}.wiki", "#{new_path_with_namespace}.wiki")
         send_move_instructions(old_path_with_namespace)
-        reset_events_cache
 
         @old_path_with_namespace = old_path_with_namespace
 
@@ -951,12 +941,13 @@ class Project < ActiveRecord::Base
 
       # if we cannot move namespace directory we should rollback
       # db changes in order to prevent out of sync between db and fs
-      raise Exception.new('repository cannot be renamed')
+      raise StandardError.new('repository cannot be renamed')
     end
 
     Gitlab::AppLogger.info "Project was renamed: #{old_path_with_namespace} -> #{new_path_with_namespace}"
 
-    Gitlab::UploadsTransfer.new.rename_project(path_was, path, namespace.path)
+    Gitlab::UploadsTransfer.new.rename_project(path_was, path, namespace.full_path)
+    Gitlab::PagesTransfer.new.rename_project(path_was, path, namespace.full_path)
   end
 
   # Expires various caches before a project is renamed.
@@ -1000,22 +991,6 @@ class Project < ActiveRecord::Base
     attrs
   end
 
-  # Reset events cache related to this project
-  #
-  # Since we do cache @event we need to reset cache in special cases:
-  # * when project was moved
-  # * when project was renamed
-  # * when the project avatar changes
-  # Events cache stored like  events/23-20130109142513.
-  # The cache key includes updated_at timestamp.
-  # Thus it will automatically generate a new fragment
-  # when the event is updated because the key changes.
-  def reset_events_cache
-    Event.where(project_id: self.id).
-      order('id DESC').limit(100).
-      update_all(updated_at: Time.now)
-  end
-
   def project_member(user)
     project_members.find_by(user_id: user)
   end
@@ -1030,7 +1005,7 @@ class Project < ActiveRecord::Base
   end
 
   def visibility_level_field
-    visibility_level
+    :visibility_level
   end
 
   def archive!
@@ -1047,7 +1022,7 @@ class Project < ActiveRecord::Base
                                         "refs/heads/#{branch}",
                                         force: true)
     repository.copy_gitattributes(branch)
-    repository.expire_avatar_cache(branch)
+    repository.after_change_head
     reload_default_branch
   end
 
@@ -1055,18 +1030,6 @@ class Project < ActiveRecord::Base
     forked? && project == forked_from_project
   end
 
-  def update_repository_size
-    update_attribute(:repository_size, repository.size)
-  end
-
-  def update_commit_count
-    update_attribute(:commit_count, repository.commit_count)
-  end
-
-  def forks_count
-    forks.count
-  end
-
   def origin_merge_requests
     merge_requests.where(source_project_id: self.id)
   end
@@ -1121,12 +1084,20 @@ class Project < ActiveRecord::Base
     project_feature.update_attribute(:builds_access_level, ProjectFeature::ENABLED)
   end
 
+  def shared_runners_available?
+    shared_runners_enabled?
+  end
+
+  def shared_runners
+    shared_runners_available? ? Ci::Runner.shared : Ci::Runner.none
+  end
+
   def any_runners?(&block)
     if runners.active.any?(&block)
       return true
     end
 
-    shared_runners_enabled? && Ci::Runner.shared.active.any?(&block)
+    shared_runners.active.any?(&block)
   end
 
   def valid_runners_token?(token)
@@ -1174,6 +1145,51 @@ class Project < ActiveRecord::Base
     ensure_runners_token!
   end
 
+  def pages_deployed?
+    Dir.exist?(public_pages_path)
+  end
+
+  def pages_url
+    subdomain, _, url_path = full_path.partition('/')
+
+    # The hostname always needs to be in downcased
+    # All web servers convert hostname to lowercase
+    host = "#{subdomain}.#{Settings.pages.host}".downcase
+
+    # The host in URL always needs to be downcased
+    url = Gitlab.config.pages.url.sub(/^https?:\/\//) do |prefix|
+      "#{prefix}#{subdomain}."
+    end.downcase
+
+    # If the project path is the same as host, we serve it as group page
+    return url if host == url_path
+
+    "#{url}/#{url_path}"
+  end
+
+  def pages_subdomain
+    full_path.partition('/').first
+  end
+
+  def pages_path
+    File.join(Settings.pages.path, path_with_namespace)
+  end
+
+  def public_pages_path
+    File.join(pages_path, 'public')
+  end
+
+  def remove_pages
+    # 1. We rename pages to temporary directory
+    # 2. We wait 5 minutes, due to NFS caching
+    # 3. We asynchronously remove pages with force
+    temp_path = "#{path}.#{SecureRandom.hex}.deleted"
+
+    if Gitlab::PagesTransfer.new.rename_project(path, temp_path, namespace.full_path)
+      PagesWorker.perform_in(5.minutes, :remove, namespace.full_path, temp_path)
+    end
+  end
+
   def wiki
     @wiki ||= ProjectWiki.new(self, self.owner)
   end
@@ -1184,6 +1200,10 @@ class Project < ActiveRecord::Base
     end
   end
 
+  def pipeline_status
+    @pipeline_status ||= Ci::PipelineStatus.load_for_project(self)
+  end
+
   def mark_import_as_failed(error_message)
     original_errors = errors.dup
     sanitized_message = Gitlab::UrlSanitizer.sanitize(error_message)
@@ -1220,7 +1240,7 @@ class Project < ActiveRecord::Base
   end
 
   def ensure_dir_exist
-    gitlab_shell.add_namespace(repository_storage_path, namespace.path)
+    gitlab_shell.add_namespace(repository_storage_path, namespace.full_path)
   end
 
   def predefined_variables
@@ -1228,7 +1248,7 @@ class Project < ActiveRecord::Base
       { key: 'CI_PROJECT_ID', value: id.to_s, public: true },
       { key: 'CI_PROJECT_NAME', value: path, public: true },
       { key: 'CI_PROJECT_PATH', value: path_with_namespace, public: true },
-      { key: 'CI_PROJECT_NAMESPACE', value: namespace.path, public: true },
+      { key: 'CI_PROJECT_NAMESPACE', value: namespace.full_path, public: true },
       { key: 'CI_PROJECT_URL', value: web_url, public: true }
     ]
   end
@@ -1253,18 +1273,10 @@ class Project < ActiveRecord::Base
     end
   end
 
-  # Checks if `user` is authorized for this project, with at least the
-  # `min_access_level` (if given).
-  #
-  # If you change the logic of this method, please also update `User#authorized_projects`
-  def authorized_for_user?(user, min_access_level = nil)
-    return false unless user
-
-    return true if personal? && namespace_id == user.namespace_id
+  def deployment_variables
+    return [] unless deployment_service
 
-    authorized_for_user_by_group?(user, min_access_level) ||
-      authorized_for_user_by_members?(user, min_access_level) ||
-      authorized_for_user_by_shared_projects?(user, min_access_level)
+    deployment_service.predefined_variables
   end
 
   def append_or_update_attribute(name, value)
@@ -1289,55 +1301,65 @@ class Project < ActiveRecord::Base
     Gitlab::Redis.with { |redis| redis.del(pushes_since_gc_redis_key) }
   end
 
-  def environments_for(ref, commit, with_tags: false)
-    environment_ids = deployments.group(:environment_id).
-      select(:environment_id)
+  def route_map_for(commit_sha)
+    @route_maps_by_commit ||= Hash.new do |h, sha|
+      h[sha] = begin
+        data = repository.route_map_for(sha)
+        next unless data
 
-    environment_ids =
-      if with_tags
-        environment_ids.where('ref=? OR tag IS TRUE', ref)
-      else
-        environment_ids.where(ref: ref)
+        Gitlab::RouteMap.new(data)
+      rescue Gitlab::RouteMap::FormatError
+        nil
       end
-
-    environments.available.where(id: environment_ids).select do |environment|
-      environment.includes_commit?(commit)
     end
+
+    @route_maps_by_commit[commit_sha]
   end
 
-  private
+  def public_path_for_source_path(path, commit_sha)
+    map = route_map_for(commit_sha)
+    return unless map
 
-  def pushes_since_gc_redis_key
-    "projects/#{id}/pushes_since_gc"
+    map.public_path_for_source_path(path)
   end
 
-  def default_branch_protected?
-    current_application_settings.default_branch_protection == Gitlab::Access::PROTECTION_FULL ||
-      current_application_settings.default_branch_protection == Gitlab::Access::PROTECTION_DEV_CAN_MERGE
+  def parent
+    namespace
   end
 
-  def authorized_for_user_by_group?(user, min_access_level)
-    member = user.group_members.find_by(source_id: group)
-
-    member && (!min_access_level || member.access_level >= min_access_level)
+  def parent_changed?
+    namespace_id_changed?
   end
 
-  def authorized_for_user_by_members?(user, min_access_level)
-    member = members.find_by(user_id: user)
+  alias_method :name_with_namespace, :full_name
+  alias_method :human_name, :full_name
+  alias_method :path_with_namespace, :full_path
 
-    member && (!min_access_level || member.access_level >= min_access_level)
+  private
+
+  def cross_namespace_reference?(from)
+    case from
+    when Project
+      namespace != from.namespace
+    when Namespace
+      namespace != from
+    end
   end
 
-  def authorized_for_user_by_shared_projects?(user, min_access_level)
-    shared_projects = user.group_members.joins(group: :shared_projects).
-      where(project_group_links: { project_id: self })
+  # Check if a reference is being done cross-project
+  def cross_project_reference?(from)
+    return true if from.is_a?(Namespace)
 
-    if min_access_level
-      members_scope = { access_level: Gitlab::Access.values.select { |access| access >= min_access_level } }
-      shared_projects = shared_projects.where(members: members_scope)
-    end
+    from && self != from
+  end
 
-    shared_projects.any?
+  def pushes_since_gc_redis_key
+    "projects/#{id}/pushes_since_gc"
+  end
+
+  def default_branch_protected?
+    current_application_settings.default_branch_protection == Gitlab::Access::PROTECTION_FULL ||
+      current_application_settings.default_branch_protection == Gitlab::Access::PROTECTION_DEV_CAN_MERGE
   end
 
   # Similar to the normal callbacks that hook into the life cycle of an
@@ -1350,4 +1372,26 @@ class Project < ActiveRecord::Base
   def validate_board_limit(board)
     raise BoardLimitExceeded, 'Number of permitted boards exceeded' if boards.size >= NUMBER_OF_PERMITTED_BOARDS
   end
+
+  def update_project_statistics
+    stats = statistics || build_statistics
+    stats.update(namespace_id: namespace_id)
+  end
+
+  def check_pending_delete
+    return if valid_attribute?(:name) && valid_attribute?(:path)
+    return unless pending_delete_twin
+
+    %i[route route.path name path].each do |error|
+      errors.delete(error)
+    end
+
+    errors.add(:base, "The project is still being deleted. Please try again later.")
+  end
+
+  def pending_delete_twin
+    return false unless path
+
+    Project.unscoped.where(pending_delete: true).find_by_full_path(path_with_namespace)
+  end
 end
diff --git a/app/models/project_authorization.rb b/app/models/project_authorization.rb
new file mode 100644
index 00000000000..4c7f4f5a429
--- /dev/null
+++ b/app/models/project_authorization.rb
@@ -0,0 +1,21 @@
+class ProjectAuthorization < ActiveRecord::Base
+  belongs_to :user
+  belongs_to :project
+
+  validates :project, presence: true
+  validates :access_level, inclusion: { in: Gitlab::Access.all_values }, presence: true
+  validates :user, uniqueness: { scope: [:project, :access_level] }, presence: true
+
+  def self.insert_authorizations(rows, per_batch = 1000)
+    rows.each_slice(per_batch) do |slice|
+      tuples = slice.map do |tuple|
+        tuple.map { |value| connection.quote(value) }
+      end
+
+      connection.execute <<-EOF.strip_heredoc
+      INSERT INTO project_authorizations (user_id, project_id, access_level)
+      VALUES #{tuples.map { |tuple| "(#{tuple.join(', ')})" }.join(', ')}
+      EOF
+    end
+  end
+end
diff --git a/app/models/project_feature.rb b/app/models/project_feature.rb
index b37ce1d3cf6..e3ef4919b28 100644
--- a/app/models/project_feature.rb
+++ b/app/models/project_feature.rb
@@ -18,7 +18,16 @@ class ProjectFeature < ActiveRecord::Base
   PRIVATE  = 10
   ENABLED  = 20
 
-  FEATURES = %i(issues merge_requests wiki snippets builds repository)
+  FEATURES = %i(issues merge_requests wiki snippets builds repository).freeze
+
+  class << self
+    def access_level_attribute(feature)
+      feature = feature.model_name.plural.to_sym if feature.respond_to?(:model_name)
+      raise ArgumentError, "invalid project feature: #{feature}" unless FEATURES.include?(feature)
+
+      "#{feature}_access_level".to_sym
+    end
+  end
 
   # Default scopes force us to unscope here since a service may need to check
   # permissions for a project in pending_delete
@@ -35,29 +44,26 @@ class ProjectFeature < ActiveRecord::Base
   default_value_for :repository_access_level,     value: ENABLED, allows_nil: false
 
   def feature_available?(feature, user)
-    raise ArgumentError, 'invalid project feature' unless FEATURES.include?(feature)
-
-    get_permission(user, public_send("#{feature}_access_level"))
+    access_level = public_send(ProjectFeature.access_level_attribute(feature))
+    get_permission(user, access_level)
   end
 
   def builds_enabled?
-    return true unless builds_access_level
-
     builds_access_level > DISABLED
   end
 
   def wiki_enabled?
-    return true unless wiki_access_level
-
     wiki_access_level > DISABLED
   end
 
   def merge_requests_enabled?
-    return true unless merge_requests_access_level
-
     merge_requests_access_level > DISABLED
   end
 
+  def issues_enabled?
+    issues_access_level > DISABLED
+  end
+
   private
 
   # Validates builds and merge requests access level
diff --git a/app/models/project_group_link.rb b/app/models/project_group_link.rb
index db46def11eb..ac1e9ab2b0b 100644
--- a/app/models/project_group_link.rb
+++ b/app/models/project_group_link.rb
@@ -16,6 +16,8 @@ class ProjectGroupLink < ActiveRecord::Base
   validates :group_access, inclusion: { in: Gitlab::Access.values }, presence: true
   validate :different_group
 
+  after_commit :refresh_group_members_authorized_projects
+
   def self.access_options
     Gitlab::Access.options
   end
@@ -31,8 +33,19 @@ class ProjectGroupLink < ActiveRecord::Base
   private
 
   def different_group
-    if self.group && self.project && self.project.group == self.group
-      errors.add(:base, "Project cannot be shared with the project it is in.")
+    return unless self.group && self.project
+
+    project_group = self.project.group
+    return unless project_group
+
+    group_ids = project_group.ancestors.map(&:id).push(project_group.id)
+
+    if group_ids.include?(self.group.id)
+      errors.add(:base, "Project cannot be shared with the group it is in or one of its ancestors.")
     end
   end
+
+  def refresh_group_members_authorized_projects
+    group.refresh_members_authorized_projects
+  end
 end
diff --git a/app/models/project_label.rb b/app/models/project_label.rb
index 82f47f0e8fd..313815e5869 100644
--- a/app/models/project_label.rb
+++ b/app/models/project_label.rb
@@ -16,8 +16,8 @@ class ProjectLabel < Label
     'project_id'
   end
 
-  def to_reference(target_project = nil, format: :id)
-    super(project, target_project, format: format)
+  def to_reference(target_project = nil, format: :id, full: false)
+    super(project, target_project: target_project, format: format, full: full)
   end
 
   private
diff --git a/app/models/project_services/asana_service.rb b/app/models/project_services/asana_service.rb
index 7c23b766763..3728f5642e4 100644
--- a/app/models/project_services/asana_service.rb
+++ b/app/models/project_services/asana_service.rb
@@ -25,7 +25,7 @@ You can create a Personal Access Token here:
 http://app.asana.com/-/account_api'
   end
 
-  def to_param
+  def self.to_param
     'asana'
   end
 
@@ -44,7 +44,7 @@ http://app.asana.com/-/account_api'
     ]
   end
 
-  def supported_events
+  def self.supported_events
     %w(push)
   end
 
diff --git a/app/models/project_services/assembla_service.rb b/app/models/project_services/assembla_service.rb
index d839221d315..aeeff8917bf 100644
--- a/app/models/project_services/assembla_service.rb
+++ b/app/models/project_services/assembla_service.rb
@@ -12,7 +12,7 @@ class AssemblaService < Service
     'Project Management Software (Source Commits Endpoint)'
   end
 
-  def to_param
+  def self.to_param
     'assembla'
   end
 
@@ -23,7 +23,7 @@ class AssemblaService < Service
     ]
   end
 
-  def supported_events
+  def self.supported_events
     %w(push)
   end
 
diff --git a/app/models/project_services/bamboo_service.rb b/app/models/project_services/bamboo_service.rb
index b5c76e4d4fe..400020ee04a 100644
--- a/app/models/project_services/bamboo_service.rb
+++ b/app/models/project_services/bamboo_service.rb
@@ -1,4 +1,6 @@
 class BambooService < CiService
+  include ReactiveService
+
   prop_accessor :bamboo_url, :build_key, :username, :password
 
   validates :bamboo_url, presence: true, url: true, if: :activated?
@@ -38,7 +40,7 @@ class BambooService < CiService
     'You must set up automatic revision labeling and a repository trigger in Bamboo.'
   end
 
-  def to_param
+  def self.to_param
     'bamboo'
   end
 
@@ -54,35 +56,46 @@ class BambooService < CiService
     ]
   end
 
-  def supported_events
-    %w(push)
+  def build_page(sha, ref)
+    with_reactive_cache(sha, ref) {|cached| cached[:build_page] }
   end
 
-  def build_info(sha)
-    @response = get_path("rest/api/latest/result?label=#{sha}")
+  def commit_status(sha, ref)
+    with_reactive_cache(sha, ref) {|cached| cached[:commit_status] }
   end
 
-  def build_page(sha, ref)
-    build_info(sha) if @response.nil? || !@response.code
+  def execute(data)
+    return unless supported_events.include?(data[:object_kind])
+
+    get_path("updateAndBuild.action?buildKey=#{build_key}")
+  end
+
+  def calculate_reactive_cache(sha, ref)
+    response = get_path("rest/api/latest/result?label=#{sha}")
+
+    { build_page: read_build_page(response), commit_status: read_commit_status(response) }
+  end
 
-    if @response.code != 200 || @response['results']['results']['size'] == '0'
+  private
+
+  def read_build_page(response)
+    if response.code != 200 || response['results']['results']['size'] == '0'
       # If actual build link can't be determined, send user to build summary page.
       URI.join("#{bamboo_url}/", "browse/#{build_key}").to_s
     else
       # If actual build link is available, go to build result page.
-      result_key = @response['results']['results']['result']['planResultKey']['key']
+      result_key = response['results']['results']['result']['planResultKey']['key']
       URI.join("#{bamboo_url}/", "browse/#{result_key}").to_s
     end
   end
 
-  def commit_status(sha, ref)
-    build_info(sha) if @response.nil? || !@response.code
-    return :error unless @response.code == 200 || @response.code == 404
+  def read_commit_status(response)
+    return :error unless response.code == 200 || response.code == 404
 
-    status = if @response.code == 404 || @response['results']['results']['size'] == '0'
+    status = if response.code == 404 || response['results']['results']['size'] == '0'
                'Pending'
              else
-               @response['results']['results']['result']['buildState']
+               response['results']['results']['result']['buildState']
              end
 
     if status.include?('Success')
@@ -96,14 +109,6 @@ class BambooService < CiService
     end
   end
 
-  def execute(data)
-    return unless supported_events.include?(data[:object_kind])
-
-    get_path("updateAndBuild.action?buildKey=#{build_key}")
-  end
-
-  private
-
   def build_url(path)
     URI.join("#{bamboo_url}/", path).to_s
   end
diff --git a/app/models/project_services/bugzilla_service.rb b/app/models/project_services/bugzilla_service.rb
index 338e685339a..046e2809f45 100644
--- a/app/models/project_services/bugzilla_service.rb
+++ b/app/models/project_services/bugzilla_service.rb
@@ -19,7 +19,7 @@ class BugzillaService < IssueTrackerService
     end
   end
 
-  def to_param
+  def self.to_param
     'bugzilla'
   end
 end
diff --git a/app/models/project_services/buildkite_service.rb b/app/models/project_services/buildkite_service.rb
index 86a06321e21..5fb95050b83 100644
--- a/app/models/project_services/buildkite_service.rb
+++ b/app/models/project_services/buildkite_service.rb
@@ -1,9 +1,12 @@
 require "addressable/uri"
 
 class BuildkiteService < CiService
-  ENDPOINT = "https://buildkite.com"
+  include ReactiveService
 
-  prop_accessor :project_url, :token, :enable_ssl_verification
+  ENDPOINT = "https://buildkite.com".freeze
+
+  prop_accessor :project_url, :token
+  boolean_accessor :enable_ssl_verification
 
   validates :project_url, presence: true, url: true, if: :activated?
   validates :token, presence: true, if: :activated?
@@ -21,10 +24,6 @@ class BuildkiteService < CiService
     hook.save
   end
 
-  def supported_events
-    %w(push)
-  end
-
   def execute(data)
     return unless supported_events.include?(data[:object_kind])
 
@@ -32,13 +31,7 @@ class BuildkiteService < CiService
   end
 
   def commit_status(sha, ref)
-    response = HTTParty.get(commit_status_path(sha), verify: false)
-
-    if response.code == 200 && response['status']
-      response['status']
-    else
-      :error
-    end
+    with_reactive_cache(sha, ref) {|cached| cached[:commit_status] }
   end
 
   def commit_status_path(sha)
@@ -57,7 +50,7 @@ class BuildkiteService < CiService
     'Continuous integration and deployments'
   end
 
-  def to_param
+  def self.to_param
     'buildkite'
   end
 
@@ -77,6 +70,19 @@ class BuildkiteService < CiService
     ]
   end
 
+  def calculate_reactive_cache(sha, ref)
+    response = HTTParty.get(commit_status_path(sha), verify: false)
+
+    status =
+      if response.code == 200 && response['status']
+        response['status']
+      else
+        :error
+      end
+
+    { commit_status: status }
+  end
+
   private
 
   def webhook_token
diff --git a/app/models/project_services/builds_email_service.rb b/app/models/project_services/builds_email_service.rb
index 201b94b065b..0c526b53d72 100644
--- a/app/models/project_services/builds_email_service.rb
+++ b/app/models/project_services/builds_email_service.rb
@@ -1,107 +1,11 @@
+# This class is to be removed with 9.1
+# We should also by then remove BuildsEmailService from database
 class BuildsEmailService < Service
-  prop_accessor :recipients
-  boolean_accessor :add_pusher
-  boolean_accessor :notify_only_broken_builds
-  validates :recipients, presence: true, if: ->(s) { s.activated? && !s.add_pusher? }
-
-  def initialize_properties
-    if properties.nil?
-      self.properties = {}
-      self.notify_only_broken_builds = true
-    end
-  end
-
-  def title
-    'Builds emails'
-  end
-
-  def description
-    'Email the builds status to a list of recipients.'
-  end
-
-  def to_param
+  def self.to_param
     'builds_email'
   end
 
-  def supported_events
-    %w(build)
-  end
-
-  def execute(push_data)
-    return unless supported_events.include?(push_data[:object_kind])
-    return unless should_build_be_notified?(push_data)
-
-    recipients = all_recipients(push_data)
-
-    if recipients.any?
-      BuildEmailWorker.perform_async(
-        push_data[:build_id],
-        recipients,
-        push_data
-      )
-    end
-  end
-
-  def can_test?
-    project.builds.any?
-  end
-
-  def disabled_title
-    "Please setup a build on your repository."
-  end
-
-  def test_data(project = nil, user = nil)
-    Gitlab::DataBuilder::Build.build(project.builds.last)
-  end
-
-  def fields
-    [
-      { type: 'textarea', name: 'recipients', placeholder: 'Emails separated by comma' },
-      { type: 'checkbox', name: 'add_pusher', label: 'Add pusher to recipients list' },
-      { type: 'checkbox', name: 'notify_only_broken_builds' },
-    ]
-  end
-
-  def test(data)
-    begin
-      # bypass build status verification when testing
-      data[:build_status] = "failed"
-      data[:build_allow_failure] = false
-
-      result = execute(data)
-    rescue StandardError => error
-      return { success: false, result: error }
-    end
-
-    { success: true, result: result }
-  end
-
-  def should_build_be_notified?(data)
-    case data[:build_status]
-    when 'success'
-      !notify_only_broken_builds?
-    when 'failed'
-      !allow_failure?(data)
-    else
-      false
-    end
-  end
-
-  def allow_failure?(data)
-    data[:build_allow_failure] == true
-  end
-
-  def all_recipients(data)
-    all_recipients = []
-
-    unless recipients.blank?
-      all_recipients += recipients.split(',').compact.reject(&:blank?)
-    end
-
-    if add_pusher? && data[:user][:email]
-      all_recipients << data[:user][:email]
-    end
-
-    all_recipients
+  def self.supported_events
+    %w[]
   end
 end
diff --git a/app/models/project_services/campfire_service.rb b/app/models/project_services/campfire_service.rb
index 5af93860d09..0de59af5652 100644
--- a/app/models/project_services/campfire_service.rb
+++ b/app/models/project_services/campfire_service.rb
@@ -12,7 +12,7 @@ class CampfireService < Service
     'Simple web-based real-time group chat'
   end
 
-  def to_param
+  def self.to_param
     'campfire'
   end
 
@@ -24,7 +24,7 @@ class CampfireService < Service
     ]
   end
 
-  def supported_events
+  def self.supported_events
     %w(push)
   end
 
diff --git a/app/models/project_services/chat_message/base_message.rb b/app/models/project_services/chat_message/base_message.rb
new file mode 100644
index 00000000000..86d271a3f69
--- /dev/null
+++ b/app/models/project_services/chat_message/base_message.rb
@@ -0,0 +1,38 @@
+require 'slack-notifier'
+
+module ChatMessage
+  class BaseMessage
+    def initialize(params)
+      raise NotImplementedError
+    end
+
+    def pretext
+      format(message)
+    end
+
+    def fallback
+    end
+
+    def attachments
+      raise NotImplementedError
+    end
+
+    private
+
+    def message
+      raise NotImplementedError
+    end
+
+    def format(string)
+      Slack::Notifier::LinkFormatter.format(string)
+    end
+
+    def attachment_color
+      '#345'
+    end
+
+    def link(text, url)
+      "[#{text}](#{url})"
+    end
+  end
+end
diff --git a/app/models/project_services/chat_message/issue_message.rb b/app/models/project_services/chat_message/issue_message.rb
new file mode 100644
index 00000000000..791e5b0cec7
--- /dev/null
+++ b/app/models/project_services/chat_message/issue_message.rb
@@ -0,0 +1,70 @@
+module ChatMessage
+  class IssueMessage < BaseMessage
+    attr_reader :user_name
+    attr_reader :title
+    attr_reader :project_name
+    attr_reader :project_url
+    attr_reader :issue_iid
+    attr_reader :issue_url
+    attr_reader :action
+    attr_reader :state
+    attr_reader :description
+
+    def initialize(params)
+      @user_name = params[:user][:username]
+      @project_name = params[:project_name]
+      @project_url = params[:project_url]
+
+      obj_attr = params[:object_attributes]
+      obj_attr = HashWithIndifferentAccess.new(obj_attr)
+      @title = obj_attr[:title]
+      @issue_iid = obj_attr[:iid]
+      @issue_url = obj_attr[:url]
+      @action = obj_attr[:action]
+      @state = obj_attr[:state]
+      @description = obj_attr[:description] || ''
+    end
+
+    def attachments
+      return [] unless opened_issue?
+
+      description_message
+    end
+
+    private
+
+    def message
+      case state
+      when "opened"
+        "[#{project_link}] Issue #{state} by #{user_name}"
+      else
+        "[#{project_link}] Issue #{issue_link} #{state} by #{user_name}"
+      end
+    end
+
+    def opened_issue?
+      action == "open"
+    end
+
+    def description_message
+      [{
+        title: issue_title,
+        title_link: issue_url,
+        text: format(description),
+        color: "#C95823"
+      }]
+    end
+
+    def project_link
+      link(project_name, project_url)
+    end
+
+    def issue_link
+      link(issue_title, issue_url)
+    end
+
+    def issue_title
+      "##{issue_iid} #{title}"
+    end
+  end
+end
diff --git a/app/models/project_services/chat_message/merge_message.rb b/app/models/project_services/chat_message/merge_message.rb
new file mode 100644
index 00000000000..5e5efca7bec
--- /dev/null
+++ b/app/models/project_services/chat_message/merge_message.rb
@@ -0,0 +1,60 @@
+module ChatMessage
+  class MergeMessage < BaseMessage
+    attr_reader :user_name
+    attr_reader :project_name
+    attr_reader :project_url
+    attr_reader :merge_request_id
+    attr_reader :source_branch
+    attr_reader :target_branch
+    attr_reader :state
+    attr_reader :title
+
+    def initialize(params)
+      @user_name = params[:user][:username]
+      @project_name = params[:project_name]
+      @project_url = params[:project_url]
+
+      obj_attr = params[:object_attributes]
+      obj_attr = HashWithIndifferentAccess.new(obj_attr)
+      @merge_request_id = obj_attr[:iid]
+      @source_branch = obj_attr[:source_branch]
+      @target_branch = obj_attr[:target_branch]
+      @state = obj_attr[:state]
+      @title = format_title(obj_attr[:title])
+    end
+
+    def pretext
+      format(message)
+    end
+
+    def attachments
+      []
+    end
+
+    private
+
+    def format_title(title)
+      '*' + title.lines.first.chomp + '*'
+    end
+
+    def message
+      merge_request_message
+    end
+
+    def project_link
+      link(project_name, project_url)
+    end
+
+    def merge_request_message
+      "#{user_name} #{state} #{merge_request_link} in #{project_link}: #{title}"
+    end
+
+    def merge_request_link
+      link("merge request !#{merge_request_id}", merge_request_url)
+    end
+
+    def merge_request_url
+      "#{project_url}/merge_requests/#{merge_request_id}"
+    end
+  end
+end
diff --git a/app/models/project_services/chat_message/note_message.rb b/app/models/project_services/chat_message/note_message.rb
new file mode 100644
index 00000000000..552113bac29
--- /dev/null
+++ b/app/models/project_services/chat_message/note_message.rb
@@ -0,0 +1,82 @@
+module ChatMessage
+  class NoteMessage < BaseMessage
+    attr_reader :message
+    attr_reader :user_name
+    attr_reader :project_name
+    attr_reader :project_url
+    attr_reader :note
+    attr_reader :note_url
+
+    def initialize(params)
+      params = HashWithIndifferentAccess.new(params)
+      @user_name = params[:user][:username]
+      @project_name = params[:project_name]
+      @project_url = params[:project_url]
+
+      obj_attr = params[:object_attributes]
+      obj_attr = HashWithIndifferentAccess.new(obj_attr)
+      @note = obj_attr[:note]
+      @note_url = obj_attr[:url]
+      noteable_type = obj_attr[:noteable_type]
+
+      case noteable_type
+      when "Commit"
+        create_commit_note(HashWithIndifferentAccess.new(params[:commit]))
+      when "Issue"
+        create_issue_note(HashWithIndifferentAccess.new(params[:issue]))
+      when "MergeRequest"
+        create_merge_note(HashWithIndifferentAccess.new(params[:merge_request]))
+      when "Snippet"
+        create_snippet_note(HashWithIndifferentAccess.new(params[:snippet]))
+      end
+    end
+
+    def attachments
+      description_message
+    end
+
+    private
+
+    def format_title(title)
+      title.lines.first.chomp
+    end
+
+    def create_commit_note(commit)
+      commit_sha = commit[:id]
+      commit_sha = Commit.truncate_sha(commit_sha)
+      commented_on_message(
+        "commit #{commit_sha}",
+        format_title(commit[:message]))
+    end
+
+    def create_issue_note(issue)
+      commented_on_message(
+        "issue ##{issue[:iid]}",
+        format_title(issue[:title]))
+    end
+
+    def create_merge_note(merge_request)
+      commented_on_message(
+        "merge request !#{merge_request[:iid]}",
+        format_title(merge_request[:title]))
+    end
+
+    def create_snippet_note(snippet)
+      commented_on_message(
+        "snippet ##{snippet[:id]}",
+        format_title(snippet[:title]))
+    end
+
+    def description_message
+      [{ text: format(note), color: attachment_color }]
+    end
+
+    def project_link
+      link(project_name, project_url)
+    end
+
+    def commented_on_message(target, title)
+      @message = "#{user_name} #{link('commented on ' + target, note_url)} in #{project_link}: *#{title}*"
+    end
+  end
+end
diff --git a/app/models/project_services/chat_message/pipeline_message.rb b/app/models/project_services/chat_message/pipeline_message.rb
new file mode 100644
index 00000000000..210027565a8
--- /dev/null
+++ b/app/models/project_services/chat_message/pipeline_message.rb
@@ -0,0 +1,78 @@
+module ChatMessage
+  class PipelineMessage < BaseMessage
+    attr_reader :ref_type, :ref, :status, :project_name, :project_url,
+                :user_name, :duration, :pipeline_id
+
+    def initialize(data)
+      pipeline_attributes = data[:object_attributes]
+      @ref_type = pipeline_attributes[:tag] ? 'tag' : 'branch'
+      @ref = pipeline_attributes[:ref]
+      @status = pipeline_attributes[:status]
+      @duration = pipeline_attributes[:duration]
+      @pipeline_id = pipeline_attributes[:id]
+
+      @project_name = data[:project][:path_with_namespace]
+      @project_url = data[:project][:web_url]
+      @user_name = (data[:user] && data[:user][:name]) || 'API'
+    end
+
+    def pretext
+      ''
+    end
+
+    def fallback
+      format(message)
+    end
+
+    def attachments
+      [{ text: format(message), color: attachment_color }]
+    end
+
+    private
+
+    def message
+      "#{project_link}: Pipeline #{pipeline_link} of #{branch_link} #{ref_type} by #{user_name} #{humanized_status} in #{duration} #{'second'.pluralize(duration)}"
+    end
+
+    def format(string)
+      Slack::Notifier::LinkFormatter.format(string)
+    end
+
+    def humanized_status
+      case status
+      when 'success'
+        'passed'
+      else
+        status
+      end
+    end
+
+    def attachment_color
+      if status == 'success'
+        'good'
+      else
+        'danger'
+      end
+    end
+
+    def branch_url
+      "#{project_url}/commits/#{ref}"
+    end
+
+    def branch_link
+      "[#{ref}](#{branch_url})"
+    end
+
+    def project_link
+      "[#{project_name}](#{project_url})"
+    end
+
+    def pipeline_url
+      "#{project_url}/pipelines/#{pipeline_id}"
+    end
+
+    def pipeline_link
+      "[##{pipeline_id}](#{pipeline_url})"
+    end
+  end
+end
diff --git a/app/models/project_services/chat_message/push_message.rb b/app/models/project_services/chat_message/push_message.rb
new file mode 100644
index 00000000000..2d73b71ec37
--- /dev/null
+++ b/app/models/project_services/chat_message/push_message.rb
@@ -0,0 +1,110 @@
+module ChatMessage
+  class PushMessage < BaseMessage
+    attr_reader :after
+    attr_reader :before
+    attr_reader :commits
+    attr_reader :project_name
+    attr_reader :project_url
+    attr_reader :ref
+    attr_reader :ref_type
+    attr_reader :user_name
+
+    def initialize(params)
+      @after = params[:after]
+      @before = params[:before]
+      @commits = params.fetch(:commits, [])
+      @project_name = params[:project_name]
+      @project_url = params[:project_url]
+      @ref_type = Gitlab::Git.tag_ref?(params[:ref]) ? 'tag' : 'branch'
+      @ref = Gitlab::Git.ref_name(params[:ref])
+      @user_name = params[:user_name]
+    end
+
+    def pretext
+      format(message)
+    end
+
+    def attachments
+      return [] if new_branch? || removed_branch?
+
+      commit_message_attachments
+    end
+
+    private
+
+    def message
+      if new_branch?
+        new_branch_message
+      elsif removed_branch?
+        removed_branch_message
+      else
+        push_message
+      end
+    end
+
+    def format(string)
+      Slack::Notifier::LinkFormatter.format(string)
+    end
+
+    def new_branch_message
+      "#{user_name} pushed new #{ref_type} #{branch_link} to #{project_link}"
+    end
+
+    def removed_branch_message
+      "#{user_name} removed #{ref_type} #{ref} from #{project_link}"
+    end
+
+    def push_message
+      "#{user_name} pushed to #{ref_type} #{branch_link} of #{project_link} (#{compare_link})"
+    end
+
+    def commit_messages
+      commits.map { |commit| compose_commit_message(commit) }.join("\n")
+    end
+
+    def commit_message_attachments
+      [{ text: format(commit_messages), color: attachment_color }]
+    end
+
+    def compose_commit_message(commit)
+      author = commit[:author][:name]
+      id = Commit.truncate_sha(commit[:id])
+      message = commit[:message]
+      url = commit[:url]
+
+      "[#{id}](#{url}): #{message} - #{author}"
+    end
+
+    def new_branch?
+      Gitlab::Git.blank_ref?(before)
+    end
+
+    def removed_branch?
+      Gitlab::Git.blank_ref?(after)
+    end
+
+    def branch_url
+      "#{project_url}/commits/#{ref}"
+    end
+
+    def compare_url
+      "#{project_url}/compare/#{before}...#{after}"
+    end
+
+    def branch_link
+      "[#{ref}](#{branch_url})"
+    end
+
+    def project_link
+      "[#{project_name}](#{project_url})"
+    end
+
+    def compare_link
+      "[Compare changes](#{compare_url})"
+    end
+
+    def attachment_color
+      '#345'
+    end
+  end
+end
diff --git a/app/models/project_services/chat_message/wiki_page_message.rb b/app/models/project_services/chat_message/wiki_page_message.rb
new file mode 100644
index 00000000000..134083e4504
--- /dev/null
+++ b/app/models/project_services/chat_message/wiki_page_message.rb
@@ -0,0 +1,53 @@
+module ChatMessage
+  class WikiPageMessage < BaseMessage
+    attr_reader :user_name
+    attr_reader :title
+    attr_reader :project_name
+    attr_reader :project_url
+    attr_reader :wiki_page_url
+    attr_reader :action
+    attr_reader :description
+
+    def initialize(params)
+      @user_name = params[:user][:username]
+      @project_name = params[:project_name]
+      @project_url = params[:project_url]
+
+      obj_attr = params[:object_attributes]
+      obj_attr = HashWithIndifferentAccess.new(obj_attr)
+      @title = obj_attr[:title]
+      @wiki_page_url = obj_attr[:url]
+      @description = obj_attr[:content]
+
+      @action =
+        case obj_attr[:action]
+        when "create"
+          "created"
+        when "update"
+          "edited"
+        end
+    end
+
+    def attachments
+      description_message
+    end
+
+    private
+
+    def message
+      "#{user_name} #{action} #{wiki_page_link} in #{project_link}: *#{title}*"
+    end
+
+    def description_message
+      [{ text: format(@description), color: attachment_color }]
+    end
+
+    def project_link
+      "[#{project_name}](#{project_url})"
+    end
+
+    def wiki_page_link
+      "[wiki page](#{wiki_page_url})"
+    end
+  end
+end
diff --git a/app/models/project_services/chat_notification_service.rb b/app/models/project_services/chat_notification_service.rb
new file mode 100644
index 00000000000..75834103db5
--- /dev/null
+++ b/app/models/project_services/chat_notification_service.rb
@@ -0,0 +1,160 @@
+# Base class for Chat notifications services
+# This class is not meant to be used directly, but only to inherit from.
+class ChatNotificationService < Service
+  include ChatMessage
+
+  default_value_for :category, 'chat'
+
+  prop_accessor :webhook, :username, :channel
+  boolean_accessor :notify_only_broken_pipelines, :notify_only_default_branch
+
+  validates :webhook, presence: true, url: true, if: :activated?
+
+  def initialize_properties
+    # Custom serialized properties initialization
+    self.supported_events.each { |event| self.class.prop_accessor(event_channel_name(event)) }
+
+    if properties.nil?
+      self.properties = {}
+      self.notify_only_broken_pipelines = true
+      self.notify_only_default_branch = true
+    end
+  end
+
+  def can_test?
+    valid?
+  end
+
+  def self.supported_events
+    %w[push issue confidential_issue merge_request note tag_push
+       pipeline wiki_page]
+  end
+
+  def fields
+    default_fields + build_event_channels
+  end
+
+  def default_fields
+    [
+      { type: 'text', name: 'webhook', placeholder: "e.g. #{webhook_placeholder}" },
+      { type: 'text', name: 'username', placeholder: 'e.g. GitLab' },
+      { type: 'checkbox', name: 'notify_only_broken_pipelines' },
+      { type: 'checkbox', name: 'notify_only_default_branch' },
+    ]
+  end
+
+  def execute(data)
+    return unless supported_events.include?(data[:object_kind])
+    return unless webhook.present?
+
+    object_kind = data[:object_kind]
+
+    data = data.merge(
+      project_url: project_url,
+      project_name: project_name
+    )
+
+    # WebHook events often have an 'update' event that follows a 'open' or
+    # 'close' action. Ignore update events for now to prevent duplicate
+    # messages from arriving.
+
+    message = get_message(object_kind, data)
+
+    return false unless message
+
+    channel_name = get_channel_field(object_kind).presence || channel
+
+    opts = {}
+    opts[:channel] = channel_name if channel_name
+    opts[:username] = username if username
+
+    notifier = Slack::Notifier.new(webhook, opts)
+    notifier.ping(message.pretext, attachments: message.attachments, fallback: message.fallback)
+
+    true
+  end
+
+  def event_channel_names
+    supported_events.map { |event| event_channel_name(event) }
+  end
+
+  def event_field(event)
+    fields.find { |field| field[:name] == event_channel_name(event) }
+  end
+
+  def global_fields
+    fields.reject { |field| field[:name].end_with?('channel') }
+  end
+
+  def default_channel_placeholder
+    raise NotImplementedError
+  end
+
+  private
+
+  def get_message(object_kind, data)
+    case object_kind
+    when "push", "tag_push"
+      ChatMessage::PushMessage.new(data)
+    when "issue"
+      ChatMessage::IssueMessage.new(data) unless is_update?(data)
+    when "merge_request"
+      ChatMessage::MergeMessage.new(data) unless is_update?(data)
+    when "note"
+      ChatMessage::NoteMessage.new(data)
+    when "pipeline"
+      ChatMessage::PipelineMessage.new(data) if should_pipeline_be_notified?(data)
+    when "wiki_page"
+      ChatMessage::WikiPageMessage.new(data)
+    end
+  end
+
+  def get_channel_field(event)
+    field_name = event_channel_name(event)
+    self.public_send(field_name)
+  end
+
+  def build_event_channels
+    supported_events.reduce([]) do |channels, event|
+      channels << { type: 'text', name: event_channel_name(event), placeholder: default_channel_placeholder }
+    end
+  end
+
+  def event_channel_name(event)
+    "#{event}_channel"
+  end
+
+  def project_name
+    project.name_with_namespace.gsub(/\s/, '')
+  end
+
+  def project_url
+    project.web_url
+  end
+
+  def is_update?(data)
+    data[:object_attributes][:action] == 'update'
+  end
+
+  def should_pipeline_be_notified?(data)
+    notify_for_ref?(data) && notify_for_pipeline?(data)
+  end
+
+  def notify_for_ref?(data)
+    return true if data[:object_attributes][:tag]
+    return true unless notify_only_default_branch
+
+    data[:object_attributes][:ref] == project.default_branch
+  end
+
+  def notify_for_pipeline?(data)
+    case data[:object_attributes][:status]
+    when 'success'
+      !notify_only_broken_pipelines?
+    when 'failed'
+      true
+    else
+      false
+    end
+  end
+end
diff --git a/app/models/project_services/chat_slash_commands_service.rb b/app/models/project_services/chat_slash_commands_service.rb
new file mode 100644
index 00000000000..8b5bc24fd3c
--- /dev/null
+++ b/app/models/project_services/chat_slash_commands_service.rb
@@ -0,0 +1,52 @@
+# Base class for Chat services
+# This class is not meant to be used directly, but only to inherrit from.
+class ChatSlashCommandsService < Service
+  default_value_for :category, 'chat'
+
+  prop_accessor :token
+
+  has_many :chat_names, foreign_key: :service_id, dependent: :destroy
+
+  def valid_token?(token)
+    self.respond_to?(:token) &&
+      self.token.present? &&
+      ActiveSupport::SecurityUtils.variable_size_secure_compare(token, self.token)
+  end
+
+  def self.supported_events
+    %w()
+  end
+
+  def can_test?
+    false
+  end
+
+  def fields
+    [
+      { type: 'text', name: 'token', placeholder: 'XXxxXXxxXXxxXXxxXXxxXXxx' }
+    ]
+  end
+
+  def trigger(params)
+    return unless valid_token?(params[:token])
+
+    user = find_chat_user(params)
+
+    if user
+      Gitlab::ChatCommands::Command.new(project, user, params).execute
+    else
+      url = authorize_chat_name_url(params)
+      Gitlab::ChatCommands::Presenters::Access.new(url).authorize
+    end
+  end
+
+  private
+
+  def find_chat_user(params)
+    ChatNames::FindUserService.new(self, params).execute
+  end
+
+  def authorize_chat_name_url(params)
+    ChatNames::AuthorizeUserService.new(self, params).execute
+  end
+end
diff --git a/app/models/project_services/ci_service.rb b/app/models/project_services/ci_service.rb
index 596c00705ad..82979c8bd34 100644
--- a/app/models/project_services/ci_service.rb
+++ b/app/models/project_services/ci_service.rb
@@ -8,19 +8,11 @@ class CiService < Service
     self.respond_to?(:token) && self.token.present? && ActiveSupport::SecurityUtils.variable_size_secure_compare(token, self.token)
   end
 
-  def supported_events
+  def self.supported_events
     %w(push)
   end
 
-  def merge_request_page(iid, sha, ref)
-    commit_page(sha, ref)
-  end
-
-  def commit_page(sha, ref)
-    build_page(sha, ref)
-  end
-
-  # Return complete url to merge_request page
+  # Return complete url to build page
   #
   # Ex.
   #   http://jenkins.example.com:8888/job/test1/scm/bySHA1/12d65c
@@ -35,23 +27,6 @@ class CiService < Service
   #
   #
   # Ex.
-  #   @service.merge_request_status(9, '13be4ac', 'dev')
-  #   # => 'success'
-  #
-  #   @service.merge_request_status(10, '2abe4ac', 'dev)
-  #   # => 'running'
-  #
-  #
-  def merge_request_status(iid, sha, ref)
-    commit_status(sha, ref)
-  end
-
-  # Return string with build status or :error symbol
-  #
-  # Allowed states: 'success', 'failed', 'running', 'pending', 'skipped'
-  #
-  #
-  # Ex.
   #   @service.commit_status('13be4ac', 'master')
   #   # => 'success'
   #
diff --git a/app/models/project_services/custom_issue_tracker_service.rb b/app/models/project_services/custom_issue_tracker_service.rb
index b2f426dc2ac..dea915a4d05 100644
--- a/app/models/project_services/custom_issue_tracker_service.rb
+++ b/app/models/project_services/custom_issue_tracker_service.rb
@@ -23,7 +23,7 @@ class CustomIssueTrackerService < IssueTrackerService
     end
   end
 
-  def to_param
+  def self.to_param
     'custom_issue_tracker'
   end
 
diff --git a/app/models/project_services/deployment_service.rb b/app/models/project_services/deployment_service.rb
new file mode 100644
index 00000000000..91a55514a9a
--- /dev/null
+++ b/app/models/project_services/deployment_service.rb
@@ -0,0 +1,33 @@
+# Base class for deployment services
+#
+# These services integrate with a deployment solution like Kubernetes/OpenShift,
+# Mesosphere, etc, to provide additional features to environments.
+class DeploymentService < Service
+  default_value_for :category, 'deployment'
+
+  def self.supported_events
+    %w()
+  end
+
+  def predefined_variables
+    []
+  end
+
+  # Environments may have a number of terminals. Should return an array of
+  # hashes describing them, e.g.:
+  #
+  #     [{
+  #       :selectors    => {"a" => "b", "foo" => "bar"},
+  #       :url          => "wss://external.example.com/exec",
+  #       :headers      => {"Authorization" => "Token xxx"},
+  #       :subprotocols => ["foo"],
+  #       :ca_pem       => "----BEGIN CERTIFICATE...", # optional
+  #       :created_at   => Time.now.utc
+  #     }]
+  #
+  # Selectors should be a set of values that uniquely identify a particular
+  # terminal
+  def terminals(environment)
+    raise NotImplementedError
+  end
+end
diff --git a/app/models/project_services/drone_ci_service.rb b/app/models/project_services/drone_ci_service.rb
index 5e4dd101c53..2717c240f05 100644
--- a/app/models/project_services/drone_ci_service.rb
+++ b/app/models/project_services/drone_ci_service.rb
@@ -1,5 +1,8 @@
 class DroneCiService < CiService
-  prop_accessor :drone_url, :token, :enable_ssl_verification
+  include ReactiveService
+
+  prop_accessor :drone_url, :token
+  boolean_accessor :enable_ssl_verification
 
   validates :drone_url, presence: true, url: true, if: :activated?
   validates :token, presence: true, if: :activated?
@@ -9,7 +12,7 @@ class DroneCiService < CiService
   def compose_service_hook
     hook = service_hook || build_service_hook
     # If using a service template, project may not be available
-    hook.url = [drone_url, "/api/hook", "?owner=#{project.namespace.path}", "&name=#{project.path}", "&access_token=#{token}"].join if project
+    hook.url = [drone_url, "/api/hook", "?owner=#{project.namespace.full_path}", "&name=#{project.path}", "&access_token=#{token}"].join if project
     hook.enable_ssl_verification = !!enable_ssl_verification
     hook.save
   end
@@ -29,89 +32,53 @@ class DroneCiService < CiService
     true
   end
 
-  def supported_events
+  def self.supported_events
     %w(push merge_request tag_push)
   end
 
-  def merge_request_status_path(iid, sha = nil, ref = nil)
-    url = [drone_url,
-           "gitlab/#{project.namespace.path}/#{project.path}/pulls/#{iid}",
-           "?access_token=#{token}"]
-
-    URI.join(*url).to_s
-  end
-
   def commit_status_path(sha, ref)
     url = [drone_url,
-           "gitlab/#{project.namespace.path}/#{project.path}/commits/#{sha}",
-           "?branch=#{URI::encode(ref.to_s)}&access_token=#{token}"]
+           "gitlab/#{project.full_path}/commits/#{sha}",
+           "?branch=#{URI.encode(ref.to_s)}&access_token=#{token}"]
 
     URI.join(*url).to_s
   end
 
-  def merge_request_status(iid, sha, ref)
-    response = HTTParty.get(merge_request_status_path(iid), verify: enable_ssl_verification)
-
-    if response.code == 200 and response['status']
-      case response['status']
-      when 'killed'
-        :canceled
-      when 'failure', 'error'
-        # Because drone return error if some test env failed
-        :failed
-      else
-        response["status"]
-      end
-    else
-      :error
-    end
-  rescue Errno::ECONNREFUSED
-    :error
+  def commit_status(sha, ref)
+    with_reactive_cache(sha, ref) {|cached| cached[:commit_status] }
   end
 
-  def commit_status(sha, ref)
+  def calculate_reactive_cache(sha, ref)
     response = HTTParty.get(commit_status_path(sha, ref), verify: enable_ssl_verification)
 
-    if response.code == 200 and response['status']
-      case response['status']
-      when 'killed'
-        :canceled
-      when 'failure', 'error'
-        # Because drone return error if some test env failed
-        :failed
+    status =
+      if response.code == 200 && response['status']
+        case response['status']
+        when 'killed'
+          :canceled
+        when 'failure', 'error'
+          # Because drone return error if some test env failed
+          :failed
+        else
+          response["status"]
+        end
       else
-        response["status"]
+        :error
       end
-    else
-      :error
-    end
-  rescue Errno::ECONNREFUSED
-    :error
-  end
 
-  def merge_request_page(iid, sha, ref)
-    url = [drone_url,
-           "gitlab/#{project.namespace.path}/#{project.path}/redirect/pulls/#{iid}"]
-
-    URI.join(*url).to_s
+    { commit_status: status }
+  rescue Errno::ECONNREFUSED
+    { commit_status: :error }
   end
 
-  def commit_page(sha, ref)
+  def build_page(sha, ref)
     url = [drone_url,
-           "gitlab/#{project.namespace.path}/#{project.path}/redirect/commits/#{sha}",
-           "?branch=#{URI::encode(ref.to_s)}"]
+           "gitlab/#{project.full_path}/redirect/commits/#{sha}",
+           "?branch=#{URI.encode(ref.to_s)}"]
 
     URI.join(*url).to_s
   end
 
-  def commit_coverage(sha, ref)
-    nil
-  end
-
-  def build_page(sha, ref)
-    commit_page(sha, ref)
-  end
-
   def title
     'Drone CI'
   end
@@ -120,7 +87,7 @@ class DroneCiService < CiService
     'Drone is a Continuous Integration platform built on Docker, written in Go'
   end
 
-  def to_param
+  def self.to_param
     'drone_ci'
   end
 
@@ -147,7 +114,7 @@ class DroneCiService < CiService
   end
 
   def merge_request_valid?(data)
-    ['opened', 'reopened'].include?(data[:object_attributes][:state]) &&
+    %w(opened reopened).include?(data[:object_attributes][:state]) &&
       data[:object_attributes][:merge_status] == 'unchecked'
   end
 end
diff --git a/app/models/project_services/emails_on_push_service.rb b/app/models/project_services/emails_on_push_service.rb
index e0083c43adb..f4f913ee0b6 100644
--- a/app/models/project_services/emails_on_push_service.rb
+++ b/app/models/project_services/emails_on_push_service.rb
@@ -1,6 +1,6 @@
 class EmailsOnPushService < Service
-  prop_accessor :send_from_committer_email
-  prop_accessor :disable_diffs
+  boolean_accessor :send_from_committer_email
+  boolean_accessor :disable_diffs
   prop_accessor :recipients
   validates :recipients, presence: true, if: :activated?
 
@@ -12,11 +12,11 @@ class EmailsOnPushService < Service
     'Email the commits and diff of each push to a list of recipients.'
   end
 
-  def to_param
+  def self.to_param
     'emails_on_push'
   end
 
-  def supported_events
+  def self.supported_events
     %w(push tag_push)
   end
 
@@ -24,20 +24,20 @@ class EmailsOnPushService < Service
     return unless supported_events.include?(push_data[:object_kind])
 
     EmailsOnPushWorker.perform_async(
-      project_id, 
-      recipients, 
-      push_data, 
-      send_from_committer_email:  send_from_committer_email?, 
-      disable_diffs:              disable_diffs?
+      project_id,
+      recipients,
+      push_data,
+      send_from_committer_email: send_from_committer_email?,
+      disable_diffs:             disable_diffs?
     )
   end
 
   def send_from_committer_email?
-    self.send_from_committer_email == "1"
+    Gitlab::Utils.to_boolean(self.send_from_committer_email)
   end
 
   def disable_diffs?
-    self.disable_diffs == "1"
+    Gitlab::Utils.to_boolean(self.disable_diffs)
   end
 
   def fields
diff --git a/app/models/project_services/external_wiki_service.rb b/app/models/project_services/external_wiki_service.rb
index d7b6e505191..bdf6fa6a586 100644
--- a/app/models/project_services/external_wiki_service.rb
+++ b/app/models/project_services/external_wiki_service.rb
@@ -13,7 +13,7 @@ class ExternalWikiService < Service
     'Replaces the link to the internal wiki with a link to an external wiki.'
   end
 
-  def to_param
+  def self.to_param
     'external_wiki'
   end
 
@@ -29,4 +29,8 @@ class ExternalWikiService < Service
       nil
     end
   end
+
+  def self.supported_events
+    %w()
+  end
 end
diff --git a/app/models/project_services/flowdock_service.rb b/app/models/project_services/flowdock_service.rb
index dd00275187f..10a13c3fbdc 100644
--- a/app/models/project_services/flowdock_service.rb
+++ b/app/models/project_services/flowdock_service.rb
@@ -12,7 +12,7 @@ class FlowdockService < Service
     'Flowdock is a collaboration web app for technical teams.'
   end
 
-  def to_param
+  def self.to_param
     'flowdock'
   end
 
@@ -22,7 +22,7 @@ class FlowdockService < Service
     ]
   end
 
-  def supported_events
+  def self.supported_events
     %w(push)
   end
 
diff --git a/app/models/project_services/gemnasium_service.rb b/app/models/project_services/gemnasium_service.rb
index 598aca5e06d..f271e1f1739 100644
--- a/app/models/project_services/gemnasium_service.rb
+++ b/app/models/project_services/gemnasium_service.rb
@@ -12,7 +12,7 @@ class GemnasiumService < Service
     'Gemnasium monitors your project dependencies and alerts you about updates and security vulnerabilities.'
   end
 
-  def to_param
+  def self.to_param
     'gemnasium'
   end
 
@@ -23,7 +23,7 @@ class GemnasiumService < Service
     ]
   end
 
-  def supported_events
+  def self.supported_events
     %w(push)
   end
 
diff --git a/app/models/project_services/gitlab_ci_service.rb b/app/models/project_services/gitlab_ci_service.rb
deleted file mode 100644
index bbc312f5215..00000000000
--- a/app/models/project_services/gitlab_ci_service.rb
+++ /dev/null
@@ -1,8 +0,0 @@
-# TODO(ayufan): The GitLabCiService is deprecated and the type should be removed when the database entries are removed
-class GitlabCiService < CiService
-  # We override the active accessor to always make GitLabCiService disabled
-  # Otherwise the GitLabCiService can be picked, but should never be since it's deprecated
-  def active
-    false
-  end
-end
diff --git a/app/models/project_services/gitlab_issue_tracker_service.rb b/app/models/project_services/gitlab_issue_tracker_service.rb
index 6bd8d4ec568..ad4eb9536e1 100644
--- a/app/models/project_services/gitlab_issue_tracker_service.rb
+++ b/app/models/project_services/gitlab_issue_tracker_service.rb
@@ -7,7 +7,7 @@ class GitlabIssueTrackerService < IssueTrackerService
 
   default_value_for :default, true
 
-  def to_param
+  def self.to_param
     'gitlab'
   end
 
diff --git a/app/models/project_services/hipchat_service.rb b/app/models/project_services/hipchat_service.rb
index 660a8ae3421..8b181221bb0 100644
--- a/app/models/project_services/hipchat_service.rb
+++ b/app/models/project_services/hipchat_service.rb
@@ -6,16 +6,16 @@ class HipchatService < Service
     a b i strong em br img pre code
     table th tr td caption colgroup col thead tbody tfoot
     ul ol li dl dt dd
-  ]
+  ].freeze
 
-  prop_accessor :token, :room, :server, :notify, :color, :api_version
-  boolean_accessor :notify_only_broken_builds
+  prop_accessor :token, :room, :server, :color, :api_version
+  boolean_accessor :notify_only_broken_pipelines, :notify
   validates :token, presence: true, if: :activated?
 
   def initialize_properties
     if properties.nil?
       self.properties = {}
-      self.notify_only_broken_builds = true
+      self.notify_only_broken_pipelines = true
     end
   end
 
@@ -27,7 +27,7 @@ class HipchatService < Service
     'Private group chat and IM'
   end
 
-  def to_param
+  def self.to_param
     'hipchat'
   end
 
@@ -36,17 +36,17 @@ class HipchatService < Service
       { type: 'text', name: 'token',     placeholder: 'Room token' },
       { type: 'text', name: 'room',      placeholder: 'Room name or ID' },
       { type: 'checkbox', name: 'notify' },
-      { type: 'select', name: 'color', choices: ['yellow', 'red', 'green', 'purple', 'gray', 'random'] },
+      { type: 'select', name: 'color', choices: %w(yellow red green purple gray random) },
       { type: 'text', name: 'api_version',
         placeholder: 'Leave blank for default (v2)' },
       { type: 'text', name: 'server',
         placeholder: 'Leave blank for default. https://hipchat.example.com' },
-      { type: 'checkbox', name: 'notify_only_broken_builds' },
+      { type: 'checkbox', name: 'notify_only_broken_pipelines' },
     ]
   end
 
-  def supported_events
-    %w(push issue confidential_issue merge_request note tag_push build)
+  def self.supported_events
+    %w(push issue confidential_issue merge_request note tag_push pipeline)
   end
 
   def execute(data)
@@ -75,7 +75,7 @@ class HipchatService < Service
   end
 
   def message_options(data = nil)
-    { notify: notify.present? && notify == '1', color: message_color(data) }
+    { notify: notify.present? && Gitlab::Utils.to_boolean(notify), color: message_color(data) }
   end
 
   def create_message(data)
@@ -90,8 +90,8 @@ class HipchatService < Service
       create_merge_request_message(data) unless is_update?(data)
     when "note"
       create_note_message(data)
-    when "build"
-      create_build_message(data) if should_build_be_notified?(data)
+    when "pipeline"
+      create_pipeline_message(data) if should_pipeline_be_notified?(data)
     end
   end
 
@@ -240,28 +240,29 @@ class HipchatService < Service
     message
   end
 
-  def create_build_message(data)
-    ref_type = data[:tag] ? 'tag' : 'branch'
-    ref = data[:ref]
-    sha = data[:sha]
-    user_name = data[:commit][:author_name]
-    status = data[:commit][:status]
-    duration = data[:commit][:duration]
+  def create_pipeline_message(data)
+    pipeline_attributes = data[:object_attributes]
+    pipeline_id = pipeline_attributes[:id]
+    ref_type = pipeline_attributes[:tag] ? 'tag' : 'branch'
+    ref = pipeline_attributes[:ref]
+    user_name = (data[:user] && data[:user][:name]) || 'API'
+    status = pipeline_attributes[:status]
+    duration = pipeline_attributes[:duration]
 
     branch_link = "<a href=\"#{project_url}/commits/#{CGI.escape(ref)}\">#{ref}</a>"
-    commit_link = "<a href=\"#{project_url}/commit/#{CGI.escape(sha)}/builds\">#{Commit.truncate_sha(sha)}</a>"
+    pipeline_url = "<a href=\"#{project_url}/pipelines/#{pipeline_id}\">##{pipeline_id}</a>"
 
-    "#{project_link}: Commit #{commit_link} of #{branch_link} #{ref_type} by #{user_name} #{humanized_status(status)} in #{duration} second(s)"
+    "#{project_link}: Pipeline #{pipeline_url} of #{branch_link} #{ref_type} by #{user_name} #{humanized_status(status)} in #{duration} second(s)"
   end
 
   def message_color(data)
-    build_status_color(data) || color || 'yellow'
+    pipeline_status_color(data) || color || 'yellow'
   end
 
-  def build_status_color(data)
-    return unless data && data[:object_kind] == 'build'
+  def pipeline_status_color(data)
+    return unless data && data[:object_kind] == 'pipeline'
 
-    case data[:commit][:status]
+    case data[:object_attributes][:status]
     when 'success'
       'green'
     else
@@ -294,10 +295,10 @@ class HipchatService < Service
     end
   end
 
-  def should_build_be_notified?(data)
-    case data[:commit][:status]
+  def should_pipeline_be_notified?(data)
+    case data[:object_attributes][:status]
     when 'success'
-      !notify_only_broken_builds?
+      !notify_only_broken_pipelines?
     when 'failed'
       true
     else
diff --git a/app/models/project_services/irker_service.rb b/app/models/project_services/irker_service.rb
index ce7d1c5d5b1..c62bb4fa120 100644
--- a/app/models/project_services/irker_service.rb
+++ b/app/models/project_services/irker_service.rb
@@ -2,7 +2,8 @@ require 'uri'
 
 class IrkerService < Service
   prop_accessor :server_host, :server_port, :default_irc_uri
-  prop_accessor :colorize_messages, :recipients, :channels
+  prop_accessor :recipients, :channels
+  boolean_accessor :colorize_messages
   validates :recipients, presence: true, if: :activated?
 
   before_validation :get_channels
@@ -16,11 +17,11 @@ class IrkerService < Service
     'gateway.'
   end
 
-  def to_param
+  def self.to_param
     'irker'
   end
 
-  def supported_events
+  def self.supported_events
     %w(push)
   end
 
@@ -32,7 +33,8 @@ class IrkerService < Service
   end
 
   def settings
-    { server_host: server_host.present? ? server_host : 'localhost',
+    {
+      server_host: server_host.present? ? server_host : 'localhost',
       server_port: server_port.present? ? server_port : 6659
     }
   end
@@ -95,7 +97,7 @@ class IrkerService < Service
     rescue URI::InvalidURIError
     end
 
-    unless uri.present? and default_irc_uri.nil?
+    unless uri.present? && default_irc_uri.nil?
       begin
         new_recipient = URI.join(default_irc_uri, '/', recipient).to_s
         uri = consider_uri(URI.parse(new_recipient))
diff --git a/app/models/project_services/issue_tracker_service.rb b/app/models/project_services/issue_tracker_service.rb
index 207bb816ad1..50435b67eda 100644
--- a/app/models/project_services/issue_tracker_service.rb
+++ b/app/models/project_services/issue_tracker_service.rb
@@ -1,4 +1,6 @@
 class IssueTrackerService < Service
+  validate :one_issue_tracker, if: :activated?, on: :manual_change
+
   default_value_for :category, 'issue_tracker'
 
   # Pattern used to extract links from comments
@@ -57,7 +59,7 @@ class IssueTrackerService < Service
     end
   end
 
-  def supported_events
+  def self.supported_events
     %w(push)
   end
 
@@ -85,11 +87,20 @@ class IssueTrackerService < Service
 
   def enabled_in_gitlab_config
     Gitlab.config.issues_tracker &&
-    Gitlab.config.issues_tracker.values.any? &&
-    issues_tracker
+      Gitlab.config.issues_tracker.values.any? &&
+      issues_tracker
   end
 
   def issues_tracker
     Gitlab.config.issues_tracker[to_param]
   end
+
+  def one_issue_tracker
+    return if template?
+    return if project.blank?
+
+    if project.services.external_issue_trackers.where.not(id: id).any?
+      errors.add(:base, 'Another issue tracker is already in use. Only one issue tracker service can be active at a time')
+    end
+  end
 end
diff --git a/app/models/project_services/jira_service.rb b/app/models/project_services/jira_service.rb
index 2dbe0075465..3b90fd1c2c7 100644
--- a/app/models/project_services/jira_service.rb
+++ b/app/models/project_services/jira_service.rb
@@ -1,24 +1,3 @@
-# == Schema Information
-#
-# Table name: services
-#
-#  id                    :integer          not null, primary key
-#  type                  :string(255)
-#  title                 :string(255)
-#  project_id            :integer
-#  created_at            :datetime
-#  updated_at            :datetime
-#  active                :boolean          default(FALSE), not null
-#  properties            :text
-#  template              :boolean          default(FALSE)
-#  push_events           :boolean          default(TRUE)
-#  issues_events         :boolean          default(TRUE)
-#  merge_requests_events :boolean          default(TRUE)
-#  tag_push_events       :boolean          default(TRUE)
-#  note_events           :boolean          default(TRUE), not null
-#  build_events          :boolean          default(FALSE), not null
-#
-
 class JiraService < IssueTrackerService
   include Gitlab::Routing.url_helpers
 
@@ -30,6 +9,13 @@ class JiraService < IssueTrackerService
 
   before_update :reset_password
 
+  # This is confusing, but JiraService does not really support these events.
+  # The values here are required to display correct options in the service
+  # configuration screen.
+  def self.supported_events
+    %w(commit merge_request)
+  end
+
   # {PROJECT-KEY}-{NUMBER} Examples: JIRA-1, PROJECT-1
   def reference_pattern
     @reference_pattern ||= %r{(?<issue>\b([A-Z][A-Z0-9_]+-)\d+)}
@@ -70,13 +56,13 @@ class JiraService < IssueTrackerService
   end
 
   def jira_project
-    @jira_project ||= client.Project.find(project_key)
+    @jira_project ||= jira_request { client.Project.find(project_key) }
   end
 
   def help
-    'See the ' \
-    '[integration doc](http://doc.gitlab.com/ce/integration/external-issue-tracker.html) '\
-    'for details.'
+    "You need to configure JIRA before enabling this service. For more details
+    read the
+    [JIRA service documentation](#{help_page_url('user/project/integrations/jira')})."
   end
 
   def title
@@ -95,7 +81,7 @@ class JiraService < IssueTrackerService
     end
   end
 
-  def to_param
+  def self.to_param
     'jira'
   end
 
@@ -122,27 +108,43 @@ class JiraService < IssueTrackerService
     "#{url}/secure/CreateIssue.jspa"
   end
 
-  def execute(push, issue = nil)
-    if issue.nil?
-      # No specific issue, that means
-      # we just want to test settings
-      test_settings
-    else
-      close_issue(push, issue)
-    end
+  def execute(push)
+    # This method is a no-op, because currently JiraService does not
+    # support any events.
+  end
+
+  def close_issue(entity, external_issue)
+    issue = jira_request { client.Issue.find(external_issue.iid) }
+
+    return if issue.nil? || issue.resolution.present? || !jira_issue_transition_id.present?
+
+    commit_id = if entity.is_a?(Commit)
+                  entity.id
+                elsif entity.is_a?(MergeRequest)
+                  entity.diff_head_sha
+                end
+
+    commit_url = build_entity_url(:commit, commit_id)
+
+    # Depending on the JIRA project's workflow, a comment during transition
+    # may or may not be allowed. Refresh the issue after transition and check
+    # if it is closed, so we don't have one comment for every commit.
+    issue = jira_request { client.Issue.find(issue.key) } if transition_issue(issue)
+    add_issue_solved_comment(issue, commit_id, commit_url) if issue.resolution
   end
 
   def create_cross_reference_note(mentioned, noteable, author)
-    issue_key = mentioned.id
-    project = self.project
-    noteable_name = noteable.class.name.underscore.downcase
-    noteable_id = if noteable.is_a?(Commit)
-                    noteable.id
-                  else
-                    noteable.iid
-                  end
+    unless can_cross_reference?(noteable)
+      return "Events for #{noteable.model_name.plural.humanize(capitalize: false)} are disabled."
+    end
 
-    entity_url = build_entity_url(noteable_name.to_sym, noteable_id)
+    jira_issue = jira_request { client.Issue.find(mentioned.id) }
+
+    return unless jira_issue.present?
+
+    noteable_id   = noteable.respond_to?(:iid) ? noteable.iid : noteable.id
+    noteable_type = noteable_name(noteable)
+    entity_url    = build_entity_url(noteable_type, noteable_id)
 
     data = {
       user: {
@@ -150,17 +152,17 @@ class JiraService < IssueTrackerService
         url: resource_url(user_path(author)),
       },
       project: {
-        name: project.path_with_namespace,
-        url: resource_url(namespace_project_path(project.namespace, project))
+        name: self.project.path_with_namespace,
+        url: resource_url(namespace_project_path(project.namespace, self.project))
       },
       entity: {
-        name: noteable_name.humanize.downcase,
+        name: noteable_type.humanize.downcase,
         url: entity_url,
         title: noteable.title
       }
     }
 
-    add_comment(data, issue_key)
+    add_comment(data, jira_issue)
   end
 
   # reason why service cannot be tested
@@ -168,6 +170,11 @@ class JiraService < IssueTrackerService
     "Please fill in Password and Username."
   end
 
+  def test(_)
+    result = test_settings
+    { success: result.present?, result: result }
+  end
+
   def can_test?
     username.present? && password.present?
   end
@@ -181,91 +188,114 @@ class JiraService < IssueTrackerService
   def test_settings
     return unless url.present?
     # Test settings by getting the project
-    jira_project
-
-  rescue Errno::ECONNREFUSED, JIRA::HTTPError => e
-    Rails.logger.info "#{self.class.name} ERROR: #{e.message}. API URL: #{url}."
-    false
+    jira_request { jira_project.present? }
   end
 
   private
 
-  def close_issue(entity, issue)
-    commit_id = if entity.is_a?(Commit)
-                  entity.id
-                elsif entity.is_a?(MergeRequest)
-                  entity.diff_head_sha
-                end
-
-    commit_url = build_entity_url(:commit, commit_id)
-
-    # Depending on the JIRA project's workflow, a comment during transition
-    # may or may not be allowed. Split the operation in to two calls so the
-    # comment always works.
-    transition_issue(issue)
-    add_issue_solved_comment(issue, commit_id, commit_url)
+  def can_cross_reference?(noteable)
+    case noteable
+    when Commit then commit_events
+    when MergeRequest then merge_requests_events
+    else true
+    end
   end
 
   def transition_issue(issue)
-    issue = client.Issue.find(issue.iid)
     issue.transitions.build.save(transition: { id: jira_issue_transition_id })
   end
 
   def add_issue_solved_comment(issue, commit_id, commit_url)
-    comment = "Issue solved with [#{commit_id}|#{commit_url}]."
-    send_message(issue.iid, comment)
+    link_title   = "GitLab: Solved by commit #{commit_id}."
+    comment      = "Issue solved with [#{commit_id}|#{commit_url}]."
+    link_props   = build_remote_link_props(url: commit_url, title: link_title, resolved: true)
+    send_message(issue, comment, link_props)
   end
 
-  def add_comment(data, issue_key)
-    user_name = data[:user][:name]
-    user_url = data[:user][:url]
-    entity_name = data[:entity][:name]
-    entity_url = data[:entity][:url]
+  def add_comment(data, issue)
+    user_name    = data[:user][:name]
+    user_url     = data[:user][:url]
+    entity_name  = data[:entity][:name]
+    entity_url   = data[:entity][:url]
     entity_title = data[:entity][:title]
     project_name = data[:project][:name]
 
-    message = "[#{user_name}|#{user_url}] mentioned this issue in [a #{entity_name} of #{project_name}|#{entity_url}]:\n'#{entity_title}'"
+    message      = "[#{user_name}|#{user_url}] mentioned this issue in [a #{entity_name} of #{project_name}|#{entity_url}]:\n'#{entity_title.chomp}'"
+    link_title   = "GitLab: Mentioned on #{entity_name} - #{entity_title}"
+    link_props   = build_remote_link_props(url: entity_url, title: link_title)
 
-    unless comment_exists?(issue_key, message)
-      send_message(issue_key, message)
+    unless comment_exists?(issue, message)
+      send_message(issue, message, link_props)
     end
   end
 
-  def comment_exists?(issue_key, message)
-    comments = client.Issue.find(issue_key).comments
-    comments.map { |comment| comment.body.include?(message) }.any?
+  def comment_exists?(issue, message)
+    comments = jira_request { issue.comments }
+
+    comments.present? && comments.any? { |comment| comment.body.include?(message) }
   end
 
-  def send_message(issue_key, message)
+  def send_message(issue, message, remote_link_props)
     return unless url.present?
 
-    issue = client.Issue.find(issue_key)
+    jira_request do
+      if issue.comments.build.save!(body: message)
+        remote_link = issue.remotelink.build
+        remote_link.save!(remote_link_props)
+        result_message = "#{self.class.name} SUCCESS: Successfully posted to #{url}."
+      end
 
-    if issue.comments.build.save!(body: message)
-      result_message = "#{self.class.name} SUCCESS: Successfully posted to #{url}."
+      Rails.logger.info(result_message)
+      result_message
     end
+  end
 
-    Rails.logger.info(result_message)
-    result_message
-  rescue URI::InvalidURIError, Errno::ECONNREFUSED, JIRA::HTTPError => e
-    Rails.logger.info "#{self.class.name} Send message ERROR: #{url} - #{e.message}"
+  def build_remote_link_props(url:, title:, resolved: false)
+    status = {
+      resolved: resolved
+    }
+
+    {
+      GlobalID: 'GitLab',
+      object: {
+        url: url,
+        title: title,
+        status: status,
+        icon: { title: 'GitLab', url16x16: 'https://gitlab.com/favicon.ico' }
+      }
+    }
   end
 
   def resource_url(resource)
     "#{Settings.gitlab.base_url.chomp("/")}#{resource}"
   end
 
-  def build_entity_url(entity_name, entity_id)
-    resource_url(
-      polymorphic_url(
-        [
-          self.project.namespace.becomes(Namespace),
-          self.project,
-          entity_name
-        ],
-        id: entity_id,
-        routing_type: :path
-      )
+  def build_entity_url(noteable_type, entity_id)
+    polymorphic_url(
+      [
+        self.project.namespace.becomes(Namespace),
+        self.project,
+        noteable_type.to_sym
+      ],
+      id:   entity_id,
+      host: Settings.gitlab.base_url
     )
   end
+
+  def noteable_name(noteable)
+    name = noteable.model_name.singular
+
+    # ProjectSnippet inherits from Snippet class so it causes
+    # routing error building the URL.
+    name == "project_snippet" ? "snippet" : name
+  end
+
+  # Handle errors when doing JIRA API calls
+  def jira_request
+    yield
+
+  rescue Timeout::Error, Errno::EINVAL, Errno::ECONNRESET, Errno::ECONNREFUSED, URI::InvalidURIError, JIRA::HTTPError => e
+    Rails.logger.info "#{self.class.name} Send message ERROR: #{url} - #{e.message}"
+    nil
+  end
 end
diff --git a/app/models/project_services/kubernetes_service.rb b/app/models/project_services/kubernetes_service.rb
new file mode 100644
index 00000000000..02fbd5497fa
--- /dev/null
+++ b/app/models/project_services/kubernetes_service.rb
@@ -0,0 +1,183 @@
+class KubernetesService < DeploymentService
+  include Gitlab::CurrentSettings
+  include Gitlab::Kubernetes
+  include ReactiveCaching
+
+  self.reactive_cache_key = ->(service) { [service.class.model_name.singular, service.project_id] }
+
+  # Namespace defaults to the project path, but can be overridden in case that
+  # is an invalid or inappropriate name
+  prop_accessor :namespace
+
+  #  Access to kubernetes is directly through the API
+  prop_accessor :api_url
+
+  # Bearer authentication
+  # TODO:  user/password auth, client certificates
+  prop_accessor :token
+
+  # Provide a custom CA bundle for self-signed deployments
+  prop_accessor :ca_pem
+
+  with_options presence: true, if: :activated? do
+    validates :api_url, url: true
+    validates :token
+
+    validates :namespace,
+      format: {
+        with: Gitlab::Regex.kubernetes_namespace_regex,
+        message: Gitlab::Regex.kubernetes_namespace_regex_message,
+      },
+      length: 1..63
+  end
+
+  after_save :clear_reactive_cache!
+
+  def initialize_properties
+    if properties.nil?
+      self.properties = {}
+      self.namespace = "#{project.path}-#{project.id}" if project.present?
+    end
+  end
+
+  def title
+    'Kubernetes'
+  end
+
+  def description
+    'Kubernetes / Openshift integration'
+  end
+
+  def help
+    'To enable terminal access to Kubernetes environments, label your ' \
+    'deployments with `app=$CI_ENVIRONMENT_SLUG`'
+  end
+
+  def self.to_param
+    'kubernetes'
+  end
+
+  def fields
+    [
+        { type: 'text',
+          name: 'namespace',
+          title: 'Kubernetes namespace',
+          placeholder: 'Kubernetes namespace' },
+        { type: 'text',
+          name: 'api_url',
+          title: 'API URL',
+          placeholder: 'Kubernetes API URL, like https://kube.example.com/' },
+        { type: 'text',
+          name: 'token',
+          title: 'Service token',
+          placeholder: 'Service token' },
+        { type: 'textarea',
+          name: 'ca_pem',
+          title: 'Custom CA bundle',
+          placeholder: 'Certificate Authority bundle (PEM format)' },
+    ]
+  end
+
+  # Check we can connect to the Kubernetes API
+  def test(*args)
+    kubeclient = build_kubeclient!
+
+    kubeclient.discover
+    { success: kubeclient.discovered, result: "Checked API discovery endpoint" }
+  rescue => err
+    { success: false, result: err }
+  end
+
+  def predefined_variables
+    variables = [
+      { key: 'KUBE_URL', value: api_url, public: true },
+      { key: 'KUBE_TOKEN', value: token, public: false },
+      { key: 'KUBE_NAMESPACE', value: namespace, public: true }
+    ]
+
+    if ca_pem.present?
+      variables << { key: 'KUBE_CA_PEM', value: ca_pem, public: true }
+      variables << { key: 'KUBE_CA_PEM_FILE', value: ca_pem, public: true, file: true }
+    end
+
+    variables
+  end
+
+  # Constructs a list of terminals from the reactive cache
+  #
+  # Returns nil if the cache is empty, in which case you should try again a
+  # short time later
+  def terminals(environment)
+    with_reactive_cache do |data|
+      pods = data.fetch(:pods, nil)
+      filter_pods(pods, app: environment.slug).
+        flat_map { |pod| terminals_for_pod(api_url, namespace, pod) }.
+        each { |terminal| add_terminal_auth(terminal, terminal_auth) }
+    end
+  end
+
+  # Caches all pods in the namespace so other calls don't need to block on
+  # network access.
+  def calculate_reactive_cache
+    return unless active? && project && !project.pending_delete?
+
+    kubeclient = build_kubeclient!
+
+    # Store as hashes, rather than as third-party types
+    pods = begin
+      kubeclient.get_pods(namespace: namespace).as_json
+    rescue KubeException => err
+      raise err unless err.error_code == 404
+      []
+    end
+
+    # We may want to cache extra things in the future
+    { pods: pods }
+  end
+
+  private
+
+  def build_kubeclient!(api_path: 'api', api_version: 'v1')
+    raise "Incomplete settings" unless api_url && namespace && token
+
+    ::Kubeclient::Client.new(
+      join_api_url(api_path),
+      api_version,
+      auth_options: kubeclient_auth_options,
+      ssl_options: kubeclient_ssl_options,
+      http_proxy_uri: ENV['http_proxy']
+    )
+  end
+
+  def kubeclient_ssl_options
+    opts = { verify_ssl: OpenSSL::SSL::VERIFY_PEER }
+
+    if ca_pem.present?
+      opts[:cert_store] = OpenSSL::X509::Store.new
+      opts[:cert_store].add_cert(OpenSSL::X509::Certificate.new(ca_pem))
+    end
+
+    opts
+  end
+
+  def kubeclient_auth_options
+    { bearer_token: token }
+  end
+
+  def join_api_url(*parts)
+    url = URI.parse(api_url)
+    prefix = url.path.sub(%r{/+\z}, '')
+
+    url.path = [prefix, *parts].join("/")
+
+    url.to_s
+  end
+
+  def terminal_auth
+    {
+      token: token,
+      ca_pem: ca_pem,
+      max_session_time: current_application_settings.terminal_max_session_time
+    }
+  end
+end
diff --git a/app/models/project_services/mattermost_service.rb b/app/models/project_services/mattermost_service.rb
new file mode 100644
index 00000000000..0362ed172c7
--- /dev/null
+++ b/app/models/project_services/mattermost_service.rb
@@ -0,0 +1,32 @@
+class MattermostService < ChatNotificationService
+  def title
+    'Mattermost notifications'
+  end
+
+  def description
+    'Receive event notifications in Mattermost'
+  end
+
+  def self.to_param
+    'mattermost'
+  end
+
+  def help
+    'This service sends notifications about projects events to Mattermost channels.<br />
+    To set up this service:
+    <ol>
+      <li><a href="https://docs.mattermost.com/developer/webhooks-incoming.html#enabling-incoming-webhooks">Enable incoming webhooks</a> in your Mattermost installation.</li>
+      <li><a href="https://docs.mattermost.com/developer/webhooks-incoming.html#creating-integrations-using-incoming-webhooks">Add an incoming webhook</a> in your Mattermost team. The default channel can be overridden for each event.</li>
+      <li>Paste the webhook <strong>URL</strong> into the field below.</li>
+      <li>Select events below to enable notifications. The <strong>Channel handle</strong> and <strong>Username</strong> fields are optional.</li>
+    </ol>'
+  end
+
+  def default_channel_placeholder
+    "Channel handle (e.g. town-square)"
+  end
+
+  def webhook_placeholder
+    'http://mattermost.example.com/hooks/…'
+  end
+end
diff --git a/app/models/project_services/mattermost_slash_commands_service.rb b/app/models/project_services/mattermost_slash_commands_service.rb
new file mode 100644
index 00000000000..56f42d63b2d
--- /dev/null
+++ b/app/models/project_services/mattermost_slash_commands_service.rb
@@ -0,0 +1,51 @@
+class MattermostSlashCommandsService < ChatSlashCommandsService
+  include TriggersHelper
+
+  prop_accessor :token
+
+  def can_test?
+    false
+  end
+
+  def title
+    'Mattermost slash commands'
+  end
+
+  def description
+    "Perform common operations in Mattermost"
+  end
+
+  def self.to_param
+    'mattermost_slash_commands'
+  end
+
+  def configure(user, params)
+    token = Mattermost::Command.new(user).
+      create(command(params))
+
+    update(active: true, token: token) if token
+  rescue Mattermost::Error => e
+    [false, e.message]
+  end
+
+  def list_teams(current_user)
+    [Mattermost::Team.new(current_user).all, nil]
+  rescue Mattermost::Error => e
+    [[], e.message]
+  end
+
+  private
+
+  def command(params)
+    pretty_project_name = project.name_with_namespace
+
+    params.merge(
+      auto_complete: true,
+      auto_complete_desc: "Perform common operations on: #{pretty_project_name}",
+      auto_complete_hint: '[help]',
+      description: "Perform common operations on: #{pretty_project_name}",
+      display_name: "GitLab / #{pretty_project_name}",
+      method: 'P',
+      username: 'GitLab')
+  end
+end
diff --git a/app/models/project_services/mock_ci_service.rb b/app/models/project_services/mock_ci_service.rb
new file mode 100644
index 00000000000..a8d581a1f67
--- /dev/null
+++ b/app/models/project_services/mock_ci_service.rb
@@ -0,0 +1,82 @@
+# For an example companion mocking service, see https://gitlab.com/gitlab-org/gitlab-mock-ci-service
+class MockCiService < CiService
+  ALLOWED_STATES = %w[failed canceled running pending success success_with_warnings skipped not_found].freeze
+
+  prop_accessor :mock_service_url
+  validates :mock_service_url, presence: true, url: true, if: :activated?
+
+  def title
+    'MockCI'
+  end
+
+  def description
+    'Mock an external CI'
+  end
+
+  def self.to_param
+    'mock_ci'
+  end
+
+  def fields
+    [
+      { type: 'text',
+        name: 'mock_service_url',
+        placeholder: 'http://localhost:4004' },
+    ]
+  end
+
+  # Return complete url to build page
+  #
+  # Ex.
+  #   http://jenkins.example.com:8888/job/test1/scm/bySHA1/12d65c
+  #
+  def build_page(sha, ref)
+    url = [mock_service_url,
+           "#{project.namespace.path}/#{project.path}/status/#{sha}"]
+
+    URI.join(*url).to_s
+  end
+
+  # Return string with build status or :error symbol
+  #
+  # Allowed states: 'success', 'failed', 'running', 'pending', 'skipped'
+  #
+  #
+  # Ex.
+  #   @service.commit_status('13be4ac', 'master')
+  #   # => 'success'
+  #
+  #   @service.commit_status('2abe4ac', 'dev')
+  #   # => 'running'
+  #
+  #
+  def commit_status(sha, ref)
+    response = HTTParty.get(commit_status_path(sha), verify: false)
+    read_commit_status(response)
+  rescue Errno::ECONNREFUSED
+    :error
+  end
+
+  def commit_status_path(sha)
+    url = [mock_service_url,
+           "#{project.namespace.path}/#{project.path}/status/#{sha}.json"]
+
+    URI.join(*url).to_s
+  end
+
+  def read_commit_status(response)
+    return :error unless response.code == 200 || response.code == 404
+
+    status = if response.code == 404
+               'pending'
+             else
+               response['status']
+             end
+
+    if status.present? && ALLOWED_STATES.include?(status)
+      status
+    else
+      :error
+    end
+  end
+end
diff --git a/app/models/project_services/monitoring_service.rb b/app/models/project_services/monitoring_service.rb
new file mode 100644
index 00000000000..ea585721e8f
--- /dev/null
+++ b/app/models/project_services/monitoring_service.rb
@@ -0,0 +1,16 @@
+# Base class for monitoring services
+#
+# These services integrate with a deployment solution like Prometheus
+# to provide additional features for environments.
+class MonitoringService < Service
+  default_value_for :category, 'monitoring'
+
+  def self.supported_events
+    %w()
+  end
+
+  # Environments have a number of metrics
+  def metrics(environment)
+    raise NotImplementedError
+  end
+end
diff --git a/app/models/project_services/pipelines_email_service.rb b/app/models/project_services/pipelines_email_service.rb
index ec3c1bc85ee..ac617f409d9 100644
--- a/app/models/project_services/pipelines_email_service.rb
+++ b/app/models/project_services/pipelines_email_service.rb
@@ -1,10 +1,7 @@
 class PipelinesEmailService < Service
   prop_accessor :recipients
-  boolean_accessor :add_pusher
   boolean_accessor :notify_only_broken_pipelines
-  validates :recipients,
-    presence: true,
-    if: ->(s) { s.activated? && !s.add_pusher? }
+  validates :recipients, presence: true, if: :activated?
 
   def initialize_properties
     self.properties ||= { notify_only_broken_pipelines: true }
@@ -18,11 +15,11 @@ class PipelinesEmailService < Service
     'Email the pipelines status to a list of recipients.'
   end
 
-  def to_param
+  def self.to_param
     'pipelines_email'
   end
 
-  def supported_events
+  def self.supported_events
     %w[pipeline]
   end
 
@@ -34,8 +31,8 @@ class PipelinesEmailService < Service
 
     return unless all_recipients.any?
 
-    pipeline = Ci::Pipeline.find(data[:object_attributes][:id])
-    Ci::SendPipelineNotificationService.new(pipeline).execute(all_recipients)
+    pipeline_id = data[:object_attributes][:id]
+    PipelineNotificationWorker.new.perform(pipeline_id, all_recipients)
   end
 
   def can_test?
@@ -58,9 +55,6 @@ class PipelinesEmailService < Service
         name: 'recipients',
         placeholder: 'Emails separated by comma' },
       { type: 'checkbox',
-        name: 'add_pusher',
-        label: 'Add pusher to recipients list' },
-      { type: 'checkbox',
         name: 'notify_only_broken_pipelines' },
     ]
   end
@@ -85,12 +79,6 @@ class PipelinesEmailService < Service
   end
 
   def retrieve_recipients(data)
-    all_recipients = recipients.to_s.split(',').reject(&:blank?)
-
-    if add_pusher? && data[:user].try(:[], :email)
-      all_recipients << data[:user][:email]
-    end
-
-    all_recipients
+    recipients.to_s.split(',').reject(&:blank?)
   end
 end
diff --git a/app/models/project_services/pivotaltracker_service.rb b/app/models/project_services/pivotaltracker_service.rb
index 5301f9fa0ff..d86f4f6f448 100644
--- a/app/models/project_services/pivotaltracker_service.rb
+++ b/app/models/project_services/pivotaltracker_service.rb
@@ -1,7 +1,7 @@
 class PivotaltrackerService < Service
   include HTTParty
 
-  API_ENDPOINT = 'https://www.pivotaltracker.com/services/v5/source_commits'
+  API_ENDPOINT = 'https://www.pivotaltracker.com/services/v5/source_commits'.freeze
 
   prop_accessor :token, :restrict_to_branch
   validates :token, presence: true, if: :activated?
@@ -14,7 +14,7 @@ class PivotaltrackerService < Service
     'Project Management Software (Source Commits Endpoint)'
   end
 
-  def to_param
+  def self.to_param
     'pivotaltracker'
   end
 
@@ -34,7 +34,7 @@ class PivotaltrackerService < Service
     ]
   end
 
-  def supported_events
+  def self.supported_events
     %w(push)
   end
 
diff --git a/app/models/project_services/prometheus_service.rb b/app/models/project_services/prometheus_service.rb
new file mode 100644
index 00000000000..6854d2243d7
--- /dev/null
+++ b/app/models/project_services/prometheus_service.rb
@@ -0,0 +1,100 @@
+class PrometheusService < MonitoringService
+  include ReactiveCaching
+
+  self.reactive_cache_key = ->(service) { [service.class.model_name.singular, service.project_id] }
+  self.reactive_cache_lease_timeout = 30.seconds
+  self.reactive_cache_refresh_interval = 30.seconds
+  self.reactive_cache_lifetime = 1.minute
+
+  #  Access to prometheus is directly through the API
+  prop_accessor :api_url
+
+  with_options presence: true, if: :activated? do
+    validates :api_url, url: true
+  end
+
+  after_save :clear_reactive_cache!
+
+  def initialize_properties
+    if properties.nil?
+      self.properties = {}
+    end
+  end
+
+  def title
+    'Prometheus'
+  end
+
+  def description
+    'Prometheus monitoring'
+  end
+
+  def help
+    <<-MD.strip_heredoc
+      Retrieves the Kubernetes node metrics `container_cpu_usage_seconds_total`
+      and `container_memory_usage_bytes` from the configured Prometheus server.
+
+      If you are not using [Auto-Deploy](https://docs.gitlab.com/ee/ci/autodeploy/index.html)
+      or have set up your own Prometheus server, an `environment` label is required on each metric to
+      [identify the Environment](https://docs.gitlab.com/ce/user/project/integrations/prometheus.html#metrics-and-labels).
+    MD
+  end
+
+  def self.to_param
+    'prometheus'
+  end
+
+  def fields
+    [
+      {
+        type: 'text',
+        name: 'api_url',
+        title: 'API URL',
+        placeholder: 'Prometheus API Base URL, like http://prometheus.example.com/'
+      }
+    ]
+  end
+
+  # Check we can connect to the Prometheus API
+  def test(*args)
+    client.ping
+
+    { success: true, result: 'Checked API endpoint' }
+  rescue Gitlab::PrometheusError => err
+    { success: false, result: err }
+  end
+
+  def metrics(environment)
+    with_reactive_cache(environment.slug) do |data|
+      data
+    end
+  end
+
+  # Cache metrics for specific environment
+  def calculate_reactive_cache(environment_slug)
+    return unless active? && project && !project.pending_delete?
+
+    memory_query = %{(sum(container_memory_usage_bytes{container_name!="POD",environment="#{environment_slug}"}) / count(container_memory_usage_bytes{container_name!="POD",environment="#{environment_slug}"})) /1024/1024}
+    cpu_query = %{sum(rate(container_cpu_usage_seconds_total{container_name!="POD",environment="#{environment_slug}"}[2m])) / count(container_cpu_usage_seconds_total{container_name!="POD",environment="#{environment_slug}"}) * 100}
+
+    {
+      success: true,
+      metrics: {
+        # Average Memory used in MB
+        memory_values: client.query_range(memory_query, start: 8.hours.ago),
+        memory_current: client.query(memory_query),
+        # Average CPU Utilization
+        cpu_values: client.query_range(cpu_query, start: 8.hours.ago),
+        cpu_current: client.query(cpu_query)
+      },
+      last_update: Time.now.utc
+    }
+
+  rescue Gitlab::PrometheusError => err
+    { success: false, result: err.message }
+  end
+
+  def client
+    @prometheus ||= Gitlab::Prometheus.new(api_url: api_url)
+  end
+end
diff --git a/app/models/project_services/pushover_service.rb b/app/models/project_services/pushover_service.rb
index 3dd878e4c7d..3e618a8dbf1 100644
--- a/app/models/project_services/pushover_service.rb
+++ b/app/models/project_services/pushover_service.rb
@@ -13,7 +13,7 @@ class PushoverService < Service
     'Pushover makes it easy to get real-time notifications on your Android device, iPhone, iPad, and Desktop.'
   end
 
-  def to_param
+  def self.to_param
     'pushover'
   end
 
@@ -29,25 +29,24 @@ class PushoverService < Service
           ['Normal Priority', 0],
           ['High Priority', 1]
         ],
-        default_choice: 0
-      },
+        default_choice: 0 },
       { type: 'select', name: 'sound', choices:
         [
           ['Device default sound', nil],
           ['Pushover (default)', 'pushover'],
-          ['Bike', 'bike'],
-          ['Bugle', 'bugle'],
+          %w(Bike bike),
+          %w(Bugle bugle),
           ['Cash Register', 'cashregister'],
-          ['Classical', 'classical'],
-          ['Cosmic', 'cosmic'],
-          ['Falling', 'falling'],
-          ['Gamelan', 'gamelan'],
-          ['Incoming', 'incoming'],
-          ['Intermission', 'intermission'],
-          ['Magic', 'magic'],
-          ['Mechanical', 'mechanical'],
+          %w(Classical classical),
+          %w(Cosmic cosmic),
+          %w(Falling falling),
+          %w(Gamelan gamelan),
+          %w(Incoming incoming),
+          %w(Intermission intermission),
+          %w(Magic magic),
+          %w(Mechanical mechanical),
           ['Piano Bar', 'pianobar'],
-          ['Siren', 'siren'],
+          %w(Siren siren),
           ['Space Alarm', 'spacealarm'],
           ['Tug Boat', 'tugboat'],
           ['Alien Alarm (long)', 'alien'],
@@ -56,12 +55,11 @@ class PushoverService < Service
           ['Pushover Echo (long)', 'echo'],
           ['Up Down (long)', 'updown'],
           ['None (silent)', 'none']
-        ]
-      },
+        ] },
     ]
   end
 
-  def supported_events
+  def self.supported_events
     %w(push)
   end
 
@@ -72,13 +70,14 @@ class PushoverService < Service
     before = data[:before]
     after = data[:after]
 
-    if Gitlab::Git.blank_ref?(before)
-      message = "#{data[:user_name]} pushed new branch \"#{ref}\"."
-    elsif Gitlab::Git.blank_ref?(after)
-      message = "#{data[:user_name]} deleted branch \"#{ref}\"."
-    else
-      message = "#{data[:user_name]} push to branch \"#{ref}\"."
-    end
+    message =
+      if Gitlab::Git.blank_ref?(before)
+        "#{data[:user_name]} pushed new branch \"#{ref}\"."
+      elsif Gitlab::Git.blank_ref?(after)
+        "#{data[:user_name]} deleted branch \"#{ref}\"."
+      else
+        "#{data[:user_name]} push to branch \"#{ref}\"."
+      end
 
     if data[:total_commits_count] > 0
       message << "\nTotal commits count: #{data[:total_commits_count]}"
@@ -97,7 +96,7 @@ class PushoverService < Service
 
     # Sound parameter MUST NOT be sent to API if not selected
     if sound
-      pushover_data.merge!(sound: sound)
+      pushover_data[:sound] = sound
     end
 
     PushoverService.post('/messages.json', body: pushover_data)
diff --git a/app/models/project_services/redmine_service.rb b/app/models/project_services/redmine_service.rb
index f9da273cf08..6acf611eba5 100644
--- a/app/models/project_services/redmine_service.rb
+++ b/app/models/project_services/redmine_service.rb
@@ -19,7 +19,7 @@ class RedmineService < IssueTrackerService
     end
   end
 
-  def to_param
+  def self.to_param
     'redmine'
   end
 end
diff --git a/app/models/project_services/slack_service.rb b/app/models/project_services/slack_service.rb
index e1b937817f4..71da0af75f6 100644
--- a/app/models/project_services/slack_service.rb
+++ b/app/models/project_services/slack_service.rb
@@ -1,176 +1,31 @@
-class SlackService < Service
-  prop_accessor :webhook, :username, :channel
-  boolean_accessor :notify_only_broken_builds, :notify_only_broken_pipelines
-  validates :webhook, presence: true, url: true, if: :activated?
-
-  def initialize_properties
-    # Custom serialized properties initialization
-    self.supported_events.each { |event| self.class.prop_accessor(event_channel_name(event)) }
-
-    if properties.nil?
-      self.properties = {}
-      self.notify_only_broken_builds = true
-      self.notify_only_broken_pipelines = true
-    end
-  end
-
+class SlackService < ChatNotificationService
   def title
-    'Slack'
+    'Slack notifications'
   end
 
   def description
-    'A team communication tool for the 21st century'
+    'Receive event notifications in Slack'
   end
 
-  def to_param
+  def self.to_param
     'slack'
   end
 
   def help
-    'This service sends notifications to your Slack channel.<br/>
-    To setup this Service you need to create a new <b>"Incoming webhook"</b> in your Slack integration panel,
-    and enter the Webhook URL below.'
-  end
-
-  def fields
-    default_fields =
-      [
-        { type: 'text', name: 'webhook',   placeholder: 'https://hooks.slack.com/services/...' },
-        { type: 'text', name: 'username', placeholder: 'username' },
-        { type: 'text', name: 'channel', placeholder: "#general" },
-        { type: 'checkbox', name: 'notify_only_broken_builds' },
-        { type: 'checkbox', name: 'notify_only_broken_pipelines' },
-      ]
-
-    default_fields + build_event_channels
-  end
-
-  def supported_events
-    %w[push issue confidential_issue merge_request note tag_push
-       build pipeline wiki_page]
-  end
-
-  def execute(data)
-    return unless supported_events.include?(data[:object_kind])
-    return unless webhook.present?
-
-    object_kind = data[:object_kind]
-
-    data = data.merge(
-      project_url: project_url,
-      project_name: project_name
-    )
-
-    # WebHook events often have an 'update' event that follows a 'open' or
-    # 'close' action. Ignore update events for now to prevent duplicate
-    # messages from arriving.
-
-    message = get_message(object_kind, data)
-
-    if message
-      opt = {}
-
-      event_channel = get_channel_field(object_kind) || channel
-
-      opt[:channel] = event_channel if event_channel
-      opt[:username] = username if username
-
-      notifier = Slack::Notifier.new(webhook, opt)
-      notifier.ping(message.pretext, attachments: message.attachments, fallback: message.fallback)
-
-      true
-    else
-      false
-    end
-  end
-
-  def event_channel_names
-    supported_events.map { |event| event_channel_name(event) }
-  end
-
-  def event_field(event)
-    fields.find { |field| field[:name] == event_channel_name(event) }
+    'This service sends notifications about projects events to Slack channels.<br />
+    To set up this service:
+    <ol>
+      <li><a href="https://slack.com/apps/A0F7XDUAZ-incoming-webhooks">Add an incoming webhook</a> in your Slack team. The default channel can be overridden for each event.</li>
+      <li>Paste the <strong>Webhook URL</strong> into the field below.</li>
+      <li>Select events below to enable notifications. The <strong>Channel name</strong> and <strong>Username</strong> fields are optional.</li>
+    </ol>'
   end
 
-  def global_fields
-    fields.reject { |field| field[:name].end_with?('channel') }
-  end
-
-  private
-
-  def get_message(object_kind, data)
-    case object_kind
-    when "push", "tag_push"
-      PushMessage.new(data)
-    when "issue"
-      IssueMessage.new(data) unless is_update?(data)
-    when "merge_request"
-      MergeMessage.new(data) unless is_update?(data)
-    when "note"
-      NoteMessage.new(data)
-    when "build"
-      BuildMessage.new(data) if should_build_be_notified?(data)
-    when "pipeline"
-      PipelineMessage.new(data) if should_pipeline_be_notified?(data)
-    when "wiki_page"
-      WikiPageMessage.new(data)
-    end
+  def default_channel_placeholder
+    "Channel name (e.g. general)"
   end
 
-  def get_channel_field(event)
-    field_name = event_channel_name(event)
-    self.public_send(field_name)
-  end
-
-  def build_event_channels
-    supported_events.reduce([]) do |channels, event|
-      channels << { type: 'text', name: event_channel_name(event), placeholder: "#general" }
-    end
-  end
-
-  def event_channel_name(event)
-    "#{event}_channel"
-  end
-
-  def project_name
-    project.name_with_namespace.gsub(/\s/, '')
-  end
-
-  def project_url
-    project.web_url
-  end
-
-  def is_update?(data)
-    data[:object_attributes][:action] == 'update'
-  end
-
-  def should_build_be_notified?(data)
-    case data[:commit][:status]
-    when 'success'
-      !notify_only_broken_builds?
-    when 'failed'
-      true
-    else
-      false
-    end
-  end
-
-  def should_pipeline_be_notified?(data)
-    case data[:object_attributes][:status]
-    when 'success'
-      !notify_only_broken_pipelines?
-    when 'failed'
-      true
-    else
-      false
-    end
+  def webhook_placeholder
+    'https://hooks.slack.com/services/…'
   end
 end
-
-require "slack_service/issue_message"
-require "slack_service/push_message"
-require "slack_service/merge_message"
-require "slack_service/note_message"
-require "slack_service/build_message"
-require "slack_service/pipeline_message"
-require "slack_service/wiki_page_message"
diff --git a/app/models/project_services/slack_service/base_message.rb b/app/models/project_services/slack_service/base_message.rb
deleted file mode 100644
index f1182824687..00000000000
--- a/app/models/project_services/slack_service/base_message.rb
+++ /dev/null
@@ -1,34 +0,0 @@
-require 'slack-notifier'
-
-class SlackService
-  class BaseMessage
-    def initialize(params)
-      raise NotImplementedError
-    end
-
-    def pretext
-      format(message)
-    end
-
-    def fallback
-    end
-
-    def attachments
-      raise NotImplementedError
-    end
-
-    private
-
-    def message
-      raise NotImplementedError
-    end
-
-    def format(string)
-      Slack::Notifier::LinkFormatter.format(string)
-    end
-
-    def attachment_color
-      '#345'
-    end
-  end
-end
diff --git a/app/models/project_services/slack_service/build_message.rb b/app/models/project_services/slack_service/build_message.rb
deleted file mode 100644
index 0fca4267bad..00000000000
--- a/app/models/project_services/slack_service/build_message.rb
+++ /dev/null
@@ -1,82 +0,0 @@
-class SlackService
-  class BuildMessage < BaseMessage
-    attr_reader :sha
-    attr_reader :ref_type
-    attr_reader :ref
-    attr_reader :status
-    attr_reader :project_name
-    attr_reader :project_url
-    attr_reader :user_name
-    attr_reader :duration
-
-    def initialize(params)
-      @sha = params[:sha]
-      @ref_type = params[:tag] ? 'tag' : 'branch'
-      @ref = params[:ref]
-      @project_name = params[:project_name]
-      @project_url = params[:project_url]
-      @status = params[:commit][:status]
-      @user_name = params[:commit][:author_name]
-      @duration = params[:commit][:duration]
-    end
-
-    def pretext
-      ''
-    end
-
-    def fallback
-      format(message)
-    end
-
-    def attachments
-      [{ text: format(message), color: attachment_color }]
-    end
-
-    private
-
-    def message
-      "#{project_link}: Commit #{commit_link} of #{branch_link} #{ref_type} by #{user_name} #{humanized_status} in #{duration} #{'second'.pluralize(duration)}"
-    end
-
-    def format(string)
-      Slack::Notifier::LinkFormatter.format(string)
-    end
-
-    def humanized_status
-      case status
-      when 'success'
-        'passed'
-      else
-        status
-      end
-    end
-
-    def attachment_color
-      if status == 'success'
-        'good'
-      else
-        'danger'
-      end
-    end
-
-    def branch_url
-      "#{project_url}/commits/#{ref}"
-    end
-
-    def branch_link
-      "[#{ref}](#{branch_url})"
-    end
-
-    def project_link
-      "[#{project_name}](#{project_url})"
-    end
-
-    def commit_url
-      "#{project_url}/commit/#{sha}/builds"
-    end
-
-    def commit_link
-      "[#{Commit.truncate_sha(sha)}](#{commit_url})"
-    end
-  end
-end
diff --git a/app/models/project_services/slack_service/issue_message.rb b/app/models/project_services/slack_service/issue_message.rb
deleted file mode 100644
index cd87a79d0c6..00000000000
--- a/app/models/project_services/slack_service/issue_message.rb
+++ /dev/null
@@ -1,69 +0,0 @@
-class SlackService
-  class IssueMessage < BaseMessage
-    attr_reader :user_name
-    attr_reader :title
-    attr_reader :project_name
-    attr_reader :project_url
-    attr_reader :issue_iid
-    attr_reader :issue_url
-    attr_reader :action
-    attr_reader :state
-    attr_reader :description
-
-    def initialize(params)
-      @user_name = params[:user][:username]
-      @project_name = params[:project_name]
-      @project_url = params[:project_url]
-
-      obj_attr = params[:object_attributes]
-      obj_attr = HashWithIndifferentAccess.new(obj_attr)
-      @title = obj_attr[:title]
-      @issue_iid = obj_attr[:iid]
-      @issue_url = obj_attr[:url]
-      @action = obj_attr[:action]
-      @state = obj_attr[:state]
-      @description = obj_attr[:description] || ''
-    end
-
-    def attachments
-      return [] unless opened_issue?
-
-      description_message
-    end
-
-    private
-
-    def message
-      case state
-      when "opened"
-        "[#{project_link}] Issue #{state} by #{user_name}"
-      else
-        "[#{project_link}] Issue #{issue_link} #{state} by #{user_name}"
-      end
-    end
-
-    def opened_issue?
-      action == "open"
-    end
-
-    def description_message
-      [{
-        title: issue_title,
-        title_link: issue_url,
-        text: format(description),
-        color: "#C95823" }]
-    end
-
-    def project_link
-      "[#{project_name}](#{project_url})"
-    end
-
-    def issue_link
-      "[#{issue_title}](#{issue_url})"
-    end
-
-    def issue_title
-      "##{issue_iid} #{title}"
-    end
-  end
-end
diff --git a/app/models/project_services/slack_service/merge_message.rb b/app/models/project_services/slack_service/merge_message.rb
deleted file mode 100644
index b7615c96068..00000000000
--- a/app/models/project_services/slack_service/merge_message.rb
+++ /dev/null
@@ -1,60 +0,0 @@
-class SlackService
-  class MergeMessage < BaseMessage
-    attr_reader :user_name
-    attr_reader :project_name
-    attr_reader :project_url
-    attr_reader :merge_request_id
-    attr_reader :source_branch
-    attr_reader :target_branch
-    attr_reader :state
-    attr_reader :title
-
-    def initialize(params)
-      @user_name = params[:user][:username]
-      @project_name = params[:project_name]
-      @project_url = params[:project_url]
-
-      obj_attr = params[:object_attributes]
-      obj_attr = HashWithIndifferentAccess.new(obj_attr)
-      @merge_request_id = obj_attr[:iid]
-      @source_branch = obj_attr[:source_branch]
-      @target_branch = obj_attr[:target_branch]
-      @state = obj_attr[:state]
-      @title = format_title(obj_attr[:title])
-    end
-
-    def pretext
-      format(message)
-    end
-
-    def attachments
-      []
-    end
-
-    private
-
-    def format_title(title)
-      '*' + title.lines.first.chomp + '*'
-    end
-
-    def message
-      merge_request_message
-    end
-
-    def project_link
-      "[#{project_name}](#{project_url})"
-    end
-
-    def merge_request_message
-      "#{user_name} #{state} #{merge_request_link} in #{project_link}: #{title}"
-    end
-
-    def merge_request_link
-      "[merge request !#{merge_request_id}](#{merge_request_url})"
-    end
-
-    def merge_request_url
-      "#{project_url}/merge_requests/#{merge_request_id}"
-    end
-  end
-end
diff --git a/app/models/project_services/slack_service/note_message.rb b/app/models/project_services/slack_service/note_message.rb
deleted file mode 100644
index 9e84e90f38c..00000000000
--- a/app/models/project_services/slack_service/note_message.rb
+++ /dev/null
@@ -1,83 +0,0 @@
-class SlackService
-  class NoteMessage < BaseMessage
-    attr_reader :message
-    attr_reader :user_name
-    attr_reader :project_name
-    attr_reader :project_link
-    attr_reader :note
-    attr_reader :note_url
-    attr_reader :title
-
-    def initialize(params)
-      params = HashWithIndifferentAccess.new(params)
-      @user_name = params[:user][:username]
-      @project_name = params[:project_name]
-      @project_url = params[:project_url]
-
-      obj_attr = params[:object_attributes]
-      obj_attr = HashWithIndifferentAccess.new(obj_attr)
-      @note = obj_attr[:note]
-      @note_url = obj_attr[:url]
-      noteable_type = obj_attr[:noteable_type]
-
-      case noteable_type
-      when "Commit"
-        create_commit_note(HashWithIndifferentAccess.new(params[:commit]))
-      when "Issue"
-        create_issue_note(HashWithIndifferentAccess.new(params[:issue]))
-      when "MergeRequest"
-        create_merge_note(HashWithIndifferentAccess.new(params[:merge_request]))
-      when "Snippet"
-        create_snippet_note(HashWithIndifferentAccess.new(params[:snippet]))
-      end
-    end
-
-    def attachments
-      description_message
-    end
-
-    private
-
-    def format_title(title)
-      title.lines.first.chomp
-    end
-
-    def create_commit_note(commit)
-      commit_sha = commit[:id]
-      commit_sha = Commit.truncate_sha(commit_sha)
-      commented_on_message(
-        "[commit #{commit_sha}](#{@note_url})",
-        format_title(commit[:message]))
-    end
-
-    def create_issue_note(issue)
-      commented_on_message(
-        "[issue ##{issue[:iid]}](#{@note_url})",
-        format_title(issue[:title]))
-    end
-
-    def create_merge_note(merge_request)
-      commented_on_message(
-        "[merge request !#{merge_request[:iid]}](#{@note_url})",
-        format_title(merge_request[:title]))
-    end
-
-    def create_snippet_note(snippet)
-      commented_on_message(
-        "[snippet ##{snippet[:id]}](#{@note_url})",
-        format_title(snippet[:title]))
-    end
-
-    def description_message
-      [{ text: format(@note), color: attachment_color }]
-    end
-
-    def project_link
-      "[#{@project_name}](#{@project_url})"
-    end
-
-    def commented_on_message(target_link, title)
-      @message = "#{@user_name} commented on #{target_link} in #{project_link}: *#{title}*"
-    end
-  end
-end
diff --git a/app/models/project_services/slack_service/pipeline_message.rb b/app/models/project_services/slack_service/pipeline_message.rb
deleted file mode 100644
index f06b3562965..00000000000
--- a/app/models/project_services/slack_service/pipeline_message.rb
+++ /dev/null
@@ -1,79 +0,0 @@
-class SlackService
-  class PipelineMessage < BaseMessage
-    attr_reader :sha, :ref_type, :ref, :status, :project_name, :project_url,
-                :user_name, :duration, :pipeline_id
-
-    def initialize(data)
-      pipeline_attributes = data[:object_attributes]
-      @sha = pipeline_attributes[:sha]
-      @ref_type = pipeline_attributes[:tag] ? 'tag' : 'branch'
-      @ref = pipeline_attributes[:ref]
-      @status = pipeline_attributes[:status]
-      @duration = pipeline_attributes[:duration]
-      @pipeline_id = pipeline_attributes[:id]
-
-      @project_name = data[:project][:path_with_namespace]
-      @project_url = data[:project][:web_url]
-      @user_name = data[:commit] && data[:commit][:author_name]
-    end
-
-    def pretext
-      ''
-    end
-
-    def fallback
-      format(message)
-    end
-
-    def attachments
-      [{ text: format(message), color: attachment_color }]
-    end
-
-    private
-
-    def message
-      "#{project_link}: Pipeline #{pipeline_link} of #{branch_link} #{ref_type} by #{user_name} #{humanized_status} in #{duration} #{'second'.pluralize(duration)}"
-    end
-
-    def format(string)
-      Slack::Notifier::LinkFormatter.format(string)
-    end
-
-    def humanized_status
-      case status
-      when 'success'
-        'passed'
-      else
-        status
-      end
-    end
-
-    def attachment_color
-      if status == 'success'
-        'good'
-      else
-        'danger'
-      end
-    end
-
-    def branch_url
-      "#{project_url}/commits/#{ref}"
-    end
-
-    def branch_link
-      "[#{ref}](#{branch_url})"
-    end
-
-    def project_link
-      "[#{project_name}](#{project_url})"
-    end
-
-    def pipeline_url
-      "#{project_url}/pipelines/#{pipeline_id}"
-    end
-
-    def pipeline_link
-      "[#{Commit.truncate_sha(sha)}](#{pipeline_url})"
-    end
-  end
-end
diff --git a/app/models/project_services/slack_service/push_message.rb b/app/models/project_services/slack_service/push_message.rb
deleted file mode 100644
index b26f3e9ddce..00000000000
--- a/app/models/project_services/slack_service/push_message.rb
+++ /dev/null
@@ -1,110 +0,0 @@
-class SlackService
-  class PushMessage < BaseMessage
-    attr_reader :after
-    attr_reader :before
-    attr_reader :commits
-    attr_reader :project_name
-    attr_reader :project_url
-    attr_reader :ref
-    attr_reader :ref_type
-    attr_reader :user_name
-
-    def initialize(params)
-      @after = params[:after]
-      @before = params[:before]
-      @commits = params.fetch(:commits, [])
-      @project_name = params[:project_name]
-      @project_url = params[:project_url]
-      @ref_type = Gitlab::Git.tag_ref?(params[:ref]) ? 'tag' : 'branch'
-      @ref = Gitlab::Git.ref_name(params[:ref])
-      @user_name = params[:user_name]
-    end
-
-    def pretext
-      format(message)
-    end
-
-    def attachments
-      return [] if new_branch? || removed_branch?
-
-      commit_message_attachments
-    end
-
-    private
-
-    def message
-      if new_branch?
-        new_branch_message
-      elsif removed_branch?
-        removed_branch_message
-      else
-        push_message
-      end
-    end
-
-    def format(string)
-      Slack::Notifier::LinkFormatter.format(string)
-    end
-
-    def new_branch_message
-      "#{user_name} pushed new #{ref_type} #{branch_link} to #{project_link}"
-    end
-
-    def removed_branch_message
-      "#{user_name} removed #{ref_type} #{ref} from #{project_link}"
-    end
-
-    def push_message
-      "#{user_name} pushed to #{ref_type} #{branch_link} of #{project_link} (#{compare_link})"
-    end
-
-    def commit_messages
-      commits.map { |commit| compose_commit_message(commit) }.join("\n")
-    end
-
-    def commit_message_attachments
-      [{ text: format(commit_messages), color: attachment_color }]
-    end
-
-    def compose_commit_message(commit)
-      author = commit[:author][:name]
-      id = Commit.truncate_sha(commit[:id])
-      message = commit[:message]
-      url = commit[:url]
-
-      "[#{id}](#{url}): #{message} - #{author}"
-    end
-
-    def new_branch?
-      Gitlab::Git.blank_ref?(before)
-    end
-
-    def removed_branch?
-      Gitlab::Git.blank_ref?(after)
-    end
-
-    def branch_url
-      "#{project_url}/commits/#{ref}"
-    end
-
-    def compare_url
-      "#{project_url}/compare/#{before}...#{after}"
-    end
-
-    def branch_link
-      "[#{ref}](#{branch_url})"
-    end
-
-    def project_link
-      "[#{project_name}](#{project_url})"
-    end
-
-    def compare_link
-      "[Compare changes](#{compare_url})"
-    end
-
-    def attachment_color
-      '#345'
-    end
-  end
-end
diff --git a/app/models/project_services/slack_service/wiki_page_message.rb b/app/models/project_services/slack_service/wiki_page_message.rb
deleted file mode 100644
index 160ca3ac115..00000000000
--- a/app/models/project_services/slack_service/wiki_page_message.rb
+++ /dev/null
@@ -1,53 +0,0 @@
-class SlackService
-  class WikiPageMessage < BaseMessage
-    attr_reader :user_name
-    attr_reader :title
-    attr_reader :project_name
-    attr_reader :project_url
-    attr_reader :wiki_page_url
-    attr_reader :action
-    attr_reader :description
-
-    def initialize(params)
-      @user_name = params[:user][:username]
-      @project_name = params[:project_name]
-      @project_url = params[:project_url]
-
-      obj_attr = params[:object_attributes]
-      obj_attr = HashWithIndifferentAccess.new(obj_attr)
-      @title = obj_attr[:title]
-      @wiki_page_url = obj_attr[:url]
-      @description = obj_attr[:content]
-
-      @action =
-        case obj_attr[:action]
-        when "create"
-          "created"
-        when "update"
-          "edited"
-        end
-    end
-
-    def attachments
-      description_message
-    end
-
-    private
-
-    def message
-      "#{user_name} #{action} #{wiki_page_link} in #{project_link}: *#{title}*"
-    end
-
-    def description_message
-      [{ text: format(@description), color: attachment_color }]
-    end
-
-    def project_link
-      "[#{project_name}](#{project_url})"
-    end
-
-    def wiki_page_link
-      "[wiki page](#{wiki_page_url})"
-    end
-  end
-end
diff --git a/app/models/project_services/slack_slash_commands_service.rb b/app/models/project_services/slack_slash_commands_service.rb
new file mode 100644
index 00000000000..2182c1c7e4b
--- /dev/null
+++ b/app/models/project_services/slack_slash_commands_service.rb
@@ -0,0 +1,28 @@
+class SlackSlashCommandsService < ChatSlashCommandsService
+  include TriggersHelper
+
+  def title
+    'Slack slash commands'
+  end
+
+  def description
+    "Perform common operations in Slack"
+  end
+
+  def self.to_param
+    'slack_slash_commands'
+  end
+
+  def trigger(params)
+    # Format messages to be Slack-compatible
+    super.tap do |result|
+      result[:text] = format(result[:text]) if result.is_a?(Hash)
+    end
+  end
+
+  private
+
+  def format(text)
+    Slack::Notifier::LinkFormatter.format(text) if text
+  end
+end
diff --git a/app/models/project_services/teamcity_service.rb b/app/models/project_services/teamcity_service.rb
index a4a967c9bc9..cbaffb8ce48 100644
--- a/app/models/project_services/teamcity_service.rb
+++ b/app/models/project_services/teamcity_service.rb
@@ -1,4 +1,6 @@
 class TeamcityService < CiService
+  include ReactiveService
+
   prop_accessor :teamcity_url, :build_type, :username, :password
 
   validates :teamcity_url, presence: true, url: true, if: :activated?
@@ -41,14 +43,10 @@ class TeamcityService < CiService
     'requests build, that setting is in the vsc root advanced settings.'
   end
 
-  def to_param
+  def self.to_param
     'teamcity'
   end
 
-  def supported_events
-    %w(push)
-  end
-
   def fields
     [
       { type: 'text', name: 'teamcity_url',
@@ -61,43 +59,18 @@ class TeamcityService < CiService
     ]
   end
 
-  def build_info(sha)
-    @response = get_path("httpAuth/app/rest/builds/branch:unspecified:any,number:#{sha}")
-  end
-
   def build_page(sha, ref)
-    build_info(sha) if @response.nil? || !@response.code
-
-    if @response.code != 200
-      # If actual build link can't be determined,
-      # send user to build summary page.
-      build_url("viewLog.html?buildTypeId=#{build_type}")
-    else
-      # If actual build link is available, go to build result page.
-      built_id = @response['build']['id']
-      build_url("viewLog.html?buildId=#{built_id}&buildTypeId=#{build_type}")
-    end
+    with_reactive_cache(sha, ref) {|cached| cached[:build_page] }
   end
 
   def commit_status(sha, ref)
-    build_info(sha) if @response.nil? || !@response.code
-    return :error unless @response.code == 200 || @response.code == 404
+    with_reactive_cache(sha, ref) {|cached| cached[:commit_status] }
+  end
 
-    status = if @response.code == 404
-               'Pending'
-             else
-               @response['build']['status']
-             end
+  def calculate_reactive_cache(sha, ref)
+    response = get_path("httpAuth/app/rest/builds/branch:unspecified:any,number:#{sha}")
 
-    if status.include?('SUCCESS')
-      'success'
-    elsif status.include?('FAILURE')
-      'failed'
-    elsif status.include?('Pending')
-      'pending'
-    else
-      :error
-    end
+    { build_page: read_build_page(response), commit_status: read_commit_status(response) }
   end
 
   def execute(data)
@@ -122,6 +95,40 @@ class TeamcityService < CiService
 
   private
 
+  def read_build_page(response)
+    if response.code != 200
+      # If actual build link can't be determined,
+      # send user to build summary page.
+      build_url("viewLog.html?buildTypeId=#{build_type}")
+    else
+      # If actual build link is available, go to build result page.
+      built_id = response['build']['id']
+      build_url("viewLog.html?buildId=#{built_id}&buildTypeId=#{build_type}")
+    end
+  end
+
+  def read_commit_status(response)
+    return :error unless response.code == 200 || response.code == 404
+
+    status = if response.code == 404
+               'Pending'
+             else
+               response['build']['status']
+             end
+
+    return :error unless status.present?
+
+    if status.include?('SUCCESS')
+      'success'
+    elsif status.include?('FAILURE')
+      'failed'
+    elsif status.include?('Pending')
+      'pending'
+    else
+      :error
+    end
+  end
+
   def build_url(path)
     URI.join("#{teamcity_url}/", path).to_s
   end
diff --git a/app/models/project_statistics.rb b/app/models/project_statistics.rb
new file mode 100644
index 00000000000..aeaf63abab9
--- /dev/null
+++ b/app/models/project_statistics.rb
@@ -0,0 +1,44 @@
+class ProjectStatistics < ActiveRecord::Base
+  belongs_to :project
+  belongs_to :namespace
+
+  before_save :update_storage_size
+
+  STORAGE_COLUMNS = [:repository_size, :lfs_objects_size, :build_artifacts_size].freeze
+  STATISTICS_COLUMNS = [:commit_count] + STORAGE_COLUMNS
+
+  def total_repository_size
+    repository_size + lfs_objects_size
+  end
+
+  def refresh!(only: nil)
+    STATISTICS_COLUMNS.each do |column, generator|
+      if only.blank? || only.include?(column)
+        public_send("update_#{column}")
+      end
+    end
+
+    save!
+  end
+
+  def update_commit_count
+    self.commit_count = project.repository.commit_count
+  end
+
+  # Repository#size needs to be converted from MB to Byte.
+  def update_repository_size
+    self.repository_size = project.repository.size * 1.megabyte
+  end
+
+  def update_lfs_objects_size
+    self.lfs_objects_size = project.lfs_objects.sum(:size)
+  end
+
+  def update_build_artifacts_size
+    self.build_artifacts_size = project.builds.sum(:artifacts_size)
+  end
+
+  def update_storage_size
+    self.storage_size = STORAGE_COLUMNS.sum(&method(:read_attribute))
+  end
+end
diff --git a/app/models/project_team.rb b/app/models/project_team.rb
index a6e911df9bd..6d6644053f8 100644
--- a/app/models/project_team.rb
+++ b/app/models/project_team.rb
@@ -21,6 +21,22 @@ class ProjectTeam
     end
   end
 
+  def add_guest(user, current_user: nil)
+    self << [user, :guest, current_user]
+  end
+
+  def add_reporter(user, current_user: nil)
+    self << [user, :reporter, current_user]
+  end
+
+  def add_developer(user, current_user: nil)
+    self << [user, :developer, current_user]
+  end
+
+  def add_master(user, current_user: nil)
+    self << [user, :master, current_user]
+  end
+
   def find_member(user_id)
     member = project.members.find_by(user_id: user_id)
 
@@ -64,19 +80,19 @@ class ProjectTeam
   alias_method :users, :members
 
   def guests
-    @guests ||= fetch_members(:guests)
+    @guests ||= fetch_members(Gitlab::Access::GUEST)
   end
 
   def reporters
-    @reporters ||= fetch_members(:reporters)
+    @reporters ||= fetch_members(Gitlab::Access::REPORTER)
   end
 
   def developers
-    @developers ||= fetch_members(:developers)
+    @developers ||= fetch_members(Gitlab::Access::DEVELOPER)
   end
 
   def masters
-    @masters ||= fetch_members(:masters)
+    @masters ||= fetch_members(Gitlab::Access::MASTER)
   end
 
   def import(source_project, current_user = nil)
@@ -125,8 +141,12 @@ class ProjectTeam
     max_member_access(user.id) == Gitlab::Access::MASTER
   end
 
-  def member?(user, min_member_access = Gitlab::Access::GUEST)
-    max_member_access(user.id) >= min_member_access
+  # Checks if `user` is authorized for this project, with at least the
+  # `min_access_level` (if given).
+  def member?(user, min_access_level = Gitlab::Access::GUEST)
+    return false unless user
+
+    user.authorized_project?(project, min_access_level)
   end
 
   def human_max_access(user_id)
@@ -150,111 +170,31 @@ class ProjectTeam
     # Lookup only the IDs we need
     user_ids = user_ids - access.keys
 
-    if user_ids.present?
-      user_ids.each { |id| access[id] = Gitlab::Access::NO_ACCESS }
+    return access if user_ids.empty?
 
-      member_access = project.members.access_for_user_ids(user_ids)
-      merge_max!(access, member_access)
-
-      if group
-        group_access = group.members.access_for_user_ids(user_ids)
-        merge_max!(access, group_access)
-      end
-
-      # Each group produces a list of maximum access level per user. We take the
-      # max of the values produced by each group.
-      if project_shared_with_group?
-        project.project_group_links.each do |group_link|
-          invited_access = max_invited_level_for_users(group_link, user_ids)
-          merge_max!(access, invited_access)
-        end
-      end
-    end
+    users_access = project.project_authorizations.
+      where(user: user_ids).
+      group(:user_id).
+      maximum(:access_level)
 
+    access.merge!(users_access)
     access
   end
 
   def max_member_access(user_id)
-    max_member_access_for_user_ids([user_id])[user_id]
+    max_member_access_for_user_ids([user_id])[user_id] || Gitlab::Access::NO_ACCESS
   end
 
   private
 
-  # For a given group, return the maximum access level for the user. This is the min of
-  # the invited access level of the group and the access level of the user within the group.
-  # For example, if the group has been given DEVELOPER access but the member has MASTER access,
-  # the user should receive only DEVELOPER access.
-  def max_invited_level_for_users(group_link, user_ids)
-    invited_group = group_link.group
-    capped_access_level = group_link.group_access
-    access = invited_group.group_members.access_for_user_ids(user_ids)
-
-    # If the user is not in the list, assume he/she does not have access
-    missing_users = user_ids - access.keys
-    missing_users.each { |id| access[id] = Gitlab::Access::NO_ACCESS }
-
-    # Cap the maximum access by the invited level access
-    access.each { |key, value| access[key] = [value, capped_access_level].min }
-  end
-
   def fetch_members(level = nil)
-    project_members = project.members
-    group_members = group ? group.members : []
-
-    if level
-      project_members = project_members.public_send(level)
-      group_members = group_members.public_send(level) if group
-    end
+    members = project.authorized_users
+    members = members.where(project_authorizations: { access_level: level }) if level
 
-    user_ids = project_members.pluck(:user_id)
-
-    invited_members = fetch_invited_members(level)
-    user_ids.push(*invited_members.map(&:user_id)) if invited_members.any?
-
-    user_ids.push(*group_members.pluck(:user_id)) if group
-
-    User.where(id: user_ids)
+    members
   end
 
   def group
     project.group
   end
-
-  def merge_max!(first_hash, second_hash)
-    first_hash.merge!(second_hash) { |_key, old, new| old > new ? old : new }
-  end
-
-  def project_shared_with_group?
-    project.invited_groups.any? && project.allowed_to_share_with_group?
-  end
-
-  def fetch_invited_members(level = nil)
-    invited_members = []
-
-    return invited_members unless project_shared_with_group?
-
-    project.project_group_links.includes(group: [:group_members]).each do |link|
-      invited_group_members = link.group.members
-
-      if level
-        numeric_level = GroupMember.access_level_roles[level.to_s.singularize.titleize]
-
-        # If we're asked for a level that's higher than the group's access,
-        # there's nothing left to do
-        next if numeric_level > link.group_access
-
-        # Make sure we include everyone _above_ the requested level as well
-        invited_group_members =
-          if numeric_level == link.group_access
-            invited_group_members.where("access_level >= ?", link.group_access)
-          else
-            invited_group_members.public_send(level)
-          end
-      end
-
-      invited_members << invited_group_members
-    end
-
-    invited_members.flatten.compact
-  end
 end
diff --git a/app/models/project_wiki.rb b/app/models/project_wiki.rb
index 46f70da2452..70eef359cdd 100644
--- a/app/models/project_wiki.rb
+++ b/app/models/project_wiki.rb
@@ -5,9 +5,9 @@ class ProjectWiki
     'Markdown' => :markdown,
     'RDoc'     => :rdoc,
     'AsciiDoc' => :asciidoc
-  } unless defined?(MARKUPS)
+  }.freeze unless defined?(MARKUPS)
 
-  class CouldNotCreateWikiError < StandardError; end
+  CouldNotCreateWikiError = Class.new(StandardError)
 
   # Returns a string describing what went wrong after
   # an operation fails.
@@ -19,6 +19,9 @@ class ProjectWiki
     @user = user
   end
 
+  delegate :empty?, to: :pages
+  delegate :repository_storage_path, to: :project
+
   def path
     @project.path + '.wiki'
   end
@@ -39,8 +42,11 @@ class ProjectWiki
     url_to_repo
   end
 
-  def http_url_to_repo
-    [Gitlab.config.gitlab.url, "/", path_with_namespace, ".git"].join('')
+  def http_url_to_repo(user = nil)
+    url = "#{Gitlab.config.gitlab.url}/#{path_with_namespace}.git"
+    credentials = Gitlab::UrlSanitizer.http_credentials_for_user(user)
+
+    Gitlab::UrlSanitizer.new(url, credentials: credentials).full_url
   end
 
   def wiki_base_path
@@ -60,10 +66,6 @@ class ProjectWiki
     !!repository.exists?
   end
 
-  def empty?
-    pages.empty?
-  end
-
   # Returns an Array of Gitlab WikiPage instances or an
   # empty Array if this Wiki has no pages.
   def pages
@@ -127,7 +129,7 @@ class ProjectWiki
   end
 
   def search_files(query)
-    repository.search_files(query, default_branch)
+    repository.search_files_by_content(query, default_branch)
   end
 
   def repository
diff --git a/app/models/protected_branch.rb b/app/models/protected_branch.rb
index 6240912a6e1..39e979ef15b 100644
--- a/app/models/protected_branch.rb
+++ b/app/models/protected_branch.rb
@@ -8,8 +8,8 @@ class ProtectedBranch < ActiveRecord::Base
   has_many :merge_access_levels, dependent: :destroy
   has_many :push_access_levels, dependent: :destroy
 
-  validates_length_of :merge_access_levels, is: 1, message: "are restricted to a single instance per protected branch."
-  validates_length_of :push_access_levels, is: 1, message: "are restricted to a single instance per protected branch."
+  validates :merge_access_levels, length: { is: 1, message: "are restricted to a single instance per protected branch." }
+  validates :push_access_levels, length: { is: 1, message: "are restricted to a single instance per protected branch." }
 
   accepts_nested_attributes_for :push_access_levels
   accepts_nested_attributes_for :merge_access_levels
diff --git a/app/models/protected_branch/merge_access_level.rb b/app/models/protected_branch/merge_access_level.rb
index 806b3ccd275..771e3376613 100644
--- a/app/models/protected_branch/merge_access_level.rb
+++ b/app/models/protected_branch/merge_access_level.rb
@@ -1,9 +1,6 @@
 class ProtectedBranch::MergeAccessLevel < ActiveRecord::Base
   include ProtectedBranchAccess
 
-  belongs_to :protected_branch
-  delegate :project, to: :protected_branch
-
   validates :access_level, presence: true, inclusion: { in: [Gitlab::Access::MASTER,
                                                              Gitlab::Access::DEVELOPER] }
 
@@ -13,10 +10,4 @@ class ProtectedBranch::MergeAccessLevel < ActiveRecord::Base
       Gitlab::Access::DEVELOPER => "Developers + Masters"
     }.with_indifferent_access
   end
-
-  def check_access(user)
-    return true if user.is_admin?
-
-    project.team.max_member_access(user.id) >= access_level
-  end
 end
diff --git a/app/models/protected_branch/push_access_level.rb b/app/models/protected_branch/push_access_level.rb
index 92e9c51d883..14610cb42b7 100644
--- a/app/models/protected_branch/push_access_level.rb
+++ b/app/models/protected_branch/push_access_level.rb
@@ -1,9 +1,6 @@
 class ProtectedBranch::PushAccessLevel < ActiveRecord::Base
   include ProtectedBranchAccess
 
-  belongs_to :protected_branch
-  delegate :project, to: :protected_branch
-
   validates :access_level, presence: true, inclusion: { in: [Gitlab::Access::MASTER,
                                                              Gitlab::Access::DEVELOPER,
                                                              Gitlab::Access::NO_ACCESS] }
@@ -18,8 +15,7 @@ class ProtectedBranch::PushAccessLevel < ActiveRecord::Base
 
   def check_access(user)
     return false if access_level == Gitlab::Access::NO_ACCESS
-    return true if user.is_admin?
 
-    project.team.max_member_access(user.id) >= access_level
+    super
   end
 end
diff --git a/app/models/repository.rb b/app/models/repository.rb
index 30be7262438..596650353fc 100644
--- a/app/models/repository.rb
+++ b/app/models/repository.rb
@@ -1,28 +1,53 @@
 require 'securerandom'
 
 class Repository
-  class CommitError < StandardError; end
-
-  # Files to use as a project avatar in case no avatar was uploaded via the web
-  # UI.
-  AVATAR_FILES = %w{logo.png logo.jpg logo.gif}
-
   include Gitlab::ShellAdapter
 
   attr_accessor :path_with_namespace, :project
 
-  def self.storages
-    Gitlab.config.repositories.storages
-  end
+  CommitError = Class.new(StandardError)
+  CreateTreeError = Class.new(StandardError)
 
-  def self.remove_storage_from_path(repo_path)
-    storages.find do |_, storage_path|
-      if repo_path.start_with?(storage_path)
-        return repo_path.sub(storage_path, '')
-      end
-    end
+  # Methods that cache data from the Git repository.
+  #
+  # Each entry in this Array should have a corresponding method with the exact
+  # same name. The cache key used by those methods must also match method's
+  # name.
+  #
+  # For example, for entry `:readme` there's a method called `readme` which
+  # stores its data in the `readme` cache key.
+  CACHED_METHODS = %i(size commit_count readme version contribution_guide
+                      changelog license_blob license_key gitignore koding_yml
+                      gitlab_ci_yml branch_names tag_names branch_count
+                      tag_count avatar exists? empty? root_ref).freeze
+
+  # Certain method caches should be refreshed when certain types of files are
+  # changed. This Hash maps file types (as returned by Gitlab::FileDetector) to
+  # the corresponding methods to call for refreshing caches.
+  METHOD_CACHES_FOR_FILE_TYPES = {
+    readme: :readme,
+    changelog: :changelog,
+    license: %i(license_blob license_key),
+    contributing: :contribution_guide,
+    version: :version,
+    gitignore: :gitignore,
+    koding: :koding_yml,
+    gitlab_ci: :gitlab_ci_yml,
+    avatar: :avatar
+  }.freeze
+
+  # Wraps around the given method and caches its output in Redis and an instance
+  # variable.
+  #
+  # This only works for methods that do not take any arguments.
+  def self.cache_method(name, fallback: nil)
+    original = :"_uncached_#{name}"
+
+    alias_method(original, name)
 
-    repo_path
+    define_method(name) do
+      cache_method_output(name, fallback: fallback) { __send__(original) }
+    end
   end
 
   def initialize(path_with_namespace, project)
@@ -36,10 +61,6 @@ class Repository
     @raw_repository ||= Gitlab::Git::Repository.new(path_to_repo)
   end
 
-  def update_autocrlf_option
-    raw_repository.autocrlf = :input if raw_repository.autocrlf != :input
-  end
-
   # Return absolute path to repository
   def path_to_repo
     @path_to_repo ||= File.expand_path(
@@ -47,24 +68,6 @@ class Repository
     )
   end
 
-  def exists?
-    return @exists unless @exists.nil?
-
-    @exists = cache.fetch(:exists?) do
-      begin
-        raw_repository && raw_repository.rugged ? true : false
-      rescue Gitlab::Git::Repository::NoRepository
-        false
-      end
-    end
-  end
-
-  def empty?
-    return @empty unless @empty.nil?
-
-    @empty = cache.fetch(:empty?) { raw_repository.empty? }
-  end
-
   #
   # Git repository can contains some hidden refs like:
   #   /refs/notes/*
@@ -75,24 +78,22 @@ class Repository
   # This method return true if repository contains some content visible in project page.
   #
   def has_visible_content?
-    return @has_visible_content unless @has_visible_content.nil?
-
-    @has_visible_content = cache.fetch(:has_visible_content?) do
-      branch_count > 0
-    end
+    branch_count > 0
   end
 
   def commit(ref = 'HEAD')
     return nil unless exists?
+
     commit =
       if ref.is_a?(Gitlab::Git::Commit)
         ref
       else
         Gitlab::Git::Commit.find(raw_repository, ref)
       end
+
     commit = ::Commit.new(commit, @project) if commit
     commit
-  rescue Rugged::OdbError
+  rescue Rugged::OdbError, Rugged::TreeError
     nil
   end
 
@@ -105,9 +106,7 @@ class Repository
       offset: offset,
       after: after,
       before: before,
-      # --follow doesn't play well with --skip. See:
-      # https://gitlab.com/gitlab-org/gitlab-ce/issues/3574#note_3040520
-      follow: false,
+      follow: path.present?,
       skip_merges: skip_merges
     }
 
@@ -160,93 +159,60 @@ class Repository
     tags.find { |tag| tag.name == name }
   end
 
-  def add_branch(user, branch_name, target)
-    oldrev = Gitlab::Git::BLANK_SHA
-    ref    = Gitlab::Git::BRANCH_REF_PREFIX + branch_name
-    target = commit(target).try(:id)
+  def add_branch(user, branch_name, ref)
+    newrev = commit(ref).try(:sha)
 
-    return false unless target
+    return false unless newrev
 
-    GitHooksService.new.execute(user, path_to_repo, oldrev, target, ref) do
-      update_ref!(ref, target, oldrev)
-    end
+    GitOperationService.new(user, self).add_branch(branch_name, newrev)
 
     after_create_branch
     find_branch(branch_name)
   end
 
   def add_tag(user, tag_name, target, message = nil)
-    oldrev = Gitlab::Git::BLANK_SHA
-    ref    = Gitlab::Git::TAG_REF_PREFIX + tag_name
-    target = commit(target).try(:id)
-
-    return false unless target
-
+    newrev = commit(target).try(:id)
     options = { message: message, tagger: user_to_committer(user) } if message
 
-    GitHooksService.new.execute(user, path_to_repo, oldrev, target, ref) do
-      rugged.tags.create(tag_name, target, options)
-    end
+    return false unless newrev
+
+    GitOperationService.new(user, self).add_tag(tag_name, newrev, options)
 
     find_tag(tag_name)
   end
 
   def rm_branch(user, branch_name)
     before_remove_branch
-
     branch = find_branch(branch_name)
-    oldrev = branch.try(:dereferenced_target).try(:id)
-    newrev = Gitlab::Git::BLANK_SHA
-    ref    = Gitlab::Git::BRANCH_REF_PREFIX + branch_name
 
-    GitHooksService.new.execute(user, path_to_repo, oldrev, newrev, ref) do
-      update_ref!(ref, newrev, oldrev)
-    end
+    GitOperationService.new(user, self).rm_branch(branch)
 
     after_remove_branch
     true
   end
 
-  def rm_tag(tag_name)
+  def rm_tag(user, tag_name)
     before_remove_tag
+    tag = find_tag(tag_name)
 
-    begin
-      rugged.tags.delete(tag_name)
-      true
-    rescue Rugged::ReferenceError
-      false
-    end
+    GitOperationService.new(user, self).rm_tag(tag)
+
+    after_remove_tag
+    true
   end
 
   def ref_names
     branch_names + tag_names
   end
 
-  def branch_names
-    @branch_names ||= cache.fetch(:branch_names) { branches.map(&:name) }
-  end
-
   def branch_exists?(branch_name)
     branch_names.include?(branch_name)
   end
 
   def ref_exists?(ref)
     rugged.references.exist?(ref)
-  end
-
-  def update_ref!(name, newrev, oldrev)
-    # We use 'git update-ref' because libgit2/rugged currently does not
-    # offer 'compare and swap' ref updates. Without compare-and-swap we can
-    # (and have!) accidentally reset the ref to an earlier state, clobbering
-    # commits. See also https://github.com/libgit2/libgit2/issues/1534.
-    command = %w[git update-ref --stdin -z]
-    _, status = Gitlab::Popen.popen(command, path_to_repo) do |stdin|
-      stdin.write("update #{name}\x00#{newrev}\x00#{oldrev}\x00")
-    end
-
-    return if status.zero?
-
-    raise CommitError.new("Could not update branch #{name.sub('refs/heads/', '')}. Please refresh and try again.")
+  rescue Rugged::ReferenceError
+    false
   end
 
   # Makes sure a commit is kept around when Git garbage collection runs.
@@ -270,39 +236,7 @@ class Repository
   end
 
   def kept_around?(sha)
-    begin
-      ref_exists?(keep_around_ref_name(sha))
-    rescue Rugged::ReferenceError
-      false
-    end
-  end
-
-  def tag_names
-    cache.fetch(:tag_names) { raw_repository.tag_names }
-  end
-
-  def commit_count
-    cache.fetch(:commit_count) do
-      begin
-        raw_repository.commit_count(self.root_ref)
-      rescue
-        0
-      end
-    end
-  end
-
-  def branch_count
-    @branch_count ||= cache.fetch(:branch_count) { branches.size }
-  end
-
-  def tag_count
-    @tag_count ||= cache.fetch(:tag_count) { raw_repository.rugged.tags.count }
-  end
-
-  # Return repo size in megabytes
-  # Cached in redis
-  def size
-    cache.fetch(:size) { raw_repository.size }
+    ref_exists?(keep_around_ref_name(sha))
   end
 
   def diverging_commit_counts(branch)
@@ -320,48 +254,55 @@ class Repository
     end
   end
 
-  # Keys for data that can be affected for any commit push.
-  def cache_keys
-    %i(size commit_count
-       readme version contribution_guide changelog
-       license_blob license_key gitignore koding_yml)
+  def expire_tags_cache
+    expire_method_caches(%i(tag_names tag_count))
+    @tags = nil
   end
 
-  # Keys for data on branch/tag operations.
-  def cache_keys_for_branches_and_tags
-    %i(branch_names tag_names branch_count tag_count)
+  def expire_branches_cache
+    expire_method_caches(%i(branch_names branch_count))
+    @local_branches = nil
   end
 
-  def build_cache
-    (cache_keys + cache_keys_for_branches_and_tags).each do |key|
-      unless cache.exist?(key)
-        send(key)
-      end
-    end
+  def expire_statistics_caches
+    expire_method_caches(%i(size commit_count))
   end
 
-  def expire_tags_cache
-    cache.expire(:tag_names)
-    @tags = nil
+  def expire_all_method_caches
+    expire_method_caches(CACHED_METHODS)
   end
 
-  def expire_branches_cache
-    cache.expire(:branch_names)
-    @branch_names = nil
-    @local_branches = nil
+  # Expires the caches of a specific set of methods
+  def expire_method_caches(methods)
+    methods.each do |key|
+      cache.expire(key)
+
+      ivar = cache_instance_variable_name(key)
+
+      remove_instance_variable(ivar) if instance_variable_defined?(ivar)
+    end
   end
 
-  def expire_cache(branch_name = nil, revision = nil)
-    cache_keys.each do |key|
-      cache.expire(key)
+  def expire_avatar_cache
+    expire_method_caches(%i(avatar))
+  end
+
+  # Refreshes the method caches of this repository.
+  #
+  # types - An Array of file types (e.g. `:readme`) used to refresh extra
+  #         caches.
+  def refresh_method_caches(types)
+    to_refresh = []
+
+    types.each do |type|
+      methods = METHOD_CACHES_FOR_FILE_TYPES[type.to_sym]
+
+      to_refresh.concat(Array(methods)) if methods
     end
 
-    expire_branch_cache(branch_name)
-    expire_avatar_cache(branch_name, revision)
+    expire_method_caches(to_refresh)
 
-    # This ensures this particular cache is flushed after the first commit to a
-    # new repository.
-    expire_emptiness_caches if empty?
+    to_refresh.each { |method| send(method) }
   end
 
   def expire_branch_cache(branch_name = nil)
@@ -371,77 +312,43 @@ class Repository
     if !branch_name || branch_name == root_ref
       branches.each do |branch|
         cache.expire(:"diverging_commit_counts_#{branch.name}")
+        cache.expire(:"commit_count_#{branch.name}")
       end
     # In case a commit is pushed to a non-root branch we only have to flush the
     # cache for said branch.
     else
       cache.expire(:"diverging_commit_counts_#{branch_name}")
+      cache.expire(:"commit_count_#{branch_name}")
     end
   end
 
   def expire_root_ref_cache
-    cache.expire(:root_ref)
-    @root_ref = nil
+    expire_method_caches(%i(root_ref))
   end
 
   # Expires the cache(s) used to determine if a repository is empty or not.
   def expire_emptiness_caches
-    cache.expire(:empty?)
-    @empty = nil
-
-    expire_has_visible_content_cache
-  end
-
-  def expire_has_visible_content_cache
-    cache.expire(:has_visible_content?)
-    @has_visible_content = nil
-  end
-
-  def expire_branch_count_cache
-    cache.expire(:branch_count)
-    @branch_count = nil
-  end
+    return unless empty?
 
-  def expire_tag_count_cache
-    cache.expire(:tag_count)
-    @tag_count = nil
+    expire_method_caches(%i(empty?))
   end
 
   def lookup_cache
     @lookup_cache ||= {}
   end
 
-  def expire_avatar_cache(branch_name = nil, revision = nil)
-    # Avatars are pulled from the default branch, thus if somebody pushes to a
-    # different branch there's no need to expire anything.
-    return if branch_name && branch_name != root_ref
-
-    # We don't want to flush the cache if the commit didn't actually make any
-    # changes to any of the possible avatar files.
-    if revision && commit = self.commit(revision)
-      return unless commit.raw_diffs(deltas_only: true).
-        any? { |diff| AVATAR_FILES.include?(diff.new_path) }
-    end
-
-    cache.expire(:avatar)
-
-    @avatar = nil
-  end
-
   def expire_exists_cache
-    cache.expire(:exists?)
-    @exists = nil
+    expire_method_caches(%i(exists?))
   end
 
   # expire cache that doesn't depend on repository data (when expiring)
   def expire_content_cache
     expire_tags_cache
-    expire_tag_count_cache
     expire_branches_cache
-    expire_branch_count_cache
     expire_root_ref_cache
     expire_emptiness_caches
     expire_exists_cache
+    expire_statistics_caches
   end
 
   # Runs code after a repository has been created.
@@ -456,9 +363,8 @@ class Repository
   # Runs code just before a repository is deleted.
   def before_delete
     expire_exists_cache
-
-    expire_cache if exists?
-
+    expire_all_method_caches
+    expire_branch_cache if exists?
     expire_content_cache
 
     repository_event(:remove_repository)
@@ -475,9 +381,9 @@ class Repository
 
   # Runs code before pushing (= creating or removing) a tag.
   def before_push_tag
-    expire_cache
+    expire_statistics_caches
+    expire_emptiness_caches
     expire_tags_cache
-    expire_tag_count_cache
 
     repository_event(:push_tag)
   end
@@ -485,24 +391,36 @@ class Repository
   # Runs code before removing a tag.
   def before_remove_tag
     expire_tags_cache
-    expire_tag_count_cache
+    expire_statistics_caches
 
     repository_event(:remove_tag)
   end
 
+  # Runs code after removing a tag.
+  def after_remove_tag
+    expire_tags_cache
+  end
+
   def before_import
     expire_content_cache
   end
 
+  # Runs code after the HEAD of a repository is changed.
+  def after_change_head
+    expire_method_caches(METHOD_CACHES_FOR_FILE_TYPES.keys)
+  end
+
   # Runs code after a repository has been forked/imported.
   def after_import
     expire_content_cache
-    build_cache
+    expire_tags_cache
+    expire_branches_cache
   end
 
   # Runs code after a new commit has been pushed.
-  def after_push_commit(branch_name, revision)
-    expire_cache(branch_name, revision)
+  def after_push_commit(branch_name)
+    expire_statistics_caches
+    expire_branch_cache(branch_name)
 
     repository_event(:push_commit, branch: branch_name)
   end
@@ -510,8 +428,6 @@ class Repository
   # Runs code after a new branch has been created.
   def after_create_branch
     expire_branches_cache
-    expire_has_visible_content_cache
-    expire_branch_count_cache
 
     repository_event(:push_branch)
   end
@@ -525,8 +441,6 @@ class Repository
 
   # Runs code after an existing branch has been removed.
   def after_remove_branch
-    expire_has_visible_content_cache
-    expire_branch_count_cache
     expire_branches_cache
   end
 
@@ -547,92 +461,141 @@ class Repository
     unless Gitlab::Git.blank_ref?(sha)
       Blob.decorate(Gitlab::Git::Blob.find(self, sha, path))
     end
+  rescue Gitlab::Git::Repository::NoRepository
+    nil
   end
 
   def blob_by_oid(oid)
     Gitlab::Git::Blob.raw(self, oid)
   end
 
+  def root_ref
+    if raw_repository
+      raw_repository.root_ref
+    else
+      # When the repo does not exist we raise this error so no data is cached.
+      raise Rugged::ReferenceError
+    end
+  end
+  cache_method :root_ref
+
+  def exists?
+    refs_directory_exists?
+  end
+  cache_method :exists?
+
+  delegate :empty?, to: :raw_repository
+  cache_method :empty?
+
+  # The size of this repository in megabytes.
+  def size
+    exists? ? raw_repository.size : 0.0
+  end
+  cache_method :size, fallback: 0.0
+
+  def commit_count
+    root_ref ? raw_repository.commit_count(root_ref) : 0
+  end
+  cache_method :commit_count, fallback: 0
+
+  def commit_count_for_ref(ref)
+    return 0 unless exists?
+
+    begin
+      cache.fetch(:"commit_count_#{ref}") { raw_repository.commit_count(ref) }
+    rescue Rugged::ReferenceError
+      0
+    end
+  end
+
+  def branch_names
+    branches.map(&:name)
+  end
+  cache_method :branch_names, fallback: []
+
+  delegate :tag_names, to: :raw_repository
+  cache_method :tag_names, fallback: []
+
+  def branch_count
+    branches.size
+  end
+  cache_method :branch_count, fallback: 0
+
+  def tag_count
+    raw_repository.rugged.tags.count
+  end
+  cache_method :tag_count, fallback: 0
+
+  def avatar
+    if tree = file_on_head(:avatar)
+      tree.path
+    end
+  end
+  cache_method :avatar
+
   def readme
-    cache.fetch(:readme) { tree(:head).readme }
+    if head = tree(:head)
+      head.readme
+    end
   end
+  cache_method :readme
 
   def version
-    cache.fetch(:version) do
-      tree(:head).blobs.find do |file|
-        file.name.casecmp('version').zero?
-      end
-    end
+    file_on_head(:version)
   end
+  cache_method :version
 
   def contribution_guide
-    cache.fetch(:contribution_guide) do
-      tree(:head).blobs.find do |file|
-        file.contributing?
-      end
-    end
+    file_on_head(:contributing)
   end
+  cache_method :contribution_guide
 
   def changelog
-    cache.fetch(:changelog) do
-      file_on_head(/\A(changelog|history|changes|news)/i)
-    end
+    file_on_head(:changelog)
   end
+  cache_method :changelog
 
   def license_blob
-    return nil unless head_exists?
-
-    cache.fetch(:license_blob) do
-      file_on_head(/\A(licen[sc]e|copying)(\..+|\z)/i)
-    end
+    file_on_head(:license)
   end
+  cache_method :license_blob
 
   def license_key
-    return nil unless head_exists?
+    return unless exists?
 
-    cache.fetch(:license_key) do
-      Licensee.license(path).try(:key)
-    end
+    Licensee.license(path).try(:key)
   end
+  cache_method :license_key
 
   def gitignore
-    return nil if !exists? || empty?
-
-    cache.fetch(:gitignore) do
-      file_on_head(/\A\.gitignore\z/)
-    end
+    file_on_head(:gitignore)
   end
+  cache_method :gitignore
 
   def koding_yml
-    return nil unless head_exists?
-
-    cache.fetch(:koding_yml) do
-      file_on_head(/\A\.koding\.yml\z/)
-    end
+    file_on_head(:koding)
   end
+  cache_method :koding_yml
 
   def gitlab_ci_yml
-    return nil unless head_exists?
-
-    @gitlab_ci_yml ||= tree(:head).blobs.find do |file|
-      file.name == '.gitlab-ci.yml'
-    end
-  rescue Rugged::ReferenceError
-    # For unknow reason spinach scenario "Scenario: I change project path"
-    # lead to "Reference 'HEAD' not found" exception from Repository#empty?
-    nil
+    file_on_head(:gitlab_ci)
   end
+  cache_method :gitlab_ci_yml
 
   def head_commit
     @head_commit ||= commit(self.root_ref)
   end
 
   def head_tree
-    @head_tree ||= Tree.new(self, head_commit.sha, nil)
+    if head_commit
+      @head_tree ||= Tree.new(self, head_commit.sha, nil)
+    end
   end
 
-  def tree(sha = :head, path = nil)
+  def tree(sha = :head, path = nil, recursive: false)
     if sha == :head
+      return unless head_commit
+
       if path.nil?
         return head_tree
       else
@@ -640,7 +603,7 @@ class Repository
       end
     end
 
-    Tree.new(self, sha, path)
+    Tree.new(self, sha, path, recursive: recursive)
   end
 
   def blob_at_branch(branch_name, path)
@@ -670,11 +633,19 @@ class Repository
   end
 
   def last_commit_for_path(sha, path)
-    args = %W(#{Gitlab.config.git.bin_path} rev-list --max-count=1 #{sha} -- #{path})
-    sha = Gitlab::Popen.popen(args, path_to_repo).first.strip
+    sha = last_commit_id_for_path(sha, path)
     commit(sha)
   end
 
+  def last_commit_id_for_path(sha, path)
+    key = path.blank? ? "last_commit_id_for_path:#{sha}" : "last_commit_id_for_path:#{sha}:#{Digest::SHA1.hexdigest(path)}"
+
+    cache.fetch(key) do
+      args = %W(#{Gitlab.config.git.bin_path} rev-list --max-count=1 #{sha} -- #{path})
+      Gitlab::Popen.popen(args, path_to_repo).first.strip
+    end
+  end
+
   def next_branch(name, opts = {})
     branch_ids = self.branch_names.map do |n|
       next 1 if n == name
@@ -782,129 +753,63 @@ class Repository
     @tags ||= raw_repository.tags
   end
 
-  def root_ref
-    @root_ref ||= cache.fetch(:root_ref) { raw_repository.root_ref }
-  end
+  def create_dir(user, path, **options)
+    options[:user] = user
+    options[:actions] = [{ action: :create_dir, file_path: path }]
 
-  def commit_dir(user, path, message, branch, author_email: nil, author_name: nil)
-    update_branch_with_hooks(user, branch) do |ref|
-      options = {
-        commit: {
-          branch: ref,
-          message: message,
-          update_ref: false
-        }
-      }
+    multi_action(**options)
+  end
 
-      options.merge!(get_committer_and_author(user, email: author_email, name: author_name))
+  def create_file(user, path, content, **options)
+    options[:user] = user
+    options[:actions] = [{ action: :create, file_path: path, content: content }]
 
-      raw_repository.mkdir(path, options)
-    end
+    multi_action(**options)
   end
 
-  def commit_file(user, path, content, message, branch, update, author_email: nil, author_name: nil)
-    update_branch_with_hooks(user, branch) do |ref|
-      options = {
-        commit: {
-          branch: ref,
-          message: message,
-          update_ref: false
-        },
-        file: {
-          content: content,
-          path: path,
-          update: update
-        }
-      }
+  def update_file(user, path, content, **options)
+    previous_path = options.delete(:previous_path)
+    action = previous_path && previous_path != path ? :move : :update
 
-      options.merge!(get_committer_and_author(user, email: author_email, name: author_name))
+    options[:user] = user
+    options[:actions] = [{ action: action, file_path: path, previous_path: previous_path, content: content }]
 
-      Gitlab::Git::Blob.commit(raw_repository, options)
-    end
+    multi_action(**options)
   end
 
-  def update_file(user, path, content, branch:, previous_path:, message:, author_email: nil, author_name: nil)
-    update_branch_with_hooks(user, branch) do |ref|
-      options = {
-        commit: {
-          branch: ref,
-          message: message,
-          update_ref: false
-        },
-        file: {
-          content: content,
-          path: path,
-          update: true
-        }
-      }
-
-      options.merge!(get_committer_and_author(user, email: author_email, name: author_name))
+  def delete_file(user, path, **options)
+    options[:user] = user
+    options[:actions] = [{ action: :delete, file_path: path }]
 
-      if previous_path && previous_path != path
-        options[:file][:previous_path] = previous_path
-        Gitlab::Git::Blob.rename(raw_repository, options)
-      else
-        Gitlab::Git::Blob.commit(raw_repository, options)
-      end
-    end
+    multi_action(**options)
   end
 
-  def remove_file(user, path, message, branch, author_email: nil, author_name: nil)
-    update_branch_with_hooks(user, branch) do |ref|
-      options = {
-        commit: {
-          branch: ref,
-          message: message,
-          update_ref: false
-        },
-        file: {
-          path: path
-        }
-      }
-
-      options.merge!(get_committer_and_author(user, email: author_email, name: author_name))
+  # rubocop:disable Metrics/ParameterLists
+  def multi_action(
+    user:, branch_name:, message:, actions:,
+    author_email: nil, author_name: nil,
+    start_branch_name: nil, start_project: project)
 
-      Gitlab::Git::Blob.remove(raw_repository, options)
-    end
-  end
+    GitOperationService.new(user, self).with_branch(
+      branch_name,
+      start_branch_name: start_branch_name,
+      start_project: start_project) do |start_commit|
 
-  def multi_action(user:, branch:, message:, actions:, author_email: nil, author_name: nil)
-    update_branch_with_hooks(user, branch) do |ref|
-      index = rugged.index
-      parents = []
-      branch = find_branch(ref)
+      index = Gitlab::Git::Index.new(raw_repository)
 
-      if branch
-        last_commit = branch.dereferenced_target
-        index.read_tree(last_commit.raw_commit.tree)
-        parents = [last_commit.sha]
+      if start_commit
+        index.read_tree(start_commit.raw_commit.tree)
+        parents = [start_commit.sha]
+      else
+        parents = []
       end
 
-      actions.each do |action|
-        case action[:action]
-        when :create, :update, :move
-          mode =
-            case action[:action]
-            when :update
-              index.get(action[:file_path])[:mode]
-            when :move
-              index.get(action[:previous_path])[:mode]
-            end
-          mode ||= 0o100644
-
-          index.remove(action[:previous_path]) if action[:action] == :move
-
-          content = action[:encoding] == 'base64' ? Base64.decode64(action[:content]) : action[:content]
-          oid = rugged.write(content, :blob)
-
-          index.add(path: action[:file_path], oid: oid, mode: mode)
-        when :delete
-          index.remove(action[:file_path])
-        end
+      actions.each do |options|
+        index.public_send(options.delete(:action), options)
       end
 
       options = {
-        tree: index.write_tree(rugged),
+        tree: index.write_tree,
         message: message,
         parents: parents
       }
@@ -913,10 +818,11 @@ class Repository
       Rugged::Commit.create(rugged, options)
     end
   end
+  # rubocop:enable Metrics/ParameterLists
 
   def get_committer_and_author(user, email: nil, name: nil)
     committer = user_to_committer(user)
-    author = Gitlab::Git::committer_hash(email: email, name: name) || committer
+    author = Gitlab::Git.committer_hash(email: email, name: name) || committer
 
     {
       author: author,
@@ -925,7 +831,7 @@ class Repository
   end
 
   def user_to_committer(user)
-    Gitlab::Git::committer_hash(email: user.email, name: user.name)
+    Gitlab::Git.committer_hash(email: user.email, name: user.name)
   end
 
   def can_be_merged?(source_sha, target_branch)
@@ -939,17 +845,18 @@ class Repository
     end
   end
 
-  def merge(user, merge_request, options = {})
-    our_commit = rugged.branches[merge_request.target_branch].target
-    their_commit = rugged.lookup(merge_request.diff_head_sha)
+  def merge(user, source, merge_request, options = {})
+    GitOperationService.new(user, self).with_branch(
+      merge_request.target_branch) do |start_commit|
+      our_commit = start_commit.sha
+      their_commit = source
 
-    raise "Invalid merge target" if our_commit.nil?
-    raise "Invalid merge source" if their_commit.nil?
+      raise 'Invalid merge target' unless our_commit
+      raise 'Invalid merge source' unless their_commit
 
-    merge_index = rugged.merge_commits(our_commit, their_commit)
-    return false if merge_index.conflicts?
+      merge_index = rugged.merge_commits(our_commit, their_commit)
+      break if merge_index.conflicts?
 
-    update_branch_with_hooks(user, merge_request.target_branch) do
       actual_options = options.merge(
         parents: [our_commit, their_commit],
         tree: merge_index.write_tree(rugged),
@@ -959,34 +866,50 @@ class Repository
       merge_request.update(in_progress_merge_commit_sha: commit_id)
       commit_id
     end
+  rescue Repository::CommitError # when merge_index.conflicts?
+    false
   end
 
-  def revert(user, commit, base_branch, revert_tree_id = nil)
-    source_sha = find_branch(base_branch).dereferenced_target.sha
-    revert_tree_id ||= check_revert_content(commit, base_branch)
+  def revert(
+    user, commit, branch_name,
+    start_branch_name: nil, start_project: project)
+    GitOperationService.new(user, self).with_branch(
+      branch_name,
+      start_branch_name: start_branch_name,
+      start_project: start_project) do |start_commit|
 
-    return false unless revert_tree_id
+      revert_tree_id = check_revert_content(commit, start_commit.sha)
+      unless revert_tree_id
+        raise Repository::CreateTreeError.new('Failed to revert commit')
+      end
 
-    update_branch_with_hooks(user, base_branch) do
       committer = user_to_committer(user)
-      source_sha = Rugged::Commit.create(rugged,
-        message: commit.revert_message,
+
+      Rugged::Commit.create(rugged,
+        message: commit.revert_message(user),
         author: committer,
         committer: committer,
         tree: revert_tree_id,
-        parents: [rugged.lookup(source_sha)])
+        parents: [start_commit.sha])
     end
   end
 
-  def cherry_pick(user, commit, base_branch, cherry_pick_tree_id = nil)
-    source_sha = find_branch(base_branch).dereferenced_target.sha
-    cherry_pick_tree_id ||= check_cherry_pick_content(commit, base_branch)
+  def cherry_pick(
+    user, commit, branch_name,
+    start_branch_name: nil, start_project: project)
+    GitOperationService.new(user, self).with_branch(
+      branch_name,
+      start_branch_name: start_branch_name,
+      start_project: start_project) do |start_commit|
 
-    return false unless cherry_pick_tree_id
+      cherry_pick_tree_id = check_cherry_pick_content(commit, start_commit.sha)
+      unless cherry_pick_tree_id
+        raise Repository::CreateTreeError.new('Failed to cherry-pick commit')
+      end
 
-    update_branch_with_hooks(user, base_branch) do
       committer = user_to_committer(user)
-      source_sha = Rugged::Commit.create(rugged,
+
+      Rugged::Commit.create(rugged,
         message: commit.message,
         author: {
           email: commit.author_email,
@@ -995,22 +918,21 @@ class Repository
         },
         committer: committer,
         tree: cherry_pick_tree_id,
-        parents: [rugged.lookup(source_sha)])
+        parents: [start_commit.sha])
     end
   end
 
-  def resolve_conflicts(user, branch, params)
-    update_branch_with_hooks(user, branch) do
+  def resolve_conflicts(user, branch_name, params)
+    GitOperationService.new(user, self).with_branch(branch_name) do
       committer = user_to_committer(user)
 
       Rugged::Commit.create(rugged, params.merge(author: committer, committer: committer))
     end
   end
 
-  def check_revert_content(commit, base_branch)
-    source_sha = find_branch(base_branch).dereferenced_target.sha
-    args       = [commit.id, source_sha]
-    args << { mainline: 1 } if commit.merge_commit?
+  def check_revert_content(target_commit, source_sha)
+    args = [target_commit.sha, source_sha]
+    args << { mainline: 1 } if target_commit.merge_commit?
 
     revert_index = rugged.revert_commit(*args)
     return false if revert_index.conflicts?
@@ -1021,10 +943,9 @@ class Repository
     tree_id
   end
 
-  def check_cherry_pick_content(commit, base_branch)
-    source_sha = find_branch(base_branch).dereferenced_target.sha
-    args       = [commit.id, source_sha]
-    args << 1 if commit.merge_commit?
+  def check_cherry_pick_content(target_commit, source_sha)
+    args = [target_commit.sha, source_sha]
+    args << 1 if target_commit.merge_commit?
 
     cherry_pick_index = rugged.cherrypick_commit(*args)
     return false if cherry_pick_index.conflicts?
@@ -1060,55 +981,65 @@ class Repository
   end
 
   def is_ancestor?(ancestor_id, descendant_id)
-    merge_base(ancestor_id, descendant_id) == ancestor_id
+    Gitlab::GitalyClient.migrate(:is_ancestor) do |is_enabled|
+      if is_enabled
+        raw_repository.is_ancestor?(ancestor_id, descendant_id)
+      else
+        merge_base_commit(ancestor_id, descendant_id) == ancestor_id
+      end
+    end
+  end
+
+  def empty_repo?
+    !exists? || !has_visible_content?
   end
 
-  def search_files(query, ref)
+  def search_files_by_content(query, ref)
+    return [] if empty_repo? || query.blank?
+
     offset = 2
     args = %W(#{Gitlab.config.git.bin_path} grep -i -I -n --before-context #{offset} --after-context #{offset} -E -e #{Regexp.escape(query)} #{ref || root_ref})
     Gitlab::Popen.popen(args, path_to_repo).first.scrub.split(/^--$/)
   end
 
-  def fetch_ref(source_path, source_ref, target_ref)
-    args = %W(#{Gitlab.config.git.bin_path} fetch --no-tags -f #{source_path} #{source_ref}:#{target_ref})
-    Gitlab::Popen.popen(args, path_to_repo)
-  end
+  def search_files_by_name(query, ref)
+    return [] if empty_repo? || query.blank?
 
-  def create_ref(ref, ref_path)
-    fetch_ref(path_to_repo, ref, ref_path)
+    args = %W(#{Gitlab.config.git.bin_path} ls-tree --full-tree -r #{ref || root_ref} --name-status | #{Regexp.escape(query)})
+    Gitlab::Popen.popen(args, path_to_repo).first.lines.map(&:strip)
   end
 
-  def update_branch_with_hooks(current_user, branch)
-    update_autocrlf_option
+  def with_repo_branch_commit(start_repository, start_branch_name)
+    return yield(nil) if start_repository.empty_repo?
 
-    ref = Gitlab::Git::BRANCH_REF_PREFIX + branch
-    target_branch = find_branch(branch)
-    was_empty = empty?
+    branch_name_or_sha =
+      if start_repository == self
+        start_branch_name
+      else
+        tmp_ref = "refs/tmp/#{SecureRandom.hex}/head"
 
-    # Make commit
-    newrev = yield(ref)
+        fetch_ref(
+          start_repository.path_to_repo,
+          "#{Gitlab::Git::BRANCH_REF_PREFIX}#{start_branch_name}",
+          tmp_ref
+        )
 
-    unless newrev
-      raise CommitError.new('Failed to create commit')
-    end
+        start_repository.commit(start_branch_name).sha
+      end
 
-    if rugged.lookup(newrev).parent_ids.empty? || target_branch.nil?
-      oldrev = Gitlab::Git::BLANK_SHA
-    else
-      oldrev = rugged.merge_base(newrev, target_branch.dereferenced_target.sha)
-    end
+    yield(commit(branch_name_or_sha))
 
-    GitHooksService.new.execute(current_user, path_to_repo, oldrev, newrev, ref) do
-      update_ref!(ref, newrev, oldrev)
+  ensure
+    rugged.references.delete(tmp_ref) if tmp_ref
+  end
 
-      if was_empty || !target_branch
-        # If repo was empty expire cache
-        after_create if was_empty
-        after_create_branch
-      end
-    end
+  def fetch_ref(source_path, source_ref, target_ref)
+    args = %W(#{Gitlab.config.git.bin_path} fetch --no-tags -f #{source_path} #{source_ref}:#{target_ref})
+    Gitlab::Popen.popen(args, path_to_repo)
+  end
 
-    newrev
+  def create_ref(ref, ref_path)
+    fetch_ref(path_to_repo, ref, ref_path)
   end
 
   def ls_files(ref)
@@ -1130,32 +1061,86 @@ class Repository
     end
   end
 
-  def avatar
-    return nil unless exists?
+  # Caches the supplied block both in a cache and in an instance variable.
+  #
+  # The cache key and instance variable are named the same way as the value of
+  # the `key` argument.
+  #
+  # This method will return `nil` if the corresponding instance variable is also
+  # set to `nil`. This ensures we don't keep yielding the block when it returns
+  # `nil`.
+  #
+  # key - The name of the key to cache the data in.
+  # fallback - A value to fall back to in the event of a Git error.
+  def cache_method_output(key, fallback: nil, &block)
+    ivar = cache_instance_variable_name(key)
+
+    if instance_variable_defined?(ivar)
+      instance_variable_get(ivar)
+    else
+      begin
+        instance_variable_set(ivar, cache.fetch(key, &block))
+      rescue Rugged::ReferenceError, Gitlab::Git::Repository::NoRepository
+        # if e.g. HEAD or the entire repository doesn't exist we want to
+        # gracefully handle this and not cache anything.
+        fallback
+      end
+    end
+  end
+
+  def cache_instance_variable_name(key)
+    :"@#{key.to_s.tr('?!', '')}"
+  end
 
-    @avatar ||= cache.fetch(:avatar) do
-      AVATAR_FILES.find do |file|
-        blob_at_branch(root_ref, file)
+  def file_on_head(type)
+    if head = tree(:head)
+      head.blobs.find do |file|
+        Gitlab::FileDetector.type_of(file.name) == type
       end
     end
   end
 
+  def route_map_for(sha)
+    blob_data_at(sha, '.gitlab/route-map.yml')
+  end
+
+  def gitlab_ci_yml_for(sha)
+    blob_data_at(sha, '.gitlab-ci.yml')
+  end
+
   private
 
-  def cache
-    @cache ||= RepositoryCache.new(path_with_namespace, @project.id)
+  def blob_data_at(sha, path)
+    blob = blob_at(sha, path)
+    return unless blob
+
+    blob.load_all_data!(self)
+    blob.data
   end
 
-  def head_exists?
-    exists? && !empty? && !rugged.head_unborn?
+  def refs_directory_exists?
+    return false unless path_with_namespace
+
+    File.exist?(File.join(path_to_repo, 'refs'))
   end
 
-  def file_on_head(regex)
-    tree(:head).blobs.find { |file| file.name =~ regex }
+  def cache
+    @cache ||= RepositoryCache.new(path_with_namespace, @project.id)
   end
 
   def tags_sorted_by_committed_date
-    tags.sort_by { |tag| tag.dereferenced_target.committed_date }
+    tags.sort_by do |tag|
+      # Annotated tags can point to any object (e.g. a blob), but generally
+      # tags point to a commit. If we don't have a commit, then just default
+      # to putting the tag at the end of the list.
+      target = tag.dereferenced_target
+
+      if target
+        target.committed_date
+      else
+        Time.now
+      end
+    end
   end
 
   def keep_around_ref_name(sha)
diff --git a/app/models/route.rb b/app/models/route.rb
new file mode 100644
index 00000000000..4b3efab5c3c
--- /dev/null
+++ b/app/models/route.rb
@@ -0,0 +1,36 @@
+class Route < ActiveRecord::Base
+  belongs_to :source, polymorphic: true
+
+  validates :source, presence: true
+
+  validates :path,
+    length: { within: 1..255 },
+    presence: true,
+    uniqueness: { case_sensitive: false }
+
+  after_update :rename_descendants
+
+  scope :inside_path, -> (path) { where('routes.path LIKE ?', "#{sanitize_sql_like(path)}/%") }
+
+  def rename_descendants
+    if path_changed? || name_changed?
+      descendants = self.class.inside_path(path_was)
+
+      descendants.each do |route|
+        attributes = {}
+
+        if path_changed? && route.path.present?
+          attributes[:path] = route.path.sub(path_was, path)
+        end
+
+        if name_changed? && name_was.present? && route.name.present?
+          attributes[:name] = route.name.sub(name_was, name)
+        end
+
+        # Note that update_columns skips validation and callbacks.
+        # We need this to avoid recursive call of rename_descendants method
+        route.update_columns(attributes) unless attributes.empty?
+      end
+    end
+  end
+end
diff --git a/app/models/service.rb b/app/models/service.rb
index 625fbc48302..e73f7e5d1a3 100644
--- a/app/models/service.rb
+++ b/app/models/service.rb
@@ -8,6 +8,7 @@ class Service < ActiveRecord::Base
   default_value_for :push_events, true
   default_value_for :issues_events, true
   default_value_for :confidential_issues_events, true
+  default_value_for :commit_events, true
   default_value_for :merge_requests_events, true
   default_value_for :tag_push_events, true
   default_value_for :note_events, true
@@ -26,7 +27,7 @@ class Service < ActiveRecord::Base
 
   validates :project_id, presence: true, unless: Proc.new { |service| service.template? }
 
-  scope :visible, -> { where.not(type: ['GitlabIssueTrackerService', 'GitlabCiService']) }
+  scope :visible, -> { where.not(type: 'GitlabIssueTrackerService') }
   scope :issue_trackers, -> { where(category: 'issue_tracker') }
   scope :external_wikis, -> { where(type: 'ExternalWikiService').active }
   scope :active, -> { where(active: true) }
@@ -75,6 +76,11 @@ class Service < ActiveRecord::Base
 
   def to_param
     # implement inside child
+    self.class.to_param
+  end
+
+  def self.to_param
+    raise NotImplementedError
   end
 
   def fields
@@ -91,7 +97,11 @@ class Service < ActiveRecord::Base
   end
 
   def event_names
-    supported_events.map { |event| "#{event}_events" }
+    self.class.event_names
+  end
+
+  def self.event_names
+    self.supported_events.map { |event| "#{event}_events" }
   end
 
   def event_field(event)
@@ -103,6 +113,10 @@ class Service < ActiveRecord::Base
   end
 
   def supported_events
+    self.class.supported_events
+  end
+
+  def self.supported_events
     %w(push tag_push issue confidential_issue merge_request wiki_page)
   end
 
@@ -196,13 +210,11 @@ class Service < ActiveRecord::Base
   end
 
   def self.available_services_names
-    %w[
+    service_names = %w[
       asana
       assembla
       bamboo
       buildkite
-      builds_email
-      pipelines_email
       bugzilla
       campfire
       custom_issue_tracker
@@ -214,19 +226,28 @@ class Service < ActiveRecord::Base
       hipchat
       irker
       jira
+      kubernetes
+      mattermost_slash_commands
+      mattermost
+      pipelines_email
       pivotaltracker
+      prometheus
       pushover
       redmine
+      slack_slash_commands
       slack
       teamcity
     ]
+    service_names << 'mock_ci' if Rails.env.development?
+
+    service_names.sort_by(&:downcase)
   end
 
-  def self.create_from_template(project_id, template)
+  def self.build_from_template(project_id, template)
     service = template.dup
     service.template = false
     service.project_id = project_id
-    service if service.save
+    service
   end
 
   private
diff --git a/app/models/snippet.rb b/app/models/snippet.rb
index 2373b445009..30aca62499c 100644
--- a/app/models/snippet.rb
+++ b/app/models/snippet.rb
@@ -6,6 +6,8 @@ class Snippet < ActiveRecord::Base
   include Referable
   include Sortable
   include Awardable
+  include Mentionable
+  include Spammable
 
   cache_markdown_field :title, pipeline: :single_line
   cache_markdown_field :content
@@ -16,7 +18,7 @@ class Snippet < ActiveRecord::Base
     default_content_html_invalidator || file_name_changed?
   end
 
-  default_value_for :visibility_level, Snippet::PRIVATE
+  default_value_for(:visibility_level) { current_application_settings.default_snippet_visibility }
 
   belongs_to :author, class_name: 'User'
   belongs_to :project
@@ -26,9 +28,9 @@ class Snippet < ActiveRecord::Base
   delegate :name, :email, to: :author, prefix: true, allow_nil: true
 
   validates :author, presence: true
-  validates :title, presence: true, length: { within: 0..255 }
+  validates :title, presence: true, length: { maximum: 255 }
   validates :file_name,
-    length: { within: 0..255 },
+    length: { maximum: 255 },
     format: { with: Gitlab::Regex.file_name_regex,
               message: Gitlab::Regex.file_name_regex_message }
 
@@ -45,6 +47,9 @@ class Snippet < ActiveRecord::Base
   participant :author
   participant :notes_with_associations
 
+  attr_spammable :title, spam_title: true
+  attr_spammable :content, spam_description: true
+
   def self.reference_prefix
     '$'
   end
@@ -63,14 +68,14 @@ class Snippet < ActiveRecord::Base
     @link_reference_pattern ||= super("snippets", /(?<snippet>\d+)/)
   end
 
-  def to_reference(from_project = nil)
+  def to_reference(from_project = nil, full: false)
     reference = "#{self.class.reference_prefix}#{id}"
 
-    if cross_project_reference?(from_project)
-      reference = project.to_reference + reference
+    if project.present?
+      "#{project.to_reference(from_project, full: full)}#{reference}"
+    else
+      reference
     end
-
-    reference
   end
 
   def self.content_types
@@ -93,6 +98,10 @@ class Snippet < ActiveRecord::Base
     0
   end
 
+  def file_name
+    super.to_s
+  end
+
   # alias for compatibility with blobs and highlighting
   def path
     file_name
@@ -111,7 +120,7 @@ class Snippet < ActiveRecord::Base
   end
 
   def visibility_level_field
-    visibility_level
+    :visibility_level
   end
 
   def no_highlighting?
@@ -122,6 +131,15 @@ class Snippet < ActiveRecord::Base
     notes.includes(:author)
   end
 
+  def check_for_spam?
+    visibility_level_changed?(to: Snippet::PUBLIC) ||
+      (public? && (title_changed? || content_changed?))
+  end
+
+  def spammable_entity_type
+    'snippet'
+  end
+
   class << self
     # Searches for snippets with a matching title or file name.
     #
diff --git a/app/models/subscription.rb b/app/models/subscription.rb
index 3b8aa1eb866..17869c8bac2 100644
--- a/app/models/subscription.rb
+++ b/app/models/subscription.rb
@@ -1,8 +1,9 @@
 class Subscription < ActiveRecord::Base
   belongs_to :user
+  belongs_to :project
   belongs_to :subscribable, polymorphic: true
 
-  validates :user_id,
-            uniqueness: { scope: [:subscribable_id, :subscribable_type] },
-            presence: true
+  validates :user, :subscribable, presence: true
+
+  validates :project_id, uniqueness: { scope: [:subscribable_id, :subscribable_type, :user_id] }
 end
diff --git a/app/models/system_note_metadata.rb b/app/models/system_note_metadata.rb
new file mode 100644
index 00000000000..5cc66574941
--- /dev/null
+++ b/app/models/system_note_metadata.rb
@@ -0,0 +1,11 @@
+class SystemNoteMetadata < ActiveRecord::Base
+  ICON_TYPES = %w[
+    commit merge confidentiality status label assignee cross_reference
+    title time_tracking branch milestone discussion task moved
+  ].freeze
+
+  validates :note, presence: true
+  validates :action, inclusion: ICON_TYPES, allow_nil: true
+
+  belongs_to :note
+end
diff --git a/app/models/timelog.rb b/app/models/timelog.rb
new file mode 100644
index 00000000000..e166cf69703
--- /dev/null
+++ b/app/models/timelog.rb
@@ -0,0 +1,22 @@
+class Timelog < ActiveRecord::Base
+  validates :time_spent, :user, presence: true
+  validate :issuable_id_is_present
+
+  belongs_to :issue
+  belongs_to :merge_request
+  belongs_to :user
+
+  def issuable
+    issue || merge_request
+  end
+
+  private
+
+  def issuable_id_is_present
+    if issue_id && merge_request_id
+      errors.add(:base, 'Only Issue ID or Merge Request ID is required')
+    elsif issuable.nil?
+      errors.add(:base, 'Issue or Merge Request ID is required')
+    end
+  end
+end
diff --git a/app/models/todo.rb b/app/models/todo.rb
index f5ade1cc293..da3fa7277c2 100644
--- a/app/models/todo.rb
+++ b/app/models/todo.rb
@@ -1,19 +1,23 @@
 class Todo < ActiveRecord::Base
   include Sortable
 
-  ASSIGNED          = 1
-  MENTIONED         = 2
-  BUILD_FAILED      = 3
-  MARKED            = 4
-  APPROVAL_REQUIRED = 5 # This is an EE-only feature
+  ASSIGNED           = 1
+  MENTIONED          = 2
+  BUILD_FAILED       = 3
+  MARKED             = 4
+  APPROVAL_REQUIRED  = 5 # This is an EE-only feature
+  UNMERGEABLE        = 6
+  DIRECTLY_ADDRESSED = 7
 
   ACTION_NAMES = {
     ASSIGNED => :assigned,
     MENTIONED => :mentioned,
     BUILD_FAILED => :build_failed,
     MARKED => :marked,
-    APPROVAL_REQUIRED => :approval_required
-  }
+    APPROVAL_REQUIRED => :approval_required,
+    UNMERGEABLE => :unmergeable,
+    DIRECTLY_ADDRESSED => :directly_addressed
+  }.freeze
 
   belongs_to :author, class_name: "User"
   belongs_to :note
@@ -44,8 +48,14 @@ class Todo < ActiveRecord::Base
   after_save :keep_around_commit
 
   class << self
+    # Priority sorting isn't displayed in the dropdown, because we don't show
+    # milestones, but still show something if the user has a URL with that
+    # selected.
     def sort(method)
-      method == "priority" ? order_by_labels_priority : order_by(method)
+      case method.to_s
+      when 'priority', 'label_priority' then order_by_labels_priority
+      else order_by(method)
+      end
     end
 
     # Order by priority depending on which issue/merge request the Todo belongs to
@@ -66,6 +76,10 @@ class Todo < ActiveRecord::Base
     end
   end
 
+  def unmergeable?
+    action == UNMERGEABLE
+  end
+
   def build_failed?
     action == BUILD_FAILED
   end
@@ -97,9 +111,9 @@ class Todo < ActiveRecord::Base
 
   def target_reference
     if for_commit?
-      target.short_id
+      target.reference_link_text(full: true)
     else
-      target.to_reference
+      target.to_reference(full: true)
     end
   end
 
diff --git a/app/models/tree.rb b/app/models/tree.rb
index 7c4ed6e393b..fe148b0ec65 100644
--- a/app/models/tree.rb
+++ b/app/models/tree.rb
@@ -3,21 +3,24 @@ class Tree
 
   attr_accessor :repository, :sha, :path, :entries
 
-  def initialize(repository, sha, path = '/')
+  def initialize(repository, sha, path = '/', recursive: false)
     path = '/' if path.blank?
 
     @repository = repository
     @sha = sha
     @path = path
+    @recursive = recursive
 
     git_repo = @repository.raw_repository
-    @entries = Gitlab::Git::Tree.where(git_repo, @sha, @path)
+    @entries = get_entries(git_repo, @sha, @path, recursive: @recursive)
   end
 
   def readme
     return @readme if defined?(@readme)
 
-    available_readmes = blobs.select(&:readme?)
+    available_readmes = blobs.select do |blob|
+      Gitlab::FileDetector.type_of(blob.name) == :readme
+    end
 
     previewable_readmes = available_readmes.select do |blob|
       previewable?(blob.name)
@@ -58,4 +61,21 @@ class Tree
   def sorted_entries
     trees + blobs + submodules
   end
+
+  private
+
+  def get_entries(git_repo, sha, path, recursive: false)
+    current_path_entries = Gitlab::Git::Tree.where(git_repo, sha, path)
+    ordered_entries = []
+
+    current_path_entries.each do |entry|
+      ordered_entries << entry
+
+      if recursive && entry.dir?
+        ordered_entries.concat(get_entries(git_repo, sha, entry.path, recursive: true))
+      end
+    end
+
+    ordered_entries
+  end
 end
diff --git a/app/models/upload.rb b/app/models/upload.rb
new file mode 100644
index 00000000000..13987931b05
--- /dev/null
+++ b/app/models/upload.rb
@@ -0,0 +1,63 @@
+class Upload < ActiveRecord::Base
+  # Upper limit for foreground checksum processing
+  CHECKSUM_THRESHOLD = 100.megabytes
+
+  belongs_to :model, polymorphic: true
+
+  validates :size, presence: true
+  validates :path, presence: true
+  validates :model, presence: true
+  validates :uploader, presence: true
+
+  before_save  :calculate_checksum, if:     :foreground_checksum?
+  after_commit :schedule_checksum,  unless: :foreground_checksum?
+
+  def self.remove_path(path)
+    where(path: path).destroy_all
+  end
+
+  def self.record(uploader)
+    remove_path(uploader.relative_path)
+
+    create(
+      size: uploader.file.size,
+      path: uploader.relative_path,
+      model: uploader.model,
+      uploader: uploader.class.to_s
+    )
+  end
+
+  def absolute_path
+    return path unless relative_path?
+
+    uploader_class.absolute_path(self)
+  end
+
+  def calculate_checksum
+    return unless exist?
+
+    self.checksum = Digest::SHA256.file(absolute_path).hexdigest
+  end
+
+  def exist?
+    File.exist?(absolute_path)
+  end
+
+  private
+
+  def foreground_checksum?
+    size <= CHECKSUM_THRESHOLD
+  end
+
+  def schedule_checksum
+    UploadChecksumWorker.perform_async(id)
+  end
+
+  def relative_path?
+    !path.start_with?('/')
+  end
+
+  def uploader_class
+    Object.const_get(uploader)
+  end
+end
diff --git a/app/models/user.rb b/app/models/user.rb
index 65e96ee6b2e..95a766f2ede 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -13,6 +13,7 @@ class User < ActiveRecord::Base
   DEFAULT_NOTIFICATION_LEVEL = :participating
 
   add_authentication_token_field :authentication_token
+  add_authentication_token_field :incoming_email_token
 
   default_value_for :admin, false
   default_value_for(:external) { current_application_settings.user_default_external }
@@ -20,7 +21,8 @@ class User < ActiveRecord::Base
   default_value_for :can_create_team, false
   default_value_for :hide_no_ssh_key, false
   default_value_for :hide_no_password, false
-  default_value_for :theme_id, gitlab_config.default_theme
+  default_value_for :project_view, :files
+  default_value_for :notified_of_own_activity, false
 
   attr_encrypted :otp_secret,
     key:       Gitlab::Application.secrets.otp_key_base,
@@ -50,11 +52,17 @@ class User < ActiveRecord::Base
   has_one :namespace, -> { where type: nil }, dependent: :destroy, foreign_key: :owner_id
 
   # Profile
-  has_many :keys, dependent: :destroy
+  has_many :keys, -> do
+    type = Key.arel_table[:type]
+    where(type.not_eq('DeployKey').or(type.eq(nil)))
+  end, dependent: :destroy
+  has_many :deploy_keys, -> { where(type: 'DeployKey') }, dependent: :destroy
+
   has_many :emails, dependent: :destroy
   has_many :personal_access_tokens, dependent: :destroy
   has_many :identities, dependent: :destroy, autosave: true
   has_many :u2f_registrations, dependent: :destroy
+  has_many :chat_names, dependent: :destroy
 
   # Groups
   has_many :members, dependent: :destroy
@@ -71,16 +79,15 @@ class User < ActiveRecord::Base
   has_many :created_projects,         foreign_key: :creator_id, class_name: 'Project'
   has_many :users_star_projects, dependent: :destroy
   has_many :starred_projects, through: :users_star_projects, source: :project
+  has_many :project_authorizations
+  has_many :authorized_projects, through: :project_authorizations, source: :project
 
   has_many :snippets,                 dependent: :destroy, foreign_key: :author_id
-  has_many :issues,                   dependent: :destroy, foreign_key: :author_id
   has_many :notes,                    dependent: :destroy, foreign_key: :author_id
   has_many :merge_requests,           dependent: :destroy, foreign_key: :author_id
   has_many :events,                   dependent: :destroy, foreign_key: :author_id
   has_many :subscriptions,            dependent: :destroy
   has_many :recent_events, -> { order "id DESC" }, foreign_key: :author_id,   class_name: "Event"
-  has_many :assigned_issues,          dependent: :destroy, foreign_key: :assignee_id, class_name: "Issue"
-  has_many :assigned_merge_requests,  dependent: :destroy, foreign_key: :assignee_id, class_name: "MergeRequest"
   has_many :oauth_applications, class_name: 'Doorkeeper::Application', as: :owner, dependent: :destroy
   has_one  :abuse_report,             dependent: :destroy
   has_many :spam_logs,                dependent: :destroy
@@ -89,17 +96,29 @@ class User < ActiveRecord::Base
   has_many :todos,                    dependent: :destroy
   has_many :notification_settings,    dependent: :destroy
   has_many :award_emoji,              dependent: :destroy
+  has_many :triggers,                 dependent: :destroy, class_name: 'Ci::Trigger', foreign_key: :owner_id
+
+  has_many :assigned_issues,          dependent: :nullify, foreign_key: :assignee_id, class_name: "Issue"
+  has_many :assigned_merge_requests,  dependent: :nullify, foreign_key: :assignee_id, class_name: "MergeRequest"
+
+  # Issues that a user owns are expected to be moved to the "ghost" user before
+  # the user is destroyed. If the user owns any issues during deletion, this
+  # should be treated as an exceptional condition.
+  has_many :issues,                   dependent: :restrict_with_exception, foreign_key: :author_id
 
   #
   # Validations
   #
   # Note: devise :validatable above adds validations for :email and :password
   validates :name, presence: true
+  validates :email, confirmation: true
   validates :notification_email, presence: true
   validates :notification_email, email: true, if: ->(user) { user.notification_email != user.email }
   validates :public_email, presence: true, uniqueness: true, email: true, allow_blank: true
   validates :bio, length: { maximum: 255 }, allow_blank: true
-  validates :projects_limit, presence: true, numericality: { greater_than_or_equal_to: 0 }
+  validates :projects_limit,
+    presence: true,
+    numericality: { greater_than_or_equal_to: 0, less_than_or_equal_to: Gitlab::Database::MAX_INT_VALUE }
   validates :username,
     namespace: true,
     presence: true,
@@ -110,21 +129,18 @@ class User < ActiveRecord::Base
   validate :unique_email, if: ->(user) { user.email_changed? }
   validate :owns_notification_email, if: ->(user) { user.notification_email_changed? }
   validate :owns_public_email, if: ->(user) { user.public_email_changed? }
+  validate :signup_domain_valid?, on: :create, if: ->(user) { !user.created_by_id }
   validates :avatar, file_size: { maximum: 200.kilobytes.to_i }
 
-  before_validation :generate_password, on: :create
-  before_validation :signup_domain_valid?, on: :create
   before_validation :sanitize_attrs
   before_validation :set_notification_email, if: ->(user) { user.email_changed? }
   before_validation :set_public_email, if: ->(user) { user.public_email_changed? }
 
   after_update :update_emails_with_primary_email, if: ->(user) { user.email_changed? }
-  before_save :ensure_authentication_token
+  before_save :ensure_authentication_token, :ensure_incoming_email_token
   before_save :ensure_external_user_rights
   after_save :ensure_namespace_correct
   after_initialize :set_projects_limit
-  before_create :check_confirmation_email
-  after_create :post_create_hook
   after_destroy :post_destroy_hook
 
   # User's Layout preference
@@ -161,10 +177,20 @@ class User < ActiveRecord::Base
       def blocked?
         true
       end
+
+      def active_for_authentication?
+        false
+      end
+
+      def inactive_message
+        "Your account has been blocked. Please contact your GitLab " \
+          "administrator if you think this is an error."
+      end
     end
   end
 
   mount_uploader :avatar, AvatarUploader
+  has_many :uploads, as: :model, dependent: :destroy
 
   # Scopes
   scope :admins, -> { where(admin: true) }
@@ -172,8 +198,10 @@ class User < ActiveRecord::Base
   scope :external, -> { where(external: true) }
   scope :active, -> { with_state(:active) }
   scope :not_in_project, ->(project) { project.users.present? ? where("id not in (:ids)", ids: project.users.map(&:id) ) : all }
-  scope :without_projects, -> { where('id NOT IN (SELECT DISTINCT(user_id) FROM members)') }
+  scope :without_projects, -> { where('id NOT IN (SELECT DISTINCT(user_id) FROM members WHERE user_id IS NOT NULL AND requested_at IS NULL)') }
   scope :todo_authors, ->(user_id, state) { where(id: Todo.where(user_id: user_id, state: state).select(:author_id)) }
+  scope :order_recent_sign_in, -> { reorder(Gitlab::Database.nulls_last_order('last_sign_in_at', 'DESC')) }
+  scope :order_oldest_sign_in, -> { reorder(Gitlab::Database.nulls_last_order('last_sign_in_at', 'ASC')) }
 
   def self.with_two_factor
     joins("LEFT OUTER JOIN u2f_registrations AS u2f ON u2f.user_id = users.id").
@@ -201,8 +229,8 @@ class User < ActiveRecord::Base
 
     def sort(method)
       case method.to_s
-      when 'recent_sign_in' then reorder(last_sign_in_at: :desc)
-      when 'oldest_sign_in' then reorder(last_sign_in_at: :asc)
+      when 'recent_sign_in' then order_recent_sign_in
+      when 'oldest_sign_in' then order_oldest_sign_in
       else
         order_by(method)
       end
@@ -225,19 +253,19 @@ class User < ActiveRecord::Base
     def filter(filter_name)
       case filter_name
       when 'admins'
-        self.admins
+        admins
       when 'blocked'
-        self.blocked
+        blocked
       when 'two_factor_disabled'
-        self.without_two_factor
+        without_two_factor
       when 'two_factor_enabled'
-        self.with_two_factor
+        with_two_factor
       when 'wop'
-        self.without_projects
+        without_projects
       when 'external'
-        self.external
+        external
       else
-        self.active
+        active
       end
     end
 
@@ -287,17 +315,18 @@ class User < ActiveRecord::Base
       end
     end
 
+    def find_by_username(username)
+      iwhere(username: username).take
+    end
+
     def find_by_username!(username)
-      find_by!('lower(username) = ?', username.downcase)
+      iwhere(username: username).take!
     end
 
     def find_by_personal_access_token(token_string)
-      personal_access_token = PersonalAccessToken.active.find_by_token(token_string) if token_string
-      personal_access_token.user if personal_access_token
-    end
+      return unless token_string
 
-    def by_username_or_id(name_or_id)
-      find_by('users.username = ? OR users.id = ?', name_or_id.to_s, name_or_id.to_i)
+      PersonalAccessTokensFinder.new(state: 'active').find_by(token: token_string)&.user
     end
 
     # Returns a user for the given SSH key.
@@ -305,10 +334,6 @@ class User < ActiveRecord::Base
       find_by(id: Key.unscoped.select(:user_id).where(id: key_id))
     end
 
-    def build_user(attrs = {})
-      User.new(attrs)
-    end
-
     def reference_prefix
       '@'
     end
@@ -317,9 +342,34 @@ class User < ActiveRecord::Base
     def reference_pattern
       %r{
         #{Regexp.escape(reference_prefix)}
-        (?<user>#{Gitlab::Regex::NAMESPACE_REGEX_STR})
+        (?<user>#{Gitlab::Regex::FULL_NAMESPACE_REGEX_STR})
       }x
     end
+
+    # Return (create if necessary) the ghost user. The ghost user
+    # owns records previously belonging to deleted users.
+    def ghost
+      unique_internal(where(ghost: true), 'ghost', 'ghost%s@example.com') do |u|
+        u.bio = 'This is a "Ghost User", created to hold all issues authored by users that have since been deleted. This user cannot be removed.'
+        u.name = 'Ghost User'
+      end
+    end
+  end
+
+  def self.internal_attributes
+    [:ghost]
+  end
+
+  def internal?
+    self.class.internal_attributes.any? { |a| self[a] }
+  end
+
+  def self.internal
+    where(Hash[internal_attributes.zip([true] * internal_attributes.size)])
+  end
+
+  def self.non_internal
+    where(Hash[internal_attributes.zip([[false, nil]] * internal_attributes.size)])
   end
 
   #
@@ -330,14 +380,12 @@ class User < ActiveRecord::Base
     username
   end
 
-  def to_reference(_from_project = nil, _target_project = nil)
+  def to_reference(_from_project = nil, target_project: nil, full: nil)
     "#{self.class.reference_prefix}#{username}"
   end
 
-  def generate_password
-    if self.force_random_password
-      self.password = self.password_confirmation = Devise.friendly_token.first(Devise.password_length.min)
-    end
+  def skip_confirmation=(bool)
+    skip_confirmation! if bool
   end
 
   def generate_reset_token
@@ -349,10 +397,6 @@ class User < ActiveRecord::Base
     @reset_token
   end
 
-  def check_confirmation_email
-    skip_confirmation! unless current_application_settings.send_user_confirmation_email
-  end
-
   def recently_sent_password_reset?
     reset_password_sent_at.present? && reset_password_sent_at >= 1.minute.ago
   end
@@ -376,56 +420,55 @@ class User < ActiveRecord::Base
   end
 
   def two_factor_otp_enabled?
-    self.otp_required_for_login?
+    otp_required_for_login?
   end
 
   def two_factor_u2f_enabled?
-    self.u2f_registrations.exists?
+    u2f_registrations.exists?
   end
 
   def namespace_uniq
     # Return early if username already failed the first uniqueness validation
-    return if self.errors.key?(:username) &&
-      self.errors[:username].include?('has already been taken')
+    return if errors.key?(:username) &&
+        errors[:username].include?('has already been taken')
 
-    namespace_name = self.username
-    existing_namespace = Namespace.by_path(namespace_name)
-    if existing_namespace && existing_namespace != self.namespace
-      self.errors.add(:username, 'has already been taken')
+    existing_namespace = Namespace.by_path(username)
+    if existing_namespace && existing_namespace != namespace
+      errors.add(:username, 'has already been taken')
     end
   end
 
   def avatar_type
-    unless self.avatar.image?
-      self.errors.add :avatar, "only images allowed"
+    unless avatar.image?
+      errors.add :avatar, "only images allowed"
     end
   end
 
   def unique_email
-    if !self.emails.exists?(email: self.email) && Email.exists?(email: self.email)
-      self.errors.add(:email, 'has already been taken')
+    if !emails.exists?(email: email) && Email.exists?(email: email)
+      errors.add(:email, 'has already been taken')
     end
   end
 
   def owns_notification_email
-    return if self.temp_oauth_email?
+    return if temp_oauth_email?
 
-    self.errors.add(:notification_email, "is not an email you own") unless self.all_emails.include?(self.notification_email)
+    errors.add(:notification_email, "is not an email you own") unless all_emails.include?(notification_email)
   end
 
   def owns_public_email
-    return if self.public_email.blank?
+    return if public_email.blank?
 
-    self.errors.add(:public_email, "is not an email you own") unless self.all_emails.include?(self.public_email)
+    errors.add(:public_email, "is not an email you own") unless all_emails.include?(public_email)
   end
 
   def update_emails_with_primary_email
-    primary_email_record = self.emails.find_by(email: self.email)
+    primary_email_record = emails.find_by(email: email)
     if primary_email_record
       primary_email_record.destroy
-      self.emails.create(email: self.email_was)
+      emails.create(email: email_was)
 
-      self.update_secondary_emails!
+      update_secondary_emails!
     end
   end
 
@@ -437,16 +480,57 @@ class User < ActiveRecord::Base
     Group.where("namespaces.id IN (#{union.to_sql})")
   end
 
-  # Returns projects user is authorized to access.
-  #
-  # If you change the logic of this method, please also update `Project#authorized_for_user`
+  def nested_groups
+    Group.member_descendants(id)
+  end
+
+  def nested_groups_projects
+    Project.joins(:namespace).where('namespaces.parent_id IS NOT NULL').
+      member_descendants(id)
+  end
+
+  def refresh_authorized_projects
+    Users::RefreshAuthorizedProjectsService.new(self).execute
+  end
+
+  def remove_project_authorizations(project_ids)
+    project_authorizations.where(project_id: project_ids).delete_all
+  end
+
+  def set_authorized_projects_column
+    unless authorized_projects_populated
+      update_column(:authorized_projects_populated, true)
+    end
+  end
+
   def authorized_projects(min_access_level = nil)
-    Project.where("projects.id IN (#{projects_union(min_access_level).to_sql})")
+    refresh_authorized_projects unless authorized_projects_populated
+
+    # We're overriding an association, so explicitly call super with no arguments or it would be passed as `force_reload` to the association
+    projects = super()
+    projects = projects.where('project_authorizations.access_level >= ?', min_access_level) if min_access_level
+
+    projects
+  end
+
+  def authorized_project?(project, min_access_level = nil)
+    authorized_projects(min_access_level).exists?({ id: project.id })
+  end
+
+  # Returns the projects this user has reporter (or greater) access to, limited
+  # to at most the given projects.
+  #
+  # This method is useful when you have a list of projects and want to
+  # efficiently check to which of these projects the user has at least reporter
+  # access.
+  def projects_with_reporter_access_limited_to(projects)
+    authorized_projects(Gitlab::Access::REPORTER).where(id: projects)
   end
 
   def viewable_starred_projects
-    starred_projects.where("projects.visibility_level IN (?) OR projects.id IN (#{projects_union.to_sql})",
-                           [Project::PUBLIC, Project::INTERNAL])
+    starred_projects.where("projects.visibility_level IN (?) OR projects.id IN (?)",
+                           [Project::PUBLIC, Project::INTERNAL],
+                           authorized_projects.select(:project_id))
   end
 
   def owned_projects
@@ -467,7 +551,7 @@ class User < ActiveRecord::Base
   end
 
   def require_ssh_key?
-    keys.count == 0
+    keys.count == 0 && Gitlab::ProtocolAccess.allowed?('ssh')
   end
 
   def require_password?
@@ -483,14 +567,14 @@ class User < ActiveRecord::Base
   end
 
   def can_create_group?
-    can?(:create_group, nil)
+    can?(:create_group)
   end
 
   def can_select_namespace?
     several_namespaces? || admin
   end
 
-  def can?(action, subject)
+  def can?(action, subject = :global)
     Ability.allowed?(self, action, subject)
   end
 
@@ -523,8 +607,8 @@ class User < ActiveRecord::Base
 
       if project.repository.branch_exists?(event.branch_name)
         merge_requests = MergeRequest.where("created_at >= ?", event.created_at).
-            where(source_project_id: project.id,
-                  source_branch: event.branch_name)
+          where(source_project_id: project.id,
+                source_branch: event.branch_name)
         merge_requests.empty?
       end
     end
@@ -551,8 +635,10 @@ class User < ActiveRecord::Base
   end
 
   def fork_of(project)
-    links = ForkedProjectLink.where(forked_from_project_id: project, forked_to_project_id: personal_projects)
-
+    links = ForkedProjectLink.where(
+      forked_from_project_id: project,
+      forked_to_project_id: personal_projects.unscope(:order)
+    )
     if links.any?
       links.first.forked_to_project
     else
@@ -569,7 +655,7 @@ class User < ActiveRecord::Base
   end
 
   def project_deploy_keys
-    DeployKey.unscoped.in_projects(self.authorized_projects.pluck(:id)).distinct(:id)
+    DeployKey.unscoped.in_projects(authorized_projects.pluck(:id)).distinct(:id)
   end
 
   def accessible_deploy_keys
@@ -585,38 +671,38 @@ class User < ActiveRecord::Base
   end
 
   def sanitize_attrs
-    %w(name username skype linkedin twitter).each do |attr|
-      value = self.send(attr)
-      self.send("#{attr}=", Sanitize.clean(value)) if value.present?
+    %w[name username skype linkedin twitter].each do |attr|
+      value = public_send(attr)
+      public_send("#{attr}=", Sanitize.clean(value)) if value.present?
     end
   end
 
   def set_notification_email
-    if self.notification_email.blank? || !self.all_emails.include?(self.notification_email)
-      self.notification_email = self.email
+    if notification_email.blank? || !all_emails.include?(notification_email)
+      self.notification_email = email
     end
   end
 
   def set_public_email
-    if self.public_email.blank? || !self.all_emails.include?(self.public_email)
+    if public_email.blank? || !all_emails.include?(public_email)
       self.public_email = ''
     end
   end
 
   def update_secondary_emails!
-    self.set_notification_email
-    self.set_public_email
-    self.save if self.notification_email_changed? || self.public_email_changed?
+    set_notification_email
+    set_public_email
+    save if notification_email_changed? || public_email_changed?
   end
 
   def set_projects_limit
     # `User.select(:id)` raises
     # `ActiveModel::MissingAttributeError: missing attribute: projects_limit`
     # without this safeguard!
-    return unless self.has_attribute?(:projects_limit)
+    return unless has_attribute?(:projects_limit)
 
     connection_default_value_defined = new_record? && !projects_limit_changed?
-    return unless self.projects_limit.nil? || connection_default_value_defined
+    return unless projects_limit.nil? || connection_default_value_defined
 
     self.projects_limit = current_application_settings.default_projects_limit
   end
@@ -646,7 +732,7 @@ class User < ActiveRecord::Base
 
   def with_defaults
     User.defaults.each do |k, v|
-      self.send("#{k}=", v)
+      public_send("#{k}=", v)
     end
 
     self
@@ -657,20 +743,6 @@ class User < ActiveRecord::Base
       project.project_member(self)
   end
 
-  # Reset project events cache related to this user
-  #
-  # Since we do cache @event we need to reset cache in special cases:
-  # * when the user changes their avatar
-  # Events cache stored like  events/23-20130109142513.
-  # The cache key includes updated_at timestamp.
-  # Thus it will automatically generate a new fragment
-  # when the event is updated because the key changes.
-  def reset_events_cache
-    Event.where(author_id: self.id).
-      order('id DESC').limit(1000).
-      update_all(updated_at: Time.now)
-  end
-
   def full_website_url
     return "http://#{website_url}" if website_url !~ /\Ahttps?:\/\//
 
@@ -699,8 +771,8 @@ class User < ActiveRecord::Base
 
   def all_emails
     all_emails = []
-    all_emails << self.email unless self.temp_oauth_email?
-    all_emails.concat(self.emails.map(&:email))
+    all_emails << email unless temp_oauth_email?
+    all_emails.concat(emails.map(&:email))
     all_emails
   end
 
@@ -714,21 +786,15 @@ class User < ActiveRecord::Base
 
   def ensure_namespace_correct
     # Ensure user has namespace
-    self.create_namespace!(path: self.username, name: self.username) unless self.namespace
+    create_namespace!(path: username, name: username) unless namespace
 
-    if self.username_changed?
-      self.namespace.update_attributes(path: self.username, name: self.username)
+    if username_changed?
+      namespace.update_attributes(path: username, name: username)
     end
   end
 
-  def post_create_hook
-    log_info("User \"#{self.name}\" (#{self.email}) was created")
-    notification_service.new_user(self, @reset_token) if self.created_by_id
-    system_hook_service.execute_hooks_for(self, :create)
-  end
-
   def post_destroy_hook
-    log_info("User \"#{self.name}\" (#{self.email})  was removed")
+    log_info("User \"#{name}\" (#{email})  was removed")
     system_hook_service.execute_hooks_for(self, :destroy)
   end
 
@@ -772,7 +838,7 @@ class User < ActiveRecord::Base
   end
 
   def oauth_authorized_tokens
-    Doorkeeper::AccessToken.where(resource_owner_id: self.id, revoked_at: nil)
+    Doorkeeper::AccessToken.where(resource_owner_id: id, revoked_at: nil)
   end
 
   # Returns the projects a user contributed to in the last year.
@@ -803,7 +869,7 @@ class User < ActiveRecord::Base
   def ci_authorized_runners
     @ci_authorized_runners ||= begin
       runner_ids = Ci::RunnerProject.
-        where("ci_runner_projects.gl_project_id IN (#{ci_projects_union.to_sql})").
+        where("ci_runner_projects.project_id IN (#{ci_projects_union.to_sql})").
         select(:runner_id)
       Ci::Runner.specific.where(id: runner_ids)
     end
@@ -874,22 +940,31 @@ class User < ActiveRecord::Base
     end
   end
 
-  private
+  def access_level
+    if admin?
+      :admin
+    else
+      :regular
+    end
+  end
 
-  def projects_union(min_access_level = nil)
-    relations = [personal_projects.select(:id),
-                 groups_projects.select(:id),
-                 projects.select(:id),
-                 groups.joins(:shared_projects).select(:project_id)]
+  def access_level=(new_level)
+    new_level = new_level.to_s
+    return unless %w(admin regular).include?(new_level)
 
-    if min_access_level
-      scope = { access_level: Gitlab::Access.all_values.select { |access| access >= min_access_level } }
-      relations = [relations.shift] + relations.map { |relation| relation.where(members: scope) }
-    end
+    self.admin = (new_level == 'admin')
+  end
+
+  protected
 
-    Gitlab::SQL::Union.new(relations)
+  # override, from Devise::Validatable
+  def password_required?
+    return false if internal?
+    super
   end
 
+  private
+
   def ci_projects_union
     scope  = { access_level: [Gitlab::Access::MASTER, Gitlab::Access::OWNER] }
     groups = groups_projects.where(members: scope)
@@ -905,7 +980,7 @@ class User < ActiveRecord::Base
   end
 
   def ensure_external_user_rights
-    return unless self.external?
+    return unless external?
 
     self.can_create_group   = false
     self.projects_limit     = 0
@@ -917,7 +992,7 @@ class User < ActiveRecord::Base
 
     if current_application_settings.domain_blacklist_enabled?
       blocked_domains = current_application_settings.domain_blacklist
-      if domain_matches?(blocked_domains, self.email)
+      if domain_matches?(blocked_domains, email)
         error = 'is not from an allowed domain.'
         valid = false
       end
@@ -925,7 +1000,7 @@ class User < ActiveRecord::Base
 
     allowed_domains = current_application_settings.domain_whitelist
     unless allowed_domains.blank?
-      if domain_matches?(allowed_domains, self.email)
+      if domain_matches?(allowed_domains, email)
         valid = true
       else
         error = "domain is not authorized for sign-up"
@@ -933,7 +1008,7 @@ class User < ActiveRecord::Base
       end
     end
 
-    self.errors.add(:email, error) unless valid
+    errors.add(:email, error) unless valid
 
     valid
   end
@@ -946,4 +1021,52 @@ class User < ActiveRecord::Base
       signup_domain =~ regexp
     end
   end
+
+  def generate_token(token_field)
+    if token_field == :incoming_email_token
+      # Needs to be all lowercase and alphanumeric because it's gonna be used in an email address.
+      SecureRandom.hex.to_i(16).to_s(36)
+    else
+      super
+    end
+  end
+
+  def self.unique_internal(scope, username, email_pattern, &b)
+    scope.first || create_unique_internal(scope, username, email_pattern, &b)
+  end
+
+  def self.create_unique_internal(scope, username, email_pattern, &creation_block)
+    # Since we only want a single one of these in an instance, we use an
+    # exclusive lease to ensure than this block is never run concurrently.
+    lease_key = "user:unique_internal:#{username}"
+    lease = Gitlab::ExclusiveLease.new(lease_key, timeout: 1.minute.to_i)
+
+    until uuid = lease.try_obtain
+      # Keep trying until we obtain the lease. To prevent hammering Redis too
+      # much we'll wait for a bit between retries.
+      sleep(1)
+    end
+
+    # Recheck if the user is already present. One might have been
+    # added between the time we last checked (first line of this method)
+    # and the time we acquired the lock.
+    existing_user = uncached { scope.first }
+    return existing_user if existing_user.present?
+
+    uniquify = Uniquify.new
+
+    username = uniquify.string(username) { |s| User.find_by_username(s) }
+
+    email = uniquify.string(-> (n) { Kernel.sprintf(email_pattern, n) }) do |s|
+      User.find_by_email(s)
+    end
+
+    scope.create(
+      username: username,
+      email: email,
+      &creation_block
+    )
+  ensure
+    Gitlab::ExclusiveLease.cancel(lease_key, uuid)
+  end
 end
diff --git a/app/models/wiki_directory.rb b/app/models/wiki_directory.rb
new file mode 100644
index 00000000000..9340fc2dbbe
--- /dev/null
+++ b/app/models/wiki_directory.rb
@@ -0,0 +1,18 @@
+class WikiDirectory
+  include ActiveModel::Validations
+
+  attr_accessor :slug, :pages
+
+  validates :slug, presence: true
+
+  def initialize(slug, pages = [])
+    @slug = slug
+    @pages = pages
+  end
+
+  # Relative path to the partial to be used when rendering collections
+  # of this object.
+  def to_partial_path
+    'projects/wikis/wiki_directory'
+  end
+end
diff --git a/app/models/wiki_page.rb b/app/models/wiki_page.rb
index c3de278f5b7..c771c22f46a 100644
--- a/app/models/wiki_page.rb
+++ b/app/models/wiki_page.rb
@@ -12,6 +12,32 @@ class WikiPage
     ActiveModel::Name.new(self, nil, 'wiki')
   end
 
+  # Sorts and groups pages by directory.
+  #
+  # pages - an array of WikiPage objects.
+  #
+  # Returns an array of WikiPage and WikiDirectory objects. The entries are
+  # sorted by alphabetical order (directories and pages inside each directory).
+  # Pages at the root level come before everything.
+  def self.group_by_directory(pages)
+    return [] if pages.blank?
+
+    pages.sort_by { |page| [page.directory, page.slug] }.
+      group_by(&:directory).
+      map do |dir, pages|
+        if dir.present?
+          WikiDirectory.new(dir, pages)
+        else
+          pages
+        end
+      end.
+      flatten
+  end
+
+  def self.unhyphenize(name)
+    name.gsub(/-+/, ' ')
+  end
+
   def to_key
     [:slug]
   end
@@ -56,7 +82,7 @@ class WikiPage
   # The formatted title of this page.
   def title
     if @attributes[:title]
-      @attributes[:title].gsub(/-+/, ' ')
+      self.class.unhyphenize(@attributes[:title])
     else
       ""
     end
@@ -69,16 +95,17 @@ class WikiPage
 
   # The raw content of this page.
   def content
-    @attributes[:content] ||= if @page
-                                @page.text_data
-                              end
+    @attributes[:content] ||= @page&.text_data
+  end
+
+  # The hierarchy of the directory this page is contained in.
+  def directory
+    wiki.page_title_and_dir(slug).last
   end
 
   # The processed/formatted content of this page.
   def formatted_content
-    @attributes[:formatted_content] ||= if @page
-                                          @page.formatted_data
-                                        end
+    @attributes[:formatted_content] ||= @page&.formatted_data
   end
 
   # The markup format for the page.
@@ -122,7 +149,13 @@ class WikiPage
   end
 
   # Returns boolean True or False if this instance
-  # has been fully saved to disk or not.
+  # is the latest commit version of the page.
+  def latest?
+    !historical?
+  end
+
+  # Returns boolean True or False if this instance
+  # has been fully created on disk or not.
   def persisted?
     @persisted == true
   end
@@ -174,6 +207,16 @@ class WikiPage
     end
   end
 
+  # Relative path to the partial to be used when rendering collections
+  # of this object.
+  def to_partial_path
+    'projects/wikis/wiki_page'
+  end
+
+  def id
+    page.version.to_s
+  end
+
   private
 
   def set_attributes
@@ -183,6 +226,8 @@ class WikiPage
   end
 
   def save(method, *args)
+    saved = false
+
     project_wiki = wiki
     if valid? && project_wiki.send(method, *args)
 
@@ -200,10 +245,10 @@ class WikiPage
       set_attributes
 
       @persisted = true
+      saved = true
     else
       errors.add(:base, project_wiki.error_message) if project_wiki.error_message
-      @persisted = false
     end
-    @persisted
+    saved
   end
 end
diff --git a/app/policies/base_policy.rb b/app/policies/base_policy.rb
index 118c100ca11..8890409d056 100644
--- a/app/policies/base_policy.rb
+++ b/app/policies/base_policy.rb
@@ -6,14 +6,16 @@ class BasePolicy
       @cannot_set = cannot_set
     end
 
-    def size
-      to_set.size
-    end
+    delegate :size, to: :to_set
 
     def self.empty
       new(Set.new, Set.new)
     end
 
+    def self.none
+      empty.freeze
+    end
+
     def can?(ability)
       @can_set.include?(ability) && !@cannot_set.include?(ability)
     end
@@ -51,7 +53,12 @@ class BasePolicy
   end
 
   def self.class_for(subject)
-    return GlobalPolicy if subject.nil?
+    return GlobalPolicy if subject == :global
+    raise ArgumentError, 'no policy for nil' if subject.nil?
+
+    if subject.class.try(:presenter?)
+      subject = subject.subject
+    end
 
     subject.class.ancestors.each do |klass|
       next unless klass.name
@@ -77,7 +84,7 @@ class BasePolicy
   end
 
   def abilities
-    return RuleSet.empty if @user && @user.blocked?
+    return RuleSet.none if @user && @user.blocked?
     return anonymous_abilities if @user.nil?
     collect_rules { rules }
   end
diff --git a/app/policies/ci/build_policy.rb b/app/policies/ci/build_policy.rb
index 2232e231cf8..8b25332b73c 100644
--- a/app/policies/ci/build_policy.rb
+++ b/app/policies/ci/build_policy.rb
@@ -5,7 +5,7 @@ module Ci
 
       # If we can't read build we should also not have that
       # ability when looking at this in context of commit_status
-      %w(read create update admin).each do |rule|
+      %w[read create update admin].each do |rule|
         cannot! :"#{rule}_commit_status" unless can? :"#{rule}_build"
       end
     end
diff --git a/app/policies/ci/pipeline_policy.rb b/app/policies/ci/pipeline_policy.rb
new file mode 100644
index 00000000000..3d2eef1c50c
--- /dev/null
+++ b/app/policies/ci/pipeline_policy.rb
@@ -0,0 +1,4 @@
+module Ci
+  class PipelinePolicy < BuildPolicy
+  end
+end
diff --git a/app/policies/ci/trigger_policy.rb b/app/policies/ci/trigger_policy.rb
new file mode 100644
index 00000000000..c90c9ac0583
--- /dev/null
+++ b/app/policies/ci/trigger_policy.rb
@@ -0,0 +1,13 @@
+module Ci
+  class TriggerPolicy < BasePolicy
+    def rules
+      delegate! @subject.project
+
+      if can?(:admin_build)
+        can! :admin_trigger if @subject.owner.blank? ||
+            @subject.owner == @user
+        can! :manage_trigger
+      end
+    end
+  end
+end
diff --git a/app/policies/global_policy.rb b/app/policies/global_policy.rb
index 3c2fbe6b56b..cb72c2b4590 100644
--- a/app/policies/global_policy.rb
+++ b/app/policies/global_policy.rb
@@ -4,5 +4,12 @@ class GlobalPolicy < BasePolicy
 
     can! :create_group if @user.can_create_group
     can! :read_users_list
+
+    unless @user.blocked? || @user.internal?
+      can! :log_in unless @user.access_locked?
+      can! :access_api
+      can! :access_git
+      can! :receive_notifications
+    end
   end
 end
diff --git a/app/policies/group_member_policy.rb b/app/policies/group_member_policy.rb
index 62335527654..5a3fe814b77 100644
--- a/app/policies/group_member_policy.rb
+++ b/app/policies/group_member_policy.rb
@@ -15,5 +15,11 @@ class GroupMemberPolicy < BasePolicy
     elsif @user == target_user
       can! :destroy_group_member
     end
+
+    additional_rules!
+  end
+
+  def additional_rules!
+    # This is meant to be overriden in EE
   end
 end
diff --git a/app/policies/group_policy.rb b/app/policies/group_policy.rb
index b65fb68cd88..4cc21696eb6 100644
--- a/app/policies/group_policy.rb
+++ b/app/policies/group_policy.rb
@@ -4,7 +4,7 @@ class GroupPolicy < BasePolicy
     return unless @user
 
     globally_viewable = @subject.public? || (@subject.internal? && !@user.external?)
-    member = @subject.users.include?(@user)
+    member = @subject.users_with_parents.include?(@user)
     owner = @user.admin? || @subject.has_owner?(@user)
     master = owner || @subject.has_master?(@user)
 
diff --git a/app/policies/issuable_policy.rb b/app/policies/issuable_policy.rb
index c253f9a9399..9501e499507 100644
--- a/app/policies/issuable_policy.rb
+++ b/app/policies/issuable_policy.rb
@@ -4,7 +4,7 @@ class IssuablePolicy < BasePolicy
   end
 
   def rules
-    if @user && (@subject.author == @user || @subject.assignee == @user)
+    if @user && @subject.assignee_or_author?(@user)
       can! :"read_#{action_name}"
       can! :"update_#{action_name}"
     end
diff --git a/app/policies/issue_policy.rb b/app/policies/issue_policy.rb
index bd1811a3c54..88f3179c6ff 100644
--- a/app/policies/issue_policy.rb
+++ b/app/policies/issue_policy.rb
@@ -1,4 +1,8 @@
 class IssuePolicy < IssuablePolicy
+  # This class duplicates the same check of Issue#readable_by? for performance reasons
+  # Make sure to sync this class checks with issue.rb to avoid security problems.
+  # Check commit 002ad215818450d2cbbc5fa065850a953dc7ada8 for more information.
+
   def issue
     @subject
   end
@@ -8,9 +12,8 @@ class IssuePolicy < IssuablePolicy
 
     if @subject.confidential? && !can_read_confidential?
       cannot! :read_issue
-      cannot! :admin_issue
       cannot! :update_issue
-      cannot! :read_issue
+      cannot! :admin_issue
     end
   end
 
@@ -18,11 +21,7 @@ class IssuePolicy < IssuablePolicy
 
   def can_read_confidential?
     return false unless @user
-    return true if @user.admin?
-    return true if @subject.author == @user
-    return true if @subject.assignee == @user
-    return true if @subject.project.team.member?(@user, Gitlab::Access::REPORTER)
 
-    false
+    IssueCollection.new([@subject]).visible_to(@user).any?
   end
 end
diff --git a/app/policies/note_policy.rb b/app/policies/note_policy.rb
index 83847466ee2..5326061bd07 100644
--- a/app/policies/note_policy.rb
+++ b/app/policies/note_policy.rb
@@ -12,7 +12,7 @@ class NotePolicy < BasePolicy
     end
 
     if @subject.for_merge_request? &&
-       @subject.noteable.author == @user
+        @subject.noteable.author == @user
       can! :resolve_note
     end
   end
diff --git a/app/policies/personal_snippet_policy.rb b/app/policies/personal_snippet_policy.rb
index 46c5aa1a5be..d3913986cd8 100644
--- a/app/policies/personal_snippet_policy.rb
+++ b/app/policies/personal_snippet_policy.rb
@@ -6,9 +6,14 @@ class PersonalSnippetPolicy < BasePolicy
     if @subject.author == @user
       can! :read_personal_snippet
       can! :update_personal_snippet
+      can! :destroy_personal_snippet
       can! :admin_personal_snippet
     end
 
+    unless @user.external?
+      can! :create_personal_snippet
+    end
+
     if @subject.internal? && !@user.external?
       can! :read_personal_snippet
     end
diff --git a/app/policies/project_policy.rb b/app/policies/project_policy.rb
index 1ee31023e26..f8594e29547 100644
--- a/app/policies/project_policy.rb
+++ b/app/policies/project_policy.rb
@@ -3,7 +3,7 @@ class ProjectPolicy < BasePolicy
     team_access!(user)
 
     owner = project.owner == user ||
-            (project.group && project.group.has_owner?(user))
+      (project.group && project.group.has_owner?(user))
 
     owner_access! if user.admin? || owner
     team_member_owner_access! if owner
@@ -12,11 +12,8 @@ class ProjectPolicy < BasePolicy
       guest_access!
       public_access!
 
-      # Allow to read builds for internal projects
-      can! :read_build if project.public_builds?
-
       if project.request_access_enabled &&
-         !(owner || user.admin? || project.team.member?(user) || project_group_member?(user))
+          !(owner || user.admin? || project.team.member?(user) || project_group_member?(user))
         can! :request_access
       end
     end
@@ -46,10 +43,16 @@ class ProjectPolicy < BasePolicy
     can! :create_note
     can! :upload_file
     can! :read_cycle_analytics
+
+    if project.public_builds?
+      can! :read_pipeline
+      can! :read_build
+    end
   end
 
   def reporter_access!
     can! :download_code
+    can! :download_wiki_code
     can! :fork_project
     can! :create_project_snippet
     can! :update_issue
@@ -107,6 +110,9 @@ class ProjectPolicy < BasePolicy
     can! :admin_pipeline
     can! :admin_environment
     can! :admin_deployment
+    can! :admin_pages
+    can! :read_pages
+    can! :update_pages
   end
 
   def public_access!
@@ -133,6 +139,7 @@ class ProjectPolicy < BasePolicy
     can! :remove_fork_project
     can! :destroy_merge_request
     can! :destroy_issue
+    can! :remove_pages
   end
 
   def team_member_owner_access!
@@ -168,9 +175,7 @@ class ProjectPolicy < BasePolicy
   def disabled_features!
     repository_enabled = project.feature_available?(:repository, user)
 
-    unless project.feature_available?(:issues, user)
-      cannot!(*named_abilities(:issue))
-    end
+    block_issues_abilities
 
     unless project.feature_available?(:merge_requests, user) && repository_enabled
       cannot!(*named_abilities(:merge_request))
@@ -187,6 +192,7 @@ class ProjectPolicy < BasePolicy
 
     unless project.feature_available?(:wiki, user) || project.has_external_wiki?
       cannot!(*named_abilities(:wiki))
+      cannot!(:download_wiki_code)
     end
 
     unless project.feature_available?(:builds, user) && repository_enabled
@@ -212,24 +218,7 @@ class ProjectPolicy < BasePolicy
   def anonymous_rules
     return unless project.public?
 
-    can! :read_project
-    can! :read_board
-    can! :read_list
-    can! :read_wiki
-    can! :read_label
-    can! :read_milestone
-    can! :read_project_snippet
-    can! :read_project_member
-    can! :read_merge_request
-    can! :read_note
-    can! :read_pipeline
-    can! :read_commit_status
-    can! :read_container_image
-    can! :download_code
-    can! :read_cycle_analytics
-
-    # NOTE: may be overridden by IssuePolicy
-    can! :read_issue
+    base_readonly_access!
 
     # Allow to read builds by anonymous user if guests are allowed
     can! :read_build if project.public_builds?
@@ -239,10 +228,19 @@ class ProjectPolicy < BasePolicy
 
   def project_group_member?(user)
     project.group &&
-    (
-      project.group.members.exists?(user_id: user.id) ||
-      project.group.requesters.exists?(user_id: user.id)
-    )
+      (
+        project.group.members_with_parents.exists?(user_id: user.id) ||
+        project.group.requesters.exists?(user_id: user.id)
+      )
+  end
+
+  def block_issues_abilities
+    unless project.feature_available?(:issues, user)
+      cannot! :read_issue if project.default_issues_tracker?
+      cannot! :create_issue
+      cannot! :update_issue
+      cannot! :admin_issue
+    end
   end
 
   def named_abilities(name)
@@ -253,4 +251,31 @@ class ProjectPolicy < BasePolicy
       :"admin_#{name}"
     ]
   end
+
+  private
+
+  # A base set of abilities for read-only users, which
+  # is then augmented as necessary for anonymous and other
+  # read-only users.
+  def base_readonly_access!
+    can! :read_project
+    can! :read_board
+    can! :read_list
+    can! :read_wiki
+    can! :read_label
+    can! :read_milestone
+    can! :read_project_snippet
+    can! :read_project_member
+    can! :read_merge_request
+    can! :read_note
+    can! :read_pipeline
+    can! :read_commit_status
+    can! :read_container_image
+    can! :download_code
+    can! :download_wiki_code
+    can! :read_cycle_analytics
+
+    # NOTE: may be overridden by IssuePolicy
+    can! :read_issue
+  end
 end
diff --git a/app/policies/project_snippet_policy.rb b/app/policies/project_snippet_policy.rb
index 57acccfafd9..3a96836917e 100644
--- a/app/policies/project_snippet_policy.rb
+++ b/app/policies/project_snippet_policy.rb
@@ -3,7 +3,7 @@ class ProjectSnippetPolicy < BasePolicy
     can! :read_project_snippet if @subject.public?
     return unless @user
 
-    if @user && @subject.author == @user || @user.admin?
+    if @user && (@subject.author == @user || @user.admin?)
       can! :read_project_snippet
       can! :update_project_snippet
       can! :admin_project_snippet
diff --git a/app/policies/user_policy.rb b/app/policies/user_policy.rb
index 03a2499e263..229846e368c 100644
--- a/app/policies/user_policy.rb
+++ b/app/policies/user_policy.rb
@@ -3,6 +3,14 @@ class UserPolicy < BasePolicy
 
   def rules
     can! :read_user if @user || !restricted_public_level?
+
+    if @user
+      if @user.admin? || @subject == @user
+        can! :destroy_user
+      end
+
+      cannot! :destroy_user if @subject.ghost?
+    end
   end
 
   def restricted_public_level?
diff --git a/app/presenters/README.md b/app/presenters/README.md
new file mode 100644
index 00000000000..a4d592b54d6
--- /dev/null
+++ b/app/presenters/README.md
@@ -0,0 +1,154 @@
+# Presenters
+
+This type of class is responsible for giving the view an object which defines
+**view-related logic/data methods**. It is usually useful to extract such
+methods from models to presenters.
+
+## When to use a presenter?
+
+### When your view is full of logic
+
+When your view is full of logic (`if`, `else`, `select` on arrays etc.), it's
+time to create a presenter!
+
+### When your model has a lot of view-related logic/data methods
+
+When your model has a lot of view-related logic/data methods, you can easily
+move them to a presenter.
+
+## Why are we using presenters instead of helpers?
+
+We don't use presenters to generate complex view output that would rely on helpers.
+
+Presenters should be used for:
+
+- Data and logic methods that can be pulled & combined into single methods from
+  view. This can include loops extracted from views too. A good example is
+  https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/7073/diffs.
+- Data and logic methods that can be pulled from models.
+- Simple text output methods: it's ok if the method returns a string, but not a
+  whole DOM element for which we'd need HAML, a view context, helpers etc.
+
+## Why use presenters instead of model concerns?
+
+We should strive to follow the single-responsibility principle, and view-related
+logic/data methods are definitely not the responsibility of models!
+
+Another reason is as follows:
+
+> Avoid using concerns and use presenters instead. Why? After all, concerns seem
+to be a core part of Rails and can DRY up code when shared among multiple models.
+Nonetheless, the main issue is that concerns don’t make the model object more
+cohesive. The code is just better organized. In other words, there’s no real
+change to the API of the model.
+
+– https://www.toptal.com/ruby-on-rails/decoupling-rails-components
+
+## Benefits
+
+By moving pure view-related logic/data methods from models & views to presenters,
+we gain the following benefits:
+
+- rules are more explicit and centralized in the presenter => improves security
+- testing is easier and faster as presenters are Plain Old Ruby Object (PORO)
+- views are more readable and maintainable
+- decreases number of CE -> EE merge conflicts since code is in separate files
+- moves the conflicts from views (not always obvious) to presenters (a lot easier to resolve)
+
+## What not to do with presenters?
+
+- Don't use helpers in presenters. Presenters are not aware of the view context.
+- Don't generate complex DOM elements, forms etc. with presenters. Presenters
+  can return simple data as texts, and URLs using URL helpers from
+  `Gitlab::Routing` but nothing much more fancy.
+
+## Implementation
+
+### Presenter definition
+
+Every presenter should inherit from `Gitlab::View::Presenter::Simple`, which
+provides a `.presents` method which allows you to define an accessor for the
+presented object. It also includes common helpers like `Gitlab::Routing` and
+`Gitlab::Allowable`.
+
+```ruby
+class LabelPresenter < Gitlab::View::Presenter::Simple
+  presents :label
+
+  def text_color
+    label.color.to_s
+  end
+
+  def to_partial_path
+    'projects/labels/show'
+  end
+end
+```
+
+In some cases, it can be more practical to transparently delegate all missing
+method calls to the presented object, in these cases, you can make your
+presenter inherit from `Gitlab::View::Presenter::Delegated`:
+
+```ruby
+class LabelPresenter < Gitlab::View::Presenter::Delegated
+  presents :label
+
+  def text_color
+    # color is delegated to label
+    color.to_s
+  end
+
+  def to_partial_path
+    'projects/labels/show'
+  end
+end
+```
+
+### Presenter instantiation
+
+Instantiation must be done via the `Gitlab::View::Presenter::Factory` class which
+detects the presenter based on the presented subject's class.
+
+```ruby
+class Projects::LabelsController < Projects::ApplicationController
+  def edit
+    @label = Gitlab::View::Presenter::Factory
+      .new(@label, current_user: current_user)
+      .fabricate!
+  end
+end
+```
+
+You can also include the `Presentable` concern in the model:
+
+```ruby
+class Label
+  include Presentable
+end
+```
+
+and then in the controller:
+
+```ruby
+class Projects::LabelsController < Projects::ApplicationController
+  def edit
+    @label = @label.present(current_user: current_user)
+  end
+end
+```
+
+### Presenter usage
+
+```ruby
+%div{ class: @label.text_color }
+  = render partial: @label, label: @label
+```
+
+You can also present the model in the view:
+
+```ruby
+- label = @label.present(current_user: current_user)
+
+%div{ class: label.text_color }
+  = render partial: label, label: label
+```
diff --git a/app/presenters/ci/build_presenter.rb b/app/presenters/ci/build_presenter.rb
new file mode 100644
index 00000000000..ed72ed14d72
--- /dev/null
+++ b/app/presenters/ci/build_presenter.rb
@@ -0,0 +1,15 @@
+module Ci
+  class BuildPresenter < Gitlab::View::Presenter::Delegated
+    presents :build
+
+    def erased_by_user?
+      # Build can be erased through API, therefore it does not have
+      # `erased_by` user assigned in that case.
+      erased? && erased_by
+    end
+
+    def erased_by_name
+      erased_by.name if erased_by_user?
+    end
+  end
+end
diff --git a/app/presenters/projects/settings/deploy_keys_presenter.rb b/app/presenters/projects/settings/deploy_keys_presenter.rb
new file mode 100644
index 00000000000..86ac513b3c0
--- /dev/null
+++ b/app/presenters/projects/settings/deploy_keys_presenter.rb
@@ -0,0 +1,60 @@
+module Projects
+  module Settings
+    class DeployKeysPresenter < Gitlab::View::Presenter::Simple
+      presents :project
+      delegate :size, to: :enabled_keys, prefix: true
+      delegate :size, to: :available_project_keys, prefix: true
+      delegate :size, to: :available_public_keys, prefix: true
+
+      def new_key
+        @key ||= DeployKey.new
+      end
+
+      def enabled_keys
+        @enabled_keys ||= project.deploy_keys
+      end
+
+      def any_keys_enabled?
+        enabled_keys.any?
+      end
+
+      def available_keys
+        @available_keys ||= current_user.accessible_deploy_keys - enabled_keys
+      end
+
+      def available_project_keys
+        @available_project_keys ||= current_user.project_deploy_keys - enabled_keys
+      end
+
+      def any_available_project_keys_enabled?
+        available_project_keys.any?
+      end
+
+      def key_available?(deploy_key)
+        available_keys.include?(deploy_key)
+      end
+
+      def available_public_keys
+        return @available_public_keys if defined?(@available_public_keys)
+
+        @available_public_keys ||= DeployKey.are_public - enabled_keys
+
+        # Public keys that are already used by another accessible project are already
+        # in @available_project_keys.
+        @available_public_keys -= available_project_keys
+      end
+
+      def any_available_public_keys_enabled?
+        available_public_keys.any?
+      end
+
+      def to_partial_path
+        'projects/deploy_keys/index'
+      end
+
+      def form_partial_path
+        'projects/deploy_keys/form'
+      end
+    end
+  end
+end
diff --git a/app/serializers/analytics_build_entity.rb b/app/serializers/analytics_build_entity.rb
new file mode 100644
index 00000000000..a0db5b8f0f4
--- /dev/null
+++ b/app/serializers/analytics_build_entity.rb
@@ -0,0 +1,40 @@
+class AnalyticsBuildEntity < Grape::Entity
+  include RequestAwareEntity
+  include EntityDateHelper
+
+  expose :name
+  expose :id
+  expose :ref, as: :branch
+  expose :short_sha
+  expose :author, using: UserEntity
+
+  expose :started_at, as: :date do |build|
+    interval_in_words(build[:started_at])
+  end
+
+  expose :duration, as: :total_time do |build|
+    build.duration ? distance_of_time_as_hash(build.duration.to_f) : {}
+  end
+
+  expose :branch do
+    expose :ref, as: :name
+
+    expose :url do |build|
+      url_to(:namespace_project_tree, build, build.ref)
+    end
+  end
+
+  expose :url do |build|
+    url_to(:namespace_project_build, build)
+  end
+
+  expose :commit_url do |build|
+    url_to(:namespace_project_commit, build, build.sha)
+  end
+
+  private
+
+  def url_to(route, build, id = nil)
+    public_send("#{route}_url", build.project.namespace, build.project, id || build)
+  end
+end
diff --git a/app/serializers/analytics_build_serializer.rb b/app/serializers/analytics_build_serializer.rb
new file mode 100644
index 00000000000..f172d67d356
--- /dev/null
+++ b/app/serializers/analytics_build_serializer.rb
@@ -0,0 +1,3 @@
+class AnalyticsBuildSerializer < BaseSerializer
+  entity AnalyticsBuildEntity
+end
diff --git a/app/serializers/analytics_commit_entity.rb b/app/serializers/analytics_commit_entity.rb
new file mode 100644
index 00000000000..402cecbfd08
--- /dev/null
+++ b/app/serializers/analytics_commit_entity.rb
@@ -0,0 +1,13 @@
+class AnalyticsCommitEntity < CommitEntity
+  include EntityDateHelper
+
+  expose :short_id, as: :short_sha
+
+  expose :total_time do |commit|
+    distance_of_time_as_hash(request.total_time.to_f)
+  end
+
+  unexpose :author_name
+  unexpose :author_email
+  unexpose :message
+end
diff --git a/app/serializers/analytics_commit_serializer.rb b/app/serializers/analytics_commit_serializer.rb
new file mode 100644
index 00000000000..cdbfecf2b70
--- /dev/null
+++ b/app/serializers/analytics_commit_serializer.rb
@@ -0,0 +1,3 @@
+class AnalyticsCommitSerializer < BaseSerializer
+  entity AnalyticsCommitEntity
+end
diff --git a/app/serializers/analytics_generic_serializer.rb b/app/serializers/analytics_generic_serializer.rb
new file mode 100644
index 00000000000..9f4859e8410
--- /dev/null
+++ b/app/serializers/analytics_generic_serializer.rb
@@ -0,0 +1,7 @@
+class AnalyticsGenericSerializer < BaseSerializer
+  def represent(resource, opts = {})
+    resource.symbolize_keys!
+
+    super(resource, opts)
+  end
+end
diff --git a/app/serializers/analytics_issue_entity.rb b/app/serializers/analytics_issue_entity.rb
new file mode 100644
index 00000000000..44c50f18613
--- /dev/null
+++ b/app/serializers/analytics_issue_entity.rb
@@ -0,0 +1,29 @@
+class AnalyticsIssueEntity < Grape::Entity
+  include RequestAwareEntity
+  include EntityDateHelper
+
+  expose :title
+  expose :author, using: UserEntity
+
+  expose :iid do |object|
+    object[:iid].to_s
+  end
+
+  expose :total_time do |object|
+    distance_of_time_as_hash(object[:total_time].to_f)
+  end
+
+  expose(:created_at) do |object|
+    interval_in_words(object[:created_at])
+  end
+
+  expose :url do |object|
+    url_to(:namespace_project_issue, id: object[:iid].to_s)
+  end
+
+  private
+
+  def url_to(route, id)
+    public_send("#{route}_url", request.project.namespace, request.project, id)
+  end
+end
diff --git a/app/serializers/analytics_issue_serializer.rb b/app/serializers/analytics_issue_serializer.rb
new file mode 100644
index 00000000000..4fb3e8f1bb4
--- /dev/null
+++ b/app/serializers/analytics_issue_serializer.rb
@@ -0,0 +1,3 @@
+class AnalyticsIssueSerializer < AnalyticsGenericSerializer
+  entity AnalyticsIssueEntity
+end
diff --git a/app/serializers/analytics_merge_request_entity.rb b/app/serializers/analytics_merge_request_entity.rb
new file mode 100644
index 00000000000..888265eaa38
--- /dev/null
+++ b/app/serializers/analytics_merge_request_entity.rb
@@ -0,0 +1,7 @@
+class AnalyticsMergeRequestEntity < AnalyticsIssueEntity
+  expose :state
+
+  expose :url do |object|
+    url_to(:namespace_project_merge_request, id: object[:iid].to_s)
+  end
+end
diff --git a/app/serializers/analytics_merge_request_serializer.rb b/app/serializers/analytics_merge_request_serializer.rb
new file mode 100644
index 00000000000..4622a1dd855
--- /dev/null
+++ b/app/serializers/analytics_merge_request_serializer.rb
@@ -0,0 +1,3 @@
+class AnalyticsMergeRequestSerializer < AnalyticsGenericSerializer
+  entity AnalyticsMergeRequestEntity
+end
diff --git a/app/serializers/analytics_stage_entity.rb b/app/serializers/analytics_stage_entity.rb
new file mode 100644
index 00000000000..69bf693de8d
--- /dev/null
+++ b/app/serializers/analytics_stage_entity.rb
@@ -0,0 +1,11 @@
+class AnalyticsStageEntity < Grape::Entity
+  include EntityDateHelper
+
+  expose :title
+  expose :legend
+  expose :description
+
+  expose :median, as: :value do |stage|
+    stage.median && !stage.median.zero? ? distance_of_time_in_words(stage.median) : nil
+  end
+end
diff --git a/app/serializers/analytics_stage_serializer.rb b/app/serializers/analytics_stage_serializer.rb
new file mode 100644
index 00000000000..613cf6874d8
--- /dev/null
+++ b/app/serializers/analytics_stage_serializer.rb
@@ -0,0 +1,3 @@
+class AnalyticsStageSerializer < BaseSerializer
+  entity AnalyticsStageEntity
+end
diff --git a/app/serializers/analytics_summary_entity.rb b/app/serializers/analytics_summary_entity.rb
new file mode 100644
index 00000000000..91803ec07f5
--- /dev/null
+++ b/app/serializers/analytics_summary_entity.rb
@@ -0,0 +1,7 @@
+class AnalyticsSummaryEntity < Grape::Entity
+  expose :value, safe: true
+
+  expose :title do |object|
+    object.title.pluralize(object.value)
+  end
+end
diff --git a/app/serializers/analytics_summary_serializer.rb b/app/serializers/analytics_summary_serializer.rb
new file mode 100644
index 00000000000..c87a24aa47c
--- /dev/null
+++ b/app/serializers/analytics_summary_serializer.rb
@@ -0,0 +1,3 @@
+class AnalyticsSummarySerializer < BaseSerializer
+  entity AnalyticsSummaryEntity
+end
diff --git a/app/serializers/base_serializer.rb b/app/serializers/base_serializer.rb
index de9a181db90..311ee9c96be 100644
--- a/app/serializers/base_serializer.rb
+++ b/app/serializers/base_serializer.rb
@@ -6,6 +6,7 @@ class BaseSerializer
   def represent(resource, opts = {})
     self.class.entity_class
       .represent(resource, opts.merge(request: @request))
+      .as_json
   end
 
   def self.entity(entity_class)
diff --git a/app/serializers/build_action_entity.rb b/app/serializers/build_action_entity.rb
new file mode 100644
index 00000000000..184f5fd4b52
--- /dev/null
+++ b/app/serializers/build_action_entity.rb
@@ -0,0 +1,14 @@
+class BuildActionEntity < Grape::Entity
+  include RequestAwareEntity
+
+  expose :name do |build|
+    build.name
+  end
+
+  expose :path do |build|
+    play_namespace_project_build_path(
+      build.project.namespace,
+      build.project,
+      build)
+  end
+end
diff --git a/app/serializers/build_artifact_entity.rb b/app/serializers/build_artifact_entity.rb
new file mode 100644
index 00000000000..8b643d8e783
--- /dev/null
+++ b/app/serializers/build_artifact_entity.rb
@@ -0,0 +1,14 @@
+class BuildArtifactEntity < Grape::Entity
+  include RequestAwareEntity
+
+  expose :name do |build|
+    build.name
+  end
+
+  expose :path do |build|
+    download_namespace_project_build_artifacts_path(
+      build.project.namespace,
+      build.project,
+      build)
+  end
+end
diff --git a/app/serializers/build_entity.rb b/app/serializers/build_entity.rb
index 3d9ac66de0e..fadd6c5c597 100644
--- a/app/serializers/build_entity.rb
+++ b/app/serializers/build_entity.rb
@@ -4,21 +4,31 @@ class BuildEntity < Grape::Entity
   expose :id
   expose :name
 
-  expose :build_url do |build|
-    url_to(:namespace_project_build, build)
+  expose :build_path do |build|
+    path_to(:namespace_project_build, build)
   end
 
-  expose :retry_url do |build|
-    url_to(:retry_namespace_project_build, build)
+  expose :retry_path do |build|
+    path_to(:retry_namespace_project_build, build)
   end
 
-  expose :play_url, if: ->(build, _) { build.manual? } do |build|
-    url_to(:play_namespace_project_build, build)
+  expose :play_path, if: ->(build, _) { build.playable? } do |build|
+    path_to(:play_namespace_project_build, build)
   end
 
+  expose :created_at
+  expose :updated_at
+  expose :detailed_status, as: :status, with: StatusEntity
+
   private
 
-  def url_to(route, build)
-    send("#{route}_url", build.project.namespace, build.project, build)
+  alias_method :build, :object
+
+  def path_to(route, build)
+    send("#{route}_path", build.project.namespace, build.project, build)
+  end
+
+  def detailed_status
+    build.detailed_status(request.user)
   end
 end
diff --git a/app/serializers/build_serializer.rb b/app/serializers/build_serializer.rb
new file mode 100644
index 00000000000..79b67001199
--- /dev/null
+++ b/app/serializers/build_serializer.rb
@@ -0,0 +1,8 @@
+class BuildSerializer < BaseSerializer
+  entity BuildEntity
+
+  def represent_status(resource)
+    data = represent(resource, { only: [:status] })
+    data.fetch(:status, {})
+  end
+end
diff --git a/app/serializers/commit_entity.rb b/app/serializers/commit_entity.rb
index f7eba6fc1e3..31763955f97 100644
--- a/app/serializers/commit_entity.rb
+++ b/app/serializers/commit_entity.rb
@@ -3,10 +3,21 @@ class CommitEntity < API::Entities::RepoCommit
 
   expose :author, using: UserEntity
 
+  expose :author_gravatar_url do |commit|
+    GravatarService.new.execute(commit.author_email)
+  end
+
   expose :commit_url do |commit|
-    namespace_project_tree_url(
+    namespace_project_commit_url(
+      request.project.namespace,
+      request.project,
+      commit)
+  end
+
+  expose :commit_path do |commit|
+    namespace_project_commit_path(
       request.project.namespace,
       request.project,
-      id: commit.id)
+      commit)
   end
 end
diff --git a/app/serializers/deployment_entity.rb b/app/serializers/deployment_entity.rb
index ad6fc8d665b..d610fbe0c8a 100644
--- a/app/serializers/deployment_entity.rb
+++ b/app/serializers/deployment_entity.rb
@@ -10,8 +10,8 @@ class DeploymentEntity < Grape::Entity
       deployment.ref
     end
 
-    expose :ref_url do |deployment|
-      namespace_project_tree_url(
+    expose :ref_path do |deployment|
+      namespace_project_tree_path(
         deployment.project.namespace,
         deployment.project,
         id: deployment.ref)
diff --git a/app/serializers/entity_date_helper.rb b/app/serializers/entity_date_helper.rb
new file mode 100644
index 00000000000..9607ad55a8b
--- /dev/null
+++ b/app/serializers/entity_date_helper.rb
@@ -0,0 +1,37 @@
+module EntityDateHelper
+  include ActionView::Helpers::DateHelper
+
+  def interval_in_words(diff)
+    return 'Not started' unless diff
+
+    "#{distance_of_time_in_words(Time.now, diff)} ago"
+  end
+
+  # Converts seconds into a hash such as:
+  # { days: 1, hours: 3, mins: 42, seconds: 40 }
+  #
+  # It returns 0 seconds for zero or negative numbers
+  # It rounds to nearest time unit and does not return zero
+  # i.e { min: 1 } instead of { mins: 1, seconds: 0 }
+  def distance_of_time_as_hash(diff)
+    diff = diff.abs.floor
+
+    return { seconds: 0 } if diff == 0
+
+    mins = (diff / 60).floor
+    seconds = diff % 60
+    hours = (mins / 60).floor
+    mins = mins % 60
+    days = (hours / 24).floor
+    hours = hours % 24
+
+    duration_hash = {}
+
+    duration_hash[:days] = days if days > 0
+    duration_hash[:hours] = hours if hours > 0
+    duration_hash[:mins] = mins if mins > 0
+    duration_hash[:seconds] = seconds if seconds > 0
+
+    duration_hash
+  end
+end
diff --git a/app/serializers/environment_entity.rb b/app/serializers/environment_entity.rb
index ee4392cc46d..4ff15a78115 100644
--- a/app/serializers/environment_entity.rb
+++ b/app/serializers/environment_entity.rb
@@ -7,14 +7,36 @@ class EnvironmentEntity < Grape::Entity
   expose :external_url
   expose :environment_type
   expose :last_deployment, using: DeploymentEntity
-  expose :stoppable?
+  expose :stop_action?
 
-  expose :environment_url do |environment|
-    namespace_project_environment_url(
+  expose :metrics_path, if: -> (environment, _) { environment.has_metrics? } do |environment|
+    metrics_namespace_project_environment_path(
       environment.project.namespace,
       environment.project,
       environment)
   end
 
+  expose :environment_path do |environment|
+    namespace_project_environment_path(
+      environment.project.namespace,
+      environment.project,
+      environment)
+  end
+
+  expose :stop_path do |environment|
+    stop_namespace_project_environment_path(
+      environment.project.namespace,
+      environment.project,
+      environment)
+  end
+
+  expose :terminal_path, if: ->(environment, _) { environment.has_terminals? } do |environment|
+    can?(request.user, :admin_environment, environment.project) &&
+      terminal_namespace_project_environment_path(
+        environment.project.namespace,
+        environment.project,
+        environment)
+  end
+
   expose :created_at, :updated_at
 end
diff --git a/app/serializers/environment_serializer.rb b/app/serializers/environment_serializer.rb
index 91955542f25..d0a60f134da 100644
--- a/app/serializers/environment_serializer.rb
+++ b/app/serializers/environment_serializer.rb
@@ -1,3 +1,55 @@
 class EnvironmentSerializer < BaseSerializer
+  Item = Struct.new(:name, :size, :latest)
+
   entity EnvironmentEntity
+
+  def within_folders
+    tap { @itemize = true }
+  end
+
+  def with_pagination(request, response)
+    tap { @paginator = Gitlab::Serializer::Pagination.new(request, response) }
+  end
+
+  def itemized?
+    @itemize
+  end
+
+  def paginated?
+    @paginator.present?
+  end
+
+  def represent(resource, opts = {})
+    if itemized?
+      itemize(resource).map do |item|
+        { name: item.name,
+          size: item.size,
+          latest: super(item.latest, opts) }
+      end
+    else
+      resource = @paginator.paginate(resource) if paginated?
+
+      super(resource, opts)
+    end
+  end
+
+  private
+
+  def itemize(resource)
+    items = resource.order('folder_name ASC')
+      .group('COALESCE(environment_type, name)')
+      .select('COALESCE(environment_type, name) AS folder_name',
+              'COUNT(*) AS size', 'MAX(id) AS last_id')
+
+    # It makes a difference when you call `paginate` method, because
+    # although `page` is effective at the end, it calls counting methods
+    # immediately.
+    items = @paginator.paginate(items) if paginated?
+
+    environments = resource.where(id: items.map(&:last_id)).index_by(&:id)
+
+    items.map do |item|
+      Item.new(item.folder_name, item.size, environments[item.last_id])
+    end
+  end
 end
diff --git a/app/serializers/issuable_entity.rb b/app/serializers/issuable_entity.rb
new file mode 100644
index 00000000000..29aecb50849
--- /dev/null
+++ b/app/serializers/issuable_entity.rb
@@ -0,0 +1,20 @@
+class IssuableEntity < Grape::Entity
+  expose :id
+  expose :iid
+  expose :assignee_id
+  expose :author_id
+  expose :description
+  expose :lock_version
+  expose :milestone_id
+  expose :position
+  expose :state
+  expose :title
+  expose :updated_by_id
+  expose :created_at
+  expose :updated_at
+  expose :deleted_at
+  expose :time_estimate
+  expose :total_time_spent
+  expose :human_time_estimate
+  expose :human_total_time_spent
+end
diff --git a/app/serializers/issue_entity.rb b/app/serializers/issue_entity.rb
new file mode 100644
index 00000000000..6429159ebe1
--- /dev/null
+++ b/app/serializers/issue_entity.rb
@@ -0,0 +1,9 @@
+class IssueEntity < IssuableEntity
+  expose :branch_name
+  expose :confidential
+  expose :due_date
+  expose :moved_to_id
+  expose :project_id
+  expose :milestone, using: API::Entities::Milestone
+  expose :labels, using: LabelEntity
+end
diff --git a/app/serializers/issue_serializer.rb b/app/serializers/issue_serializer.rb
new file mode 100644
index 00000000000..4fff54a9126
--- /dev/null
+++ b/app/serializers/issue_serializer.rb
@@ -0,0 +1,3 @@
+class IssueSerializer < BaseSerializer
+  entity IssueEntity
+end
diff --git a/app/serializers/label_entity.rb b/app/serializers/label_entity.rb
new file mode 100644
index 00000000000..304fd9de08f
--- /dev/null
+++ b/app/serializers/label_entity.rb
@@ -0,0 +1,11 @@
+class LabelEntity < Grape::Entity
+  expose :id
+  expose :title
+  expose :color
+  expose :description
+  expose :group_id
+  expose :project_id
+  expose :template
+  expose :created_at
+  expose :updated_at
+end
diff --git a/app/serializers/merge_request_entity.rb b/app/serializers/merge_request_entity.rb
new file mode 100644
index 00000000000..5f80ab397a9
--- /dev/null
+++ b/app/serializers/merge_request_entity.rb
@@ -0,0 +1,14 @@
+class MergeRequestEntity < IssuableEntity
+  expose :in_progress_merge_commit_sha
+  expose :locked_at
+  expose :merge_commit_sha
+  expose :merge_error
+  expose :merge_params
+  expose :merge_status
+  expose :merge_user_id
+  expose :merge_when_pipeline_succeeds
+  expose :source_branch
+  expose :source_project_id
+  expose :target_branch
+  expose :target_project_id
+end
diff --git a/app/serializers/merge_request_serializer.rb b/app/serializers/merge_request_serializer.rb
new file mode 100644
index 00000000000..aa6e00dfcb4
--- /dev/null
+++ b/app/serializers/merge_request_serializer.rb
@@ -0,0 +1,3 @@
+class MergeRequestSerializer < BaseSerializer
+  entity MergeRequestEntity
+end
diff --git a/app/serializers/pipeline_entity.rb b/app/serializers/pipeline_entity.rb
new file mode 100644
index 00000000000..3f16dd66d54
--- /dev/null
+++ b/app/serializers/pipeline_entity.rb
@@ -0,0 +1,84 @@
+class PipelineEntity < Grape::Entity
+  include RequestAwareEntity
+
+  expose :id
+  expose :user, using: UserEntity
+
+  expose :path do |pipeline|
+    namespace_project_pipeline_path(
+      pipeline.project.namespace,
+      pipeline.project,
+      pipeline)
+  end
+
+  expose :details do
+    expose :detailed_status, as: :status, with: StatusEntity
+    expose :duration
+    expose :finished_at
+    expose :stages, using: StageEntity
+    expose :artifacts, using: BuildArtifactEntity
+    expose :manual_actions, using: BuildActionEntity
+  end
+
+  expose :flags do
+    expose :latest?, as: :latest
+    expose :triggered?, as: :triggered
+    expose :stuck?, as: :stuck
+    expose :has_yaml_errors?, as: :yaml_errors
+    expose :can_retry?, as: :retryable
+    expose :can_cancel?, as: :cancelable
+  end
+
+  expose :ref do
+    expose :name do |pipeline|
+      pipeline.ref
+    end
+
+    expose :path do |pipeline|
+      if pipeline.ref
+        namespace_project_tree_path(
+          pipeline.project.namespace,
+          pipeline.project,
+          id: pipeline.ref)
+      end
+    end
+
+    expose :tag?, as: :tag
+    expose :branch?, as: :branch
+  end
+
+  expose :commit, using: CommitEntity
+  expose :yaml_errors, if: ->(pipeline, _) { pipeline.has_yaml_errors? }
+
+  expose :retry_path, if: proc { can_retry? }  do |pipeline|
+    retry_namespace_project_pipeline_path(pipeline.project.namespace,
+                                          pipeline.project,
+                                          pipeline.id)
+  end
+
+  expose :cancel_path, if: proc { can_cancel? } do |pipeline|
+    cancel_namespace_project_pipeline_path(pipeline.project.namespace,
+                                           pipeline.project,
+                                           pipeline.id)
+  end
+
+  expose :created_at, :updated_at
+
+  private
+
+  alias_method :pipeline, :object
+
+  def can_retry?
+    pipeline.retryable? &&
+      can?(request.user, :update_pipeline, pipeline)
+  end
+
+  def can_cancel?
+    pipeline.cancelable? &&
+      can?(request.user, :update_pipeline, pipeline)
+  end
+
+  def detailed_status
+    pipeline.detailed_status(request.user)
+  end
+end
diff --git a/app/serializers/pipeline_serializer.rb b/app/serializers/pipeline_serializer.rb
new file mode 100644
index 00000000000..7829df9fada
--- /dev/null
+++ b/app/serializers/pipeline_serializer.rb
@@ -0,0 +1,32 @@
+class PipelineSerializer < BaseSerializer
+  InvalidResourceError = Class.new(StandardError)
+
+  entity PipelineEntity
+
+  def with_pagination(request, response)
+    tap { @paginator = Gitlab::Serializer::Pagination.new(request, response) }
+  end
+
+  def paginated?
+    @paginator.present?
+  end
+
+  def represent(resource, opts = {})
+    if resource.is_a?(ActiveRecord::Relation)
+      resource = resource.includes(project: :namespace)
+    end
+
+    if paginated?
+      super(@paginator.paginate(resource), opts)
+    else
+      super(resource, opts)
+    end
+  end
+
+  def represent_status(resource)
+    return {} unless resource.present?
+
+    data = represent(resource, { only: [{ details: [:status] }] })
+    data.dig(:details, :status) || {}
+  end
+end
diff --git a/app/serializers/request_aware_entity.rb b/app/serializers/request_aware_entity.rb
index ff8c1142abc..3039014aaaa 100644
--- a/app/serializers/request_aware_entity.rb
+++ b/app/serializers/request_aware_entity.rb
@@ -2,10 +2,11 @@ module RequestAwareEntity
   extend ActiveSupport::Concern
 
   included do
-    include Gitlab::Routing.url_helpers
+    include Gitlab::Routing
+    include Gitlab::Allowable
   end
 
   def request
-    @options.fetch(:request)
+    options.fetch(:request)
   end
 end
diff --git a/app/serializers/stage_entity.rb b/app/serializers/stage_entity.rb
new file mode 100644
index 00000000000..7a047bdc712
--- /dev/null
+++ b/app/serializers/stage_entity.rb
@@ -0,0 +1,38 @@
+class StageEntity < Grape::Entity
+  include RequestAwareEntity
+
+  expose :name
+
+  expose :title do |stage|
+    "#{stage.name}: #{detailed_status.label}"
+  end
+
+  expose :detailed_status,
+    as: :status,
+    with: StatusEntity
+
+  expose :path do |stage|
+    namespace_project_pipeline_path(
+      stage.pipeline.project.namespace,
+      stage.pipeline.project,
+      stage.pipeline,
+      anchor: stage.name)
+  end
+
+  expose :dropdown_path do |stage|
+    stage_namespace_project_pipeline_path(
+      stage.pipeline.project.namespace,
+      stage.pipeline.project,
+      stage.pipeline,
+      stage: stage.name,
+      format: :json)
+  end
+
+  private
+
+  alias_method :stage, :object
+
+  def detailed_status
+    stage.detailed_status(request.user)
+  end
+end
diff --git a/app/serializers/status_entity.rb b/app/serializers/status_entity.rb
new file mode 100644
index 00000000000..dfd9d1584a1
--- /dev/null
+++ b/app/serializers/status_entity.rb
@@ -0,0 +1,8 @@
+class StatusEntity < Grape::Entity
+  include RequestAwareEntity
+
+  expose :icon, :favicon, :text, :label, :group
+
+  expose :has_details?, as: :has_details
+  expose :details_path
+end
diff --git a/app/services/access_token_validation_service.rb b/app/services/access_token_validation_service.rb
new file mode 100644
index 00000000000..b2a543daa00
--- /dev/null
+++ b/app/services/access_token_validation_service.rb
@@ -0,0 +1,38 @@
+class AccessTokenValidationService
+  # Results:
+  VALID = :valid
+  EXPIRED = :expired
+  REVOKED = :revoked
+  INSUFFICIENT_SCOPE = :insufficient_scope
+
+  attr_reader :token
+
+  def initialize(token)
+    @token = token
+  end
+
+  def validate(scopes: [])
+    if token.expired?
+      return EXPIRED
+
+    elsif token.revoked?
+      return REVOKED
+
+    elsif !self.include_any_scope?(scopes)
+      return INSUFFICIENT_SCOPE
+
+    else
+      return VALID
+    end
+  end
+
+  # True if the token's scope contains any of the passed scopes.
+  def include_any_scope?(scopes)
+    if scopes.blank?
+      true
+    else
+      # Check whether the token is allowed access to any of the required scopes.
+      Set.new(scopes).intersection(Set.new(token.scopes)).present?
+    end
+  end
+end
diff --git a/app/services/after_branch_delete_service.rb b/app/services/after_branch_delete_service.rb
new file mode 100644
index 00000000000..227e9ea9c6d
--- /dev/null
+++ b/app/services/after_branch_delete_service.rb
@@ -0,0 +1,21 @@
+##
+# Branch can be deleted either by DeleteBranchService
+# or by GitPushService.
+#
+class AfterBranchDeleteService < BaseService
+  attr_reader :branch_name
+
+  def execute(branch_name)
+    @branch_name = branch_name
+
+    stop_environments
+  end
+
+  private
+
+  def stop_environments
+    Ci::StopEnvironmentsService
+      .new(project, current_user)
+      .execute(branch_name)
+  end
+end
diff --git a/app/services/application_settings/base_service.rb b/app/services/application_settings/base_service.rb
new file mode 100644
index 00000000000..2bcc7d7c08b
--- /dev/null
+++ b/app/services/application_settings/base_service.rb
@@ -0,0 +1,7 @@
+module ApplicationSettings
+  class BaseService < ::BaseService
+    def initialize(application_setting, user, params = {})
+      @application_setting, @current_user, @params = application_setting, user, params.dup
+    end
+  end
+end
diff --git a/app/services/application_settings/update_service.rb b/app/services/application_settings/update_service.rb
new file mode 100644
index 00000000000..61589a07250
--- /dev/null
+++ b/app/services/application_settings/update_service.rb
@@ -0,0 +1,7 @@
+module ApplicationSettings
+  class UpdateService < ApplicationSettings::BaseService
+    def execute
+      @application_setting.update(@params)
+    end
+  end
+end
diff --git a/app/services/auth/container_registry_authentication_service.rb b/app/services/auth/container_registry_authentication_service.rb
index 8ea88da8a53..db82b8f6c30 100644
--- a/app/services/auth/container_registry_authentication_service.rb
+++ b/app/services/auth/container_registry_authentication_service.rb
@@ -2,15 +2,15 @@ module Auth
   class ContainerRegistryAuthenticationService < BaseService
     include Gitlab::CurrentSettings
 
-    AUDIENCE = 'container_registry'
+    AUDIENCE = 'container_registry'.freeze
 
     def execute(authentication_abilities:)
       @authentication_abilities = authentication_abilities
 
       return error('UNAVAILABLE', status: 404, message: 'registry not enabled') unless registry.enabled
 
-      unless current_user || project
-        return error('DENIED', status: 403, message: 'access forbidden') unless scope
+      unless scope || current_user || project
+        return error('DENIED', status: 403, message: 'access forbidden')
       end
 
       { token: authorized_token(scope).encoded }
@@ -61,7 +61,7 @@ module Auth
     end
 
     def process_repository_access(type, name, actions)
-      requested_project = Project.find_with_namespace(name)
+      requested_project = Project.find_by_full_path(name)
       return unless requested_project
 
       actions = actions.select do |action|
@@ -76,7 +76,7 @@ module Auth
 
       case requested_action
       when 'pull'
-        requested_project.public? || build_can_pull?(requested_project) || user_can_pull?(requested_project)
+        build_can_pull?(requested_project) || user_can_pull?(requested_project)
       when 'push'
         build_can_push?(requested_project) || user_can_push?(requested_project)
       else
@@ -92,23 +92,23 @@ module Auth
       # Build can:
       # 1. pull from its own project (for ex. a build)
       # 2. read images from dependent projects if creator of build is a team member
-      @authentication_abilities.include?(:build_read_container_image) &&
+      has_authentication_ability?(:build_read_container_image) &&
         (requested_project == project || can?(current_user, :build_read_container_image, requested_project))
     end
 
     def user_can_pull?(requested_project)
-      @authentication_abilities.include?(:read_container_image) &&
+      has_authentication_ability?(:read_container_image) &&
         can?(current_user, :read_container_image, requested_project)
     end
 
     def build_can_push?(requested_project)
       # Build can push only to the project from which it originates
-      @authentication_abilities.include?(:build_create_container_image) &&
+      has_authentication_ability?(:build_create_container_image) &&
         requested_project == project
     end
 
     def user_can_push?(requested_project)
-      @authentication_abilities.include?(:create_container_image) &&
+      has_authentication_ability?(:create_container_image) &&
         can?(current_user, :create_container_image, requested_project)
     end
 
@@ -118,5 +118,9 @@ module Auth
         http_status: status
       }
     end
+
+    def has_authentication_ability?(capability)
+      (@authentication_abilities || []).include?(capability)
+    end
   end
 end
diff --git a/app/services/base_service.rb b/app/services/base_service.rb
index 1a2bad77a02..745c2c4b681 100644
--- a/app/services/base_service.rb
+++ b/app/services/base_service.rb
@@ -1,4 +1,5 @@
 class BaseService
+  include Gitlab::Allowable
   include Gitlab::CurrentSettings
 
   attr_accessor :project, :current_user, :params
@@ -7,10 +8,6 @@ class BaseService
     @project, @current_user, @params = project, user, params.dup
   end
 
-  def can?(object, action, subject)
-    Ability.allowed?(object, action, subject)
-  end
-
   def notification_service
     NotificationService.new
   end
@@ -31,9 +28,7 @@ class BaseService
     SystemHooksService.new
   end
 
-  def repository
-    project.repository
-  end
+  delegate :repository, to: :project
 
   # Add an error to the specified model for restricted visibility levels
   def deny_visibility_level(model, denied_visibility_level = nil)
diff --git a/app/services/boards/create_service.rb b/app/services/boards/create_service.rb
index 9bdd7b6f0cf..fd9ff115eab 100644
--- a/app/services/boards/create_service.rb
+++ b/app/services/boards/create_service.rb
@@ -12,8 +12,7 @@ module Boards
 
     def create_board!
       board = project.boards.create
-      board.lists.create(list_type: :backlog)
-      board.lists.create(list_type: :done)
+      board.lists.create(list_type: :closed)
 
       board
     end
diff --git a/app/services/boards/issues/list_service.rb b/app/services/boards/issues/list_service.rb
index fd4a462c7b2..533e6787855 100644
--- a/app/services/boards/issues/list_service.rb
+++ b/app/services/boards/issues/list_service.rb
@@ -3,9 +3,9 @@ module Boards
     class ListService < BaseService
       def execute
         issues = IssuesFinder.new(current_user, filter_params).execute
-        issues = without_board_labels(issues) unless list.movable?
-        issues = with_list_label(issues) if list.movable?
-        issues
+        issues = without_board_labels(issues) unless list
+        issues = with_list_label(issues) if movable_list?
+        issues.order_by_position_and_priority
       end
 
       private
@@ -15,12 +15,17 @@ module Boards
       end
 
       def list
-        @list ||= board.lists.find(params[:id])
+        return @list if defined?(@list)
+
+        @list = board.lists.find(params[:id]) if params.key?(:id)
+      end
+
+      def movable_list?
+        @movable_list ||= list.present? && list.movable?
       end
 
       def filter_params
         set_default_scope
-        set_default_sort
         set_project
         set_state
 
@@ -31,16 +36,12 @@ module Boards
         params[:scope] = 'all'
       end
 
-      def set_default_sort
-        params[:sort] = 'priority'
-      end
-
       def set_project
         params[:project_id] = project.id
       end
 
       def set_state
-        params[:state] = list.done? ? 'closed' : 'opened'
+        params[:state] = list && list.closed? ? 'closed' : 'opened'
       end
 
       def board_label_ids
diff --git a/app/services/boards/issues/move_service.rb b/app/services/boards/issues/move_service.rb
index 96554a92a02..d5735f13c1e 100644
--- a/app/services/boards/issues/move_service.rb
+++ b/app/services/boards/issues/move_service.rb
@@ -3,7 +3,7 @@ module Boards
     class MoveService < BaseService
       def execute(issue)
         return false unless can?(current_user, :update_issue, issue)
-        return false unless valid_move?
+        return false if issue_params.empty?
 
         update_service.execute(issue)
       end
@@ -14,7 +14,7 @@ module Boards
         @board ||= project.boards.find(params[:board_id])
       end
 
-      def valid_move?
+      def move_between_lists?
         moving_from_list.present? && moving_to_list.present? &&
           moving_from_list != moving_to_list
       end
@@ -32,16 +32,24 @@ module Boards
       end
 
       def issue_params
-        {
-          add_label_ids: add_label_ids,
-          remove_label_ids: remove_label_ids,
-          state_event: issue_state
-        }
+        attrs = {}
+
+        if move_between_lists?
+          attrs.merge!(
+            add_label_ids: add_label_ids,
+            remove_label_ids: remove_label_ids,
+            state_event: issue_state,
+          )
+        end
+
+        attrs[:move_between_iids] = move_between_iids if move_between_iids
+
+        attrs
       end
 
       def issue_state
-        return 'reopen' if moving_from_list.done?
-        return 'close'  if moving_to_list.done?
+        return 'reopen' if moving_from_list.closed?
+        return 'close'  if moving_to_list.closed?
       end
 
       def add_label_ids
@@ -58,6 +66,12 @@ module Boards
 
         Array(label_ids).compact
       end
+
+      def move_between_iids
+        return unless params[:move_after_iid] || params[:move_before_iid]
+
+        [params[:move_after_iid], params[:move_before_iid]]
+      end
     end
   end
 end
diff --git a/app/services/chat_names/authorize_user_service.rb b/app/services/chat_names/authorize_user_service.rb
new file mode 100644
index 00000000000..321bf3a9205
--- /dev/null
+++ b/app/services/chat_names/authorize_user_service.rb
@@ -0,0 +1,38 @@
+module ChatNames
+  class AuthorizeUserService
+    include Gitlab::Routing.url_helpers
+
+    def initialize(service, params)
+      @service = service
+      @params = params
+    end
+
+    def execute
+      return unless chat_name_params.values.all?(&:present?)
+
+      token = request_token
+
+      new_profile_chat_name_url(token: token) if token
+    end
+
+    private
+
+    def request_token
+      chat_name_token.store!(chat_name_params)
+    end
+
+    def chat_name_token
+      Gitlab::ChatNameToken.new
+    end
+
+    def chat_name_params
+      {
+        service_id: @service.id,
+        team_id: @params[:team_id],
+        team_domain: @params[:team_domain],
+        chat_id: @params[:user_id],
+        chat_name: @params[:user_name]
+      }
+    end
+  end
+end
diff --git a/app/services/chat_names/find_user_service.rb b/app/services/chat_names/find_user_service.rb
new file mode 100644
index 00000000000..4f5c5567b42
--- /dev/null
+++ b/app/services/chat_names/find_user_service.rb
@@ -0,0 +1,26 @@
+module ChatNames
+  class FindUserService
+    def initialize(service, params)
+      @service = service
+      @params = params
+    end
+
+    def execute
+      chat_name = find_chat_name
+      return unless chat_name
+
+      chat_name.touch(:last_used_at)
+      chat_name.user
+    end
+
+    private
+
+    def find_chat_name
+      ChatName.find_by(
+        service: @service,
+        team_id: @params[:team_id],
+        chat_id: @params[:user_id]
+      )
+    end
+  end
+end
diff --git a/app/services/ci/create_pipeline_builds_service.rb b/app/services/ci/create_pipeline_builds_service.rb
index 005014fa1de..70fb2c5e38f 100644
--- a/app/services/ci/create_pipeline_builds_service.rb
+++ b/app/services/ci/create_pipeline_builds_service.rb
@@ -10,18 +10,27 @@ module Ci
       end
     end
 
+    delegate :project, to: :pipeline
+
     private
 
     def create_build(build_attributes)
       build_attributes = build_attributes.merge(
         pipeline: pipeline,
-        project: pipeline.project,
+        project: project,
         ref: pipeline.ref,
         tag: pipeline.tag,
         user: current_user,
         trigger_request: trigger_request
       )
-      pipeline.builds.create(build_attributes)
+      build = pipeline.builds.create(build_attributes)
+
+      # Create the environment before the build starts. This sets its slug and
+      # makes it available as an environment variable
+      project.environments.find_or_create_by(name: build.expanded_environment_name) if
+        build.has_environment?
+
+      build
     end
 
     def new_builds
diff --git a/app/services/ci/create_pipeline_service.rb b/app/services/ci/create_pipeline_service.rb
index cde856b0186..38a85e9fc42 100644
--- a/app/services/ci/create_pipeline_service.rb
+++ b/app/services/ci/create_pipeline_service.rb
@@ -45,15 +45,22 @@ module Ci
         return error('No builds for this pipeline.')
       end
 
-      pipeline.save
-      pipeline.process!
-      pipeline
+      Ci::Pipeline.transaction do
+        pipeline.save
+
+        Ci::CreatePipelineBuildsService
+          .new(project, current_user)
+          .execute(pipeline)
+      end
+
+      pipeline.tap(&:process!)
     end
 
     private
 
     def skip_ci?
-      pipeline.git_commit_message =~ /\[(ci skip|skip ci)\]/i if pipeline.git_commit_message
+      return false unless pipeline.git_commit_message
+      pipeline.git_commit_message =~ /\[(ci[ _-]skip|skip[ _-]ci)\]/i
     end
 
     def commit
diff --git a/app/services/ci/create_trigger_request_service.rb b/app/services/ci/create_trigger_request_service.rb
index 6af3c1ca5b1..dca5aa9f5d7 100644
--- a/app/services/ci/create_trigger_request_service.rb
+++ b/app/services/ci/create_trigger_request_service.rb
@@ -3,7 +3,7 @@ module Ci
     def execute(project, trigger, ref, variables = nil)
       trigger_request = trigger.trigger_requests.create(variables: variables)
 
-      pipeline = Ci::CreatePipelineService.new(project, nil, ref: ref).
+      pipeline = Ci::CreatePipelineService.new(project, trigger.owner, ref: ref).
         execute(ignore_skip_ci: true, trigger_request: trigger_request)
       if pipeline.persisted?
         trigger_request
diff --git a/app/services/ci/image_for_build_service.rb b/app/services/ci/image_for_build_service.rb
deleted file mode 100644
index 75d847d5bee..00000000000
--- a/app/services/ci/image_for_build_service.rb
+++ /dev/null
@@ -1,25 +0,0 @@
-module Ci
-  class ImageForBuildService
-    def execute(project, opts)
-      sha = opts[:sha] || ref_sha(project, opts[:ref])
-
-      pipelines = project.pipelines.where(sha: sha)
-      pipelines = pipelines.where(ref: opts[:ref]) if opts[:ref]
-      image_name = image_for_status(pipelines.status)
-
-      image_path = Rails.root.join('public/ci', image_name)
-      OpenStruct.new(path: image_path, name: image_name)
-    end
-
-    private
-
-    def ref_sha(project, ref)
-      project.commit(ref).try(:sha) if ref
-    end
-
-    def image_for_status(status)
-      status ||= 'unknown'
-      'build-' + status + ".svg"
-    end
-  end
-end
diff --git a/app/services/ci/process_pipeline_service.rb b/app/services/ci/process_pipeline_service.rb
index 8face432d97..2935d00c075 100644
--- a/app/services/ci/process_pipeline_service.rb
+++ b/app/services/ci/process_pipeline_service.rb
@@ -5,10 +5,7 @@ module Ci
     def execute(pipeline)
       @pipeline = pipeline
 
-      # This method will ensure that our pipeline does have all builds for all stages created
-      if created_builds.empty?
-        create_builds!
-      end
+      ensure_created_builds! # TODO, remove me in 9.0
 
       new_builds =
         stage_indexes_of_created_builds.map do |index|
@@ -22,13 +19,11 @@ module Ci
 
     private
 
-    def create_builds!
-      Ci::CreatePipelineBuildsService.new(project, current_user).execute(pipeline)
-    end
-
     def process_stage(index)
       current_status = status_for_prior_stages(index)
 
+      return if HasStatus::BLOCKED_STATUS == current_status
+
       if HasStatus::COMPLETED_STATUSES.include?(current_status)
         created_builds_in_stage(index).select do |build|
           Gitlab::OptimisticLocking.retry_lock(build) do |subject|
@@ -40,7 +35,7 @@ module Ci
 
     def process_build(build, current_status)
       if valid_statuses_for_when(build.when).include?(current_status)
-        build.enqueue
+        build.action? ? build.actionize : build.enqueue
         true
       else
         build.skip
@@ -51,11 +46,13 @@ module Ci
     def valid_statuses_for_when(value)
       case value
       when 'on_success'
-        %w[success]
+        %w[success skipped]
       when 'on_failure'
         %w[failed]
       when 'always'
-        %w[success failed]
+        %w[success failed skipped]
+      when 'manual'
+        %w[success]
       else
         []
       end
@@ -76,5 +73,18 @@ module Ci
     def created_builds
       pipeline.builds.created
     end
+
+    # This method is DEPRECATED and should be removed in 9.0.
+    #
+    # We need it to maintain backwards compatibility with  previous versions
+    # when builds were not created within one transaction with the pipeline.
+    #
+    def ensure_created_builds!
+      return if created_builds.any?
+
+      Ci::CreatePipelineBuildsService
+        .new(project, current_user)
+        .execute(pipeline)
+    end
   end
 end
diff --git a/app/services/ci/register_build_service.rb b/app/services/ci/register_build_service.rb
deleted file mode 100644
index 74b5ebf372b..00000000000
--- a/app/services/ci/register_build_service.rb
+++ /dev/null
@@ -1,49 +0,0 @@
-module Ci
-  # This class responsible for assigning
-  # proper pending build to runner on runner API request
-  class RegisterBuildService
-    def execute(current_runner)
-      builds = Ci::Build.pending.unstarted
-
-      builds =
-        if current_runner.shared?
-          builds.
-            # don't run projects which have not enabled shared runners and builds
-            joins(:project).where(projects: { shared_runners_enabled: true }).
-            joins('LEFT JOIN project_features ON ci_builds.gl_project_id = project_features.project_id').
-
-            # this returns builds that are ordered by number of running builds
-            # we prefer projects that don't use shared runners at all
-            joins("LEFT JOIN (#{running_builds_for_shared_runners.to_sql}) AS project_builds ON ci_builds.gl_project_id=project_builds.gl_project_id").
-            where('project_features.builds_access_level IS NULL or project_features.builds_access_level > 0').
-            order('COALESCE(project_builds.running_builds, 0) ASC', 'ci_builds.id ASC')
-        else
-          # do run projects which are only assigned to this runner (FIFO)
-          builds.where(project: current_runner.projects.with_builds_enabled).order('created_at ASC')
-        end
-
-      build = builds.find do |build|
-        current_runner.can_pick?(build)
-      end
-
-      if build
-        # In case when 2 runners try to assign the same build, second runner will be declined
-        # with StateMachines::InvalidTransition or StaleObjectError when doing run! or save method.
-        build.runner_id = current_runner.id
-        build.run!
-      end
-
-      build
-
-    rescue StateMachines::InvalidTransition, ActiveRecord::StaleObjectError
-      nil
-    end
-
-    private
-
-    def running_builds_for_shared_runners
-      Ci::Build.running.where(runner: Ci::Runner.shared).
-        group(:gl_project_id).select(:gl_project_id, 'count(*) AS running_builds')
-    end
-  end
-end
diff --git a/app/services/ci/register_job_service.rb b/app/services/ci/register_job_service.rb
new file mode 100644
index 00000000000..d6a4280ce4c
--- /dev/null
+++ b/app/services/ci/register_job_service.rb
@@ -0,0 +1,85 @@
+module Ci
+  # This class responsible for assigning
+  # proper pending build to runner on runner API request
+  class RegisterJobService
+    include Gitlab::CurrentSettings
+
+    attr_reader :runner
+
+    Result = Struct.new(:build, :valid?)
+
+    def initialize(runner)
+      @runner = runner
+    end
+
+    def execute
+      builds =
+        if runner.shared?
+          builds_for_shared_runner
+        else
+          builds_for_specific_runner
+        end
+
+      valid = true
+
+      builds.find do |build|
+        next unless runner.can_pick?(build)
+
+        begin
+          # In case when 2 runners try to assign the same build, second runner will be declined
+          # with StateMachines::InvalidTransition or StaleObjectError when doing run! or save method.
+          build.runner_id = runner.id
+          build.run!
+
+          return Result.new(build, true)
+        rescue StateMachines::InvalidTransition, ActiveRecord::StaleObjectError
+          # We are looping to find another build that is not conflicting
+          # It also indicates that this build can be picked and passed to runner.
+          # If we don't do it, basically a bunch of runners would be competing for a build
+          # and thus we will generate a lot of 409. This will increase
+          # the number of generated requests, also will reduce significantly
+          # how many builds can be picked by runner in a unit of time.
+          # In case we hit the concurrency-access lock,
+          # we still have to return 409 in the end,
+          # to make sure that this is properly handled by runner.
+          valid = false
+        end
+      end
+
+      Result.new(nil, valid)
+    end
+
+    private
+
+    def builds_for_shared_runner
+      new_builds.
+        # don't run projects which have not enabled shared runners and builds
+        joins(:project).where(projects: { shared_runners_enabled: true }).
+        joins('LEFT JOIN project_features ON ci_builds.project_id = project_features.project_id').
+        where('project_features.builds_access_level IS NULL or project_features.builds_access_level > 0').
+
+        # Implement fair scheduling
+        # this returns builds that are ordered by number of running builds
+        # we prefer projects that don't use shared runners at all
+        joins("LEFT JOIN (#{running_builds_for_shared_runners.to_sql}) AS project_builds ON ci_builds.project_id=project_builds.project_id").
+        order('COALESCE(project_builds.running_builds, 0) ASC', 'ci_builds.id ASC')
+    end
+
+    def builds_for_specific_runner
+      new_builds.where(project: runner.projects.with_builds_enabled).order('created_at ASC')
+    end
+
+    def running_builds_for_shared_runners
+      Ci::Build.running.where(runner: Ci::Runner.shared).
+        group(:project_id).select(:project_id, 'count(*) AS running_builds')
+    end
+
+    def new_builds
+      Ci::Build.pending.unstarted
+    end
+
+    def shared_runner_build_limits_feature_enabled?
+      ENV['DISABLE_SHARED_RUNNER_BUILD_MINUTES_LIMIT'].to_s != 'true'
+    end
+  end
+end
diff --git a/app/services/ci/retry_build_service.rb b/app/services/ci/retry_build_service.rb
new file mode 100644
index 00000000000..89da05b72bb
--- /dev/null
+++ b/app/services/ci/retry_build_service.rb
@@ -0,0 +1,34 @@
+module Ci
+  class RetryBuildService < ::BaseService
+    CLONE_ACCESSORS = %i[pipeline project ref tag options commands name
+                         allow_failure stage stage_idx trigger_request
+                         yaml_variables when environment coverage_regex
+                         description tag_list].freeze
+
+    def execute(build)
+      reprocess(build).tap do |new_build|
+        build.pipeline.mark_as_processable_after_stage(build.stage_idx)
+
+        new_build.enqueue!
+
+        MergeRequests::AddTodoWhenBuildFailsService
+          .new(project, current_user)
+          .close(new_build)
+      end
+    end
+
+    def reprocess(build)
+      unless can?(current_user, :update_build, build)
+        raise Gitlab::Access::AccessDeniedError
+      end
+
+      attributes = CLONE_ACCESSORS.map do |attribute|
+        [attribute, build.send(attribute)]
+      end
+
+      attributes.push([:user, current_user])
+
+      project.builds.create(Hash[attributes])
+    end
+  end
+end
diff --git a/app/services/ci/retry_pipeline_service.rb b/app/services/ci/retry_pipeline_service.rb
new file mode 100644
index 00000000000..f72ddbf690c
--- /dev/null
+++ b/app/services/ci/retry_pipeline_service.rb
@@ -0,0 +1,28 @@
+module Ci
+  class RetryPipelineService < ::BaseService
+    include Gitlab::OptimisticLocking
+
+    def execute(pipeline)
+      unless can?(current_user, :update_pipeline, pipeline)
+        raise Gitlab::Access::AccessDeniedError
+      end
+
+      pipeline.builds.latest.failed_or_canceled.find_each do |build|
+        next unless build.retryable?
+
+        Ci::RetryBuildService.new(project, current_user)
+          .reprocess(build)
+      end
+
+      pipeline.builds.latest.skipped.find_each do |skipped|
+        retry_optimistic_lock(skipped) { |build| build.process }
+      end
+
+      MergeRequests::AddTodoWhenBuildFailsService
+        .new(project, current_user)
+        .close_all(pipeline)
+
+      pipeline.process!
+    end
+  end
+end
diff --git a/app/services/ci/send_pipeline_notification_service.rb b/app/services/ci/send_pipeline_notification_service.rb
deleted file mode 100644
index ceb182801f7..00000000000
--- a/app/services/ci/send_pipeline_notification_service.rb
+++ /dev/null
@@ -1,19 +0,0 @@
-module Ci
-  class SendPipelineNotificationService
-    attr_reader :pipeline
-
-    def initialize(new_pipeline)
-      @pipeline = new_pipeline
-    end
-
-    def execute(recipients)
-      email_template = "pipeline_#{pipeline.status}_email"
-
-      return unless Notify.respond_to?(email_template)
-
-      recipients.each do |to|
-        Notify.public_send(email_template, pipeline, to).deliver_later
-      end
-    end
-  end
-end
diff --git a/app/services/ci/stop_environments_service.rb b/app/services/ci/stop_environments_service.rb
new file mode 100644
index 00000000000..42c72aba7dd
--- /dev/null
+++ b/app/services/ci/stop_environments_service.rb
@@ -0,0 +1,28 @@
+module Ci
+  class StopEnvironmentsService < BaseService
+    attr_reader :ref
+
+    def execute(branch_name)
+      @ref = branch_name
+
+      return unless has_ref?
+
+      environments.each do |environment|
+        next unless can?(current_user, :create_deployment, project)
+
+        environment.stop_with_action!(current_user)
+      end
+    end
+
+    private
+
+    def has_ref?
+      @ref.present?
+    end
+
+    def environments
+      @environments ||=
+        EnvironmentsFinder.new(project, current_user, ref: @ref, recently_updated: true).execute
+    end
+  end
+end
diff --git a/app/services/ci/update_build_queue_service.rb b/app/services/ci/update_build_queue_service.rb
new file mode 100644
index 00000000000..152c8ae5006
--- /dev/null
+++ b/app/services/ci/update_build_queue_service.rb
@@ -0,0 +1,19 @@
+module Ci
+  class UpdateBuildQueueService
+    def execute(build)
+      build.project.runners.each do |runner|
+        if runner.can_pick?(build)
+          runner.tick_runner_queue
+        end
+      end
+
+      return unless build.project.shared_runners_enabled?
+
+      Ci::Runner.shared.each do |runner|
+        if runner.can_pick?(build)
+          runner.tick_runner_queue
+        end
+      end
+    end
+  end
+end
diff --git a/app/services/ci/update_runner_service.rb b/app/services/ci/update_runner_service.rb
new file mode 100644
index 00000000000..450ee7da1c9
--- /dev/null
+++ b/app/services/ci/update_runner_service.rb
@@ -0,0 +1,15 @@
+module Ci
+  class UpdateRunnerService
+    attr_reader :runner
+
+    def initialize(runner)
+      @runner = runner
+    end
+
+    def update(params)
+      runner.update(params).tap do |updated|
+        runner.tick_runner_queue if updated
+      end
+    end
+  end
+end
diff --git a/app/services/commits/change_service.rb b/app/services/commits/change_service.rb
index 1c82599c579..1297a792259 100644
--- a/app/services/commits/change_service.rb
+++ b/app/services/commits/change_service.rb
@@ -1,15 +1,16 @@
 module Commits
   class ChangeService < ::BaseService
-    class ValidationError < StandardError; end
-    class ChangeError < StandardError; end
+    ValidationError = Class.new(StandardError)
+    ChangeError = Class.new(StandardError)
 
     def execute
-      @source_project = params[:source_project] || @project
+      @start_project = params[:start_project] || @project
+      @start_branch = params[:start_branch]
       @target_branch = params[:target_branch]
       @commit = params[:commit]
-      @create_merge_request = params[:create_merge_request].present?
 
-      check_push_permissions unless @create_merge_request
+      check_push_permissions
+
       commit
     rescue Repository::CommitError, Gitlab::Git::Repository::InvalidBlobName, GitHooksService::PreReceiveError,
            ValidationError, ChangeError => ex
@@ -25,19 +26,21 @@ module Commits
     def commit_change(action)
       raise NotImplementedError unless repository.respond_to?(action)
 
-      into = @create_merge_request ? @commit.public_send("#{action}_branch_name") : @target_branch
-      tree_id = repository.public_send("check_#{action}_content", @commit, @target_branch)
+      validate_target_branch if different_branch?
 
-      if tree_id
-        create_target_branch(into) if @create_merge_request
+      repository.public_send(
+        action,
+        current_user,
+        @commit,
+        @target_branch,
+        start_project: @start_project,
+        start_branch_name: @start_branch)
 
-        repository.public_send(action, current_user, @commit, into, tree_id)
-        success
-      else
-        error_msg = "Sorry, we cannot #{action.to_s.dasherize} this #{@commit.change_type_title} automatically.
-                     It may have already been #{action.to_s.dasherize}, or a more recent commit may have updated some of its content."
-        raise ChangeError, error_msg
-      end
+      success
+    rescue Repository::CreateTreeError
+      error_msg = "Sorry, we cannot #{action.to_s.dasherize} this #{@commit.change_type_title(current_user)} automatically.
+                     A #{action.to_s.dasherize} may have already been performed with this #{@commit.change_type_title(current_user)}, or a more recent commit may have updated some of its content."
+      raise ChangeError, error_msg
     end
 
     def check_push_permissions
@@ -50,16 +53,17 @@ module Commits
       true
     end
 
-    def create_target_branch(new_branch)
-      # Temporary branch exists and contains the change commit
-      return success if repository.find_branch(new_branch)
-
-      result = CreateBranchService.new(@project, current_user)
-                                  .execute(new_branch, @target_branch, source_project: @source_project)
+    def validate_target_branch
+      result = ValidateNewBranchService.new(@project, current_user)
+        .execute(@target_branch)
 
       if result[:status] == :error
         raise ChangeError, "There was an error creating the source branch: #{result[:message]}"
       end
     end
+
+    def different_branch?
+      @start_branch != @target_branch || @start_project != @project
+    end
   end
 end
diff --git a/app/services/compare_service.rb b/app/services/compare_service.rb
index 5e8fafca98c..ab4c02a97a0 100644
--- a/app/services/compare_service.rb
+++ b/app/services/compare_service.rb
@@ -3,23 +3,27 @@ require 'securerandom'
 # Compare 2 branches for one repo or between repositories
 # and return Gitlab::Git::Compare object that responds to commits and diffs
 class CompareService
-  def execute(source_project, source_branch, target_project, target_branch, straight: false)
-    source_commit = source_project.commit(source_branch)
-    return unless source_commit
+  attr_reader :start_project, :start_branch_name
 
-    source_sha = source_commit.sha
+  def initialize(new_start_project, new_start_branch_name)
+    @start_project = new_start_project
+    @start_branch_name = new_start_branch_name
+  end
 
+  def execute(target_project, target_branch, straight: false)
     # If compare with other project we need to fetch ref first
-    unless target_project == source_project
-      random_string = SecureRandom.hex
+    target_project.repository.with_repo_branch_commit(
+      start_project.repository,
+      start_branch_name) do |commit|
+      break unless commit
 
-      target_project.repository.fetch_ref(
-        source_project.repository.path_to_repo,
-        "refs/heads/#{source_branch}",
-        "refs/tmp/#{random_string}/head"
-      )
+      compare(commit.sha, target_project, target_branch, straight)
     end
+  end
+
+  private
 
+  def compare(source_sha, target_project, target_branch, straight)
     raw_compare = Gitlab::Git::Compare.new(
       target_project.repository.raw_repository,
       target_branch,
diff --git a/app/services/concerns/issues/resolve_discussions.rb b/app/services/concerns/issues/resolve_discussions.rb
new file mode 100644
index 00000000000..297c7d696c3
--- /dev/null
+++ b/app/services/concerns/issues/resolve_discussions.rb
@@ -0,0 +1,32 @@
+module Issues
+  module ResolveDiscussions
+    attr_reader :merge_request_to_resolve_discussions_of_iid, :discussion_to_resolve_id
+
+    def filter_resolve_discussion_params
+      @merge_request_to_resolve_discussions_of_iid ||= params.delete(:merge_request_to_resolve_discussions_of)
+      @discussion_to_resolve_id ||= params.delete(:discussion_to_resolve)
+    end
+
+    def merge_request_to_resolve_discussions_of
+      return @merge_request_to_resolve_discussions_of if defined?(@merge_request_to_resolve_discussions_of)
+
+      @merge_request_to_resolve_discussions_of = MergeRequestsFinder.new(current_user, project_id: project.id).
+                                                     execute.
+                                                     find_by(iid: merge_request_to_resolve_discussions_of_iid)
+    end
+
+    def discussions_to_resolve
+      return [] unless merge_request_to_resolve_discussions_of
+
+      @discussions_to_resolve ||=
+        if discussion_to_resolve_id
+          discussion_or_nil = merge_request_to_resolve_discussions_of
+                                .find_diff_discussion(discussion_to_resolve_id)
+          Array(discussion_or_nil)
+        else
+          merge_request_to_resolve_discussions_of
+            .resolvable_discussions
+        end
+    end
+  end
+end
diff --git a/app/services/create_branch_service.rb b/app/services/create_branch_service.rb
index 757fc35a78f..673ed02f952 100644
--- a/app/services/create_branch_service.rb
+++ b/app/services/create_branch_service.rb
@@ -1,33 +1,13 @@
-require_relative 'base_service'
-
 class CreateBranchService < BaseService
-  def execute(branch_name, ref, source_project: @project)
-    valid_branch = Gitlab::GitRefValidator.validate(branch_name)
-
-    unless valid_branch
-      return error('Branch name is invalid')
-    end
+  def execute(branch_name, ref)
+    create_master_branch if project.empty_repo?
 
-    repository = project.repository
-    existing_branch = repository.find_branch(branch_name)
-
-    if existing_branch
-      return error('Branch already exists')
-    end
+    result = ValidateNewBranchService.new(project, current_user)
+      .execute(branch_name)
 
-    new_branch = if source_project != @project
-                   repository.fetch_ref(
-                     source_project.repository.path_to_repo,
-                     "refs/heads/#{ref}",
-                     "refs/heads/#{branch_name}"
-                   )
+    return result if result[:status] == :error
 
-                   repository.after_create_branch
-
-                   repository.find_branch(branch_name)
-                 else
-                   repository.add_branch(current_user, branch_name, ref)
-                 end
+    new_branch = repository.add_branch(current_user, branch_name, ref)
 
     if new_branch
       success(new_branch)
@@ -41,4 +21,16 @@ class CreateBranchService < BaseService
   def success(branch)
     super().merge(branch: branch)
   end
+
+  private
+
+  def create_master_branch
+    project.repository.create_file(
+      current_user,
+      '/README.md',
+      '',
+      message: 'Add README.md',
+      branch_name: 'master'
+    )
+  end
 end
diff --git a/app/services/create_deployment_service.rb b/app/services/create_deployment_service.rb
index 8ae15ad32f4..47f9b2c621c 100644
--- a/app/services/create_deployment_service.rb
+++ b/app/services/create_deployment_service.rb
@@ -1,5 +1,3 @@
-require_relative 'base_service'
-
 class CreateDeploymentService < BaseService
   def execute(deployable = nil)
     return unless executable?
diff --git a/app/services/create_release_service.rb b/app/services/create_release_service.rb
index d6d4afcf29a..54ff1f74126 100644
--- a/app/services/create_release_service.rb
+++ b/app/services/create_release_service.rb
@@ -1,5 +1,3 @@
-require_relative 'base_service'
-
 class CreateReleaseService < BaseService
   def execute(tag_name, release_description)
     repository = project.repository
diff --git a/app/services/create_snippet_service.rb b/app/services/create_snippet_service.rb
index 95cc9baf406..40286dbf3bf 100644
--- a/app/services/create_snippet_service.rb
+++ b/app/services/create_snippet_service.rb
@@ -1,5 +1,9 @@
 class CreateSnippetService < BaseService
+  include SpamCheckService
+
   def execute
+    filter_spam_check_params
+
     snippet = if project
                 project.snippets.build(params)
               else
@@ -13,7 +17,12 @@ class CreateSnippetService < BaseService
 
     snippet.author = current_user
 
-    snippet.save
+    spam_check(snippet, current_user)
+
+    if snippet.save
+      UserAgentDetailService.new(snippet, @request).create
+    end
+
     snippet
   end
 end
diff --git a/app/services/create_tag_service.rb b/app/services/create_tag_service.rb
deleted file mode 100644
index c0e7ecf6a96..00000000000
--- a/app/services/create_tag_service.rb
+++ /dev/null
@@ -1,32 +0,0 @@
-require_relative 'base_service'
-
-class CreateTagService < BaseService
-  def execute(tag_name, target, message, release_description = nil)
-    valid_tag = Gitlab::GitRefValidator.validate(tag_name)
-    return error('Tag name invalid') unless valid_tag
-
-    repository = project.repository
-    message.strip! if message
-
-    new_tag = nil
-
-    begin
-      new_tag = repository.add_tag(current_user, tag_name, target, message)
-    rescue Rugged::TagError
-      return error("Tag #{tag_name} already exists")
-    rescue GitHooksService::PreReceiveError => ex
-      return error(ex.message)
-    end
-
-    if new_tag
-      if release_description
-        CreateReleaseService.new(@project, @current_user).
-          execute(tag_name, release_description)
-      end
-      
-      success.merge(tag: new_tag)
-    else
-      error("Target #{target} is invalid")
-    end
-  end
-end
diff --git a/app/services/delete_branch_service.rb b/app/services/delete_branch_service.rb
index 3e5dd4ebb86..11a045f4c31 100644
--- a/app/services/delete_branch_service.rb
+++ b/app/services/delete_branch_service.rb
@@ -1,5 +1,3 @@
-require_relative 'base_service'
-
 class DeleteBranchService < BaseService
   def execute(branch_name)
     repository = project.repository
diff --git a/app/services/delete_merged_branches_service.rb b/app/services/delete_merged_branches_service.rb
new file mode 100644
index 00000000000..1b5623baebe
--- /dev/null
+++ b/app/services/delete_merged_branches_service.rb
@@ -0,0 +1,16 @@
+class DeleteMergedBranchesService < BaseService
+  def async_execute
+    DeleteMergedBranchesWorker.perform_async(project.id, current_user.id)
+  end
+
+  def execute
+    raise Gitlab::Access::AccessDeniedError unless can?(current_user, :push_code, project)
+
+    branches = project.repository.branch_names
+    branches = branches.select { |branch| project.repository.merged_to_root_ref?(branch) }
+
+    branches.each do |branch|
+      DeleteBranchService.new(project, current_user).execute(branch)
+    end
+  end
+end
diff --git a/app/services/delete_tag_service.rb b/app/services/delete_tag_service.rb
deleted file mode 100644
index d824406cb49..00000000000
--- a/app/services/delete_tag_service.rb
+++ /dev/null
@@ -1,44 +0,0 @@
-require_relative 'base_service'
-
-class DeleteTagService < BaseService
-  def execute(tag_name)
-    repository = project.repository
-    tag = repository.find_tag(tag_name)
-
-    unless tag
-      return error('No such tag', 404)
-    end
-
-    if repository.rm_tag(tag_name)
-      release = project.releases.find_by(tag: tag_name)
-      release.destroy if release
-
-      push_data = build_push_data(tag)
-      EventCreateService.new.push(project, current_user, push_data)
-      project.execute_hooks(push_data.dup, :tag_push_hooks)
-      project.execute_services(push_data.dup, :tag_push_hooks)
-
-      success('Tag was removed')
-    else
-      error('Failed to remove tag')
-    end
-  end
-
-  def error(message, return_code = 400)
-    super(message).merge(return_code: return_code)
-  end
-
-  def success(message)
-    super().merge(message: message)
-  end
-
-  def build_push_data(tag)
-    Gitlab::DataBuilder::Push.build(
-      project,
-      current_user,
-      tag.dereferenced_target.sha,
-      Gitlab::Git::BLANK_SHA,
-      "#{Gitlab::Git::TAG_REF_PREFIX}#{tag.name}",
-      [])
-  end
-end
diff --git a/app/services/delete_user_service.rb b/app/services/delete_user_service.rb
deleted file mode 100644
index eaff88d6463..00000000000
--- a/app/services/delete_user_service.rb
+++ /dev/null
@@ -1,31 +0,0 @@
-class DeleteUserService
-  attr_accessor :current_user
-
-  def initialize(current_user)
-    @current_user = current_user
-  end
-
-  def execute(user, options = {})
-    if !options[:delete_solo_owned_groups] && user.solo_owned_groups.present?
-      user.errors[:base] << 'You must transfer ownership or delete groups before you can remove user'
-      return user
-    end
-
-    user.solo_owned_groups.each do |group|
-      DestroyGroupService.new(group, current_user).execute
-    end
-
-    user.personal_projects.each do |project|
-      # Skip repository removal because we remove directory with namespace
-      # that contain all this repositories
-      ::Projects::DestroyService.new(project, current_user, skip_repo: true).async_execute
-    end
-
-    # Destroy the namespace after destroying the user since certain methods may depend on the namespace existing
-    namespace = user.namespace
-    user_data = user.destroy
-    namespace.really_destroy!
-
-    user_data
-  end
-end
diff --git a/app/services/destroy_group_service.rb b/app/services/destroy_group_service.rb
deleted file mode 100644
index 0081364b8aa..00000000000
--- a/app/services/destroy_group_service.rb
+++ /dev/null
@@ -1,27 +0,0 @@
-class DestroyGroupService
-  attr_accessor :group, :current_user
-
-  def initialize(group, user)
-    @group, @current_user = group, user
-  end
-
-  def async_execute
-    group.transaction do
-      # Soft delete via paranoia gem
-      group.destroy
-      job_id = GroupDestroyWorker.perform_async(group.id, current_user.id)
-      Rails.logger.info("User #{current_user.id} scheduled a deletion of group ID #{group.id} with job ID #{job_id}")
-    end
-  end
-
-  def execute
-    group.projects.each do |project|
-      # Execute the destruction of the models immediately to ensure atomic cleanup.
-      # Skip repository removal because we remove directory with namespace
-      # that contain all these repositories
-      ::Projects::DestroyService.new(project, current_user, skip_repo: true).execute
-    end
-
-    group.really_destroy!
-  end
-end
diff --git a/app/services/discussions/base_service.rb b/app/services/discussions/base_service.rb
new file mode 100644
index 00000000000..e4dfe6e71bb
--- /dev/null
+++ b/app/services/discussions/base_service.rb
@@ -0,0 +1,4 @@
+module Discussions
+  class BaseService < ::BaseService
+  end
+end
diff --git a/app/services/discussions/resolve_service.rb b/app/services/discussions/resolve_service.rb
new file mode 100644
index 00000000000..0437195f588
--- /dev/null
+++ b/app/services/discussions/resolve_service.rb
@@ -0,0 +1,24 @@
+module Discussions
+  class ResolveService < Discussions::BaseService
+    def execute(one_or_more_discussions)
+      Array(one_or_more_discussions).each { |discussion| resolve_discussion(discussion) }
+    end
+
+    def resolve_discussion(discussion)
+      return unless discussion.can_resolve?(current_user)
+
+      discussion.resolve!(current_user)
+
+      MergeRequests::ResolvedDiscussionNotificationService.new(project, current_user).execute(merge_request)
+      SystemNoteService.discussion_continued_in_issue(discussion, project, current_user, follow_up_issue) if follow_up_issue
+    end
+
+    def merge_request
+      params[:merge_request]
+    end
+
+    def follow_up_issue
+      params[:follow_up_issue]
+    end
+  end
+end
diff --git a/app/services/files/base_service.rb b/app/services/files/base_service.rb
index 9bd4bd464f7..c8a60422bf4 100644
--- a/app/services/files/base_service.rb
+++ b/app/services/files/base_service.rb
@@ -1,11 +1,11 @@
 module Files
   class BaseService < ::BaseService
-    class ValidationError < StandardError; end
+    ValidationError = Class.new(StandardError)
 
     def execute
-      @source_project = params[:source_project] || @project
-      @source_branch = params[:source_branch]
-      @target_branch  = params[:target_branch]
+      @start_project = params[:start_project] || @project
+      @start_branch = params[:start_branch]
+      @target_branch = params[:target_branch]
 
       @commit_message = params[:commit_message]
       @file_path      = params[:file_path]
@@ -22,10 +22,8 @@ module Files
       # Validate parameters
       validate
 
-      # Create new branch if it different from source_branch
-      if different_branch?
-        create_target_branch
-      end
+      # Create new branch if it different from start_branch
+      validate_target_branch if different_branch?
 
       result = commit
       if result
@@ -40,7 +38,7 @@ module Files
     private
 
     def different_branch?
-      @source_branch != @target_branch || @source_project != @project
+      @start_branch != @target_branch || @start_project != @project
     end
 
     def file_has_changed?
@@ -60,23 +58,20 @@ module Files
         raise_error("You are not allowed to push into this branch")
       end
 
-      unless project.empty_repo?
-        unless @source_project.repository.branch_names.include?(@source_branch)
-          raise_error('You can only create or edit files when you are on a branch')
-        end
+      if !@start_project.empty_repo? && !@start_project.repository.branch_exists?(@start_branch)
+        raise ValidationError, 'You can only create or edit files when you are on a branch'
+      end
 
-        if different_branch?
-          if repository.branch_names.include?(@target_branch)
-            raise_error('Branch with such name already exists. You need to switch to this branch in order to make changes')
-          end
-        end
+      if !project.empty_repo? && different_branch? && repository.branch_exists?(@branch_name)
+        raise ValidationError, "A branch called #{@branch_name} already exists. Switch to that branch in order to make changes"
       end
     end
 
-    def create_target_branch
-      result = CreateBranchService.new(project, current_user).execute(@target_branch, @source_branch, source_project: @source_project)
+    def validate_target_branch
+      result = ValidateNewBranchService.new(project, current_user).
+        execute(@target_branch)
 
-      unless result[:status] == :success
+      if result[:status] == :error
         raise_error("Something went wrong when we tried to create #{@target_branch} for you: #{result[:message]}")
       end
     end
diff --git a/app/services/files/create_dir_service.rb b/app/services/files/create_dir_service.rb
index d00d78cee7e..083ffdc634c 100644
--- a/app/services/files/create_dir_service.rb
+++ b/app/services/files/create_dir_service.rb
@@ -1,9 +1,15 @@
-require_relative "base_service"
-
 module Files
   class CreateDirService < Files::BaseService
     def commit
-      repository.commit_dir(current_user, @file_path, @commit_message, @target_branch, author_email: @author_email, author_name: @author_name)
+      repository.create_dir(
+        current_user,
+        @file_path,
+        message: @commit_message,
+        branch_name: @target_branch,
+        author_email: @author_email,
+        author_name: @author_name,
+        start_project: @start_project,
+        start_branch_name: @start_branch)
     end
 
     def validate
diff --git a/app/services/files/create_service.rb b/app/services/files/create_service.rb
index bf127843d55..65b5537fb68 100644
--- a/app/services/files/create_service.rb
+++ b/app/services/files/create_service.rb
@@ -1,14 +1,25 @@
-require_relative "base_service"
-
 module Files
   class CreateService < Files::BaseService
     def commit
-      repository.commit_file(current_user, @file_path, @file_content, @commit_message, @target_branch, false, author_email: @author_email, author_name: @author_name)
+      repository.create_file(
+        current_user,
+        @file_path,
+        @file_content,
+        message: @commit_message,
+        branch_name: @target_branch,
+        author_email: @author_email,
+        author_name: @author_name,
+        start_project: @start_project,
+        start_branch_name: @start_branch)
     end
 
     def validate
       super
 
+      if @file_content.nil?
+        raise_error("You must provide content.")
+      end
+
       if @file_path =~ Gitlab::Regex.directory_traversal_regex
         raise_error(
           'Your changes could not be committed, because the file name ' +
@@ -26,7 +37,7 @@ module Files
       unless project.empty_repo?
         @file_path.slice!(0) if @file_path.start_with?('/')
 
-        blob = repository.blob_at_branch(@source_branch, @file_path)
+        blob = repository.blob_at_branch(@start_branch, @file_path)
 
         if blob
           raise_error('Your changes could not be committed because a file with the same name already exists')
diff --git a/app/services/files/delete_service.rb b/app/services/files/delete_service.rb
deleted file mode 100644
index 8b27ad51789..00000000000
--- a/app/services/files/delete_service.rb
+++ /dev/null
@@ -1,9 +0,0 @@
-require_relative "base_service"
-
-module Files
-  class DeleteService < Files::BaseService
-    def commit
-      repository.remove_file(current_user, @file_path, @commit_message, @target_branch, author_email: @author_email, author_name: @author_name)
-    end
-  end
-end
diff --git a/app/services/files/destroy_service.rb b/app/services/files/destroy_service.rb
new file mode 100644
index 00000000000..e294659bc98
--- /dev/null
+++ b/app/services/files/destroy_service.rb
@@ -0,0 +1,15 @@
+module Files
+  class DestroyService < Files::BaseService
+    def commit
+      repository.delete_file(
+        current_user,
+        @file_path,
+        message: @commit_message,
+        branch_name: @target_branch,
+        author_email: @author_email,
+        author_name: @author_name,
+        start_project: @start_project,
+        start_branch_name: @start_branch)
+    end
+  end
+end
diff --git a/app/services/files/multi_service.rb b/app/services/files/multi_service.rb
index d28912e1301..700f9f4f6f0 100644
--- a/app/services/files/multi_service.rb
+++ b/app/services/files/multi_service.rb
@@ -1,17 +1,19 @@
-require_relative "base_service"
-
 module Files
   class MultiService < Files::BaseService
-    class FileChangedError < StandardError; end
+    FileChangedError = Class.new(StandardError)
+
+    ACTIONS = %w[create update delete move].freeze
 
     def commit
       repository.multi_action(
         user: current_user,
-        branch: @target_branch,
         message: @commit_message,
+        branch_name: @target_branch,
         actions: params[:actions],
         author_email: @author_email,
-        author_name: @author_name
+        author_name: @author_name,
+        start_project: @start_project,
+        start_branch_name: @start_branch
       )
     end
 
@@ -21,10 +23,19 @@ module Files
       super
 
       params[:actions].each_with_index do |action, index|
+        if ACTIONS.include?(action[:action].to_s)
+          action[:action] = action[:action].to_sym
+        else
+          raise_error("Unknown action type `#{action[:action]}`.")
+        end
+
         unless action[:file_path].present?
           raise_error("You must specify a file_path.")
         end
 
+        action[:file_path].slice!(0) if action[:file_path] && action[:file_path].start_with?('/')
+        action[:previous_path].slice!(0) if action[:previous_path] && action[:previous_path].start_with?('/')
+
         regex_check(action[:file_path])
         regex_check(action[:previous_path]) if action[:previous_path]
 
@@ -43,8 +54,6 @@ module Files
           validate_delete(action)
         when :move
           validate_move(action, index)
-        else
-          raise_error("Unknown action type `#{action[:action]}`.")
         end
       end
     end
@@ -55,7 +64,7 @@ module Files
       file_path = action[:file_path]
       file_path = action[:previous_path] if action[:action] == :move
 
-      blob = repository.blob_at_branch(params[:branch_name], file_path)
+      blob = repository.blob_at_branch(params[:branch], file_path)
 
       unless blob
         raise_error("File to be #{action[:action]}d `#{file_path}` does not exist.")
@@ -63,7 +72,7 @@ module Files
     end
 
     def last_commit
-      Gitlab::Git::Commit.last_for_path(repository, @source_branch, @file_path)
+      Gitlab::Git::Commit.last_for_path(repository, @start_branch, @file_path)
     end
 
     def regex_check(file)
@@ -89,9 +98,23 @@ module Files
     def validate_create(action)
       return if project.empty_repo?
 
-      if repository.blob_at_branch(params[:branch_name], action[:file_path])
+      if repository.blob_at_branch(params[:branch], action[:file_path])
         raise_error("Your changes could not be committed because a file with the name `#{action[:file_path]}` already exists.")
       end
+
+      if action[:content].nil?
+        raise_error("You must provide content.")
+      end
+    end
+
+    def validate_update(action)
+      if action[:content].nil?
+        raise_error("You must provide content.")
+      end
+
+      if file_has_changed?
+        raise FileChangedError.new("You are attempting to update a file `#{action[:file_path]}` that has changed since you started editing it.")
+      end
     end
 
     def validate_delete(action)
@@ -102,23 +125,17 @@ module Files
         raise_error("You must supply the original file path when moving file `#{action[:file_path]}`.")
       end
 
-      blob = repository.blob_at_branch(params[:branch_name], action[:file_path])
+      blob = repository.blob_at_branch(params[:branch], action[:file_path])
 
       if blob
         raise_error("Move destination `#{action[:file_path]}` already exists.")
       end
 
       if action[:content].nil?
-        blob = repository.blob_at_branch(params[:branch_name], action[:previous_path])
+        blob = repository.blob_at_branch(params[:branch], action[:previous_path])
         blob.load_all_data!(repository) if blob.truncated?
         params[:actions][index][:content] = blob.data
       end
     end
-
-    def validate_update(action)
-      if file_has_changed?
-        raise FileChangedError.new("You are attempting to update a file `#{action[:file_path]}` that has changed since you started editing it.")
-      end
-    end
   end
 end
diff --git a/app/services/files/update_service.rb b/app/services/files/update_service.rb
index c17fdb8d1f1..fbbab97632e 100644
--- a/app/services/files/update_service.rb
+++ b/app/services/files/update_service.rb
@@ -1,16 +1,16 @@
-require_relative "base_service"
-
 module Files
   class UpdateService < Files::BaseService
-    class FileChangedError < StandardError; end
+    FileChangedError = Class.new(StandardError)
 
     def commit
       repository.update_file(current_user, @file_path, @file_content,
-                             branch: @target_branch,
-                             previous_path: @previous_path,
                              message: @commit_message,
+                             branch_name: @target_branch,
+                             previous_path: @previous_path,
                              author_email: @author_email,
-                             author_name: @author_name)
+                             author_name: @author_name,
+                             start_project: @start_project,
+                             start_branch_name: @start_branch)
     end
 
     private
@@ -18,6 +18,10 @@ module Files
     def validate
       super
 
+      if @file_content.nil?
+        raise_error("You must provide content.")
+      end
+
       if file_has_changed?
         raise FileChangedError.new("You are attempting to update a file that has changed since you started editing it.")
       end
@@ -25,7 +29,7 @@ module Files
 
     def last_commit
       @last_commit ||= Gitlab::Git::Commit.
-        last_for_path(@source_project.repository, @source_branch, @file_path)
+        last_for_path(@start_project.repository, @start_branch, @file_path)
     end
   end
 end
diff --git a/app/services/git_hooks_service.rb b/app/services/git_hooks_service.rb
index 172bd85dade..d222d1e63aa 100644
--- a/app/services/git_hooks_service.rb
+++ b/app/services/git_hooks_service.rb
@@ -1,6 +1,8 @@
 class GitHooksService
   PreReceiveError = Class.new(StandardError)
 
+  attr_accessor :oldrev, :newrev, :ref
+
   def execute(user, repo_path, oldrev, newrev, ref)
     @repo_path  = repo_path
     @user       = Gitlab::GlId.gl_id(user)
@@ -16,15 +18,15 @@ class GitHooksService
       end
     end
 
-    yield
-
-    run_hook('post-receive')
+    yield(self).tap do
+      run_hook('post-receive')
+    end
   end
 
   private
 
   def run_hook(name)
     hook = Gitlab::Git::Hook.new(name, @repo_path)
-    hook.trigger(@user, @oldrev, @newrev, @ref)
+    hook.trigger(@user, oldrev, newrev, ref)
   end
 end
diff --git a/app/services/git_operation_service.rb b/app/services/git_operation_service.rb
new file mode 100644
index 00000000000..ed6ea638235
--- /dev/null
+++ b/app/services/git_operation_service.rb
@@ -0,0 +1,156 @@
+class GitOperationService
+  attr_reader :user, :repository
+
+  def initialize(new_user, new_repository)
+    @user = new_user
+    @repository = new_repository
+  end
+
+  def add_branch(branch_name, newrev)
+    ref = Gitlab::Git::BRANCH_REF_PREFIX + branch_name
+    oldrev = Gitlab::Git::BLANK_SHA
+
+    update_ref_in_hooks(ref, newrev, oldrev)
+  end
+
+  def rm_branch(branch)
+    ref = Gitlab::Git::BRANCH_REF_PREFIX + branch.name
+    oldrev = branch.target
+    newrev = Gitlab::Git::BLANK_SHA
+
+    update_ref_in_hooks(ref, newrev, oldrev)
+  end
+
+  def add_tag(tag_name, newrev, options = {})
+    ref = Gitlab::Git::TAG_REF_PREFIX + tag_name
+    oldrev = Gitlab::Git::BLANK_SHA
+
+    with_hooks(ref, newrev, oldrev) do |service|
+      # We want to pass the OID of the tag object to the hooks. For an
+      # annotated tag we don't know that OID until after the tag object
+      # (raw_tag) is created in the repository. That is why we have to
+      # update the value after creating the tag object. Only the
+      # "post-receive" hook will receive the correct value in this case.
+      raw_tag = repository.rugged.tags.create(tag_name, newrev, options)
+      service.newrev = raw_tag.target_id
+    end
+  end
+
+  def rm_tag(tag)
+    ref = Gitlab::Git::TAG_REF_PREFIX + tag.name
+    oldrev = tag.target
+    newrev = Gitlab::Git::BLANK_SHA
+
+    update_ref_in_hooks(ref, newrev, oldrev) do
+      repository.rugged.tags.delete(tag_name)
+    end
+  end
+
+  # Whenever `start_branch_name` is passed, if `branch_name` doesn't exist,
+  # it would be created from `start_branch_name`.
+  # If `start_project` is passed, and the branch doesn't exist,
+  # it would try to find the commits from it instead of current repository.
+  def with_branch(
+    branch_name,
+    start_branch_name: nil,
+    start_project: repository.project,
+    &block)
+
+    start_repository = start_project.repository
+    start_branch_name = nil if start_repository.empty_repo?
+
+    if start_branch_name && !start_repository.branch_exists?(start_branch_name)
+      raise ArgumentError, "Cannot find branch #{start_branch_name} in #{start_repository.path_with_namespace}"
+    end
+
+    update_branch_with_hooks(branch_name) do
+      repository.with_repo_branch_commit(
+        start_repository,
+        start_branch_name || branch_name,
+        &block)
+    end
+  end
+
+  private
+
+  def update_branch_with_hooks(branch_name)
+    update_autocrlf_option
+
+    was_empty = repository.empty?
+
+    # Make commit
+    newrev = yield
+
+    unless newrev
+      raise Repository::CommitError.new('Failed to create commit')
+    end
+
+    branch = repository.find_branch(branch_name)
+    oldrev = find_oldrev_from_branch(newrev, branch)
+
+    ref = Gitlab::Git::BRANCH_REF_PREFIX + branch_name
+    update_ref_in_hooks(ref, newrev, oldrev)
+
+    # If repo was empty expire cache
+    repository.after_create if was_empty
+    repository.after_create_branch if
+      was_empty || Gitlab::Git.blank_ref?(oldrev)
+
+    newrev
+  end
+
+  def find_oldrev_from_branch(newrev, branch)
+    return Gitlab::Git::BLANK_SHA unless branch
+
+    oldrev = branch.target
+
+    if oldrev == repository.rugged.merge_base(newrev, branch.target)
+      oldrev
+    else
+      raise Repository::CommitError.new('Branch diverged')
+    end
+  end
+
+  def update_ref_in_hooks(ref, newrev, oldrev)
+    with_hooks(ref, newrev, oldrev) do
+      update_ref(ref, newrev, oldrev)
+    end
+  end
+
+  def with_hooks(ref, newrev, oldrev)
+    GitHooksService.new.execute(
+      user,
+      repository.path_to_repo,
+      oldrev,
+      newrev,
+      ref) do |service|
+
+      yield(service)
+    end
+  end
+
+  def update_ref(ref, newrev, oldrev)
+    # We use 'git update-ref' because libgit2/rugged currently does not
+    # offer 'compare and swap' ref updates. Without compare-and-swap we can
+    # (and have!) accidentally reset the ref to an earlier state, clobbering
+    # commits. See also https://github.com/libgit2/libgit2/issues/1534.
+    command = %W[#{Gitlab.config.git.bin_path} update-ref --stdin -z]
+    _, status = Gitlab::Popen.popen(
+      command,
+      repository.path_to_repo) do |stdin|
+      stdin.write("update #{ref}\x00#{newrev}\x00#{oldrev}\x00")
+    end
+
+    unless status.zero?
+      raise Repository::CommitError.new(
+        "Could not update branch #{Gitlab::Git.branch_name(ref)}." \
+        " Please refresh and try again.")
+    end
+  end
+
+  def update_autocrlf_option
+    if repository.raw_repository.autocrlf != :input
+      repository.raw_repository.autocrlf = :input
+    end
+  end
+end
diff --git a/app/services/git_push_service.rb b/app/services/git_push_service.rb
index e8415862de5..bc7431c89a8 100644
--- a/app/services/git_push_service.rb
+++ b/app/services/git_push_service.rb
@@ -3,6 +3,9 @@ class GitPushService < BaseService
   include Gitlab::CurrentSettings
   include Gitlab::Access
 
+  # The N most recent commits to process in a single push payload.
+  PROCESS_COMMIT_LIMIT = 100
+
   # This method will be called after each git update
   # and only if the provided user and project are present in GitLab.
   #
@@ -18,7 +21,7 @@ class GitPushService < BaseService
   #
   def execute
     @project.repository.after_create if @project.empty_repo?
-    @project.repository.after_push_commit(branch_name, params[:newrev])
+    @project.repository.after_push_commit(branch_name)
 
     if push_remove_branch?
       @project.repository.after_remove_branch
@@ -49,27 +52,65 @@ class GitPushService < BaseService
       update_gitattributes if is_default_branch?
     end
 
-    # Update merge requests that may be affected by this push. A new branch
-    # could cause the last commit of a merge request to change.
-    update_merge_requests
-
+    execute_related_hooks
     perform_housekeeping
+
+    update_caches
   end
 
   def update_gitattributes
     @project.repository.copy_gitattributes(params[:ref])
   end
 
+  def update_caches
+    if is_default_branch?
+      paths = Set.new
+
+      @push_commits.each do |commit|
+        commit.raw_diffs(deltas_only: true).each do |diff|
+          paths << diff.new_path
+        end
+      end
+
+      types = Gitlab::FileDetector.types_in_paths(paths.to_a)
+    else
+      types = []
+    end
+
+    ProjectCacheWorker.perform_async(@project.id, types, [:commit_count, :repository_size])
+  end
+
+  # Schedules processing of commit messages.
+  def process_commit_messages
+    default = is_default_branch?
+
+    push_commits.last(PROCESS_COMMIT_LIMIT).each do |commit|
+      ProcessCommitWorker.
+        perform_async(project.id, current_user.id, commit.to_hash, default)
+    end
+  end
+
   protected
 
-  def update_merge_requests
-    UpdateMergeRequestsWorker.perform_async(@project.id, current_user.id, params[:oldrev], params[:newrev], params[:ref])
+  def execute_related_hooks
+    # Update merge requests that may be affected by this push. A new branch
+    # could cause the last commit of a merge request to change.
+    #
+    UpdateMergeRequestsWorker
+      .perform_async(@project.id, current_user.id, params[:oldrev], params[:newrev], params[:ref])
+
+    SystemHookPushWorker.perform_async(build_push_data.dup, :push_hooks)
 
     EventCreateService.new.push(@project, current_user, build_push_data)
     @project.execute_hooks(build_push_data.dup, :push_hooks)
     @project.execute_services(build_push_data.dup, :push_hooks)
     Ci::CreatePipelineService.new(@project, current_user, build_push_data).execute
-    ProjectCacheWorker.perform_async(@project.id)
+
+    if push_remove_branch?
+      AfterBranchDeleteService
+        .new(project, current_user)
+        .execute(branch_name)
+    end
   end
 
   def perform_housekeeping
@@ -102,41 +143,6 @@ class GitPushService < BaseService
     end
   end
 
-  # Extract any GFM references from the pushed commit messages. If the configured issue-closing regex is matched,
-  # close the referenced Issue. Create cross-reference Notes corresponding to any other referenced Mentionables.
-  def process_commit_messages
-    is_default_branch = is_default_branch?
-
-    authors = Hash.new do |hash, commit|
-      email = commit.author_email
-      next hash[email] if hash.has_key?(email)
-
-      hash[email] = commit_user(commit)
-    end
-
-    @push_commits.each do |commit|
-      # Keep track of the issues that will be actually closed because they are on a default branch.
-      # Hence, when creating cross-reference notes, the not-closed issues (on non-default branches)
-      # will also have cross-reference.
-      closed_issues = []
-
-      if is_default_branch
-        # Close issues if these commits were pushed to the project's default branch and the commit message matches the
-        # closing regex. Exclude any mentioned Issues from cross-referencing even if the commits are being pushed to
-        # a different branch.
-        closed_issues = commit.closes_issues(current_user)
-        closed_issues.each do |issue|
-          if can?(current_user, :update_issue, issue)
-            Issues::CloseService.new(project, authors[commit], {}).execute(issue, commit: commit)
-          end
-        end
-      end
-
-      commit.create_cross_references!(authors[commit], closed_issues)
-      update_issue_metrics(commit, authors)
-    end
-  end
-
   def build_push_data
     @push_data ||= Gitlab::DataBuilder::Push.build(
       @project,
@@ -176,11 +182,4 @@ class GitPushService < BaseService
   def branch_name
     @branch_name ||= Gitlab::Git.ref_name(params[:ref])
   end
-
-  def update_issue_metrics(commit, authors)
-    mentioned_issues = commit.all_references(authors[commit]).issues
-
-    Issue::Metrics.where(issue_id: mentioned_issues.map(&:id), first_mentioned_in_commit_at: nil).
-      update_all(first_mentioned_in_commit_at: commit.committed_date)
-  end
 end
diff --git a/app/services/git_tag_push_service.rb b/app/services/git_tag_push_service.rb
index 20a4445bddf..96432837481 100644
--- a/app/services/git_tag_push_service.rb
+++ b/app/services/git_tag_push_service.rb
@@ -12,7 +12,7 @@ class GitTagPushService < BaseService
     project.execute_hooks(@push_data.dup, :tag_push_hooks)
     project.execute_services(@push_data.dup, :tag_push_hooks)
     Ci::CreatePipelineService.new(project, current_user, @push_data).execute
-    ProjectCacheWorker.perform_async(project.id)
+    ProjectCacheWorker.perform_async(project.id, [], [:commit_count, :repository_size])
 
     true
   end
diff --git a/app/services/groups/create_service.rb b/app/services/groups/create_service.rb
index 2bccd584dde..c4e9b8fd8e0 100644
--- a/app/services/groups/create_service.rb
+++ b/app/services/groups/create_service.rb
@@ -2,6 +2,7 @@ module Groups
   class CreateService < Groups::BaseService
     def initialize(user, params = {})
       @current_user, @params = user, params.dup
+      @chat_team = @params.delete(:create_chat_team)
     end
 
     def execute
@@ -12,10 +13,31 @@ module Groups
         return @group
       end
 
+      if @group.parent && !can?(current_user, :admin_group, @group.parent)
+        @group.parent = nil
+        @group.errors.add(:parent_id, 'manage access required to create subgroup')
+
+        return @group
+      end
+
       @group.name ||= @group.path.dup
+
+      if create_chat_team?
+        response = Mattermost::CreateTeamService.new(@group, current_user).execute
+        return @group if @group.errors.any?
+
+        @group.build_chat_team(name: response['name'], team_id: response['id'])
+      end
+
       @group.save
       @group.add_owner(current_user)
       @group
     end
+
+    private
+
+    def create_chat_team?
+      Gitlab.config.mattermost.enabled && @chat_team && group.chat_team.nil?
+    end
   end
 end
diff --git a/app/services/groups/destroy_service.rb b/app/services/groups/destroy_service.rb
new file mode 100644
index 00000000000..497fdb09cdc
--- /dev/null
+++ b/app/services/groups/destroy_service.rb
@@ -0,0 +1,28 @@
+module Groups
+  class DestroyService < Groups::BaseService
+    def async_execute
+      # Soft delete via paranoia gem
+      group.destroy
+      job_id = GroupDestroyWorker.perform_async(group.id, current_user.id)
+      Rails.logger.info("User #{current_user.id} scheduled a deletion of group ID #{group.id} with job ID #{job_id}")
+    end
+
+    def execute
+      group.prepare_for_destroy
+
+      group.projects.with_deleted.each do |project|
+        # Execute the destruction of the models immediately to ensure atomic cleanup.
+        # Skip repository removal because we remove directory with namespace
+        # that contain all these repositories
+        ::Projects::DestroyService.new(project, current_user, skip_repo: true).execute
+      end
+
+      group.children.each do |group|
+        # This needs to be synchronous since the namespace gets destroyed below
+        DestroyService.new(group, current_user).execute
+      end
+
+      group.really_destroy!
+    end
+  end
+end
diff --git a/app/services/groups/update_service.rb b/app/services/groups/update_service.rb
index 99ad12b1003..1d65c76d282 100644
--- a/app/services/groups/update_service.rb
+++ b/app/services/groups/update_service.rb
@@ -1,11 +1,13 @@
 module Groups
   class UpdateService < Groups::BaseService
     def execute
+      reject_parent_id!
+
       # check that user is allowed to set specified visibility_level
       new_visibility = params[:visibility_level]
       if new_visibility && new_visibility.to_i != group.visibility_level
         unless can?(current_user, :change_visibility_level, group) &&
-          Gitlab::VisibilityLevel.allowed_for?(current_user, new_visibility)
+            Gitlab::VisibilityLevel.allowed_for?(current_user, new_visibility)
 
           deny_visibility_level(group, new_visibility)
           return group
@@ -14,7 +16,19 @@ module Groups
 
       group.assign_attributes(params)
 
-      group.save
+      begin
+        group.save
+      rescue Gitlab::UpdatePathError => e
+        group.errors.add(:base, e.message)
+
+        false
+      end
+    end
+
+    private
+
+    def reject_parent_id!
+      params.except!(:parent_id)
     end
   end
 end
diff --git a/app/services/issuable_base_service.rb b/app/services/issuable_base_service.rb
index bb92cd80cc9..b071a398481 100644
--- a/app/services/issuable_base_service.rb
+++ b/app/services/issuable_base_service.rb
@@ -36,14 +36,18 @@ class IssuableBaseService < BaseService
     end
   end
 
-  def filter_params(issuable_ability_name = :issue)
-    filter_assignee
-    filter_milestone
-    filter_labels
+  def create_time_estimate_note(issuable)
+    SystemNoteService.change_time_estimate(issuable, issuable.project, current_user)
+  end
+
+  def create_time_spent_note(issuable)
+    SystemNoteService.change_time_spent(issuable, issuable.project, current_user)
+  end
 
-    ability = :"admin_#{issuable_ability_name}"
+  def filter_params(issuable)
+    ability_name = :"admin_#{issuable.to_ability_name}"
 
-    unless can?(current_user, ability, project)
+    unless can?(current_user, ability_name, project)
       params.delete(:milestone_id)
       params.delete(:labels)
       params.delete(:add_label_ids)
@@ -52,14 +56,35 @@ class IssuableBaseService < BaseService
       params.delete(:assignee_id)
       params.delete(:due_date)
     end
+
+    filter_assignee(issuable)
+    filter_milestone
+    filter_labels
   end
 
-  def filter_assignee
-    if params[:assignee_id] == IssuableFinder::NONE
-      params[:assignee_id] = ''
+  def filter_assignee(issuable)
+    return unless params[:assignee_id].present?
+
+    assignee_id = params[:assignee_id]
+
+    if assignee_id.to_s == IssuableFinder::NONE
+      params[:assignee_id] = ""
+    else
+      params.delete(:assignee_id) unless assignee_can_read?(issuable, assignee_id)
     end
   end
 
+  def assignee_can_read?(issuable, assignee_id)
+    new_assignee = User.find_by_id(assignee_id)
+
+    return false unless new_assignee.present?
+
+    ability_name = :"read_#{issuable.to_ability_name}"
+    resource     = issuable.persisted? ? issuable : project
+
+    can?(new_assignee, ability_name, resource)
+  end
+
   def filter_milestone
     milestone_id = params[:milestone_id]
     return unless milestone_id
@@ -85,14 +110,15 @@ class IssuableBaseService < BaseService
 
   def find_or_create_label_ids
     labels = params.delete(:labels)
+
     return unless labels
 
-    params[:label_ids] = labels.split(',').map do |label_name|
+    params[:label_ids] = labels.split(",").map do |label_name|
       service = Labels::FindOrCreateService.new(current_user, project, title: label_name.strip)
       label   = service.execute
 
-      label.id
-    end
+      label.try(:id)
+    end.compact
   end
 
   def process_label_ids(attributes, existing_label_ids: nil)
@@ -119,9 +145,10 @@ class IssuableBaseService < BaseService
   def merge_slash_commands_into_params!(issuable)
     description, command_params =
       SlashCommands::InterpretService.new(project, current_user).
-      execute(params[:description], issuable)
+        execute(params[:description], issuable)
 
-    params[:description] = description
+    # Avoid a description already set on an issuable to be overwritten by a nil
+    params[:description] = description if params.has_key?(:description)
 
     params.merge!(command_params)
   end
@@ -136,10 +163,11 @@ class IssuableBaseService < BaseService
 
   def create(issuable)
     merge_slash_commands_into_params!(issuable)
-    filter_params
+    filter_params(issuable)
 
     params.delete(:state_event)
     params[:author] ||= current_user
+
     label_ids = process_label_ids(params)
 
     issuable.assign_attributes(params)
@@ -163,43 +191,51 @@ class IssuableBaseService < BaseService
     # To be overridden by subclasses
   end
 
-  def after_update(issuable)
+  def before_update(issuable)
     # To be overridden by subclasses
   end
 
-  def update_issuable(issuable, attributes)
-    issuable.with_transaction_returning_status do
-      issuable.update(attributes.merge(updated_by: current_user))
-    end
+  def after_update(issuable)
+    # To be overridden by subclasses
   end
 
   def update(issuable)
     change_state(issuable)
     change_subscription(issuable)
     change_todo(issuable)
-    filter_params
+    toggle_award(issuable)
+    filter_params(issuable)
     old_labels = issuable.labels.to_a
     old_mentioned_users = issuable.mentioned_users.to_a
 
-    params[:label_ids] = process_label_ids(params, existing_label_ids: issuable.label_ids)
+    label_ids = process_label_ids(params, existing_label_ids: issuable.label_ids)
+    params[:label_ids] = label_ids if labels_changing?(issuable.label_ids, label_ids)
 
-    if params.present? && update_issuable(issuable, params)
-      issuable.reset_events_cache
+    if issuable.changed? || params.present?
+      issuable.assign_attributes(params.merge(updated_by: current_user))
 
-      # We do not touch as it will affect a update on updated_at field
-      ActiveRecord::Base.no_touching do
-        handle_common_system_notes(issuable, old_labels: old_labels)
-      end
+      before_update(issuable)
 
-      handle_changes(issuable, old_labels: old_labels, old_mentioned_users: old_mentioned_users)
-      after_update(issuable)
-      issuable.create_new_cross_references!(current_user)
-      execute_hooks(issuable, 'update')
+      if issuable.with_transaction_returning_status { issuable.save }
+        # We do not touch as it will affect a update on updated_at field
+        ActiveRecord::Base.no_touching do
+          handle_common_system_notes(issuable, old_labels: old_labels)
+        end
+
+        handle_changes(issuable, old_labels: old_labels, old_mentioned_users: old_mentioned_users)
+        after_update(issuable)
+        issuable.create_new_cross_references!(current_user)
+        execute_hooks(issuable, 'update')
+      end
     end
 
     issuable
   end
 
+  def labels_changing?(old_label_ids, new_label_ids)
+    old_label_ids.sort != new_label_ids.sort
+  end
+
   def change_state(issuable)
     case params.delete(:state_event)
     when 'reopen'
@@ -212,9 +248,9 @@ class IssuableBaseService < BaseService
   def change_subscription(issuable)
     case params.delete(:subscription_event)
     when 'subscribe'
-      issuable.subscribe(current_user)
+      issuable.subscribe(current_user, project)
     when 'unsubscribe'
-      issuable.unsubscribe(current_user)
+      issuable.unsubscribe(current_user, project)
     end
   end
 
@@ -228,6 +264,14 @@ class IssuableBaseService < BaseService
     end
   end
 
+  def toggle_award(issuable)
+    award = params.delete(:emoji_award)
+    if award
+      todo_service.new_award_emoji(issuable, current_user)
+      issuable.toggle_award_emoji(award, current_user)
+    end
+  end
+
   def has_changes?(issuable, old_labels: [])
     valid_attrs = [:title, :description, :assignee_id, :milestone_id, :target_branch]
 
@@ -249,6 +293,14 @@ class IssuableBaseService < BaseService
       create_task_status_note(issuable)
     end
 
+    if issuable.previous_changes.include?('time_estimate')
+      create_time_estimate_note(issuable)
+    end
+
+    if issuable.time_spent?
+      create_time_spent_note(issuable)
+    end
+
     create_labels_note(issuable, old_labels) if issuable.labels != old_labels
   end
 end
diff --git a/app/services/issues/base_service.rb b/app/services/issues/base_service.rb
index 9ea3ce084ba..ee1b40db718 100644
--- a/app/services/issues/base_service.rb
+++ b/app/services/issues/base_service.rb
@@ -9,10 +9,6 @@ module Issues
 
     private
 
-    def filter_params
-      super(:issue)
-    end
-
     def execute_hooks(issue, action = 'open')
       issue_data  = hook_data(issue, action)
       hooks_scope = issue.confidential? ? :confidential_issue_hooks : :issue_hooks
diff --git a/app/services/issues/build_service.rb b/app/services/issues/build_service.rb
new file mode 100644
index 00000000000..77bced4bd5c
--- /dev/null
+++ b/app/services/issues/build_service.rb
@@ -0,0 +1,64 @@
+module Issues
+  class BuildService < Issues::BaseService
+    include ResolveDiscussions
+
+    def execute
+      filter_resolve_discussion_params
+      @issue = project.issues.new(issue_params)
+    end
+
+    def issue_params_with_info_from_discussions
+      return {} unless merge_request_to_resolve_discussions_of
+
+      { title: title_from_merge_request, description: description_for_discussions }
+    end
+
+    def title_from_merge_request
+      "Follow-up from \"#{merge_request_to_resolve_discussions_of.title}\""
+    end
+
+    def description_for_discussions
+      if discussions_to_resolve.empty?
+        return "There are no unresolved discussions. "\
+               "Review the conversation in #{merge_request_to_resolve_discussions_of.to_reference}"
+      end
+
+      description = "The following #{'discussion'.pluralize(discussions_to_resolve.size)} "\
+                    "from #{merge_request_to_resolve_discussions_of.to_reference} "\
+                    "should be addressed:"
+
+      [description, *items_for_discussions].join("\n\n")
+    end
+
+    def items_for_discussions
+      discussions_to_resolve.map { |discussion| item_for_discussion(discussion) }
+    end
+
+    def item_for_discussion(discussion)
+      first_note = discussion.first_note_to_resolve || discussion.first_note
+      other_note_count = discussion.notes.size - 1
+      note_url = Gitlab::UrlBuilder.build(first_note)
+
+      discussion_info = "- [ ] #{first_note.author.to_reference} commented on a [discussion](#{note_url}): "
+      discussion_info << " (+#{other_note_count} #{'comment'.pluralize(other_note_count)})" if other_note_count > 0
+
+      note_without_block_quotes = Banzai::Filter::BlockquoteFenceFilter.new(first_note.note).call
+      spaces = ' ' * 4
+      quote = note_without_block_quotes.lines.map { |line| "#{spaces}> #{line}" }.join
+
+      [discussion_info, quote].join("\n\n")
+    end
+
+    def issue_params
+      @issue_params ||= issue_params_with_info_from_discussions.merge(whitelisted_issue_params)
+    end
+
+    def whitelisted_issue_params
+      if can?(current_user, :admin_issue, project)
+        params.slice(:title, :description, :milestone_id)
+      else
+        params.slice(:title, :description)
+      end
+    end
+  end
+end
diff --git a/app/services/issues/close_service.rb b/app/services/issues/close_service.rb
index 45cca216ccc..f1030912c68 100644
--- a/app/services/issues/close_service.rb
+++ b/app/services/issues/close_service.rb
@@ -1,10 +1,23 @@
 module Issues
   class CloseService < Issues::BaseService
+    # Closes the supplied issue if the current user is able to do so.
     def execute(issue, commit: nil, notifications: true, system_note: true)
       return issue unless can?(current_user, :update_issue, issue)
 
+      close_issue(issue,
+                  commit: commit,
+                  notifications: notifications,
+                  system_note: system_note)
+    end
+
+    # Closes the supplied issue without checking if the user is authorized to
+    # do so.
+    #
+    # The code calling this method is responsible for ensuring that a user is
+    # allowed to close the given issue.
+    def close_issue(issue, commit: nil, notifications: true, system_note: true)
       if project.jira_tracker? && project.jira_service.active
-        project.jira_service.execute(commit, issue)
+        project.jira_service.close_issue(commit, issue)
         todo_service.close_issue(issue, current_user)
         return issue
       end
diff --git a/app/services/issues/create_service.rb b/app/services/issues/create_service.rb
index ea1690f3e38..3cf4b82b9f2 100644
--- a/app/services/issues/create_service.rb
+++ b/app/services/issues/create_service.rb
@@ -1,16 +1,20 @@
 module Issues
   class CreateService < Issues::BaseService
+    include SpamCheckService
+    include ResolveDiscussions
+
     def execute
-      @request = params.delete(:request)
-      @api = params.delete(:api)
+      @issue = BuildService.new(project, current_user, params).execute
 
-      @issue = project.issues.new
+      filter_spam_check_params
+      filter_resolve_discussion_params
 
       create(@issue)
     end
 
-    def before_create(issuable)
-      issuable.spam = spam_service.check(@api)
+    def before_create(issue)
+      spam_check(issue, current_user)
+      issue.move_to_end
     end
 
     def after_create(issuable)
@@ -18,14 +22,20 @@ module Issues
       notification_service.new_issue(issuable, current_user)
       todo_service.new_issue(issuable, current_user)
       user_agent_detail_service.create
+      resolve_discussions_with_issue(issuable)
     end
 
-    private
+    def resolve_discussions_with_issue(issue)
+      return if discussions_to_resolve.empty?
 
-    def spam_service
-      SpamService.new(@issue, @request)
+      Discussions::ResolveService.new(project, current_user,
+                                      merge_request: merge_request_to_resolve_discussions_of,
+                                      follow_up_issue: issue).
+        execute(discussions_to_resolve)
     end
 
+    private
+
     def user_agent_detail_service
       UserAgentDetailService.new(@issue, @request)
     end
diff --git a/app/services/issues/move_service.rb b/app/services/issues/move_service.rb
index a2a5f57d069..711f4035c55 100644
--- a/app/services/issues/move_service.rb
+++ b/app/services/issues/move_service.rb
@@ -1,6 +1,6 @@
 module Issues
   class MoveService < Issues::BaseService
-    class MoveError < StandardError; end
+    MoveError = Class.new(StandardError)
 
     def execute(issue, new_project)
       @old_issue = issue
diff --git a/app/services/issues/update_service.rb b/app/services/issues/update_service.rb
index a2111b3806b..b7fe5cb168b 100644
--- a/app/services/issues/update_service.rb
+++ b/app/services/issues/update_service.rb
@@ -1,17 +1,25 @@
 module Issues
   class UpdateService < Issues::BaseService
+    include SpamCheckService
+
     def execute(issue)
+      handle_move_between_iids(issue)
+      filter_spam_check_params
       update(issue)
     end
 
+    def before_update(issue)
+      spam_check(issue, current_user)
+    end
+
     def handle_changes(issue, old_labels: [], old_mentioned_users: [])
       if has_changes?(issue, old_labels: old_labels)
         todo_service.mark_pending_todos_as_done(issue, current_user)
       end
 
       if issue.previous_changes.include?('title') ||
-         issue.previous_changes.include?('description')
-        todo_service.update_issue(issue, current_user)
+          issue.previous_changes.include?('description')
+        todo_service.update_issue(issue, current_user, old_mentioned_users)
       end
 
       if issue.previous_changes.include?('milestone_id')
@@ -29,11 +37,13 @@ module Issues
       end
 
       added_labels = issue.labels - old_labels
+
       if added_labels.present?
         notification_service.relabeled_issue(issue, added_labels, current_user)
       end
 
       added_mentions = issue.mentioned_users - old_mentioned_users
+
       if added_mentions.present?
         notification_service.new_mentions_in_issue(issue, added_mentions, current_user)
       end
@@ -47,8 +57,24 @@ module Issues
       Issues::CloseService
     end
 
+    def handle_move_between_iids(issue)
+      return unless params[:move_between_iids]
+
+      after_iid, before_iid = params.delete(:move_between_iids)
+
+      issue_before = get_issue_if_allowed(issue.project, before_iid) if before_iid
+      issue_after = get_issue_if_allowed(issue.project, after_iid) if after_iid
+
+      issue.move_between(issue_before, issue_after)
+    end
+
     private
 
+    def get_issue_if_allowed(project, iid)
+      issue = project.issues.find_by(iid: iid)
+      issue if can?(current_user, :update_issue, issue)
+    end
+
     def create_confidentiality_note(issue)
       SystemNoteService.change_issue_confidentiality(issue, issue.project, current_user)
     end
diff --git a/app/services/labels/base_service.rb b/app/services/labels/base_service.rb
new file mode 100644
index 00000000000..91d72a57b4e
--- /dev/null
+++ b/app/services/labels/base_service.rb
@@ -0,0 +1,161 @@
+module Labels
+  class BaseService < ::BaseService
+    COLOR_NAME_TO_HEX = {
+      black: '#000000',
+      silver: '#C0C0C0',
+      gray: '#808080',
+      white: '#FFFFFF',
+      maroon: '#800000',
+      red: '#FF0000',
+      purple: '#800080',
+      fuchsia: '#FF00FF',
+      green: '#008000',
+      lime: '#00FF00',
+      olive: '#808000',
+      yellow: '#FFFF00',
+      navy: '#000080',
+      blue: '#0000FF',
+      teal: '#008080',
+      aqua: '#00FFFF',
+      orange: '#FFA500',
+      aliceblue: '#F0F8FF',
+      antiquewhite: '#FAEBD7',
+      aquamarine: '#7FFFD4',
+      azure: '#F0FFFF',
+      beige: '#F5F5DC',
+      bisque: '#FFE4C4',
+      blanchedalmond: '#FFEBCD',
+      blueviolet: '#8A2BE2',
+      brown: '#A52A2A',
+      burlywood: '#DEB887',
+      cadetblue: '#5F9EA0',
+      chartreuse: '#7FFF00',
+      chocolate: '#D2691E',
+      coral: '#FF7F50',
+      cornflowerblue: '#6495ED',
+      cornsilk: '#FFF8DC',
+      crimson: '#DC143C',
+      darkblue: '#00008B',
+      darkcyan: '#008B8B',
+      darkgoldenrod: '#B8860B',
+      darkgray: '#A9A9A9',
+      darkgreen: '#006400',
+      darkgrey: '#A9A9A9',
+      darkkhaki: '#BDB76B',
+      darkmagenta: '#8B008B',
+      darkolivegreen: '#556B2F',
+      darkorange: '#FF8C00',
+      darkorchid: '#9932CC',
+      darkred: '#8B0000',
+      darksalmon: '#E9967A',
+      darkseagreen: '#8FBC8F',
+      darkslateblue: '#483D8B',
+      darkslategray: '#2F4F4F',
+      darkslategrey: '#2F4F4F',
+      darkturquoise: '#00CED1',
+      darkviolet: '#9400D3',
+      deeppink: '#FF1493',
+      deepskyblue: '#00BFFF',
+      dimgray: '#696969',
+      dimgrey: '#696969',
+      dodgerblue: '#1E90FF',
+      firebrick: '#B22222',
+      floralwhite: '#FFFAF0',
+      forestgreen: '#228B22',
+      gainsboro: '#DCDCDC',
+      ghostwhite: '#F8F8FF',
+      gold: '#FFD700',
+      goldenrod: '#DAA520',
+      greenyellow: '#ADFF2F',
+      grey: '#808080',
+      honeydew: '#F0FFF0',
+      hotpink: '#FF69B4',
+      indianred: '#CD5C5C',
+      indigo: '#4B0082',
+      ivory: '#FFFFF0',
+      khaki: '#F0E68C',
+      lavender: '#E6E6FA',
+      lavenderblush: '#FFF0F5',
+      lawngreen: '#7CFC00',
+      lemonchiffon: '#FFFACD',
+      lightblue: '#ADD8E6',
+      lightcoral: '#F08080',
+      lightcyan: '#E0FFFF',
+      lightgoldenrodyellow: '#FAFAD2',
+      lightgray: '#D3D3D3',
+      lightgreen: '#90EE90',
+      lightgrey: '#D3D3D3',
+      lightpink: '#FFB6C1',
+      lightsalmon: '#FFA07A',
+      lightseagreen: '#20B2AA',
+      lightskyblue: '#87CEFA',
+      lightslategray: '#778899',
+      lightslategrey: '#778899',
+      lightsteelblue: '#B0C4DE',
+      lightyellow: '#FFFFE0',
+      limegreen: '#32CD32',
+      linen: '#FAF0E6',
+      mediumaquamarine: '#66CDAA',
+      mediumblue: '#0000CD',
+      mediumorchid: '#BA55D3',
+      mediumpurple: '#9370DB',
+      mediumseagreen: '#3CB371',
+      mediumslateblue: '#7B68EE',
+      mediumspringgreen: '#00FA9A',
+      mediumturquoise: '#48D1CC',
+      mediumvioletred: '#C71585',
+      midnightblue: '#191970',
+      mintcream: '#F5FFFA',
+      mistyrose: '#FFE4E1',
+      moccasin: '#FFE4B5',
+      navajowhite: '#FFDEAD',
+      oldlace: '#FDF5E6',
+      olivedrab: '#6B8E23',
+      orangered: '#FF4500',
+      orchid: '#DA70D6',
+      palegoldenrod: '#EEE8AA',
+      palegreen: '#98FB98',
+      paleturquoise: '#AFEEEE',
+      palevioletred: '#DB7093',
+      papayawhip: '#FFEFD5',
+      peachpuff: '#FFDAB9',
+      peru: '#CD853F',
+      pink: '#FFC0CB',
+      plum: '#DDA0DD',
+      powderblue: '#B0E0E6',
+      rosybrown: '#BC8F8F',
+      royalblue: '#4169E1',
+      saddlebrown: '#8B4513',
+      salmon: '#FA8072',
+      sandybrown: '#F4A460',
+      seagreen: '#2E8B57',
+      seashell: '#FFF5EE',
+      sienna: '#A0522D',
+      skyblue: '#87CEEB',
+      slateblue: '#6A5ACD',
+      slategray: '#708090',
+      slategrey: '#708090',
+      snow: '#FFFAFA',
+      springgreen: '#00FF7F',
+      steelblue: '#4682B4',
+      tan: '#D2B48C',
+      thistle: '#D8BFD8',
+      tomato: '#FF6347',
+      turquoise: '#40E0D0',
+      violet: '#EE82EE',
+      wheat: '#F5DEB3',
+      whitesmoke: '#F5F5F5',
+      yellowgreen: '#9ACD32',
+      rebeccapurple: '#663399'
+    }.freeze
+
+    def convert_color_name_to_hex
+      color = params[:color]
+      color_name = color.strip.downcase
+
+      return color if color_name.start_with?('#')
+
+      COLOR_NAME_TO_HEX[color_name.to_sym] || color
+    end
+  end
+end
diff --git a/app/services/labels/create_service.rb b/app/services/labels/create_service.rb
new file mode 100644
index 00000000000..6c399c92377
--- /dev/null
+++ b/app/services/labels/create_service.rb
@@ -0,0 +1,25 @@
+module Labels
+  class CreateService < Labels::BaseService
+    def initialize(params = {})
+      @params = params.dup.with_indifferent_access
+    end
+
+    # returns the created label
+    def execute(target_params)
+      params[:color] = convert_color_name_to_hex if params[:color].present?
+
+      project_or_group = target_params[:project] || target_params[:group]
+
+      if project_or_group.present?
+        project_or_group.labels.create(params)
+      elsif target_params[:template]
+        label = Label.new(params)
+        label.template = true
+        label.save
+        label
+      else
+        Rails.logger.warn("target_params should contain :project or :group or :template, actual value: #{target_params}")
+      end
+    end
+  end
+end
diff --git a/app/services/labels/find_or_create_service.rb b/app/services/labels/find_or_create_service.rb
index d622f9edd33..940c8b333d3 100644
--- a/app/services/labels/find_or_create_service.rb
+++ b/app/services/labels/find_or_create_service.rb
@@ -3,7 +3,7 @@ module Labels
     def initialize(current_user, project, params = {})
       @current_user = current_user
       @project = project
-      @params = params.dup
+      @params = params.dup.with_indifferent_access
     end
 
     def execute(skip_authorization: false)
@@ -22,9 +22,14 @@ module Labels
       ).execute(skip_authorization: skip_authorization)
     end
 
+    # Only creates the label if current_user can do so, if the label does not exist
+    # and the user can not create the label, nil is returned
     def find_or_create_label
       new_label = available_labels.find_by(title: title)
-      new_label ||= project.labels.create(params)
+
+      if new_label.nil? && (skip_authorization || Ability.allowed?(current_user, :admin_label, project))
+        new_label = Labels::CreateService.new(params).execute(project: project)
+      end
 
       new_label
     end
diff --git a/app/services/labels/promote_service.rb b/app/services/labels/promote_service.rb
new file mode 100644
index 00000000000..76d0ba67b07
--- /dev/null
+++ b/app/services/labels/promote_service.rb
@@ -0,0 +1,71 @@
+module Labels
+  class PromoteService < BaseService
+    BATCH_SIZE = 1000
+
+    def execute(label)
+      return unless project.group &&
+          label.is_a?(ProjectLabel)
+
+      Label.transaction do
+        new_label = clone_label_to_group_label(label)
+
+        label_ids_for_merge(new_label).find_in_batches(batch_size: BATCH_SIZE) do |batched_ids|
+          update_issuables(new_label, batched_ids)
+          update_issue_board_lists(new_label, batched_ids)
+          update_priorities(new_label, batched_ids)
+          # Order is important, project labels need to be last
+          update_project_labels(batched_ids)
+        end
+
+        # We skipped validations during creation. Let's run them now, after deleting conflicting labels
+        raise ActiveRecord::RecordInvalid.new(new_label) unless new_label.valid?
+        new_label
+      end
+    end
+
+    private
+
+    def label_ids_for_merge(new_label)
+      LabelsFinder.
+        new(current_user, title: new_label.title, group_id: project.group.id).
+        execute(skip_authorization: true).
+        where.not(id: new_label).
+        select(:id)  # Can't use pluck() to avoid object-creation because of the batching
+    end
+
+    def update_issuables(new_label, label_ids)
+      LabelLink.
+        where(label: label_ids).
+        update_all(label_id: new_label)
+    end
+
+    def update_issue_board_lists(new_label, label_ids)
+      List.
+        where(label: label_ids).
+        update_all(label_id: new_label)
+    end
+
+    def update_priorities(new_label, label_ids)
+      LabelPriority.
+        where(label: label_ids).
+        update_all(label_id: new_label)
+    end
+
+    def update_project_labels(label_ids)
+      Label.where(id: label_ids).delete_all
+    end
+
+    def clone_label_to_group_label(label)
+      params = label.attributes.slice('title', 'description', 'color')
+      # Since the title of the new label has to be the same as the previous labels
+      # and we're merging old labels in batches we'll skip validation to omit 2-step
+      # merge process and do it in one batch
+      # We'll be forcing validation at the end of the transaction to ensure everything
+      # was merged correctly
+      new_label = GroupLabel.new(params.merge(group: project.group))
+      new_label.save(validate: false)
+
+      new_label
+    end
+  end
+end
diff --git a/app/services/labels/update_service.rb b/app/services/labels/update_service.rb
new file mode 100644
index 00000000000..28dcabf9541
--- /dev/null
+++ b/app/services/labels/update_service.rb
@@ -0,0 +1,15 @@
+module Labels
+  class UpdateService < Labels::BaseService
+    def initialize(params = {})
+      @params = params.dup.with_indifferent_access
+    end
+
+    # returns the updated label
+    def execute(label)
+      params[:color] = convert_color_name_to_hex if params[:color].present?
+
+      label.update(params)
+      label
+    end
+  end
+end
diff --git a/app/services/mattermost/create_team_service.rb b/app/services/mattermost/create_team_service.rb
new file mode 100644
index 00000000000..e3206810f3a
--- /dev/null
+++ b/app/services/mattermost/create_team_service.rb
@@ -0,0 +1,14 @@
+module Mattermost
+  class CreateTeamService < ::BaseService
+    def initialize(group, current_user)
+      @group, @current_user = group, current_user
+    end
+
+    def execute
+      # The user that creates the team will be Team Admin
+      Mattermost::Team.new(current_user).create(@group.mattermost_team_params)
+    rescue Mattermost::ClientError => e
+      @group.errors.add(:mattermost_team, e.message)
+    end
+  end
+end
diff --git a/app/services/members/destroy_service.rb b/app/services/members/destroy_service.rb
index 431da8372c9..2e089149ca8 100644
--- a/app/services/members/destroy_service.rb
+++ b/app/services/members/destroy_service.rb
@@ -4,7 +4,7 @@ module Members
 
     attr_accessor :source
 
-    ALLOWED_SCOPES = %i[members requesters all]
+    ALLOWED_SCOPES = %i[members requesters all].freeze
 
     def initialize(source, current_user, params = {})
       @source = source
diff --git a/app/services/merge_requests/add_todo_when_build_fails_service.rb b/app/services/merge_requests/add_todo_when_build_fails_service.rb
index d572a928a42..727768b1a39 100644
--- a/app/services/merge_requests/add_todo_when_build_fails_service.rb
+++ b/app/services/merge_requests/add_todo_when_build_fails_service.rb
@@ -1,17 +1,28 @@
 module MergeRequests
   class AddTodoWhenBuildFailsService < MergeRequests::BaseService
     # Adds a todo to the parent merge_request when a CI build fails
+    #
     def execute(commit_status)
+      return if commit_status.allow_failure?
+
       commit_status_merge_requests(commit_status) do |merge_request|
         todo_service.merge_request_build_failed(merge_request)
       end
     end
 
-    # Closes any pending build failed todos for the parent MRs when a build is retried
+    # Closes any pending build failed todos for the parent MRs when a
+    # build is retried
+    #
     def close(commit_status)
       commit_status_merge_requests(commit_status) do |merge_request|
         todo_service.merge_request_build_retried(merge_request)
       end
     end
+
+    def close_all(pipeline)
+      pipeline_merge_requests(pipeline) do |merge_request|
+        todo_service.merge_request_build_retried(merge_request)
+      end
+    end
   end
 end
diff --git a/app/services/merge_requests/base_service.rb b/app/services/merge_requests/base_service.rb
index 58f69a41e14..5a53b973059 100644
--- a/app/services/merge_requests/base_service.rb
+++ b/app/services/merge_requests/base_service.rb
@@ -38,24 +38,18 @@ module MergeRequests
 
     private
 
-    def filter_params
-      super(:merge_request)
-    end
-
-    def merge_requests_for(branch)
-      origin_merge_requests = @project.origin_merge_requests
-        .opened.where(source_branch: branch).to_a
-
-      fork_merge_requests = @project.fork_merge_requests
-        .opened.where(source_branch: branch).to_a
-
-      (origin_merge_requests + fork_merge_requests)
-        .uniq.select(&:source_project)
+    # Returns all origin and fork merge requests from `@project` satisfying passed arguments.
+    def merge_requests_for(source_branch, mr_states: [:opened])
+      MergeRequest
+        .with_state(mr_states)
+        .where(source_branch: source_branch, source_project_id: @project.id)
+        .preload(:source_project) # we don't need a #includes since we're just preloading for the #select
+        .select(&:source_project)
     end
 
     def pipeline_merge_requests(pipeline)
       merge_requests_for(pipeline.ref).each do |merge_request|
-        next unless pipeline == merge_request.pipeline
+        next unless pipeline == merge_request.head_pipeline
 
         yield merge_request
       end
@@ -63,7 +57,7 @@ module MergeRequests
 
     def commit_status_merge_requests(commit_status)
       merge_requests_for(commit_status.ref).each do |merge_request|
-        pipeline = merge_request.pipeline
+        pipeline = merge_request.head_pipeline
 
         next unless pipeline
         next unless pipeline.sha == commit_status.sha
diff --git a/app/services/merge_requests/build_service.rb b/app/services/merge_requests/build_service.rb
index f415244068b..fdce542bd9e 100644
--- a/app/services/merge_requests/build_service.rb
+++ b/app/services/merge_requests/build_service.rb
@@ -1,62 +1,93 @@
 module MergeRequests
   class BuildService < MergeRequests::BaseService
     def execute
-      merge_request = MergeRequest.new(params)
-
-      # Set MR attributes
-      merge_request.can_be_created = true
+      self.merge_request = MergeRequest.new(params)
       merge_request.compare_commits = []
-      merge_request.source_project = project unless merge_request.source_project
+      merge_request.source_project  = find_source_project
+      merge_request.target_project  = find_target_project
+      merge_request.target_branch   = find_target_branch
+      merge_request.can_be_created  = branches_valid?
 
-      merge_request.target_project = nil unless can?(current_user, :read_project, merge_request.target_project)
+      compare_branches if branches_present?
+      assign_title_and_description if merge_request.can_be_created
 
-      merge_request.target_project ||= (project.forked_from_project || project)
-      merge_request.target_branch ||= merge_request.target_project.default_branch
+      merge_request
+    end
 
-      messages = validate_branches(merge_request)
-      return build_failed(merge_request, messages) unless messages.empty?
+    private
 
-      compare = CompareService.new.execute(
-        merge_request.source_project,
-        merge_request.source_branch,
-        merge_request.target_project,
-        merge_request.target_branch,
-      )
+    attr_accessor :merge_request
 
-      merge_request.compare_commits = compare.commits
-      merge_request.compare = compare
+    delegate :target_branch, :source_branch, :source_project, :target_project, :compare_commits, :wip_title, :description, :errors, to: :merge_request
 
-      set_title_and_description(merge_request)
+    def find_source_project
+      source_project || project
     end
 
-    private
+    def find_target_project
+      return target_project if target_project.present? && can?(current_user, :read_project, target_project)
+      project.forked_from_project || project
+    end
 
-    def validate_branches(merge_request)
-      messages = []
+    def find_target_branch
+      target_branch || target_project.default_branch
+    end
 
-      if merge_request.target_branch.blank? || merge_request.source_branch.blank?
-        messages <<
-          if params[:source_branch] || params[:target_branch]
-            "You must select source and target branch"
-          end
-      end
+    def source_branch_specified?
+      params[:source_branch].present?
+    end
 
-      if merge_request.source_project == merge_request.target_project &&
-         merge_request.target_branch == merge_request.source_branch
+    def target_branch_specified?
+      params[:target_branch].present?
+    end
 
-        messages << 'You must select different branches'
-      end
+    def branches_valid?
+      return false unless source_branch_specified? || target_branch_specified?
 
-      # See if source and target branches exist
-      unless merge_request.source_project.commit(merge_request.source_branch)
-        messages << "Source branch \"#{merge_request.source_branch}\" does not exist"
-      end
+      validate_branches
+      errors.blank?
+    end
+
+    def compare_branches
+      compare = CompareService.new(
+        source_project,
+        source_branch
+      ).execute(
+        target_project,
+        target_branch
+      )
 
-      unless merge_request.target_project.commit(merge_request.target_branch)
-        messages << "Target branch \"#{merge_request.target_branch}\" does not exist"
+      if compare
+        merge_request.compare_commits = compare.commits
+        merge_request.compare = compare
       end
+    end
 
-      messages
+    def validate_branches
+      add_error('You must select source and target branch') unless branches_present?
+      add_error('You must select different branches') if same_source_and_target?
+      add_error("Source branch \"#{source_branch}\" does not exist") unless source_branch_exists?
+      add_error("Target branch \"#{target_branch}\" does not exist") unless target_branch_exists?
+    end
+
+    def add_error(message)
+      errors.add(:base, message)
+    end
+
+    def branches_present?
+      target_branch.present? && source_branch.present?
+    end
+
+    def same_source_and_target?
+      source_project == target_project && target_branch == source_branch
+    end
+
+    def source_branch_exists?
+      source_branch.blank? || source_project.commit(source_branch)
+    end
+
+    def target_branch_exists?
+      target_branch.blank? || target_project.commit(target_branch)
     end
 
     # When your branch name starts with an iid followed by a dash this pattern will be
@@ -71,17 +102,17 @@ module MergeRequests
     # - Setting the title as 'Resolves "Emoji don't show up in commit title"' if there is
     #   more than one commit in the MR
     #
-    def set_title_and_description(merge_request)
-      if match = merge_request.source_branch.match(/\A(\d+)-/)
+    def assign_title_and_description
+      if match = source_branch.match(/\A(\d+)-/)
         iid = match[1]
       end
 
-      commits = merge_request.compare_commits
+      commits = compare_commits
       if commits && commits.count == 1
         commit = commits.first
         merge_request.title = commit.title
         merge_request.description ||= commit.description.try(:strip)
-      elsif iid && (issue = merge_request.target_project.get_issue(iid)) && !issue.try(:confidential?)
+      elsif iid && issue = target_project.get_issue(iid, current_user)
         case issue
         when Issue
           merge_request.title = "Resolve \"#{issue.title}\""
@@ -89,31 +120,20 @@ module MergeRequests
           merge_request.title = "Resolve #{issue.title}"
         end
       else
-        merge_request.title = merge_request.source_branch.titleize.humanize
+        merge_request.title = source_branch.titleize.humanize
       end
 
       if iid
         closes_issue = "Closes ##{iid}"
 
-        if merge_request.description.present?
+        if description.present?
           merge_request.description += closes_issue.prepend("\n\n")
         else
           merge_request.description = closes_issue
         end
       end
 
-      merge_request.title = merge_request.wip_title if commits.empty?
-
-      merge_request
-    end
-
-    def build_failed(merge_request, messages)
-      messages.compact.each do |message|
-        merge_request.errors.add(:base, message)
-      end
-      merge_request.compare_commits = []
-      merge_request.can_be_created = false
-      merge_request
+      merge_request.title = wip_title if commits.empty?
     end
   end
 end
diff --git a/app/services/merge_requests/get_urls_service.rb b/app/services/merge_requests/get_urls_service.rb
index 1262ecbc29a..f00a33969a8 100644
--- a/app/services/merge_requests/get_urls_service.rb
+++ b/app/services/merge_requests/get_urls_service.rb
@@ -7,6 +7,8 @@ module MergeRequests
     end
 
     def execute(changes)
+      return [] unless project.printing_merge_request_link_enabled
+
       branches = get_branches(changes)
       merge_requests_map = opened_merge_requests_from_source_branches(branches)
       branches.map do |branch|
@@ -23,10 +25,7 @@ module MergeRequests
 
     def opened_merge_requests_from_source_branches(branches)
       merge_requests = MergeRequest.from_project(project).opened.from_source_branches(branches)
-      merge_requests.inject({}) do |hash, mr|
-        hash[mr.source_branch] = mr
-        hash
-      end
+      merge_requests.index_by(&:source_branch)
     end
 
     def get_branches(changes)
diff --git a/app/services/merge_requests/merge_service.rb b/app/services/merge_requests/merge_service.rb
index ab9056a3250..fac3ac7a4c7 100644
--- a/app/services/merge_requests/merge_service.rb
+++ b/app/services/merge_requests/merge_service.rb
@@ -6,21 +6,31 @@ module MergeRequests
   # Executed when you do merge via GitLab UI
   #
   class MergeService < MergeRequests::BaseService
-    attr_reader :merge_request
+    MergeError = Class.new(StandardError)
+
+    attr_reader :merge_request, :source
 
     def execute(merge_request)
       @merge_request = merge_request
 
-      return log_merge_error('Merge request is not mergeable', true) unless @merge_request.mergeable?
+      unless @merge_request.mergeable?
+        return log_merge_error('Merge request is not mergeable', save_message_on_model: true)
+      end
+
+      @source = find_merge_source
+
+      unless @source
+        return log_merge_error('No source for merge', save_message_on_model: true)
+      end
 
       merge_request.in_locked_state do
         if commit
           after_merge
           success
-        else
-          log_merge_error('Can not merge changes', true)
         end
       end
+    rescue MergeError => e
+      log_merge_error(e.message, save_message_on_model: true)
     end
 
     private
@@ -34,21 +44,15 @@ module MergeRequests
         committer: committer
       }
 
-      commit_id = repository.merge(current_user, merge_request, options)
+      commit_id = repository.merge(current_user, source, merge_request, options)
 
-      if commit_id
-        merge_request.update(merge_commit_sha: commit_id)
-      else
-        merge_request.update(merge_error: 'Conflicts detected during merge')
-        false
-      end
+      raise MergeError, 'Conflicts detected during merge' unless commit_id
+
+      merge_request.update(merge_commit_sha: commit_id)
     rescue GitHooksService::PreReceiveError => e
-      merge_request.update(merge_error: e.message)
-      false
+      raise MergeError, e.message
     rescue StandardError => e
-      merge_request.update(merge_error: "Something went wrong during merge: #{e.message}")
-      log_merge_error(e.message)
-      false
+      raise MergeError, "Something went wrong during merge: #{e.message}"
     ensure
       merge_request.update(in_progress_merge_commit_sha: nil)
     end
@@ -66,16 +70,18 @@ module MergeRequests
       @merge_request.force_remove_source_branch? ? @merge_request.author : current_user
     end
 
-    def log_merge_error(message, http_error = false)
+    def log_merge_error(message, save_message_on_model: false)
       Rails.logger.error("MergeService ERROR: #{merge_request_info} - #{message}")
 
-      error(message) if http_error
+      @merge_request.update(merge_error: message) if save_message_on_model
     end
 
     def merge_request_info
-      project = merge_request.project
+      merge_request.to_reference(full: true)
+    end
 
-      "#{project.to_reference}#{merge_request.to_reference}"
+    def find_merge_source
+      merge_request.diff_head_sha
     end
   end
 end
diff --git a/app/services/merge_requests/merge_when_build_succeeds_service.rb b/app/services/merge_requests/merge_when_build_succeeds_service.rb
deleted file mode 100644
index dc159de0058..00000000000
--- a/app/services/merge_requests/merge_when_build_succeeds_service.rb
+++ /dev/null
@@ -1,45 +0,0 @@
-module MergeRequests
-  class MergeWhenBuildSucceedsService < MergeRequests::BaseService
-    # Marks the passed `merge_request` to be merged when the build succeeds or
-    # updates the params for the automatic merge
-    def execute(merge_request)
-      merge_request.merge_params.merge!(params)
-
-      # The service is also called when the merge params are updated.
-      already_approved = merge_request.merge_when_build_succeeds?
-
-      unless already_approved
-        merge_request.merge_when_build_succeeds = true
-        merge_request.merge_user                = @current_user
-
-        SystemNoteService.merge_when_build_succeeds(merge_request, @project, @current_user, merge_request.diff_head_commit)
-      end
-
-      merge_request.save
-    end
-
-    # Triggers the automatic merge of merge_request once the pipeline succeeds
-    def trigger(pipeline)
-      return unless pipeline.success?
-
-      pipeline_merge_requests(pipeline) do |merge_request|
-        next unless merge_request.merge_when_build_succeeds?
-        next unless merge_request.mergeable?
-
-        MergeWorker.perform_async(merge_request.id, merge_request.merge_user_id, merge_request.merge_params)
-      end
-    end
-
-    # Cancels the automatic merge
-    def cancel(merge_request)
-      if merge_request.merge_when_build_succeeds? && merge_request.open?
-        merge_request.reset_merge_when_build_succeeds
-        SystemNoteService.cancel_merge_when_build_succeeds(merge_request, @project, @current_user)
-
-        success
-      else
-        error("Can't cancel the automatic merge", 406)
-      end
-    end
-  end
-end
diff --git a/app/services/merge_requests/merge_when_pipeline_succeeds_service.rb b/app/services/merge_requests/merge_when_pipeline_succeeds_service.rb
new file mode 100644
index 00000000000..aed5287940e
--- /dev/null
+++ b/app/services/merge_requests/merge_when_pipeline_succeeds_service.rb
@@ -0,0 +1,49 @@
+module MergeRequests
+  class MergeWhenPipelineSucceedsService < MergeRequests::BaseService
+    # Marks the passed `merge_request` to be merged when the pipeline succeeds or
+    # updates the params for the automatic merge
+    def execute(merge_request)
+      merge_request.merge_params.merge!(params)
+
+      # The service is also called when the merge params are updated.
+      already_approved = merge_request.merge_when_pipeline_succeeds?
+
+      unless already_approved
+        merge_request.merge_when_pipeline_succeeds = true
+        merge_request.merge_user = @current_user
+
+        SystemNoteService.merge_when_pipeline_succeeds(merge_request, @project, @current_user, merge_request.diff_head_commit)
+      end
+
+      merge_request.save
+    end
+
+    # Triggers the automatic merge of merge_request once the pipeline succeeds
+    def trigger(pipeline)
+      return unless pipeline.success?
+
+      pipeline_merge_requests(pipeline) do |merge_request|
+        next unless merge_request.merge_when_pipeline_succeeds?
+
+        unless merge_request.mergeable?
+          todo_service.merge_request_became_unmergeable(merge_request)
+          next
+        end
+
+        MergeWorker.perform_async(merge_request.id, merge_request.merge_user_id, merge_request.merge_params)
+      end
+    end
+
+    # Cancels the automatic merge
+    def cancel(merge_request)
+      if merge_request.merge_when_pipeline_succeeds? && merge_request.open?
+        merge_request.reset_merge_when_pipeline_succeeds
+        SystemNoteService.cancel_merge_when_pipeline_succeeds(merge_request, @project, @current_user)
+
+        success
+      else
+        error("Can't cancel the automatic merge", 406)
+      end
+    end
+  end
+end
diff --git a/app/services/merge_requests/refresh_service.rb b/app/services/merge_requests/refresh_service.rb
index 22596b4014a..1131d6f4913 100644
--- a/app/services/merge_requests/refresh_service.rb
+++ b/app/services/merge_requests/refresh_service.rb
@@ -11,7 +11,7 @@ module MergeRequests
       # empty diff during a manual merge
       close_merge_requests
       reload_merge_requests
-      reset_merge_when_build_succeeds
+      reset_merge_when_pipeline_succeeds
       mark_pending_todos_done
       cache_merge_requests_closing_issues
 
@@ -21,6 +21,7 @@ module MergeRequests
       end
 
       comment_mr_with_commits
+      mark_mr_as_wip_from_commits
       execute_mr_web_hooks
 
       true
@@ -41,7 +42,7 @@ module MergeRequests
         commit_ids.include?(merge_request.diff_head_sha)
       end
 
-      merge_requests.uniq.select(&:source_project).each do |merge_request|
+      filter_merge_requests(merge_requests).each do |merge_request|
         MergeRequests::PostMergeService.
           new(merge_request.target_project, @current_user).
           execute(merge_request)
@@ -55,15 +56,19 @@ module MergeRequests
     # Refresh merge request diff if we push to source or target branch of merge request
     # Note: we should update merge requests from forks too
     def reload_merge_requests
-      merge_requests = @project.merge_requests.opened.by_branch(@branch_name).to_a
-      merge_requests += fork_merge_requests.by_branch(@branch_name).to_a
-      merge_requests = filter_merge_requests(merge_requests)
+      merge_requests = @project.merge_requests.opened.
+        by_source_or_target_branch(@branch_name).to_a
 
-      merge_requests.each do |merge_request|
+      # Fork merge requests
+      merge_requests += MergeRequest.opened
+        .where(source_branch: @branch_name, source_project: @project)
+        .where.not(target_project: @project).to_a
+
+      filter_merge_requests(merge_requests).each do |merge_request|
         if merge_request.source_branch == @branch_name || force_push?
           merge_request.reload_diff
         else
-          mr_commit_ids = merge_request.commits.map(&:id)
+          mr_commit_ids = merge_request.commits_sha
           push_commit_ids = @commits.map(&:id)
           matches = mr_commit_ids & push_commit_ids
           merge_request.reload_diff if matches.any?
@@ -73,8 +78,8 @@ module MergeRequests
       end
     end
 
-    def reset_merge_when_build_succeeds
-      merge_requests_for_source_branch.each(&:reset_merge_when_build_succeeds)
+    def reset_merge_when_pipeline_succeeds
+      merge_requests_for_source_branch.each(&:reset_merge_when_pipeline_succeeds)
     end
 
     def mark_pending_todos_done
@@ -123,7 +128,7 @@ module MergeRequests
       return unless @commits.present?
 
       merge_requests_for_source_branch.each do |merge_request|
-        mr_commit_ids = Set.new(merge_request.commits.map(&:id))
+        mr_commit_ids = Set.new(merge_request.commits_sha)
 
         new_commits, existing_commits = @commits.partition do |commit|
           mr_commit_ids.include?(commit.id)
@@ -135,6 +140,28 @@ module MergeRequests
       end
     end
 
+    def mark_mr_as_wip_from_commits
+      return unless @commits.present?
+
+      merge_requests_for_source_branch.each do |merge_request|
+        commit_shas = merge_request.commits_sha
+
+        wip_commit = @commits.detect do |commit|
+          commit.work_in_progress? && commit_shas.include?(commit.sha)
+        end
+
+        if wip_commit && !merge_request.work_in_progress?
+          merge_request.update(title: merge_request.wip_title)
+          SystemNoteService.add_merge_request_wip_from_commit(
+            merge_request,
+            merge_request.project,
+            @current_user,
+            wip_commit
+          )
+        end
+      end
+    end
+
     # Call merge request webhook with update branches
     def execute_mr_web_hooks
       merge_requests_for_source_branch.each do |merge_request|
@@ -155,15 +182,7 @@ module MergeRequests
     end
 
     def merge_requests_for_source_branch
-      @source_merge_requests ||= begin
-        merge_requests = @project.origin_merge_requests.opened.where(source_branch: @branch_name).to_a
-        merge_requests += fork_merge_requests.where(source_branch: @branch_name).to_a
-        filter_merge_requests(merge_requests)
-      end
-    end
-
-    def fork_merge_requests
-      @fork_merge_requests ||= @project.fork_merge_requests.opened
+      @source_merge_requests ||= merge_requests_for(@branch_name)
     end
 
     def branch_added?
diff --git a/app/services/merge_requests/resolve_service.rb b/app/services/merge_requests/resolve_service.rb
index d22a1d3e0ad..82cd89d9a0b 100644
--- a/app/services/merge_requests/resolve_service.rb
+++ b/app/services/merge_requests/resolve_service.rb
@@ -1,7 +1,6 @@
 module MergeRequests
   class ResolveService < MergeRequests::BaseService
-    class MissingFiles < Gitlab::Conflict::ResolutionError
-    end
+    MissingFiles = Class.new(Gitlab::Conflict::ResolutionError)
 
     attr_accessor :conflicts, :rugged, :merge_index, :merge_request
 
diff --git a/app/services/merge_requests/update_service.rb b/app/services/merge_requests/update_service.rb
index a37cc3fdf21..ab7fcf3b6e2 100644
--- a/app/services/merge_requests/update_service.rb
+++ b/app/services/merge_requests/update_service.rb
@@ -1,7 +1,3 @@
-require_relative 'base_service'
-require_relative 'reopen_service'
-require_relative 'close_service'
-
 module MergeRequests
   class UpdateService < MergeRequests::BaseService
     def execute(merge_request)
@@ -11,6 +7,8 @@ module MergeRequests
       params.except!(:target_project_id)
       params.except!(:source_branch)
 
+      merge_from_slash_command(merge_request) if params[:merge]
+
       if merge_request.closed_without_fork?
         params.except!(:target_branch, :force_remove_source_branch)
       end
@@ -29,8 +27,8 @@ module MergeRequests
       end
 
       if merge_request.previous_changes.include?('title') ||
-         merge_request.previous_changes.include?('description')
-        todo_service.update_merge_request(merge_request, current_user)
+          merge_request.previous_changes.include?('description')
+        todo_service.update_merge_request(merge_request, current_user, old_mentioned_users)
       end
 
       if merge_request.previous_changes.include?('target_branch')
@@ -73,6 +71,19 @@ module MergeRequests
       end
     end
 
+    def merge_from_slash_command(merge_request)
+      last_diff_sha = params.delete(:merge)
+      return unless merge_request.mergeable_with_slash_command?(current_user, last_diff_sha: last_diff_sha)
+
+      merge_request.update(merge_error: nil)
+
+      if merge_request.head_pipeline && merge_request.head_pipeline.active?
+        MergeRequests::MergeWhenPipelineSucceedsService.new(project, current_user).execute(merge_request)
+      else
+        MergeWorker.perform_async(merge_request.id, current_user.id, {})
+      end
+    end
+
     def reopen_service
       MergeRequests::ReopenService
     end
diff --git a/app/services/note_summary.rb b/app/services/note_summary.rb
new file mode 100644
index 00000000000..a6f6320d573
--- /dev/null
+++ b/app/services/note_summary.rb
@@ -0,0 +1,20 @@
+class NoteSummary
+  attr_reader :note
+  attr_reader :metadata
+
+  def initialize(noteable, project, author, body, action: nil, commit_count: nil)
+    @note = { noteable: noteable, project: project, author: author, note: body }
+    @metadata = { action: action, commit_count: commit_count }.compact
+
+    set_commit_params if note[:noteable].is_a?(Commit)
+  end
+
+  def metadata?
+    metadata.present?
+  end
+
+  def set_commit_params
+    note.merge!(noteable_type: 'Commit', commit_id: note[:noteable].id)
+    note[:noteable] = nil
+  end
+end
diff --git a/app/services/notes/create_service.rb b/app/services/notes/create_service.rb
index 723cc0e6834..61d66a26932 100644
--- a/app/services/notes/create_service.rb
+++ b/app/services/notes/create_service.rb
@@ -1,17 +1,12 @@
 module Notes
   class CreateService < BaseService
     def execute
-      note = project.notes.new(params)
-      note.author = current_user
-      note.system = false
-
-      if note.award_emoji?
-        noteable = note.noteable
-        if noteable.user_can_award?(current_user, note.award_emoji_name)
-          todo_service.new_award_emoji(noteable, current_user)
-          return noteable.create_award_emoji(note.award_emoji_name, current_user)
-        end
-      end
+      merge_request_diff_head_sha = params.delete(:merge_request_diff_head_sha)
+
+      note = Note.new(params)
+      note.project = project
+      note.author  = current_user
+      note.system  = false
 
       # We execute commands (extracted from `params[:note]`) on the noteable
       # **before** we save the note because if the note consists of commands
@@ -19,27 +14,33 @@ module Notes
       slash_commands_service = SlashCommandsService.new(project, current_user)
 
       if slash_commands_service.supported?(note)
-        content, command_params = slash_commands_service.extract_commands(note)
+        options = { merge_request_diff_head_sha: merge_request_diff_head_sha }
+        content, command_params = slash_commands_service.extract_commands(note, options)
 
         only_commands = content.empty?
 
         note.note = content
       end
 
-      if !only_commands && note.save
+      note.run_after_commit do
         # Finish the harder work in the background
-        NewNoteWorker.perform_in(2.seconds, note.id, params)
+        NewNoteWorker.perform_async(note.id)
+      end
+
+      if !only_commands && note.save
         todo_service.new_note(note, current_user)
       end
 
-      if command_params && command_params.any?
+      if command_params.present?
         slash_commands_service.execute(command_params, note)
 
         # We must add the error after we call #save because errors are reset
         # when #save is called
         if only_commands
-          note.errors.add(:commands_only, 'Your commands have been executed!')
+          note.errors.add(:commands_only, 'Commands applied')
         end
+
+        note.commands_changes = command_params
       end
 
       note
diff --git a/app/services/notes/delete_service.rb b/app/services/notes/delete_service.rb
deleted file mode 100644
index 7f1b30ec84e..00000000000
--- a/app/services/notes/delete_service.rb
+++ /dev/null
@@ -1,8 +0,0 @@
-module Notes
-  class DeleteService < BaseService
-    def execute(note)
-      note.destroy
-      note.reset_events_cache
-    end
-  end
-end
diff --git a/app/services/notes/destroy_service.rb b/app/services/notes/destroy_service.rb
new file mode 100644
index 00000000000..b819bd17039
--- /dev/null
+++ b/app/services/notes/destroy_service.rb
@@ -0,0 +1,7 @@
+module Notes
+  class DestroyService < BaseService
+    def execute(note)
+      note.destroy
+    end
+  end
+end
diff --git a/app/services/notes/post_process_service.rb b/app/services/notes/post_process_service.rb
index e4cd3fc7833..6a10e172483 100644
--- a/app/services/notes/post_process_service.rb
+++ b/app/services/notes/post_process_service.rb
@@ -10,6 +10,9 @@ module Notes
       # Skip system notes, like status changes and cross-references and awards
       unless @note.system?
         EventCreateService.new.leave_note(@note, @note.author)
+
+        return if @note.for_personal_snippet?
+
         @note.create_cross_references!
         execute_note_hooks
       end
diff --git a/app/services/notes/slash_commands_service.rb b/app/services/notes/slash_commands_service.rb
index 2edbd39a9e7..ad1e6f6774a 100644
--- a/app/services/notes/slash_commands_service.rb
+++ b/app/services/notes/slash_commands_service.rb
@@ -3,7 +3,7 @@ module Notes
     UPDATE_SERVICES = {
       'Issue' => Issues::UpdateService,
       'MergeRequest' => MergeRequests::UpdateService
-    }
+    }.freeze
 
     def self.noteable_update_service(note)
       UPDATE_SERVICES[note.noteable_type]
@@ -12,17 +12,17 @@ module Notes
     def self.supported?(note, current_user)
       noteable_update_service(note) &&
         current_user &&
-        current_user.can?(:"update_#{note.noteable_type.underscore}", note.noteable)
+        current_user.can?(:"update_#{note.to_ability_name}", note.noteable)
     end
 
     def supported?(note)
       self.class.supported?(note, current_user)
     end
 
-    def extract_commands(note)
+    def extract_commands(note, options = {})
       return [note.note, {}] unless supported?(note)
 
-      SlashCommands::InterpretService.new(project, current_user).
+      SlashCommands::InterpretService.new(project, current_user, options).
         execute(note.note, note.noteable)
     end
 
diff --git a/app/services/notes/update_service.rb b/app/services/notes/update_service.rb
index 1361b1e0300..75fd08ea0a9 100644
--- a/app/services/notes/update_service.rb
+++ b/app/services/notes/update_service.rb
@@ -3,12 +3,13 @@ module Notes
     def execute(note)
       return note unless note.editable?
 
+      old_mentioned_users = note.mentioned_users.to_a
+
       note.update_attributes(params.merge(updated_by: current_user))
       note.create_new_cross_references!(current_user)
-      note.reset_events_cache
 
       if note.previous_changes.include?('note')
-        TodoService.new.update_note(note, current_user)
+        TodoService.new.update_note(note, current_user, old_mentioned_users)
       end
 
       note
diff --git a/app/services/notification_recipient_service.rb b/app/services/notification_recipient_service.rb
new file mode 100644
index 00000000000..940e850600f
--- /dev/null
+++ b/app/services/notification_recipient_service.rb
@@ -0,0 +1,293 @@
+#
+# Used by NotificationService to determine who should receive notification
+#
+class NotificationRecipientService
+  attr_reader :project
+  
+  def initialize(project)
+    @project = project
+  end
+
+  def build_recipients(target, current_user, action: nil, previous_assignee: nil, skip_current_user: true)
+    custom_action = build_custom_key(action, target)
+
+    recipients = target.participants(current_user)
+
+    unless NotificationSetting::EXCLUDED_WATCHER_EVENTS.include?(custom_action)
+      recipients = add_project_watchers(recipients)
+    end
+
+    recipients = add_custom_notifications(recipients, custom_action)
+    recipients = reject_mention_users(recipients)
+
+    # Re-assign is considered as a mention of the new assignee so we add the
+    # new assignee to the list of recipients after we rejected users with
+    # the "on mention" notification level
+    if [:reassign_merge_request, :reassign_issue].include?(custom_action)
+      recipients << previous_assignee if previous_assignee
+      recipients << target.assignee
+    end
+
+    recipients = reject_muted_users(recipients)
+    recipients = add_subscribed_users(recipients, target)
+
+    if [:new_issue, :new_merge_request].include?(custom_action)
+      recipients = add_labels_subscribers(recipients, target)
+    end
+
+    recipients = reject_unsubscribed_users(recipients, target)
+    recipients = reject_users_without_access(recipients, target)
+
+    recipients.delete(current_user) if skip_current_user && !current_user.notified_of_own_activity?
+
+    recipients.uniq
+  end
+
+  def build_relabeled_recipients(target, current_user, labels:)
+    recipients = add_labels_subscribers([], target, labels: labels)
+    recipients = reject_unsubscribed_users(recipients, target)
+    recipients = reject_users_without_access(recipients, target)
+    recipients.delete(current_user) unless current_user.notified_of_own_activity?
+    recipients.uniq
+  end
+
+  def build_new_note_recipients(note)
+    target = note.noteable
+
+    ability, subject = if note.for_personal_snippet?
+                         [:read_personal_snippet, note.noteable]
+                       else
+                         [:read_project, note.project]
+                       end
+
+    mentioned_users = note.mentioned_users.select { |user| user.can?(ability, subject) }
+
+    # Add all users participating in the thread (author, assignee, comment authors)
+    recipients =
+      if target.respond_to?(:participants)
+        target.participants(note.author)
+      else
+        mentioned_users
+      end
+
+    unless note.for_personal_snippet?
+      # Merge project watchers
+      recipients = add_project_watchers(recipients)
+
+      # Merge project with custom notification
+      recipients = add_custom_notifications(recipients, :new_note)
+    end
+
+    # Reject users with Mention notification level, except those mentioned in _this_ note.
+    recipients = reject_mention_users(recipients - mentioned_users)
+    recipients = recipients + mentioned_users
+
+    recipients = reject_muted_users(recipients)
+
+    recipients = add_subscribed_users(recipients, note.noteable)
+    recipients = reject_unsubscribed_users(recipients, note.noteable)
+    recipients = reject_users_without_access(recipients, note.noteable)
+
+    recipients.delete(note.author) unless note.author.notified_of_own_activity?
+    recipients.uniq
+  end
+
+  # Remove users with disabled notifications from array
+  # Also remove duplications and nil recipients
+  def reject_muted_users(users)
+    reject_users(users, :disabled)
+  end
+
+  protected
+
+  # Get project/group users with CUSTOM notification level
+  def add_custom_notifications(recipients, action)
+    user_ids = []
+
+    # Users with a notification setting on group or project
+    user_ids += user_ids_notifiable_on(project, :custom, action)
+    user_ids += user_ids_notifiable_on(project.group, :custom, action)
+
+    # Users with global level custom
+    user_ids_with_project_level_global = user_ids_notifiable_on(project, :global)
+    user_ids_with_group_level_global   = user_ids_notifiable_on(project.group, :global)
+
+    global_users_ids = user_ids_with_project_level_global.concat(user_ids_with_group_level_global)
+    user_ids += user_ids_with_global_level_custom(global_users_ids, action)
+
+    recipients.concat(User.find(user_ids))
+  end
+
+  def add_project_watchers(recipients)
+    recipients.concat(project_watchers).compact
+  end
+
+  # Get project users with WATCH notification level
+  def project_watchers
+    project_members_ids = user_ids_notifiable_on(project)
+
+    user_ids_with_project_global = user_ids_notifiable_on(project, :global)
+    user_ids_with_group_global   = user_ids_notifiable_on(project.group, :global)
+
+    user_ids = user_ids_with_global_level_watch((user_ids_with_project_global + user_ids_with_group_global).uniq)
+
+    user_ids_with_project_setting = select_project_members_ids(project, user_ids_with_project_global, user_ids)
+    user_ids_with_group_setting = select_group_members_ids(project.group, project_members_ids, user_ids_with_group_global, user_ids)
+
+    User.where(id: user_ids_with_project_setting.concat(user_ids_with_group_setting).uniq).to_a
+  end
+
+  # Remove users with notification level 'Mentioned'
+  def reject_mention_users(users)
+    reject_users(users, :mention)
+  end
+
+  def add_subscribed_users(recipients, target)
+    return recipients unless target.respond_to? :subscribers
+
+    recipients + target.subscribers(project)
+  end
+
+  def user_ids_notifiable_on(resource, notification_level = nil, action = nil)
+    return [] unless resource
+
+    if notification_level
+      settings = resource.notification_settings.where(level: NotificationSetting.levels[notification_level])
+      settings = settings.select { |setting| setting.events[action] } if action.present?
+      settings.map(&:user_id)
+    else
+      resource.notification_settings.pluck(:user_id)
+    end
+  end
+
+  # Build a list of user_ids based on project notification settings
+  def select_project_members_ids(project, global_setting, user_ids_global_level_watch)
+    user_ids = user_ids_notifiable_on(project, :watch)
+
+    # If project setting is global, add to watch list if global setting is watch
+    global_setting.each do |user_id|
+      if user_ids_global_level_watch.include?(user_id)
+        user_ids << user_id
+      end
+    end
+
+    user_ids
+  end
+
+  # Build a list of user_ids based on group notification settings
+  def select_group_members_ids(group, project_members, global_setting, user_ids_global_level_watch)
+    uids = user_ids_notifiable_on(group, :watch)
+
+    # Group setting is watch, add to user_ids list if user is not project member
+    user_ids = []
+    uids.each do |user_id|
+      if project_members.exclude?(user_id)
+        user_ids << user_id
+      end
+    end
+
+    # Group setting is global, add to user_ids list if global setting is watch
+    global_setting.each do |user_id|
+      if project_members.exclude?(user_id) && user_ids_global_level_watch.include?(user_id)
+        user_ids << user_id
+      end
+    end
+
+    user_ids
+  end
+
+  def user_ids_with_global_level_watch(ids)
+    settings_with_global_level_of(:watch, ids).pluck(:user_id)
+  end
+
+  def user_ids_with_global_level_custom(ids, action)
+    settings = settings_with_global_level_of(:custom, ids)
+    settings = settings.select { |setting| setting.events[action] }
+    settings.map(&:user_id)
+  end
+
+  def settings_with_global_level_of(level, ids)
+    NotificationSetting.where(
+      user_id: ids,
+      source_type: nil,
+      level: NotificationSetting.levels[level]
+    )
+  end
+
+  # Reject users which has certain notification level
+  #
+  # Example:
+  #   reject_users(users, :watch, project)
+  #
+  def reject_users(users, level)
+    level = level.to_s
+
+    unless NotificationSetting.levels.keys.include?(level)
+      raise 'Invalid notification level'
+    end
+
+    users = users.to_a.compact.uniq
+    users = users.select { |u| u.can?(:receive_notifications) }
+
+    users.reject do |user|
+      global_notification_setting = user.global_notification_setting
+
+      next global_notification_setting.level == level unless project
+
+      setting = user.notification_settings_for(project)
+
+      if project.group && (setting.nil? || setting.global?)
+        setting = user.notification_settings_for(project.group)
+      end
+
+      # reject users who globally set mention notification and has no setting per project/group
+      next global_notification_setting.level == level unless setting
+
+      # reject users who set mention notification in project
+      next true if setting.level == level
+
+      # reject users who have mention level in project and disabled in global settings
+      setting.global? && global_notification_setting.level == level
+    end
+  end
+
+  def reject_unsubscribed_users(recipients, target)
+    return recipients unless target.respond_to? :subscriptions
+
+    recipients.reject do |user|
+      subscription = target.subscriptions.find_by_user_id(user.id)
+      subscription && !subscription.subscribed
+    end
+  end
+
+  def reject_users_without_access(recipients, target)
+    ability = case target
+              when Issuable
+                :"read_#{target.to_ability_name}"
+              when Ci::Pipeline
+                :read_build # We have build trace in pipeline emails
+              end
+
+    return recipients unless ability
+
+    recipients.select do |user|
+      user.can?(ability, target)
+    end
+  end
+
+  def add_labels_subscribers(recipients, target, labels: nil)
+    return recipients unless target.respond_to? :labels
+
+    (labels || target.labels).each do |label|
+      recipients += label.subscribers(project)
+    end
+
+    recipients
+  end
+
+  # Build event key to search on custom notification level
+  # Check NotificationSetting::EMAIL_EVENTS
+  def build_custom_key(action, object)
+    "#{action}_#{object.class.model_name.name.underscore}".to_sym
+  end
+end
diff --git a/app/services/notification_service.rb b/app/services/notification_service.rb
index 72712afc07e..2c6f849259e 100644
--- a/app/services/notification_service.rb
+++ b/app/services/notification_service.rb
@@ -75,7 +75,7 @@ class NotificationService
   #  * watchers of the issue's labels
   #
   def relabeled_issue(issue, added_labels, current_user)
-    relabeled_resource_email(issue, added_labels, current_user, :relabeled_issue_email)
+    relabeled_resource_email(issue, issue.project, added_labels, current_user, :relabeled_issue_email)
   end
 
   # When create a merge request we should send an email to:
@@ -118,7 +118,7 @@ class NotificationService
   #  * watchers of the mr's labels
   #
   def relabeled_merge_request(merge_request, added_labels, current_user)
-    relabeled_resource_email(merge_request, added_labels, current_user, :relabeled_merge_request_email)
+    relabeled_resource_email(merge_request, merge_request.target_project, added_labels, current_user, :relabeled_merge_request_email)
   end
 
   def close_mr(merge_request, current_user)
@@ -135,7 +135,7 @@ class NotificationService
       merge_request.target_project,
       current_user,
       :merged_merge_request_email,
-      skip_current_user: !merge_request.merge_when_build_succeeds?
+      skip_current_user: !merge_request.merge_when_pipeline_succeeds?
     )
   end
 
@@ -150,7 +150,10 @@ class NotificationService
   end
 
   def resolve_all_discussions(merge_request, current_user)
-    recipients = build_recipients(merge_request, merge_request.target_project, current_user, action: "resolve_all_discussions")
+    recipients = NotificationRecipientService.new(merge_request.target_project).build_recipients(
+      merge_request,
+      current_user,
+      action: "resolve_all_discussions")
 
     recipients.each do |recipient|
       mailer.resolved_all_discussions_email(recipient.id, merge_request.id, current_user.id).deliver_later
@@ -164,57 +167,15 @@ class NotificationService
   end
 
   # Notify users on new note in system
-  #
-  # TODO: split on methods and refactor
-  #
   def new_note(note)
     return true unless note.noteable_type.present?
 
     # ignore gitlab service messages
-    return true if note.note.start_with?('Status changed to closed')
     return true if note.cross_reference? && note.system?
 
-    target = note.noteable
-
-    recipients = []
-
-    mentioned_users = note.mentioned_users
-    mentioned_users.select! do |user|
-      user.can?(:read_project, note.project)
-    end
-
-    # Add all users participating in the thread (author, assignee, comment authors)
-    participants =
-      if target.respond_to?(:participants)
-        target.participants(note.author)
-      else
-        mentioned_users
-      end
-
-    recipients = recipients.concat(participants)
-
-    # Merge project watchers
-    recipients = add_project_watchers(recipients, note.project)
-
-    # Merge project with custom notification
-    recipients = add_custom_notifications(recipients, note.project, :new_note)
-
-    # Reject users with Mention notification level, except those mentioned in _this_ note.
-    recipients = reject_mention_users(recipients - mentioned_users, note.project)
-    recipients = recipients + mentioned_users
-
-    recipients = reject_muted_users(recipients, note.project)
-
-    recipients = add_subscribed_users(recipients, note.noteable)
-    recipients = reject_unsubscribed_users(recipients, note.noteable)
-    recipients = reject_users_without_access(recipients, note.noteable)
-
-    recipients.delete(note.author)
-    recipients = recipients.uniq
-
-    # build notify method like 'note_commit_email'
-    notify_method = "note_#{note.noteable_type.underscore}_email".to_sym
+    notify_method = "note_#{note.to_ability_name}_email".to_sym
 
+    recipients = NotificationRecipientService.new(note.project).build_new_note_recipients(note)
     recipients.each do |recipient|
       mailer.send(notify_method, recipient.id, note.id).deliver_later
     end
@@ -283,7 +244,7 @@ class NotificationService
 
   def project_was_moved(project, old_path_with_namespace)
     recipients = project.team.members
-    recipients = reject_muted_users(recipients, project)
+    recipients = NotificationRecipientService.new(project).reject_muted_users(recipients)
 
     recipients.each do |recipient|
       mailer.project_was_moved_email(
@@ -295,7 +256,7 @@ class NotificationService
   end
 
   def issue_moved(issue, new_issue, current_user)
-    recipients = build_recipients(issue, issue.project, current_user)
+    recipients = NotificationRecipientService.new(issue.project).build_recipients(issue, current_user)
 
     recipients.map do |recipient|
       email = mailer.issue_moved_email(recipient, issue, new_issue, current_user)
@@ -312,196 +273,26 @@ class NotificationService
     mailer.project_was_not_exported_email(current_user, project, errors).deliver_later
   end
 
-  protected
-
-  # Get project/group users with CUSTOM notification level
-  def add_custom_notifications(recipients, project, action)
-    user_ids = []
-
-    # Users with a notification setting on group or project
-    user_ids += notification_settings_for(project, :custom, action)
-    user_ids += notification_settings_for(project.group, :custom, action)
-
-    # Users with global level custom
-    users_with_project_level_global = notification_settings_for(project, :global)
-    users_with_group_level_global   = notification_settings_for(project.group, :global)
-
-    global_users_ids = users_with_project_level_global.concat(users_with_group_level_global)
-    user_ids += users_with_global_level_custom(global_users_ids, action)
-
-    recipients.concat(User.find(user_ids))
-  end
-
-  # Get project users with WATCH notification level
-  def project_watchers(project)
-    project_members = notification_settings_for(project)
-
-    users_with_project_level_global = notification_settings_for(project, :global)
-    users_with_group_level_global   = notification_settings_for(project.group, :global)
-
-    users = users_with_global_level_watch([users_with_project_level_global, users_with_group_level_global].flatten.uniq)
-
-    users_with_project_setting = select_project_member_setting(project, users_with_project_level_global, users)
-    users_with_group_setting = select_group_member_setting(project, project_members, users_with_group_level_global, users)
-
-    User.where(id: users_with_project_setting.concat(users_with_group_setting).uniq).to_a
-  end
-
-  def notification_settings_for(resource, notification_level = nil, action = nil)
-    return [] unless resource
-
-    if notification_level
-      settings = resource.notification_settings.where(level: NotificationSetting.levels[notification_level])
-      settings = settings.select { |setting| setting.events[action] } if action.present?
-      settings.map(&:user_id)
-    else
-      resource.notification_settings.pluck(:user_id)
-    end
-  end
-
-  def users_with_global_level_watch(ids)
-    settings_with_global_level_of(:watch, ids).pluck(:user_id)
-  end
-
-  def users_with_global_level_custom(ids, action)
-    settings = settings_with_global_level_of(:custom, ids)
-    settings = settings.select { |setting| setting.events[action] }
-    settings.map(&:user_id)
-  end
-
-  def settings_with_global_level_of(level, ids)
-    NotificationSetting.where(
-      user_id: ids,
-      source_type: nil,
-      level: NotificationSetting.levels[level]
-    )
-  end
-
-  # Build a list of users based on project notifcation settings
-  def select_project_member_setting(project, global_setting, users_global_level_watch)
-    users = notification_settings_for(project, :watch)
-
-    # If project setting is global, add to watch list if global setting is watch
-    global_setting.each do |user_id|
-      if users_global_level_watch.include?(user_id)
-        users << user_id
-      end
-    end
-
-    users
-  end
-
-  # Build a list of users based on group notification settings
-  def select_group_member_setting(project, project_members, global_setting, users_global_level_watch)
-    uids = notification_settings_for(project, :watch)
-
-    # Group setting is watch, add to users list if user is not project member
-    users = []
-    uids.each do |user_id|
-      if project_members.exclude?(user_id)
-        users << user_id
-      end
-    end
-
-    # Group setting is global, add to users list if global setting is watch
-    global_setting.each do |user_id|
-      if project_members.exclude?(user_id) && users_global_level_watch.include?(user_id)
-        users << user_id
-      end
-    end
-
-    users
-  end
-
-  def add_project_watchers(recipients, project)
-    recipients.concat(project_watchers(project)).compact
-  end
-
-  # Remove users with disabled notifications from array
-  # Also remove duplications and nil recipients
-  def reject_muted_users(users, project = nil)
-    reject_users(users, :disabled, project)
-  end
-
-  # Remove users with notification level 'Mentioned'
-  def reject_mention_users(users, project = nil)
-    reject_users(users, :mention, project)
-  end
-
-  # Reject users which has certain notification level
-  #
-  # Example:
-  #   reject_users(users, :watch, project)
-  #
-  def reject_users(users, level, project = nil)
-    level = level.to_s
-
-    unless NotificationSetting.levels.keys.include?(level)
-      raise 'Invalid notification level'
-    end
-
-    users = users.to_a.compact.uniq
-    users = users.reject(&:blocked?)
-
-    users.reject do |user|
-      global_notification_setting = user.global_notification_setting
-
-      next global_notification_setting.level == level unless project
-
-      setting = user.notification_settings_for(project)
-
-      if !setting && project.group
-        setting = user.notification_settings_for(project.group)
-      end
-
-      # reject users who globally set mention notification and has no setting per project/group
-      next global_notification_setting.level == level unless setting
-
-      # reject users who set mention notification in project
-      next true if setting.level == level
-
-      # reject users who have mention level in project and disabled in global settings
-      setting.global? && global_notification_setting.level == level
-    end
-  end
-
-  def reject_unsubscribed_users(recipients, target)
-    return recipients unless target.respond_to? :subscriptions
+  def pipeline_finished(pipeline, recipients = nil)
+    email_template = "pipeline_#{pipeline.status}_email"
 
-    recipients.reject do |user|
-      subscription = target.subscriptions.find_by_user_id(user.id)
-      subscription && !subscription.subscribed
-    end
-  end
-
-  def reject_users_without_access(recipients, target)
-    return recipients unless target.is_a?(Issuable)
+    return unless mailer.respond_to?(email_template)
 
-    ability = :"read_#{target.to_ability_name}"
+    recipients ||= NotificationRecipientService.new(pipeline.project).build_recipients(
+      pipeline,
+      pipeline.user,
+      action: pipeline.status,
+      skip_current_user: false).map(&:notification_email)
 
-    recipients.select do |user|
-      user.can?(ability, target)
+    if recipients.any?
+      mailer.public_send(email_template, pipeline, recipients).deliver_later
     end
   end
 
-  def add_subscribed_users(recipients, target)
-    return recipients unless target.respond_to? :subscribers
-
-    recipients + target.subscribers
-  end
-
-  def add_labels_subscribers(recipients, target, labels: nil)
-    return recipients unless target.respond_to? :labels
-
-    (labels || target.labels).each do |label|
-      recipients += label.subscribers
-    end
-
-    recipients
-  end
+  protected
 
   def new_resource_email(target, project, method)
-    recipients = build_recipients(target, project, target.author, action: "new")
+    recipients = NotificationRecipientService.new(project).build_recipients(target, target.author, action: "new")
 
     recipients.each do |recipient|
       mailer.send(method, recipient.id, target.id).deliver_later
@@ -509,7 +300,7 @@ class NotificationService
   end
 
   def new_mentions_in_resource_email(target, project, new_mentioned_users, current_user, method)
-    recipients = build_recipients(target, project, current_user, action: "new")
+    recipients = NotificationRecipientService.new(project).build_recipients(target, current_user, action: "new")
     recipients = recipients & new_mentioned_users
 
     recipients.each do |recipient|
@@ -520,9 +311,8 @@ class NotificationService
   def close_resource_email(target, project, current_user, method, skip_current_user: true)
     action = method == :merged_merge_request_email ? "merge" : "close"
 
-    recipients = build_recipients(
+    recipients = NotificationRecipientService.new(project).build_recipients(
       target,
-      project,
       current_user,
       action: action,
       skip_current_user: skip_current_user
@@ -537,7 +327,12 @@ class NotificationService
     previous_assignee_id = previous_record(target, 'assignee_id')
     previous_assignee = User.find_by(id: previous_assignee_id) if previous_assignee_id
 
-    recipients = build_recipients(target, project, current_user, action: "reassign", previous_assignee: previous_assignee)
+    recipients = NotificationRecipientService.new(project).build_recipients(
+      target,
+      current_user,
+      action: "reassign",
+      previous_assignee: previous_assignee
+    )
 
     recipients.each do |recipient|
       mailer.send(
@@ -550,8 +345,8 @@ class NotificationService
     end
   end
 
-  def relabeled_resource_email(target, labels, current_user, method)
-    recipients = build_relabeled_recipients(target, current_user, labels: labels)
+  def relabeled_resource_email(target, project, labels, current_user, method)
+    recipients = NotificationRecipientService.new(project).build_relabeled_recipients(target, current_user, labels: labels)
     label_names = labels.map(&:name)
 
     recipients.each do |recipient|
@@ -560,55 +355,13 @@ class NotificationService
   end
 
   def reopen_resource_email(target, project, current_user, method, status)
-    recipients = build_recipients(target, project, current_user, action: "reopen")
+    recipients = NotificationRecipientService.new(project).build_recipients(target, current_user, action: "reopen")
 
     recipients.each do |recipient|
       mailer.send(method, recipient.id, target.id, status, current_user.id).deliver_later
     end
   end
 
-  def build_recipients(target, project, current_user, action: nil, previous_assignee: nil, skip_current_user: true)
-    custom_action = build_custom_key(action, target)
-
-    recipients = target.participants(current_user)
-    recipients = add_project_watchers(recipients, project)
-
-    recipients = add_custom_notifications(recipients, project, custom_action)
-    recipients = reject_mention_users(recipients, project)
-
-    recipients = recipients.uniq
-
-    # Re-assign is considered as a mention of the new assignee so we add the
-    # new assignee to the list of recipients after we rejected users with
-    # the "on mention" notification level
-    if [:reassign_merge_request, :reassign_issue].include?(custom_action)
-      recipients << previous_assignee if previous_assignee
-      recipients << target.assignee
-    end
-
-    recipients = reject_muted_users(recipients, project)
-    recipients = add_subscribed_users(recipients, target)
-
-    if [:new_issue, :new_merge_request].include?(custom_action)
-      recipients = add_labels_subscribers(recipients, target)
-    end
-
-    recipients = reject_unsubscribed_users(recipients, target)
-    recipients = reject_users_without_access(recipients, target)
-
-    recipients.delete(current_user) if skip_current_user
-
-    recipients.uniq
-  end
-
-  def build_relabeled_recipients(target, current_user, labels:)
-    recipients = add_labels_subscribers([], target, labels: labels)
-    recipients = reject_unsubscribed_users(recipients, target)
-    recipients = reject_users_without_access(recipients, target)
-    recipients.delete(current_user)
-    recipients.uniq
-  end
-
   def mailer
     Notify
   end
@@ -620,10 +373,4 @@ class NotificationService
       end
     end
   end
-
-  # Build event key to search on custom notification level
-  # Check NotificationSetting::EMAIL_EVENTS
-  def build_custom_key(action, object)
-    "#{action}_#{object.class.name.underscore}".to_sym
-  end
 end
diff --git a/app/services/oauth2/access_token_validation_service.rb b/app/services/oauth2/access_token_validation_service.rb
deleted file mode 100644
index 264fdccde8f..00000000000
--- a/app/services/oauth2/access_token_validation_service.rb
+++ /dev/null
@@ -1,42 +0,0 @@
-module Oauth2::AccessTokenValidationService
-  # Results:
-  VALID = :valid
-  EXPIRED = :expired
-  REVOKED = :revoked
-  INSUFFICIENT_SCOPE = :insufficient_scope
-
-  class << self
-    def validate(token, scopes: [])
-      if token.expired?
-        return EXPIRED
-
-      elsif token.revoked?
-        return REVOKED
-
-      elsif !self.sufficient_scope?(token, scopes)
-        return INSUFFICIENT_SCOPE
-
-      else
-        return VALID
-      end
-    end
-
-    protected
-
-    # True if the token's scope is a superset of required scopes,
-    # or the required scopes is empty.
-    def sufficient_scope?(token, scopes)
-      if scopes.blank?
-        # if no any scopes required, the scopes of token is sufficient.
-        return true
-      else
-        # If there are scopes required, then check whether
-        # the set of authorized scopes is a superset of the set of required scopes
-        required_scopes = Set.new(scopes)
-        authorized_scopes = Set.new(token.scopes)
-
-        return authorized_scopes >= required_scopes
-      end
-    end
-  end
-end
diff --git a/app/services/pages_service.rb b/app/services/pages_service.rb
new file mode 100644
index 00000000000..446eeb34d3b
--- /dev/null
+++ b/app/services/pages_service.rb
@@ -0,0 +1,15 @@
+class PagesService
+  attr_reader :data
+
+  def initialize(data)
+    @data = data
+  end
+
+  def execute
+    return unless Settings.pages.enabled
+    return unless data[:build_name] == 'pages'
+    return unless data[:build_status] == 'success'
+
+    PagesWorker.perform_async(:deploy, data[:build_id])
+  end
+end
diff --git a/app/services/projects/create_service.rb b/app/services/projects/create_service.rb
index 15d7918e7fd..fbdaa455651 100644
--- a/app/services/projects/create_service.rb
+++ b/app/services/projects/create_service.rb
@@ -12,7 +12,7 @@ module Projects
       @project = Project.new(params)
 
       # Make sure that the user is allowed to use the specified visibility level
-      unless Gitlab::VisibilityLevel.allowed_for?(current_user, params[:visibility_level])
+      unless Gitlab::VisibilityLevel.allowed_for?(current_user, @project.visibility_level)
         deny_visibility_level(@project)
         return @project
       end
@@ -22,17 +22,7 @@ module Projects
         return @project
       end
 
-      # Set project name from path
-      if @project.name.present? && @project.path.present?
-        # if both name and path set - everything is ok
-      elsif @project.path.present?
-        # Set project name from path
-        @project.name = @project.path.dup
-      elsif @project.name.present?
-        # For compatibility - set path from name
-        # TODO: remove this in 8.0
-        @project.path = @project.name.dup.parameterize
-      end
+      set_project_name_from_path
 
       # get namespace id
       namespace_id = params[:namespace_id]
@@ -95,7 +85,7 @@ module Projects
 
       unless @project.gitlab_project_import?
         @project.create_wiki unless skip_wiki?
-        @project.build_missing_services
+        create_services_from_active_templates(@project)
 
         @project.create_labels
       end
@@ -106,6 +96,8 @@ module Projects
       unless @project.group || @project.gitlab_project_import?
         @project.team << [current_user, :master, current_user]
       end
+
+      @project.group&.refresh_members_authorized_projects
     end
 
     def skip_wiki?
@@ -135,5 +127,26 @@ module Projects
 
       @project
     end
+
+    def create_services_from_active_templates(project)
+      Service.where(template: true, active: true).each do |template|
+        service = Service.build_from_template(project.id, template)
+        service.save!
+      end
+    end
+
+    def set_project_name_from_path
+      # Set project name from path
+      if @project.name.present? && @project.path.present?
+        # if both name and path set - everything is ok
+      elsif @project.path.present?
+        # Set project name from path
+        @project.name = @project.path.dup
+      elsif @project.name.present?
+        # For compatibility - set path from name
+        # TODO: remove this in 8.0
+        @project.path = @project.name.dup.parameterize
+      end
+    end
   end
 end
diff --git a/app/services/projects/destroy_service.rb b/app/services/projects/destroy_service.rb
index a08c6fcd94b..a7142d5950e 100644
--- a/app/services/projects/destroy_service.rb
+++ b/app/services/projects/destroy_service.rb
@@ -2,9 +2,9 @@ module Projects
   class DestroyService < BaseService
     include Gitlab::ShellAdapter
 
-    class DestroyError < StandardError; end
+    DestroyError = Class.new(StandardError)
 
-    DELETED_FLAG = '+deleted'
+    DELETED_FLAG = '+deleted'.freeze
 
     def async_execute
       project.transaction do
@@ -17,8 +17,6 @@ module Projects
     def execute
       return false unless can?(current_user, :remove_project, project)
 
-      project.team.truncate
-
       repo_path = project.path_with_namespace
       wiki_path = repo_path + '.wiki'
 
@@ -30,6 +28,7 @@ module Projects
       Projects::UnlinkForkService.new(project, current_user).execute
 
       Project.transaction do
+        project.team.truncate
         project.destroy!
 
         unless remove_registry_tags
diff --git a/app/services/projects/download_service.rb b/app/services/projects/download_service.rb
index f06a3d44c17..604747e39d0 100644
--- a/app/services/projects/download_service.rb
+++ b/app/services/projects/download_service.rb
@@ -2,7 +2,7 @@ module Projects
   class DownloadService < BaseService
     WHITELIST = [
       /^[^.]+\.fogbugz.com$/
-    ]
+    ].freeze
 
     def initialize(project, url)
       @project, @url = project, url
@@ -25,7 +25,7 @@ module Projects
     end
 
     def http?(url)
-      url =~ /\A#{URI::regexp(['http', 'https'])}\z/
+      url =~ /\A#{URI.regexp(%w(http https))}\z/
     end
 
     def valid_domain?(url)
diff --git a/app/services/projects/housekeeping_service.rb b/app/services/projects/housekeeping_service.rb
index c3dfc8cfbe8..4b8946f8ee2 100644
--- a/app/services/projects/housekeeping_service.rb
+++ b/app/services/projects/housekeeping_service.rb
@@ -7,6 +7,8 @@
 #
 module Projects
   class HousekeepingService < BaseService
+    include Gitlab::CurrentSettings
+
     LEASE_TIMEOUT = 3600
 
     class LeaseTaken < StandardError
@@ -20,13 +22,14 @@ module Projects
     end
 
     def execute
-      raise LeaseTaken unless try_obtain_lease
+      lease_uuid = try_obtain_lease
+      raise LeaseTaken unless lease_uuid.present?
 
-      execute_gitlab_shell_gc
+      execute_gitlab_shell_gc(lease_uuid)
     end
 
     def needed?
-      @project.pushes_since_gc >= 10
+      pushes_since_gc > 0 && period_match? && housekeeping_enabled?
     end
 
     def increment!
@@ -37,19 +40,59 @@ module Projects
 
     private
 
-    def execute_gitlab_shell_gc
-      GitGarbageCollectWorker.perform_async(@project.id)
+    def execute_gitlab_shell_gc(lease_uuid)
+      GitGarbageCollectWorker.perform_async(@project.id, task, lease_key, lease_uuid)
     ensure
-      Gitlab::Metrics.measure(:reset_pushes_since_gc) do
-        @project.reset_pushes_since_gc
+      if pushes_since_gc >= gc_period
+        Gitlab::Metrics.measure(:reset_pushes_since_gc) do
+          @project.reset_pushes_since_gc
+        end
       end
     end
 
     def try_obtain_lease
       Gitlab::Metrics.measure(:obtain_housekeeping_lease) do
-        lease = ::Gitlab::ExclusiveLease.new("project_housekeeping:#{@project.id}", timeout: LEASE_TIMEOUT)
+        lease = ::Gitlab::ExclusiveLease.new(lease_key, timeout: LEASE_TIMEOUT)
         lease.try_obtain
       end
     end
+
+    def lease_key
+      "project_housekeeping:#{@project.id}"
+    end
+
+    def pushes_since_gc
+      @project.pushes_since_gc
+    end
+
+    def task
+      if pushes_since_gc % gc_period == 0
+        :gc
+      elsif pushes_since_gc % full_repack_period == 0
+        :full_repack
+      else
+        :incremental_repack
+      end
+    end
+
+    def period_match?
+      [gc_period, full_repack_period, repack_period].any? { |period| pushes_since_gc % period == 0 }
+    end
+
+    def housekeeping_enabled?
+      current_application_settings.housekeeping_enabled
+    end
+
+    def gc_period
+      current_application_settings.housekeeping_gc_period
+    end
+
+    def full_repack_period
+      current_application_settings.housekeeping_full_repack_period
+    end
+
+    def repack_period
+      current_application_settings.housekeeping_incremental_repack_period
+    end
   end
 end
diff --git a/app/services/projects/import_export/export_service.rb b/app/services/projects/import_export/export_service.rb
index 06252c7b625..535da706159 100644
--- a/app/services/projects/import_export/export_service.rb
+++ b/app/services/projects/import_export/export_service.rb
@@ -26,7 +26,7 @@ module Projects
       end
 
       def project_tree_saver
-        Gitlab::ImportExport::ProjectTreeSaver.new(project: project, shared: @shared)
+        Gitlab::ImportExport::ProjectTreeSaver.new(project: project, current_user: @current_user, shared: @shared)
       end
 
       def uploads_saver
diff --git a/app/services/projects/import_service.rb b/app/services/projects/import_service.rb
index d7221fe993c..d484a96f785 100644
--- a/app/services/projects/import_service.rb
+++ b/app/services/projects/import_service.rb
@@ -2,16 +2,7 @@ module Projects
   class ImportService < BaseService
     include Gitlab::ShellAdapter
 
-    class Error < StandardError; end
-
-    ALLOWED_TYPES = [
-      'bitbucket',
-      'fogbugz',
-      'gitlab',
-      'github',
-      'google_code',
-      'gitlab_project'
-    ]
+    Error = Class.new(StandardError)
 
     def execute
       add_repository_to_project unless project.gitlab_project_import?
@@ -42,6 +33,7 @@ module Projects
 
     def import_repository
       begin
+        raise Error, "Blocked import URL." if Gitlab::UrlBlocker.blocked_url?(project.import_url)
         gitlab_shell.import_repository(project.repository_storage_path, project.path_with_namespace, project.import_url)
       rescue => e
         # Expire cache to prevent scenarios such as:
@@ -49,7 +41,7 @@ module Projects
         # 2. Retried import, repo is broken or not imported but +exists?+ still returns true
         project.repository.before_import if project.repository_exists?
 
-        raise Error,  "Error importing repository #{project.import_url} into #{project.path_with_namespace} - #{e.message}"
+        raise Error, "Error importing repository #{project.import_url} into #{project.path_with_namespace} - #{e.message}"
       end
     end
 
@@ -64,14 +56,11 @@ module Projects
     end
 
     def has_importer?
-      ALLOWED_TYPES.include?(project.import_type)
+      Gitlab::ImportSources.importer_names.include?(project.import_type)
     end
 
     def importer
-      return Gitlab::ImportExport::Importer.new(project) if @project.gitlab_project_import?
-
-      class_name = "Gitlab::#{project.import_type.camelize}Import::Importer"
-      class_name.constantize.new(project)
+      Gitlab::ImportSources.importer(project.import_type).new(project)
     end
 
     def unknown_url?
diff --git a/app/services/projects/participants_service.rb b/app/services/projects/participants_service.rb
index d38328403c1..e6193fcacee 100644
--- a/app/services/projects/participants_service.rb
+++ b/app/services/projects/participants_service.rb
@@ -1,7 +1,7 @@
 module Projects
   class ParticipantsService < BaseService
     attr_reader :noteable
-    
+
     def execute(noteable)
       @noteable = noteable
 
@@ -15,7 +15,8 @@ module Projects
 
       [{
         name: noteable.author.name,
-        username: noteable.author.username
+        username: noteable.author.username,
+        avatar_url: noteable.author.avatar_url
       }]
     end
 
@@ -28,14 +29,14 @@ module Projects
 
     def sorted(users)
       users.uniq.to_a.compact.sort_by(&:username).map do |user|
-        { username: user.username, name: user.name }
+        { username: user.username, name: user.name, avatar_url: user.avatar_url }
       end
     end
 
     def groups
       current_user.authorized_groups.sort_by(&:path).map do |group|
         count = group.users.count
-        { username: group.path, name: group.name, count: count }
+        { username: group.full_path, name: group.full_name, count: count, avatar_url: group.avatar_url }
       end
     end
 
diff --git a/app/services/projects/transfer_service.rb b/app/services/projects/transfer_service.rb
index 28470f59807..da6e6acd4a7 100644
--- a/app/services/projects/transfer_service.rb
+++ b/app/services/projects/transfer_service.rb
@@ -9,7 +9,7 @@
 module Projects
   class TransferService < BaseService
     include Gitlab::ShellAdapter
-    class TransferError < StandardError; end
+    TransferError = Class.new(StandardError)
 
     def execute(new_namespace)
       if allowed_transfer?(current_user, project, new_namespace)
@@ -25,11 +25,12 @@ module Projects
     end
 
     def transfer(project, new_namespace)
+      old_namespace = project.namespace
+
       Project.transaction do
         old_path = project.path_with_namespace
-        old_namespace = project.namespace
         old_group = project.group
-        new_path = File.join(new_namespace.try(:path) || '', project.path)
+        new_path = File.join(new_namespace.try(:full_path) || '', project.path)
 
         if Project.where(path: project.path, namespace_id: new_namespace.try(:id)).present?
           raise TransferError.new("Project with same path in target namespace already exists")
@@ -61,17 +62,20 @@ module Projects
         # Move missing group labels to project
         Labels::TransferService.new(current_user, old_group, project).execute
 
-        # clear project cached events
-        project.reset_events_cache
-
         # Move uploads
-        Gitlab::UploadsTransfer.new.move_project(project.path, old_namespace.path, new_namespace.path)
+        Gitlab::UploadsTransfer.new.move_project(project.path, old_namespace.full_path, new_namespace.full_path)
+
+        # Move pages
+        Gitlab::PagesTransfer.new.move_project(project.path, old_namespace.full_path, new_namespace.full_path)
 
         project.old_path_with_namespace = old_path
 
         SystemHooksService.new.execute_hooks_for(project, :transfer)
-        true
       end
+
+      refresh_permissions(old_namespace, new_namespace)
+
+      true
     end
 
     def allowed_transfer?(current_user, project, namespace)
@@ -80,5 +84,14 @@ module Projects
         namespace.id != project.namespace_id &&
         current_user.can?(:create_projects, namespace)
     end
+
+    def refresh_permissions(old_namespace, new_namespace)
+      # This ensures we only schedule 1 job for every user that has access to
+      # the namespaces.
+      user_ids = old_namespace.user_ids_for_project_authorizations |
+        new_namespace.user_ids_for_project_authorizations
+
+      UserProjectAccessChangedService.new(user_ids).execute
+    end
   end
 end
diff --git a/app/services/projects/update_pages_configuration_service.rb b/app/services/projects/update_pages_configuration_service.rb
new file mode 100644
index 00000000000..eb4809afa85
--- /dev/null
+++ b/app/services/projects/update_pages_configuration_service.rb
@@ -0,0 +1,69 @@
+module Projects
+  class UpdatePagesConfigurationService < BaseService
+    attr_reader :project
+
+    def initialize(project)
+      @project = project
+    end
+
+    def execute
+      update_file(pages_config_file, pages_config.to_json)
+      reload_daemon
+      success
+    rescue => e
+      error(e.message)
+    end
+
+    private
+
+    def pages_config
+      {
+        domains: pages_domains_config
+      }
+    end
+
+    def pages_domains_config
+      project.pages_domains.map do |domain|
+        {
+          domain: domain.domain,
+          certificate: domain.certificate,
+          key: domain.key,
+        }
+      end
+    end
+
+    def reload_daemon
+      # GitLab Pages daemon constantly watches for modification time of `pages.path`
+      # It reloads configuration when `pages.path` is modified
+      update_file(pages_update_file, SecureRandom.hex(64))
+    end
+
+    def pages_path
+      @pages_path ||= project.pages_path
+    end
+
+    def pages_config_file
+      File.join(pages_path, 'config.json')
+    end
+
+    def pages_update_file
+      File.join(::Settings.pages.path, '.update')
+    end
+
+    def update_file(file, data)
+      unless data
+        FileUtils.remove(file, force: true)
+        return
+      end
+
+      temp_file = "#{file}.#{SecureRandom.hex(16)}"
+      File.open(temp_file, 'w') do |f|
+        f.write(data)
+      end
+      FileUtils.move(temp_file, file, force: true)
+    ensure
+      # In case if the updating fails
+      FileUtils.remove(temp_file, force: true)
+    end
+  end
+end
diff --git a/app/services/projects/update_pages_service.rb b/app/services/projects/update_pages_service.rb
new file mode 100644
index 00000000000..523b9f41916
--- /dev/null
+++ b/app/services/projects/update_pages_service.rb
@@ -0,0 +1,166 @@
+module Projects
+  class UpdatePagesService < BaseService
+    BLOCK_SIZE = 32.kilobytes
+    MAX_SIZE = 1.terabyte
+    SITE_PATH = 'public/'.freeze
+
+    attr_reader :build
+
+    def initialize(project, build)
+      @project, @build = project, build
+    end
+
+    def execute
+      # Create status notifying the deployment of pages
+      @status = create_status
+      @status.enqueue!
+      @status.run!
+
+      raise 'missing pages artifacts' unless build.artifacts_file?
+      raise 'pages are outdated' unless latest?
+
+      # Create temporary directory in which we will extract the artifacts
+      FileUtils.mkdir_p(tmp_path)
+      Dir.mktmpdir(nil, tmp_path) do |archive_path|
+        extract_archive!(archive_path)
+
+        # Check if we did extract public directory
+        archive_public_path = File.join(archive_path, 'public')
+        raise 'pages miss the public folder' unless Dir.exist?(archive_public_path)
+        raise 'pages are outdated' unless latest?
+
+        deploy_page!(archive_public_path)
+        success
+      end
+    rescue => e
+      error(e.message)
+    ensure
+      build.erase_artifacts! unless build.has_expiring_artifacts?
+    end
+
+    private
+
+    def success
+      @status.success
+      super
+    end
+
+    def error(message, http_status = nil)
+      @status.allow_failure = !latest?
+      @status.description = message
+      @status.drop
+      super
+    end
+
+    def create_status
+      GenericCommitStatus.new(
+        project: project,
+        pipeline: build.pipeline,
+        user: build.user,
+        ref: build.ref,
+        stage: 'deploy',
+        name: 'pages:deploy'
+      )
+    end
+
+    def extract_archive!(temp_path)
+      if artifacts.ends_with?('.tar.gz') || artifacts.ends_with?('.tgz')
+        extract_tar_archive!(temp_path)
+      elsif artifacts.ends_with?('.zip')
+        extract_zip_archive!(temp_path)
+      else
+        raise 'unsupported artifacts format'
+      end
+    end
+
+    def extract_tar_archive!(temp_path)
+      results = Open3.pipeline(%W(gunzip -c #{artifacts}),
+                               %W(dd bs=#{BLOCK_SIZE} count=#{blocks}),
+                               %W(tar -x -C #{temp_path} #{SITE_PATH}),
+                               err: '/dev/null')
+      raise 'pages failed to extract' unless results.compact.all?(&:success?)
+    end
+
+    def extract_zip_archive!(temp_path)
+      raise 'missing artifacts metadata' unless build.artifacts_metadata?
+
+      # Calculate page size after extract
+      public_entry = build.artifacts_metadata_entry(SITE_PATH, recursive: true)
+
+      if public_entry.total_size > max_size
+        raise "artifacts for pages are too large: #{public_entry.total_size}"
+      end
+
+      # Requires UnZip at least 6.00 Info-ZIP.
+      # -n  never overwrite existing files
+      # We add * to end of SITE_PATH, because we want to extract SITE_PATH and all subdirectories
+      site_path = File.join(SITE_PATH, '*')
+      unless system(*%W(unzip -n #{artifacts} #{site_path} -d #{temp_path}))
+        raise 'pages failed to extract'
+      end
+    end
+
+    def deploy_page!(archive_public_path)
+      # Do atomic move of pages
+      # Move and removal may not be atomic, but they are significantly faster then extracting and removal
+      # 1. We move deployed public to previous public path (file removal is slow)
+      # 2. We move temporary public to be deployed public
+      # 3. We remove previous public path
+      FileUtils.mkdir_p(pages_path)
+      begin
+        FileUtils.move(public_path, previous_public_path)
+      rescue
+      end
+      FileUtils.move(archive_public_path, public_path)
+    ensure
+      FileUtils.rm_r(previous_public_path, force: true)
+    end
+
+    def latest?
+      # check if sha for the ref is still the most recent one
+      # this helps in case when multiple deployments happens
+      sha == latest_sha
+    end
+
+    def blocks
+      # Calculate dd parameters: we limit the size of pages
+      1 + max_size / BLOCK_SIZE
+    end
+
+    def max_size
+      current_application_settings.max_pages_size.megabytes || MAX_SIZE
+    end
+
+    def tmp_path
+      @tmp_path ||= File.join(::Settings.pages.path, 'tmp')
+    end
+
+    def pages_path
+      @pages_path ||= project.pages_path
+    end
+
+    def public_path
+      @public_path ||= File.join(pages_path, 'public')
+    end
+
+    def previous_public_path
+      @previous_public_path ||= File.join(pages_path, "public.#{SecureRandom.hex}")
+    end
+
+    def ref
+      build.ref
+    end
+
+    def artifacts
+      build.artifacts_file.path
+    end
+
+    def latest_sha
+      project.commit(build.ref).try(:sha).to_s
+    end
+
+    def sha
+      build.sha
+    end
+  end
+end
diff --git a/app/services/projects/update_service.rb b/app/services/projects/update_service.rb
index 921ca6748d3..55d9cb13ae4 100644
--- a/app/services/projects/update_service.rb
+++ b/app/services/projects/update_service.rb
@@ -6,10 +6,10 @@ module Projects
 
       if new_visibility && new_visibility.to_i != project.visibility_level
         unless can?(current_user, :change_visibility_level, project) &&
-          Gitlab::VisibilityLevel.allowed_for?(current_user, new_visibility)
+            Gitlab::VisibilityLevel.allowed_for?(current_user, new_visibility)
 
           deny_visibility_level(project, new_visibility)
-          return project
+          return error('Visibility level unallowed')
         end
       end
 
@@ -22,7 +22,13 @@ module Projects
       if project.update_attributes(params.except(:default_branch))
         if project.previous_changes.include?('path')
           project.rename_repo
+        else
+          system_hook_service.execute_hooks_for(project, :update)
         end
+
+        success
+      else
+        error('Project could not be updated')
       end
     end
   end
diff --git a/app/services/projects/upload_service.rb b/app/services/projects/upload_service.rb
index 012e82a7704..be34d4fa9b8 100644
--- a/app/services/projects/upload_service.rb
+++ b/app/services/projects/upload_service.rb
@@ -5,7 +5,7 @@ module Projects
     end
 
     def execute
-      return nil unless @file and @file.size <= max_attachment_size
+      return nil unless @file && @file.size <= max_attachment_size
 
       uploader = FileUploader.new(@project)
       uploader.store!(@file)
diff --git a/app/services/protected_branches/api_update_service.rb b/app/services/protected_branches/api_update_service.rb
index 050cb3b738b..bdb0e0cc8bf 100644
--- a/app/services/protected_branches/api_update_service.rb
+++ b/app/services/protected_branches/api_update_service.rb
@@ -15,16 +15,16 @@ module ProtectedBranches
 
         case @developers_can_push
         when true
-          params.merge!(push_access_levels_attributes: [{ access_level: Gitlab::Access::DEVELOPER }])
+          params[:push_access_levels_attributes] = [{ access_level: Gitlab::Access::DEVELOPER }]
         when false
-          params.merge!(push_access_levels_attributes: [{ access_level: Gitlab::Access::MASTER }])
+          params[:push_access_levels_attributes] = [{ access_level: Gitlab::Access::MASTER }]
         end
 
         case @developers_can_merge
         when true
-          params.merge!(merge_access_levels_attributes: [{ access_level: Gitlab::Access::DEVELOPER }])
+          params[:merge_access_levels_attributes] = [{ access_level: Gitlab::Access::DEVELOPER }]
         when false
-          params.merge!(merge_access_levels_attributes: [{ access_level: Gitlab::Access::MASTER }])
+          params[:merge_access_levels_attributes] = [{ access_level: Gitlab::Access::MASTER }]
         end
 
         service = ProtectedBranches::UpdateService.new(@project, @current_user, @params)
diff --git a/app/services/search/global_service.rb b/app/services/search/global_service.rb
index aa9837038a6..a3c655493a5 100644
--- a/app/services/search/global_service.rb
+++ b/app/services/search/global_service.rb
@@ -9,9 +9,16 @@ module Search
     def execute
       group = Group.find_by(id: params[:group_id]) if params[:group_id].present?
       projects = ProjectsFinder.new.execute(current_user)
-      projects = projects.in_namespace(group.id) if group
+
+      if group
+        projects = projects.inside_path(group.full_path)
+      end
 
       Gitlab::SearchResults.new(current_user, projects, params[:search])
     end
+
+    def scope
+      @scope ||= %w[issues merge_requests milestones].delete(params[:scope]) { 'projects' }
+    end
   end
 end
diff --git a/app/services/search/project_service.rb b/app/services/search/project_service.rb
index 4b500914cfb..9a22abae635 100644
--- a/app/services/search/project_service.rb
+++ b/app/services/search/project_service.rb
@@ -12,5 +12,9 @@ module Search
                                        params[:search],
                                        params[:repository_ref])
     end
+
+    def scope
+      @scope ||= %w[notes issues merge_requests milestones wiki_blobs commits].delete(params[:scope]) { 'blobs' }
+    end
   end
 end
diff --git a/app/services/search/snippet_service.rb b/app/services/search/snippet_service.rb
index 0b3e713e220..4f161beea4d 100644
--- a/app/services/search/snippet_service.rb
+++ b/app/services/search/snippet_service.rb
@@ -11,5 +11,9 @@ module Search
 
       Gitlab::SnippetSearchResults.new(snippets, params[:search])
     end
+
+    def scope
+      @scope ||= %w[snippet_titles].delete(params[:scope]) { 'snippet_blobs' }
+    end
   end
 end
diff --git a/app/services/search_service.rb b/app/services/search_service.rb
new file mode 100644
index 00000000000..8d46a8dab3e
--- /dev/null
+++ b/app/services/search_service.rb
@@ -0,0 +1,63 @@
+class SearchService
+  include Gitlab::Allowable
+
+  def initialize(current_user, params = {})
+    @current_user = current_user
+    @params = params.dup
+  end
+
+  def project
+    return @project if defined?(@project)
+
+    @project =
+      if params[:project_id].present?
+        the_project = Project.find_by(id: params[:project_id])
+        can?(current_user, :download_code, the_project) ? the_project : nil
+      else
+        nil
+      end
+  end
+
+  def group
+    return @group if defined?(@group)
+
+    @group =
+      if params[:group_id].present?
+        the_group = Group.find_by(id: params[:group_id])
+        can?(current_user, :read_group, the_group) ? the_group : nil
+      else
+        nil
+      end
+  end
+
+  def show_snippets?
+    return @show_snippets if defined?(@show_snippets)
+
+    @show_snippets = params[:snippets] == 'true'
+  end
+
+  delegate :scope, to: :search_service
+
+  def search_results
+    @search_results ||= search_service.execute
+  end
+
+  def search_objects
+    @search_objects ||= search_results.objects(scope, params[:page])
+  end
+
+  private
+
+  def search_service
+    @search_service ||=
+      if project
+        Search::ProjectService.new(project, current_user, params)
+      elsif show_snippets?
+        Search::SnippetService.new(current_user, params)
+      else
+        Search::GlobalService.new(current_user, params)
+      end
+  end
+
+  attr_reader :current_user, :params
+end
diff --git a/app/services/slash_commands/interpret_service.rb b/app/services/slash_commands/interpret_service.rb
index 5a81194a5f4..595653ea58a 100644
--- a/app/services/slash_commands/interpret_service.rb
+++ b/app/services/slash_commands/interpret_service.rb
@@ -2,7 +2,7 @@ module SlashCommands
   class InterpretService < BaseService
     include Gitlab::SlashCommands::Dsl
 
-    attr_reader :issuable
+    attr_reader :issuable, :options
 
     # Takes a text and interprets the commands that are extracted from it.
     # Returns the content without commands, and hash of changes to be applied to a record.
@@ -13,7 +13,8 @@ module SlashCommands
       opts = {
         issuable:     issuable,
         current_user: current_user,
-        project:      project
+        project:      project,
+        params:       params
       }
 
       content, commands = extractor.extract_commands(content, opts)
@@ -58,6 +59,17 @@ module SlashCommands
       @updates[:state_event] = 'reopen'
     end
 
+    desc 'Merge (when the pipeline succeeds)'
+    condition do
+      last_diff_sha = params && params[:merge_request_diff_head_sha]
+      issuable.is_a?(MergeRequest) &&
+        issuable.persisted? &&
+        issuable.mergeable_with_slash_command?(current_user, autocomplete_precheck: !last_diff_sha, last_diff_sha: last_diff_sha)
+    end
+    command :merge do
+      @updates[:merge] = params[:merge_request_diff_head_sha]
+    end
+
     desc 'Change title'
     params '<New title>'
     condition do
@@ -193,7 +205,7 @@ module SlashCommands
     desc 'Subscribe'
     condition do
       issuable.persisted? &&
-        !issuable.subscribed?(current_user)
+        !issuable.subscribed?(current_user, project)
     end
     command :subscribe do
       @updates[:subscription_event] = 'subscribe'
@@ -202,7 +214,7 @@ module SlashCommands
     desc 'Unsubscribe'
     condition do
       issuable.persisted? &&
-        issuable.subscribed?(current_user)
+        issuable.subscribed?(current_user, project)
     end
     command :unsubscribe do
       @updates[:subscription_event] = 'unsubscribe'
@@ -243,11 +255,79 @@ module SlashCommands
       @updates[:wip_event] = issuable.work_in_progress? ? 'unwip' : 'wip'
     end
 
+    desc 'Toggle emoji reward'
+    params ':emoji:'
+    condition do
+      issuable.persisted?
+    end
+    command :award do |emoji|
+      name = award_emoji_name(emoji)
+      if name && issuable.user_can_award?(current_user, name)
+        @updates[:emoji_award] = name
+      end
+    end
+
+    desc 'Set time estimate'
+    params '<1w 3d 2h 14m>'
+    condition do
+      current_user.can?(:"admin_#{issuable.to_ability_name}", project)
+    end
+    command :estimate do |raw_duration|
+      time_estimate = Gitlab::TimeTrackingFormatter.parse(raw_duration)
+
+      if time_estimate
+        @updates[:time_estimate] = time_estimate
+      end
+    end
+
+    desc 'Add or substract spent time'
+    params '<1h 30m | -1h 30m>'
+    condition do
+      current_user.can?(:"admin_#{issuable.to_ability_name}", issuable)
+    end
+    command :spend do |raw_duration|
+      time_spent = Gitlab::TimeTrackingFormatter.parse(raw_duration)
+
+      if time_spent
+        @updates[:spend_time] = { duration: time_spent, user: current_user }
+      end
+    end
+
+    desc 'Remove time estimate'
+    condition do
+      issuable.persisted? &&
+        current_user.can?(:"admin_#{issuable.to_ability_name}", project)
+    end
+    command :remove_estimate do
+      @updates[:time_estimate] = 0
+    end
+
+    desc 'Remove spent time'
+    condition do
+      issuable.persisted? &&
+        current_user.can?(:"admin_#{issuable.to_ability_name}", project)
+    end
+    command :remove_time_spent do
+      @updates[:spend_time] = { duration: :reset, user: current_user }
+    end
+
     # This is a dummy command, so that it appears in the autocomplete commands
     desc 'CC'
     params '@user'
     command :cc
 
+    desc 'Defines target branch for MR'
+    params '<Local branch name>'
+    condition do
+      issuable.respond_to?(:target_branch) &&
+        (current_user.can?(:"update_#{issuable.to_ability_name}", issuable) ||
+          issuable.new_record?)
+    end
+    command :target_branch do |target_branch_param|
+      branch_name = target_branch_param.strip
+      @updates[:target_branch] = branch_name if project.repository.branch_names.include?(branch_name)
+    end
+
     def find_label_ids(labels_param)
       label_ids_by_reference = extract_references(labels_param, :label).map(&:id)
       labels_ids_by_name = LabelsFinder.new(current_user, project_id: project.id, name: labels_param.split).execute.select(:id)
@@ -261,5 +341,10 @@ module SlashCommands
 
       ext.references(type)
     end
+
+    def award_emoji_name(emoji)
+      match = emoji.match(Banzai::Filter::EmojiFilter.emoji_pattern)
+      match[1] if match
+    end
   end
 end
diff --git a/app/services/spam_check_service.rb b/app/services/spam_check_service.rb
new file mode 100644
index 00000000000..11030bee8f1
--- /dev/null
+++ b/app/services/spam_check_service.rb
@@ -0,0 +1,27 @@
+# SpamCheckService
+#
+# Provide helper methods for checking if a given spammable object has
+# potential spam data.
+#
+# Dependencies:
+# - params with :request
+#
+module SpamCheckService
+  def filter_spam_check_params
+    @request            = params.delete(:request)
+    @api                = params.delete(:api)
+    @recaptcha_verified = params.delete(:recaptcha_verified)
+    @spam_log_id        = params.delete(:spam_log_id)
+  end
+
+  # In order to be proceed to the spam check process, @spammable has to be
+  # a dirty instance, which means it should be already assigned with the new
+  # attribute values.
+  def spam_check(spammable, user)
+    spam_service = SpamService.new(spammable, @request)
+
+    spam_service.when_recaptcha_verified(@recaptcha_verified, @api) do
+      user.spam_logs.find_by(id: @spam_log_id)&.update!(recaptcha_verified: true)
+    end
+  end
+end
diff --git a/app/services/spam_service.rb b/app/services/spam_service.rb
index 48903291799..3e65b7d31a3 100644
--- a/app/services/spam_service.rb
+++ b/app/services/spam_service.rb
@@ -1,5 +1,6 @@
 class SpamService
   attr_accessor :spammable, :request, :options
+  attr_reader :spam_log
 
   def initialize(spammable, request = nil)
     @spammable = spammable
@@ -16,15 +17,6 @@ class SpamService
     end
   end
 
-  def check(api = false)
-    return false unless request && check_for_spam?
-
-    return false unless akismet.is_spam?
-
-    create_spam_log(api)
-    true
-  end
-
   def mark_as_spam!
     return false unless spammable.submittable_as_spam?
 
@@ -35,8 +27,30 @@ class SpamService
     end
   end
 
+  def when_recaptcha_verified(recaptcha_verified, api = false)
+    # In case it's a request which is already verified through recaptcha, yield
+    # block.
+    if recaptcha_verified
+      yield
+    else
+      # Otherwise, it goes to Akismet and check if it's a spam. If that's the
+      # case, it assigns spammable record as "spam" and create a SpamLog record.
+      spammable.spam = check(api)
+      spammable.spam_log = spam_log
+    end
+  end
+
   private
 
+  def check(api)
+    return false unless request && check_for_spam?
+
+    return false unless akismet.is_spam?
+
+    create_spam_log(api)
+    true
+  end
+
   def akismet
     @akismet ||= AkismetService.new(
       spammable_owner,
@@ -63,7 +77,7 @@ class SpamService
   end
 
   def create_spam_log(api)
-    SpamLog.create(
+    @spam_log = SpamLog.create!(
       {
         user_id: spammable_owner_id,
         title: spammable.spam_title,
diff --git a/app/services/system_hooks_service.rb b/app/services/system_hooks_service.rb
index a2bfa422c9d..af0ddbe5934 100644
--- a/app/services/system_hooks_service.rb
+++ b/app/services/system_hooks_service.rb
@@ -24,21 +24,16 @@ class SystemHooksService
         key: model.key,
         id: model.id
       )
+ 
       if model.user
-        data.merge!(
-          username: model.user.username
-        )
+        data[:username] = model.user.username
       end
     when Project
       data.merge!(project_data(model))
 
       if event == :rename || event == :transfer
-        data.merge!({
-          old_path_with_namespace: model.old_path_with_namespace
-        })
+        data[:old_path_with_namespace] = model.old_path_with_namespace
       end
-
-      data
     when User
       data.merge!({
         name: model.name,
@@ -61,6 +56,8 @@ class SystemHooksService
     when GroupMember
       data.merge!(group_member_data(model))
     end
+    
+    data
   end
 
   def build_event_name(model, event)
@@ -86,7 +83,7 @@ class SystemHooksService
       project_id: model.id,
       owner_name: owner.name,
       owner_email: owner.respond_to?(:email) ? owner.email : "",
-      project_visibility: Project.visibility_levels.key(model.visibility_level_field).downcase
+      project_visibility: Project.visibility_levels.key(model.visibility_level_value).downcase
     }
   end
 
@@ -103,7 +100,7 @@ class SystemHooksService
       user_email:                   model.user.email,
       user_id:                      model.user.id,
       access_level:                 model.human_access,
-      project_visibility:           Project.visibility_levels.key(project.visibility_level_field).downcase
+      project_visibility:           Project.visibility_levels.key(project.visibility_level_value).downcase
     }
   end
 
diff --git a/app/services/system_note_service.rb b/app/services/system_note_service.rb
index 1ce66d50368..d3e502b66dd 100644
--- a/app/services/system_note_service.rb
+++ b/app/services/system_note_service.rb
@@ -21,12 +21,12 @@ module SystemNoteService
     total_count  = new_commits.length + existing_commits.length
     commits_text = "#{total_count} commit".pluralize(total_count)
 
-    body = "Added #{commits_text}:\n\n"
+    body = "added #{commits_text}\n\n"
     body << existing_commit_summary(noteable, existing_commits, oldrev)
     body << new_commit_summary(new_commits).join("\n")
     body << "\n\n[Compare with previous version](#{diff_comparison_url(noteable, project, oldrev)})"
 
-    create_note(noteable: noteable, project: project, author: author, note: body)
+    create_note(NoteSummary.new(noteable, project, author, body, action: 'commit', commit_count: total_count))
   end
 
   # Called when the assignee of a Noteable is changed or removed
@@ -38,15 +38,15 @@ module SystemNoteService
   #
   # Example Note text:
   #
-  #   "Assignee removed"
+  #   "removed assignee"
   #
-  #   "Reassigned to @rspeicher"
+  #   "assigned to @rspeicher"
   #
   # Returns the created Note object
   def change_assignee(noteable, project, author, assignee)
-    body = assignee.nil? ? 'Assignee removed' : "Reassigned to #{assignee.to_reference}"
+    body = assignee.nil? ? 'removed assignee' : "assigned to #{assignee.to_reference}"
 
-    create_note(noteable: noteable, project: project, author: author, note: body)
+    create_note(NoteSummary.new(noteable, project, author, body, action: 'assignee'))
   end
 
   # Called when one or more labels on a Noteable are added and/or removed
@@ -59,11 +59,11 @@ module SystemNoteService
   #
   # Example Note text:
   #
-  #   "Added ~1 and removed ~2 ~3 labels"
+  #   "added ~1 and removed ~2 ~3 labels"
   #
-  #   "Added ~4 label"
+  #   "added ~4 label"
   #
-  #   "Removed ~5 label"
+  #   "removed ~5 label"
   #
   # Returns the created Note object
   def change_label(noteable, project, author, added_labels, removed_labels)
@@ -85,9 +85,8 @@ module SystemNoteService
     end
 
     body << ' ' << 'label'.pluralize(labels_count)
-    body = body.capitalize
 
-    create_note(noteable: noteable, project: project, author: author, note: body)
+    create_note(NoteSummary.new(noteable, project, author, body, action: 'label'))
   end
 
   # Called when the milestone of a Noteable is changed
@@ -99,16 +98,70 @@ module SystemNoteService
   #
   # Example Note text:
   #
-  #   "Milestone removed"
+  #   "removed milestone"
   #
-  #   "Miletone changed to 7.11"
+  #   "changed milestone to 7.11"
   #
   # Returns the created Note object
   def change_milestone(noteable, project, author, milestone)
-    body = 'Milestone '
-    body += milestone.nil? ? 'removed' : "changed to #{milestone.to_reference(project)}"
+    body = milestone.nil? ? 'removed milestone' : "changed milestone to #{milestone.to_reference(project)}"
 
-    create_note(noteable: noteable, project: project, author: author, note: body)
+    create_note(NoteSummary.new(noteable, project, author, body, action: 'milestone'))
+  end
+
+  # Called when the estimated time of a Noteable is changed
+  #
+  # noteable      - Noteable object
+  # project       - Project owning noteable
+  # author        - User performing the change
+  # time_estimate - Estimated time
+  #
+  # Example Note text:
+  #
+  #   "removed time estimate"
+  #
+  #   "changed time estimate to 3d 5h"
+  #
+  # Returns the created Note object
+
+  def change_time_estimate(noteable, project, author)
+    parsed_time = Gitlab::TimeTrackingFormatter.output(noteable.time_estimate)
+    body = if noteable.time_estimate == 0
+             "removed time estimate"
+           else
+             "changed time estimate to #{parsed_time}"
+           end
+
+    create_note(NoteSummary.new(noteable, project, author, body, action: 'time_tracking'))
+  end
+
+  # Called when the spent time of a Noteable is changed
+  #
+  # noteable   - Noteable object
+  # project    - Project owning noteable
+  # author     - User performing the change
+  # time_spent - Spent time
+  #
+  # Example Note text:
+  #
+  #   "removed time spent"
+  #
+  #   "added 2h 30m of time spent"
+  #
+  # Returns the created Note object
+
+  def change_time_spent(noteable, project, author)
+    time_spent = noteable.time_spent
+
+    if time_spent == :reset
+      body = "removed time spent"
+    else
+      parsed_time = Gitlab::TimeTrackingFormatter.output(time_spent.abs)
+      action = time_spent > 0 ? 'added' : 'subtracted'
+      body = "#{action} #{parsed_time} of time spent"
+    end
+
+    create_note(NoteSummary.new(noteable, project, author, body, action: 'time_tracking'))
   end
 
   # Called when the status of a Noteable is changed
@@ -121,48 +174,66 @@ module SystemNoteService
   #
   # Example Note text:
   #
-  #   "Status changed to merged"
+  #   "merged"
   #
-  #   "Status changed to closed by bc17db76"
+  #   "closed via bc17db76"
   #
   # Returns the created Note object
   def change_status(noteable, project, author, status, source)
-    body = "Status changed to #{status}"
-    body << " by #{source.gfm_reference(project)}" if source
+    body = status.dup
+    body << " via #{source.gfm_reference(project)}" if source
 
-    create_note(noteable: noteable, project: project, author: author, note: body)
+    create_note(NoteSummary.new(noteable, project, author, body, action: 'status'))
   end
 
-  # Called when 'merge when build succeeds' is executed
-  def merge_when_build_succeeds(noteable, project, author, last_commit)
-    body = "Enabled an automatic merge when the build for #{last_commit.to_reference(project)} succeeds"
+  # Called when 'merge when pipeline succeeds' is executed
+  def merge_when_pipeline_succeeds(noteable, project, author, last_commit)
+    body = "enabled an automatic merge when the pipeline for #{last_commit.to_reference(project)} succeeds"
 
-    create_note(noteable: noteable, project: project, author: author, note: body)
+    create_note(NoteSummary.new(noteable, project, author, body, action: 'merge'))
   end
 
-  # Called when 'merge when build succeeds' is canceled
-  def cancel_merge_when_build_succeeds(noteable, project, author)
-    body = 'Canceled the automatic merge'
+  # Called when 'merge when pipeline succeeds' is canceled
+  def cancel_merge_when_pipeline_succeeds(noteable, project, author)
+    body = 'canceled the automatic merge'
 
-    create_note(noteable: noteable, project: project, author: author, note: body)
+    create_note(NoteSummary.new(noteable, project, author, body, action: 'merge'))
   end
 
   def remove_merge_request_wip(noteable, project, author)
-    body = 'Unmarked this merge request as a Work In Progress'
+    body = 'unmarked as a **Work In Progress**'
 
-    create_note(noteable: noteable, project: project, author: author, note: body)
+    create_note(NoteSummary.new(noteable, project, author, body, action: 'title'))
   end
 
   def add_merge_request_wip(noteable, project, author)
-    body = 'Marked this merge request as a **Work In Progress**'
+    body = 'marked as a **Work In Progress**'
 
-    create_note(noteable: noteable, project: project, author: author, note: body)
+    create_note(NoteSummary.new(noteable, project, author, body, action: 'title'))
+  end
+
+  def add_merge_request_wip_from_commit(noteable, project, author, commit)
+    body = "marked as a **Work In Progress** from #{commit.to_reference(project)}"
+
+    create_note(NoteSummary.new(noteable, project, author, body, action: 'title'))
   end
 
   def self.resolve_all_discussions(merge_request, project, author)
-    body = "Resolved all discussions"
+    body = "resolved all discussions"
+
+    create_note(NoteSummary.new(merge_request, project, author, body, action: 'discussion'))
+  end
+
+  def discussion_continued_in_issue(discussion, project, author, issue)
+    body = "created #{issue.to_reference} to continue this discussion"
 
-    create_note(noteable: merge_request, project: project, author: author, note: body)
+    note_params = discussion.reply_attributes.merge(project: project, author: author, note: body)
+    note_params[:type] = note_params.delete(:note_type)
+
+    note = Note.create(note_params.merge(system: true))
+    note.system_note_metadata = SystemNoteMetadata.new({ action: 'discussion' })
+
+    note
   end
 
   # Called when the title of a Noteable is changed
@@ -174,7 +245,7 @@ module SystemNoteService
   #
   # Example Note text:
   #
-  #   "Title changed from **Old** to **New**"
+  #   "changed title from **Old** to **New**"
   #
   # Returns the created Note object
   def change_title(noteable, project, author, old_title)
@@ -185,8 +256,9 @@ module SystemNoteService
     marked_old_title = Gitlab::Diff::InlineDiffMarker.new(old_title).mark(old_diffs, mode: :deletion, markdown: true)
     marked_new_title = Gitlab::Diff::InlineDiffMarker.new(new_title).mark(new_diffs, mode: :addition, markdown: true)
 
-    body = "Changed title: **#{marked_old_title}** → **#{marked_new_title}**"
-    create_note(noteable: noteable, project: project, author: author, note: body)
+    body = "changed title from **#{marked_old_title}** to **#{marked_new_title}**"
+
+    create_note(NoteSummary.new(noteable, project, author, body, action: 'title'))
   end
 
   # Called when the confidentiality changes
@@ -197,12 +269,13 @@ module SystemNoteService
   #
   # Example Note text:
   #
-  # "Made the issue confidential"
+  #   "made the issue confidential"
   #
   # Returns the created Note object
   def change_issue_confidentiality(issue, project, author)
-    body = issue.confidential ? 'Made the issue confidential' : 'Made the issue visible'
-    create_note(noteable: issue, project: project, author: author, note: body)
+    body = issue.confidential ? 'made the issue confidential' : 'made the issue visible to everyone'
+
+    create_note(NoteSummary.new(issue, project, author, body, action: 'confidentiality'))
   end
 
   # Called when a branch in Noteable is changed
@@ -216,12 +289,13 @@ module SystemNoteService
   #
   # Example Note text:
   #
-  #   "Target branch changed from `Old` to `New`"
+  #   "changed target branch from `Old` to `New`"
   #
   # Returns the created Note object
   def change_branch(noteable, project, author, branch_type, old_branch, new_branch)
-    body = "#{branch_type} branch changed from `#{old_branch}` to `#{new_branch}`".capitalize
-    create_note(noteable: noteable, project: project, author: author, note: body)
+    body = "changed #{branch_type} branch from `#{old_branch}` to `#{new_branch}`"
+
+    create_note(NoteSummary.new(noteable, project, author, body, action: 'branch'))
   end
 
   # Called when a branch in Noteable is added or deleted
@@ -235,7 +309,7 @@ module SystemNoteService
   #
   # Example Note text:
   #
-  #   "Restored target branch `feature`"
+  #   "restored target branch `feature`"
   #
   # Returns the created Note object
   def change_branch_presence(noteable, project, author, branch_type, branch, presence)
@@ -246,19 +320,21 @@ module SystemNoteService
         'deleted'
       end
 
-    body = "#{verb} #{branch_type} branch `#{branch}`".capitalize
-    create_note(noteable: noteable, project: project, author: author, note: body)
+    body = "#{verb} #{branch_type} branch `#{branch}`"
+
+    create_note(NoteSummary.new(noteable, project, author, body, action: 'branch'))
   end
 
   # Called when a branch is created from the 'new branch' button on a issue
   # Example note text:
   #
-  #   "Started branch `201-issue-branch-button`"
+  #   "created branch `201-issue-branch-button`"
   def new_issue_branch(issue, project, author, branch)
     link = url_helpers.namespace_project_compare_url(project.namespace, project, from: project.default_branch, to: branch)
 
-    body = "Started branch [`#{branch}`](#{link})"
-    create_note(noteable: issue, project: project, author: author, note: body)
+    body = "created branch [`#{branch}`](#{link})"
+
+    create_note(NoteSummary.new(issue, project, author, body, action: 'branch'))
   end
 
   # Called when a Mentionable references a Noteable
@@ -269,11 +345,11 @@ module SystemNoteService
   #
   # Example Note text:
   #
-  #   "Mentioned in #1"
+  #   "mentioned in #1"
   #
-  #   "Mentioned in !2"
+  #   "mentioned in !2"
   #
-  #   "Mentioned in 54f7727c"
+  #   "mentioned in 54f7727c"
   #
   # See cross_reference_note_content.
   #
@@ -282,33 +358,22 @@ module SystemNoteService
     return if cross_reference_disallowed?(noteable, mentioner)
 
     gfm_reference = mentioner.gfm_reference(noteable.project)
-
-    note_options = {
-      project: noteable.project,
-      author:  author,
-      note:    cross_reference_note_content(gfm_reference)
-    }
-
-    if noteable.kind_of?(Commit)
-      note_options.merge!(noteable_type: 'Commit', commit_id: noteable.id)
-    else
-      note_options.merge!(noteable: noteable)
-    end
+    body = cross_reference_note_content(gfm_reference)
 
     if noteable.is_a?(ExternalIssue)
       noteable.project.issues_tracker.create_cross_reference_note(noteable, mentioner, author)
     else
-      create_note(note_options)
+      create_note(NoteSummary.new(noteable, noteable.project, author, body, action: 'cross_reference'))
     end
   end
 
   def cross_reference?(note_text)
-    note_text.start_with?(cross_reference_note_prefix)
+    note_text =~ /\A#{cross_reference_note_prefix}/i
   end
 
   # Check if a cross-reference is disallowed
   #
-  # This method prevents adding a "Mentioned in !1" note on every single commit
+  # This method prevents adding a "mentioned in !1" note on every single commit
   # in a merge request. Additionally, it prevents the creation of references to
   # external issues (which would fail).
   #
@@ -340,12 +405,13 @@ module SystemNoteService
     # Initial scope should be system notes of this noteable type
     notes = Note.system.where(noteable_type: noteable.class)
 
-    if noteable.is_a?(Commit)
-      # Commits have non-integer IDs, so they're stored in `commit_id`
-      notes = notes.where(commit_id: noteable.id)
-    else
-      notes = notes.where(noteable_id: noteable.id)
-    end
+    notes =
+      if noteable.is_a?(Commit)
+        # Commits have non-integer IDs, so they're stored in `commit_id`
+        notes.where(commit_id: noteable.id)
+      else
+        notes.where(noteable_id: noteable.id)
+      end
 
     notes_for_mentioner(mentioner, noteable, notes).exists?
   end
@@ -370,13 +436,14 @@ module SystemNoteService
   #
   # Example Note text:
   #
-  #   "Soandso marked the task Whatever as completed."
+  #   "marked the task Whatever as completed."
   #
   # Returns the created Note object
   def change_task_status(noteable, project, author, new_task)
     status_label = new_task.complete? ? Taskable::COMPLETED : Taskable::INCOMPLETE
-    body = "Marked the task **#{new_task.source}** as #{status_label}"
-    create_note(noteable: noteable, project: project, author: author, note: body)
+    body = "marked the task **#{new_task.source}** as #{status_label}"
+
+    create_note(NoteSummary.new(noteable, project, author, body, action: 'task'))
   end
 
   # Called when noteable has been moved to another project
@@ -388,7 +455,7 @@ module SystemNoteService
   #
   # Example Note text:
   #
-  #   "Moved to some_namespace/project_new#11"
+  #   "moved to some_namespace/project_new#11"
   #
   # Returns the created Note object
   def noteable_moved(noteable, project, noteable_ref, author, direction:)
@@ -397,27 +464,33 @@ module SystemNoteService
     end
 
     cross_reference = noteable_ref.to_reference(project)
-    body = "Moved #{direction} #{cross_reference}"
-    create_note(noteable: noteable, project: project, author: author, note: body)
+    body = "moved #{direction} #{cross_reference}"
+
+    create_note(NoteSummary.new(noteable, project, author, body, action: 'moved'))
   end
 
   private
 
   def notes_for_mentioner(mentioner, noteable, notes)
     if mentioner.is_a?(Commit)
-      notes.where('note LIKE ?', "#{cross_reference_note_prefix}%#{mentioner.to_reference(nil)}")
+      text = "#{cross_reference_note_prefix}%#{mentioner.to_reference(nil)}"
+      notes.where('(note LIKE ? OR note LIKE ?)', text, text.capitalize)
     else
       gfm_reference = mentioner.gfm_reference(noteable.project)
-      notes.where(note: cross_reference_note_content(gfm_reference))
+      text = cross_reference_note_content(gfm_reference)
+      notes.where(note: [text, text.capitalize])
     end
   end
 
-  def create_note(args = {})
-    Note.create(args.merge(system: true))
+  def create_note(note_summary)
+    note = Note.create(note_summary.note.merge(system: true))
+    note.system_note_metadata = SystemNoteMetadata.new(note_summary.metadata) if note_summary.metadata?
+
+    note
   end
 
   def cross_reference_note_prefix
-    'Mentioned in '
+    'mentioned in '
   end
 
   def cross_reference_note_content(gfm_reference)
diff --git a/app/services/tags/create_service.rb b/app/services/tags/create_service.rb
new file mode 100644
index 00000000000..1756da9e519
--- /dev/null
+++ b/app/services/tags/create_service.rb
@@ -0,0 +1,32 @@
+module Tags
+  class CreateService < BaseService
+    def execute(tag_name, target, message, release_description = nil)
+      valid_tag = Gitlab::GitRefValidator.validate(tag_name)
+      return error('Tag name invalid') unless valid_tag
+
+      repository = project.repository
+      message&.strip!
+
+      new_tag = nil
+
+      begin
+        new_tag = repository.add_tag(current_user, tag_name, target, message)
+      rescue Rugged::TagError
+        return error("Tag #{tag_name} already exists")
+      rescue GitHooksService::PreReceiveError => ex
+        return error(ex.message)
+      end
+
+      if new_tag
+        if release_description
+          CreateReleaseService.new(@project, @current_user).
+            execute(tag_name, release_description)
+        end
+
+        success.merge(tag: new_tag)
+      else
+        error("Target #{target} is invalid")
+      end
+    end
+  end
+end
diff --git a/app/services/tags/destroy_service.rb b/app/services/tags/destroy_service.rb
new file mode 100644
index 00000000000..a368f4f5b61
--- /dev/null
+++ b/app/services/tags/destroy_service.rb
@@ -0,0 +1,46 @@
+module Tags
+  class DestroyService < BaseService
+    def execute(tag_name)
+      repository = project.repository
+      tag = repository.find_tag(tag_name)
+
+      unless tag
+        return error('No such tag', 404)
+      end
+
+      if repository.rm_tag(current_user, tag_name)
+        release = project.releases.find_by(tag: tag_name)
+        release&.destroy
+
+        push_data = build_push_data(tag)
+        EventCreateService.new.push(project, current_user, push_data)
+        project.execute_hooks(push_data.dup, :tag_push_hooks)
+        project.execute_services(push_data.dup, :tag_push_hooks)
+
+        success('Tag was removed')
+      else
+        error('Failed to remove tag')
+      end
+    rescue GitHooksService::PreReceiveError => ex
+      error(ex.message)
+    end
+
+    def error(message, return_code = 400)
+      super(message).merge(return_code: return_code)
+    end
+
+    def success(message)
+      super().merge(message: message)
+    end
+
+    def build_push_data(tag)
+      Gitlab::DataBuilder::Push.build(
+        project,
+        current_user,
+        tag.dereferenced_target.sha,
+        Gitlab::Git::BLANK_SHA,
+        "#{Gitlab::Git::TAG_REF_PREFIX}#{tag.name}",
+        [])
+    end
+  end
+end
diff --git a/app/services/todo_service.rb b/app/services/todo_service.rb
index f8e6b2ef094..b6e88b0280f 100644
--- a/app/services/todo_service.rb
+++ b/app/services/todo_service.rb
@@ -19,8 +19,8 @@ class TodoService
   #
   #  * mark all pending todos related to the issue for the current user as done
   #
-  def update_issue(issue, current_user)
-    update_issuable(issue, current_user)
+  def update_issue(issue, current_user, skip_users = [])
+    update_issuable(issue, current_user, skip_users)
   end
 
   # When close an issue we should:
@@ -60,8 +60,8 @@ class TodoService
   #
   #  * create a todo for each mentioned user on merge request
   #
-  def update_merge_request(merge_request, current_user)
-    update_issuable(merge_request, current_user)
+  def update_merge_request(merge_request, current_user, skip_users = [])
+    update_issuable(merge_request, current_user, skip_users)
   end
 
   # When close a merge request we should:
@@ -98,10 +98,12 @@ class TodoService
 
   # When a build fails on the HEAD of a merge request we should:
   #
-  #  * create a todo for that user to fix it
+  #  * create a todo for author of MR to fix it
+  #  * create a todo for merge_user to keep an eye on it
   #
   def merge_request_build_failed(merge_request)
-    create_build_failed_todo(merge_request)
+    create_build_failed_todo(merge_request, merge_request.author)
+    create_build_failed_todo(merge_request, merge_request.merge_user) if merge_request.merge_when_pipeline_succeeds?
   end
 
   # When a new commit is pushed to a merge request we should:
@@ -115,9 +117,19 @@ class TodoService
   # When a build is retried to a merge request we should:
   #
   #  * mark all pending todos related to the merge request for the author as done
+  #  * mark all pending todos related to the merge request for the merge_user as done
   #
   def merge_request_build_retried(merge_request)
     mark_pending_todos_as_done(merge_request, merge_request.author)
+    mark_pending_todos_as_done(merge_request, merge_request.merge_user) if merge_request.merge_when_pipeline_succeeds?
+  end
+
+  # When a merge request could not be automatically merged due to its unmergeable state we should:
+  #
+  #  * create a todo for a merge_user
+  #
+  def merge_request_became_unmergeable(merge_request)
+    create_unmergeable_todo(merge_request, merge_request.merge_user) if merge_request.merge_when_pipeline_succeeds?
   end
 
   # When create a note we should:
@@ -134,8 +146,8 @@ class TodoService
   #  * mark all pending todos related to the noteable for the current user as done
   #  * create a todo for each new user mentioned on note
   #
-  def update_note(note, current_user)
-    handle_note(note, current_user)
+  def update_note(note, current_user, skip_users = [])
+    handle_note(note, current_user, skip_users)
   end
 
   # When an emoji is awarded we should:
@@ -158,16 +170,20 @@ class TodoService
 
   # When user marks some todos as done
   def mark_todos_as_done(todos, current_user)
-    mark_todos_as_done_by_ids(todos.select(&:id), current_user)
+    update_todos_state_by_ids(todos.select(&:id), current_user, :done)
   end
 
   def mark_todos_as_done_by_ids(ids, current_user)
-    todos = current_user.todos.where(id: ids)
+    update_todos_state_by_ids(ids, current_user, :done)
+  end
 
-    # Only return those that are not really on that state
-    marked_todos = todos.where.not(state: :done).update_all(state: :done)
-    current_user.update_todos_count_cache
-    marked_todos
+  # When user marks some todos as pending
+  def mark_todos_as_pending(todos, current_user)
+    update_todos_state_by_ids(todos.select(&:id), current_user, :pending)
+  end
+
+  def mark_todos_as_pending_by_ids(ids, current_user)
+    update_todos_state_by_ids(ids, current_user, :pending)
   end
 
   # When user marks an issue as todo
@@ -182,6 +198,17 @@ class TodoService
 
   private
 
+  def update_todos_state_by_ids(ids, current_user, state)
+    todos = current_user.todos.where(id: ids)
+
+    # Only update those that are not really on that state
+    todos = todos.where.not(state: state)
+    todos_ids = todos.pluck(:id)
+    todos.unscope(:order).update_all(state: state)
+    current_user.update_todos_count_cache
+    todos_ids
+  end
+
   def create_todos(users, attributes)
     Array(users).map do |user|
       next if pending_todos(user, attributes).exists?
@@ -196,11 +223,11 @@ class TodoService
     create_mention_todos(issuable.project, issuable, author)
   end
 
-  def update_issuable(issuable, author)
+  def update_issuable(issuable, author, skip_users = [])
     # Skip toggling a task list item in a description
     return if toggling_tasks?(issuable)
 
-    create_mention_todos(issuable.project, issuable, author)
+    create_mention_todos(issuable.project, issuable, author, nil, skip_users)
   end
 
   def destroy_issuable(issuable, user)
@@ -212,7 +239,7 @@ class TodoService
       issuable.tasks? && issuable.updated_tasks.any?
   end
 
-  def handle_note(note, author)
+  def handle_note(note, author, skip_users = [])
     # Skip system notes, and notes on project snippet
     return if note.system? || note.for_snippet?
 
@@ -220,7 +247,7 @@ class TodoService
     target  = note.noteable
 
     mark_pending_todos_as_done(target, author)
-    create_mention_todos(project, target, author, note)
+    create_mention_todos(project, target, author, note, skip_users)
   end
 
   def create_assignment_todo(issuable, author)
@@ -230,16 +257,26 @@ class TodoService
     end
   end
 
-  def create_mention_todos(project, target, author, note = nil)
-    mentioned_users = filter_mentioned_users(project, note || target, author)
+  def create_mention_todos(project, target, author, note = nil, skip_users = [])
+    # Create Todos for directly addressed users
+    directly_addressed_users = filter_directly_addressed_users(project, note || target, author, skip_users)
+    attributes = attributes_for_todo(project, target, author, Todo::DIRECTLY_ADDRESSED, note)
+    create_todos(directly_addressed_users, attributes)
+
+    # Create Todos for mentioned users
+    mentioned_users = filter_mentioned_users(project, note || target, author, skip_users)
     attributes = attributes_for_todo(project, target, author, Todo::MENTIONED, note)
     create_todos(mentioned_users, attributes)
   end
 
-  def create_build_failed_todo(merge_request)
-    author = merge_request.author
-    attributes = attributes_for_todo(merge_request.project, merge_request, author, Todo::BUILD_FAILED)
-    create_todos(author, attributes)
+  def create_build_failed_todo(merge_request, todo_author)
+    attributes = attributes_for_todo(merge_request.project, merge_request, todo_author, Todo::BUILD_FAILED)
+    create_todos(todo_author, attributes)
+  end
+
+  def create_unmergeable_todo(merge_request, merge_user)
+    attributes = attributes_for_todo(merge_request.project, merge_request, merge_user, Todo::UNMERGEABLE)
+    create_todos(merge_user, attributes)
   end
 
   def attributes_for_target(target)
@@ -266,10 +303,18 @@ class TodoService
     )
   end
 
-  def filter_mentioned_users(project, target, author)
-    mentioned_users = target.mentioned_users(author)
-    mentioned_users = reject_users_without_access(mentioned_users, project, target)
-    mentioned_users.uniq
+  def filter_todo_users(users, project, target)
+    reject_users_without_access(users, project, target).uniq
+  end
+
+  def filter_mentioned_users(project, target, author, skip_users = [])
+    mentioned_users = target.mentioned_users(author) - skip_users
+    filter_todo_users(mentioned_users, project, target)
+  end
+
+  def filter_directly_addressed_users(project, target, author, skip_users = [])
+    directly_addressed_users = target.directly_addressed_users(author) - skip_users
+    filter_todo_users(directly_addressed_users, project, target)
   end
 
   def reject_users_without_access(users, project, target)
diff --git a/app/services/update_release_service.rb b/app/services/update_release_service.rb
index 0ee1ff2d7d9..b7c36651968 100644
--- a/app/services/update_release_service.rb
+++ b/app/services/update_release_service.rb
@@ -1,5 +1,3 @@
-require_relative 'base_service'
-
 class UpdateReleaseService < BaseService
   def execute(tag_name, release_description)
     repository = project.repository
diff --git a/app/services/update_snippet_service.rb b/app/services/update_snippet_service.rb
index a6bb36821c3..358bca73aec 100644
--- a/app/services/update_snippet_service.rb
+++ b/app/services/update_snippet_service.rb
@@ -1,4 +1,6 @@
 class UpdateSnippetService < BaseService
+  include SpamCheckService
+
   attr_accessor :snippet
 
   def initialize(project, user, snippet, params)
@@ -9,7 +11,7 @@ class UpdateSnippetService < BaseService
   def execute
     # check that user is allowed to set specified visibility_level
     new_visibility = params[:visibility_level]
-    
+
     if new_visibility && new_visibility.to_i != snippet.visibility_level
       unless Gitlab::VisibilityLevel.allowed_for?(current_user, new_visibility)
         deny_visibility_level(snippet, new_visibility)
@@ -17,6 +19,10 @@ class UpdateSnippetService < BaseService
       end
     end
 
-    snippet.update_attributes(params)
+    filter_spam_check_params
+    snippet.assign_attributes(params)
+    spam_check(snippet, current_user)
+
+    snippet.save
   end
 end
diff --git a/app/services/user_project_access_changed_service.rb b/app/services/user_project_access_changed_service.rb
new file mode 100644
index 00000000000..d7a6804ee88
--- /dev/null
+++ b/app/services/user_project_access_changed_service.rb
@@ -0,0 +1,9 @@
+class UserProjectAccessChangedService
+  def initialize(user_ids)
+    @user_ids = Array.wrap(user_ids)
+  end
+
+  def execute
+    AuthorizedProjectsWorker.bulk_perform_and_wait(@user_ids.map { |id| [id] })
+  end
+end
diff --git a/app/services/users/create_service.rb b/app/services/users/create_service.rb
new file mode 100644
index 00000000000..193fcd85896
--- /dev/null
+++ b/app/services/users/create_service.rb
@@ -0,0 +1,110 @@
+module Users
+  # Service for creating a new user.
+  class CreateService < BaseService
+    def initialize(current_user, params = {})
+      @current_user = current_user
+      @params = params.dup
+    end
+
+    def build
+      raise Gitlab::Access::AccessDeniedError unless can_create_user?
+
+      user = User.new(build_user_params)
+
+      if current_user&.is_admin?
+        if params[:reset_password]
+          @reset_token = user.generate_reset_token
+          params[:force_random_password] = true
+        end
+
+        if params[:force_random_password]
+          random_password = Devise.friendly_token.first(Devise.password_length.min)
+          user.password = user.password_confirmation = random_password
+        end
+      end
+
+      identity_attrs = params.slice(:extern_uid, :provider)
+
+      if identity_attrs.any?
+        user.identities.build(identity_attrs)
+      end
+
+      user
+    end
+
+    def execute
+      user = build
+
+      if user.save
+        log_info("User \"#{user.name}\" (#{user.email}) was created")
+        notification_service.new_user(user, @reset_token) if @reset_token
+        system_hook_service.execute_hooks_for(user, :create)
+      end
+
+      user
+    end
+
+    private
+
+    def can_create_user?
+      (current_user.nil? && current_application_settings.signup_enabled?) || current_user&.is_admin?
+    end
+
+    # Allowed params for creating a user (admins only)
+    def admin_create_params
+      [
+        :access_level,
+        :admin,
+        :avatar,
+        :bio,
+        :can_create_group,
+        :color_scheme_id,
+        :email,
+        :external,
+        :force_random_password,
+        :hide_no_password,
+        :hide_no_ssh_key,
+        :key_id,
+        :linkedin,
+        :name,
+        :password,
+        :password_expires_at,
+        :projects_limit,
+        :remember_me,
+        :skip_confirmation,
+        :skype,
+        :theme_id,
+        :twitter,
+        :username,
+        :website_url
+      ]
+    end
+
+    # Allowed params for user signup
+    def signup_params
+      [
+        :email,
+        :email_confirmation,
+        :name,
+        :password,
+        :username
+      ]
+    end
+
+    def build_user_params
+      if current_user&.is_admin?
+        user_params = params.slice(*admin_create_params)
+        user_params[:created_by_id] = current_user&.id
+
+        if params[:reset_password]
+          user_params.merge!(force_random_password: true, password_expires_at: nil)
+        end
+      else
+        user_params = params.slice(*signup_params)
+        user_params[:skip_confirmation] = !current_application_settings.send_user_confirmation_email
+      end
+
+      user_params
+    end
+  end
+end
diff --git a/app/services/users/destroy_service.rb b/app/services/users/destroy_service.rb
new file mode 100644
index 00000000000..833da5bc5d1
--- /dev/null
+++ b/app/services/users/destroy_service.rb
@@ -0,0 +1,56 @@
+module Users
+  class DestroyService
+    attr_accessor :current_user
+
+    def initialize(current_user)
+      @current_user = current_user
+    end
+
+    def execute(user, options = {})
+      unless Ability.allowed?(current_user, :destroy_user, user)
+        raise Gitlab::Access::AccessDeniedError, "#{current_user} tried to destroy user #{user}!"
+      end
+
+      if !options[:delete_solo_owned_groups] && user.solo_owned_groups.present?
+        user.errors[:base] << 'You must transfer ownership or delete groups before you can remove user'
+        return user
+      end
+
+      user.solo_owned_groups.each do |group|
+        Groups::DestroyService.new(group, current_user).execute
+      end
+
+      user.personal_projects.each do |project|
+        # Skip repository removal because we remove directory with namespace
+        # that contain all this repositories
+        ::Projects::DestroyService.new(project, current_user, skip_repo: true).async_execute
+      end
+
+      move_issues_to_ghost_user(user)
+
+      # Destroy the namespace after destroying the user since certain methods may depend on the namespace existing
+      namespace = user.namespace
+      user_data = user.destroy
+      namespace.really_destroy!
+
+      user_data
+    end
+
+    private
+
+    def move_issues_to_ghost_user(user)
+      # Block the user before moving issues to prevent a data race.
+      # If the user creates an issue after `move_issues_to_ghost_user`
+      # runs and before the user is destroyed, the destroy will fail with
+      # an exception. We block the user so that issues can't be created
+      # after `move_issues_to_ghost_user` runs and before the destroy happens.
+      user.block
+
+      ghost_user = User.ghost
+
+      user.issues.update_all(author_id: ghost_user.id)
+
+      user.reload
+    end
+  end
+end
diff --git a/app/services/users/refresh_authorized_projects_service.rb b/app/services/users/refresh_authorized_projects_service.rb
new file mode 100644
index 00000000000..8f6f5b937c4
--- /dev/null
+++ b/app/services/users/refresh_authorized_projects_service.rb
@@ -0,0 +1,138 @@
+module Users
+  # Service for refreshing the authorized projects of a user.
+  #
+  # This particular service class can not be used to update data for the same
+  # user concurrently. Doing so could lead to an incorrect state. To ensure this
+  # doesn't happen a caller must synchronize access (e.g. using
+  # `Gitlab::ExclusiveLease`).
+  #
+  # Usage:
+  #
+  #     user = User.find_by(username: 'alice')
+  #     service = Users::RefreshAuthorizedProjectsService.new(some_user)
+  #     service.execute
+  class RefreshAuthorizedProjectsService
+    attr_reader :user
+
+    LEASE_TIMEOUT = 1.minute.to_i
+
+    # user - The User for which to refresh the authorized projects.
+    def initialize(user)
+      @user = user
+
+      # We need an up to date User object that has access to all relations that
+      # may have been created earlier. The only way to ensure this is to reload
+      # the User object.
+      user.reload
+    end
+
+    def execute
+      lease_key = "refresh_authorized_projects:#{user.id}"
+      lease = Gitlab::ExclusiveLease.new(lease_key, timeout: LEASE_TIMEOUT)
+
+      until uuid = lease.try_obtain
+        # Keep trying until we obtain the lease. If we don't do so we may end up
+        # not updating the list of authorized projects properly. To prevent
+        # hammering Redis too much we'll wait for a bit between retries.
+        sleep(1)
+      end
+
+      begin
+        execute_without_lease
+      ensure
+        Gitlab::ExclusiveLease.cancel(lease_key, uuid)
+      end
+    end
+
+    # This method returns the updated User object.
+    def execute_without_lease
+      current = current_authorizations_per_project
+      fresh = fresh_access_levels_per_project
+
+      remove = current.each_with_object([]) do |(project_id, row), array|
+        # rows not in the new list or with a different access level should be
+        # removed.
+        if !fresh[project_id] || fresh[project_id] != row.access_level
+          array << row.project_id
+        end
+      end
+
+      add = fresh.each_with_object([]) do |(project_id, level), array|
+        # rows not in the old list or with a different access level should be
+        # added.
+        if !current[project_id] || current[project_id].access_level != level
+          array << [user.id, project_id, level]
+        end
+      end
+
+      update_authorizations(remove, add)
+    end
+
+    # Updates the list of authorizations for the current user.
+    #
+    # remove - The IDs of the authorization rows to remove.
+    # add - Rows to insert in the form `[user id, project id, access level]`
+    def update_authorizations(remove = [], add = [])
+      return if remove.empty? && add.empty? && user.authorized_projects_populated
+
+      User.transaction do
+        user.remove_project_authorizations(remove) unless remove.empty?
+        ProjectAuthorization.insert_authorizations(add) unless add.empty?
+        user.set_authorized_projects_column
+      end
+
+      # Since we batch insert authorization rows, Rails' associations may get
+      # out of sync. As such we force a reload of the User object.
+      user.reload
+    end
+
+    def fresh_access_levels_per_project
+      fresh_authorizations.each_with_object({}) do |row, hash|
+        hash[row.project_id] = row.access_level
+      end
+    end
+
+    def current_authorizations_per_project
+      current_authorizations.index_by(&:project_id)
+    end
+
+    def current_authorizations
+      user.project_authorizations.select(:project_id, :access_level)
+    end
+
+    def fresh_authorizations
+      ProjectAuthorization.
+        unscoped.
+        select('project_id, MAX(access_level) AS access_level').
+        from("(#{project_authorizations_union.to_sql}) #{ProjectAuthorization.table_name}").
+        group(:project_id)
+    end
+
+    private
+
+    # Returns a union query of projects that the user is authorized to access
+    def project_authorizations_union
+      relations = [
+        # Personal projects
+        user.personal_projects.select("#{user.id} AS user_id, projects.id AS project_id, #{Gitlab::Access::MASTER} AS access_level"),
+
+        # Projects the user is a member of
+        user.projects.select_for_project_authorization,
+
+        # Projects of groups the user is a member of
+        user.groups_projects.select_for_project_authorization,
+
+        # Projects of subgroups of groups the user is a member of
+        user.nested_groups_projects.select_for_project_authorization,
+
+        # Projects shared with groups the user is a member of
+        user.groups.joins(:shared_projects).select_for_project_authorization,
+
+        # Projects shared with subgroups of groups the user is a member of
+        user.nested_groups.joins(:shared_projects).select_for_project_authorization
+      ]
+
+      Gitlab::SQL::Union.new(relations)
+    end
+  end
+end
diff --git a/app/services/validate_new_branch_service.rb b/app/services/validate_new_branch_service.rb
new file mode 100644
index 00000000000..2f61be184ce
--- /dev/null
+++ b/app/services/validate_new_branch_service.rb
@@ -0,0 +1,22 @@
+require_relative 'base_service'
+
+class ValidateNewBranchService < BaseService
+  def execute(branch_name)
+    valid_branch = Gitlab::GitRefValidator.validate(branch_name)
+
+    unless valid_branch
+      return error('Branch name is invalid')
+    end
+
+    repository = project.repository
+    existing_branch = repository.find_branch(branch_name)
+
+    if existing_branch
+      return error('Branch already exists')
+    end
+
+    success
+  rescue GitHooksService::PreReceiveError => ex
+    error(ex.message)
+  end
+end
diff --git a/app/services/wiki_pages/destroy_service.rb b/app/services/wiki_pages/destroy_service.rb
new file mode 100644
index 00000000000..6b93fb2f6d7
--- /dev/null
+++ b/app/services/wiki_pages/destroy_service.rb
@@ -0,0 +1,11 @@
+module WikiPages
+  class DestroyService < WikiPages::BaseService
+    def execute(page)
+      if page&.delete
+        execute_hooks(page, 'delete')
+      end
+
+      page
+    end
+  end
+end
diff --git a/app/uploaders/artifact_uploader.rb b/app/uploaders/artifact_uploader.rb
index b6c52ddac7a..e84944ed411 100644
--- a/app/uploaders/artifact_uploader.rb
+++ b/app/uploaders/artifact_uploader.rb
@@ -1,4 +1,4 @@
-class ArtifactUploader < CarrierWave::Uploader::Base
+class ArtifactUploader < GitlabUploader
   storage :file
 
   attr_accessor :build, :field
@@ -27,10 +27,6 @@ class ArtifactUploader < CarrierWave::Uploader::Base
     File.join(self.class.artifacts_cache_path, @build.artifacts_path)
   end
 
-  def file_storage?
-    self.class.storage == CarrierWave::Storage::File
-  end
-
   def filename
     file.try(:filename)
   end
@@ -38,12 +34,4 @@ class ArtifactUploader < CarrierWave::Uploader::Base
   def exists?
     file.try(:exists?)
   end
-
-  def move_to_cache
-    true
-  end
-
-  def move_to_store
-    true
-  end
 end
diff --git a/app/uploaders/attachment_uploader.rb b/app/uploaders/attachment_uploader.rb
index fb3b5dfecd0..109eb2fea0b 100644
--- a/app/uploaders/attachment_uploader.rb
+++ b/app/uploaders/attachment_uploader.rb
@@ -1,9 +1,10 @@
-class AttachmentUploader < CarrierWave::Uploader::Base
+class AttachmentUploader < GitlabUploader
+  include RecordsUploads
   include UploaderHelper
 
   storage :file
 
   def store_dir
-    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
+    "#{base_dir}/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
   end
 end
diff --git a/app/uploaders/avatar_uploader.rb b/app/uploaders/avatar_uploader.rb
index 71ff14a3f20..66d3bcb998a 100644
--- a/app/uploaders/avatar_uploader.rb
+++ b/app/uploaders/avatar_uploader.rb
@@ -1,19 +1,25 @@
-class AvatarUploader < CarrierWave::Uploader::Base
+class AvatarUploader < GitlabUploader
+  include RecordsUploads
   include UploaderHelper
 
   storage :file
 
-  after :store, :reset_events_cache
-
   def store_dir
-    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
-  end
-
-  def reset_events_cache(file)
-    model.reset_events_cache if model.is_a?(User)
+    "#{base_dir}/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
   end
 
   def exists?
     model.avatar.file && model.avatar.file.exists?
   end
+
+  # We set move_to_store and move_to_cache to 'false' to prevent stealing
+  # the avatar file from a project when forking it.
+  # https://gitlab.com/gitlab-org/gitlab-ce/issues/26158
+  def move_to_store
+    false
+  end
+
+  def move_to_cache
+    false
+  end
 end
diff --git a/app/uploaders/file_uploader.rb b/app/uploaders/file_uploader.rb
index 3ac6030c21c..d6ccf0dc92c 100644
--- a/app/uploaders/file_uploader.rb
+++ b/app/uploaders/file_uploader.rb
@@ -1,30 +1,53 @@
-class FileUploader < CarrierWave::Uploader::Base
+class FileUploader < GitlabUploader
+  include RecordsUploads
   include UploaderHelper
+
   MARKDOWN_PATTERN = %r{\!?\[.*?\]\(/uploads/(?<secret>[0-9a-f]{32})/(?<file>.*?)\)}
 
   storage :file
 
-  attr_accessor :project, :secret
+  def self.absolute_path(upload_record)
+    File.join(
+      self.dynamic_path_segment(upload_record.model),
+      upload_record.path
+    )
+  end
 
-  def initialize(project, secret = nil)
-    @project = project
-    @secret = secret || self.class.generate_secret
+  # Returns the part of `store_dir` that can change based on the model's current
+  # path
+  #
+  # This is used to build Upload paths dynamically based on the model's current
+  # namespace and path, allowing us to ignore renames or transfers.
+  #
+  # model - Object that responds to `path_with_namespace`
+  #
+  # Returns a String without a trailing slash
+  def self.dynamic_path_segment(model)
+    File.join(CarrierWave.root, base_dir, model.path_with_namespace)
   end
 
-  def base_dir
-    "uploads"
+  attr_accessor :project
+  attr_reader :secret
+
+  def initialize(project, secret = nil)
+    @project = project
+    @secret = secret || generate_secret
   end
 
   def store_dir
-    File.join(base_dir, @project.path_with_namespace, @secret)
+    File.join(dynamic_path_segment, @secret)
   end
 
   def cache_dir
     File.join(base_dir, 'tmp', @project.path_with_namespace, @secret)
   end
 
-  def secure_url
-    File.join("/uploads", @secret, file.filename)
+  def model
+    project
+  end
+
+  def relative_path
+    self.file.path.sub("#{dynamic_path_segment}/", '')
   end
 
   def to_markdown
@@ -35,17 +58,27 @@ class FileUploader < CarrierWave::Uploader::Base
     filename = image_or_video? ? self.file.basename : self.file.filename
     escaped_filename = filename.gsub("]", "\\]")
 
-    markdown = "[#{escaped_filename}](#{self.secure_url})"
-    markdown.prepend("!") if image_or_video?
+    markdown = "[#{escaped_filename}](#{secure_url})"
+    markdown.prepend("!") if image_or_video? || dangerous?
 
     {
       alt:      filename,
-      url:      self.secure_url,
+      url:      secure_url,
       markdown: markdown
     }
   end
 
-  def self.generate_secret
+  private
+
+  def dynamic_path_segment
+    self.class.dynamic_path_segment(model)
+  end
+
+  def generate_secret
     SecureRandom.hex
   end
+
+  def secure_url
+    File.join('/uploads', @secret, file.filename)
+  end
 end
diff --git a/app/uploaders/gitlab_uploader.rb b/app/uploaders/gitlab_uploader.rb
new file mode 100644
index 00000000000..d662ba6820c
--- /dev/null
+++ b/app/uploaders/gitlab_uploader.rb
@@ -0,0 +1,36 @@
+class GitlabUploader < CarrierWave::Uploader::Base
+  def self.absolute_path(upload_record)
+    File.join(CarrierWave.root, upload_record.path)
+  end
+
+  def self.base_dir
+    'uploads'
+  end
+
+  delegate :base_dir, to: :class
+
+  def file_storage?
+    self.class.storage == CarrierWave::Storage::File
+  end
+
+  # Reduce disk IO
+  def move_to_cache
+    true
+  end
+
+  # Reduce disk IO
+  def move_to_store
+    true
+  end
+
+  # Designed to be overridden by child uploaders that have a dynamic path
+  # segment -- that is, a path that changes based on mutable attributes of its
+  # associated model
+  #
+  # For example, `FileUploader` builds the storage path based on the associated
+  # project model's `path_with_namespace` value, which can change when the
+  # project or its containing namespace is moved or renamed.
+  def relative_path
+    self.file.path.sub("#{root}/", '')
+  end
+end
diff --git a/app/uploaders/lfs_object_uploader.rb b/app/uploaders/lfs_object_uploader.rb
index 4f356dd663e..faab539b8e0 100644
--- a/app/uploaders/lfs_object_uploader.rb
+++ b/app/uploaders/lfs_object_uploader.rb
@@ -1,4 +1,4 @@
-class LfsObjectUploader < CarrierWave::Uploader::Base
+class LfsObjectUploader < GitlabUploader
   storage :file
 
   def store_dir
@@ -9,14 +9,6 @@ class LfsObjectUploader < CarrierWave::Uploader::Base
     "#{Gitlab.config.lfs.storage_path}/tmp/cache"
   end
 
-  def move_to_cache
-    true
-  end
-
-  def move_to_store
-    true
-  end
-
   def exists?
     file.try(:exists?)
   end
diff --git a/app/uploaders/records_uploads.rb b/app/uploaders/records_uploads.rb
new file mode 100644
index 00000000000..4c127f29250
--- /dev/null
+++ b/app/uploaders/records_uploads.rb
@@ -0,0 +1,34 @@
+module RecordsUploads
+  extend ActiveSupport::Concern
+
+  included do
+    after :store,   :record_upload
+    before :remove, :destroy_upload
+  end
+
+  private
+
+  # After storing an attachment, create a corresponding Upload record
+  #
+  # NOTE: We're ignoring the argument passed to this callback because we want
+  # the `SanitizedFile` object from `CarrierWave::Uploader::Base#file`, not the
+  # `Tempfile` object the callback gets.
+  #
+  # Called `after :store`
+  def record_upload(_tempfile)
+    return unless file_storage?
+    return unless file.exists?
+
+    Upload.record(self)
+  end
+
+  # Before removing an attachment, destroy any Upload records at the same path
+  #
+  # Called `before :remove`
+  def destroy_upload(*args)
+    return unless file_storage?
+    return unless file
+
+    Upload.remove_path(relative_path)
+  end
+end
diff --git a/app/uploaders/uploader_helper.rb b/app/uploaders/uploader_helper.rb
index b10ad71d052..7635c20ab3a 100644
--- a/app/uploaders/uploader_helper.rb
+++ b/app/uploaders/uploader_helper.rb
@@ -1,12 +1,15 @@
 # Extra methods for uploader
 module UploaderHelper
-  IMAGE_EXT = %w[png jpg jpeg gif bmp tiff]
+  IMAGE_EXT = %w[png jpg jpeg gif bmp tiff].freeze
   # We recommend using the .mp4 format over .mov. Videos in .mov format can
   # still be used but you really need to make sure they are served with the
   # proper MIME type video/mp4 and not video/quicktime or your videos won't play
   # on IE >= 9.
   # http://archive.sublimevideo.info/20150912/docs.sublimevideo.net/troubleshooting.html
-  VIDEO_EXT = %w[mp4 m4v mov webm ogv]
+  VIDEO_EXT = %w[mp4 m4v mov webm ogv].freeze
+  # These extension types can contain dangerous code and should only be embedded inline with
+  # proper filtering. They should always be tagged as "Content-Disposition: attachment", not "inline".
+  DANGEROUS_EXT = %w[svg].freeze
 
   def image?
     extension_match?(IMAGE_EXT)
@@ -20,6 +23,12 @@ module UploaderHelper
     image? || video?
   end
 
+  def dangerous?
+    extension_match?(DANGEROUS_EXT)
+  end
+
+  private
+
   def extension_match?(extensions)
     return false unless file
 
@@ -33,8 +42,4 @@ module UploaderHelper
 
     extensions.include?(extension.downcase)
   end
-
-  def file_storage?
-    self.class.storage == CarrierWave::Storage::File
-  end
 end
diff --git a/app/validators/addressable_url_validator.rb b/app/validators/addressable_url_validator.rb
index 09bfa613cbe..94542125d43 100644
--- a/app/validators/addressable_url_validator.rb
+++ b/app/validators/addressable_url_validator.rb
@@ -18,7 +18,7 @@
 #   end
 #
 class AddressableUrlValidator < ActiveModel::EachValidator
-  DEFAULT_OPTIONS = { protocols: %w(http https ssh git) }
+  DEFAULT_OPTIONS = { protocols: %w(http https ssh git) }.freeze
 
   def validate_each(record, attribute, value)
     unless valid_url?(value)
diff --git a/app/validators/certificate_key_validator.rb b/app/validators/certificate_key_validator.rb
new file mode 100644
index 00000000000..098b16017d2
--- /dev/null
+++ b/app/validators/certificate_key_validator.rb
@@ -0,0 +1,25 @@
+# UrlValidator
+#
+# Custom validator for private keys.
+#
+#   class Project < ActiveRecord::Base
+#     validates :certificate_key, certificate_key: true
+#   end
+#
+class CertificateKeyValidator < ActiveModel::EachValidator
+  def validate_each(record, attribute, value)
+    unless valid_private_key_pem?(value)
+      record.errors.add(attribute, "must be a valid PEM private key")
+    end
+  end
+
+  private
+
+  def valid_private_key_pem?(value)
+    return false unless value
+    pkey = OpenSSL::PKey::RSA.new(value)
+    pkey.private?
+  rescue OpenSSL::PKey::PKeyError
+    false
+  end
+end
diff --git a/app/validators/certificate_validator.rb b/app/validators/certificate_validator.rb
new file mode 100644
index 00000000000..e3d18097f71
--- /dev/null
+++ b/app/validators/certificate_validator.rb
@@ -0,0 +1,24 @@
+# UrlValidator
+#
+# Custom validator for private keys.
+#
+#   class Project < ActiveRecord::Base
+#     validates :certificate_key, certificate: true
+#   end
+#
+class CertificateValidator < ActiveModel::EachValidator
+  def validate_each(record, attribute, value)
+    unless valid_certificate_pem?(value)
+      record.errors.add(attribute, "must be a valid PEM certificate")
+    end
+  end
+
+  private
+
+  def valid_certificate_pem?(value)
+    return false unless value
+    OpenSSL::X509::Certificate.new(value).present?
+  rescue OpenSSL::X509::CertificateError
+    false
+  end
+end
diff --git a/app/validators/duration_validator.rb b/app/validators/duration_validator.rb
new file mode 100644
index 00000000000..10ff44031c6
--- /dev/null
+++ b/app/validators/duration_validator.rb
@@ -0,0 +1,17 @@
+# DurationValidator
+#
+# Validate the format conforms with ChronicDuration
+#
+# Example:
+#
+#   class ApplicationSetting < ActiveRecord::Base
+#     validates :default_artifacts_expire_in, presence: true, duration: true
+#   end
+#
+class DurationValidator < ActiveModel::EachValidator
+  def validate_each(record, attribute, value)
+    ChronicDuration.parse(value)
+  rescue ChronicDuration::DurationParseError
+    record.errors.add(attribute, "is not a correct duration")
+  end
+end
diff --git a/app/validators/importable_url_validator.rb b/app/validators/importable_url_validator.rb
new file mode 100644
index 00000000000..37a314adee6
--- /dev/null
+++ b/app/validators/importable_url_validator.rb
@@ -0,0 +1,11 @@
+# ImportableUrlValidator
+#
+# This validator blocks projects from using dangerous import_urls to help
+# protect against Server-side Request Forgery (SSRF).
+class ImportableUrlValidator < ActiveModel::EachValidator
+  def validate_each(record, attribute, value)
+    if Gitlab::UrlBlocker.blocked_url?(value)
+      record.errors.add(attribute, "imports are not allowed from that URL")
+    end
+  end
+end
diff --git a/app/validators/namespace_validator.rb b/app/validators/namespace_validator.rb
index 2821ecf0a88..77ca033e97f 100644
--- a/app/validators/namespace_validator.rb
+++ b/app/validators/namespace_validator.rb
@@ -35,19 +35,39 @@ class NamespaceValidator < ActiveModel::EachValidator
     users
   ].freeze
 
+  WILDCARD_ROUTES = %w[tree commits wikis new edit create update logs_tree
+                       preview blob blame raw files create_dir find_file
+                       artifacts graphs refs badges].freeze
+
+  STRICT_RESERVED = (RESERVED + WILDCARD_ROUTES).freeze
+
+  def self.valid?(value)
+    !reserved?(value) && follow_format?(value)
+  end
+
+  def self.reserved?(value, strict: false)
+    if strict
+      STRICT_RESERVED.include?(value)
+    else
+      RESERVED.include?(value)
+    end
+  end
+
+  def self.follow_format?(value)
+    value =~ Gitlab::Regex.namespace_regex
+  end
+
+  delegate :reserved?, :follow_format?, to: :class
+
   def validate_each(record, attribute, value)
-    unless value =~ Gitlab::Regex.namespace_regex
+    unless follow_format?(value)
       record.errors.add(attribute, Gitlab::Regex.namespace_regex_message)
     end
 
-    if reserved?(value)
+    strict = record.is_a?(Group) && record.parent_id
+
+    if reserved?(value, strict: strict)
       record.errors.add(attribute, "#{value} is a reserved name")
     end
   end
-
-  private
-
-  def reserved?(value)
-    RESERVED.include?(value)
-  end
 end
diff --git a/app/validators/project_path_validator.rb b/app/validators/project_path_validator.rb
new file mode 100644
index 00000000000..ee2ae65be7b
--- /dev/null
+++ b/app/validators/project_path_validator.rb
@@ -0,0 +1,35 @@
+# ProjectPathValidator
+#
+# Custom validator for GitLab project path values.
+#
+# Values are checked for formatting and exclusion from a list of reserved path
+# names.
+class ProjectPathValidator < ActiveModel::EachValidator
+  # All project routes with wildcard argument must be listed here.
+  # Otherwise it can lead to routing issues when route considered as project name.
+  #
+  # Example:
+  #  /group/project/tree/deploy_keys
+  #
+  #  without tree as reserved name routing can match 'group/project' as group name,
+  #  'tree' as project name and 'deploy_keys' as route.
+  #
+  RESERVED = (NamespaceValidator::STRICT_RESERVED -
+              %w[dashboard help ci admin search notes services assets profile public]).freeze
+
+  def self.valid?(value)
+    !reserved?(value)
+  end
+
+  def self.reserved?(value)
+    RESERVED.include?(value)
+  end
+
+  delegate :reserved?, to: :class
+
+  def validate_each(record, attribute, value)
+    if reserved?(value)
+      record.errors.add(attribute, "#{value} is a reserved name")
+    end
+  end
+end
diff --git a/app/views/abuse_report_mailer/notify.html.haml b/app/views/abuse_report_mailer/notify.html.haml
index 2741eb44357..d50b4071745 100644
--- a/app/views/abuse_report_mailer/notify.html.haml
+++ b/app/views/abuse_report_mailer/notify.html.haml
@@ -1,7 +1,7 @@
 %p
-  #{link_to @abuse_report.user.name, user_url(@abuse_report.user)} 
-  (@#{@abuse_report.user.username}) was reported for abuse by 
-  #{link_to @abuse_report.reporter.name, user_url(@abuse_report.reporter)} 
+  #{link_to @abuse_report.user.name, user_url(@abuse_report.user)}
+  (@#{@abuse_report.user.username}) was reported for abuse by
+  #{link_to @abuse_report.reporter.name, user_url(@abuse_report.reporter)}
   (@#{@abuse_report.reporter.username}).
 
 %blockquote
diff --git a/app/views/admin/abuse_reports/index.html.haml b/app/views/admin/abuse_reports/index.html.haml
index 7bbc75db9ff..6a5e170ddd8 100644
--- a/app/views/admin/abuse_reports/index.html.haml
+++ b/app/views/admin/abuse_reports/index.html.haml
@@ -4,7 +4,7 @@
 .abuse-reports
   - if @abuse_reports.present?
     .table-holder
-      %table.table
+      %table.table.responsive-table
         %thead.hidden-sm.hidden-xs
           %tr
             %th User
@@ -12,9 +12,8 @@
             %th.wide Message
             %th Action
         = render @abuse_reports
+    = paginate @abuse_reports, theme: 'gitlab'
   - else
-    .no-reports
-      %span.pull-left
-        There are no abuse reports!
-      .pull-left
-        = emoji_icon 'tada'
+    .empty-state
+      .text-center
+        %h4 There are no abuse reports! #{emoji_icon('tada')}
diff --git a/app/views/admin/appearances/_form.html.haml b/app/views/admin/appearances/_form.html.haml
index 9175b3d3f96..e403a9da616 100644
--- a/app/views/admin/appearances/_form.html.haml
+++ b/app/views/admin/appearances/_form.html.haml
@@ -48,7 +48,7 @@
   .form-actions
     = f.submit 'Save', class: 'btn btn-save append-right-10'
     - if @appearance.persisted?
-      = link_to 'Preview last save', preview_admin_appearances_path, class: 'btn', target: '_blank'
+      = link_to 'Preview last save', preview_admin_appearances_path, class: 'btn', target: '_blank', rel: 'noopener noreferrer'
 
     - if @appearance.updated_at
       %span.pull-right
diff --git a/app/views/admin/application_settings/_form.html.haml b/app/views/admin/application_settings/_form.html.haml
index 28003e5f509..3eab065bb9f 100644
--- a/app/views/admin/application_settings/_form.html.haml
+++ b/app/views/admin/application_settings/_form.html.haml
@@ -22,9 +22,8 @@
     .form-group
       = f.label :restricted_visibility_levels, class: 'control-label col-sm-2'
       .col-sm-10
-        - data_attrs = { toggle: 'buttons' }
-        .btn-group{ data: data_attrs }
-          - restricted_level_checkboxes('restricted-visibility-help').each do |level|
+        - restricted_level_checkboxes('restricted-visibility-help').each do |level|
+          .checkbox
             = level
         %span.help-block#restricted-visibility-help
           Selected levels cannot be used by non-admin users for projects or snippets.
@@ -32,10 +31,8 @@
     .form-group
       = f.label :import_sources, class: 'control-label col-sm-2'
       .col-sm-10
-        - data_attrs = { toggle: 'buttons' }
-        .btn-group{ data: data_attrs }
-          - import_sources_checkboxes('import-sources-help').each do |source|
-            = source
+        - import_sources_checkboxes('import-sources-help').each do |source|
+          .checkbox= source
         %span.help-block#import-sources-help
           Enabled sources for code import during project creation. OmniAuth must be configured for GitHub
           = link_to "(?)", help_page_path("integration/github")
@@ -190,6 +187,14 @@
         .help-block Markdown enabled
 
   %fieldset
+    %legend Pages
+    .form-group
+      = f.label :max_pages_size, 'Maximum size of pages (MB)', class: 'control-label col-sm-2'
+      .col-sm-10
+        = f.number_field :max_pages_size, class: 'form-control'
+        .help-block 0 for unlimited
+
+  %fieldset
     %legend Continuous Integration
     .form-group
       .col-sm-offset-2.col-sm-10
@@ -207,8 +212,16 @@
       .col-sm-10
         = f.number_field :max_artifacts_size, class: 'form-control'
         .help-block
-          Set the maximum file size each build's artifacts can have
-          = link_to "(?)", help_page_path("user/admin_area/settings/continuous_integration", anchor: "maximum-artifacts-size")
+          Set the maximum file size for each job's artifacts
+          = link_to icon('question-circle'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'maximum-artifacts-size')
+    .form-group
+      = f.label :default_artifacts_expire_in, 'Default artifacts expiration', class: 'control-label col-sm-2'
+      .col-sm-10
+        = f.text_field :default_artifacts_expire_in, class: 'form-control'
+        .help-block
+          Set the default expiration time for each job's artifacts.
+          0 for unlimited.
+          = link_to icon('question-circle'), help_page_path('user/admin_area/settings/continuous_integration', anchor: 'default-artifacts-expiration')
 
   - if Gitlab.config.registry.enabled
     %fieldset
@@ -284,6 +297,31 @@
           results in fewer but larger UDP packets being sent.
 
   %fieldset
+    %legend Background Jobs
+    %p
+      These settings require a restart to take effect.
+    .form-group
+      .col-sm-offset-2.col-sm-10
+        .checkbox
+          = f.label :sidekiq_throttling_enabled do
+            = f.check_box :sidekiq_throttling_enabled
+            Enable Sidekiq Job Throttling
+          .help-block
+            Limit the amount of resources slow running jobs are assigned.
+    .form-group
+      = f.label :sidekiq_throttling_queues, 'Sidekiq queues to throttle', class: 'control-label col-sm-2'
+      .col-sm-10
+        = f.select :sidekiq_throttling_queues, sidekiq_queue_options_for_select, { include_hidden: false }, multiple: true, class: 'select2 select-wide', data: { field: 'sidekiq_throttling_queues' }
+        .help-block
+          Choose which queues you wish to throttle.
+    .form-group
+      = f.label :sidekiq_throttling_factor, 'Throttling Factor', class: 'control-label col-sm-2'
+      .col-sm-10
+        = f.number_field :sidekiq_throttling_factor, class: 'form-control', min: '0.01', max: '0.99', step: '0.01'
+        .help-block
+          The factor by which the queues should be throttled. A value between 0.0 and 1.0, exclusive.
+
+  %fieldset
     %legend Spam and Anti-bot Protection
     .form-group
       .col-sm-offset-2.col-sm-10
@@ -299,7 +337,7 @@
         = f.text_field :recaptcha_site_key, class: 'form-control'
         .help-block
           Generate site and private keys at
-          %a{ href: 'http://www.google.com/recaptcha', target: 'blank'} http://www.google.com/recaptcha
+          %a{ href: 'http://www.google.com/recaptcha', target: 'blank' } http://www.google.com/recaptcha
 
     .form-group
       = f.label :recaptcha_private_key, 'reCAPTCHA Private Key', class: 'control-label col-sm-2'
@@ -320,7 +358,30 @@
         = f.text_field :akismet_api_key, class: 'form-control'
         .help-block
           Generate API key at
-          %a{ href: 'http://www.akismet.com', target: 'blank'} http://www.akismet.com
+          %a{ href: 'http://www.akismet.com', target: 'blank' } http://www.akismet.com
+
+    .form-group
+      .col-sm-offset-2.col-sm-10
+        .checkbox
+          = f.label :unique_ips_limit_enabled do
+            = f.check_box :unique_ips_limit_enabled
+            Limit sign in from multiple ips
+          %span.help-block#unique_ip_help_block
+            Helps prevent malicious users hide their activity
+
+    .form-group
+      = f.label :unique_ips_limit_per_user, 'IPs per user', class: 'control-label col-sm-2'
+      .col-sm-10
+        = f.number_field :unique_ips_limit_per_user, class: 'form-control'
+        .help-block
+          Maximum number of unique IPs per user
+
+    .form-group
+      = f.label :unique_ips_limit_time_window, 'IP expiration time', class: 'control-label col-sm-2'
+      .col-sm-10
+        = f.number_field :unique_ips_limit_time_window, class: 'form-control'
+        .help-block
+          How many seconds an IP will be counted towards the limit
 
   %fieldset
     %legend Abuse reports
@@ -343,7 +404,7 @@
             Enable Sentry
           .help-block
             Sentry is an error reporting and logging tool which is currently not shipped with GitLab, get it here:
-            %a{ href: 'https://getsentry.com', target: '_blank' } https://getsentry.com
+            %a{ href: 'https://getsentry.com', target: '_blank', rel: 'noopener noreferrer' } https://getsentry.com
 
     .form-group
       = f.label :sentry_dsn, 'Sentry DSN', class: 'control-label col-sm-2'
@@ -399,6 +460,23 @@
             = link_to "Koding administration documentation", help_page_path("administration/integration/koding")
 
   %fieldset
+    %legend PlantUML
+    .form-group
+      .col-sm-offset-2.col-sm-10
+        .checkbox
+          = f.label :plantuml_enabled do
+            = f.check_box :plantuml_enabled
+            Enable PlantUML
+    .form-group
+      = f.label :plantuml_url, 'PlantUML URL', class: 'control-label col-sm-2'
+      .col-sm-10
+        = f.text_field :plantuml_url, class: 'form-control', placeholder: 'http://gitlab.your-plantuml-instance.com:8080'
+        .help-block
+          Allow rendering of
+          = link_to "PlantUML", "http://plantuml.com"
+          diagrams in Asciidoc documents using an external PlantUML service.
+
+  %fieldset
     %legend Usage statistics
     .form-group
       .col-sm-offset-2.col-sm-10
@@ -421,6 +499,64 @@
             Some email servers do not support overriding the email sender name.
             Enable this option to include the name of the author of the issue,
             merge request or comment in the email body instead.
+    .form-group
+      .col-sm-offset-2.col-sm-10
+        .checkbox
+          = f.label :html_emails_enabled do
+            = f.check_box :html_emails_enabled
+            Enable HTML emails
+          .help-block
+            By default GitLab sends emails in HTML and plain text formats so mail
+            clients can choose what format to use. Disable this option if you only
+            want to send emails in plain text format.
+  %fieldset
+    %legend Automatic Git repository housekeeping
+    .form-group
+      .col-sm-offset-2.col-sm-10
+        .checkbox
+          = f.label :housekeeping_enabled do
+            = f.check_box :housekeeping_enabled
+            Enable automatic repository housekeeping (git repack, git gc)
+          .help-block
+            If you keep automatic housekeeping disabled for a long time Git
+            repository access on your GitLab server will become slower and your
+            repositories will use more disk space. We recommend to always leave
+            this enabled.
+        .checkbox
+          = f.label :housekeeping_bitmaps_enabled do
+            = f.check_box :housekeeping_bitmaps_enabled
+            Enable Git pack file bitmap creation
+          .help-block
+            Creating pack file bitmaps makes housekeeping take a little longer but
+            bitmaps should accelerate 'git clone' performance.
+    .form-group
+      = f.label :housekeeping_incremental_repack_period, 'Incremental repack period', class: 'control-label col-sm-2'
+      .col-sm-10
+        = f.number_field :housekeeping_incremental_repack_period, class: 'form-control'
+        .help-block
+          Number of Git pushes after which an incremental 'git repack' is run.
+    .form-group
+      = f.label :housekeeping_full_repack_period, 'Full repack period', class: 'control-label col-sm-2'
+      .col-sm-10
+        = f.number_field :housekeeping_full_repack_period, class: 'form-control'
+        .help-block
+          Number of Git pushes after which a full 'git repack' is run.
+    .form-group
+      = f.label :housekeeping_gc_period, 'Git GC period', class: 'control-label col-sm-2'
+      .col-sm-10
+        = f.number_field :housekeeping_gc_period, class: 'form-control'
+        .help-block
+          Number of Git pushes after which 'git gc' is run.
+
+  %fieldset
+    %legend Web terminal
+    .form-group
+      = f.label :terminal_max_session_time, 'Max session time', class: 'control-label col-sm-2'
+      .col-sm-10
+        = f.number_field :terminal_max_session_time, class: 'form-control'
+        .help-block
+          Maximum time for web terminal websocket connection (in seconds).
+          0 for unlimited.
 
   .form-actions
     = f.submit 'Save', class: 'btn btn-save'
diff --git a/app/views/admin/applications/_delete_form.html.haml b/app/views/admin/applications/_delete_form.html.haml
index 042971e1eed..82781f6716d 100644
--- a/app/views/admin/applications/_delete_form.html.haml
+++ b/app/views/admin/applications/_delete_form.html.haml
@@ -1,4 +1,4 @@
 - submit_btn_css ||= 'btn btn-link btn-remove btn-sm'
 = form_tag admin_application_path(application) do
-  %input{:name => "_method", :type => "hidden", :value => "delete"}/
+  %input{ :name => "_method", :type => "hidden", :value => "delete" }/
   = submit_tag 'Destroy', onclick: "return confirm('Are you sure?')", class: submit_btn_css
diff --git a/app/views/admin/applications/_form.html.haml b/app/views/admin/applications/_form.html.haml
index 4aacbb8cd77..061f8991b11 100644
--- a/app/views/admin/applications/_form.html.haml
+++ b/app/views/admin/applications/_form.html.haml
@@ -18,6 +18,12 @@
           Use
           %code= Doorkeeper.configuration.native_redirect_uri
           for local tests
+
+  .form-group
+    = f.label :scopes, class: 'col-sm-2 control-label'
+    .col-sm-10
+      = render 'shared/tokens/scopes_form', prefix: 'doorkeeper_application', token: application, scopes: @scopes
+
   .form-actions
     = f.submit 'Submit', class: "btn btn-save wide"
-    = link_to "Cancel", admin_applications_path, class: "btn btn-default"
+    = link_to "Cancel", admin_applications_path, class: "btn btn-cancel"
diff --git a/app/views/admin/applications/index.html.haml b/app/views/admin/applications/index.html.haml
index f8cd98f0ec4..b3a3b4c1d45 100644
--- a/app/views/admin/applications/index.html.haml
+++ b/app/views/admin/applications/index.html.haml
@@ -15,7 +15,7 @@
       %th
   %tbody.oauth-applications
     - @applications.each do |application|
-      %tr{:id => "application_#{application.id}"}
+      %tr{ :id => "application_#{application.id}" }
         %td= link_to application.name, admin_application_path(application)
         %td= application.redirect_uri
         %td= application.access_tokens.map(&:resource_owner_id).uniq.count
diff --git a/app/views/admin/applications/show.html.haml b/app/views/admin/applications/show.html.haml
index 3eb9d61972b..14683cc66e9 100644
--- a/app/views/admin/applications/show.html.haml
+++ b/app/views/admin/applications/show.html.haml
@@ -2,8 +2,7 @@
 %h3.page-title
   Application: #{@application.name}
 
-
-.table-holder
+.table-holder.oauth-application-show
   %table.table
     %tr
       %td
@@ -23,6 +22,9 @@
         - @application.redirect_uri.split.each do |uri|
           %div
             %span.monospace= uri
+
+    = render "shared/tokens/scopes_list", token: @application
+
 .form-actions
   = link_to 'Edit', edit_admin_application_path(@application), class: 'btn btn-primary wide pull-left'
   = render 'delete_form', application: @application, submit_btn_css: 'btn btn-danger prepend-left-10'
diff --git a/app/views/admin/background_jobs/show.html.haml b/app/views/admin/background_jobs/show.html.haml
index 05855db963a..ac36bb5bb17 100644
--- a/app/views/admin/background_jobs/show.html.haml
+++ b/app/views/admin/background_jobs/show.html.haml
@@ -35,7 +35,7 @@
         .clearfix
           %p
             %i.fa.fa-exclamation-circle
-            If '[25 of 25 busy]' is shown, restart GitLab with 'sudo service gitlab reload'.
+            If '[#{@concurrency} of #{@concurrency} busy]' is shown, restart GitLab with 'sudo service gitlab reload'.
           %p
             %i.fa.fa-exclamation-circle
             If more than one sidekiq process is listed, stop GitLab, kill the remaining sidekiq processes (sudo pkill -u #{gitlab_config.user} -f sidekiq) and restart GitLab.
@@ -43,4 +43,4 @@
 
 
   .panel.panel-default
-    %iframe{src: sidekiq_path, width: '100%', height: 970, style: "border: none"}
+    %iframe{ src: sidekiq_path, width: '100%', height: 970, style: "border: none" }
diff --git a/app/views/admin/broadcast_messages/_form.html.haml b/app/views/admin/broadcast_messages/_form.html.haml
index 3132d157f29..2269fb1fd8c 100644
--- a/app/views/admin/broadcast_messages/_form.html.haml
+++ b/app/views/admin/broadcast_messages/_form.html.haml
@@ -4,7 +4,7 @@
     - if @broadcast_message.message.present?
       = render_broadcast_message(@broadcast_message)
     - else
-      = "Your message here"
+      Your message here
 
 = form_for [:admin, @broadcast_message], html: { class: 'broadcast-message-form form-horizontal js-quick-submit js-requires-input'} do |f|
   = form_errors(@broadcast_message)
diff --git a/app/views/admin/broadcast_messages/index.html.haml b/app/views/admin/broadcast_messages/index.html.haml
index c05538a393c..4f2ae081d7a 100644
--- a/app/views/admin/broadcast_messages/index.html.haml
+++ b/app/views/admin/broadcast_messages/index.html.haml
@@ -10,7 +10,7 @@
 
 %br.clearfix
 
--if @broadcast_messages.any?
+- if @broadcast_messages.any?
   %table.table
     %thead
       %tr
diff --git a/app/views/admin/builds/index.html.haml b/app/views/admin/builds/index.html.haml
index 26a8846b609..66d633119c2 100644
--- a/app/views/admin/builds/index.html.haml
+++ b/app/views/admin/builds/index.html.haml
@@ -12,7 +12,7 @@
         = link_to 'Cancel all', cancel_all_admin_builds_path, data: { confirm: 'Are you sure?' }, class: 'btn btn-danger', method: :post
 
   .row-content-block.second-block
-    #{(@scope || 'all').capitalize} builds
+    #{(@scope || 'all').capitalize} jobs
 
-  %ul.content-list.builds-content-list
+  %ul.content-list.builds-content-list.admin-builds-table
     = render "projects/builds/table", builds: @builds, admin: true
diff --git a/app/views/admin/dashboard/_head.html.haml b/app/views/admin/dashboard/_head.html.haml
index ec40391a3e3..7893c1dee97 100644
--- a/app/views/admin/dashboard/_head.html.haml
+++ b/app/views/admin/dashboard/_head.html.haml
@@ -8,7 +8,7 @@
             %span
               Overview
         = nav_link(controller: [:admin, :projects]) do
-          = link_to admin_namespaces_projects_path, title: 'Projects' do
+          = link_to admin_projects_path, title: 'Projects' do
             %span
               Projects
         = nav_link(controller: :users) do
@@ -20,9 +20,9 @@
             %span
               Groups
         = nav_link path: 'builds#index' do
-          = link_to admin_builds_path, title: 'Builds' do
+          = link_to admin_builds_path, title: 'Jobs' do
             %span
-              Builds
+              Jobs
         = nav_link path: ['runners#index', 'runners#show'] do
           = link_to admin_runners_path, title: 'Runners' do
             %span
diff --git a/app/views/admin/dashboard/index.html.haml b/app/views/admin/dashboard/index.html.haml
index 90798c47d97..ebca9beb035 100644
--- a/app/views/admin/dashboard/index.html.haml
+++ b/app/views/admin/dashboard/index.html.haml
@@ -43,28 +43,34 @@
         %h4
           Features
         %hr
-        %p
-          Sign up
+        - sign_up = "Sign up"
+        %p{ "aria-label" => "#{sign_up}: status " + (signup_enabled? ? "on" : "off") }
+          = sign_up
           %span.light.pull-right
             = boolean_to_icon signup_enabled?
-        %p
-          LDAP
+        - ldap = "LDAP"
+        %p{ "aria-label" => "#{ldap}: status " + (Gitlab.config.ldap.enabled ? "on" : "off") }
+          = ldap
           %span.light.pull-right
             = boolean_to_icon Gitlab.config.ldap.enabled
-        %p
-          Gravatar
+        - gravatar = "Gravatar"
+        %p{ "aria-label" => "#{gravatar}: status " + (gravatar_enabled? ? "on" : "off") }
+          = gravatar
           %span.light.pull-right
             = boolean_to_icon gravatar_enabled?
-        %p
-          OmniAuth
+        - omniauth = "OmniAuth"
+        %p{ "aria-label" => "#{omniauth}: status " + (Gitlab.config.omniauth.enabled ? "on" : "off") }
+          = omniauth
           %span.light.pull-right
             = boolean_to_icon Gitlab.config.omniauth.enabled
-        %p
-          Reply by email
+        - reply_email = "Reply by email"
+        %p{ "aria-label" => "#{reply_email}: status " + (Gitlab::IncomingEmail.enabled? ? "on" : "off") }
+          = reply_email
           %span.light.pull-right
             = boolean_to_icon Gitlab::IncomingEmail.enabled?
-        %p
-          Container Registry
+        - container_reg = "Container Registry"
+        %p{ "aria-label" => "#{container_reg}: status " + (Gitlab.config.registry.enabled ? "on" : "off") }
+          = container_reg
           %span.light.pull-right
             = boolean_to_icon Gitlab.config.registry.enabled
 
@@ -87,7 +93,7 @@
         %p
           GitLab Workhorse
           %span.pull-right
-            = Gitlab::Workhorse.version
+            = gitlab_workhorse_version
         %p
           GitLab API
           %span.pull-right
@@ -113,15 +119,15 @@
     %hr
     .row
       .col-sm-4
-        .light-well
+        .light-well.well-centered
           %h4 Projects
           .data
-            = link_to admin_namespaces_projects_path do
+            = link_to admin_projects_path do
               %h1= number_with_delimiter(Project.cached_count)
             %hr
             = link_to('New Project', new_project_path, class: "btn btn-new")
       .col-sm-4
-        .light-well
+        .light-well.well-centered
           %h4 Users
           .data
             = link_to admin_users_path do
@@ -129,7 +135,7 @@
             %hr
             = link_to 'New User', new_admin_user_path, class: "btn btn-new"
       .col-sm-4
-        .light-well
+        .light-well.well-centered
           %h4 Groups
           .data
             = link_to admin_groups_path do
@@ -143,7 +149,7 @@
         %hr
         - @projects.each do |project|
           %p
-            = link_to project.name_with_namespace, [:admin, project.namespace.becomes(Namespace), project], class: 'str-truncated'
+            = link_to project.name_with_namespace, [:admin, project.namespace.becomes(Namespace), project], class: 'str-truncated-60'
             %span.light.pull-right
               #{time_ago_with_tooltip(project.created_at)}
 
@@ -152,7 +158,7 @@
         %hr
         - @users.each do |user|
           %p
-            = link_to [:admin, user], class: 'str-truncated' do
+            = link_to [:admin, user], class: 'str-truncated-60' do
               = user.name
             %span.light.pull-right
               #{time_ago_with_tooltip(user.created_at)}
@@ -162,7 +168,7 @@
         %hr
         - @groups.each do |group|
           %p
-            = link_to [:admin, group], class: 'str-truncated' do
-              = group.name
+            = link_to [:admin, group], class: 'str-truncated-60' do
+              = group.full_name
             %span.light.pull-right
               #{time_ago_with_tooltip(group.created_at)}
diff --git a/app/views/admin/deploy_keys/index.html.haml b/app/views/admin/deploy_keys/index.html.haml
index 149593e7f46..7b71bb5b287 100644
--- a/app/views/admin/deploy_keys/index.html.haml
+++ b/app/views/admin/deploy_keys/index.html.haml
@@ -1,27 +1,34 @@
 - page_title "Deploy Keys"
-.panel.panel-default.prepend-top-default
-  .panel-heading
-    Public deploy keys (#{@deploy_keys.count})
-    .controls
-      = link_to 'New Deploy Key', new_admin_deploy_key_path, class: "btn btn-new btn-sm"
-  - if @deploy_keys.any?
-    .table-holder
-      %table.table
-        %thead.panel-heading
+
+%h3.page-title.deploy-keys-title
+  Public deploy keys (#{@deploy_keys.count})
+  .pull-right
+    = link_to 'New Deploy Key', new_admin_deploy_key_path, class: 'btn btn-new btn-sm btn-inverted'
+
+- if @deploy_keys.any?
+  .table-holder.deploy-keys-list
+    %table.table
+      %thead
+        %tr
+          %th.col-sm-2 Title
+          %th.col-sm-4 Fingerprint
+          %th.col-sm-2 Write access allowed
+          %th.col-sm-2 Added at
+          %th.col-sm-2
+      %tbody
+        - @deploy_keys.each do |deploy_key|
           %tr
-            %th Title
-            %th Fingerprint
-            %th Added at
-            %th
-        %tbody
-          - @deploy_keys.each do |deploy_key|
-            %tr
-              %td
-                %strong= deploy_key.title
-              %td
-                %code.key-fingerprint= deploy_key.fingerprint
-              %td
-                %span.cgray
-                  added #{time_ago_with_tooltip(deploy_key.created_at)}
-              %td
-                = link_to 'Remove', admin_deploy_key_path(deploy_key), data: { confirm: 'Are you sure?'}, method: :delete, class: "btn btn-sm btn-remove delete-key pull-right"
+            %td
+              %strong= deploy_key.title
+            %td
+              %code.key-fingerprint= deploy_key.fingerprint
+            %td
+              - if deploy_key.can_push?
+                Yes
+              - else
+                No
+            %td
+              %span.cgray
+                added #{time_ago_with_tooltip(deploy_key.created_at)}
+            %td
+              = link_to 'Remove', admin_deploy_key_path(deploy_key), data: { confirm: 'Are you sure?'}, method: :delete, class: 'btn btn-sm btn-remove delete-key pull-right'
diff --git a/app/views/admin/deploy_keys/new.html.haml b/app/views/admin/deploy_keys/new.html.haml
index 5c410a695bf..a064efc231f 100644
--- a/app/views/admin/deploy_keys/new.html.haml
+++ b/app/views/admin/deploy_keys/new.html.haml
@@ -16,6 +16,14 @@
           Paste a machine public key here. Read more about how to generate it
           = link_to "here", help_page_path("ssh/README")
         = f.text_area :key, class: "form-control thin_area", rows: 5
+    .form-group
+      .control-label
+      .col-sm-10
+        = f.label :can_push do
+          = f.check_box :can_push
+          %strong Write access allowed
+        %p.light.append-bottom-0
+          Allow this key to push to repository as well? (Default only allows pull access.)
 
     .form-actions
       = f.submit 'Create', class: "btn-create btn"
diff --git a/app/views/admin/groups/_form.html.haml b/app/views/admin/groups/_form.html.haml
index 817910f7ddf..589f4557b52 100644
--- a/app/views/admin/groups/_form.html.haml
+++ b/app/views/admin/groups/_form.html.haml
@@ -7,7 +7,7 @@
     .col-sm-10
       = render 'shared/choose_group_avatar_button', f: f
 
-  = render 'shared/visibility_level', f: f, visibility_level: @group.visibility_level, can_change_visibility_level: can_change_group_visibility_level?(@group), form_model: @group
+  = render 'shared/visibility_level', f: f, visibility_level: visibility_level, can_change_visibility_level: can_change_group_visibility_level?(@group), form_model: @group
 
   .form-group
     .col-sm-offset-2.col-sm-10
diff --git a/app/views/admin/groups/_group.html.haml b/app/views/admin/groups/_group.html.haml
index 664bb417c6a..e3a77dfdf10 100644
--- a/app/views/admin/groups/_group.html.haml
+++ b/app/views/admin/groups/_group.html.haml
@@ -2,9 +2,12 @@
 
 %li.group-row{ class: css_class }
   .controls
-    = link_to 'Edit', edit_admin_group_path(group), id: "edit_#{dom_id(group)}", class: 'btn'
+    = link_to 'Edit', admin_group_edit_path(group), id: "edit_#{dom_id(group)}", class: 'btn'
     = link_to 'Delete', [:admin, group], data: { confirm: "Are you sure you want to remove #{group.name}?" }, method: :delete, class: 'btn btn-remove'
   .stats
+    %span.badge
+      = storage_counter(group.storage_size)
+
     %span
       = icon('bookmark')
       = number_with_delimiter(group.projects.count)
@@ -13,14 +16,14 @@
       = icon('users')
       = number_with_delimiter(group.users.count)
 
-    %span.visibility-icon.has-tooltip{data: { container: 'body', placement: 'left' }, title: visibility_icon_description(group)}
+    %span.visibility-icon.has-tooltip{ data: { container: 'body', placement: 'left' }, title: visibility_icon_description(group) }
       = visibility_level_icon(group.visibility_level, fw: false)
 
   .avatar-container.s40
     = image_tag group_icon(group), class: "avatar s40 hidden-xs"
   .title
     = link_to [:admin, group], class: 'group-name' do
-      = group.name
+      = group.full_name
 
   - if group.description.present?
     .description
diff --git a/app/views/admin/groups/edit.html.haml b/app/views/admin/groups/edit.html.haml
index eb09a6328ed..c2b9807015d 100644
--- a/app/views/admin/groups/edit.html.haml
+++ b/app/views/admin/groups/edit.html.haml
@@ -1,4 +1,4 @@
 - page_title "Edit", @group.name, "Groups"
 %h3.page-title Edit group: #{@group.name}
 %hr
-= render 'form'
+= render 'form', visibility_level: @group.visibility_level
diff --git a/app/views/admin/groups/index.html.haml b/app/views/admin/groups/index.html.haml
index 794f910a61f..07775247cfd 100644
--- a/app/views/admin/groups/index.html.haml
+++ b/app/views/admin/groups/index.html.haml
@@ -27,6 +27,8 @@
                   = sort_title_recently_updated
                 = link_to admin_groups_path(sort: sort_value_oldest_updated, name: project_name) do
                   = sort_title_oldest_updated
+                = link_to admin_groups_path(sort: sort_value_largest_group, name: project_name) do
+                  = sort_title_largest_group
           = link_to new_admin_group_path, class: "btn btn-new" do
             New Group
   %ul.content-list
diff --git a/app/views/admin/groups/new.html.haml b/app/views/admin/groups/new.html.haml
index c81ee552ac3..8f9fe96249f 100644
--- a/app/views/admin/groups/new.html.haml
+++ b/app/views/admin/groups/new.html.haml
@@ -1,4 +1,4 @@
 - page_title "New Group"
 %h3.page-title New group
 %hr
-= render 'form'
+= render 'form', visibility_level: default_group_visibility
diff --git a/app/views/admin/groups/show.html.haml b/app/views/admin/groups/show.html.haml
index 40871e32913..30b3fabdd7e 100644
--- a/app/views/admin/groups/show.html.haml
+++ b/app/views/admin/groups/show.html.haml
@@ -1,8 +1,8 @@
 - page_title @group.name, "Groups"
 %h3.page-title
-  Group: #{@group.name}
+  Group: #{@group.full_name}
 
-  = link_to edit_admin_group_path(@group), class: "btn pull-right" do
+  = link_to admin_group_edit_path(@group), class: "btn pull-right" do
     %i.fa.fa-pencil-square-o
     Edit
 %hr
@@ -39,6 +39,18 @@
             = @group.created_at.to_s(:medium)
 
         %li
+          %span.light Storage:
+          %strong= storage_counter(@group.storage_size)
+          (
+          = storage_counter(@group.repository_size)
+          repositories,
+          = storage_counter(@group.build_artifacts_size)
+          build artifacts,
+          = storage_counter(@group.lfs_objects_size)
+          LFS
+          )
+
+        %li
           %span.light Group Git LFS status:
           %strong
             = group_lfs_status(@group)
@@ -55,8 +67,8 @@
           %li
             %strong
               = link_to project.name_with_namespace, [:admin, project.namespace.becomes(Namespace), project]
-              %span.label.label-gray
-                = repository_size(project)
+              %span.badge
+                = storage_counter(project.statistics.storage_size)
             %span.pull-right.light
               %span.monospace= project.path_with_namespace + ".git"
       .panel-footer
@@ -73,8 +85,8 @@
             %li
               %strong
                 = link_to project.name_with_namespace, [:admin, project.namespace.becomes(Namespace), project]
-                %span.label.label-gray
-                  = repository_size(project)
+                %span.badge
+                  = storage_counter(project.statistics.storage_size)
               %span.pull-right.light
                 %span.monospace= project.path_with_namespace + ".git"
 
@@ -88,10 +100,10 @@
             Read more about project permissions
             %strong= link_to "here", help_page_path("user/permissions"), class: "vlink"
 
-          = form_tag members_update_admin_group_path(@group), id: "new_project_member", class: "bulk_import", method: :put  do
+          = form_tag admin_group_members_update_path(@group), id: "new_project_member", class: "bulk_import", method: :put  do
             %div
               = users_select_tag(:user_ids, multiple: true, email_user: true, scope: :all)
-            %div.prepend-top-10
+            .prepend-top-10
               = select_tag :access_level, options_for_select(GroupMember.access_level_roles), class: "project-access-select select2"
             %hr
             = button_tag 'Add users to group', class: "btn btn-create"
diff --git a/app/views/admin/hooks/index.html.haml b/app/views/admin/hooks/index.html.haml
index c217490963f..551edf14361 100644
--- a/app/views/admin/hooks/index.html.haml
+++ b/app/views/admin/hooks/index.html.haml
@@ -29,7 +29,7 @@
         System hook will be triggered on set of events like creating project
         or adding ssh key. But you can also enable extra triggers like Push events.
 
-      %div.prepend-top-default
+      .prepend-top-default
         = f.check_box :push_events, class: 'pull-left'
         .prepend-left-20
           = f.label :push_events, class: 'list-label' do
@@ -54,7 +54,7 @@
     = f.submit "Add System Hook", class: "btn btn-create"
 %hr
 
--if @hooks.any?
+- if @hooks.any?
   .panel.panel-default
     .panel-heading
       System hooks (#{@hooks.count})
@@ -70,4 +70,3 @@
               - if hook.send(trigger)
                 %span.label.label-gray= trigger.titleize
             %span.label.label-gray SSL Verification: #{hook.enable_ssl_verification ? "enabled" : "disabled"}
-
diff --git a/app/views/admin/identities/_identity.html.haml b/app/views/admin/identities/_identity.html.haml
index 7362d904b94..8c658905bd6 100644
--- a/app/views/admin/identities/_identity.html.haml
+++ b/app/views/admin/identities/_identity.html.haml
@@ -1,6 +1,6 @@
 %tr
   %td
-    = "#{Gitlab::OAuth::Provider.label_for(identity.provider)} (#{identity.provider})"
+    #{Gitlab::OAuth::Provider.label_for(identity.provider)} (#{identity.provider})
   %td
     = identity.extern_uid
   %td
diff --git a/app/views/admin/impersonation_tokens/index.html.haml b/app/views/admin/impersonation_tokens/index.html.haml
new file mode 100644
index 00000000000..1378dde52ab
--- /dev/null
+++ b/app/views/admin/impersonation_tokens/index.html.haml
@@ -0,0 +1,8 @@
+- page_title "Impersonation Tokens", @user.name, "Users"
+= render 'admin/users/head'
+
+.row.prepend-top-default
+  .col-lg-12
+    = render "shared/personal_access_tokens_form", path: admin_user_impersonation_tokens_path, impersonation: true, token: @impersonation_token, scopes: @scopes
+
+    = render "shared/personal_access_tokens_table", impersonation: true, active_tokens: @active_impersonation_tokens, inactive_tokens: @inactive_impersonation_tokens
diff --git a/app/views/admin/labels/_label.html.haml b/app/views/admin/labels/_label.html.haml
index be224d66855..77b174fbb27 100644
--- a/app/views/admin/labels/_label.html.haml
+++ b/app/views/admin/labels/_label.html.haml
@@ -1,4 +1,4 @@
-%li{id: dom_id(label)}
+%li{ id: dom_id(label) }
   .label-row
     = render_colored_label(label, tooltip: false)
     = markdown_field(label, :description)
diff --git a/app/views/admin/logs/show.html.haml b/app/views/admin/logs/show.html.haml
index 824edd171f3..5e585ce789b 100644
--- a/app/views/admin/logs/show.html.haml
+++ b/app/views/admin/logs/show.html.haml
@@ -8,17 +8,16 @@
 %div{ class: container_class }
   %ul.nav-links.log-tabs
     - loggers.each do |klass|
-      %li{ class: (klass == Gitlab::GitLogger ? 'active' : '') }
+      %li{ class: active_when(klass == Gitlab::GitLogger) }>
         = link_to klass::file_name, "##{klass::file_name_noext}",
             'data-toggle' => 'tab'
   .row-content-block
     To prevent performance issues admin logs output the last 2000 lines
   .tab-content
     - loggers.each do |klass|
-      .tab-pane{ class: (klass == Gitlab::GitLogger ? 'active' : ''),
-          id: klass::file_name_noext }
+      .tab-pane{ class: active_when(klass == Gitlab::GitLogger), id: klass::file_name_noext }
         .file-holder#README
-          .file-title
+          .js-file-title.file-title
             %i.fa.fa-file
             = klass::file_name
             .pull-right
diff --git a/app/views/admin/projects/_projects.html.haml b/app/views/admin/projects/_projects.html.haml
new file mode 100644
index 00000000000..596f367a00d
--- /dev/null
+++ b/app/views/admin/projects/_projects.html.haml
@@ -0,0 +1,33 @@
+.js-projects-list-holder
+  - if @projects.any?
+    %ul.projects-list.content-list.admin-projects
+      - @projects.each_with_index do |project|
+        %li.project-row{ class: ('no-description' if project.description.blank?) }
+          .controls
+            = link_to 'Edit', edit_namespace_project_path(project.namespace, project), id: "edit_#{dom_id(project)}", class: "btn"
+            = link_to 'Delete', [project.namespace.becomes(Namespace), project], data: { confirm: remove_project_message(project) }, method: :delete, class: "btn btn-remove"
+          .stats
+            %span.badge
+              = storage_counter(project.statistics.storage_size)
+            - if project.archived
+              %span.label.label-warning archived
+          .title
+            = link_to [:admin, project.namespace.becomes(Namespace), project] do
+              .dash-project-avatar
+                .avatar-container.s40
+                  = project_icon(project, alt: '', class: 'avatar project-avatar s40')
+              %span.project-full-name
+                %span.namespace-name
+                  - if project.namespace
+                    = project.namespace.human_name
+                    \/
+                %span.project-name
+                  = project.name
+
+          - if project.description.present?
+            .description
+              = markdown_field(project, :description)
+
+    = paginate @projects, theme: 'gitlab'
+  - else
+    .nothing-here-block No projects found
diff --git a/app/views/admin/projects/index.html.haml b/app/views/admin/projects/index.html.haml
index b37b8d4fee7..3301f55b8a8 100644
--- a/app/views/admin/projects/index.html.haml
+++ b/app/views/admin/projects/index.html.haml
@@ -7,89 +7,39 @@
 %div{ class: container_class }
   .top-area
     .prepend-top-default
-      = form_tag admin_namespaces_projects_path, method: :get do |f|
-        .search-holder
-          .search-field-holder
-            = search_field_tag :name, params[:name], class: "form-control search-text-input js-search-input", id: "dashboard_search", autofocus: true, spellcheck: false, placeholder: 'Search by name'
-
-            - if params[:visibility_level].present?
-              = hidden_field_tag 'visibility_level', params[:visibility_level]
-
-            - if params[:sort].present?
-              = hidden_field_tag 'sort', params[:sort]
-
-            - if params[:personal].present?
-              = hidden_field_tag 'visibility_level', 'true'
-
-            - if params[:archived].present?
-              = hidden_field_tag 'archived', 'true'
-
-            = icon("search", class: "search-icon")
-
-          .dropdown
-            - toggle_text = 'Search for Namespace'
-            - if params[:namespace_id].present?
-              - namespace = Namespace.find(params[:namespace_id])
-              - toggle_text = "#{namespace.kind}: #{namespace.path}"
-            = dropdown_toggle(toggle_text, { toggle: 'dropdown' }, { toggle_class: 'js-namespace-select large' })
-            .dropdown-menu.dropdown-select.dropdown-menu-align-right
-              = dropdown_title('Namespaces')
-              = dropdown_filter("Search for Namespace")
-              = dropdown_content
-              = dropdown_loading
-
-          = button_tag "Search", class: "btn btn-primary btn-search"
+      .search-holder
+        = render 'shared/projects/search_form', autofocus: true, icon: true
+        .dropdown
+          - toggle_text = 'Namespace'
+          - if params[:namespace_id].present?
+            = hidden_field_tag :namespace_id, params[:namespace_id]
+            - namespace = Namespace.find(params[:namespace_id])
+            - toggle_text = "#{namespace.kind}: #{namespace.full_path}"
+          = dropdown_toggle(toggle_text, { toggle: 'dropdown' }, { toggle_class: 'js-namespace-select large' })
+          .dropdown-menu.dropdown-select.dropdown-menu-align-right
+            = dropdown_title('Namespaces')
+            = dropdown_filter("Search for Namespace")
+            = dropdown_content
+            = dropdown_loading
+        = render 'shared/projects/dropdown'
+        = link_to new_project_path, class: 'btn btn-new' do
+          New Project
+        = button_tag "Search", class: "btn btn-primary btn-search hide"
 
     %ul.nav-links
-      - opts = params[:visibility_level].present? ? {} : { page: admin_namespaces_projects_path }
+      - opts = params[:visibility_level].present? ? {} : { page: admin_projects_path }
       = nav_link(opts) do
-        = link_to admin_namespaces_projects_path do
+        = link_to admin_projects_path do
           All
 
-      = nav_link(html_options: { class: params[:visibility_level] == Gitlab::VisibilityLevel::PRIVATE.to_s ? 'active' : '' }) do
-        = link_to admin_namespaces_projects_path(visibility_level: Gitlab::VisibilityLevel::PRIVATE) do
+      = nav_link(html_options: { class: active_when(params[:visibility_level] == Gitlab::VisibilityLevel::PRIVATE.to_s) }) do
+        = link_to admin_projects_path(visibility_level: Gitlab::VisibilityLevel::PRIVATE) do
           Private
-      = nav_link(html_options: { class: params[:visibility_level] == Gitlab::VisibilityLevel::INTERNAL.to_s ? 'active' : '' }) do
-        = link_to admin_namespaces_projects_path(visibility_level: Gitlab::VisibilityLevel::INTERNAL) do
+      = nav_link(html_options: { class: active_when(params[:visibility_level] == Gitlab::VisibilityLevel::INTERNAL.to_s) }) do
+        = link_to admin_projects_path(visibility_level: Gitlab::VisibilityLevel::INTERNAL) do
           Internal
-      = nav_link(html_options: { class: params[:visibility_level] == Gitlab::VisibilityLevel::PUBLIC.to_s ? 'active' : '' }) do
-        = link_to admin_namespaces_projects_path(visibility_level: Gitlab::VisibilityLevel::PUBLIC) do
+      = nav_link(html_options: { class: active_when(params[:visibility_level] == Gitlab::VisibilityLevel::PUBLIC.to_s) }) do
+        = link_to admin_projects_path(visibility_level: Gitlab::VisibilityLevel::PUBLIC) do
           Public
 
-    .nav-controls
-      = render 'shared/projects/dropdown'
-      = link_to new_project_path, class: 'btn btn-new' do
-        New Project
-
-  .projects-list-holder
-    - if @projects.any?
-      %ul.projects-list.content-list
-        - @projects.each_with_index do |project|
-          %li.project-row
-            .controls
-              - if project.archived
-                %span.label.label-warning archived
-              %span.label.label-gray
-                = repository_size(project)
-              = link_to 'Edit', edit_namespace_project_path(project.namespace, project), id: "edit_#{dom_id(project)}", class: "btn"
-              = link_to 'Delete', [project.namespace.becomes(Namespace), project], data: { confirm: remove_project_message(project) }, method: :delete, class: "btn btn-remove"
-            .title
-              = link_to [:admin, project.namespace.becomes(Namespace), project] do
-                .dash-project-avatar
-                  .avatar-container.s40
-                    = project_icon(project, alt: '', class: 'avatar project-avatar s40')
-                %span.project-full-name
-                  %span.namespace-name
-                    - if project.namespace
-                      = project.namespace.human_name
-                      \/
-                  %span.project-name.filter-title
-                    = project.name
-
-            - if project.description.present?
-              .description
-                = markdown_field(project, :description)
-
-      = paginate @projects, theme: 'gitlab'
-    - else
-      .nothing-here-block No projects found
+  = render 'projects'
diff --git a/app/views/admin/projects/show.html.haml b/app/views/admin/projects/show.html.haml
index 6c7c3c48604..2967da6e692 100644
--- a/app/views/admin/projects/show.html.haml
+++ b/app/views/admin/projects/show.html.haml
@@ -65,9 +65,16 @@
               = @project.repository.path_to_repo
 
           %li
-            %span.light Size
-            %strong
-              = repository_size(@project)
+            %span.light Storage:
+            %strong= storage_counter(@project.statistics.storage_size)
+            (
+            = storage_counter(@project.statistics.repository_size)
+            repository,
+            = storage_counter(@project.statistics.build_artifacts_size)
+            build artifacts,
+            = storage_counter(@project.statistics.lfs_objects_size)
+            LFS
+            )
 
           %li
             %span.light last commit:
diff --git a/app/views/admin/runners/_runner.html.haml b/app/views/admin/runners/_runner.html.haml
index 64893b38c58..d4d166ab7b6 100644
--- a/app/views/admin/runners/_runner.html.haml
+++ b/app/views/admin/runners/_runner.html.haml
@@ -1,4 +1,4 @@
-%tr{id: dom_id(runner)}
+%tr{ id: dom_id(runner) }
   %td
     - if runner.shared?
       %span.label.label-success shared
@@ -15,6 +15,8 @@
   %td
     = runner.description
   %td
+    = runner.version
+  %td
     - if runner.shared?
       n/a
     - else
@@ -22,7 +24,7 @@
   %td
     #{runner.builds.count(:all)}
   %td
-    - runner.tag_list.each do |tag|
+    - runner.tag_list.sort.each do |tag|
       %span.label.label-primary
         = tag
   %td
diff --git a/app/views/admin/runners/index.html.haml b/app/views/admin/runners/index.html.haml
index 37bb6a3b0e0..7d26864d0f3 100644
--- a/app/views/admin/runners/index.html.haml
+++ b/app/views/admin/runners/index.html.haml
@@ -11,7 +11,7 @@
       that for future communication.
       %br
       Registration token is
-      %code{ id: 'runners-token' } #{current_application_settings.runners_registration_token}
+      %code#runners-token= current_application_settings.runners_registration_token
 
   .bs-callout.clearfix
     .pull-left
@@ -26,7 +26,7 @@
 
   .bs-callout
     %p
-      A 'Runner' is a process which runs a build.
+      A 'Runner' is a process which runs a job.
       You can setup as many Runners as you need.
       %br
       Runners can be placed on separate users, servers, even on your local machine.
@@ -37,16 +37,16 @@
       %ul
         %li
           %span.label.label-success shared
-          \- Runner runs builds from all unassigned projects
+          \- Runner runs jobs from all unassigned projects
         %li
           %span.label.label-info specific
-          \- Runner runs builds from assigned projects
+          \- Runner runs jobs from assigned projects
         %li
           %span.label.label-warning locked
           \- Runner cannot be assigned to other projects
         %li
           %span.label.label-danger paused
-          \- Runner will not receive any new builds
+          \- Runner will not receive any new jobs
 
   .append-bottom-20.clearfix
     .pull-left
@@ -56,7 +56,7 @@
         = submit_tag 'Search', class: 'btn'
 
     .pull-right.light
-      Runners with last contact less than a minute ago: #{@active_runners_cnt}
+      Runners with last contact more than a minute ago: #{@active_runners_cnt}
 
   %br
 
@@ -67,8 +67,9 @@
           %th Type
           %th Runner token
           %th Description
+          %th Version
           %th Projects
-          %th Builds
+          %th Jobs
           %th Tags
           %th Last contact
           %th
diff --git a/app/views/admin/runners/show.html.haml b/app/views/admin/runners/show.html.haml
index 73038164056..dc4116e1ce0 100644
--- a/app/views/admin/runners/show.html.haml
+++ b/app/views/admin/runners/show.html.haml
@@ -11,13 +11,13 @@
 
 - if @runner.shared?
   .bs-callout.bs-callout-success
-    %h4 This Runner will process builds from ALL UNASSIGNED projects
+    %h4 This Runner will process jobs from ALL UNASSIGNED projects
     %p
       If you want Runners to build only specific projects, enable them in the table below.
       Keep in mind that this is a one way transition.
 - else
   .bs-callout.bs-callout-info
-    %h4 This Runner will process builds only from ASSIGNED projects
+    %h4 This Runner will process jobs only from ASSIGNED projects
     %p You can't make this a shared Runner.
 %hr
 
@@ -70,11 +70,11 @@
     = paginate @projects, theme: "gitlab"
 
   .col-md-6
-    %h4 Recent builds served by this Runner
+    %h4 Recent jobs served by this Runner
     %table.table.ci-table.runner-builds
       %thead
         %tr
-          %th Build
+          %th Job
           %th Status
           %th Project
           %th Commit
@@ -91,7 +91,7 @@
               %strong ##{build.id}
 
           %td.status
-            = ci_status_with_icon(build.status)
+            = render 'ci/status/badge', status: build.detailed_status(current_user)
 
           %td.status
             - if project
@@ -100,7 +100,7 @@
           %td.build-link
             - if project
               = link_to ci_status_path(build.pipeline) do
-                %strong #{build.pipeline.short_sha}
+                %strong= build.pipeline.short_sha
 
           %td.timestamp
             - if build.finished_at
diff --git a/app/views/admin/services/_form.html.haml b/app/views/admin/services/_form.html.haml
index cdbfc60f9a4..e5b8ebdf613 100644
--- a/app/views/admin/services/_form.html.haml
+++ b/app/views/admin/services/_form.html.haml
@@ -4,7 +4,8 @@
 %p #{@service.description} template
 
 = form_for :service, url: admin_application_settings_service_path, method: :put, html: { class: 'form-horizontal fieldset-form' } do |form|
-  = render 'shared/service_settings', form: form
+  = render 'shared/service_settings', form: form, subject: @service
 
-  .form-actions
-    = form.submit 'Save', class: 'btn btn-save'
+  .footer-block.row-content-block
+    .form-actions
+      = form.submit 'Save', class: 'btn btn-save'
diff --git a/app/views/admin/spam_logs/_spam_log.html.haml b/app/views/admin/spam_logs/_spam_log.html.haml
index 4ce4eab8753..33f6d847782 100644
--- a/app/views/admin/spam_logs/_spam_log.html.haml
+++ b/app/views/admin/spam_logs/_spam_log.html.haml
@@ -14,6 +14,8 @@
   %td
     = spam_log.via_api? ? 'Y' : 'N'
   %td
+    = spam_log.recaptcha_verified ? 'Y' : 'N'
+  %td
     = spam_log.noteable_type
   %td
     = spam_log.title
diff --git a/app/views/admin/spam_logs/index.html.haml b/app/views/admin/spam_logs/index.html.haml
index 0fdd5bd9960..8aaa6379730 100644
--- a/app/views/admin/spam_logs/index.html.haml
+++ b/app/views/admin/spam_logs/index.html.haml
@@ -10,6 +10,7 @@
           %th User
           %th Source IP
           %th API?
+          %th Recaptcha verified?
           %th Type
           %th Title
           %th Description
diff --git a/app/views/admin/system_info/show.html.haml b/app/views/admin/system_info/show.html.haml
index bfc6142067a..2e5f120c4e4 100644
--- a/app/views/admin/system_info/show.html.haml
+++ b/app/views/admin/system_info/show.html.haml
@@ -10,7 +10,7 @@
         %h4 CPU
         .data
           - if @cpus
-            %h1= "#{@cpus.length} cores"
+            %h1 #{@cpus.length} cores
           - else
             = icon('warning', class: 'text-warning')
             Unable to collect CPU info
@@ -19,7 +19,7 @@
         %h4 Memory
         .data
           - if @memory
-            %h1= "#{number_to_human_size(@memory.active_bytes)} / #{number_to_human_size(@memory.total_bytes)}"
+            %h1 #{number_to_human_size(@memory.active_bytes)} / #{number_to_human_size(@memory.total_bytes)}
           - else
             = icon('warning', class: 'text-warning')
             Unable to collect memory info
@@ -28,6 +28,6 @@
         %h4 Disks
         .data
           - @disks.each do |disk|
-            %h1= "#{number_to_human_size(disk[:bytes_used])} / #{number_to_human_size(disk[:bytes_total])}"
-            %p= "#{disk[:disk_name]}"
-            %p= "#{disk[:mount_path]}"
+            %h1 #{number_to_human_size(disk[:bytes_used])} / #{number_to_human_size(disk[:bytes_total])}
+            %p= disk[:disk_name]
+            %p= disk[:mount_path]
diff --git a/app/views/admin/users/_access_levels.html.haml b/app/views/admin/users/_access_levels.html.haml
new file mode 100644
index 00000000000..794aaec89bd
--- /dev/null
+++ b/app/views/admin/users/_access_levels.html.haml
@@ -0,0 +1,37 @@
+%fieldset
+  %legend Access
+  .form-group
+    = f.label :projects_limit, class: 'control-label'
+    .col-sm-10= f.number_field :projects_limit, min: 0, max: Gitlab::Database::MAX_INT_VALUE, class: 'form-control'
+
+  .form-group
+    = f.label :can_create_group, class: 'control-label'
+    .col-sm-10= f.check_box :can_create_group
+
+  .form-group
+    = f.label :access_level, class: 'control-label'
+    .col-sm-10
+      - editing_current_user = (current_user == @user)
+
+      = f.radio_button :access_level, :regular, disabled: editing_current_user
+      = label_tag :regular do
+        Regular
+      %p.light
+        Regular users have access to their groups and projects
+
+      = f.radio_button :access_level, :admin, disabled: editing_current_user
+      = label_tag :admin do
+        Admin
+      %p.light
+        Administrators have access to all groups, projects and users and can manage all features in this installation
+      - if editing_current_user
+        %p.light
+          You cannot remove your own admin rights.
+
+  .form-group
+    = f.label :external, class: 'control-label'
+    .col-sm-10
+      = f.check_box :external do
+        External
+      %p.light
+        External users cannot see internal or private projects unless access is explicitly granted. Also, external users cannot create projects or groups.
diff --git a/app/views/admin/users/_form.html.haml b/app/views/admin/users/_form.html.haml
index 3145212728f..e911af3f6f9 100644
--- a/app/views/admin/users/_form.html.haml
+++ b/app/views/admin/users/_form.html.haml
@@ -40,28 +40,7 @@
           = f.label :password_confirmation, class: 'control-label'
           .col-sm-10= f.password_field :password_confirmation, disabled: f.object.force_random_password, class: 'form-control'
 
-    %fieldset
-      %legend Access
-      .form-group
-        = f.label :projects_limit, class: 'control-label'
-        .col-sm-10= f.number_field :projects_limit, min: 0, class: 'form-control'
-
-      .form-group
-        = f.label :can_create_group, class: 'control-label'
-        .col-sm-10= f.check_box :can_create_group
-
-      .form-group
-        = f.label :admin, class: 'control-label'
-        - if current_user == @user
-          .col-sm-10= f.check_box :admin, disabled: true
-          .col-sm-10 You cannot remove your own admin rights.
-        - else
-          .col-sm-10= f.check_box :admin
-
-      .form-group
-        = f.label :external, class: 'control-label'
-        .col-sm-10= f.check_box :external
-        .col-sm-10 External users cannot see internal or private projects unless access is explicitly granted. Also, external users cannot create projects or groups.
+    = render partial: 'access_levels', locals: { f: f }
 
     %fieldset
       %legend Profile
diff --git a/app/views/admin/users/_head.html.haml b/app/views/admin/users/_head.html.haml
index ce5e21e54cc..be41c33b853 100644
--- a/app/views/admin/users/_head.html.haml
+++ b/app/views/admin/users/_head.html.haml
@@ -2,11 +2,13 @@
   = @user.name
   - if @user.blocked?
     %span.cred (Blocked)
+  - if @user.internal?
+    %span.cred (Internal)
   - if @user.admin
     %span.cred (Admin)
 
   .pull-right
-    - unless @user == current_user || @user.blocked?
+    - if @user != current_user && @user.can?(:log_in)
       = link_to 'Impersonate', impersonate_admin_user_path(@user), method: :post, class: "btn btn-nr btn-grouped btn-info"
     = link_to edit_admin_user_path(@user), class: "btn btn-nr btn-grouped" do
       %i.fa.fa-pencil-square-o
@@ -15,12 +17,12 @@
 %ul.nav-links
   = nav_link(path: 'users#show') do
     = link_to "Account", admin_user_path(@user)
-  = nav_link(path: 'users#groups') do
-    = link_to "Groups", groups_admin_user_path(@user)
   = nav_link(path: 'users#projects') do
-    = link_to "Projects", projects_admin_user_path(@user)
+    = link_to "Groups and projects", projects_admin_user_path(@user)
   = nav_link(path: 'users#keys') do
     = link_to "SSH keys", keys_admin_user_path(@user)
   = nav_link(controller: :identities) do
     = link_to "Identities", admin_user_identities_path(@user)
+  = nav_link(controller: :impersonation_tokens) do
+    = link_to "Impersonation Tokens", admin_user_impersonation_tokens_path(@user)
 .append-bottom-default
diff --git a/app/views/admin/users/_user.html.haml b/app/views/admin/users/_user.html.haml
index 4bf1c9cde3c..a756cb7243a 100644
--- a/app/views/admin/users/_user.html.haml
+++ b/app/views/admin/users/_user.html.haml
@@ -1,8 +1,8 @@
-%li.user-row
+%li.flex-row
   .user-avatar
     = image_tag avatar_icon(user), class: "avatar", alt: ''
-  .user-details
-    .user-name
+  .row-main-content
+    .user-name.row-title.str-truncated-100
       = link_to user.name, [:admin, user]
     - if user.blocked?
       %span.label.label-danger blocked
@@ -12,13 +12,13 @@
       %span.label.label-default External
     - if user == current_user
       %span It's you!
-    .user-email
+    .row-second-line.str-truncated-100
       = mail_to user.email, user.email
   .controls
     = link_to 'Edit', edit_admin_user_path(user), id: "edit_#{dom_id(user)}", class: 'btn'
     - unless user == current_user
       .dropdown.inline
-        %a.dropdown-new.btn.btn-default#project-settings-button{href: '#', data: { toggle: 'dropdown' } }
+        %a.dropdown-new.btn.btn-default#project-settings-button{ href: '#', data: { toggle: 'dropdown' } }
           = icon('cog')
           = icon('caret-down')
         %ul.dropdown-menu.dropdown-menu-align-right
@@ -34,7 +34,7 @@
             - if user.access_locked?
               %li
                 = link_to 'Unlock', unlock_admin_user_path(user), method: :put, class: 'btn-grouped btn btn-xs btn-success', data: { confirm: 'Are you sure?' }
-          - if user.can_be_removed?
+          - if user.can_be_removed? && can?(current_user, :destroy_user, @user)
             %li.divider
             %li
               = link_to 'Delete User', [:admin, user], data: { confirm: "USER #{user.name} WILL BE REMOVED! All issues, merge requests and groups linked to this user will also be removed! Consider cancelling this deletion and blocking the user instead. Are you sure?" },
diff --git a/app/views/admin/users/groups.html.haml b/app/views/admin/users/groups.html.haml
deleted file mode 100644
index 8f6d13b881a..00000000000
--- a/app/views/admin/users/groups.html.haml
+++ /dev/null
@@ -1,20 +0,0 @@
-- page_title "Groups", @user.name, "Users"
-= render 'admin/users/head'
-
-- group_members = @user.group_members.includes(:source)
-- if group_members.any?
-  .panel.panel-default
-    .panel-heading Groups:
-    %ul.well-list
-      - group_members.each do |group_member|
-        - group = group_member.group
-        %li.group_member
-          %span{class: ("list-item-name" unless group_member.owner?)}
-            %strong= link_to group.name, admin_group_path(group)
-          .pull-right
-            %span.light= group_member.human_access
-            - unless group_member.owner?
-              = link_to group_group_member_path(group, group_member), data: { confirm: remove_member_message(group_member) }, method: :delete, remote: true, class: "btn-xs btn btn-remove", title: 'Remove user from group' do
-                %i.fa.fa-times.fa-inverse
-- else
-  .nothing-here-block This user has no groups.
diff --git a/app/views/admin/users/index.html.haml b/app/views/admin/users/index.html.haml
index d3038ae644f..298cf0fa950 100644
--- a/app/views/admin/users/index.html.haml
+++ b/app/views/admin/users/index.html.haml
@@ -38,37 +38,37 @@
     .nav-block
       %ul.nav-links.wide.scrolling-tabs.white.scrolling-tabs
         .fade-left
-        = nav_link(html_options: { class: ('active' unless params[:filter]) }) do
+        = nav_link(html_options: { class: active_when(params[:filter].nil?) }) do
           = link_to admin_users_path do
             Active
             %small.badge= number_with_delimiter(User.active.count)
-        = nav_link(html_options: { class: ('active' if params[:filter] == 'admins') }) do
+        = nav_link(html_options: { class: active_when(params[:filter] == 'admins') }) do
           = link_to admin_users_path(filter: "admins") do
             Admins
             %small.badge= number_with_delimiter(User.admins.count)
-        = nav_link(html_options: { class: "#{'active' if params[:filter] == 'two_factor_enabled'} filter-two-factor-enabled" }) do
+        = nav_link(html_options: { class: "#{active_when(params[:filter] == 'two_factor_enabled')} filter-two-factor-enabled" }) do
           = link_to admin_users_path(filter: 'two_factor_enabled') do
             2FA Enabled
             %small.badge= number_with_delimiter(User.with_two_factor.count)
-        = nav_link(html_options: { class: "#{'active' if params[:filter] == 'two_factor_disabled'} filter-two-factor-disabled" }) do
+        = nav_link(html_options: { class: "#{active_when(params[:filter] == 'two_factor_disabled')} filter-two-factor-disabled" }) do
           = link_to admin_users_path(filter: 'two_factor_disabled') do
             2FA Disabled
             %small.badge= number_with_delimiter(User.without_two_factor.count)
-        = nav_link(html_options: { class: ('active' if params[:filter] == 'external') }) do
+        = nav_link(html_options: { class: active_when(params[:filter] == 'external') }) do
           = link_to admin_users_path(filter: 'external') do
             External
             %small.badge= number_with_delimiter(User.external.count)
-        = nav_link(html_options: { class: ('active' if params[:filter] == 'blocked') }) do
+        = nav_link(html_options: { class: active_when(params[:filter] == 'blocked') }) do
           = link_to admin_users_path(filter: "blocked") do
             Blocked
             %small.badge= number_with_delimiter(User.blocked.count)
-        = nav_link(html_options: { class: ('active' if params[:filter] == 'wop') }) do
+        = nav_link(html_options: { class: active_when(params[:filter] == 'wop') }) do
           = link_to admin_users_path(filter: "wop") do
             Without projects
             %small.badge= number_with_delimiter(User.without_projects.count)
         .fade-right
 
-  %ul.users-list.content-list
+  %ul.flex-list.content-list
     - if @users.empty?
       %li
         .nothing-here-block No users found.
diff --git a/app/views/admin/users/projects.html.haml b/app/views/admin/users/projects.html.haml
index 84b9ceb23b3..15eaf1c0e67 100644
--- a/app/views/admin/users/projects.html.haml
+++ b/app/views/admin/users/projects.html.haml
@@ -1,15 +1,21 @@
-- page_title "Projects", @user.name, "Users"
+- page_title "Groups and projects", @user.name, "Users"
 = render 'admin/users/head'
 
 - if @user.groups.any?
   .panel.panel-default
     .panel-heading Group projects
     %ul.well-list
-      - @user.groups.each do |group|
-        %li
-          %strong= group.name
+      - @user.group_members.includes(:source).each do |group_member|
+        - group = group_member.group
+        %li.group_member
+          %strong= link_to group.name, admin_group_path(group)
           &ndash; access to
           #{pluralize(group.projects.count, 'project')}
+          .pull-right
+            %span.light.vertical-align-middle= group_member.human_access
+            - unless group_member.owner?
+              = link_to group_group_member_path(group, group_member), data: { confirm: remove_member_message(group_member) }, method: :delete, remote: true, class: "btn-xs btn btn-remove prepend-left-10", title: 'Remove user from group' do
+                %i.fa.fa-times.fa-inverse
 
 .row
   .col-md-6
@@ -35,8 +41,8 @@
                 - if member.owner?
                   %span.light Owner
                 - else
-                  %span.light= member.human_access
+                  %span.light.vertical-align-middle= member.human_access
 
                   - if member.respond_to? :project
-                    = link_to namespace_project_project_member_path(project.namespace, project, member), data: { confirm: remove_member_message(member) }, remote: true, method: :delete, class: "btn-xs btn btn-remove", title: 'Remove user from project' do
+                    = link_to namespace_project_project_member_path(project.namespace, project, member), data: { confirm: remove_member_message(member) }, remote: true, method: :delete, class: "btn-xs btn btn-remove prepend-left-10", title: 'Remove user from project' do
                       %i.fa.fa-times
diff --git a/app/views/admin/users/show.html.haml b/app/views/admin/users/show.html.haml
index 76c9ed0ee8b..840d843f069 100644
--- a/app/views/admin/users/show.html.haml
+++ b/app/views/admin/users/show.html.haml
@@ -40,7 +40,7 @@
 
         %li.two-factor-status
           %span.light Two-factor Authentication:
-          %strong{class: @user.two_factor_enabled? ? 'cgreen' : 'cred'}
+          %strong{ class: @user.two_factor_enabled? ? 'cgreen' : 'cred' }
             - if @user.two_factor_enabled?
               Enabled
               = link_to 'Disable', disable_two_factor_admin_user_path(@user), data: {confirm: 'Are you sure?'}, method: :patch, class: 'btn btn-xs btn-remove pull-right', title: 'Disable Two-factor Authentication'
@@ -173,7 +173,7 @@
         .panel-heading
           Remove user
         .panel-body
-          - if @user.can_be_removed?
+          - if @user.can_be_removed? && can?(current_user, :destroy_user, @user)
             %p Deleting a user has the following effects:
             %ul
               %li All user content like authored issues, snippets, comments will be removed
@@ -186,6 +186,9 @@
             - if @user.solo_owned_groups.present?
               %p
                 This user is currently an owner in these groups:
-                %strong #{@user.solo_owned_groups.map(&:name).join(', ')}
+                %strong= @user.solo_owned_groups.map(&:name).join(', ')
               %p
                 You must transfer ownership or delete these groups before you can delete this user.
+            - else
+              %p
+                You don't have access to delete this user.
diff --git a/app/views/award_emoji/_awards_block.html.haml b/app/views/award_emoji/_awards_block.html.haml
index fbe3ab912b6..5aae410a63f 100644
--- a/app/views/award_emoji/_awards_block.html.haml
+++ b/app/views/award_emoji/_awards_block.html.haml
@@ -1,15 +1,17 @@
 - grouped_emojis = awardable.grouped_awards(with_thumbs: inline)
 .awards.js-awards-block{ class: ("hidden" if !inline && grouped_emojis.empty?), data: { award_url: toggle_award_url(awardable) } }
   - awards_sort(grouped_emojis).each do |emoji, awards|
-    %button.btn.award-control.js-emoji-btn.has-tooltip{ type: "button", class: (award_active_class(awards, current_user)), data: { placement: "bottom", title: award_user_list(awards, current_user) } }
-      = emoji_icon(emoji, sprite: false)
+    %button.btn.award-control.js-emoji-btn.has-tooltip{ type: "button",
+      class: (award_state_class(awards, current_user)),
+      data: { placement: "bottom", title: award_user_list(awards, current_user) } }
+      = emoji_icon(emoji)
       %span.award-control-text.js-counter
         = awards.count
 
   - if current_user
     .award-menu-holder.js-award-holder
-      %button.btn.award-control.js-add-award{ type: "button" }
+      %button.btn.award-control.has-tooltip.js-add-award{ type: 'button',
+        'aria-label': 'Add emoji',
+        data: { title: 'Add emoji', placement: "bottom" } }
         = icon('smile-o', class: "award-control-icon award-control-icon-normal")
         = icon('spinner spin', class: "award-control-icon award-control-icon-loading")
-        %span.award-control-text
-          Add
diff --git a/app/views/ci/lints/_create.html.haml b/app/views/ci/lints/_create.html.haml
index 61c7cce20b2..c91602fcff7 100644
--- a/app/views/ci/lints/_create.html.haml
+++ b/app/views/ci/lints/_create.html.haml
@@ -36,7 +36,7 @@
                 - if build[:allow_failure]
                   %b Allowed to fail
 
--else
+- else
   %p
     %b Status:
     syntax is incorrect
diff --git a/app/views/ci/lints/show.html.haml b/app/views/ci/lints/show.html.haml
index 889086c62b1..dfbc7772698 100644
--- a/app/views/ci/lints/show.html.haml
+++ b/app/views/ci/lints/show.html.haml
@@ -1,20 +1,25 @@
 - page_title "CI Lint"
 - page_description "Validate your GitLab CI configuration file"
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_tag('lib/ace.js')
 
 %h2 Check your .gitlab-ci.yml
-%hr
 
-.row
-  = form_tag ci_lint_path, method: :post do
-    .form-group
-      = label_tag(:content, 'Content of .gitlab-ci.yml', class: 'control-label text-nowrap')
+.ci-linter
+  .row
+    = form_tag ci_lint_path, method: :post do
+      .form-group
+        .col-sm-12
+          .file-holder
+            .js-file-title.file-title.clearfix
+              Content of .gitlab-ci.yml
+            #ci-editor.ci-editor= @content
+          = text_area_tag(:content, @content, class: 'hidden form-control span1', rows: 7, require: true)
       .col-sm-12
-        = text_area_tag(:content, @content, class: 'form-control span1', rows: 7, require: true)
-    .col-sm-12
-      .pull-left.prepend-top-10
-        = submit_tag('Validate', class: 'btn btn-success submit-yml')
+        .pull-left.prepend-top-10
+          = submit_tag('Validate', class: 'btn btn-success submit-yml')
 
-.row.prepend-top-20
-  .col-sm-12
-    .results
-      = render partial: 'create' if defined?(@status)
+  .row.prepend-top-20
+    .col-sm-12
+      .results.ci-template
+        = render partial: 'create' if defined?(@status)
diff --git a/app/views/ci/status/_badge.html.haml b/app/views/ci/status/_badge.html.haml
new file mode 100644
index 00000000000..c00c7f7407e
--- /dev/null
+++ b/app/views/ci/status/_badge.html.haml
@@ -0,0 +1,12 @@
+- status = local_assigns.fetch(:status)
+- link = local_assigns.fetch(:link, true)
+- css_classes = "ci-status ci-#{status.group}"
+
+- if link && status.has_details?
+  = link_to status.details_path, class: css_classes do
+    = custom_icon(status.icon)
+    = status.text
+- else
+  %span{ class: css_classes }
+    = custom_icon(status.icon)
+    = status.text
diff --git a/app/views/ci/status/_dropdown_graph_badge.html.haml b/app/views/ci/status/_dropdown_graph_badge.html.haml
new file mode 100644
index 00000000000..8ed23ac4919
--- /dev/null
+++ b/app/views/ci/status/_dropdown_graph_badge.html.haml
@@ -0,0 +1,19 @@
+-# Renders the content of each li in the dropdown
+
+- subject = local_assigns.fetch(:subject)
+- status = subject.detailed_status(current_user)
+- klass = "ci-status-icon ci-status-icon-#{status.group}"
+- tooltip = "#{subject.name} - #{status.label}"
+
+- if status.has_details?
+  = link_to status.details_path, class: 'mini-pipeline-graph-dropdown-item', data: { toggle: 'tooltip', title: tooltip }  do
+    %span{ class: klass }= custom_icon(status.icon)
+    %span.ci-build-text= subject.name
+- else
+  .mini-pipeline-graph-dropdown-item{ data: { toggle: 'tooltip', title: tooltip } }
+    %span{ class: klass }= custom_icon(status.icon)
+    %span.ci-build-text= subject.name
+
+- if status.has_action?
+  = link_to status.action_path, class: 'ci-action-icon-wrapper js-ci-action-icon', method: status.action_method, data: { toggle: 'tooltip', title: status.action_title }  do
+    = custom_icon(status.action_icon)
diff --git a/app/views/ci/status/_graph_badge.html.haml b/app/views/ci/status/_graph_badge.html.haml
new file mode 100644
index 00000000000..128b418090f
--- /dev/null
+++ b/app/views/ci/status/_graph_badge.html.haml
@@ -0,0 +1,20 @@
+-# Renders the graph node with both the status icon, status name and action icon
+
+- subject = local_assigns.fetch(:subject)
+- status = subject.detailed_status(current_user)
+- klass = "ci-status-icon ci-status-icon-#{status.group} js-ci-status-icon-#{status.group}"
+- tooltip = "#{subject.name} - #{status.label}"
+
+- if status.has_details?
+  = link_to status.details_path, class: 'build-content has-tooltip', data: { toggle: 'tooltip', title: tooltip, container: 'body' }  do
+    %span{ class: klass }= custom_icon(status.icon)
+    .ci-status-text= subject.name
+- else
+  .build-content.has-tooltip{ data: { toggle: 'tooltip', title: tooltip } }
+    %span{ class: klass }= custom_icon(status.icon)
+    .ci-status-text= subject.name
+
+- if status.has_action?
+  = link_to status.action_path, class: 'ci-action-icon-container has-tooltip', method: status.action_method, data: { toggle: 'tooltip', title: status.action_title, container: 'body' }  do
+    %i.ci-action-icon-wrapper{ class: "js-#{status.action_icon.dasherize}" }
+      = custom_icon(status.action_icon)
diff --git a/app/views/dashboard/_activities.html.haml b/app/views/dashboard/_activities.html.haml
index dc76599b776..89d991abe54 100644
--- a/app/views/dashboard/_activities.html.haml
+++ b/app/views/dashboard/_activities.html.haml
@@ -2,10 +2,9 @@
   = render "events/event_last_push", event: @last_push
 
 .nav-block
-  - if current_user
-    .controls
-      = link_to dashboard_projects_path(:atom, { private_token: current_user.private_token }), class: 'btn rss-btn' do
-        %i.fa.fa-rss
+  .controls
+    = link_to dashboard_projects_path(rss_url_options), class: 'btn rss-btn has-tooltip', title: 'Subscribe' do
+      %i.fa.fa-rss
   = render 'shared/event_filter'
 
 .content_list
diff --git a/app/views/dashboard/_activity_head.html.haml b/app/views/dashboard/_activity_head.html.haml
index b78e70ebc1e..ecdf76ef5c5 100644
--- a/app/views/dashboard/_activity_head.html.haml
+++ b/app/views/dashboard/_activity_head.html.haml
@@ -1,7 +1,8 @@
-%ul.nav-links
-  %li{ class: ("active" unless params[:filter]) }
-    = link_to activity_dashboard_path, class: 'shortcuts-activity', data: {placement: 'right'} do
-      Your Projects
-  %li{ class: ("active" if params[:filter] == 'starred') }
-    = link_to activity_dashboard_path(filter: 'starred'), data: {placement: 'right'} do
-      Starred Projects
+.top-area
+  %ul.nav-links
+    %li{ class: active_when(params[:filter].nil?) }>
+      = link_to activity_dashboard_path, class: 'shortcuts-activity', data: {placement: 'right'} do
+        Your Projects
+    %li{ class: active_when(params[:filter] == 'starred') }>
+      = link_to activity_dashboard_path(filter: 'starred'), data: {placement: 'right'} do
+        Starred Projects
diff --git a/app/views/dashboard/_groups_head.html.haml b/app/views/dashboard/_groups_head.html.haml
index 23c145ebbb4..13eaba41f4c 100644
--- a/app/views/dashboard/_groups_head.html.haml
+++ b/app/views/dashboard/_groups_head.html.haml
@@ -6,7 +6,9 @@
     = nav_link(page: explore_groups_path) do
       = link_to explore_groups_path, title: 'Explore groups' do
         Explore Groups
-  - if current_user.can_create_group?
-    .nav-controls
+  .nav-controls
+    = render 'shared/groups/search_form'
+    = render 'shared/groups/dropdown'
+    - if current_user.can_create_group?
       = link_to new_group_path, class: "btn btn-new" do
         New Group
diff --git a/app/views/dashboard/_projects_head.html.haml b/app/views/dashboard/_projects_head.html.haml
index f7abad54286..4679b9549d1 100644
--- a/app/views/dashboard/_projects_head.html.haml
+++ b/app/views/dashboard/_projects_head.html.haml
@@ -1,20 +1,21 @@
 = content_for :flash_message do
   = render 'shared/project_limit'
-.top-area
-  %ul.nav-links
+.top-area.scrolling-tabs-container.inner-page-scroll-tabs
+  .fade-left= icon('angle-left')
+  .fade-right= icon('angle-right')
+  %ul.nav-links.scrolling-tabs
     = nav_link(page: [dashboard_projects_path, root_path]) do
       = link_to dashboard_projects_path, title: 'Home', class: 'shortcuts-activity', data: {placement: 'right'} do
-        Your Projects
+        Your projects
     = nav_link(page: starred_dashboard_projects_path) do
       = link_to starred_dashboard_projects_path, title: 'Starred Projects', data: {placement: 'right'} do
-        Starred Projects
+        Starred projects
     = nav_link(page: [explore_root_path, trending_explore_projects_path, starred_explore_projects_path, explore_projects_path]) do
       = link_to explore_root_path, title: 'Explore', data: {placement: 'right'} do
-        Explore Projects
+        Explore projects
 
   .nav-controls
-    = form_tag request.path, method: :get, class: 'project-filter-form', id: 'project-filter-form' do |f|
-      = search_field_tag :filter_projects, params[:filter_projects], placeholder: 'Filter by name...', class: 'project-filter-form-field form-control input-short projects-list-filter', spellcheck: false, id: 'project-filter-form-field', tabindex: "2"
+    = render 'shared/projects/search_form'
     = render 'shared/projects/dropdown'
     - if current_user.can_create_project?
       = link_to new_project_path, class: 'btn btn-new' do
diff --git a/app/views/dashboard/_snippets_head.html.haml b/app/views/dashboard/_snippets_head.html.haml
index b25e8ea1f0c..02e90bbfa55 100644
--- a/app/views/dashboard/_snippets_head.html.haml
+++ b/app/views/dashboard/_snippets_head.html.haml
@@ -1,7 +1,13 @@
-%ul.nav-links
-  = nav_link(page: dashboard_snippets_path, html_options: {class: 'home'}) do
-    = link_to dashboard_snippets_path, title: 'Your snippets', data: {placement: 'right'} do
-      Your Snippets
-  = nav_link(page: explore_snippets_path) do
-    = link_to explore_snippets_path, title: 'Explore snippets', data: {placement: 'right'} do
-      Explore Snippets
+.top-area
+  %ul.nav-links
+    = nav_link(page: dashboard_snippets_path, html_options: {class: 'home'}) do
+      = link_to dashboard_snippets_path, title: 'Your snippets', data: {placement: 'right'} do
+        Your Snippets
+    = nav_link(page: explore_snippets_path) do
+      = link_to explore_snippets_path, title: 'Explore snippets', data: {placement: 'right'} do
+        Explore Snippets
+
+  - if current_user
+    .nav-controls.hidden-xs
+      = link_to new_snippet_path, class: "btn btn-new", title: "New snippet" do
+        New snippet
diff --git a/app/views/dashboard/activity.html.haml b/app/views/dashboard/activity.html.haml
index aa57df14c23..190ad4b40a5 100644
--- a/app/views/dashboard/activity.html.haml
+++ b/app/views/dashboard/activity.html.haml
@@ -1,6 +1,5 @@
 = content_for :meta_tags do
-  - if current_user
-    = auto_discovery_link_tag(:atom, dashboard_projects_url(format: :atom, private_token: current_user.private_token), title: "All activity")
+  = auto_discovery_link_tag(:atom, dashboard_projects_url(rss_url_options), title: "All activity")
 
 - page_title    "Activity"
 - header_title  "Activity", activity_dashboard_path
diff --git a/app/views/dashboard/groups/_groups.html.haml b/app/views/dashboard/groups/_groups.html.haml
new file mode 100644
index 00000000000..6c3bf1a2b3b
--- /dev/null
+++ b/app/views/dashboard/groups/_groups.html.haml
@@ -0,0 +1,6 @@
+.js-groups-list-holder
+  %ul.content-list
+    - @group_members.each do |group_member|
+      = render 'shared/groups/group', group: group_member.group, group_member: group_member
+
+  = paginate @group_members, theme: 'gitlab'
diff --git a/app/views/dashboard/groups/index.html.haml b/app/views/dashboard/groups/index.html.haml
index 1a679c51774..73ab2c95ff9 100644
--- a/app/views/dashboard/groups/index.html.haml
+++ b/app/views/dashboard/groups/index.html.haml
@@ -5,9 +5,4 @@
 - if @group_members.empty?
   = render 'empty_state'
 - else
-  %ul.content-list
-    - @group_members.each do |group_member|
-      - group = group_member.group
-      = render 'shared/groups/group', group: group, group_member: group_member
-
-  = paginate @group_members, theme: 'gitlab'
+  = render 'groups'
diff --git a/app/views/dashboard/issues.atom.builder b/app/views/dashboard/issues.atom.builder
index bdea1064096..06fb531b546 100644
--- a/app/views/dashboard/issues.atom.builder
+++ b/app/views/dashboard/issues.atom.builder
@@ -4,7 +4,7 @@ xml.feed "xmlns" => "http://www.w3.org/2005/Atom", "xmlns:media" => "http://sear
   xml.link    href: url_for(params), rel: "self", type: "application/atom+xml"
   xml.link    href: issues_dashboard_url, rel: "alternate", type: "text/html"
   xml.id      issues_dashboard_url
-  xml.updated @issues.first.created_at.xmlschema if @issues.reorder(nil).any?
+  xml.updated @issues.first.updated_at.xmlschema if @issues.reorder(nil).any?
 
   xml << render(partial: 'issues/issue', collection: @issues) if @issues.reorder(nil).any?
 end
diff --git a/app/views/dashboard/issues.html.haml b/app/views/dashboard/issues.html.haml
index 3caaf827ff5..10867140d4f 100644
--- a/app/views/dashboard/issues.html.haml
+++ b/app/views/dashboard/issues.html.haml
@@ -1,20 +1,14 @@
 - page_title "Issues"
 - header_title  "Issues", issues_dashboard_path(assignee_id: current_user.id)
 = content_for :meta_tags do
-  - if current_user
-    = auto_discovery_link_tag(:atom, url_for(params.merge(format: :atom, private_token: current_user.private_token)), title: "#{current_user.name} issues")
+  = auto_discovery_link_tag(:atom, params.merge(rss_url_options), title: "#{current_user.name} issues")
 
 .top-area
   = render 'shared/issuable/nav', type: :issues
   .nav-controls
-    - if current_user
-      = link_to url_for(params.merge(format: :atom, private_token: current_user.private_token)), class: 'btn' do
-        = icon('rss')
-        %span.icon-label
-          Subscribe
+    = link_to params.merge(rss_url_options), class: 'btn has-tooltip', title: 'Subscribe' do
+      = icon('rss')
     = render 'shared/new_project_item_select', path: 'issues/new', label: "New Issue"
 
 = render 'shared/issuable/filter', type: :issues
-
-.prepend-top-default
-  = render 'shared/issues'
+= render 'shared/issues'
diff --git a/app/views/dashboard/merge_requests.html.haml b/app/views/dashboard/merge_requests.html.haml
index fb016599fef..e64c78c4cb8 100644
--- a/app/views/dashboard/merge_requests.html.haml
+++ b/app/views/dashboard/merge_requests.html.haml
@@ -7,6 +7,4 @@
     = render 'shared/new_project_item_select', path: 'merge_requests/new', label: "New Merge Request"
 
 = render 'shared/issuable/filter', type: :merge_requests
-
-.prepend-top-default
-  = render 'shared/merge_requests'
+= render 'shared/merge_requests'
diff --git a/app/views/dashboard/milestones/index.html.haml b/app/views/dashboard/milestones/index.html.haml
index 917bfbd47e9..505b475f55b 100644
--- a/app/views/dashboard/milestones/index.html.haml
+++ b/app/views/dashboard/milestones/index.html.haml
@@ -1,11 +1,11 @@
-- page_title "Milestones"
-- header_title "Milestones", dashboard_milestones_path
+- page_title 'Milestones'
+- header_title 'Milestones', dashboard_milestones_path
 
 .top-area
-  = render 'shared/milestones_filter'
+  = render 'shared/milestones_filter', counts: @milestone_states
 
   .nav-controls
-    = render 'shared/new_project_item_select', path: 'milestones/new', label: "New Milestone", include_groups: true
+    = render 'shared/new_project_item_select', path: 'milestones/new', label: 'New Milestone', include_groups: true
 
 .milestones
   %ul.content-list
@@ -15,4 +15,4 @@
     - else
       - @milestones.each do |milestone|
         = render 'milestone', milestone: milestone
-  = paginate @milestones, theme: "gitlab"
+  = paginate @milestones, theme: 'gitlab'
diff --git a/app/views/dashboard/milestones/show.html.haml b/app/views/dashboard/milestones/show.html.haml
index 60c84a26420..2129920afd2 100644
--- a/app/views/dashboard/milestones/show.html.haml
+++ b/app/views/dashboard/milestones/show.html.haml
@@ -1,5 +1,5 @@
 - header_title "Milestones", dashboard_milestones_path
 
 = render 'shared/milestones/top', milestone: @milestone
-= render 'shared/milestones/summary', milestone: @milestone
 = render 'shared/milestones/tabs', milestone: @milestone, show_full_project_name: true
+= render 'shared/milestones/sidebar', milestone: @milestone, affix_offset: 51
diff --git a/app/views/dashboard/projects/_zero_authorized_projects.html.haml b/app/views/dashboard/projects/_zero_authorized_projects.html.haml
index fdea834ff45..1bbd4602ecf 100644
--- a/app/views/dashboard/projects/_zero_authorized_projects.html.haml
+++ b/app/views/dashboard/projects/_zero_authorized_projects.html.haml
@@ -4,6 +4,18 @@
     Welcome to GitLab
   %p.blank-state-text
     Code, test, and deploy together
+
+- if current_user.can_create_group?
+  .blank-state
+    .blank-state-icon
+      = custom_icon("group", size: 50)
+    %h3.blank-state-title
+      You can create a group for several dependent projects.
+    %p.blank-state-text
+      Groups are the best way to manage projects and members.
+    = link_to new_group_path, class: "btn btn-new" do
+      New group
+
 .blank-state
   .blank-state-icon
     = custom_icon("project", size: 50)
@@ -21,18 +33,7 @@
     = link_to new_project_path, class: "btn btn-new" do
       New project
 
-- if current_user.can_create_group?
-  .blank-state
-    .blank-state-icon
-      = custom_icon("group", size: 50)
-    %h3.blank-state-title
-      You can create a group for several dependent projects.
-    %p.blank-state-text
-      Groups are the best way to manage projects and members.
-    = link_to new_group_path, class: "btn btn-new" do
-      New group
-
--if publicish_project_count > 0
+- if publicish_project_count > 0
   .blank-state
     .blank-state-icon
       = icon("globe")
diff --git a/app/views/dashboard/projects/index.atom.builder b/app/views/dashboard/projects/index.atom.builder
index fb5be63b472..13f7a8ddcec 100644
--- a/app/views/dashboard/projects/index.atom.builder
+++ b/app/views/dashboard/projects/index.atom.builder
@@ -1,7 +1,7 @@
 xml.instruct!
 xml.feed "xmlns" => "http://www.w3.org/2005/Atom", "xmlns:media" => "http://search.yahoo.com/mrss/" do
   xml.title   "Activity"
-  xml.link    href: dashboard_projects_url(format: :atom, private_token: current_user.try(:private_token)), rel: "self", type: "application/atom+xml"
+  xml.link    href: dashboard_projects_url(rss_url_options), rel: "self", type: "application/atom+xml"
   xml.link    href: dashboard_projects_url, rel: "alternate", type: "text/html"
   xml.id      dashboard_projects_url
   xml.updated @events[0].updated_at.xmlschema if @events[0]
diff --git a/app/views/dashboard/projects/index.html.haml b/app/views/dashboard/projects/index.html.haml
index 4f36a4a1c73..596499230f9 100644
--- a/app/views/dashboard/projects/index.html.haml
+++ b/app/views/dashboard/projects/index.html.haml
@@ -1,17 +1,19 @@
 = content_for :meta_tags do
-  - if current_user
-    = auto_discovery_link_tag(:atom, dashboard_projects_url(format: :atom, private_token: current_user.private_token), title: "All activity")
+  = auto_discovery_link_tag(:atom, dashboard_projects_url(rss_url_options), title: "All activity")
 
 - page_title    "Projects"
 - header_title  "Projects", dashboard_projects_path
 
-- if @projects.any? || params[:filter_projects]
+- unless show_user_callout?
+  = render 'shared/user_callout'
+
+- if @projects.any? || params[:name]
   = render 'dashboard/projects_head'
 
 - if @last_push
   = render "events/event_last_push", event: @last_push
 
-- if @projects.any? || params[:filter_projects]
+- if @projects.any? || params[:name]
   = render 'projects'
 - else
   = render "zero_authorized_projects"
diff --git a/app/views/dashboard/projects/starred.html.haml b/app/views/dashboard/projects/starred.html.haml
index 70705923d42..162ae153b1c 100644
--- a/app/views/dashboard/projects/starred.html.haml
+++ b/app/views/dashboard/projects/starred.html.haml
@@ -6,7 +6,7 @@
 - if @last_push
   = render "events/event_last_push", event: @last_push
 
-- if @projects.any?
+- if @projects.any? || params[:filter_projects]
   = render 'projects'
 - else
   %h3 You don't have starred projects yet
diff --git a/app/views/dashboard/snippets/index.html.haml b/app/views/dashboard/snippets/index.html.haml
index b2af438ea57..85cbe0bf0e6 100644
--- a/app/views/dashboard/snippets/index.html.haml
+++ b/app/views/dashboard/snippets/index.html.haml
@@ -2,41 +2,11 @@
 - header_title  "Snippets", dashboard_snippets_path
 
 = render 'dashboard/snippets_head'
+= render partial: 'snippets/snippets_scope_menu', locals: { include_private: true }
 
-.nav-block
-  .controls.hidden-xs
-    = link_to new_snippet_path, class: "btn btn-new", title: "New snippet" do
-      = icon('plus')
-      New snippet
+.visible-xs
+  &nbsp;
+  = link_to new_snippet_path, class: "btn btn-new btn-block", title: "New snippet" do
+    New snippet
 
-  .nav-links.snippet-scope-menu
-    %li{ class: ("active" unless params[:scope]) }
-      = link_to dashboard_snippets_path do
-        All
-        %span.badge
-          = current_user.snippets.count
-
-    %li{ class: ("active" if params[:scope] == "are_private") }
-      = link_to dashboard_snippets_path(scope: 'are_private') do
-        Private
-        %span.badge
-          = current_user.snippets.are_private.count
-
-    %li{ class: ("active" if params[:scope] == "are_internal") }
-      = link_to dashboard_snippets_path(scope: 'are_internal') do
-        Internal
-        %span.badge
-          = current_user.snippets.are_internal.count
-
-    %li{ class: ("active" if params[:scope] == "are_public") }
-      = link_to dashboard_snippets_path(scope: 'are_public') do
-        Public
-        %span.badge
-          = current_user.snippets.are_public.count
-
-    .visible-xs
-      = link_to new_snippet_path, class: "btn btn-new btn-block", title: "New snippet" do
-        = icon('plus')
-        New snippet
-
-= render 'snippets/snippets'
+= render partial: 'snippets/snippets', locals: { link_project: true }
diff --git a/app/views/dashboard/todos/_todo.html.haml b/app/views/dashboard/todos/_todo.html.haml
index cc077fad32a..d0c12aa57ae 100644
--- a/app/views/dashboard/todos/_todo.html.haml
+++ b/app/views/dashboard/todos/_todo.html.haml
@@ -1,25 +1,33 @@
-%li{class: "todo todo-#{todo.done? ? 'done' : 'pending'}", id: dom_id(todo), data:{url: todo_target_path(todo)} }
-  = author_avatar(todo, size: 40)
+%li{ class: "todo todo-#{todo.done? ? 'done' : 'pending'}", id: dom_id(todo), data: { url: todo_target_path(todo) } }
+  .todo-avatar
+    = author_avatar(todo, size: 40)
 
   .todo-item.todo-block
     .todo-title.title
-      - unless todo.build_failed?
+      - unless todo.build_failed? || todo.unmergeable?
         = todo_target_state_pill(todo)
 
-        %span.author-name
+        .title-item.author-name
           - if todo.author
             = link_to_author(todo)
           - else
             (removed)
-      %span.todo-label
+
+      .title-item.action-name
         = todo_action_name(todo)
+
+      .title-item.todo-label
         - if todo.target
           = todo_target_link(todo)
         - else
           (removed)
 
-      &middot; #{time_ago_with_tooltip(todo.created_at)}
-      = todo_due_date(todo)
+      .title-item
+        &middot;
+
+      .title-item
+        #{time_ago_with_tooltip(todo.created_at)}
+        = todo_due_date(todo)
 
     .todo-body
       .todo-note
@@ -28,6 +36,14 @@
 
   - if todo.pending?
     .todo-actions
-      = link_to [:dashboard, todo], method: :delete, class: 'btn btn-loading done-todo' do
+      = link_to dashboard_todo_path(todo), method: :delete, class: 'btn btn-loading js-done-todo', data: { href: dashboard_todo_path(todo) } do
         Done
         = icon('spinner spin')
+      = link_to restore_dashboard_todo_path(todo), method: :patch, class: 'btn btn-loading js-undo-todo hidden', data: { href: restore_dashboard_todo_path(todo) } do
+        Undo
+        = icon('spinner spin')
+  - else
+    .todo-actions
+      = link_to restore_dashboard_todo_path(todo), method: :patch, class: 'btn btn-loading js-add-todo', data: { href: restore_dashboard_todo_path(todo) } do
+        Add todo
+        = icon('spinner spin')
diff --git a/app/views/dashboard/todos/index.html.haml b/app/views/dashboard/todos/index.html.haml
index e247eebc3fc..52d6ebd8a14 100644
--- a/app/views/dashboard/todos/index.html.haml
+++ b/app/views/dashboard/todos/index.html.haml
@@ -4,15 +4,13 @@
 - if current_user.todos.any?
   .top-area
     %ul.nav-links
-      - todo_pending_active = ('active' if params[:state].blank? || params[:state] == 'pending')
-      %li{class: "todos-pending #{todo_pending_active}"}
+      %li.todos-pending{ class: active_when(params[:state].blank? || params[:state] == 'pending') }>
         = link_to todos_filter_path(state: 'pending') do
           %span
             To do
           %span.badge
             = number_with_delimiter(todos_pending_count)
-      - todo_done_active = ('active' if params[:state] == 'done')
-      %li{class: "todos-done #{todo_done_active}"}
+      %li.todos-done{ class: active_when(params[:state] == 'done') }>
         = link_to todos_filter_path(state: 'done') do
           %span
             Done
@@ -21,9 +19,13 @@
 
     .nav-controls
       - if @todos.any?(&:pending?)
-        = link_to destroy_all_dashboard_todos_path(todos_filter_params), class: 'btn btn-loading js-todos-mark-all', method: :delete do
-          Mark all as done
-          = icon('spinner spin')
+        .append-right-default
+          = link_to destroy_all_dashboard_todos_path(todos_filter_params), class: 'btn btn-loading js-todos-mark-all', method: :delete, data: { href: destroy_all_dashboard_todos_path(todos_filter_params) } do
+            Mark all as done
+            = icon('spinner spin')
+          = link_to bulk_restore_dashboard_todos_path, class: 'btn btn-loading js-todos-undo-all hidden', method: :patch , data: { href: bulk_restore_dashboard_todos_path(todos_filter_params) } do
+            Undo mark all as done
+            = icon('spinner spin')
 
   .todos-filters
     .row-content-block.second-block
@@ -32,7 +34,7 @@
           - if params[:project_id].present?
             = hidden_field_tag(:project_id, params[:project_id])
           = dropdown_tag(project_dropdown_label(params[:project_id], 'Project'), options: { toggle_class: 'js-project-search js-filter-submit', title: 'Filter by project', filter: true, filterInput: 'input#project-search', dropdown_class: 'dropdown-menu-selectable dropdown-menu-project js-filter-submit',
-            placeholder: 'Search projects', data: { data: todo_projects_options } })
+            placeholder: 'Search projects', data: { data: todo_projects_options, default_label: 'Project' } })
         .filter-item.inline
           - if params[:author_id].present?
             = hidden_field_tag(:author_id, params[:author_id])
@@ -42,59 +44,62 @@
           - if params[:type].present?
             = hidden_field_tag(:type, params[:type])
           = dropdown_tag(todo_types_dropdown_label(params[:type], 'Type'), options: { toggle_class: 'js-type-search js-filter-submit', dropdown_class: 'dropdown-menu-selectable dropdown-menu-type js-filter-submit',
-            data: { data: todo_types_options } })
+            data: { data: todo_types_options, default_label: 'Type' } })
         .filter-item.inline.actions-filter
           - if params[:action_id].present?
             = hidden_field_tag(:action_id, params[:action_id])
           = dropdown_tag(todo_actions_dropdown_label(params[:action_id], 'Action'), options: { toggle_class: 'js-action-search js-filter-submit', dropdown_class: 'dropdown-menu-selectable dropdown-menu-action js-filter-submit',
-            data: { data: todo_actions_options }})
-        .pull-right
-          .dropdown.inline.prepend-left-10
-            %button.dropdown-toggle.btn{type: 'button', 'data-toggle' => 'dropdown'}
+            data: { data: todo_actions_options, default_label: 'Action' } })
+        .filter-item.sort-filter
+          .dropdown
+            %button.dropdown-menu-toggle.dropdown-menu-toggle-sort{ type: 'button', 'data-toggle' => 'dropdown' }
               %span.light
               - if @sort.present?
                 = sort_options_hash[@sort]
               - else
                 = sort_title_recently_created
-              = icon('caret-down')
-            %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-sort
+              = icon('chevron-down')
+            %ul.dropdown-menu.dropdown-menu-sort
               %li
-                = link_to todos_filter_path(sort: sort_value_priority) do
-                  = sort_title_priority
+                = link_to todos_filter_path(sort: sort_value_label_priority) do
+                  = sort_title_label_priority
                 = link_to todos_filter_path(sort: sort_value_recently_created) do
                   = sort_title_recently_created
                 = link_to todos_filter_path(sort: sort_value_oldest_created) do
                   = sort_title_oldest_created
 
-
-.prepend-top-default
+.js-todos-all
   - if @todos.any?
-    .js-todos-options{ data: {per_page: @todos.limit_value, current_page: @todos.current_page, total_pages: @todos.total_pages} }
-    - @todos.group_by(&:project).each do |group|
-      .panel.panel-default.panel-small
-        - project = group[0]
-        .panel-heading
-          = link_to project.name_with_namespace, namespace_project_path(project.namespace, project)
-
-        %ul.content-list.todos-list
-          = render group[1]
-    = paginate @todos, theme: "gitlab"
+    .js-todos-list-container
+      .js-todos-options{ data: { per_page: @todos.limit_value, current_page: @todos.current_page, total_pages: @todos.total_pages } }
+        .panel.panel-default.panel-without-border.panel-without-margin
+          %ul.content-list.todos-list
+            = render @todos
+      = paginate @todos, theme: "gitlab"
+    .js-nothing-here-container.todos-all-done.hidden
+      = render "shared/empty_states/icons/todos_all_done.svg"
+      %h4.text-center
+        You're all done!
   - elsif current_user.todos.any?
     .todos-all-done
-      = render "shared/empty_states/todos_all_done.svg"
-      %h4.text-center
-        Good job! Looks like you don't have any todos left.
-      %p.text-center
-        Are you looking for things to do? Take a look at
-        = succeed "," do
-          = link_to "the opened issues", issues_dashboard_path
-        contribute to
-        = link_to "merge requests", merge_requests_dashboard_path
-        or mention someone in a comment to assign a new todo automatically.
+      = render "shared/empty_states/icons/todos_all_done.svg"
+      - if todos_filter_empty?
+        %h4.text-center
+          = Gitlab.config.gitlab.no_todos_messages.sample
+        %p.text-center
+          Are you looking for things to do? Take a look at
+          = succeed "," do
+            = link_to "the opened issues", issues_dashboard_path
+          contribute to
+          = link_to "merge requests", merge_requests_dashboard_path
+          or mention someone in a comment to assign a new todo automatically.
+      - else
+        %h4.text-center
+          There are no todos to show.
   - else
     .todos-empty
       .todos-empty-hero
-        = render "shared/empty_states/todos_empty.svg"
+        = render "shared/empty_states/icons/todos_empty.svg"
       .todos-empty-content
         %h4
           Todos let you see what you should do next.
diff --git a/app/views/devise/confirmations/almost_there.haml b/app/views/devise/confirmations/almost_there.haml
index 20cd7b0179d..fb70d158096 100644
--- a/app/views/devise/confirmations/almost_there.haml
+++ b/app/views/devise/confirmations/almost_there.haml
@@ -1,12 +1,13 @@
-.well-confirmation.text-center
+.well-confirmation.text-center.append-bottom-20
   %h1.prepend-top-0
     Almost there...
-  %p.lead
+  %p.lead.append-bottom-20
     Please check your email to confirm your account
+  %hr
 - if current_application_settings.after_sign_up_text.present?
   .well-confirmation.text-center
     = markdown_field(current_application_settings, :after_sign_up_text)
-%p.confirmation-content.text-center
+%p.text-center
   No confirmation email received? Please check your spam folder or
 .append-bottom-20.prepend-top-20.text-center
   %a.btn.btn-lg.btn-success{ href: new_user_confirmation_path }
diff --git a/app/views/devise/sessions/_new_base.html.haml b/app/views/devise/sessions/_new_base.html.haml
index 21b89580818..21c751a23f8 100644
--- a/app/views/devise/sessions/_new_base.html.haml
+++ b/app/views/devise/sessions/_new_base.html.haml
@@ -1,16 +1,16 @@
 = form_for(resource, as: resource_name, url: session_path(resource_name), html: { class: 'new_user gl-show-field-errors', 'aria-live' => 'assertive'}) do |f|
-  %div.form-group
+  .form-group
     = f.label "Username or email", for: :login
     = f.text_field :login, class: "form-control top", autofocus: "autofocus", autocapitalize: "off", autocorrect: "off", required: true, title: "This field is required."
-  %div.form-group
+  .form-group
     = f.label :password
     = f.password_field :password, class: "form-control bottom", required: true, title: "This field is required."
-  %div.submit-container.move-submit-down
-    = f.submit "Sign in", class: "btn btn-save"
   - if devise_mapping.rememberable?
     .remember-me.checkbox
-      %label{for: "user_remember_me"}
-        = f.check_box :remember_me
+      %label{ for: "user_remember_me" }
+        = f.check_box :remember_me, class: 'remember-me-checkbox'
         %span Remember me
       .pull-right.forgot-password
         = link_to "Forgot your password?", new_password_path(resource_name)
+  .submit-container.move-submit-down
+    = f.submit "Sign in", class: "btn btn-save"
diff --git a/app/views/devise/sessions/_new_crowd.html.haml b/app/views/devise/sessions/_new_crowd.html.haml
index a6cadbcbdff..2556cb6f59b 100644
--- a/app/views/devise/sessions/_new_crowd.html.haml
+++ b/app/views/devise/sessions/_new_crowd.html.haml
@@ -1,13 +1,13 @@
 = form_tag(omniauth_authorize_path(:user, :crowd), id: 'new_crowd_user', class: 'gl-show-field-errors') do
   .form-group
     = label_tag :username, 'Username or email'
-    = text_field_tag :username, nil, {class: "form-control top", title: "This field is required", autofocus: "autofocus", required: true }
+    = text_field_tag :username, nil, { class: "form-control top", title: "This field is required", autofocus: "autofocus", required: true }
   .form-group
     = label_tag :password
     = password_field_tag :password, nil, { class: "form-control bottom", title: "This field is required.", required: true }
   - if devise_mapping.rememberable?
     .remember-me.checkbox
-      %label{for: "remember_me"}
+      %label{ for: "remember_me" }
         = check_box_tag :remember_me, '1', false, id: 'remember_me'
         %span Remember me
   = submit_tag "Sign in", class: "btn-save btn"
diff --git a/app/views/devise/sessions/_new_ldap.html.haml b/app/views/devise/sessions/_new_ldap.html.haml
index 3ab5461f929..3159d21598a 100644
--- a/app/views/devise/sessions/_new_ldap.html.haml
+++ b/app/views/devise/sessions/_new_ldap.html.haml
@@ -1,13 +1,13 @@
 = form_tag(omniauth_callback_path(:user, server['provider_name']), id: 'new_ldap_user', class: "gl-show-field-errors") do
   .form-group
     = label_tag :username, "#{server['label']} Username"
-    = text_field_tag :username, nil, {class: "form-control top", title: "This field is required.", autofocus: "autofocus", required: true }
+    = text_field_tag :username, nil, { class: "form-control top", title: "This field is required.", autofocus: "autofocus", required: true }
   .form-group
     = label_tag :password
     = password_field_tag :password, nil, { class: "form-control bottom", title: "This field is required.", required: true }
   - if devise_mapping.rememberable?
     .remember-me.checkbox
-      %label{for: "remember_me"}
+      %label{ for: "remember_me" }
         = check_box_tag :remember_me, '1', false, id: 'remember_me'
         %span Remember me
   = submit_tag "Sign in", class: "btn-save btn"
diff --git a/app/views/devise/sessions/new.html.haml b/app/views/devise/sessions/new.html.haml
index fa8e7979461..af87129e49e 100644
--- a/app/views/devise/sessions/new.html.haml
+++ b/app/views/devise/sessions/new.html.haml
@@ -1,4 +1,5 @@
 - page_title "Sign in"
+
 %div
   - if form_based_providers.any?
     = render 'devise/shared/tabs_ldap'
diff --git a/app/views/devise/sessions/two_factor.html.haml b/app/views/devise/sessions/two_factor.html.haml
index 2cadc424668..a039756c7e2 100644
--- a/app/views/devise/sessions/two_factor.html.haml
+++ b/app/views/devise/sessions/two_factor.html.haml
@@ -1,13 +1,13 @@
 - if inject_u2f_api?
   - content_for :page_specific_javascripts do
-    = page_specific_javascript_tag('u2f.js')
+    = page_specific_javascript_bundle_tag('u2f')
 
 %div
   = render 'devise/shared/tab_single', tab_title: 'Two-Factor Authentication'
   .login-box
     .login-body
       - if @user.two_factor_otp_enabled?
-        = form_for(resource, as: resource_name, url: session_path(resource_name), method: :post, html: { class: 'edit_user gl-show-field-errors' }) do |f|
+        = form_for(resource, as: resource_name, url: session_path(resource_name), method: :post, html: { class: "edit_user gl-show-field-errors js-2fa-form #{'hidden' if @user.two_factor_u2f_enabled?}" }) do |f|
           - resource_params = params[resource_name].presence || params
           = f.hidden_field :remember_me, value: resource_params.fetch(:remember_me, 0)
           %div
diff --git a/app/views/devise/shared/_omniauth_box.html.haml b/app/views/devise/shared/_omniauth_box.html.haml
index 8908b64cdac..f92f89e73ff 100644
--- a/app/views/devise/shared/_omniauth_box.html.haml
+++ b/app/views/devise/shared/_omniauth_box.html.haml
@@ -1,4 +1,4 @@
-%div.omniauth-container
+.omniauth-container
   %p
     %span.light
       Sign in with &nbsp;
@@ -6,4 +6,4 @@
     - providers.each do |provider|
       %span.light
         - has_icon = provider_has_icon?(provider)
-        = link_to provider_image_tag(provider), omniauth_authorize_path(:user, provider), method: :post, class: (has_icon ? 'oauth-image-link' : 'btn'), "data-no-turbolink" => "true"
+        = link_to provider_image_tag(provider), omniauth_authorize_path(:user, provider), method: :post, class: (has_icon ? 'oauth-image-link' : 'btn')
diff --git a/app/views/devise/shared/_signin_box.html.haml b/app/views/devise/shared/_signin_box.html.haml
index 86edaf14e43..da4769e214e 100644
--- a/app/views/devise/shared/_signin_box.html.haml
+++ b/app/views/devise/shared/_signin_box.html.haml
@@ -1,18 +1,18 @@
 - if form_based_providers.any?
   - if crowd_enabled?
-    .login-box.tab-pane.active{id: "crowd", role: 'tabpanel', class: 'tab-pane'}
+    .login-box.tab-pane.active{ id: "crowd", role: 'tabpanel' }
       .login-body
         = render 'devise/sessions/new_crowd'
   - @ldap_servers.each_with_index do |server, i|
-    .login-box.tab-pane{id: "#{server['provider_name']}", role: 'tabpanel', class: (:active if i.zero? && !crowd_enabled?)}
+    .login-box.tab-pane{ id: "#{server['provider_name']}", role: 'tabpanel', class: active_when(i.zero? && !crowd_enabled?) }
       .login-body
         = render 'devise/sessions/new_ldap', server: server
   - if signin_enabled?
-    .login-box.tab-pane{id: 'ldap-standard', role: 'tabpanel'}
+    .login-box.tab-pane{ id: 'ldap-standard', role: 'tabpanel' }
       .login-body
         = render 'devise/sessions/new_base'
 
 - elsif signin_enabled?
-  .login-box.tab-pane.active{id: 'login-pane', role: 'tabpanel'}
+  .login-box.tab-pane.active{ id: 'login-pane', role: 'tabpanel' }
     .login-body
       = render 'devise/sessions/new_base'
diff --git a/app/views/devise/shared/_signup_box.html.haml b/app/views/devise/shared/_signup_box.html.haml
index 7c68e3266e5..a2f6a7ab1cb 100644
--- a/app/views/devise/shared/_signup_box.html.haml
+++ b/app/views/devise/shared/_signup_box.html.haml
@@ -1,26 +1,29 @@
-#register-pane.login-box{ role: 'tabpanel', class: 'tab-pane' }
+#register-pane.tab-pane.login-box{ role: 'tabpanel' }
   .login-body
     = form_for(resource, as: "new_#{resource_name}", url: registration_path(resource_name), html: { class: "new_new_user gl-show-field-errors", "aria-live" => "assertive" }) do |f|
       .devise-errors
         = devise_error_messages!
-      %div.form-group
-        = f.label :name
+      .form-group
+        = f.label :name, 'Full name'
         = f.text_field :name, class: "form-control top", required: true, title: "This field is required."
-      %div.username.form-group
+      .username.form-group
         = f.label :username
-        = f.text_field :username, class: "form-control middle", pattern: "[a-zA-Z0-9]+", required: true, title: 'Please create a username with only alphanumeric characters.'
+        = f.text_field :username, class: "form-control middle", pattern: Gitlab::Regex::NAMESPACE_REGEX_STR_JS, required: true, title: 'Please create a username with only alphanumeric characters.'
         %p.validation-error.hide Username is already taken.
         %p.validation-success.hide Username is available.
         %p.validation-pending.hide Checking username availability...
-      %div.form-group
+      .form-group
         = f.label :email
         = f.email_field :email, class: "form-control middle", required: true, title: "Please provide a valid email address."
+      .form-group
+        = f.label :email_confirmation
+        = f.email_field :email_confirmation, class: "form-control middle", required: true, title: "Please retype the email address."
       .form-group.append-bottom-20#password-strength
         = f.label :password
         = f.password_field :password, class: "form-control bottom", required: true, pattern: ".{#{@minimum_password_length},}", title: "Minimum length is #{@minimum_password_length} characters."
         %p.gl-field-hint Minimum length is #{@minimum_password_length} characters
       %div
-      - if current_application_settings.recaptcha_enabled
+      - if Gitlab::Recaptcha.enabled?
         = recaptcha_tags
       %div
         = f.submit "Register", class: "btn-register btn"
diff --git a/app/views/devise/shared/_tabs_ldap.html.haml b/app/views/devise/shared/_tabs_ldap.html.haml
index 1e957f0935f..dd34600490e 100644
--- a/app/views/devise/shared/_tabs_ldap.html.haml
+++ b/app/views/devise/shared/_tabs_ldap.html.haml
@@ -3,8 +3,11 @@
     %li.active
       = link_to "Crowd", "#crowd", 'data-toggle' => 'tab'
   - @ldap_servers.each_with_index do |server, i|
-    %li{class: (:active if i.zero? && !crowd_enabled?)}
+    %li{ class: active_when(i.zero? && !crowd_enabled?) }
       = link_to server['label'], "##{server['provider_name']}",  'data-toggle' => 'tab'
   - if signin_enabled?
     %li
       = link_to 'Standard', '#ldap-standard', 'data-toggle' => 'tab'
+  - if signin_enabled? && signup_enabled?
+    %li
+      = link_to 'Register', '#register-pane', 'data-toggle' => 'tab'
diff --git a/app/views/devise/shared/_tabs_normal.html.haml b/app/views/devise/shared/_tabs_normal.html.haml
index 05246303fb6..c225d800a98 100644
--- a/app/views/devise/shared/_tabs_normal.html.haml
+++ b/app/views/devise/shared/_tabs_normal.html.haml
@@ -1,6 +1,6 @@
-%ul.nav-links.new-session-tabs.nav-tabs{ role: 'tablist'}
+%ul.nav-links.new-session-tabs.nav-tabs{ role: 'tablist' }
   %li.active{ role: 'presentation' }
-    %a{ href: '#login-pane', data: { toggle: 'tab' }, role: 'tab'} Sign in
+    %a{ href: '#login-pane', data: { toggle: 'tab' }, role: 'tab' } Sign in
   - if signin_enabled? && signup_enabled?
-    %li{ role: 'presentation'}
-      %a{ href: '#register-pane', data: { toggle: 'tab' }, role: 'tab'} Register
+    %li{ role: 'presentation' }
+      %a{ href: '#register-pane', data: { toggle: 'tab' }, role: 'tab' } Register
diff --git a/app/views/discussions/_diff_discussion.html.haml b/app/views/discussions/_diff_discussion.html.haml
index 1411daeb4a6..ee452add394 100644
--- a/app/views/discussions/_diff_discussion.html.haml
+++ b/app/views/discussions/_diff_discussion.html.haml
@@ -1,6 +1,6 @@
 - expanded = local_assigns.fetch(:expanded, true)
-%tr.notes_holder{class: ('hide' unless expanded)}
+%tr.notes_holder{ class: ('hide' unless expanded) }
   %td.notes_line{ colspan: 2 }
   %td.notes_content
-    .content
+    .content{ class: ('hide' unless expanded) }
       = render "discussions/notes", discussion: discussion
diff --git a/app/views/discussions/_diff_with_notes.html.haml b/app/views/discussions/_diff_with_notes.html.haml
index 3a95a652810..94408b92374 100644
--- a/app/views/discussions/_diff_with_notes.html.haml
+++ b/app/views/discussions/_diff_with_notes.html.haml
@@ -2,7 +2,7 @@
 - blob = discussion.blob
 
 .diff-file.file-holder
-  .file-title
+  .js-file-title.file-title
     = render "projects/diffs/file_header", diff_file: diff_file, blob: blob, diff_commit: diff_file.content_commit, project: discussion.project, url: discussion_diff_path(discussion)
 
   .diff-content.code.js-syntax-highlight
diff --git a/app/views/discussions/_discussion.html.haml b/app/views/discussions/_discussion.html.haml
index 077e8e64e5f..2d78c55211e 100644
--- a/app/views/discussions/_discussion.html.haml
+++ b/app/views/discussions/_discussion.html.haml
@@ -8,14 +8,12 @@
       .discussion.js-toggle-container{ class: discussion.id, data: { discussion_id: discussion.id } }
         .discussion-header
           .discussion-actions
-            = link_to "#", class: "note-action-button discussion-toggle-button js-toggle-button" do
+            %button.note-action-button.discussion-toggle-button.js-toggle-button{ type: "button" }
               - if expanded
                 = icon("chevron-up")
               - else
                 = icon("chevron-down")
-
               Toggle discussion
-
           = link_to_member(@project, discussion.author, avatar: false)
 
           .inline.discussion-headline-light
@@ -37,7 +35,6 @@
                 an outdated diff
 
             = time_ago_with_tooltip(discussion.created_at, placement: "bottom", html_class: "note-created-ago")
-
           = render "discussions/headline", discussion: discussion
 
         .discussion-body.js-toggle-content{ class: ("hide" unless expanded) }
diff --git a/app/views/discussions/_jump_to_next.html.haml b/app/views/discussions/_jump_to_next.html.haml
index 7ed09dd1a98..69bd416c4de 100644
--- a/app/views/discussions/_jump_to_next.html.haml
+++ b/app/views/discussions/_jump_to_next.html.haml
@@ -5,5 +5,5 @@
       %button.btn.btn-default.discussion-next-btn.has-tooltip{ "@click" => "jumpToNextUnresolvedDiscussion",
         title: "Jump to next unresolved discussion",
         "aria-label" => "Jump to next unresolved discussion",
-        data: { container: "body" }}
+        data: { container: "body" } }
         = custom_icon("next_discussion")
diff --git a/app/views/discussions/_new_issue_for_all_discussions.html.haml b/app/views/discussions/_new_issue_for_all_discussions.html.haml
new file mode 100644
index 00000000000..ca9e0e8728a
--- /dev/null
+++ b/app/views/discussions/_new_issue_for_all_discussions.html.haml
@@ -0,0 +1,6 @@
+- if merge_request.discussions_can_be_resolved_by?(current_user) && can?(current_user, :create_issue, @project)
+  .btn-group{ role: "group", "v-if" => "unresolvedDiscussionCount > 0" }
+    .btn.btn-default.discussion-create-issue-btn.has-tooltip{ title: "Resolve all discussions in new issue",
+                                                             "aria-label" => "Resolve all discussions in a new issue",
+                                                             "data-container" => "body" }
+      = link_to custom_icon('icon_mr_issue'), new_namespace_project_issue_path(@project.namespace, @project, merge_request_to_resolve_discussions_of: merge_request.iid), title: "Resolve all discussions in new issue", class: 'new-issue-for-discussion'
diff --git a/app/views/discussions/_new_issue_for_discussion.html.haml b/app/views/discussions/_new_issue_for_discussion.html.haml
new file mode 100644
index 00000000000..df5546a1e32
--- /dev/null
+++ b/app/views/discussions/_new_issue_for_discussion.html.haml
@@ -0,0 +1,8 @@
+- if discussion.can_resolve?(current_user) && can?(current_user, :create_issue, @project)
+  %new-issue-for-discussion-btn{ ":discussion-id" => "'#{discussion.id}'",
+                                 "inline-template" => true }
+    .btn-group{ role: "group", "v-if" => "showButton" }
+      .btn.btn-default.discussion-create-issue-btn.has-tooltip{ title: "Resolve this discussion in a new issue",
+                                                               "aria-label" => "Resolve this discussion in a new issue",
+                                                               "data-container" => "body" }
+        = link_to custom_icon('icon_mr_issue'), new_namespace_project_issue_path(@project.namespace, @project, merge_request_to_resolve_discussions_of: merge_request.iid, discussion_to_resolve: discussion.id), title: "Resolve this discussion in a new issue", class: 'new-issue-for-discussion'
diff --git a/app/views/discussions/_notes.html.haml b/app/views/discussions/_notes.html.haml
index dfdbdf1f969..2789391819c 100644
--- a/app/views/discussions/_notes.html.haml
+++ b/app/views/discussions/_notes.html.haml
@@ -11,6 +11,8 @@
           = link_to_reply_discussion(discussion, line_type)
         = render "discussions/resolve_all", discussion: discussion
         - if discussion.for_merge_request?
-          = render "discussions/jump_to_next", discussion: discussion
+          .btn-group.discussion-actions
+            = render "discussions/new_issue_for_discussion", discussion: discussion, merge_request: discussion.noteable
+            = render "discussions/jump_to_next", discussion: discussion
     - else
       = link_to_reply_discussion(discussion)
diff --git a/app/views/discussions/_parallel_diff_discussion.html.haml b/app/views/discussions/_parallel_diff_discussion.html.haml
index f1072ce0feb..3a19e021643 100644
--- a/app/views/discussions/_parallel_diff_discussion.html.haml
+++ b/app/views/discussions/_parallel_diff_discussion.html.haml
@@ -1,21 +1,21 @@
 - expanded = discussion_left.try(:expanded?) || discussion_right.try(:expanded?)
-%tr.notes_holder{class: ('hide' unless expanded)}
+%tr.notes_holder{ class: ('hide' unless expanded) }
   - if discussion_left
     %td.notes_line.old
     %td.notes_content.parallel.old
-      .content{class: ('hide' unless discussion_left.expanded?)}
+      .content{ class: ('hide' unless discussion_left.expanded?) }
         = render "discussions/notes", discussion: discussion_left, line_type: 'old'
   - else
-    %td.notes_line.old= ""
+    %td.notes_line.old= ("")
     %td.notes_content.parallel.old
       .content
 
   - if discussion_right
     %td.notes_line.new
     %td.notes_content.parallel.new
-      .content{class: ('hide' unless discussion_right.expanded?)}
+      .content{ class: ('hide' unless discussion_right.expanded?) }
         = render "discussions/notes", discussion: discussion_right, line_type: 'new'
   - else
-    %td.notes_line.new= ""
+    %td.notes_line.new= ("")
     %td.notes_content.parallel.new
       .content
diff --git a/app/views/discussions/_resolve_all.html.haml b/app/views/discussions/_resolve_all.html.haml
index f0b61e0f7de..e30ee1b0e05 100644
--- a/app/views/discussions/_resolve_all.html.haml
+++ b/app/views/discussions/_resolve_all.html.haml
@@ -1,6 +1,5 @@
 - if discussion.for_merge_request?
-  %resolve-discussion-btn{ ":project-path" => "'#{project_path(discussion.project)}'",
-      ":discussion-id" => "'#{discussion.id}'",
+  %resolve-discussion-btn{ ":discussion-id" => "'#{discussion.id}'",
       ":merge-request-id" => discussion.noteable.iid,
       ":can-resolve" => discussion.can_resolve?(current_user),
       "inline-template" => true }
diff --git a/app/views/doorkeeper/applications/_delete_form.html.haml b/app/views/doorkeeper/applications/_delete_form.html.haml
index 001a711b1dd..84b4ce5b606 100644
--- a/app/views/doorkeeper/applications/_delete_form.html.haml
+++ b/app/views/doorkeeper/applications/_delete_form.html.haml
@@ -1,6 +1,6 @@
 - submit_btn_css ||= 'btn btn-link btn-remove btn-sm'
 = form_tag oauth_application_path(application) do
-  %input{:name => "_method", :type => "hidden", :value => "delete"}/
+  %input{ :name => "_method", :type => "hidden", :value => "delete" }/
   - if defined? small
     = button_tag type: "submit", class: "btn btn-transparent", data: { confirm: "Are you sure?" } do
       %span.sr-only
diff --git a/app/views/doorkeeper/applications/_form.html.haml b/app/views/doorkeeper/applications/_form.html.haml
index 5c98265727a..b3313c7c985 100644
--- a/app/views/doorkeeper/applications/_form.html.haml
+++ b/app/views/doorkeeper/applications/_form.html.haml
@@ -17,5 +17,9 @@
         %code= Doorkeeper.configuration.native_redirect_uri
         for local tests
 
+  .form-group
+    = f.label :scopes, class: 'label-light'
+    = render 'shared/tokens/scopes_form', prefix: 'doorkeeper_application', token: application, scopes: @scopes
+
   .prepend-top-default
     = f.submit 'Save application', class: "btn btn-create"
diff --git a/app/views/doorkeeper/applications/index.html.haml b/app/views/doorkeeper/applications/index.html.haml
index 3998e66f40d..aa271150b07 100644
--- a/app/views/doorkeeper/applications/index.html.haml
+++ b/app/views/doorkeeper/applications/index.html.haml
@@ -31,7 +31,7 @@
                   %th.last-heading
               %tbody
                 - @applications.each do |application|
-                  %tr{id: "application_#{application.id}"}
+                  %tr{ id: "application_#{application.id}" }
                     %td= link_to application.name, oauth_application_path(application)
                     %td
                       - application.redirect_uri.split.each do |uri|
@@ -63,7 +63,7 @@
             %tbody
               - @authorized_apps.each do |app|
                 - token = app.authorized_tokens.order('created_at desc').first
-                %tr{id: "application_#{app.id}"}
+                %tr{ id: "application_#{app.id}" }
                   %td= app.name
                   %td= token.created_at
                   %td= token.scopes
@@ -72,7 +72,7 @@
                 %tr
                   %td
                     Anonymous
-                    %div.help-block
+                    .help-block
                       %em Authorization was granted by entering your username and password in the application.
                   %td= token.created_at
                   %td= token.scopes
diff --git a/app/views/doorkeeper/applications/show.html.haml b/app/views/doorkeeper/applications/show.html.haml
index 47442b78d48..559de63d96d 100644
--- a/app/views/doorkeeper/applications/show.html.haml
+++ b/app/views/doorkeeper/applications/show.html.haml
@@ -2,7 +2,7 @@
 %h3.page-title
   Application: #{@application.name}
 
-.table-holder
+.table-holder.oauth-application-show
   %table.table
     %tr
       %td
@@ -22,6 +22,9 @@
         - @application.redirect_uri.split.each do |uri|
           %div
             %span.monospace= uri
+
+    = render "shared/tokens/scopes_list", token: @application
+
 .form-actions
   = link_to 'Edit', edit_oauth_application_path(@application), class: 'btn btn-primary wide pull-left'
   = render 'delete_form', application: @application, submit_btn_css: 'btn btn-danger prepend-left-10'
diff --git a/app/views/doorkeeper/authorizations/error.html.haml b/app/views/doorkeeper/authorizations/error.html.haml
index a4c607cea60..6117b00149f 100644
--- a/app/views/doorkeeper/authorizations/error.html.haml
+++ b/app/views/doorkeeper/authorizations/error.html.haml
@@ -1,3 +1,3 @@
 %h3.page-title An error has occurred
-%main{:role => "main"}
+%main{ :role => "main" }
   %pre= @pre_auth.error_response.body[:error_description]
diff --git a/app/views/doorkeeper/authorizations/new.html.haml b/app/views/doorkeeper/authorizations/new.html.haml
index ce050007204..82aa51f9778 100644
--- a/app/views/doorkeeper/authorizations/new.html.haml
+++ b/app/views/doorkeeper/authorizations/new.html.haml
@@ -1,5 +1,5 @@
 %h3.page-title Authorization required
-%main{:role => "main"}
+%main{ :role => "main" }
   %p.h4
     Authorize
     %strong.text-info= @pre_auth.client.name
@@ -10,7 +10,7 @@
       %p
         = icon("exclamation-triangle fw")
         You are an admin, which means granting access to
-        %strong #{@pre_auth.client.name}
+        %strong= @pre_auth.client.name
         will allow them to interact with GitLab as an admin as well. Proceed with caution.
 
   - if @pre_auth.scopes
@@ -27,6 +27,7 @@
       = hidden_field_tag :state, @pre_auth.state
       = hidden_field_tag :response_type, @pre_auth.response_type
       = hidden_field_tag :scope, @pre_auth.scope
+      = hidden_field_tag :nonce, @pre_auth.nonce
       = submit_tag "Authorize", class: "btn btn-success wide pull-left"
     = form_tag oauth_authorization_path, method: :delete do
       = hidden_field_tag :client_id, @pre_auth.client.uid
@@ -34,4 +35,5 @@
       = hidden_field_tag :state, @pre_auth.state
       = hidden_field_tag :response_type, @pre_auth.response_type
       = hidden_field_tag :scope, @pre_auth.scope
+      = hidden_field_tag :nonce, @pre_auth.nonce
       = submit_tag "Deny", class: "btn btn-danger prepend-left-10"
diff --git a/app/views/doorkeeper/authorizations/show.html.haml b/app/views/doorkeeper/authorizations/show.html.haml
index 01f9e46f142..44e868e6782 100644
--- a/app/views/doorkeeper/authorizations/show.html.haml
+++ b/app/views/doorkeeper/authorizations/show.html.haml
@@ -1,3 +1,3 @@
 %h3.page-title Authorization code:
-%main{:role => "main"}
+%main{ :role => "main" }
   %code#authorization_code= params[:code]
diff --git a/app/views/doorkeeper/authorized_applications/_delete_form.html.haml b/app/views/doorkeeper/authorized_applications/_delete_form.html.haml
index 9f02a8d2ed9..11c1e67878e 100644
--- a/app/views/doorkeeper/authorized_applications/_delete_form.html.haml
+++ b/app/views/doorkeeper/authorized_applications/_delete_form.html.haml
@@ -3,7 +3,7 @@
   - path = oauth_authorized_application_path(0, token_id: token)
 - else
   - path = oauth_authorized_application_path(application)
-  
+
 = form_tag path do
-  %input{:name => "_method", :type => "hidden", :value => "delete"}/
+  %input{ :name => "_method", :type => "hidden", :value => "delete" }/
   = submit_tag 'Revoke', onclick: "return confirm('Are you sure?')", class: 'btn btn-remove btn-sm'
diff --git a/app/views/doorkeeper/authorized_applications/index.html.haml b/app/views/doorkeeper/authorized_applications/index.html.haml
index b184b9c01d4..c8a585560a2 100644
--- a/app/views/doorkeeper/authorized_applications/index.html.haml
+++ b/app/views/doorkeeper/authorized_applications/index.html.haml
@@ -1,6 +1,6 @@
 %header.page-header
   %h1 Your authorized applications
-%main{:role => "main"}
+%main{ :role => "main" }
   .table-holder
     %table.table.table-striped
       %thead
diff --git a/app/views/emojis/index.html.haml b/app/views/emojis/index.html.haml
deleted file mode 100644
index 790d90ad3ee..00000000000
--- a/app/views/emojis/index.html.haml
+++ /dev/null
@@ -1,11 +0,0 @@
-.emoji-menu
-  = text_field_tag :emoji_search, "", class: "emoji-search search-input form-control", placeholder: "Search emoji"
-  .emoji-menu-content
-    - Gitlab::AwardEmoji.emoji_by_category.each do |category, emojis|
-      %h5.emoji-menu-title
-        = Gitlab::AwardEmoji::CATEGORIES[category]
-      %ul.clearfix.emoji-menu-list
-        - emojis.each do |emoji|
-          %li.pull-left.text-center.emoji-menu-list-item
-            %button.emoji-menu-btn.text-center.js-emoji-btn{type: "button"}
-              = emoji_icon(emoji["name"], emoji["unicode"], emoji["aliases"])
diff --git a/app/views/errors/access_denied.html.haml b/app/views/errors/access_denied.html.haml
index c034bbe430e..a97cbd4d4b3 100644
--- a/app/views/errors/access_denied.html.haml
+++ b/app/views/errors/access_denied.html.haml
@@ -1,6 +1,9 @@
-- page_title "Access Denied"
-%h1 403
-%h3 Access Denied
-%hr
-%p You are not allowed to access this page.
-%p Read more about project permissions #{link_to "here", help_page_path("user/permissions"), class: "vlink"}
+- content_for(:title, 'Access Denied')
+%img{ :alt => "GitLab Logo", :src => image_path('logo.svg') }
+  %h1
+    403
+.container
+  %h3 Access Denied
+  %hr
+  %p You are not allowed to access this page.
+  %p Read more about project permissions #{link_to "here", help_page_path("user/permissions"), class: "vlink"}
diff --git a/app/views/errors/encoding.html.haml b/app/views/errors/encoding.html.haml
index 90cfbebfcc6..64f7f8e0836 100644
--- a/app/views/errors/encoding.html.haml
+++ b/app/views/errors/encoding.html.haml
@@ -1,5 +1,8 @@
-- page_title "Encoding Error"
-%h1 500
-%h3 Encoding Error
-%hr
-%p Page can't be loaded because of an encoding error.
+- content_for(:title, 'Encoding Error')
+%img{ :alt => "GitLab Logo", :src => image_path('logo.svg') }
+  %h1
+    500
+.container
+  %h3 Encoding Error
+  %hr
+  %p Page can't be loaded because of an encoding error.
diff --git a/app/views/errors/git_not_found.html.haml b/app/views/errors/git_not_found.html.haml
index ff5d4cc1506..d860957665b 100644
--- a/app/views/errors/git_not_found.html.haml
+++ b/app/views/errors/git_not_found.html.haml
@@ -1,7 +1,9 @@
-- page_title "Git Resource Not Found"
-%h1 404
-%h3 Git Resource Not found
-%hr
-%p
-  Application can't get access to some branch or commit in your repository. It
-  may have been moved.
+- content_for(:title, 'Git Resource Not Found')
+%img{ :alt => "GitLab Logo", :src => image_path('logo.svg') }
+  %h1
+    404
+.container
+  %h3 Git Resource Not found
+  %hr
+  %p Application can't get access to some branch or commit in your repository. It
+  may have been moved
diff --git a/app/views/errors/not_found.html.haml b/app/views/errors/not_found.html.haml
index 3756b98ebb2..a0b9a632e22 100644
--- a/app/views/errors/not_found.html.haml
+++ b/app/views/errors/not_found.html.haml
@@ -1,5 +1,8 @@
-- page_title "Not Found"
-%h1 404
-%h3 The resource you were looking for doesn't exist.
-%hr
-%p You may have mistyped the address or the page may have moved.
+- content_for(:title, 'Not Found')
+%img{ :alt => "GitLab Logo", :src => image_path('logo.svg') }
+  %h1
+    404
+.container
+  %h3 The resource you were looking for doesn't exist.
+  %hr
+  %p You may have mistyped the address or the page may have moved.
diff --git a/app/views/errors/omniauth_error.html.haml b/app/views/errors/omniauth_error.html.haml
index 3e70e98a24c..72508b91134 100644
--- a/app/views/errors/omniauth_error.html.haml
+++ b/app/views/errors/omniauth_error.html.haml
@@ -1,9 +1,12 @@
-- page_title "Auth Error"
-%h1 422
-%h3 Sign-in using #{@provider} auth failed
-%hr
-%p Sign-in failed because #{@error}.
-%p There are couple of steps you can take:
+- content_for(:title, 'Auth Error')
+%img{ :alt => "GitLab Logo", :src => image_path('logo.svg') }
+  %h1
+    422
+.container
+  %h3 Sign-in using #{@provider} auth failed
+  %hr
+  %p Sign-in failed because #{@error}.
+  %p There are couple of steps you can take:
 
 %ul
   %li Try logging in using your email
diff --git a/app/views/events/_event.atom.builder b/app/views/events/_event.atom.builder
index 7890e717aa7..158061579f6 100644
--- a/app/views/events/_event.atom.builder
+++ b/app/views/events/_event.atom.builder
@@ -4,12 +4,12 @@ xml.entry do
   xml.id      "tag:#{request.host},#{event.created_at.strftime("%Y-%m-%d")}:#{event.id}"
   xml.link    href: event_feed_url(event)
   xml.title   truncate(event_feed_title(event), length: 80)
-  xml.updated event.created_at.xmlschema
+  xml.updated event.updated_at.xmlschema
   xml.media   :thumbnail, width: "40", height: "40", url: image_url(avatar_icon(event.author_email))
 
   xml.author do
     xml.name event.author_name
-    xml.email event.author_email
+    xml.email event.author_public_email
   end
 
   xml.summary(type: "xhtml") do |summary|
diff --git a/app/views/events/_event.html.haml b/app/views/events/_event.html.haml
index 31fdcc5e21b..a0bd14df209 100644
--- a/app/views/events/_event.html.haml
+++ b/app/views/events/_event.html.haml
@@ -1,16 +1,15 @@
 - if event.visible_to_user?(current_user)
   .event-item{ class: event_row_class(event) }
     .event-item-timestamp
-      #{time_ago_with_tooltip(event.created_at, skip_js: true)}
+      #{time_ago_with_tooltip(event.created_at)}
 
-    = cache [event, current_application_settings, "v2.2"] do
-      = author_avatar(event, size: 40)
+    = author_avatar(event, size: 40)
 
-      - if event.created_project?
-        = render "events/event/created_project", event: event
-      - elsif event.push?
-        = render "events/event/push", event: event
-      - elsif event.commented?
-        = render "events/event/note", event: event
-      - else
-        = render "events/event/common", event: event
+    - if event.created_project?
+      = render "events/event/created_project", event: event
+    - elsif event.push?
+      = render "events/event/push", event: event
+    - elsif event.commented?
+      = render "events/event/note", event: event
+    - else
+      = render "events/event/common", event: event
diff --git a/app/views/events/_event_issue.atom.haml b/app/views/events/_event_issue.atom.haml
index 083c3936212..51585314a62 100644
--- a/app/views/events/_event_issue.atom.haml
+++ b/app/views/events/_event_issue.atom.haml
@@ -1,2 +1,2 @@
-%div{xmlns: "http://www.w3.org/1999/xhtml"}
+%div{ xmlns: "http://www.w3.org/1999/xhtml" }
   = markdown(issue.description, pipeline: :atom, project: issue.project, author: issue.author)
diff --git a/app/views/events/_event_merge_request.atom.haml b/app/views/events/_event_merge_request.atom.haml
index d7e05600627..56fc8b86217 100644
--- a/app/views/events/_event_merge_request.atom.haml
+++ b/app/views/events/_event_merge_request.atom.haml
@@ -1,2 +1,2 @@
-%div{xmlns: "http://www.w3.org/1999/xhtml"}
+%div{ xmlns: "http://www.w3.org/1999/xhtml" }
   = markdown(merge_request.description, pipeline: :atom, project: merge_request.project, author: merge_request.author)
diff --git a/app/views/events/_event_note.atom.haml b/app/views/events/_event_note.atom.haml
index 1154f982821..6fa2f9bd4db 100644
--- a/app/views/events/_event_note.atom.haml
+++ b/app/views/events/_event_note.atom.haml
@@ -1,2 +1,2 @@
-%div{xmlns: "http://www.w3.org/1999/xhtml"}
+%div{ xmlns: "http://www.w3.org/1999/xhtml" }
   = markdown(note.note, pipeline: :atom, project: note.project, author: note.author)
diff --git a/app/views/events/_event_push.atom.haml b/app/views/events/_event_push.atom.haml
index 28bee1d0a33..f8f0bcb7608 100644
--- a/app/views/events/_event_push.atom.haml
+++ b/app/views/events/_event_push.atom.haml
@@ -1,4 +1,4 @@
-%div{xmlns: "http://www.w3.org/1999/xhtml"}
+%div{ xmlns: "http://www.w3.org/1999/xhtml" }
   - event.commits.first(15).each do |commit|
     %p
       %strong= commit[:author][:name]
diff --git a/app/views/events/event/_common.html.haml b/app/views/events/event/_common.html.haml
index bba6e0d2c20..2fb6b5647da 100644
--- a/app/views/events/event/_common.html.haml
+++ b/app/views/events/event/_common.html.haml
@@ -1,6 +1,6 @@
 .event-title
   %span.author_name= link_to_author event
-  %span{class: event.action_name}
+  %span{ class: event.action_name }
   - if event.target
     = event.action_name
     %strong
diff --git a/app/views/events/event/_created_project.html.haml b/app/views/events/event/_created_project.html.haml
index aba64dd17d0..80cf2344fe1 100644
--- a/app/views/events/event/_created_project.html.haml
+++ b/app/views/events/event/_created_project.html.haml
@@ -1,6 +1,6 @@
 .event-title
   %span.author_name= link_to_author event
-  %span{class: event.action_name}
+  %span{ class: event.action_name }
     = event_action_name(event)
 
   - if event.project
diff --git a/app/views/events/event/_note.html.haml b/app/views/events/event/_note.html.haml
index f08c96df309..64b5a733b77 100644
--- a/app/views/events/event/_note.html.haml
+++ b/app/views/events/event/_note.html.haml
@@ -15,6 +15,6 @@
         = link_to note.attachment.url, target: '_blank' do
           = image_tag note.attachment.url, class: 'note-image-attach'
       - else
-        = link_to note.attachment.url, target: "_blank", class: 'note-file-attach' do
+        = link_to note.attachment.url, target: '_blank',  class: 'note-file-attach' do
           %i.fa.fa-paperclip
           = note.attachment_identifier
diff --git a/app/views/events/event/_push.html.haml b/app/views/events/event/_push.html.haml
index 44fff49d99c..efd13aabf20 100644
--- a/app/views/events/event/_push.html.haml
+++ b/app/views/events/event/_push.html.haml
@@ -3,11 +3,9 @@
 .event-title
   %span.author_name= link_to_author event
   %span.pushed #{event.action_name} #{event.ref_type}
-  - if event.rm_ref?
-    %strong= event.ref_name
-  - else
-    %strong
-      = link_to event.ref_name, namespace_project_commits_path(project.namespace, project, event.ref_name), title: h(event.target_title)
+  %strong
+    - commits_link = namespace_project_commits_path(project.namespace, project, event.ref_name)
+    = link_to_if project.repository.branch_exists?(event.ref_name), event.ref_name, commits_link
 
   = render "events/event_scope", event: event
 
@@ -18,7 +16,7 @@
       - few_commits.each do |commit|
         = render "events/commit", commit: commit, project: project, event: event
 
-      - create_mr = event.new_ref? && create_mr_button?(project.default_branch, event.ref_name, project)
+      - create_mr = event.new_ref? && create_mr_button?(project.default_branch, event.ref_name, project) && event.authored_by?(current_user)
       - if event.commits_count > 1
         %li.commits-stat
           - if event.commits_count > 2
@@ -35,12 +33,12 @@
             Compare #{from_label}...#{truncate_sha(event.commit_to)}
 
           - if create_mr
-            %span{"data-user-is" => event.author_id, "data-display" => "inline"}
+            %span
               or
               = link_to create_mr_path(project.default_branch, event.ref_name, project) do
                 create a merge request
       - elsif create_mr
-        %li.commits-stat{"data-user-is" => event.author_id}
+        %li.commits-stat
           = link_to create_mr_path(project.default_branch, event.ref_name, project) do
             Create Merge Request
 - elsif event.rm_ref?
diff --git a/app/views/explore/_head.html.haml b/app/views/explore/_head.html.haml
index d8a57560788..a3b0709e261 100644
--- a/app/views/explore/_head.html.haml
+++ b/app/views/explore/_head.html.haml
@@ -1,5 +1,5 @@
-.explore-title
-  %h3
+.explore-title.text-center
+  %h2
     Explore GitLab
   %p.lead
     Discover projects, groups and snippets. Share your projects with others
diff --git a/app/views/explore/groups/_groups.html.haml b/app/views/explore/groups/_groups.html.haml
new file mode 100644
index 00000000000..794c6d1d170
--- /dev/null
+++ b/app/views/explore/groups/_groups.html.haml
@@ -0,0 +1,6 @@
+.js-groups-list-holder
+  %ul.content-list
+    - @groups.each do |group|
+      = render 'shared/groups/group', group: group
+
+  = paginate @groups, theme: 'gitlab'
diff --git a/app/views/explore/groups/_nav.html.haml b/app/views/explore/groups/_nav.html.haml
new file mode 100644
index 00000000000..c8d95b52156
--- /dev/null
+++ b/app/views/explore/groups/_nav.html.haml
@@ -0,0 +1,8 @@
+.top-area
+  %ul.nav-links
+    = nav_link(page: explore_groups_path) do
+      = link_to explore_groups_path do
+        Explore Groups
+  .nav-controls
+    = render 'shared/groups/search_form'
+    = render 'shared/groups/dropdown'
diff --git a/app/views/explore/groups/index.html.haml b/app/views/explore/groups/index.html.haml
index a1b39d9e1a0..bb2cd0d44c8 100644
--- a/app/views/explore/groups/index.html.haml
+++ b/app/views/explore/groups/index.html.haml
@@ -5,41 +5,9 @@
   = render 'dashboard/groups_head'
 - else
   = render 'explore/head'
+  = render 'nav'
 
-.row-content-block.clearfix
-  .pull-left
-    = form_tag explore_groups_path, method: :get, class: 'form-inline form-tiny' do |f|
-      = hidden_field_tag :sort, @sort
-      .form-group
-        = search_field_tag :search, params[:search], placeholder: "Filter by name", class: "form-control search-text-input", id: "groups_search", spellcheck: false
-      .form-group
-        = button_tag 'Search', class: "btn btn-default"
-
-  .pull-right
-    .dropdown.inline
-      %button.dropdown-toggle.btn{type: 'button', 'data-toggle' => 'dropdown'}
-        %span.light
-        - if @sort.present?
-          = sort_options_hash[@sort]
-        - else
-          = sort_title_recently_created
-        = icon('caret-down')
-      %ul.dropdown-menu.dropdown-menu-align-right
-        %li
-          = link_to explore_groups_path(sort: sort_value_recently_created) do
-            = sort_title_recently_created
-          = link_to explore_groups_path(sort: sort_value_oldest_created) do
-            = sort_title_oldest_created
-          = link_to explore_groups_path(sort: sort_value_recently_updated) do
-            = sort_title_recently_updated
-          = link_to explore_groups_path(sort: sort_value_oldest_updated) do
-            = sort_title_oldest_updated
-
-%ul.content-list
-  - @groups.each do |group|
-    = render 'shared/groups/group', group: group
-  - unless @groups.present?
-    .nothing-here-block No public groups
-
-
-= paginate @groups, theme: "gitlab"
+- if @groups.present?
+  = render 'groups'
+- else
+  .nothing-here-block No public groups
diff --git a/app/views/explore/projects/_filter.html.haml b/app/views/explore/projects/_filter.html.haml
index 4cff14b096b..f630f1effdc 100644
--- a/app/views/explore/projects/_filter.html.haml
+++ b/app/views/explore/projects/_filter.html.haml
@@ -1,40 +1,19 @@
 - if current_user
   .dropdown
-    %a.dropdown-toggle.btn{href: '#', "data-toggle" => "dropdown"}
+    %button.dropdown-toggle{ href: '#', "data-toggle" => "dropdown" }
       = icon('globe')
       %span.light Visibility:
       - if params[:visibility_level].present?
         = visibility_level_label(params[:visibility_level].to_i)
       - else
         Any
-      = icon('caret-down')
+      = icon('chevron-down')
     %ul.dropdown-menu.dropdown-menu-align-right
       %li
         = link_to filter_projects_path(visibility_level: nil) do
           Any
       - Gitlab::VisibilityLevel.values.each do |level|
-        %li{ class: (level.to_s == params[:visibility_level]) ? 'active' : 'light' }
+        %li{ class: active_when(level.to_s == params[:visibility_level]) || 'light' }
           = link_to filter_projects_path(visibility_level: level) do
             = visibility_level_icon(level)
             = visibility_level_label(level)
-
-- if @tags.present?
-  .dropdown
-    %a.dropdown-toggle.btn{href: '#', "data-toggle" => "dropdown"}
-      = icon('tags')
-      %span.light Tags:
-      - if params[:tag].present?
-        = params[:tag]
-      - else
-        Any
-      = icon('caret-down')
-    %ul.dropdown-menu.dropdown-menu-align-right
-      %li
-        = link_to filter_projects_path(tag: nil) do
-          Any
-
-      - @tags.each do |tag|
-        %li{ class: (tag.name == params[:tag]) ? 'active' : 'light' }
-          = link_to filter_projects_path(tag: tag.name) do
-            = icon('tag')
-            = tag.name
diff --git a/app/views/explore/projects/_nav.html.haml b/app/views/explore/projects/_nav.html.haml
index 614b5431779..e0a2a1e9c96 100644
--- a/app/views/explore/projects/_nav.html.haml
+++ b/app/views/explore/projects/_nav.html.haml
@@ -1,10 +1,17 @@
-%ul.nav-links
-  = nav_link(page: [trending_explore_projects_path, explore_root_path]) do
-    = link_to trending_explore_projects_path do
-      Trending
-  = nav_link(page: starred_explore_projects_path) do
-    = link_to starred_explore_projects_path do
-      Most stars
-  = nav_link(page: explore_projects_path) do
-    = link_to explore_projects_path do
-      All
+.top-area
+  %ul.nav-links
+    = nav_link(page: [trending_explore_projects_path, explore_root_path]) do
+      = link_to trending_explore_projects_path do
+        Trending
+    = nav_link(page: starred_explore_projects_path) do
+      = link_to starred_explore_projects_path do
+        Most stars
+    = nav_link(page: explore_projects_path) do
+      = link_to explore_projects_path do
+        All
+
+  .nav-controls
+    - unless current_user
+      = render 'shared/projects/search_form'
+      = render 'shared/projects/dropdown'
+    = render 'filter'
diff --git a/app/views/explore/projects/index.html.haml b/app/views/explore/projects/index.html.haml
index 42b50481b9d..ec461755103 100644
--- a/app/views/explore/projects/index.html.haml
+++ b/app/views/explore/projects/index.html.haml
@@ -6,10 +6,5 @@
 - else
   = render 'explore/head'
 
-.top-area
-  = render 'explore/projects/nav'
-
-  .nav-controls
-    = render 'filter'
-
+= render 'explore/projects/nav'
 = render 'projects', projects: @projects
diff --git a/app/views/explore/snippets/index.html.haml b/app/views/explore/snippets/index.html.haml
index 7def9eacdc9..e5706d04736 100644
--- a/app/views/explore/snippets/index.html.haml
+++ b/app/views/explore/snippets/index.html.haml
@@ -6,12 +6,4 @@
 - else
   = render 'explore/head'
 
-.row-content-block
-  - if current_user
-    = link_to new_snippet_path, class: "btn btn-new btn-wide-on-sm pull-right", title: "New snippet" do
-      New snippet
-
-  .oneline
-    Public snippets created by you and other users are listed here
-
-= render 'snippets/snippets'
+= render partial: 'snippets/snippets', locals: { link_project: true }
diff --git a/app/views/groups/_activities.html.haml b/app/views/groups/_activities.html.haml
index 71cc4d87b1f..d7851c79990 100644
--- a/app/views/groups/_activities.html.haml
+++ b/app/views/groups/_activities.html.haml
@@ -2,10 +2,9 @@
   = render "events/event_last_push", event: @last_push
 
 .nav-block
-  - if current_user
-    .controls
-      = link_to group_path(@group, format: :atom, private_token: current_user.private_token), class: 'btn rss-btn' do
-        %i.fa.fa-rss
+  .controls
+    = link_to group_path(@group, rss_url_options), class: 'btn rss-btn has-tooltip' , title: 'Subscribe' do
+      %i.fa.fa-rss
   = render 'shared/event_filter'
 
 .content_list
diff --git a/app/views/groups/_create_chat_team.html.haml b/app/views/groups/_create_chat_team.html.haml
new file mode 100644
index 00000000000..20de1b4c973
--- /dev/null
+++ b/app/views/groups/_create_chat_team.html.haml
@@ -0,0 +1,16 @@
+.form-group
+  = f.label :create_chat_team, class: 'control-label' do
+    %span.mattermost-icon
+      = custom_icon('icon_mattermost')
+    Mattermost
+  .col-sm-10
+    .checkbox.js-toggle-container
+      = f.label :create_chat_team do
+        .js-toggle-button= f.check_box(:create_chat_team, { checked: true }, true, false)
+        Create a Mattermost team for this group
+      %br
+      %small.light.js-toggle-content
+        Mattermost URL:
+        = Settings.mattermost.host
+        %span> /
+        %span{ "data-bind-out" => "create_chat_team" }
diff --git a/app/views/groups/_group_lfs_settings.html.haml b/app/views/groups/_group_lfs_settings.html.haml
index af57065f0fc..3c622ca5c3c 100644
--- a/app/views/groups/_group_lfs_settings.html.haml
+++ b/app/views/groups/_group_lfs_settings.html.haml
@@ -8,4 +8,4 @@
             Allow projects within this group to use Git LFS
             = link_to icon('question-circle'), help_page_path('workflow/lfs/manage_large_binaries_with_git_lfs')
           %br/
-          %span.descr This setting can be overridden in each project.
\ No newline at end of file
+          %span.descr This setting can be overridden in each project.
diff --git a/app/views/groups/_head.html.haml b/app/views/groups/_head.html.haml
new file mode 100644
index 00000000000..873504099d4
--- /dev/null
+++ b/app/views/groups/_head.html.haml
@@ -0,0 +1,14 @@
+= content_for :sub_nav do
+  .scrolling-tabs-container.sub-nav-scroll
+    = render 'shared/nav_scroll'
+    .nav-links.sub-nav.scrolling-tabs
+      %ul{ class: container_class }
+        = nav_link(path: ['groups#show', 'groups#subgroups'], html_options: { class: 'home' }) do
+          = link_to group_path(@group), title: 'Group Home' do
+            %span
+              Home
+
+        = nav_link(path: 'groups#activity') do
+          = link_to activity_group_path(@group), title: 'Activity' do
+            %span
+              Activity
diff --git a/app/views/groups/_head_issues.html.haml b/app/views/groups/_head_issues.html.haml
new file mode 100644
index 00000000000..d554bc23743
--- /dev/null
+++ b/app/views/groups/_head_issues.html.haml
@@ -0,0 +1,19 @@
+= content_for :sub_nav do
+  .scrolling-tabs-container.sub-nav-scroll
+    = render 'shared/nav_scroll'
+    .nav-links.sub-nav.scrolling-tabs
+      %ul{ class: container_class }
+        = nav_link(path: 'groups#issues', html_options: { class: 'home' }) do
+          = link_to issues_group_path(@group), title: 'List' do
+            %span
+              List
+
+        = nav_link(path: 'labels#index') do
+          = link_to group_labels_path(@group), title: 'Labels' do
+            %span
+              Labels
+
+        = nav_link(path: 'milestones#index') do
+          = link_to group_milestones_path(@group), title: 'Milestones' do
+            %span
+              Milestones
diff --git a/app/views/groups/_home_panel.html.haml b/app/views/groups/_home_panel.html.haml
new file mode 100644
index 00000000000..41f54f6bf42
--- /dev/null
+++ b/app/views/groups/_home_panel.html.haml
@@ -0,0 +1,17 @@
+.group-home-panel.text-center
+  %div{ class: container_class }
+    .avatar-container.s70.group-avatar
+      = image_tag group_icon(@group), class: "avatar s70 avatar-tile"
+    %h1.group-title
+      @#{@group.path}
+      %span.visibility-icon.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@group) }
+        = visibility_level_icon(@group.visibility_level, fw: false)
+
+    - if @group.description.present?
+      .group-home-desc
+        = markdown_field(@group, :description)
+
+    - if current_user
+      .group-buttons
+        = render 'shared/members/access_request_buttons', source: @group
+        = render 'shared/notifications/button', notification_setting: @notification_setting
diff --git a/app/views/groups/_settings_head.html.haml b/app/views/groups/_settings_head.html.haml
new file mode 100644
index 00000000000..2454e7355a7
--- /dev/null
+++ b/app/views/groups/_settings_head.html.haml
@@ -0,0 +1,14 @@
+= content_for :sub_nav do
+  .scrolling-tabs-container.sub-nav-scroll
+    = render 'shared/nav_scroll'
+    .nav-links.sub-nav.scrolling-tabs
+      %ul{ class: container_class }
+        = nav_link(path: 'groups#edit') do
+          = link_to edit_group_path(@group), title: 'General' do
+            %span
+              General
+
+        = nav_link(path: 'groups#projects') do
+          = link_to projects_group_path(@group), title: 'Projects' do
+            %span
+              Projects
diff --git a/app/views/groups/_show_nav.html.haml b/app/views/groups/_show_nav.html.haml
new file mode 100644
index 00000000000..b2097e88741
--- /dev/null
+++ b/app/views/groups/_show_nav.html.haml
@@ -0,0 +1,7 @@
+%ul.nav-links
+  = nav_link(page: group_path(@group)) do
+    = link_to group_path(@group) do
+      Projects
+  = nav_link(page: subgroups_group_path(@group)) do
+    = link_to subgroups_group_path(@group) do
+      Subgroups
diff --git a/app/views/groups/activity.html.haml b/app/views/groups/activity.html.haml
index aaad265b3ee..3969e56f937 100644
--- a/app/views/groups/activity.html.haml
+++ b/app/views/groups/activity.html.haml
@@ -1,8 +1,8 @@
 = content_for :meta_tags do
-  - if current_user
-    = auto_discovery_link_tag(:atom, group_url(@group, format: :atom, private_token: current_user.private_token), title: "#{@group.name} activity")
+  = auto_discovery_link_tag(:atom, group_url(@group, rss_url_options), title: "#{@group.name} activity")
 
-- page_title    "Activity"
+- page_title "Activity"
+= render 'groups/head'
 
 %section.activities
   = render 'activities'
diff --git a/app/views/groups/edit.html.haml b/app/views/groups/edit.html.haml
index 2706e8692d1..80a77dab97f 100644
--- a/app/views/groups/edit.html.haml
+++ b/app/views/groups/edit.html.haml
@@ -1,3 +1,4 @@
+= render "groups/settings_head"
 .panel.panel-default.prepend-top-default
   .panel-heading
     Group settings
diff --git a/app/views/groups/group_members/_new_group_member.html.haml b/app/views/groups/group_members/_new_group_member.html.haml
index b185b81db7f..5b1a4630c56 100644
--- a/app/views/groups/group_members/_new_group_member.html.haml
+++ b/app/views/groups/group_members/_new_group_member.html.haml
@@ -3,7 +3,7 @@
     .col-md-4.col-lg-6
       = users_select_tag(:user_ids, multiple: true, class: 'input-clamp', scope: :all, email_user: true)
       .help-block.append-bottom-10
-        Search for users by name, username, or email, or invite new ones using their email address.
+        Search for members by name, username, or email, or invite new ones using their email address.
 
     .col-md-3.col-lg-2
       = select_tag :access_level, options_for_select(GroupMember.access_level_roles, @group_member.access_level), class: "form-control project-access-select"
@@ -16,7 +16,7 @@
         = text_field_tag :expires_at, nil, class: 'form-control js-access-expiration-date', placeholder: 'Expiration date'
         %i.clear-icon.js-clear-input
       .help-block.append-bottom-10
-        On this date, the user(s) will automatically lose access to this group and all of its projects.
+        On this date, the member(s) will automatically lose access to this group and all of its projects.
 
     .col-md-2
       = f.submit 'Add to group', class: "btn btn-create btn-block"
diff --git a/app/views/groups/group_members/index.html.haml b/app/views/groups/group_members/index.html.haml
index ebf9aca7700..2e4e4511bb6 100644
--- a/app/views/groups/group_members/index.html.haml
+++ b/app/views/groups/group_members/index.html.haml
@@ -7,7 +7,7 @@
   - if can?(current_user, :admin_group_member, @group)
     .project-members-new.append-bottom-default
       %p.clearfix
-        Add new user to
+        Add new member to
         %strong= @group.name
       = render "new_group_member"
 
@@ -15,16 +15,17 @@
 
   .append-bottom-default.clearfix
     %h5.member.existing-title
-      Existing users
+      Existing members
     = form_tag group_group_members_path(@group), method: :get, class: 'form-inline member-search-form'  do
       .form-group
         = search_field_tag :search, params[:search], { placeholder: 'Find existing members by name', class: 'form-control', spellcheck: false }
         %button.member-search-btn{ type: "submit", "aria-label" => "Submit search" }
           = icon("search")
+        = render 'shared/members/sort_dropdown'
   .panel.panel-default
     .panel-heading
-      Users with access to
-      %strong #{@group.name}
+      Members with access to
+      %strong= @group.name
       %span.badge= @members.total_count
     %ul.content-list
       = render partial: 'shared/members/member', collection: @members, as: :member
diff --git a/app/views/groups/group_members/update.js.haml b/app/views/groups/group_members/update.js.haml
index de8f53b6b52..9d05bff6c4e 100644
--- a/app/views/groups/group_members/update.js.haml
+++ b/app/views/groups/group_members/update.js.haml
@@ -1,3 +1,4 @@
 :plain
   var $listItem = $('#{escape_javascript(render('shared/members/member', member: @group_member))}');
   $("##{dom_id(@group_member)} .list-item-name").replaceWith($listItem.find('.list-item-name'));
+  gl.utils.localTimeAgo($('.js-timeago'), $("##{dom_id(@group_member)}"));
diff --git a/app/views/groups/issues.atom.builder b/app/views/groups/issues.atom.builder
index 0cc6466d34e..469768d83f2 100644
--- a/app/views/groups/issues.atom.builder
+++ b/app/views/groups/issues.atom.builder
@@ -4,7 +4,7 @@ xml.feed "xmlns" => "http://www.w3.org/2005/Atom", "xmlns:media" => "http://sear
   xml.link    href: url_for(params), rel: "self", type: "application/atom+xml"
   xml.link    href: issues_group_url, rel: "alternate", type: "text/html"
   xml.id      issues_group_url
-  xml.updated @issues.first.created_at.xmlschema if @issues.reorder(nil).any?
+  xml.updated @issues.first.updated_at.xmlschema if @issues.reorder(nil).any?
 
   xml << render(partial: 'issues/issue', collection: @issues) if @issues.reorder(nil).any?
 end
diff --git a/app/views/groups/issues.html.haml b/app/views/groups/issues.html.haml
index dc6c1bb69de..f4c17dc2d16 100644
--- a/app/views/groups/issues.html.haml
+++ b/app/views/groups/issues.html.haml
@@ -1,26 +1,27 @@
 - page_title "Issues"
+= render "head_issues"
 = content_for :meta_tags do
-  - if current_user
-    = auto_discovery_link_tag(:atom, url_for(params.merge(format: :atom, private_token: current_user.private_token)), title: "#{@group.name} issues")
+  = auto_discovery_link_tag(:atom, params.merge(rss_url_options), title: "#{@group.name} issues")
 
-.top-area
-  = render 'shared/issuable/nav', type: :issues
-  .nav-controls
-    - if current_user
-      = link_to url_for(params.merge(format: :atom, private_token: current_user.private_token)), class: 'btn' do
+- if group_issues(@group).exists?
+  .top-area
+    = render 'shared/issuable/nav', type: :issues
+    .nav-controls
+      = link_to params.merge(rss_url_options), class: 'btn' do
         = icon('rss')
         %span.icon-label
           Subscribe
-    = render 'shared/new_project_item_select', path: 'issues/new', label: "New Issue"
+      = render 'shared/new_project_item_select', path: 'issues/new', label: "New Issue"
 
-= render 'shared/issuable/filter', type: :issues
+  = render 'shared/issuable/filter', type: :issues
 
-.row-content-block.second-block
-  Only issues from
-  %strong #{@group.name}
-  group are listed here.
-  - if current_user
-    To see all issues you should visit #{link_to 'dashboard', issues_dashboard_path} page.
+  .row-content-block.second-block
+    Only issues from the
+    %strong= @group.name
+    group are listed here.
+    - if current_user
+      To see all issues you should visit #{link_to 'dashboard', issues_dashboard_path} page.
 
-.prepend-top-default
   = render 'shared/issues'
+- else
+  = render 'shared/empty_states/issues', project_select_button: true
diff --git a/app/views/groups/labels/index.html.haml b/app/views/groups/labels/index.html.haml
index 45325d6bc4b..2bc00fb16c8 100644
--- a/app/views/groups/labels/index.html.haml
+++ b/app/views/groups/labels/index.html.haml
@@ -1,4 +1,5 @@
 - page_title 'Labels'
+= render "groups/head_issues"
 
 .top-area.adjust
   .nav-text
diff --git a/app/views/groups/merge_requests.html.haml b/app/views/groups/merge_requests.html.haml
index e6953d94531..6ad76d23df5 100644
--- a/app/views/groups/merge_requests.html.haml
+++ b/app/views/groups/merge_requests.html.haml
@@ -2,17 +2,17 @@
 
 .top-area
   = render 'shared/issuable/nav', type: :merge_requests
-  .nav-controls
-    = render 'shared/new_project_item_select', path: 'merge_requests/new', label: "New Merge Request"
+  - if current_user
+    .nav-controls
+      = render 'shared/new_project_item_select', path: 'merge_requests/new', label: "New Merge Request"
 
 = render 'shared/issuable/filter', type: :merge_requests
 
 .row-content-block.second-block
   Only merge requests from
-  %strong #{@group.name}
+  %strong= @group.name
   group are listed here.
   - if current_user
     To see all merge requests you should visit #{link_to 'dashboard', merge_requests_dashboard_path} page.
 
-.prepend-top-default
-  = render 'shared/merge_requests'
+= render 'shared/merge_requests'
diff --git a/app/views/groups/milestones/index.html.haml b/app/views/groups/milestones/index.html.haml
index a8fdbd8c426..6893168f039 100644
--- a/app/views/groups/milestones/index.html.haml
+++ b/app/views/groups/milestones/index.html.haml
@@ -1,7 +1,8 @@
 - page_title "Milestones"
+= render "groups/head_issues"
 
 .top-area
-  = render 'shared/milestones_filter'
+  = render 'shared/milestones_filter', counts: @milestone_states
 
   .nav-controls
     - if can?(current_user, :admin_milestones, @group)
@@ -10,7 +11,7 @@
 
 .row-content-block
   Only milestones from
-  %strong #{@group.name}
+  %strong= @group.name
   group are listed here.
 
 .milestones
diff --git a/app/views/groups/milestones/new.html.haml b/app/views/groups/milestones/new.html.haml
index 23d438b2aa1..63cadfca530 100644
--- a/app/views/groups/milestones/new.html.haml
+++ b/app/views/groups/milestones/new.html.haml
@@ -34,21 +34,10 @@
         = f.label :projects, "Projects", class: "control-label"
         .col-sm-10
           = f.collection_select :project_ids, @group.projects.non_archived, :id, :name,
-            { selected: @group.projects.non_archived.pluck(:id) }, multiple: true, class: 'select2'
+            { selected: @group.projects.non_archived.pluck(:id) }, required: true, multiple: true, class: 'select2'
 
-    .col-md-6
-      .form-group
-        = f.label :due_date, "Due Date", class: "control-label"
-        .col-sm-10
-          = f.text_field :due_date, class: "datepicker form-control", placeholder: "Select due date"
+    = render "shared/milestones/form_dates", f: f
 
   .form-actions
     = f.submit 'Create Milestone', class: "btn-create btn"
     = link_to "Cancel", group_milestones_path(@group), class: "btn btn-cancel"
-
-
-:javascript
-  $(".datepicker").datepicker({
-    dateFormat: "yy-mm-dd",
-    onSelect: function(dateText, inst) { $("#milestone_due_date").val(dateText) }
-  }).datepicker("setDate", $.datepicker.parseDate('yy-mm-dd', $('#milestone_due_date').val()));
diff --git a/app/views/groups/milestones/show.html.haml b/app/views/groups/milestones/show.html.haml
index fb6f0da28f8..8e83b2002b2 100644
--- a/app/views/groups/milestones/show.html.haml
+++ b/app/views/groups/milestones/show.html.haml
@@ -1,4 +1,8 @@
 = render "header_title"
+
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('simulate_drag') if Rails.env.test?
+
 = render 'shared/milestones/top', milestone: @milestone, group: @group
-= render 'shared/milestones/summary', milestone: @milestone
 = render 'shared/milestones/tabs', milestone: @milestone, show_project_name: true
+= render 'shared/milestones/sidebar', milestone: @milestone, affix_offset: 102
diff --git a/app/views/groups/new.html.haml b/app/views/groups/new.html.haml
index 0dd067066db..08739ff7ed1 100644
--- a/app/views/groups/new.html.haml
+++ b/app/views/groups/new.html.haml
@@ -26,5 +26,7 @@
           = link_to icon('question-circle'), help_page_path("public_access/public_access")
         = render('shared/visibility_radios', model_method: :visibility_level, form: f, can_change_visibility_level: true, selected_level: default_group_visibility, form_model: @group)
 
+      = render 'create_chat_team', f: f if Gitlab.config.mattermost.enabled
+
       = f.submit 'Create group', class: "btn btn-create", tabindex: 3
       = link_to 'Cancel', dashboard_groups_path, class: 'btn btn-cancel'
diff --git a/app/views/groups/projects.html.haml b/app/views/groups/projects.html.haml
index 33fee334d93..83bdd654f27 100644
--- a/app/views/groups/projects.html.haml
+++ b/app/views/groups/projects.html.haml
@@ -1,4 +1,4 @@
-- page_title "Projects"
+= render "groups/settings_head"
 
 .panel.panel-default.prepend-top-default
   .panel-heading
@@ -18,8 +18,8 @@
         .pull-right
           - if project.archived
             %span.label.label-warning archived
-          %span.label.label-gray
-            = repository_size(project)
+          %span.badge
+            = storage_counter(project.statistics.storage_size)
           = link_to 'Members', namespace_project_project_members_path(project.namespace, project), id: "edit_#{dom_id(project)}", class: "btn btn-sm"
           = link_to 'Edit', edit_namespace_project_path(project.namespace, project), id: "edit_#{dom_id(project)}", class: "btn btn-sm"
           = link_to 'Remove', project, data: { confirm: remove_project_message(project)}, method: :delete, class: "btn btn-sm btn-remove"
diff --git a/app/views/groups/show.atom.builder b/app/views/groups/show.atom.builder
index b68bf444d27..914091dfd15 100644
--- a/app/views/groups/show.atom.builder
+++ b/app/views/groups/show.atom.builder
@@ -1,7 +1,7 @@
 xml.instruct!
 xml.feed "xmlns" => "http://www.w3.org/2005/Atom", "xmlns:media" => "http://search.yahoo.com/mrss/" do
   xml.title   "#{@group.name} activity"
-  xml.link    href: group_url(@group, format: :atom, private_token: current_user.try(:private_token)), rel: "self", type: "application/atom+xml"
+  xml.link    href: group_url(@group, rss_url_options), rel: "self", type: "application/atom+xml"
   xml.link    href: group_url(@group), rel: "alternate", type: "text/html"
   xml.id      group_url(@group)
   xml.updated @events[0].updated_at.xmlschema if @events[0]
diff --git a/app/views/groups/show.html.haml b/app/views/groups/show.html.haml
index b439b40a75a..18997baa998 100644
--- a/app/views/groups/show.html.haml
+++ b/app/views/groups/show.html.haml
@@ -1,51 +1,20 @@
 - @no_container = true
 
 = content_for :meta_tags do
-  - if current_user
-    = auto_discovery_link_tag(:atom, group_url(@group, format: :atom, private_token: current_user.private_token), title: "#{@group.name} activity")
+  = auto_discovery_link_tag(:atom, group_url(@group, rss_url_options), title: "#{@group.name} activity")
 
-.cover-block.groups-cover-block
-  %div{ class: container_class }
-    .avatar-container.s70.group-avatar
-      = image_tag group_icon(@group), class: "avatar s70 avatar-tile"
-    .group-info
-      .cover-title
-        %h1
-          @#{@group.path}
-          %span.visibility-icon.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@group) }
-            = visibility_level_icon(@group.visibility_level, fw: false)
+= render 'groups/head'
+= render 'groups/home_panel'
 
-        .group-right-buttons.btn-group
-          - if current_user
-            .pull-left.append-right-10= render 'shared/members/access_request_buttons', source: @group
-          = render 'shared/notifications/button', notification_setting: @notification_setting
 
-      - if @group.description.present?
-        .cover-desc.description
-          = markdown_field(@group, :description)
-
-%div.groups-header{ class: container_class }
+.groups-header{ class: container_class }
   .top-area
-    %ul.nav-links
-      %li.active
-        = link_to "#projects", 'data-toggle' => 'tab' do
-          All Projects
-      - if @shared_projects.present?
-        %li
-          = link_to "#shared", 'data-toggle' => 'tab' do
-            Shared Projects
+    = render 'groups/show_nav'
     .nav-controls
-      = form_tag request.path, method: :get, class: 'project-filter-form', id: 'project-filter-form' do |f|
-        = search_field_tag :filter_projects, nil, placeholder: 'Filter by name', class: 'projects-list-filter form-control', spellcheck: false
+      = render 'shared/projects/search_form'
       = render 'shared/projects/dropdown'
       - if can? current_user, :create_projects, @group
         = link_to new_project_path(namespace_id: @group.id), class: 'btn btn-new pull-right' do
           New Project
 
-  .tab-content
-    .tab-pane.active#projects
-      = render "projects", projects: @projects
-
-    - if @shared_projects.present?
-      .tab-pane#shared
-        = render "shared_projects", projects: @shared_projects
+  = render "projects", projects: @projects
diff --git a/app/views/groups/subgroups.html.haml b/app/views/groups/subgroups.html.haml
new file mode 100644
index 00000000000..be809083139
--- /dev/null
+++ b/app/views/groups/subgroups.html.haml
@@ -0,0 +1,21 @@
+- @no_container = true
+
+= render 'head'
+= render 'groups/home_panel'
+
+.groups-header{ class: container_class }
+  .top-area
+    = render 'groups/show_nav'
+    .nav-controls
+      = form_tag request.path, method: :get do |f|
+        = search_field_tag :filter_groups, params[:filter_groups], placeholder: 'Filter by name', class: 'form-control', spellcheck: false
+      - if can? current_user, :admin_group, @group
+        = link_to new_group_path(parent_id: @group.id), class: 'btn btn-new pull-right' do
+          New Subgroup
+
+  - if @nested_groups.present?
+    %ul.content-list
+      = render partial: 'shared/groups/group', collection: @nested_groups, locals: { full_name: false }
+  - else
+    .nothing-here-block
+      There are no subgroups to show.
diff --git a/app/views/help/_shortcuts.html.haml b/app/views/help/_shortcuts.html.haml
index 65842a0479b..8e6da3fad90 100644
--- a/app/views/help/_shortcuts.html.haml
+++ b/app/views/help/_shortcuts.html.haml
@@ -1,8 +1,8 @@
-#modal-shortcuts.modal{tabindex: -1}
+#modal-shortcuts.modal{ tabindex: -1 }
   .modal-dialog
     .modal-content
       .modal-header
-        %a.close{href: "#", "data-dismiss" => "modal"} ×
+        %a.close{ href: "#", "data-dismiss" => "modal" } ×
         %h4
           Keyboard Shortcuts
           %small
@@ -79,10 +79,18 @@
                   %td.shortcut
                     .key esc
                   %td Go back
+              %tbody
+                %tr
+                  %th
+                  %th Project File
+                %tr
+                  %td.shortcut
+                    .key y
+                  %td Go to file permalink
 
           .col-lg-4
             %table.shortcut-mappings
-              %tbody{ class: 'hidden-shortcut project', style: 'display:none' }
+              %tbody.hidden-shortcut.project{ style: 'display:none' }
                 %tr
                   %th
                   %th Global Dashboard
@@ -110,6 +118,12 @@
                     .key m
                   %td
                     Go to merge requests
+                %tr
+                  %td.shortcut
+                    .key g
+                    .key t
+                  %td
+                    Go to todos
               %tbody
                 %tr
                   %th
@@ -143,7 +157,7 @@
                     .key g
                     .key b
                   %td
-                    Go to builds
+                    Go to jobs
                 %tr
                   %td.shortcut
                     .key g
@@ -155,7 +169,7 @@
                     .key g
                     .key g
                   %td
-                    Go to graphs
+                    Go to repository charts
                 %tr
                   %td.shortcut
                     .key g
@@ -190,7 +204,7 @@
                   %td New issue
           .col-lg-4
             %table.shortcut-mappings
-              %tbody{ class: 'hidden-shortcut network', style: 'display:none' }
+              %tbody.hidden-shortcut.network{ style: 'display:none' }
                 %tr
                   %th
                   %th Network Graph
@@ -240,7 +254,7 @@
                     .key
                       shift j
                   %td Scroll to bottom
-              %tbody{ class: 'hidden-shortcut issues', style: 'display:none' }
+              %tbody.hidden-shortcut.issues{ style: 'display:none' }
                 %tr
                   %th
                   %th Issues
@@ -264,7 +278,7 @@
                   %td.shortcut
                     .key l
                   %td Change Label
-              %tbody{ class: 'hidden-shortcut merge_requests', style: 'display:none' }
+              %tbody.hidden-shortcut.merge_requests{ style: 'display:none' }
                 %tr
                   %th
                   %th Merge Requests
diff --git a/app/views/help/index.html.haml b/app/views/help/index.html.haml
index 31631887317..f93b6b63426 100644
--- a/app/views/help/index.html.haml
+++ b/app/views/help/index.html.haml
@@ -17,7 +17,7 @@
     %br
     Used by more than 100,000 organizations, GitLab is the most popular solution to manage git repositories on-premises.
     %br
-    Read more about GitLab at #{link_to promo_host, promo_url, target: '_blank'}.
+    Read more about GitLab at #{link_to promo_host, promo_url, target: '_blank', rel: 'noopener noreferrer'}.
     - if current_application_settings.help_page_text.present?
       %hr
       = markdown_field(current_application_settings, :help_page_text)
diff --git a/app/views/help/show.html.haml b/app/views/help/show.html.haml
index be257b51b9e..f6ebd76af9d 100644
--- a/app/views/help/show.html.haml
+++ b/app/views/help/show.html.haml
@@ -1,3 +1,3 @@
 - page_title @path.split("/").reverse.map(&:humanize)
 .documentation.wiki
-  = markdown @markdown.gsub('$your_email', current_user.try(:email) || "email@example.com")
+  = markdown @markdown
diff --git a/app/views/help/ui.html.haml b/app/views/help/ui.html.haml
index 070ed90da6d..1fb2c6271ad 100644
--- a/app/views/help/ui.html.haml
+++ b/app/views/help/ui.html.haml
@@ -182,7 +182,7 @@
       .nav-controls
         = text_field_tag 'sample', nil, class: 'form-control'
         .dropdown
-          %button.dropdown-menu-toggle{type: 'button', 'data-toggle' => 'dropdown'}
+          %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
             %span Sort by name
             = icon('chevron-down')
           %ul.dropdown-menu
@@ -205,121 +205,121 @@
   %h2#buttons Buttons
 
   .example
-    %button.btn.btn-default{:type => "button"} Default
-    %button.btn.btn-gray{:type => "button"} Gray
-    %button.btn.btn-primary{:type => "button"} Primary
-    %button.btn.btn-success{:type => "button"} Success
-    %button.btn.btn-info{:type => "button"} Info
-    %button.btn.btn-warning{:type => "button"} Warning
-    %button.btn.btn-danger{:type => "button"} Danger
-    %button.btn.btn-link{:type => "button"} Link
+    %button.btn.btn-default{ :type => "button" } Default
+    %button.btn.btn-gray{ :type => "button" } Gray
+    %button.btn.btn-primary{ :type => "button" } Primary
+    %button.btn.btn-success{ :type => "button" } Success
+    %button.btn.btn-info{ :type => "button" } Info
+    %button.btn.btn-warning{ :type => "button" } Warning
+    %button.btn.btn-danger{ :type => "button" } Danger
+    %button.btn.btn-link{ :type => "button" } Link
 
   %h2#dropdowns Dropdowns
 
   .example
     .clearfix
       .dropdown.inline.pull-left
-        %button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
+        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
           Dropdown
           = icon('chevron-down')
         %ul.dropdown-menu
           %li
-            %a{href: "#"}
+            %a{ href: "#" }
               Dropdown Option
       .dropdown.inline.pull-right
-        %button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
+        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
           Dropdown
           = icon('chevron-down')
         %ul.dropdown-menu.dropdown-menu-align-right
           %li
-            %a{href: "#"}
+            %a{ href: "#" }
               Dropdown Option
   .example
     %div
       .dropdown.inline
-        %button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
+        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
           Dropdown
           = icon('chevron-down')
         %ul.dropdown-menu.dropdown-menu-selectable
           %li
-            %a.is-active{href: "#"}
+            %a.is-active{ href: "#" }
               Dropdown Option
   .example
     %div
       .dropdown.inline
-        %button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
+        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
           Dropdown
           = icon('chevron-down')
         .dropdown-menu.dropdown-select.dropdown-menu-selectable
           .dropdown-title
             %span Dropdown Title
-            %button.dropdown-title-button.dropdown-menu-close{aria: {label: "Close"}}
+            %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
               = icon('times')
           .dropdown-input
-            %input.dropdown-input-field{type: "search", placeholder: "Filter results"}
+            %input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
             = icon('search')
           .dropdown-content
             %ul
               %li
-                %a.is-active{href: "#"}
+                %a.is-active{ href: "#" }
                   Dropdown Option
               %li
-                %a{href: "#"}
+                %a{ href: "#" }
                   Dropdown Option
               %li.divider
               %li
-                %a{href: "#"}
+                %a{ href: "#" }
                   Dropdown Option
               %li
-                %a{href: "#"}
+                %a{ href: "#" }
                   Dropdown Option
               %li
-                %a{href: "#"}
+                %a{ href: "#" }
                   Dropdown Option
               %li
-                %a{href: "#"}
+                %a{ href: "#" }
                   Dropdown Option
               %li
-                %a{href: "#"}
+                %a{ href: "#" }
                   Dropdown Option
           .dropdown-footer
             %strong Tip:
             If an author is not a member of this project, you can still filter by his name while using the search field.
       .dropdown.inline
-        %button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
+        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
           Dropdown loading
           = icon('chevron-down')
         .dropdown-menu.dropdown-select.dropdown-menu-selectable.is-loading
           .dropdown-title
             %span Dropdown Title
-            %button.dropdown-title-button.dropdown-menu-close{aria: {label: "Close"}}
+            %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
               = icon('times')
           .dropdown-input
-            %input.dropdown-input-field{type: "search", placeholder: "Filter results"}
+            %input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
             = icon('search')
           .dropdown-content
             %ul
               %li
-                %a.is-active{href: "#"}
+                %a.is-active{ href: "#" }
                   Dropdown Option
               %li
-                %a{href: "#"}
+                %a{ href: "#" }
                   Dropdown Option
               %li.divider
               %li
-                %a{href: "#"}
+                %a{ href: "#" }
                   Dropdown Option
               %li
-                %a{href: "#"}
+                %a{ href: "#" }
                   Dropdown Option
               %li
-                %a{href: "#"}
+                %a{ href: "#" }
                   Dropdown Option
               %li
-                %a{href: "#"}
+                %a{ href: "#" }
                   Dropdown Option
               %li
-                %a{href: "#"}
+                %a{ href: "#" }
                   Dropdown Option
           .dropdown-footer
             %strong Tip:
@@ -330,21 +330,21 @@
   .example
     %div
       .dropdown.inline
-        %button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
+        %button.dropdown-menu-toggle{ type: 'button', data: {toggle: 'dropdown' } }
           Dropdown user
           = icon('chevron-down')
         .dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-user
           .dropdown-title
             %span Dropdown Title
-            %button.dropdown-title-button.dropdown-menu-close{aria: {label: "Close"}}
+            %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
               = icon('times')
           .dropdown-input
-            %input.dropdown-input-field{type: "search", placeholder: "Filter results"}
+            %input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
             = icon('search')
           .dropdown-content
             %ul
               %li
-                %a.dropdown-menu-user-link.is-active{href: "#"}
+                %a.dropdown-menu-user-link.is-active{ href: "#" }
                   = link_to_member_avatar(@user, size: 30)
                   %strong.dropdown-menu-user-full-name
                     = @user.name
@@ -354,24 +354,24 @@
   .example
     %div
       .dropdown.inline
-        %button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
+        %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
           Dropdown page 2
           = icon('chevron-down')
         .dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-user.dropdown-menu-paging.is-page-two
           .dropdown-page-one
             .dropdown-title
-              %button.dropdown-title-button.dropdown-menu-back{aria: {label: "Go back"}}
+              %button.dropdown-title-button.dropdown-menu-back{ aria: { label: "Go back" } }
                 = icon('arrow-left')
               %span Dropdown Title
-              %button.dropdown-title-button.dropdown-menu-close{aria: {label: "Close"}}
+              %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
                 = icon('times')
             .dropdown-input
-              %input.dropdown-input-field{type: "search", placeholder: "Filter results"}
+              %input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
               = icon('search')
             .dropdown-content
               %ul
                 %li
-                  %a.dropdown-menu-user-link.is-active{href: "#"}
+                  %a.dropdown-menu-user-link.is-active{ href: "#" }
                     = link_to_member_avatar(@user, size: 30)
                     %strong.dropdown-menu-user-full-name
                       = @user.name
@@ -379,13 +379,13 @@
                       = @user.to_reference
           .dropdown-page-two
             .dropdown-title
-              %button.dropdown-title-button.dropdown-menu-back{aria: {label: "Go back"}}
+              %button.dropdown-title-button.dropdown-menu-back{ aria: { label: "Go back" } }
                 = icon('arrow-left')
               %span Create label
-              %button.dropdown-title-button.dropdown-menu-close{aria: {label: "Close"}}
+              %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
                 = icon('times')
             .dropdown-input
-              %input.dropdown-input-field{type: "search", placeholder: "Name new label"}
+              %input.dropdown-input-field{ type: "search", placeholder: "Name new label" }
             .dropdown-content
               %button.btn.btn-primary
                 Create
@@ -393,16 +393,16 @@
   .example
     %div
       .dropdown.inline
-        %button#js-project-dropdown.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
+        %button#js-project-dropdown.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown' } }
           Projects
           = icon('chevron-down')
         .dropdown-menu.dropdown-select.dropdown-menu-selectable
           .dropdown-title
             %span Go to project
-            %button.dropdown-title-button.dropdown-menu-close{aria: {label: "Close"}}
+            %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
               = icon('times')
           .dropdown-input
-            %input.dropdown-input-field{type: "search", placeholder: "Filter results"}
+            %input.dropdown-input-field{ type: "search", placeholder: "Filter results" }
             = icon('search')
           .dropdown-content
           .dropdown-loading
@@ -410,7 +410,7 @@
     :javascript
       $('#js-project-dropdown').glDropdown({
         data: function (term, callback) {
-          Api.projects(term, "last_activity_at", function (data) {
+          Api.projects(term, { order_by: 'last_activity_at' }, function (data) {
             callback(data);
           });
         },
@@ -486,22 +486,22 @@
   .example
     %form.form-horizontal
       .form-group
-        %label.col-sm-2.control-label{:for => "inputEmail3"} Email
+        %label.col-sm-2.control-label{ :for => "inputEmail3" } Email
         .col-sm-10
-          %input#inputEmail3.form-control{:placeholder => "Email", :type => "email"}/
+          %input#inputEmail3.form-control{ :placeholder => "Email", :type => "email" }/
       .form-group
-        %label.col-sm-2.control-label{:for => "inputPassword3"} Password
+        %label.col-sm-2.control-label{ :for => "inputPassword3" } Password
         .col-sm-10
-          %input#inputPassword3.form-control{:placeholder => "Password", :type => "password"}/
+          %input#inputPassword3.form-control{ :placeholder => "Password", :type => "password" }/
       .form-group
         .col-sm-offset-2.col-sm-10
           .checkbox
             %label
-              %input{:type => "checkbox"}/
+              %input{ :type => "checkbox" }/
               Remember me
       .form-group
         .col-sm-offset-2.col-sm-10
-          %button.btn.btn-default{:type => "submit"} Sign in
+          %button.btn.btn-default{ :type => "submit" } Sign in
 
   .lead
     Form when label rendered above input
@@ -510,16 +510,16 @@
   .example
     %form
       .form-group
-        %label{:for => "exampleInputEmail1"} Email address
-        %input#exampleInputEmail1.form-control{:placeholder => "Enter email", :type => "email"}/
+        %label{ :for => "exampleInputEmail1" } Email address
+        %input#exampleInputEmail1.form-control{ :placeholder => "Enter email", :type => "email" }/
       .form-group
-        %label{:for => "exampleInputPassword1"} Password
-        %input#exampleInputPassword1.form-control{:placeholder => "Password", :type => "password"}/
+        %label{ :for => "exampleInputPassword1" } Password
+        %input#exampleInputPassword1.form-control{ :placeholder => "Password", :type => "password" }/
       .checkbox
         %label
-          %input{:type => "checkbox"}/
+          %input{ :type => "checkbox" }/
           Remember me
-      %button.btn.btn-default{:type => "submit"} Sign in
+      %button.btn.btn-default{ :type => "submit" } Sign in
 
   %h2#file File
   %h4
@@ -528,7 +528,7 @@
   - blob = Snippet.new(content: "Wow\nSuch\nFile")
   .example
     .file-holder
-      .file-title
+      .js-file-title.file-title
         Awesome file
         .file-actions
           .btn-group
diff --git a/app/views/import/_githubish_status.html.haml b/app/views/import/_githubish_status.html.haml
new file mode 100644
index 00000000000..0e7f0b5ed4f
--- /dev/null
+++ b/app/views/import/_githubish_status.html.haml
@@ -0,0 +1,61 @@
+- provider = local_assigns.fetch(:provider)
+- provider_title = Gitlab::ImportSources.title(provider)
+
+%p.light
+  Select projects you want to import.
+%hr
+%p
+  = button_tag class: "btn btn-import btn-success js-import-all" do
+    Import all projects
+    = icon("spinner spin", class: "loading-icon")
+
+.table-responsive
+  %table.table.import-jobs
+    %colgroup.import-jobs-from-col
+    %colgroup.import-jobs-to-col
+    %colgroup.import-jobs-status-col
+    %thead
+      %tr
+        %th From #{provider_title}
+        %th To GitLab
+        %th Status
+    %tbody
+      - @already_added_projects.each do |project|
+        %tr{ id: "project_#{project.id}", class: "#{project_status_css_class(project.import_status)}" }
+          %td
+            = provider_project_link(provider, project.import_source)
+          %td
+            = link_to project.path_with_namespace, [project.namespace.becomes(Namespace), project]
+          %td.job-status
+            - if project.import_status == 'finished'
+              %span
+                %i.fa.fa-check
+                done
+            - elsif project.import_status == 'started'
+              %i.fa.fa-spinner.fa-spin
+              started
+            - else
+              = project.human_import_status_name
+
+      - @repos.each do |repo|
+        %tr{ id: "repo_#{repo.id}" }
+          %td
+            = provider_project_link(provider, repo.full_name)
+          %td.import-target
+            %fieldset.row
+            .input-group
+              .project-path.input-group-btn
+                - if current_user.can_select_namespace?
+                  - selected = params[:namespace_id] || :current_user
+                  - opts = current_user.can_create_group? ? { extra_group: Group.new(name: repo.owner.login, path: repo.owner.login) } : {}
+                  = select_tag :namespace_id, namespaces_options(selected, opts.merge({ display_path: true })), { class: 'select2 js-select-namespace', tabindex: 1 }
+                - else
+                  = text_field_tag :path, current_user.namespace_path, class: "input-large form-control", tabindex: 1, disabled: true
+              %span.input-group-addon /
+              = text_field_tag :path, repo.name, class: "input-mini form-control", tabindex: 2, autofocus: true, required: true
+          %td.import-actions.job-status
+            = button_tag class: "btn btn-import js-add-to-import" do
+              Import
+              = icon("spinner spin", class: "loading-icon")
+
+.js-importer-status{ data: { jobs_import_path: "#{url_for([:jobs, :import, provider])}", import_path: "#{url_for([:import, provider])}" } }
diff --git a/app/views/import/base/unauthorized.js.haml b/app/views/import/base/unauthorized.js.haml
index 36f8069c1f7..ada5f99f4e2 100644
--- a/app/views/import/base/unauthorized.js.haml
+++ b/app/views/import/base/unauthorized.js.haml
@@ -4,7 +4,7 @@
   import_button = tr.find(".btn-import")
   origin_target = target_field.text()
   project_name = "#{@project_name}"
-  origin_namespace = "#{@target_namespace.path}"
+  origin_namespace = "#{@target_namespace.full_path}"
   target_field.empty()
   target_field.append("<p class='alert alert-danger'>This namespace has already been taken! Please choose another one.</p>")
   target_field.append("<input type='text' name='target_namespace' />")
diff --git a/app/views/import/bitbucket/status.html.haml b/app/views/import/bitbucket/status.html.haml
index f8b4b107513..e6058617ac9 100644
--- a/app/views/import/bitbucket/status.html.haml
+++ b/app/views/import/bitbucket/status.html.haml
@@ -1,5 +1,6 @@
-- page_title "Bitbucket import"
-- header_title "Projects", root_path
+- page_title 'Bitbucket import'
+- header_title 'Projects', root_path
+
 %h3.page-title
   %i.fa.fa-bitbucket
   Import projects from Bitbucket
@@ -10,13 +11,13 @@
   %hr
   %p
   - if @incompatible_repos.any?
-    = button_tag class: "btn btn-import btn-success js-import-all" do
+    = button_tag class: 'btn btn-import btn-success js-import-all' do
       Import all compatible projects
-      = icon("spinner spin", class: "loading-icon")
+      = icon('spinner spin', class: 'loading-icon')
   - else
-    = button_tag class: "btn btn-success js-import-all" do
+    = button_tag class: 'btn btn-import btn-success js-import-all' do
       Import all projects
-      = icon("spinner spin", class: "loading-icon")
+      = icon('spinner spin', class: 'loading-icon')
 
 .table-responsive
   %table.table.import-jobs
@@ -30,9 +31,9 @@
         %th Status
     %tbody
       - @already_added_projects.each do |project|
-        %tr{id: "project_#{project.id}", class: "#{project_status_css_class(project.import_status)}"}
+        %tr{ id: "project_#{project.id}", class: "#{project_status_css_class(project.import_status)}" }
           %td
-            = link_to project.import_source, "https://bitbucket.org/#{project.import_source}", target: "_blank"
+            = link_to project.import_source, "https://bitbucket.org/#{project.import_source}", target: '_blank', rel: 'noopener noreferrer'
           %td
             = link_to project.path_with_namespace, [project.namespace.becomes(Namespace), project]
           %td.job-status
@@ -47,31 +48,41 @@
               = project.human_import_status_name
 
       - @repos.each do |repo|
-        %tr{id: "repo_#{repo["owner"]}___#{repo["slug"]}"}
+        %tr{ id: "repo_#{repo.owner}___#{repo.slug}" }
           %td
-            = link_to "#{repo["owner"]}/#{repo["slug"]}", "https://bitbucket.org/#{repo["owner"]}/#{repo["slug"]}", target: "_blank"
+            = link_to repo.full_name, "https://bitbucket.org/#{repo.full_name}", target: '_blank', rel: 'noopener noreferrer'
           %td.import-target
-            = import_project_target(repo['owner'], repo['slug'])
+            %fieldset.row
+            .input-group
+              .project-path.input-group-btn
+                - if current_user.can_select_namespace?
+                  - selected = params[:namespace_id] || :current_user
+                  - opts = current_user.can_create_group? ? { extra_group: Group.new(name: repo.owner, path: repo.owner) } : {}
+                  = select_tag :namespace_id, namespaces_options(selected, opts.merge({ display_path: true })), { class: 'select2 js-select-namespace', tabindex: 1 }
+                - else
+                  = text_field_tag :path, current_user.namespace_path, class: "input-large form-control", tabindex: 1, disabled: true
+              %span.input-group-addon /
+              = text_field_tag :path, repo.name, class: "input-mini form-control", tabindex: 2, autofocus: true, required: true
           %td.import-actions.job-status
-            = button_tag class: "btn btn-import js-add-to-import" do
+            = button_tag class: 'btn btn-import js-add-to-import' do
               Import
-              = icon("spinner spin", class: "loading-icon")
+              = icon('spinner spin', class: 'loading-icon')
       - @incompatible_repos.each do |repo|
-        %tr{id: "repo_#{repo["owner"]}___#{repo["slug"]}"}
+        %tr{ id: "repo_#{repo.owner}___#{repo.slug}" }
           %td
-            = link_to "#{repo["owner"]}/#{repo["slug"]}", "https://bitbucket.org/#{repo["owner"]}/#{repo["slug"]}", target: "_blank"
+            = link_to repo.full_name, "https://bitbucket.org/#{repo.full_name}", target: '_blank', rel: 'noopener noreferrer'
           %td.import-target
           %td.import-actions-job-status
-            = label_tag "Incompatible Project", nil, class: "label label-danger"
+            = label_tag 'Incompatible Project', nil, class: 'label label-danger'
 
 - if @incompatible_repos.any?
   %p
     One or more of your Bitbucket projects cannot be imported into GitLab
     directly because they use Subversion or Mercurial for version control,
     rather than Git. Please convert
-    = link_to "them to Git,", "https://www.atlassian.com/git/tutorials/migrating-overview"
+    = link_to 'them to Git,', 'https://www.atlassian.com/git/tutorials/migrating-overview'
     and go through the
-    = link_to "import flow", status_import_bitbucket_path, "data-no-turbolink" => "true"
+    = link_to 'import flow', status_import_bitbucket_path
     again.
 
 .js-importer-status{ data: { jobs_import_path: "#{jobs_import_bitbucket_path}", import_path: "#{import_bitbucket_path}" } }
diff --git a/app/views/import/fogbugz/new_user_map.html.haml b/app/views/import/fogbugz/new_user_map.html.haml
index 07338736bac..9999a4362c6 100644
--- a/app/views/import/fogbugz/new_user_map.html.haml
+++ b/app/views/import/fogbugz/new_user_map.html.haml
@@ -37,7 +37,7 @@
       %tbody
         - @user_map.each do |id, user|
           %tr
-            %td= id
+            %td= (id)
             %td= text_field_tag "users[#{id}][name]", user[:name], class: 'form-control'
             %td= text_field_tag "users[#{id}][email]", user[:email], class: 'form-control'
             %td
diff --git a/app/views/import/fogbugz/status.html.haml b/app/views/import/fogbugz/status.html.haml
index c8a6fa1aa9e..5de5da5e6a2 100644
--- a/app/views/import/fogbugz/status.html.haml
+++ b/app/views/import/fogbugz/status.html.haml
@@ -29,7 +29,7 @@
         %th Status
     %tbody
       - @already_added_projects.each do |project|
-        %tr{id: "project_#{project.id}", class: "#{project_status_css_class(project.import_status)}"}
+        %tr{ id: "project_#{project.id}", class: "#{project_status_css_class(project.import_status)}" }
           %td
             = project.import_source
           %td
@@ -46,11 +46,11 @@
               = project.human_import_status_name
 
       - @repos.each do |repo|
-        %tr{id: "repo_#{repo.id}"}
+        %tr{ id: "repo_#{repo.id}" }
           %td
             = repo.name
           %td.import-target
-            = "#{current_user.username}/#{repo.name}"
+            #{current_user.username}/#{repo.name}
           %td.import-actions.job-status
             = button_tag class: "btn btn-import js-add-to-import" do
               Import
diff --git a/app/views/import/gitea/new.html.haml b/app/views/import/gitea/new.html.haml
new file mode 100644
index 00000000000..02a116f996b
--- /dev/null
+++ b/app/views/import/gitea/new.html.haml
@@ -0,0 +1,23 @@
+- page_title "Gitea Import"
+- header_title "Projects", root_path
+
+%h3.page-title
+  = custom_icon('go_logo')
+  Import Projects from Gitea
+
+%p
+  To get started, please enter your Gitea Host URL and a
+  = succeed '.' do
+    = link_to 'Personal Access Token', 'https://github.com/gogits/go-gogs-client/wiki#access-token'
+
+= form_tag personal_access_token_import_gitea_path, class: 'form-horizontal' do
+  .form-group
+    = label_tag :gitea_host_url, 'Gitea Host URL', class: 'control-label'
+    .col-sm-4
+      = text_field_tag :gitea_host_url, nil, placeholder: 'https://try.gitea.io', class: 'form-control'
+  .form-group
+    = label_tag :personal_access_token, 'Personal Access Token', class: 'control-label'
+    .col-sm-4
+      = text_field_tag :personal_access_token, nil, class: 'form-control'
+  .form-actions
+    = submit_tag 'List Your Gitea Repositories', class: 'btn btn-create'
diff --git a/app/views/import/gitea/status.html.haml b/app/views/import/gitea/status.html.haml
new file mode 100644
index 00000000000..589ca27e45d
--- /dev/null
+++ b/app/views/import/gitea/status.html.haml
@@ -0,0 +1,7 @@
+- page_title "Gitea Import"
+- header_title "Projects", root_path
+%h3.page-title
+  = custom_icon('go_logo')
+  Import Projects from Gitea
+
+= render 'import/githubish_status', provider: 'gitea'
diff --git a/app/views/import/github/status.html.haml b/app/views/import/github/status.html.haml
index 4c721d40b55..0fe578a0036 100644
--- a/app/views/import/github/status.html.haml
+++ b/app/views/import/github/status.html.haml
@@ -1,64 +1,6 @@
-- page_title "GitHub import"
+- page_title "GitHub Import"
 - header_title "Projects", root_path
 %h3.page-title
-  %i.fa.fa-github
-  Import projects from GitHub
+  = icon 'github', text: 'Import Projects from GitHub'
 
-%p.light
-  Select projects you want to import.
-%hr
-%p
-  = button_tag class: "btn btn-import btn-success js-import-all" do
-    Import all projects
-    = icon("spinner spin", class: "loading-icon")
-
-.table-responsive
-  %table.table.import-jobs
-    %colgroup.import-jobs-from-col
-    %colgroup.import-jobs-to-col
-    %colgroup.import-jobs-status-col
-    %thead
-      %tr
-        %th From GitHub
-        %th To GitLab
-        %th Status
-    %tbody
-      - @already_added_projects.each do |project|
-        %tr{id: "project_#{project.id}", class: "#{project_status_css_class(project.import_status)}"}
-          %td
-            = github_project_link(project.import_source)
-          %td
-            = link_to project.path_with_namespace, [project.namespace.becomes(Namespace), project]
-          %td.job-status
-            - if project.import_status == 'finished'
-              %span
-                %i.fa.fa-check
-                done
-            - elsif project.import_status == 'started'
-              %i.fa.fa-spinner.fa-spin
-              started
-            - else
-              = project.human_import_status_name
-
-      - @repos.each do |repo|
-        %tr{id: "repo_#{repo.id}"}
-          %td
-            = github_project_link(repo.full_name)
-          %td.import-target
-            %fieldset.row
-            .input-group
-              .project-path.input-group-btn
-                - if current_user.can_select_namespace?
-                  - selected = params[:namespace_id] || :current_user
-                  - opts = current_user.can_create_group? ? { extra_group: Group.new(name: repo.owner.login, path: repo.owner.login) } : {}
-                  = select_tag :namespace_id, namespaces_options(selected, opts.merge({ display_path: true })), { class: 'select2 js-select-namespace', tabindex: 1 }
-                - else
-                  = text_field_tag :path, current_user.namespace_path, class: "input-large form-control", tabindex: 1, disabled: true
-              %span.input-group-addon /
-              = text_field_tag :path, repo.name, class: "input-mini form-control", tabindex: 2, autofocus: true, required: true
-          %td.import-actions.job-status
-            = button_tag class: "btn btn-import js-add-to-import" do
-              Import
-              = icon("spinner spin", class: "loading-icon")
-
-.js-importer-status{ data: { jobs_import_path: "#{jobs_import_github_path}", import_path: "#{import_github_path}" } }
+= render 'import/githubish_status', provider: 'github'
diff --git a/app/views/import/gitlab/status.html.haml b/app/views/import/gitlab/status.html.haml
index d31fc2e6adb..7456799ca0e 100644
--- a/app/views/import/gitlab/status.html.haml
+++ b/app/views/import/gitlab/status.html.haml
@@ -24,7 +24,7 @@
         %th Status
     %tbody
       - @already_added_projects.each do |project|
-        %tr{id: "project_#{project.id}", class: "#{project_status_css_class(project.import_status)}"}
+        %tr{ id: "project_#{project.id}", class: "#{project_status_css_class(project.import_status)}" }
           %td
             = link_to project.import_source, "https://gitlab.com/#{project.import_source}", target: "_blank"
           %td
@@ -41,9 +41,9 @@
               = project.human_import_status_name
 
       - @repos.each do |repo|
-        %tr{id: "repo_#{repo["id"]}"}
+        %tr{ id: "repo_#{repo["id"]}" }
           %td
-            = link_to repo["path_with_namespace"], "https://gitlab.com/#{repo["path_with_namespace"]}", target: "_blank"
+            = link_to repo["path_with_namespace"], "https://gitlab.com/#{repo["path_with_namespace"]}", target: "_blank", rel: 'noopener noreferrer'
           %td.import-target
             = import_project_target(repo['namespace']['path'], repo['name'])
           %td.import-actions.job-status
diff --git a/app/views/import/google_code/new.html.haml b/app/views/import/google_code/new.html.haml
index 5d2f149cd5f..c5800a1cca0 100644
--- a/app/views/import/google_code/new.html.haml
+++ b/app/views/import/google_code/new.html.haml
@@ -13,7 +13,7 @@
     %li
       %p
         Go to
-        #{link_to "Google Takeout", "https://www.google.com/settings/takeout", target: "_blank"}.
+        #{link_to "Google Takeout", "https://www.google.com/settings/takeout", target: '_blank', rel: 'noopener noreferrer'}.
     %li
       %p
         Make sure you're logged into the account that owns the projects you'd like to import.
@@ -45,7 +45,7 @@
       %p
         Upload <code>GoogleCodeProjectHosting.json</code> here:
       %p
-        %input{type: "file", name: "dump_file", id: "dump_file"}
+        %input{ type: "file", name: "dump_file", id: "dump_file" }
     %li
       %p
         Do you want to customize how Google Code email addresses and usernames are imported into GitLab?
diff --git a/app/views/import/google_code/status.html.haml b/app/views/import/google_code/status.html.haml
index e79f122940a..60de6bfe816 100644
--- a/app/views/import/google_code/status.html.haml
+++ b/app/views/import/google_code/status.html.haml
@@ -34,9 +34,9 @@
         %th Status
     %tbody
       - @already_added_projects.each do |project|
-        %tr{id: "project_#{project.id}", class: "#{project_status_css_class(project.import_status)}"}
+        %tr{ id: "project_#{project.id}", class: "#{project_status_css_class(project.import_status)}" }
           %td
-            = link_to project.import_source, "https://code.google.com/p/#{project.import_source}", target: "_blank"
+            = link_to project.import_source, "https://code.google.com/p/#{project.import_source}", target: "_blank", rel: 'noopener noreferrer'
           %td
             = link_to project.path_with_namespace, [project.namespace.becomes(Namespace), project]
           %td.job-status
@@ -51,19 +51,19 @@
               = project.human_import_status_name
 
       - @repos.each do |repo|
-        %tr{id: "repo_#{repo.id}"}
+        %tr{ id: "repo_#{repo.id}" }
           %td
-            = link_to repo.name, "https://code.google.com/p/#{repo.name}", target: "_blank"
+            = link_to repo.name, "https://code.google.com/p/#{repo.name}", target: "_blank", rel: 'noopener noreferrer'
           %td.import-target
-            = "#{current_user.username}/#{repo.name}"
+            #{current_user.username}/#{repo.name}
           %td.import-actions.job-status
             = button_tag class: "btn btn-import js-add-to-import" do
               Import
               = icon("spinner spin", class: "loading-icon")
       - @incompatible_repos.each do |repo|
-        %tr{id: "repo_#{repo.id}"}
+        %tr{ id: "repo_#{repo.id}" }
           %td
-            = link_to repo.name, "https://code.google.com/p/#{repo.name}", target: "_blank"
+            = link_to repo.name, "https://code.google.com/p/#{repo.name}", target: "_blank", rel: 'noopener noreferrer'
           %td.import-target
           %td.import-actions-job-status
             = label_tag "Incompatible Project", nil, class: "label label-danger"
diff --git a/app/views/invites/show.html.haml b/app/views/invites/show.html.haml
index 2fd4859c1c6..882fdf1317d 100644
--- a/app/views/invites/show.html.haml
+++ b/app/views/invites/show.html.haml
@@ -6,7 +6,7 @@
   - if inviter = @member.created_by
     by
     = link_to inviter.name, user_url(inviter)
-  to join 
+  to join
   - case @member.source
   - when Project
     - project = @member.source
@@ -20,11 +20,18 @@
       = link_to group.name, group_url(group)
   as #{@member.human_access}.
 
-- if @member.source.users.include?(current_user)
+- is_member = @member.source.users.include?(current_user)
+
+- if is_member
   %p
     However, you are already a member of this #{@member.source.is_a?(Group) ? "group" : "project"}.
     Sign in using a different account to accept the invitation.
-- else
+
+- if @member.invite_email != current_user.email
+  %p
+    Note that this invitation was sent to #{mail_to @member.invite_email}, but you are signed in as #{link_to current_user.to_reference, user_url(current_user)} with email #{mail_to current_user.email}.
+
+- unless is_member
   .actions
     = link_to "Accept invitation", accept_invite_url(@token), method: :post, class: "btn btn-success"
     = link_to "Decline", decline_invite_url(@token), method: :post, class: "btn btn-danger prepend-left-10"
diff --git a/app/views/issues/_issue.atom.builder b/app/views/issues/_issue.atom.builder
index 96831874144..23a88448055 100644
--- a/app/views/issues/_issue.atom.builder
+++ b/app/views/issues/_issue.atom.builder
@@ -2,12 +2,12 @@ xml.entry do
   xml.id      namespace_project_issue_url(issue.project.namespace, issue.project, issue)
   xml.link    href: namespace_project_issue_url(issue.project.namespace, issue.project, issue)
   xml.title   truncate(issue.title, length: 80)
-  xml.updated issue.created_at.xmlschema
+  xml.updated issue.updated_at.xmlschema
   xml.media   :thumbnail, width: "40", height: "40", url: image_url(avatar_icon(issue.author_email))
 
   xml.author do
     xml.name issue.author_name
-    xml.email issue.author_email
+    xml.email issue.author_public_email
   end
 
   xml.summary issue.title
@@ -26,7 +26,7 @@ xml.entry do
   if issue.assignee
     xml.assignee do
       xml.name issue.assignee.name
-      xml.email issue.assignee.email
+      xml.email issue.assignee_public_email
     end
   end
 end
diff --git a/app/views/kaminari/gitlab/_next_page.html.haml b/app/views/kaminari/gitlab/_next_page.html.haml
index 125f09777ba..c93dc7a50e8 100644
--- a/app/views/kaminari/gitlab/_next_page.html.haml
+++ b/app/views/kaminari/gitlab/_next_page.html.haml
@@ -6,8 +6,8 @@
 -#    per_page:      number of items to fetch per page
 -#    remote:        data-remote
 - if current_page.last?
-  %li{ class: "next disabled" }
+  %li.next.disabled
     %span= raw(t 'views.pagination.next')
 - else
-  %li{ class: "next" }
+  %li.next
     = link_to raw(t 'views.pagination.next'), url, rel: 'next', remote: remote
diff --git a/app/views/kaminari/gitlab/_page.html.haml b/app/views/kaminari/gitlab/_page.html.haml
index 750aed8f329..5c5be03a7cd 100644
--- a/app/views/kaminari/gitlab/_page.html.haml
+++ b/app/views/kaminari/gitlab/_page.html.haml
@@ -6,5 +6,5 @@
 -#    total_pages:   total number of pages
 -#    per_page:      number of items to fetch per page
 -#    remote:        data-remote
-%li{class: "page#{' active' if page.current?}#{' sibling' if page.next? || page.prev?}"}
-  = link_to page, url, {remote: remote, rel: page.next? ? 'next' : page.prev? ? 'prev' : nil}
+%li.page{ class: [active_when(page.current?), ('sibling' if page.next? || page.prev?)] }
+  = link_to page, url, { remote: remote, rel: page.next? ? 'next' : page.prev? ? 'prev' : nil }
diff --git a/app/views/kaminari/gitlab/_paginator.html.haml b/app/views/kaminari/gitlab/_paginator.html.haml
index f5e0d2ed3f3..8fe6bd653ae 100644
--- a/app/views/kaminari/gitlab/_paginator.html.haml
+++ b/app/views/kaminari/gitlab/_paginator.html.haml
@@ -6,7 +6,7 @@
 -#    remote:        data-remote
 -#    paginator:     the paginator that renders the pagination tags inside
 = paginator.render do
-  %div.gl-pagination
+  .gl-pagination
     %ul.pagination.clearfix
       - unless current_page.first?
         = first_page_tag unless total_pages < 5 # As kaminari will always show the first 5 pages
@@ -19,4 +19,3 @@
       = next_page_tag
       - unless current_page.last?
         = last_page_tag unless total_pages < 5
-
diff --git a/app/views/kaminari/gitlab/_prev_page.html.haml b/app/views/kaminari/gitlab/_prev_page.html.haml
index 7edf10498a8..b7c6caf7ff4 100644
--- a/app/views/kaminari/gitlab/_prev_page.html.haml
+++ b/app/views/kaminari/gitlab/_prev_page.html.haml
@@ -6,8 +6,8 @@
 -#    per_page:      number of items to fetch per page
 -#    remote:        data-remote
 - if current_page.first?
-  %li{ class: "prev disabled" }
+  %li.prev.disabled
     %span= raw(t 'views.pagination.previous')
 - else
-  %li{ class: "prev" }
+  %li.prev
     = link_to raw(t 'views.pagination.previous'), url, rel: 'prev', remote: remote
diff --git a/app/views/koding/index.html.haml b/app/views/koding/index.html.haml
index 65887aacbaf..04e2d4b63e6 100644
--- a/app/views/koding/index.html.haml
+++ b/app/views/koding/index.html.haml
@@ -2,5 +2,5 @@
   %p
     = icon('circle', class: 'cgreen')
     Integration is active for
-    = link_to koding_project_url, target: '_blank' do
+    = link_to koding_project_url, target: '_blank', rel: 'noopener noreferrer' do
       #{current_application_settings.koding_url}
diff --git a/app/views/layouts/_head.html.haml b/app/views/layouts/_head.html.haml
index 757de92d6d4..f6d8bb08a64 100644
--- a/app/views/layouts/_head.html.haml
+++ b/app/views/layouts/_head.html.haml
@@ -1,60 +1,62 @@
 - page_description brand_title unless page_description
 
 - site_name = "GitLab"
-%head{prefix: "og: http://ogp.me/ns#"}
-  %meta{charset: "utf-8"}
-  %meta{'http-equiv' => 'X-UA-Compatible', content: 'IE=edge'}
+%head{ prefix: "og: http://ogp.me/ns#" }
+  %meta{ charset: "utf-8" }
+  %meta{ 'http-equiv' => 'X-UA-Compatible', content: 'IE=edge' }
 
   -# Open Graph - http://ogp.me/
-  %meta{property: 'og:type',        content: "object"}
-  %meta{property: 'og:site_name',   content: site_name}
-  %meta{property: 'og:title',       content: page_title}
-  %meta{property: 'og:description', content: page_description}
-  %meta{property: 'og:image',       content: page_image}
-  %meta{property: 'og:url',         content: request.base_url + request.fullpath}
+  %meta{ property: 'og:type',        content: "object" }
+  %meta{ property: 'og:site_name',   content: site_name }
+  %meta{ property: 'og:title',       content: page_title }
+  %meta{ property: 'og:description', content: page_description }
+  %meta{ property: 'og:image',       content: page_image }
+  %meta{ property: 'og:url',         content: request.base_url + request.fullpath }
 
   -# Twitter Card - https://dev.twitter.com/cards/types/summary
-  %meta{property: 'twitter:card',         content: "summary"}
-  %meta{property: 'twitter:title',        content: page_title}
-  %meta{property: 'twitter:description',  content: page_description}
-  %meta{property: 'twitter:image',        content: page_image}
+  %meta{ property: 'twitter:card',         content: "summary" }
+  %meta{ property: 'twitter:title',        content: page_title }
+  %meta{ property: 'twitter:description',  content: page_description }
+  %meta{ property: 'twitter:image',        content: page_image }
   = page_card_meta_tags
 
   %title= page_title(site_name)
-  %meta{name: "description", content: page_description}
+  %meta{ name: "description", content: page_description }
 
-  = favicon_link_tag 'favicon.ico'
+  = favicon_link_tag favicon
 
   = stylesheet_link_tag "application", media: "all"
   = stylesheet_link_tag "print",       media: "print"
 
-  = javascript_include_tag "application"
+  = javascript_include_tag(*webpack_asset_paths("runtime"))
+  = javascript_include_tag(*webpack_asset_paths("common"))
+  = javascript_include_tag(*webpack_asset_paths("main"))
 
   - if content_for?(:page_specific_javascripts)
     = yield :page_specific_javascripts
 
+  = yield :project_javascripts
+
   = csrf_meta_tags
 
   - unless browser.safari?
-    %meta{name: 'referrer', content: 'origin-when-cross-origin'}
-  %meta{name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1'}
-  %meta{name: 'theme-color', content: '#474D57'}
+    %meta{ name: 'referrer', content: 'origin-when-cross-origin' }
+  %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1' }
+  %meta{ name: 'theme-color', content: '#474D57' }
 
   -# Apple Safari/iOS home screen icons
   = favicon_link_tag 'touch-icon-iphone.png',        rel: 'apple-touch-icon'
   = favicon_link_tag 'touch-icon-ipad.png',          rel: 'apple-touch-icon', sizes: '76x76'
   = favicon_link_tag 'touch-icon-iphone-retina.png', rel: 'apple-touch-icon', sizes: '120x120'
   = favicon_link_tag 'touch-icon-ipad-retina.png',   rel: 'apple-touch-icon', sizes: '152x152'
-  %link{rel: 'mask-icon', href: image_path('logo.svg'), color: 'rgb(226, 67, 41)'}
+  %link{ rel: 'mask-icon', href: image_path('logo.svg'), color: 'rgb(226, 67, 41)' }
 
   -# Windows 8 pinned site tile
-  %meta{name: 'msapplication-TileImage', content: image_path('msapplication-tile.png')}
-  %meta{name: 'msapplication-TileColor', content: '#30353E'}
+  %meta{ name: 'msapplication-TileImage', content: image_path('msapplication-tile.png') }
+  %meta{ name: 'msapplication-TileColor', content: '#30353E' }
 
   = yield :meta_tags
 
   = render 'layouts/google_analytics' if extra_config.has_key?('google_analytics_id')
   = render 'layouts/piwik' if extra_config.has_key?('piwik_url') && extra_config.has_key?('piwik_site_id')
   = render 'layouts/bootlint' if Rails.env.development?
-
-  = render 'layouts/user_styles'
diff --git a/app/views/layouts/_init_auto_complete.html.haml b/app/views/layouts/_init_auto_complete.html.haml
index e138ebab018..769f6fb0151 100644
--- a/app/views/layouts/_init_auto_complete.html.haml
+++ b/app/views/layouts/_init_auto_complete.html.haml
@@ -3,6 +3,13 @@
 
 - if project
   :javascript
-    GitLab.GfmAutoComplete.dataSource = "#{autocomplete_sources_namespace_project_path(project.namespace, project, type: noteable_type, type_id: params[:id])}"
-    GitLab.GfmAutoComplete.cachedData = undefined;
-    GitLab.GfmAutoComplete.setup();
+    gl.GfmAutoComplete.dataSources = {
+      members: "#{members_namespace_project_autocomplete_sources_path(project.namespace, project, type: noteable_type, type_id: params[:id])}",
+      issues: "#{issues_namespace_project_autocomplete_sources_path(project.namespace, project)}",
+      mergeRequests: "#{merge_requests_namespace_project_autocomplete_sources_path(project.namespace, project)}",
+      labels: "#{labels_namespace_project_autocomplete_sources_path(project.namespace, project)}",
+      milestones: "#{milestones_namespace_project_autocomplete_sources_path(project.namespace, project)}",
+      commands: "#{commands_namespace_project_autocomplete_sources_path(project.namespace, project, type: noteable_type, type_id: params[:id])}"
+    };
+
+    gl.GfmAutoComplete.setup();
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index 8aefdcb3d9b..b7df11681d3 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -1,30 +1,15 @@
-.page-with-sidebar{ class: "#{page_sidebar_class} #{page_gutter_class}" }
-  .sidebar-wrapper.nicescroll
-    .sidebar-action-buttons
-      .nav-header-btn.toggle-nav-collapse{ title: "Open/Close" }
-        %span.sr-only Toggle navigation
-        = icon('bars')
-
-      %div{ class: "nav-header-btn pin-nav-btn has-tooltip #{'is-active' if pinned_nav?} js-nav-pin", title: pinned_nav? ? "Unpin navigation" : "Pin Navigation", data: { placement: 'right', container: 'body' } }
-        %span.sr-only Toggle navigation pinning
-        = icon('fw thumb-tack')
-
-    - if defined?(sidebar) && sidebar
-      = render "layouts/nav/#{sidebar}"
-    - elsif current_user
-      = render 'layouts/nav/dashboard'
-    - else
-      = render 'layouts/nav/explore'
-
+.page-with-sidebar{ class: page_gutter_class }
   - if defined?(nav) && nav
     .layout-nav
       .container-fluid
         = render "layouts/nav/#{nav}"
-  .content-wrapper{ class: "#{layout_nav_class}" }
+  - if content_for?(:sub_nav)
     = yield :sub_nav
-    = render "layouts/broadcast"
-    = render "layouts/flash"
-    = yield :flash_message
+  .content-wrapper{ class: layout_nav_class }
+    .alert-wrapper
+      = render "layouts/broadcast"
+      = render "layouts/flash"
+      = yield :flash_message
     %div{ class: "#{(container_class unless @no_container)} #{@content_class}" }
-      .content
+      .content{ id: "content-body" }
         = yield
diff --git a/app/views/layouts/_recaptcha_verification.html.haml b/app/views/layouts/_recaptcha_verification.html.haml
new file mode 100644
index 00000000000..77c77dc6754
--- /dev/null
+++ b/app/views/layouts/_recaptcha_verification.html.haml
@@ -0,0 +1,23 @@
+- humanized_resource_name = spammable.class.model_name.human.downcase
+- resource_name = spammable.class.model_name.singular
+
+%h3.page-title
+  Anti-spam verification
+%hr
+
+%p
+  #{"We detected potential spam in the #{humanized_resource_name}. Please solve the reCAPTCHA to proceed."}
+
+= form_for form do |f|
+  .recaptcha
+    - params[resource_name].each do |field, value|
+      = hidden_field(resource_name, field, value: value)
+    = hidden_field_tag(:spam_log_id, spammable.spam_log.id)
+    = hidden_field_tag(:recaptcha_verification, true)
+    = recaptcha_tags
+
+    -# Yields a block with given extra params.
+    = yield
+
+  .row-content-block.footer-block
+    = f.submit "Submit #{humanized_resource_name}", class: 'btn btn-create'
diff --git a/app/views/layouts/_search.html.haml b/app/views/layouts/_search.html.haml
index d7386105b7d..0e64ebd71b8 100644
--- a/app/views/layouts/_search.html.haml
+++ b/app/views/layouts/_search.html.haml
@@ -6,14 +6,14 @@
   - group_data_attrs = { group_path: j(@group.path), name: @group.name, issues_path: issues_group_path(j(@group.path)), mr_path: merge_requests_group_path(j(@group.path)) }
 - if @project && @project.persisted?
   - project_data_attrs = { project_path: j(@project.path), name: j(@project.name), issues_path: namespace_project_issues_path(@project.namespace, @project), mr_path: namespace_project_merge_requests_path(@project.namespace, @project) }
-.search.search-form{class: "#{'has-location-badge' if label.present?}"}
+.search.search-form{ class: "#{'has-location-badge' if label.present?}" }
   = form_tag search_path, method: :get, class: 'navbar-form' do |f|
     .search-input-container
       - if label.present?
         .location-badge= label
       .search-input-wrap
         .dropdown{ data: { url: search_autocomplete_path } }
-          = search_field_tag 'search', nil, placeholder: 'Search', class: 'search-input dropdown-menu-toggle js-search-dashboard-options', spellcheck: false, tabindex: '1', autocomplete: 'off', data: { toggle: 'dropdown', issues_path: issues_dashboard_url, mr_path: merge_requests_dashboard_url }
+          = search_field_tag 'search', nil, placeholder: 'Search', class: 'search-input dropdown-menu-toggle no-outline js-search-dashboard-options', spellcheck: false, tabindex: '1', autocomplete: 'off', data: { toggle: 'dropdown', issues_path: issues_dashboard_url, mr_path: merge_requests_dashboard_url }
           .dropdown-menu.dropdown-select
             = dropdown_content do
               %ul
@@ -44,4 +44,4 @@
       = hidden_field_tag :snippets, true
     = hidden_field_tag :repository_ref, @ref
     = button_tag 'Go' if ENV['RAILS_ENV'] == 'test'
-    .search-autocomplete-opts.hide{:'data-autocomplete-path' => search_autocomplete_path, :'data-autocomplete-project-id' => @project.try(:id), :'data-autocomplete-project-ref' => @ref }
+    .search-autocomplete-opts.hide{ :'data-autocomplete-path' => search_autocomplete_path, :'data-autocomplete-project-id' => @project.try(:id), :'data-autocomplete-project-ref' => @ref }
diff --git a/app/views/layouts/_user_styles.html.haml b/app/views/layouts/_user_styles.html.haml
deleted file mode 100644
index b76b3cb5510..00000000000
--- a/app/views/layouts/_user_styles.html.haml
+++ /dev/null
@@ -1,24 +0,0 @@
-:css
-  [data-user-is] {
-    display: none !important;
-  }
-
-  [data-user-is="#{current_user.try(:id)}"] {
-    display: block !important;
-  }
-
-  [data-user-is="#{current_user.try(:id)}"][data-display="inline"] {
-    display: inline !important;
-  }
-
-  [data-user-is-not] {
-    display: block !important;
-  }
-
-  [data-user-is-not][data-display="inline"] {
-    display: inline !important;
-  }
-
-  [data-user-is-not="#{current_user.try(:id)}"] {
-    display: none !important;
-  }
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 6c2285fa2b6..36543edc040 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -1,12 +1,9 @@
 !!! 5
 %html{ lang: "en", class: "#{page_class}" }
   = render "layouts/head"
-  %body{class: "#{user_application_theme}", data: {page: body_data_page, project: "#{@project.path if @project}", group: "#{@group.path if @group}"}}
+  %body{ class: @body_class, data: { page: body_data_page, project: "#{@project.path if @project}", group: "#{@group.path if @group}" } }
     = Gon::Base.render_data
 
-    -# Ideally this would be inside the head, but turbolinks only evaluates page-specific JS in the body.
-    = yield :scripts_body_top
-
     = render "layouts/header/default", title: header_title
     = render 'layouts/page', sidebar: sidebar, nav: nav
 
diff --git a/app/views/layouts/devise.html.haml b/app/views/layouts/devise.html.haml
index afd9958f073..3368a9beb29 100644
--- a/app/views/layouts/devise.html.haml
+++ b/app/views/layouts/devise.html.haml
@@ -1,7 +1,7 @@
 !!! 5
-%html{ lang: "en", class: "devise-layout-html"}
+%html.devise-layout-html
   = render "layouts/head"
-  %body.ui_charcoal.login-page.application.navless{ data: { page: body_data_page }}
+  %body.ui_charcoal.login-page.application.navless{ data: { page: body_data_page } }
     .page-wrap
       = Gon::Base.render_data
       = render "layouts/header/empty"
diff --git a/app/views/layouts/devise_empty.html.haml b/app/views/layouts/devise_empty.html.haml
index 6bd427b02ac..7466423a934 100644
--- a/app/views/layouts/devise_empty.html.haml
+++ b/app/views/layouts/devise_empty.html.haml
@@ -1,5 +1,5 @@
 !!! 5
-%html{ lang: "en"}
+%html{ lang: "en" }
   = render "layouts/head"
   %body.ui_charcoal.login-page.application.navless
     = Gon::Base.render_data
diff --git a/app/views/layouts/devise_mailer.html.haml b/app/views/layouts/devise_mailer.html.haml
index c258eafdd51..e1e1f9ae516 100644
--- a/app/views/layouts/devise_mailer.html.haml
+++ b/app/views/layouts/devise_mailer.html.haml
@@ -1,7 +1,7 @@
 !!! 5
 %html
   %head
-    %meta(content='text/html; charset=UTF-8' http-equiv='Content-Type')
+    %meta{ content: 'text/html; charset=UTF-8', 'http-equiv'=> 'Content-Type' }
     = stylesheet_link_tag 'mailers/devise'
 
   %body
@@ -9,7 +9,7 @@
       %tr
         %td
           %table#header
-            %td{valign: "top"}
+            %td{ valign: "top" }
               = image_tag('mailers/gitlab_header_logo.png', id: 'logo', alt: 'GitLab Wordmark')
 
           %table#body
diff --git a/app/views/layouts/errors.html.haml b/app/views/layouts/errors.html.haml
index 7fbe065df00..6d9ec043590 100644
--- a/app/views/layouts/errors.html.haml
+++ b/app/views/layouts/errors.html.haml
@@ -1,10 +1,59 @@
 !!! 5
-%html{ lang: "en"}
-  = render "layouts/head"
-  %body{class: "#{user_application_theme} application navless"}
-    = Gon::Base.render_data
-    = render "layouts/header/empty"
-    .container.navless-container
-      = render "layouts/flash"
-      .error-page
-        = yield
+%html{ lang: "en" }
+  %head
+    %meta{ :content => "width=device-width, initial-scale=1, maximum-scale=1", :name => "viewport" }
+    %title= yield(:title)
+    :css
+      body {
+        color: #666;
+        text-align: center;
+        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+        margin: auto;
+        font-size: 14px;
+      }
+
+      h1 {
+        font-size: 56px;
+        line-height: 100px;
+        font-weight: normal;
+        color: #456;
+      }
+
+      h2 {
+        font-size: 24px;
+        color: #666;
+        line-height: 1.5em;
+      }
+
+      h3 {
+        color: #456;
+        font-size: 20px;
+        font-weight: normal;
+        line-height: 28px;
+      }
+
+      hr {
+        max-width: 800px;
+        margin: 18px auto;
+        border: 0;
+        border-top: 1px solid #EEE;
+        border-bottom: 1px solid white;
+      }
+
+      img {
+        max-width: 40vw;
+        display: block;
+        margin: 40px auto;
+      }
+
+      .container {
+        margin: auto 20px;
+      }
+
+      ul {
+      margin: auto;
+      text-align: left;
+      display:inline-block;
+      }
+%body
+  = yield
diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml
index 7a9859262f7..23abf6897d4 100644
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -1,18 +1,29 @@
-%header.navbar.navbar-fixed-top.navbar-gitlab{ class: nav_header_class }
-  %div{ class: "container-fluid" }
+%header.navbar.navbar-gitlab{ class: nav_header_class }
+  %a.sr-only.gl-accessibility{ href: "#content-body", tabindex: "1" } Skip to content
+  .container-fluid
     .header-content
-      %button.side-nav-toggle{ type: 'button', "aria-label" => "Toggle global navigation" }
-        %span.sr-only Toggle navigation
-        = icon('bars')
-      %button.navbar-toggle{type: 'button'}
-        %span.sr-only Toggle navigation
-        = icon('ellipsis-v')
+      .dropdown.global-dropdown
+        %button.global-dropdown-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
+          %span.sr-only Toggle navigation
+          = icon('bars')
+        .dropdown-menu-nav.global-dropdown-menu
+          - if current_user
+            = render 'layouts/nav/dashboard'
+          - else
+            = render 'layouts/nav/explore'
+
+      .header-logo
+        = link_to root_path, class: 'home', title: 'Dashboard', id: 'logo' do
+          = brand_header_logo
+
+      .title-container
+        %h1.title{ class: ('initializing' if @has_group_title) }= title
 
       .navbar-collapse.collapse
         %ul.nav.navbar-nav
           %li.hidden-sm.hidden-xs
             = render 'layouts/search' unless current_controller?(:search)
-          %li.visible-sm.visible-xs
+          %li.visible-sm-inline-block.visible-xs-inline-block
             = link_to search_path, title: 'Search', aria: { label: "Search" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
               = icon('search')
           - if current_user
@@ -24,16 +35,30 @@
               %li
                 = link_to admin_root_path, title: 'Admin Area', aria: { label: "Admin Area" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
                   = icon('wrench fw')
-            %li
-              = link_to dashboard_todos_path, title: 'Todos', aria: { label: "Todos" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
-                = icon('bell fw')
-                %span.badge.todos-pending-count{ class: ("hidden" if todos_pending_count == 0) }
-                  = todos_pending_count
+            - if current_user.can_create_project?
+              %li
+                = link_to new_project_path, title: 'New project', aria: { label: "New project" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
+                  = icon('plus fw')
             - if Gitlab::Sherlock.enabled?
               %li
                 = link_to sherlock_transactions_path, title: 'Sherlock Transactions',
                   data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
                   = icon('tachometer fw')
+            %li
+              = link_to assigned_issues_dashboard_path, title: 'Issues', aria: { label: "Issues" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
+                = icon('hashtag fw')
+                %span.badge.issues-count
+                  = number_with_delimiter(cached_assigned_issuables_count(current_user, :issues, :opened))
+            %li
+              = link_to assigned_mrs_dashboard_path, title: 'Merge requests', aria: { label: "Merge requests" }, data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
+                = custom_icon('mr_bold')
+                %span.badge.merge-requests-count
+                  = number_with_delimiter(cached_assigned_issuables_count(current_user, :merge_requests, :opened))
+            %li
+              = link_to dashboard_todos_path, title: 'Todos', aria: { label: "Todos" }, class: 'shortcuts-todos', data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
+                = icon('check-circle fw')
+                %span.badge.todos-count
+                  = todos_count_format(todos_pending_count)
             %li.header-user.dropdown
               = link_to current_user, class: "header-user-dropdown-toggle", data: { toggle: "dropdown" } do
                 = image_tag avatar_icon(current_user, 26), width: 26, height: 26, class: "header-user-avatar"
@@ -43,9 +68,7 @@
                   %li
                     = link_to "Profile", current_user, class: 'profile-link', aria: { label: "Profile" }, data: { user: current_user.username }
                   %li
-                    = link_to "Profile Settings", profile_path, aria: { label: "Profile Settings" }
-                  %li
-                    = link_to "Help", help_path, aria: { label: "Help" }
+                    = link_to "Settings", profile_path, aria: { label: "Settings" }
                   %li.divider
                   %li
                     = link_to "Sign out", destroy_user_session_path, method: :delete, class: "sign-out-link", aria: { label: "Sign out" }
@@ -54,12 +77,9 @@
               %div
                 = link_to "Sign in", new_session_path(:user, redirect_to_referer: 'yes'), class: 'btn btn-sign-in btn-success'
 
-
-      %h1.title= title
-
-      .header-logo
-        = link_to root_path, class: 'home', title: 'Dashboard', id: 'logo' do
-          = brand_header_logo
+      %button.navbar-toggle{ type: 'button' }
+        %span.sr-only Toggle navigation
+        = icon('ellipsis-v')
 
       = yield :header_content
 
diff --git a/app/views/layouts/mailer.html.haml b/app/views/layouts/mailer.html.haml
new file mode 100644
index 00000000000..53268cc22f8
--- /dev/null
+++ b/app/views/layouts/mailer.html.haml
@@ -0,0 +1,72 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+%html{ lang: "en" }
+  %head
+    %meta{ content: "text/html; charset=UTF-8", "http-equiv" => "Content-Type" }/
+    %meta{ content: "width=device-width, initial-scale=1", name: "viewport" }/
+    %meta{ content: "IE=edge", "http-equiv" => "X-UA-Compatible" }/
+    %title= message.subject
+    :css
+      /* CLIENT-SPECIFIC STYLES */
+      body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+      table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
+      img { -ms-interpolation-mode: bicubic; }
+
+      /* iOS BLUE LINKS */
+      a[x-apple-data-detectors] {
+          color: inherit !important;
+          text-decoration: none !important;
+          font-size: inherit !important;
+          font-family: inherit !important;
+          font-weight: inherit !important;
+          line-height: inherit !important;
+      }
+
+      /* ANDROID MARGIN HACK */
+      body { margin:0 !important; }
+      div[style*="margin: 16px 0"] { margin:0 !important; }
+
+      @media only screen and (max-width: 639px) {
+          body, #body {
+              min-width: 320px !important;
+          }
+          table.wrapper {
+              width: 100% !important;
+              min-width: 320px !important;
+          }
+          table.wrapper > tbody > tr > td {
+              border-left: 0 !important;
+              border-right: 0 !important;
+              border-radius: 0 !important;
+              padding-left: 10px !important;
+              padding-right: 10px !important;
+          }
+      }
+  %body{ style: "background-color:#fafafa;margin:0;padding:0;text-align:center;min-width:640px;width:100%;height:100%;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;" }
+    %table#body{ border: "0", cellpadding: "0", cellspacing: "0", style: "background-color:#fafafa;margin:0;padding:0;text-align:center;min-width:640px;width:100%;" }
+      %tbody
+        %tr.line
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:#6b4fbb;height:4px;font-size:4px;line-height:4px;" }  
+        %tr.header
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:25px 0;font-size:13px;line-height:1.6;color:#5c5c5c;" }
+            = header_logo
+        %tr
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;" }
+            %table.wrapper{ border: "0", cellpadding: "0", cellspacing: "0", style: "width:640px;margin:0 auto;border-collapse:separate;border-spacing:0;" }
+              %tbody
+                %tr
+                  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:#ffffff;text-align:left;padding:18px 25px;border:1px solid #ededed;border-radius:3px;overflow:hidden;" }
+                    %table.content{ border: "0", cellpadding: "0", cellspacing: "0", style: "width:100%;border-collapse:separate;border-spacing:0;" }
+                      %tbody
+                        = yield
+
+        %tr.footer
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:25px 0;font-size:13px;line-height:1.6;color:#5c5c5c;" }
+            %img{ alt: "GitLab", height: "33", src: image_url('mailers/gitlab_footer_logo.gif'), style: "display:block;margin:0 auto 1em;", width: "90" }/
+            %div
+              %a{ href: profile_notifications_url, style: "color:#3777b0;text-decoration:none;" } Manage all notifications
+              &middot;
+              %a{ href: help_url, style: "color:#3777b0;text-decoration:none;" } Help
+            %div
+              You're receiving this email because of your account on
+              = succeed "." do
+                %a{ href: root_url, style: "color:#3777b0;text-decoration:none;" }= Gitlab.config.gitlab.host
diff --git a/app/views/layouts/mailer.text.haml b/app/views/layouts/mailer.text.haml
new file mode 100644
index 00000000000..6a9c6ced9cc
--- /dev/null
+++ b/app/views/layouts/mailer.text.haml
@@ -0,0 +1,5 @@
+= yield
+
+You're receiving this email because of your account on #{Gitlab.config.gitlab.host}.
+Manage all notifications: #{profile_notifications_url}
+Help: #{help_url}
diff --git a/app/views/layouts/nav/_admin.html.haml b/app/views/layouts/nav/_admin.html.haml
index ac04f57e217..d068c895fa3 100644
--- a/app/views/layouts/nav/_admin.html.haml
+++ b/app/views/layouts/nav/_admin.html.haml
@@ -1,5 +1,5 @@
+= render 'layouts/nav/admin_settings'
 .scrolling-tabs-container{ class: nav_control_class }
-  = render 'layouts/nav/admin_settings'
   .fade-left
     = icon('angle-left')
   .fade-right
@@ -33,7 +33,7 @@
           Abuse Reports
           %span.badge.count= number_with_delimiter(AbuseReport.count(:all))
 
-    - if askimet_enabled?
+    - if akismet_enabled?
       = nav_link(controller: :spam_logs) do
         = link_to admin_spam_logs_path, title: "Spam Logs" do
           %span
diff --git a/app/views/layouts/nav/_admin_settings.html.haml b/app/views/layouts/nav/_admin_settings.html.haml
index 38e9b80d129..9de0e12a826 100644
--- a/app/views/layouts/nav/_admin_settings.html.haml
+++ b/app/views/layouts/nav/_admin_settings.html.haml
@@ -1,6 +1,6 @@
 .controls
   .dropdown.admin-settings-dropdown
-    %a.dropdown-new.btn.btn-default{href: '#', 'data-toggle' => 'dropdown'}
+    %a.dropdown-new.btn.btn-default{ href: '#', 'data-toggle' => 'dropdown' }
       = icon('cog')
       = icon('caret-down')
     %ul.dropdown-menu.dropdown-menu-align-right
diff --git a/app/views/layouts/nav/_dashboard.html.haml b/app/views/layouts/nav/_dashboard.html.haml
index a0356feef95..15285ee32a3 100644
--- a/app/views/layouts/nav/_dashboard.html.haml
+++ b/app/views/layouts/nav/_dashboard.html.haml
@@ -1,38 +1,39 @@
-.nav-sidebar
-  .sidebar-header Across GitLab
-  %ul.nav
-    = nav_link(path: ['root#index', 'projects#trending', 'projects#starred', 'dashboard/projects#index'], html_options: {class: "#{project_tab_class} home"}) do
-      = link_to dashboard_projects_path, title: 'Projects', class: 'dashboard-shortcuts-projects' do
+%ul
+  = nav_link(path: ['root#index', 'projects#trending', 'projects#starred', 'dashboard/projects#index'], html_options: {class: "#{project_tab_class} home"}) do
+    = link_to dashboard_projects_path, title: 'Projects', class: 'dashboard-shortcuts-projects' do
+      %span
+        Projects
+  = nav_link(path: 'dashboard#activity') do
+    = link_to activity_dashboard_path, class: 'dashboard-shortcuts-activity', title: 'Activity' do
+      %span
+        Activity
+  - if koding_enabled?
+    = nav_link(controller: :koding) do
+      = link_to koding_path, title: 'Koding' do
         %span
-          Projects
-    = nav_link(path: 'dashboard#activity') do
-      = link_to activity_dashboard_path, class: 'dashboard-shortcuts-activity', title: 'Activity' do
-        %span
-          Activity
-    - if koding_enabled?
-      = nav_link(controller: :koding) do
-        = link_to koding_path, title: 'Koding' do
-          %span
-            Koding
-    = nav_link(controller: [:groups, 'groups/milestones', 'groups/group_members']) do
-      = link_to dashboard_groups_path, title: 'Groups' do
-        %span
-          Groups
-    = nav_link(controller: 'dashboard/milestones') do
-      = link_to dashboard_milestones_path, title: 'Milestones' do
-        %span
-          Milestones
-    = nav_link(path: 'dashboard#issues') do
-      = link_to assigned_issues_dashboard_path, title: 'Issues', class: 'dashboard-shortcuts-issues' do
-        %span
-          Issues
-          %span.count= number_with_delimiter(current_user.assigned_issues.opened.count)
-    = nav_link(path: 'dashboard#merge_requests') do
-      = link_to assigned_mrs_dashboard_path, title: 'Merge Requests', class: 'dashboard-shortcuts-merge_requests' do
-        %span
-          Merge Requests
-          %span.count= number_with_delimiter(current_user.assigned_merge_requests.opened.count)
-    = nav_link(controller: 'dashboard/snippets') do
-      = link_to dashboard_snippets_path, title: 'Snippets' do
-        %span
-          Snippets
+          Koding
+  = nav_link(controller: [:groups, 'groups/milestones', 'groups/group_members']) do
+    = link_to dashboard_groups_path, title: 'Groups' do
+      %span
+        Groups
+  = nav_link(controller: 'dashboard/milestones') do
+    = link_to dashboard_milestones_path, title: 'Milestones' do
+      %span
+        Milestones
+  = nav_link(path: 'dashboard#issues') do
+    = link_to assigned_issues_dashboard_path, title: 'Issues', class: 'dashboard-shortcuts-issues' do
+      %span
+        Issues
+      .badge= number_with_delimiter(cached_assigned_issuables_count(current_user, :issues, :opened))
+  = nav_link(path: 'dashboard#merge_requests') do
+    = link_to assigned_mrs_dashboard_path, title: 'Merge Requests', class: 'dashboard-shortcuts-merge_requests' do
+      %span
+        Merge Requests
+      .badge= number_with_delimiter(cached_assigned_issuables_count(current_user, :merge_requests, :opened))
+  = nav_link(controller: 'dashboard/snippets') do
+    = link_to dashboard_snippets_path, title: 'Snippets' do
+      %span
+        Snippets
+  %li.divider
+  %li
+    = link_to "Help", help_path, title: 'About GitLab CE', class: 'about-gitlab'
diff --git a/app/views/layouts/nav/_explore.html.haml b/app/views/layouts/nav/_explore.html.haml
index e5bda7b3a6f..3a1fcd00e9c 100644
--- a/app/views/layouts/nav/_explore.html.haml
+++ b/app/views/layouts/nav/_explore.html.haml
@@ -1,4 +1,4 @@
-%ul.nav.nav-sidebar
+%ul
   = nav_link(path: ['dashboard#show', 'root#show', 'projects#trending', 'projects#starred', 'projects#index'], html_options: {class: 'home'}) do
     = link_to explore_root_path, title: 'Projects' do
       %span
diff --git a/app/views/layouts/nav/_group.html.haml b/app/views/layouts/nav/_group.html.haml
index f7edb47b666..8605380848d 100644
--- a/app/views/layouts/nav/_group.html.haml
+++ b/app/views/layouts/nav/_group.html.haml
@@ -1,27 +1,14 @@
-= render 'layouts/nav/group_settings'
 .scrolling-tabs-container{ class: nav_control_class }
   .fade-left
     = icon('angle-left')
   .fade-right
     = icon('angle-right')
   %ul.nav-links.scrolling-tabs
-    = nav_link(path: 'groups#show', html_options: {class: 'home'}) do
+    = nav_link(path: ['groups#show', 'groups#activity', 'groups#subgroups'], html_options: { class: 'home' }) do
       = link_to group_path(@group), title: 'Home' do
         %span
           Group
-    = nav_link(path: 'groups#activity') do
-      = link_to activity_group_path(@group), title: 'Activity' do
-        %span
-          Activity
-    = nav_link(controller: [:group, :labels]) do
-      = link_to group_labels_path(@group), title: 'Labels' do
-        %span
-          Labels
-    = nav_link(controller: [:group, :milestones]) do
-      = link_to group_milestones_path(@group), title: 'Milestones' do
-        %span
-          Milestones
-    = nav_link(path: 'groups#issues') do
+    = nav_link(path: ['groups#issues', 'labels#index', 'milestones#index']) do
       = link_to issues_group_path(@group), title: 'Issues' do
         %span
           Issues
@@ -31,9 +18,14 @@
       = link_to merge_requests_group_path(@group), title: 'Merge Requests' do
         %span
           Merge Requests
-          - merge_requests = MergeRequestsFinder.new(current_user, group_id: @group.id, state: 'opened').execute
+          - merge_requests = MergeRequestsFinder.new(current_user, group_id: @group.id, state: 'opened', non_archived: true).execute
           %span.badge.count= number_with_delimiter(merge_requests.count)
-    = nav_link(controller: [:group_members]) do
+    = nav_link(path: 'group_members#index') do
       = link_to group_group_members_path(@group), title: 'Members' do
         %span
           Members
+    - if current_user && can?(current_user, :admin_group, @group)
+      = nav_link(path: %w[groups#projects groups#edit]) do
+        = link_to edit_group_path(@group), title: 'Settings' do
+          %span
+            Settings
diff --git a/app/views/layouts/nav/_group_settings.html.haml b/app/views/layouts/nav/_group_settings.html.haml
deleted file mode 100644
index 75275afc0f3..00000000000
--- a/app/views/layouts/nav/_group_settings.html.haml
+++ /dev/null
@@ -1,26 +0,0 @@
-- if current_user
-  - can_admin_group = can?(current_user, :admin_group, @group)
-  - can_edit = can?(current_user, :admin_group, @group)
-  - member = @group.members.find_by(user_id: current_user.id)
-  - can_leave = member && can?(current_user, :destroy_group_member, member)
-
-  - if can_admin_group || can_edit || can_leave
-    .controls
-      .dropdown.group-settings-dropdown
-        %a.dropdown-new.btn.btn-default#group-settings-button{href: '#', 'data-toggle' => 'dropdown'}
-          = icon('cog')
-          = icon('caret-down')
-        %ul.dropdown-menu.dropdown-menu-align-right
-          - if can_admin_group
-            = nav_link(path: 'groups#projects') do
-              = link_to 'Projects', projects_group_path(@group), title: 'Projects'
-          - if can_edit || can_leave
-            %li.divider
-          - if can_edit
-            %li
-              = link_to 'Edit Group', edit_group_path(@group)
-          - if can_leave
-            %li
-              = link_to polymorphic_path([:leave, @group, :members]),
-                data: { confirm: leave_confirmation_message(@group) }, method: :delete, title: 'Leave group' do
-                Leave Group
diff --git a/app/views/layouts/nav/_profile.html.haml b/app/views/layouts/nav/_profile.html.haml
index 6d514f669db..e06301bda14 100644
--- a/app/views/layouts/nav/_profile.html.haml
+++ b/app/views/layouts/nav/_profile.html.haml
@@ -17,6 +17,10 @@
         = link_to applications_profile_path, title: 'Applications' do
           %span
             Applications
+    = nav_link(controller: :chat_names) do
+      = link_to profile_chat_names_path, title: 'Chat' do
+        %span
+          Chat
     = nav_link(controller: :personal_access_tokens) do
       = link_to profile_personal_access_tokens_path, title: 'Access Tokens' do
         %span
diff --git a/app/views/layouts/nav/_project.html.haml b/app/views/layouts/nav/_project.html.haml
index 99a58bbb676..299dace3406 100644
--- a/app/views/layouts/nav/_project.html.haml
+++ b/app/views/layouts/nav/_project.html.haml
@@ -1,83 +1,47 @@
-- if current_user
-  .controls
-    .dropdown.project-settings-dropdown
-      %a.dropdown-new.btn.btn-default#project-settings-button{href: '#', 'data-toggle' => 'dropdown'}
-        = icon('cog')
-        = icon('caret-down')
-      %ul.dropdown-menu.dropdown-menu-align-right
-        - can_edit = can?(current_user, :admin_project, @project)
-        -# We don't use @project.team.find_member because it searches for group members too...
-        - member = @project.members.find_by(user_id: current_user.id)
-        - can_leave = member && can?(current_user, :destroy_project_member, member)
-
-        = render 'layouts/nav/project_settings', can_edit: can_edit
-
-        - if can_edit || can_leave
-          %li.divider
-          - if can_edit
-            %li
-              = link_to edit_project_path(@project) do
-                Edit Project
-          - if can_leave
-            %li
-              = link_to polymorphic_path([:leave, @project, :members]),
-                data: { confirm: leave_confirmation_message(@project) }, method: :delete, title: 'Leave project' do
-                Leave Project
-
+- can_edit = can?(current_user, :admin_project, @project)
 .scrolling-tabs-container{ class: nav_control_class }
   .fade-left
     = icon('angle-left')
   .fade-right
     = icon('angle-right')
   %ul.nav-links.scrolling-tabs
-    = nav_link(path: 'projects#show', html_options: {class: 'home'}) do
+    = nav_link(path: ['projects#show', 'projects#activity', 'cycle_analytics#show'], html_options: { class: 'home' }) do
       = link_to project_path(@project), title: 'Project', class: 'shortcuts-project' do
         %span
           Project
 
-    = nav_link(path: 'projects#activity') do
-      = link_to activity_project_path(@project), title: 'Activity', class: 'shortcuts-project-activity' do
-        %span
-          Activity
-
     - if project_nav_tab? :files
-      = nav_link(controller: %w(tree blob blame edit_tree new_tree find_file commit commits compare repositories tags branches releases network)) do
+      = nav_link(controller: %w(tree blob blame edit_tree new_tree find_file commit commits compare repositories tags branches releases graphs network)) do
         = link_to project_files_path(@project), title: 'Repository',  class: 'shortcuts-tree' do
           %span
             Repository
 
-    - if project_nav_tab? :pipelines
-      = nav_link(controller: [:pipelines, :builds, :environments, :cycle_analytics]) do
-        = link_to project_pipelines_path(@project), title: 'Pipelines', class: 'shortcuts-pipelines' do
-          %span
-            Pipelines
-
     - if project_nav_tab? :container_registry
       = nav_link(controller: %w(container_registry)) do
         = link_to project_container_registry_path(@project), title: 'Container Registry', class: 'shortcuts-container-registry' do
           %span
             Registry
 
-    - if project_nav_tab? :graphs
-      = nav_link(controller: %w(graphs)) do
-        = link_to namespace_project_graph_path(@project.namespace, @project, current_ref), title: 'Graphs',  class: 'shortcuts-graphs' do
-          %span
-            Graphs
-
     - if project_nav_tab? :issues
       = nav_link(controller: [:issues, :labels, :milestones, :boards]) do
         = link_to namespace_project_issues_path(@project.namespace, @project), title: 'Issues', class: 'shortcuts-issues' do
           %span
             Issues
             - if @project.default_issues_tracker?
-              %span.badge.count.issue_counter= number_with_delimiter(@project.issues.visible_to_user(current_user).opened.count)
+              %span.badge.count.issue_counter= number_with_delimiter(IssuesFinder.new(current_user, project_id: @project.id).execute.opened.count)
 
     - if project_nav_tab? :merge_requests
       = nav_link(controller: :merge_requests) do
         = link_to namespace_project_merge_requests_path(@project.namespace, @project), title: 'Merge Requests', class: 'shortcuts-merge_requests' do
           %span
             Merge Requests
-            %span.badge.count.merge_counter= number_with_delimiter(@project.merge_requests.opened.count)
+            %span.badge.count.merge_counter= number_with_delimiter(MergeRequestsFinder.new(current_user, project_id: @project.id).execute.opened.count)
+
+    - if project_nav_tab? :pipelines
+      = nav_link(controller: [:pipelines, :builds, :environments]) do
+        = link_to project_pipelines_path(@project), title: 'Pipelines', class: 'shortcuts-pipelines' do
+          %span
+            Pipelines
 
     - if project_nav_tab? :wiki
       = nav_link(controller: :wikis) do
@@ -91,22 +55,45 @@
           %span
             Snippets
 
-    -# Global shortcut to network page for compatibility
+    - if project_nav_tab? :settings
+      = nav_link(path: %w[projects#edit members#show integrations#show repository#show ci_cd#show pages#show]) do
+        = link_to edit_project_path(@project), title: 'Settings', class: 'shortcuts-tree' do
+          %span
+            Settings
+    - else
+      = nav_link(path: %w[members#show]) do
+        = link_to namespace_project_settings_members_path(@project.namespace, @project), title: 'Settings', class: 'shortcuts-tree' do
+          %span
+            Settings
+
+    -# Shortcut to Project > Activity
+    %li.hidden
+      = link_to activity_project_path(@project), title: 'Activity', class: 'shortcuts-project-activity' do
+        %span
+          Activity
+
+    -# Shortcut to Repository > Graph (formerly, Network)
     - if project_nav_tab? :network
       %li.hidden
         = link_to namespace_project_network_path(@project.namespace, @project, current_ref), title: 'Network', class: 'shortcuts-network' do
-          Network
+          Graph
+
+    -# Shortcut to Repository > Charts (formerly, top-nav item "Graphs")
+    - unless @project.empty_repo?
+      %li.hidden
+        = link_to charts_namespace_project_graph_path(@project.namespace, @project, current_ref), title: 'Charts', class: 'shortcuts-repository-charts' do
+          Charts
 
-    -# Shortcut to create a new issue
+    -# Shortcut to Issues > New Issue
     %li.hidden
       = link_to new_namespace_project_issue_path(@project.namespace, @project), class: 'shortcuts-new-issue' do
         Create a new issue
 
-    -# Shortcut to builds page
+    -# Shortcut to Pipelines > Jobs
     - if project_nav_tab? :builds
       %li.hidden
-        = link_to project_builds_path(@project), title: 'Builds', class: 'shortcuts-builds' do
-          Builds
+        = link_to project_builds_path(@project), title: 'Jobs', class: 'shortcuts-builds' do
+          Jobs
 
     -# Shortcut to commits page
     - if project_nav_tab? :commits
diff --git a/app/views/layouts/nav/_project_settings.html.haml b/app/views/layouts/nav/_project_settings.html.haml
deleted file mode 100644
index 613b8b7d301..00000000000
--- a/app/views/layouts/nav/_project_settings.html.haml
+++ /dev/null
@@ -1,45 +0,0 @@
-- if project_nav_tab? :team
-  = nav_link(controller: [:project_members, :teams]) do
-    = link_to namespace_project_project_members_path(@project.namespace, @project), title: 'Members', class: 'team-tab tab' do
-      %span
-        Members
-- if can_edit
-  - if @project.allowed_to_share_with_group?
-    = nav_link(controller: :group_links) do
-      = link_to namespace_project_group_links_path(@project.namespace, @project), title: "Groups" do
-        %span
-          Groups
-  = nav_link(controller: :deploy_keys) do
-    = link_to namespace_project_deploy_keys_path(@project.namespace, @project), title: 'Deploy Keys' do
-      %span
-        Deploy Keys
-  = nav_link(controller: :hooks) do
-    = link_to namespace_project_hooks_path(@project.namespace, @project), title: 'Webhooks' do
-      %span
-        Webhooks
-  = nav_link(controller: :services) do
-    = link_to namespace_project_services_path(@project.namespace, @project), title: 'Services' do
-      %span
-        Services
-  = nav_link(controller: :protected_branches) do
-    = link_to namespace_project_protected_branches_path(@project.namespace, @project), title: 'Protected Branches' do
-      %span
-        Protected Branches
-
-  - if @project.feature_available?(:builds, current_user)
-    = nav_link(controller: :runners) do
-      = link_to namespace_project_runners_path(@project.namespace, @project), title: 'Runners' do
-        %span
-          Runners
-    = nav_link(controller: :variables) do
-      = link_to namespace_project_variables_path(@project.namespace, @project), title: 'Variables' do
-        %span
-          Variables
-    = nav_link(controller: :triggers) do
-      = link_to namespace_project_triggers_path(@project.namespace, @project), title: 'Triggers' do
-        %span
-          Triggers
-    = nav_link(controller: :pipelines_settings) do
-      = link_to namespace_project_pipelines_settings_path(@project.namespace, @project), title: 'CI/CD Pipelines' do
-        %span
-          CI/CD Pipelines
diff --git a/app/views/layouts/notify.html.haml b/app/views/layouts/notify.html.haml
index 1ec4c3f0c67..76268c1b705 100644
--- a/app/views/layouts/notify.html.haml
+++ b/app/views/layouts/notify.html.haml
@@ -1,14 +1,14 @@
-%html{lang: "en"}
+%html{ lang: "en" }
   %head
-    %meta{content: "text/html; charset=utf-8", "http-equiv" => "Content-Type"}
+    %meta{ content: "text/html; charset=utf-8", "http-equiv" => "Content-Type" }
     %title
       GitLab
     = stylesheet_link_tag 'notify'
     = yield :head
   %body
-    %div.content
+    .content
       = yield
-    %div.footer{style: "margin-top: 10px;"}
+    .footer{ style: "margin-top: 10px;" }
       %p
         &mdash;
         %br
diff --git a/app/views/layouts/profile.html.haml b/app/views/layouts/profile.html.haml
index b77d3402a2e..0ee8a57dbd4 100644
--- a/app/views/layouts/profile.html.haml
+++ b/app/views/layouts/profile.html.haml
@@ -1,5 +1,5 @@
-- page_title    "Profile Settings"
-- header_title  "Profile Settings", profile_path unless header_title
+- page_title    "User Settings"
+- header_title  "User Settings", profile_path unless header_title
 - sidebar       "dashboard"
 - nav           "profile"
 
diff --git a/app/views/layouts/project.html.haml b/app/views/layouts/project.html.haml
index 277eb71ea73..f5e7ea7710d 100644
--- a/app/views/layouts/project.html.haml
+++ b/app/views/layouts/project.html.haml
@@ -3,7 +3,7 @@
 - header_title     project_title(@project) unless header_title
 - nav              "project"
 
-- content_for :scripts_body_top do
+- content_for :project_javascripts do
   - project = @target_project || @project
   - if @project_wiki && @page
     - preview_markdown_path = namespace_project_wiki_preview_markdown_path(project.namespace, project, @page.slug)
diff --git a/app/views/notify/_note_message.text.erb b/app/views/notify/_note_message.text.erb
new file mode 100644
index 00000000000..f82cbc9a3fc
--- /dev/null
+++ b/app/views/notify/_note_message.text.erb
@@ -0,0 +1,5 @@
+<% if current_application_settings.email_author_in_body %>
+  <%= @note.author_name %> wrote:
+<% end -%>
+
+<%= @note.note %>
diff --git a/app/views/notify/_note_mr_or_commit_email.html.haml b/app/views/notify/_note_mr_or_commit_email.html.haml
new file mode 100644
index 00000000000..edf8dfe7e9e
--- /dev/null
+++ b/app/views/notify/_note_mr_or_commit_email.html.haml
@@ -0,0 +1,18 @@
+= content_for :head do
+  = stylesheet_link_tag 'mailers/highlighted_diff_email'
+
+New comment
+
+- if @discussion && @discussion.diff_file
+  on
+  = link_to @note.diff_file.file_path, @target_url, class: 'details'
+  \:
+  %table
+    = render partial: "projects/diffs/line",
+      collection: @discussion.truncated_diff_lines,
+      as: :line,
+      locals: { diff_file: @note.diff_file,
+        plain: true,
+        email: true }
+
+= render 'note_message'
diff --git a/app/views/notify/_note_mr_or_commit_email.text.erb b/app/views/notify/_note_mr_or_commit_email.text.erb
new file mode 100644
index 00000000000..b4fcdf6b1e9
--- /dev/null
+++ b/app/views/notify/_note_mr_or_commit_email.text.erb
@@ -0,0 +1,8 @@
+<% if @discussion && @discussion.diff_file -%>
+ on <%= @note.diff_file.file_path -%>
+<% end -%>:
+
+<%= url %>
+
+<%= render 'simple_diff' if @discussion -%>
+<%= render 'note_message' %>
diff --git a/app/views/notify/_reassigned_issuable_email.html.haml b/app/views/notify/_reassigned_issuable_email.html.haml
index 56d81b2ed2e..fd35713f79c 100644
--- a/app/views/notify/_reassigned_issuable_email.html.haml
+++ b/app/views/notify/_reassigned_issuable_email.html.haml
@@ -2,9 +2,9 @@
   Assignee changed
   - if @previous_assignee
     from
-    %strong #{@previous_assignee.name}
+    %strong= @previous_assignee.name
   to
   - if issuable.assignee_id
-    %strong #{issuable.assignee_name}
+    %strong= issuable.assignee_name
   - else
     %strong Unassigned
diff --git a/app/views/notify/_simple_diff.text.erb b/app/views/notify/_simple_diff.text.erb
new file mode 100644
index 00000000000..c28d1cc34d3
--- /dev/null
+++ b/app/views/notify/_simple_diff.text.erb
@@ -0,0 +1,3 @@
+<% @discussion.truncated_diff_lines(highlight: false).each do |line| %>
+> <%= line.text %>
+<% end %>
diff --git a/app/views/notify/build_fail_email.html.haml b/app/views/notify/build_fail_email.html.haml
deleted file mode 100644
index 4bf7c1f4d64..00000000000
--- a/app/views/notify/build_fail_email.html.haml
+++ /dev/null
@@ -1,24 +0,0 @@
-- content_for :header do
-  %h1{style: "background: #c40834; color: #FFF; font: normal 20px Helvetica, Arial, sans-serif; margin: 0; padding: 5px 10px; line-height: 32px; font-size: 16px;"}
-    GitLab (build failed)
-
-%h3
-  Project:
-  = link_to namespace_project_url(@project.namespace, @project) do
-    = @project.name
-
-%p
-  Commit: #{link_to @build.short_sha, namespace_project_commit_url(@build.project.namespace, @build.project, @build.sha)}
-%p
-  Author: #{@build.pipeline.git_author_name}
-%p
-  Branch: #{@build.ref}
-%p
-  Stage: #{@build.stage}
-%p
-  Job: #{@build.name}
-%p
-  Message: #{@build.pipeline.git_commit_message}
-
-%p
-  Build details: #{link_to "Build #{@build.id}", namespace_project_build_url(@build.project.namespace, @build.project, @build)}
diff --git a/app/views/notify/build_fail_email.text.erb b/app/views/notify/build_fail_email.text.erb
deleted file mode 100644
index 9d497983498..00000000000
--- a/app/views/notify/build_fail_email.text.erb
+++ /dev/null
@@ -1,11 +0,0 @@
-Build failed for <%= @project.name %>
-
-Status:   <%= @build.status %>
-Commit:   <%= @build.pipeline.short_sha %>
-Author:   <%= @build.pipeline.git_author_name %>
-Branch:   <%= @build.ref %>
-Stage:    <%= @build.stage %>
-Job:      <%= @build.name %>
-Message:  <%= @build.pipeline.git_commit_message %>
-
-Url:      <%= namespace_project_build_url(@build.project.namespace, @build.project, @build) %>
diff --git a/app/views/notify/build_success_email.html.haml b/app/views/notify/build_success_email.html.haml
deleted file mode 100644
index 252a5b7152c..00000000000
--- a/app/views/notify/build_success_email.html.haml
+++ /dev/null
@@ -1,24 +0,0 @@
-- content_for :header do
-  %h1{style: "background: #38CF5B; color: #FFF; font: normal 20px Helvetica, Arial, sans-serif; margin: 0; padding: 5px 10px; line-height: 32px; font-size: 16px;"}
-    GitLab (build successful)
-
-%h3
-  Project:
-  = link_to namespace_project_url(@project.namespace, @project) do
-    = @project.name
-
-%p
-  Commit: #{link_to @build.short_sha, namespace_project_commit_url(@build.project.namespace, @build.project, @build.sha)}
-%p
-  Author: #{@build.pipeline.git_author_name}
-%p
-  Branch: #{@build.ref}
-%p
-  Stage: #{@build.stage}
-%p
-  Job: #{@build.name}
-%p
-  Message: #{@build.pipeline.git_commit_message}
-
-%p
-  Build details: #{link_to "Build #{@build.id}", namespace_project_build_url(@build.project.namespace, @build.project, @build)}
diff --git a/app/views/notify/build_success_email.text.erb b/app/views/notify/build_success_email.text.erb
deleted file mode 100644
index c5ed4f84861..00000000000
--- a/app/views/notify/build_success_email.text.erb
+++ /dev/null
@@ -1,11 +0,0 @@
-Build successful for <%= @project.name %>
-
-Status:   <%= @build.status %>
-Commit:   <%= @build.pipeline.short_sha %>
-Author:   <%= @build.pipeline.git_author_name %>
-Branch:   <%= @build.ref %>
-Stage:    <%= @build.stage %>
-Job:      <%= @build.name %>
-Message:  <%= @build.pipeline.git_commit_message %>
-
-Url:      <%= namespace_project_build_url(@build.project.namespace, @build.project, @build) %>
diff --git a/app/views/notify/closed_issue_email.html.haml b/app/views/notify/closed_issue_email.html.haml
index 56c18cd83cd..b7284dd819b 100644
--- a/app/views/notify/closed_issue_email.html.haml
+++ b/app/views/notify/closed_issue_email.html.haml
@@ -1,2 +1,2 @@
 %p
-  = "Issue was closed by #{@updated_by.name}"
+  Issue was closed by #{@updated_by.name}
diff --git a/app/views/notify/closed_issue_email.text.haml b/app/views/notify/closed_issue_email.text.haml
index ac703b31edd..bc12e38675f 100644
--- a/app/views/notify/closed_issue_email.text.haml
+++ b/app/views/notify/closed_issue_email.text.haml
@@ -1,3 +1,3 @@
-= "Issue was closed by #{@updated_by.name}"
+Issue was closed by #{@updated_by.name}
 
 Issue ##{@issue.iid}: #{namespace_project_issue_url(@issue.project.namespace, @issue.project, @issue)}
diff --git a/app/views/notify/closed_merge_request_email.html.haml b/app/views/notify/closed_merge_request_email.html.haml
index 81c7c88fc96..44e018304e1 100644
--- a/app/views/notify/closed_merge_request_email.html.haml
+++ b/app/views/notify/closed_merge_request_email.html.haml
@@ -1,2 +1,2 @@
 %p
-  = "Merge Request #{@merge_request.to_reference} was closed by #{@updated_by.name}"
+  Merge Request #{@merge_request.to_reference} was closed by #{@updated_by.name}
diff --git a/app/views/notify/closed_merge_request_email.text.haml b/app/views/notify/closed_merge_request_email.text.haml
index b435067d5a6..d0c96b83976 100644
--- a/app/views/notify/closed_merge_request_email.text.haml
+++ b/app/views/notify/closed_merge_request_email.text.haml
@@ -1,4 +1,4 @@
-= "Merge Request #{@merge_request.to_reference} was closed by #{@updated_by.name}"
+Merge Request #{@merge_request.to_reference} was closed by #{@updated_by.name}
 
 Merge Request url: #{namespace_project_merge_request_url(@merge_request.target_project.namespace, @merge_request.target_project, @merge_request)}
 
diff --git a/app/views/notify/issue_status_changed_email.html.haml b/app/views/notify/issue_status_changed_email.html.haml
index 482c884a9db..b6051b11cea 100644
--- a/app/views/notify/issue_status_changed_email.html.haml
+++ b/app/views/notify/issue_status_changed_email.html.haml
@@ -1,2 +1,2 @@
 %p
-  = "Issue was #{@issue_status} by #{@updated_by.name}"
+  Issue was #{@issue_status} by #{@updated_by.name}
diff --git a/app/views/notify/links/ci/builds/_build.html.haml b/app/views/notify/links/ci/builds/_build.html.haml
new file mode 100644
index 00000000000..d35b3839171
--- /dev/null
+++ b/app/views/notify/links/ci/builds/_build.html.haml
@@ -0,0 +1,2 @@
+%a{ href: pipeline_build_url(pipeline, build), style: "color:#3777b0;text-decoration:none;" }
+  = build.name
diff --git a/app/views/notify/links/ci/builds/_build.text.erb b/app/views/notify/links/ci/builds/_build.text.erb
new file mode 100644
index 00000000000..741c7f344c8
--- /dev/null
+++ b/app/views/notify/links/ci/builds/_build.text.erb
@@ -0,0 +1 @@
+Job #<%= build.id %> ( <%= pipeline_build_url(pipeline, build) %> )
diff --git a/app/views/notify/links/generic_commit_statuses/_generic_commit_status.html.haml b/app/views/notify/links/generic_commit_statuses/_generic_commit_status.html.haml
new file mode 100644
index 00000000000..b6563b185b3
--- /dev/null
+++ b/app/views/notify/links/generic_commit_statuses/_generic_commit_status.html.haml
@@ -0,0 +1 @@
+= build.name
diff --git a/app/views/notify/links/generic_commit_statuses/_generic_commit_status.text.erb b/app/views/notify/links/generic_commit_statuses/_generic_commit_status.text.erb
new file mode 100644
index 00000000000..af8924bad57
--- /dev/null
+++ b/app/views/notify/links/generic_commit_statuses/_generic_commit_status.text.erb
@@ -0,0 +1 @@
+Job #<%= build.id %>
diff --git a/app/views/notify/merge_request_status_email.html.haml b/app/views/notify/merge_request_status_email.html.haml
index 41a320d6bd8..b487e26b122 100644
--- a/app/views/notify/merge_request_status_email.html.haml
+++ b/app/views/notify/merge_request_status_email.html.haml
@@ -1,2 +1,2 @@
 %p
-  = "Merge Request #{@merge_request.to_reference} was #{@mr_status} by #{@updated_by.name}"
+  Merge Request #{@merge_request.to_reference} was #{@mr_status} by #{@updated_by.name}
diff --git a/app/views/notify/merge_request_status_email.text.haml b/app/views/notify/merge_request_status_email.text.haml
index 7a5074a1dc3..4c9719ba732 100644
--- a/app/views/notify/merge_request_status_email.text.haml
+++ b/app/views/notify/merge_request_status_email.text.haml
@@ -1,4 +1,4 @@
-= "Merge Request #{@merge_request.to_reference} was #{@mr_status} by #{@updated_by.name}"
+Merge Request #{@merge_request.to_reference} was #{@mr_status} by #{@updated_by.name}
 
 Merge Request url: #{namespace_project_merge_request_url(@merge_request.target_project.namespace, @merge_request.target_project, @merge_request)}
 
diff --git a/app/views/notify/merged_merge_request_email.html.haml b/app/views/notify/merged_merge_request_email.html.haml
index fbe506d4f4d..0fe54e73313 100644
--- a/app/views/notify/merged_merge_request_email.html.haml
+++ b/app/views/notify/merged_merge_request_email.html.haml
@@ -1,2 +1,2 @@
 %p
-  = "Merge Request #{@merge_request.to_reference} was merged"
+  Merge Request #{@merge_request.to_reference} was merged
diff --git a/app/views/notify/merged_merge_request_email.text.haml b/app/views/notify/merged_merge_request_email.text.haml
index bfbae01094f..46c1c9dee0b 100644
--- a/app/views/notify/merged_merge_request_email.text.haml
+++ b/app/views/notify/merged_merge_request_email.text.haml
@@ -1,4 +1,4 @@
-= "Merge Request #{@merge_request.to_reference} was merged"
+Merge Request #{@merge_request.to_reference} was merged
 
 Merge Request url: #{namespace_project_merge_request_url(@merge_request.target_project.namespace, @merge_request.target_project, @merge_request)}
 
diff --git a/app/views/notify/new_issue_email.html.haml b/app/views/notify/new_issue_email.html.haml
index f42b150c0d6..d1855568215 100644
--- a/app/views/notify/new_issue_email.html.haml
+++ b/app/views/notify/new_issue_email.html.haml
@@ -1,7 +1,7 @@
 - if current_application_settings.email_author_in_body
   %div
     #{link_to @issue.author_name, user_url(@issue.author)} wrote:
--if @issue.description
+- if @issue.description
   = markdown(@issue.description, pipeline: :email, author: @issue.author)
 
 - if @issue.assignee_id.present?
diff --git a/app/views/notify/new_mention_in_issue_email.html.haml b/app/views/notify/new_mention_in_issue_email.html.haml
index 4f3d36bd9ca..02f21baa368 100644
--- a/app/views/notify/new_mention_in_issue_email.html.haml
+++ b/app/views/notify/new_mention_in_issue_email.html.haml
@@ -4,7 +4,7 @@
 - if current_application_settings.email_author_in_body
   %div
     #{link_to @issue.author_name, user_url(@issue.author)} wrote:
--if @issue.description
+- if @issue.description
   = markdown(@issue.description, pipeline: :email, author: @issue.author)
 
 - if @issue.assignee_id.present?
diff --git a/app/views/notify/new_mention_in_merge_request_email.html.haml b/app/views/notify/new_mention_in_merge_request_email.html.haml
index 32aedb9e6b9..cbd434be02a 100644
--- a/app/views/notify/new_mention_in_merge_request_email.html.haml
+++ b/app/views/notify/new_mention_in_merge_request_email.html.haml
@@ -11,5 +11,5 @@
   %p
     Assignee: #{@merge_request.author_name} &rarr; #{@merge_request.assignee_name}
 
--if @merge_request.description
+- if @merge_request.description
   = markdown(@merge_request.description, pipeline: :email, author: @merge_request.author)
diff --git a/app/views/notify/new_merge_request_email.html.haml b/app/views/notify/new_merge_request_email.html.haml
index 158404de396..8890b300f7d 100644
--- a/app/views/notify/new_merge_request_email.html.haml
+++ b/app/views/notify/new_merge_request_email.html.haml
@@ -8,5 +8,5 @@
   %p
     Assignee: #{@merge_request.author_name} &rarr; #{@merge_request.assignee_name}
 
--if @merge_request.description
+- if @merge_request.description
   = markdown(@merge_request.description, pipeline: :email, author: @merge_request.author)
diff --git a/app/views/notify/note_commit_email.html.haml b/app/views/notify/note_commit_email.html.haml
index 1d961e4424c..0a650e3b2ca 100644
--- a/app/views/notify/note_commit_email.html.haml
+++ b/app/views/notify/note_commit_email.html.haml
@@ -1,2 +1,2 @@
-= render 'note_message'
-
+%p.details
+  = render 'note_mr_or_commit_email'
diff --git a/app/views/notify/note_commit_email.text.erb b/app/views/notify/note_commit_email.text.erb
index aaeaf5fdf73..6aa085a172e 100644
--- a/app/views/notify/note_commit_email.text.erb
+++ b/app/views/notify/note_commit_email.text.erb
@@ -1,9 +1,2 @@
-New comment for Commit <%= @commit.short_id %>
-
-<%= url_for(namespace_project_commit_url(@note.project.namespace, @note.project, id: @commit.id, anchor: "note_#{@note.id}")) %>
-
-
-Author: <%= @note.author_name %>
-
-<%= @note.note %>
-
+New comment for Commit <%= @commit.short_id -%>
+<%= render partial: 'note_mr_or_commit_email', locals: { url: @target_url } %>
diff --git a/app/views/notify/note_merge_request_email.html.haml b/app/views/notify/note_merge_request_email.html.haml
index ea7e3d199fd..0a650e3b2ca 100644
--- a/app/views/notify/note_merge_request_email.html.haml
+++ b/app/views/notify/note_merge_request_email.html.haml
@@ -1,7 +1,2 @@
-- if @note.diff_note? && @note.diff_file
-  %p.details
-    New comment on diff for
-    = link_to @note.diff_file.file_path, @target_url
-    \:
-
-= render 'note_message'
+%p.details
+  = render 'note_mr_or_commit_email'
diff --git a/app/views/notify/note_merge_request_email.text.erb b/app/views/notify/note_merge_request_email.text.erb
index 8cdab63829e..2ce64c494cf 100644
--- a/app/views/notify/note_merge_request_email.text.erb
+++ b/app/views/notify/note_merge_request_email.text.erb
@@ -1,9 +1,2 @@
-New comment for Merge Request <%= @merge_request.to_reference %>
-
-<%= url_for(namespace_project_merge_request_url(@merge_request.target_project.namespace, @merge_request.target_project, @merge_request, anchor: "note_#{@note.id}")) %>
-
-
-<%= @note.author_name %>
-
-<%= @note.note %>
-
+New comment for Merge Request <%= @merge_request.to_reference -%>
+<%= render partial: 'note_mr_or_commit_email', locals: { url: @target_url }%>
diff --git a/app/views/notify/note_personal_snippet_email.html.haml b/app/views/notify/note_personal_snippet_email.html.haml
new file mode 100644
index 00000000000..2fa2f784661
--- /dev/null
+++ b/app/views/notify/note_personal_snippet_email.html.haml
@@ -0,0 +1 @@
+= render 'note_message'
diff --git a/app/views/notify/note_personal_snippet_email.text.erb b/app/views/notify/note_personal_snippet_email.text.erb
new file mode 100644
index 00000000000..b2a8809a23b
--- /dev/null
+++ b/app/views/notify/note_personal_snippet_email.text.erb
@@ -0,0 +1,8 @@
+New comment for Snippet <%= @snippet.id %>
+
+<%= url_for(snippet_url(@snippet, anchor: "note_#{@note.id}")) %>
+
+
+Author: <%= @note.author_name %>
+
+<%= @note.note %>
diff --git a/app/views/notify/pipeline_failed_email.html.haml b/app/views/notify/pipeline_failed_email.html.haml
index 0995826775a..85a1aea3a61 100644
--- a/app/views/notify/pipeline_failed_email.html.haml
+++ b/app/views/notify/pipeline_failed_email.html.haml
@@ -1,177 +1,109 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-%html{lang: "en"}
-  %head
-    %meta{content: "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
-    %meta{content: "width=device-width, initial-scale=1", name: "viewport"}/
-    %meta{content: "IE=edge", "http-equiv" => "X-UA-Compatible"}/
-    %title= message.subject
-    :css
-      /* CLIENT-SPECIFIC STYLES */
-      body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
-      table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
-      img { -ms-interpolation-mode: bicubic; }
-
-      /* iOS BLUE LINKS */
-      a[x-apple-data-detectors] {
-          color: inherit !important;
-          text-decoration: none !important;
-          font-size: inherit !important;
-          font-family: inherit !important;
-          font-weight: inherit !important;
-          line-height: inherit !important;
-      }
-
-      /* ANDROID MARGIN HACK */
-      body { margin:0 !important; }
-      div[style*="margin: 16px 0"] { margin:0 !important; }
-
-      @media only screen and (max-width: 639px) {
-          body, #body {
-              min-width: 320px !important;
-          }
-          table.wrapper {
-              width: 100% !important;
-              min-width: 320px !important;
-          }
-          table.wrapper > tbody > tr > td {
-              border-left: 0 !important;
-              border-right: 0 !important;
-              border-radius: 0 !important;
-              padding-left: 10px !important;
-              padding-right: 10px !important;
-          }
-      }
-  %body{style: "background-color:#fafafa;margin:0;padding:0;text-align:center;min-width:640px;width:100%;height:100%;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;"}
-    %table#body{border: "0", cellpadding: "0", cellspacing: "0", style: "background-color:#fafafa;margin:0;padding:0;text-align:center;min-width:640px;width:100%;"}
+%tr.alert
+  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:10px;border-radius:3px;font-size:14px;line-height:1.3;text-align:center;overflow:hidden;background-color:#d22f57;color:#ffffff;" }
+    %table.img{ border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;margin:0 auto;" }
       %tbody
-        %tr.line
-          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:#6b4fbb;height:4px;font-size:4px;line-height:4px;"}  
-        %tr.header
-          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:25px 0;font-size:13px;line-height:1.6;color:#5c5c5c;"}
-            %img{alt: "GitLab", height: "50", src: image_url('mailers/ci_pipeline_notif_v1/gitlab-logo.gif'), width: "55"}/
         %tr
-          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;"}
-            %table.wrapper{border: "0", cellpadding: "0", cellspacing: "0", style: "width:640px;margin:0 auto;border-collapse:separate;border-spacing:0;"}
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;vertical-align:middle;color:#ffffff;text-align:center;padding-right:5px;" }
+            %img{ alt: "x", height: "13", src: image_url('mailers/ci_pipeline_notif_v1/icon-x-red-inverted.gif'), style: "display:block;", width: "13" }/
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;vertical-align:middle;color:#ffffff;text-align:center;" }
+            Your pipeline has failed.
+%tr.spacer
+  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;height:18px;font-size:18px;line-height:18px;" }
+    &nbsp;
+%tr.section
+  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:0 15px;border:1px solid #ededed;border-radius:3px;overflow:hidden;" }
+    %table.info{ border: "0", cellpadding: "0", cellspacing: "0", style: "width:100%;" }
+      %tbody
+        %tr
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;" } Project
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;color:#333333;font-weight:400;width:75%;padding-left:5px;" }
+            - namespace_name = @project.group ? @project.group.name : @project.namespace.owner.name
+            - namespace_url = @project.group ? group_url(@project.group) : user_url(@project.namespace.owner)
+            %a.muted{ href: namespace_url, style: "color:#333333;text-decoration:none;" }
+              = namespace_name
+            \/
+            %a.muted{ href: project_url(@project), style: "color:#333333;text-decoration:none;" }
+              = @project.name
+        %tr
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;border-top:1px solid #ededed;" } Branch
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;color:#333333;font-weight:400;width:75%;padding-left:5px;border-top:1px solid #ededed;" }
+            %table.img{ border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;" }
+              %tbody
+                %tr
+                  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;padding-right:5px;" }
+                    %img{ height: "13", src: image_url('mailers/ci_pipeline_notif_v1/icon-branch-gray.gif'), style: "display:block;", width: "13", alt: "Branch icon" }/
+                  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;" }
+                    %a.muted{ href: commits_url(@pipeline), style: "color:#333333;text-decoration:none;" }
+                      = @pipeline.ref
+        %tr
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;border-top:1px solid #ededed;" } Commit
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;color:#333333;font-weight:400;width:75%;padding-left:5px;border-top:1px solid #ededed;" }
+            %table.img{ border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;" }
               %tbody
                 %tr
-                  %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:#ffffff;text-align:left;padding:18px 25px;border:1px solid #ededed;border-radius:3px;overflow:hidden;"}
-                    %table.content{border: "0", cellpadding: "0", cellspacing: "0", style: "width:100%;border-collapse:separate;border-spacing:0;"}
-                      %tbody
-                        %tr.alert
-                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:10px;border-radius:3px;font-size:14px;line-height:1.3;text-align:center;overflow:hidden;background-color:#d22f57;color:#ffffff;"}
-                            %table.img{border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;margin:0 auto;"}
-                              %tbody
-                                %tr
-                                  %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;vertical-align:middle;color:#ffffff;text-align:center;padding-right:5px;"}
-                                    %img{alt: "x", height: "13", src: image_url('mailers/ci_pipeline_notif_v1/icon-x-red-inverted.gif'), style: "display:block;", width: "13"}/
-                                  %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;vertical-align:middle;color:#ffffff;text-align:center;"}
-                                    Your pipeline has failed.
-                        %tr.spacer
-                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;height:18px;font-size:18px;line-height:18px;"}
-                            &nbsp;
-                        %tr.section
-                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:0 15px;border:1px solid #ededed;border-radius:3px;overflow:hidden;"}
-                            %table.info{border: "0", cellpadding: "0", cellspacing: "0", style: "width:100%;"}
-                              %tbody
-                                %tr
-                                  %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;"} Project
-                                  %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;color:#333333;font-weight:400;width:75%;padding-left:5px;"}
-                                    - namespace_name = @project.group ? @project.group.name : @project.namespace.owner.name
-                                    - namespace_url = @project.group ? group_url(@project.group) : user_url(@project.namespace.owner)
-                                    %a.muted{href: namespace_url, style: "color:#333333;text-decoration:none;"}
-                                      = namespace_name
-                                    \/
-                                    %a.muted{href: project_url(@project), style: "color:#333333;text-decoration:none;"}
-                                      = @project.name
-                                %tr
-                                  %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;border-top:1px solid #ededed;"} Branch
-                                  %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;color:#333333;font-weight:400;width:75%;padding-left:5px;border-top:1px solid #ededed;"}
-                                    %table.img{border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;"}
-                                      %tbody
-                                        %tr
-                                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;padding-right:5px;"}
-                                            %img{height: "13", src: image_url('mailers/ci_pipeline_notif_v1/icon-branch-gray.gif'), style: "display:block;", width: "13"}/
-                                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;"}
-                                            %a.muted{href: commits_url(@pipeline), style: "color:#333333;text-decoration:none;"}
-                                              = @pipeline.ref
-                                %tr
-                                  %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;border-top:1px solid #ededed;"} Commit
-                                  %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;color:#333333;font-weight:400;width:75%;padding-left:5px;border-top:1px solid #ededed;"}
-                                    %table.img{border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;"}
-                                      %tbody
-                                        %tr
-                                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;padding-right:5px;"}
-                                            %img{height: "13", src: image_url('mailers/ci_pipeline_notif_v1/icon-commit-gray.gif'), style: "display:block;", width: "13"}/
-                                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;"}
-                                            %a{href: commit_url(@pipeline), style: "color:#3084bb;text-decoration:none;"}
-                                              = @pipeline.short_sha
-                                            - if @merge_request
-                                              in
-                                              %a{href: merge_request_url(@merge_request), style: "color:#3084bb;text-decoration:none;"}
-                                                = @merge_request.to_reference
-                                    .commit{style: "color:#5c5c5c;font-weight:300;"}
-                                      = @pipeline.git_commit_message.truncate(50)
-                                %tr
-                                  %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;border-top:1px solid #ededed;"} Author
-                                  %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;color:#333333;font-weight:400;width:75%;padding-left:5px;border-top:1px solid #ededed;"}
-                                    %table.img{border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;"}
-                                      %tbody
-                                        %tr
-                                          - commit = @pipeline.commit
-                                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;padding-right:5px;"}
-                                            %img.avatar{height: "24", src: avatar_icon(commit.author || commit.author_email, 24), style: "display:block;border-radius:12px;margin:-2px 0;", width: "24"}/
-                                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;"}
-                                            - if commit.author
-                                              %a.muted{href: user_url(commit.author), style: "color:#333333;text-decoration:none;"}
-                                                = commit.author.name
-                                            - else
-                                              %span
-                                                = commit.author_name
-                        %tr.spacer
-                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;height:18px;font-size:18px;line-height:18px;"}
-                            &nbsp;
-                        - failed = @pipeline.statuses.latest.failed
-                        %tr.pre-section
-                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#333333;font-size:15px;font-weight:400;line-height:1.4;padding:15px 0;"}
-                            Pipeline
-                            %a{href: pipeline_url(@pipeline), style: "color:#3084bb;text-decoration:none;"}
-                              = "\##{@pipeline.id}"
-                            had
-                            = failed.size
-                            failed
-                            = "#{'build'.pluralize(failed.size)}."
-                        %tr.warning
-                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;border:1px solid #ededed;border-bottom:0;border-radius:3px 3px 0 0;overflow:hidden;background-color:#fdf4f6;color:#d22852;font-size:14px;line-height:1.4;text-align:center;padding:8px 15px;"}
-                            Logs may contain sensitive data. Please consider before forwarding this email.
-                        %tr.section
-                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:0 15px;border:1px solid #ededed;border-radius:3px;overflow:hidden;border-top:0;border-radius:0 0 3px 3px;"}
-                            %table.builds{border: "0", cellpadding: "0", cellspacing: "0", style: "width:100%;border-collapse:collapse;"}
-                              %tbody
-                                - failed.each do |build|
-                                  %tr.build-state
-                                    %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:20px 0;color:#8c8c8c;font-weight:500;font-size:15px;"}
-                                      %table.img{border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;"}
-                                        %tbody
-                                          %tr
-                                            %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#8c8c8c;font-weight:500;font-size:15px;vertical-align:middle;padding-right:5px;"}
-                                              %img{alt: "x", height: "10", src: image_url('mailers/ci_pipeline_notif_v1/icon-x-red.gif'), style: "display:block;", width: "10"}/
-                                            %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#8c8c8c;font-weight:500;font-size:15px;vertical-align:middle;"}
-                                              = build.stage
-                                    %td{align: "right", style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:20px 0;color:#8c8c8c;font-weight:500;font-size:15px;"}
-                                      %a{href: pipeline_build_url(@pipeline, build), style: "color:#3084bb;text-decoration:none;"}
-                                        = build.name
-                                  %tr.build-log
-                                    %td{colspan: "2", style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:0 0 15px;"}
-                                      %pre{style: "font-family:Monaco,'Lucida Console','Courier New',Courier,monospace;background-color:#fafafa;border-radius:3px;overflow:hidden;white-space:pre-wrap;word-break:break-all;font-size:13px;line-height:1.4;padding:12px;color:#333333;margin:0;"}
-                                        = build.trace_html(last_lines: 10).html_safe
-        %tr.footer
-          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:25px 0;font-size:13px;line-height:1.6;color:#5c5c5c;"}
-            %img{alt: "GitLab", height: "33", src: image_url('mailers/ci_pipeline_notif_v1/gitlab-logo-full-horizontal.gif'), style: "display:block;margin:0 auto 1em;", width: "90"}/
-            %div
-              %a{href: profile_notifications_url, style: "color:#3084bb;text-decoration:none;"} Manage all notifications
-              &middot;
-              %a{href: help_url, style: "color:#3084bb;text-decoration:none;"} Help
-            %div
-              You're receiving this email because of your account on
-              = succeed "." do
-                %a{href: root_url, style: "color:#3084bb;text-decoration:none;"}= Gitlab.config.gitlab.host
+                  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;padding-right:5px;" }
+                    %img{ height: "13", src: image_url('mailers/ci_pipeline_notif_v1/icon-commit-gray.gif'), style: "display:block;", width: "13", alt: "Commit icon" }/
+                  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;" }
+                    %a{ href: commit_url(@pipeline), style: "color:#3777b0;text-decoration:none;" }
+                      = @pipeline.short_sha
+                    - if @merge_request
+                      in
+                      %a{ href: merge_request_url(@merge_request), style: "color:#3777b0;text-decoration:none;" }
+                        = @merge_request.to_reference
+            .commit{ style: "color:#5c5c5c;font-weight:300;" }
+              = @pipeline.git_commit_message.truncate(50)
+        %tr
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;border-top:1px solid #ededed;" } Author
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;color:#333333;font-weight:400;width:75%;padding-left:5px;border-top:1px solid #ededed;" }
+            %table.img{ border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;" }
+              %tbody
+                %tr
+                  - commit = @pipeline.commit
+                  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;padding-right:5px;" }
+                    %img.avatar{ height: "24", src: avatar_icon(commit.author || commit.author_email, 24), style: "display:block;border-radius:12px;margin:-2px 0;", width: "24", alt: "Avatar" }/
+                  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;" }
+                    - if commit.author
+                      %a.muted{ href: user_url(commit.author), style: "color:#333333;text-decoration:none;" }
+                        = commit.author.name
+                    - else
+                      %span
+                        = commit.author_name
+%tr.spacer
+  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;height:18px;font-size:18px;line-height:18px;" }
+    &nbsp;
+- failed = @pipeline.statuses.latest.failed
+%tr.pre-section
+  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#333333;font-size:15px;font-weight:400;line-height:1.4;padding:15px 0;" }
+    Pipeline
+    %a{ href: pipeline_url(@pipeline), style: "color:#3777b0;text-decoration:none;" }
+      = "\##{@pipeline.id}"
+    had
+    = failed.size
+    failed
+    #{'build'.pluralize(failed.size)}.
+%tr.warning
+  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;border:1px solid #ededed;border-bottom:0;border-radius:3px 3px 0 0;overflow:hidden;background-color:#fdf4f6;color:#d22852;font-size:14px;line-height:1.4;text-align:center;padding:8px 15px;" }
+    Logs may contain sensitive data. Please consider before forwarding this email.
+%tr.section
+  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:0 15px;border:1px solid #ededed;border-radius:3px;overflow:hidden;border-top:0;border-radius:0 0 3px 3px;" }
+    %table.builds{ border: "0", cellpadding: "0", cellspacing: "0", style: "width:100%;border-collapse:collapse;" }
+      %tbody
+        - failed.each do |build|
+          %tr.build-state
+            %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:20px 0;color:#8c8c8c;font-weight:500;font-size:15px;" }
+              %table.img{ border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;" }
+                %tbody
+                  %tr
+                    %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#8c8c8c;font-weight:500;font-size:15px;vertical-align:middle;padding-right:5px;" }
+                      %img{ alt: "x", height: "10", src: image_url('mailers/ci_pipeline_notif_v1/icon-x-red.gif'), style: "display:block;", width: "10" }/
+                    %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#8c8c8c;font-weight:500;font-size:15px;vertical-align:middle;" }
+                      = build.stage
+            %td{ align: "right", style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:20px 0;color:#8c8c8c;font-weight:500;font-size:15px;" }
+              = render "notify/links/#{build.to_partial_path}", pipeline: @pipeline, build: build
+          %tr.build-log
+            - if build.has_trace?
+              %td{ colspan: "2", style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:0 0 15px;" }
+                %pre{ style: "font-family:Monaco,'Lucida Console','Courier New',Courier,monospace;background-color:#fafafa;border-radius:3px;overflow:hidden;white-space:pre-wrap;word-break:break-all;font-size:13px;line-height:1.4;padding:12px;color:#333333;margin:0;" }
+                  = build.trace_html(last_lines: 10).html_safe
+            - else
+              %td{ colspan: "2" }
diff --git a/app/views/notify/pipeline_failed_email.text.erb b/app/views/notify/pipeline_failed_email.text.erb
index 8f8084b58e1..520a2fc7d68 100644
--- a/app/views/notify/pipeline_failed_email.text.erb
+++ b/app/views/notify/pipeline_failed_email.text.erb
@@ -19,13 +19,11 @@ Commit Author: <%= commit.author_name %>
 Pipeline #<%= @pipeline.id %> ( <%= pipeline_url(@pipeline) %> ) had <%= failed.size %> failed <%= 'build'.pluralize(failed.size) %>.
 
 <% failed.each do |build| -%>
-Build #<%= build.id %> ( <%= pipeline_build_url(@pipeline, build) %> )
+<%= render "notify/links/#{build.to_partial_path}", pipeline: @pipeline, build: build %>
 Stage: <%= build.stage %>
 Name: <%= build.name %>
+<% if build.has_trace? -%>
 Trace: <%= build.trace_with_state(last_lines: 10)[:text] %>
-
 <% end -%>
 
-You're receiving this email because of your account on <%= Gitlab.config.gitlab.host %>.
-Manage all notifications: <%= profile_notifications_url %>
-Help: <%= help_url %>
+<% end -%>
diff --git a/app/views/notify/pipeline_success_email.html.haml b/app/views/notify/pipeline_success_email.html.haml
index cf9c1d4d72c..19d4add06f5 100644
--- a/app/views/notify/pipeline_success_email.html.haml
+++ b/app/views/notify/pipeline_success_email.html.haml
@@ -1,154 +1,84 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-%html{lang: "en"}
-  %head
-    %meta{content: "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
-    %meta{content: "width=device-width, initial-scale=1", name: "viewport"}/
-    %meta{content: "IE=edge", "http-equiv" => "X-UA-Compatible"}/
-    %title= message.subject
-    :css
-      /* CLIENT-SPECIFIC STYLES */
-      body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
-      table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
-      img { -ms-interpolation-mode: bicubic; }
-
-      /* iOS BLUE LINKS */
-      a[x-apple-data-detectors] {
-          color: inherit !important;
-          text-decoration: none !important;
-          font-size: inherit !important;
-          font-family: inherit !important;
-          font-weight: inherit !important;
-          line-height: inherit !important;
-      }
-
-      /* ANDROID MARGIN HACK */
-      body { margin:0 !important; }
-      div[style*="margin: 16px 0"] { margin:0 !important; }
-
-      @media only screen and (max-width: 639px) {
-          body, #body {
-              min-width: 320px !important;
-          }
-          table.wrapper {
-              width: 100% !important;
-              min-width: 320px !important;
-          }
-          table.wrapper > tbody > tr > td {
-              border-left: 0 !important;
-              border-right: 0 !important;
-              border-radius: 0 !important;
-              padding-left: 10px !important;
-              padding-right: 10px !important;
-          }
-      }
-  %body{style: "background-color:#fafafa;margin:0;padding:0;text-align:center;min-width:640px;width:100%;height:100%;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;"}
-    %table#body{border: "0", cellpadding: "0", cellspacing: "0", style: "background-color:#fafafa;margin:0;padding:0;text-align:center;min-width:640px;width:100%;"}
+%tr.success
+  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:10px;border-radius:3px;font-size:14px;line-height:1.3;text-align:center;overflow:hidden;color:#ffffff;background-color:#31af64;" }
+    %table.img{ border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;margin:0 auto;" }
       %tbody
-        %tr.line
-          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:#6b4fbb;height:4px;font-size:4px;line-height:4px;"}  
-        %tr.header
-          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:25px 0;font-size:13px;line-height:1.6;color:#5c5c5c;"}
-            %img{alt: "GitLab", height: "50", src: image_url('mailers/ci_pipeline_notif_v1/gitlab-logo.gif'), width: "55"}/
         %tr
-          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;"}
-            %table.wrapper{border: "0", cellpadding: "0", cellspacing: "0", style: "width:640px;margin:0 auto;border-collapse:separate;border-spacing:0;"}
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;vertical-align:middle;color:#ffffff;text-align:center;padding-right:5px;" }
+            %img{ alt: "✓", height: "13", src: image_url('mailers/ci_pipeline_notif_v1/icon-check-green-inverted.gif'), style: "display:block;", width: "13" }/
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;vertical-align:middle;color:#ffffff;text-align:center;" }
+            Your pipeline has passed.
+%tr.spacer
+  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;height:18px;font-size:18px;line-height:18px;" }
+    &nbsp;
+%tr.section
+  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:0 15px;border:1px solid #ededed;border-radius:3px;overflow:hidden;" }
+    %table.info{ border: "0", cellpadding: "0", cellspacing: "0", style: "width:100%;" }
+      %tbody
+        %tr
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;" } Project
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;color:#333333;font-weight:400;width:75%;padding-left:5px;" }
+            - namespace_name = @project.group ? @project.group.name : @project.namespace.owner.name
+            - namespace_url = @project.group ? group_url(@project.group) : user_url(@project.namespace.owner)
+            %a.muted{ href: namespace_url, style: "color:#333333;text-decoration:none;" }
+              = namespace_name
+            \/
+            %a.muted{ href: project_url(@project), style: "color:#333333;text-decoration:none;" }
+              = @project.name
+        %tr
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;border-top:1px solid #ededed;" } Branch
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;color:#333333;font-weight:400;width:75%;padding-left:5px;border-top:1px solid #ededed;" }
+            %table.img{ border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;" }
+              %tbody
+                %tr
+                  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;padding-right:5px;" }
+                    %img{ height: "13", src: image_url('mailers/ci_pipeline_notif_v1/icon-branch-gray.gif'), style: "display:block;", width: "13", alt: "Branch icon" }/
+                  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;" }
+                    %a.muted{ href: commits_url(@pipeline), style: "color:#333333;text-decoration:none;" }
+                      = @pipeline.ref
+        %tr
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;border-top:1px solid #ededed;" } Commit
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;color:#333333;font-weight:400;width:75%;padding-left:5px;border-top:1px solid #ededed;" }
+            %table.img{ border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;" }
+              %tbody
+                %tr
+                  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;padding-right:5px;" }
+                    %img{ height: "13", src: image_url('mailers/ci_pipeline_notif_v1/icon-commit-gray.gif'), style: "display:block;", width: "13", alt: "Commit icon" }/
+                  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;" }
+                    %a{ href: commit_url(@pipeline), style: "color:#3777b0;text-decoration:none;" }
+                      = @pipeline.short_sha
+                    - if @merge_request
+                      in
+                      %a{ href: merge_request_url(@merge_request), style: "color:#3777b0;text-decoration:none;" }
+                        = @merge_request.to_reference
+            .commit{ style: "color:#5c5c5c;font-weight:300;" }
+              = @pipeline.git_commit_message.truncate(50)
+        %tr
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;border-top:1px solid #ededed;" } Author
+          %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;color:#333333;font-weight:400;width:75%;padding-left:5px;border-top:1px solid #ededed;" }
+            %table.img{ border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;" }
               %tbody
                 %tr
-                  %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:#ffffff;text-align:left;padding:18px 25px;border:1px solid #ededed;border-radius:3px;overflow:hidden;"}
-                    %table.content{border: "0", cellpadding: "0", cellspacing: "0", style: "width:100%;border-collapse:separate;border-spacing:0;"}
-                      %tbody
-                        %tr.success
-                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:10px;border-radius:3px;font-size:14px;line-height:1.3;text-align:center;overflow:hidden;color:#ffffff;background-color:#31af64;"}
-                            %table.img{border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;margin:0 auto;"}
-                              %tbody
-                                %tr
-                                  %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;vertical-align:middle;color:#ffffff;text-align:center;padding-right:5px;"}
-                                    %img{alt: "✓", height: "13", src: image_url('mailers/ci_pipeline_notif_v1/icon-check-green-inverted.gif'), style: "display:block;", width: "13"}/
-                                  %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;vertical-align:middle;color:#ffffff;text-align:center;"}
-                                    Your pipeline has passed.
-                        %tr.spacer
-                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;height:18px;font-size:18px;line-height:18px;"}
-                            &nbsp;
-                        %tr.section
-                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:0 15px;border:1px solid #ededed;border-radius:3px;overflow:hidden;"}
-                            %table.info{border: "0", cellpadding: "0", cellspacing: "0", style: "width:100%;"}
-                              %tbody
-                                %tr
-                                  %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;"} Project
-                                  %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;color:#333333;font-weight:400;width:75%;padding-left:5px;"}
-                                    - namespace_name = @project.group ? @project.group.name : @project.namespace.owner.name
-                                    - namespace_url = @project.group ? group_url(@project.group) : user_url(@project.namespace.owner)
-                                    %a.muted{href: namespace_url, style: "color:#333333;text-decoration:none;"}
-                                      = namespace_name
-                                    \/
-                                    %a.muted{href: project_url(@project), style: "color:#333333;text-decoration:none;"}
-                                      = @project.name
-                                %tr
-                                  %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;border-top:1px solid #ededed;"} Branch
-                                  %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;color:#333333;font-weight:400;width:75%;padding-left:5px;border-top:1px solid #ededed;"}
-                                    %table.img{border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;"}
-                                      %tbody
-                                        %tr
-                                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;padding-right:5px;"}
-                                            %img{height: "13", src: image_url('mailers/ci_pipeline_notif_v1/icon-branch-gray.gif'), style: "display:block;", width: "13"}/
-                                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;"}
-                                            %a.muted{href: commits_url(@pipeline), style: "color:#333333;text-decoration:none;"}
-                                              = @pipeline.ref
-                                %tr
-                                  %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;border-top:1px solid #ededed;"} Commit
-                                  %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;color:#333333;font-weight:400;width:75%;padding-left:5px;border-top:1px solid #ededed;"}
-                                    %table.img{border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;"}
-                                      %tbody
-                                        %tr
-                                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;padding-right:5px;"}
-                                            %img{height: "13", src: image_url('mailers/ci_pipeline_notif_v1/icon-commit-gray.gif'), style: "display:block;", width: "13"}/
-                                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;"}
-                                            %a{href: commit_url(@pipeline), style: "color:#3084bb;text-decoration:none;"}
-                                              = @pipeline.short_sha
-                                            - if @merge_request
-                                              in
-                                              %a{href: merge_request_url(@merge_request), style: "color:#3084bb;text-decoration:none;"}
-                                                = @merge_request.to_reference
-                                    .commit{style: "color:#5c5c5c;font-weight:300;"}
-                                      = @pipeline.git_commit_message.truncate(50)
-                                %tr
-                                  %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;border-top:1px solid #ededed;"} Author
-                                  %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;color:#333333;font-weight:400;width:75%;padding-left:5px;border-top:1px solid #ededed;"}
-                                    %table.img{border: "0", cellpadding: "0", cellspacing: "0", style: "border-collapse:collapse;"}
-                                      %tbody
-                                        %tr
-                                          - commit = @pipeline.commit
-                                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;padding-right:5px;"}
-                                            %img.avatar{height: "24", src: avatar_icon(commit.author || commit.author_email, 24), style: "display:block;border-radius:12px;margin:-2px 0;", width: "24"}/
-                                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;"}
-                                            - if commit.author
-                                              %a.muted{href: user_url(commit.author), style: "color:#333333;text-decoration:none;"}
-                                                = commit.author.name
-                                            - else
-                                              %span
-                                                = commit.author_name
-                        %tr.spacer
-                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;height:18px;font-size:18px;line-height:18px;"}
-                            &nbsp;
-                        %tr.success-message
-                          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#333333;font-size:15px;font-weight:400;line-height:1.4;padding:15px 5px;text-align:center;"}
-                            - build_count = @pipeline.statuses.latest.size
-                            - stage_count = @pipeline.stages.size
-                            Pipeline
-                            %a{href: pipeline_url(@pipeline), style: "color:#3084bb;text-decoration:none;"}
-                              = "\##{@pipeline.id}"
-                            successfully completed
-                            = "#{build_count} #{'build'.pluralize(build_count)}"
-                            in
-                            = "#{stage_count} #{'stage'.pluralize(stage_count)}."
-        %tr.footer
-          %td{style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:25px 0;font-size:13px;line-height:1.6;color:#5c5c5c;"}
-            %img{alt: "GitLab", height: "33", src: image_url('mailers/ci_pipeline_notif_v1/gitlab-logo-full-horizontal.gif'), style: "display:block;margin:0 auto 1em;", width: "90"}/
-            %div
-              %a{href: profile_notifications_url, style: "color:#3084bb;text-decoration:none;"} Manage all notifications
-              &middot;
-              %a{href: help_url, style: "color:#3084bb;text-decoration:none;"} Help
-            %div
-              You're receiving this email because of your account on
-              = succeed "." do
-                %a{href: root_url, style: "color:#3084bb;text-decoration:none;"}= Gitlab.config.gitlab.host
+                  - commit = @pipeline.commit
+                  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;padding-right:5px;" }
+                    %img.avatar{ height: "24", src: avatar_icon(commit.author || commit.author_email, 24), style: "display:block;border-radius:12px;margin:-2px 0;", width: "24", alt: "Avatar" }/
+                  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;" }
+                    - if commit.author
+                      %a.muted{ href: user_url(commit.author), style: "color:#333333;text-decoration:none;" }
+                        = commit.author.name
+                    - else
+                      %span
+                        = commit.author_name
+%tr.spacer
+  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;height:18px;font-size:18px;line-height:18px;" }
+    &nbsp;
+%tr.success-message
+  %td{ style: "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#333333;font-size:15px;font-weight:400;line-height:1.4;padding:15px 5px;text-align:center;" }
+    - build_count = @pipeline.statuses.latest.size
+    - stage_count = @pipeline.stages_count
+    Pipeline
+    %a{ href: pipeline_url(@pipeline), style: "color:#3777b0;text-decoration:none;" }
+      = "\##{@pipeline.id}"
+    successfully completed
+    #{build_count} #{'build'.pluralize(build_count)}
+    in
+    #{stage_count} #{'stage'.pluralize(stage_count)}.
diff --git a/app/views/notify/pipeline_success_email.text.erb b/app/views/notify/pipeline_success_email.text.erb
index ae22d474f2c..0970a3a4e09 100644
--- a/app/views/notify/pipeline_success_email.text.erb
+++ b/app/views/notify/pipeline_success_email.text.erb
@@ -16,9 +16,5 @@ Commit Author: <%= commit.author_name %>
 <% end -%>
 
 <% build_count = @pipeline.statuses.latest.size -%>
-<% stage_count = @pipeline.stages.size -%>
+<% stage_count = @pipeline.stages_count -%>
 Pipeline #<%= @pipeline.id %> ( <%= pipeline_url(@pipeline) %> ) successfully completed <%= build_count %> <%= 'build'.pluralize(build_count) %> in <%= stage_count %> <%= 'stage'.pluralize(stage_count) %>.
-
-You're receiving this email because of your account on <%= Gitlab.config.gitlab.host %>.
-Manage all notifications: <%= profile_notifications_url %>
-Help: <%= help_url %>
diff --git a/app/views/notify/project_was_exported_email.html.haml b/app/views/notify/project_was_exported_email.html.haml
index b28fea35ad5..76440926a2b 100644
--- a/app/views/notify/project_was_exported_email.html.haml
+++ b/app/views/notify/project_was_exported_email.html.haml
@@ -2,7 +2,7 @@
   Project #{@project.name} was exported successfully.
 %p
   The project export can be downloaded from:
-  = link_to download_export_namespace_project_url(@project.namespace, @project) do
+  = link_to download_export_namespace_project_url(@project.namespace, @project), rel: 'nofollow', download: '', do
     = @project.name_with_namespace + " export"
 %p
   The download link will expire in 24 hours.
diff --git a/app/views/notify/project_was_not_exported_email.text.haml b/app/views/notify/project_was_not_exported_email.text.haml
index b27cb620b9e..6c6902994a1 100644
--- a/app/views/notify/project_was_not_exported_email.text.haml
+++ b/app/views/notify/project_was_not_exported_email.text.haml
@@ -1,6 +1,6 @@
-= "Project #{@project.name} couldn't be exported."
+Project #{@project.name} couldn't be exported.
 
-= "The errors we encountered were:"
+The errors we encountered were:
 
 - @errors.each do |error|
-  #{error}
\ No newline at end of file
+  #{error}
diff --git a/app/views/notify/repository_push_email.html.haml b/app/views/notify/repository_push_email.html.haml
index c0c07d65daa..c6b1db17f91 100644
--- a/app/views/notify/repository_push_email.html.haml
+++ b/app/views/notify/repository_push_email.html.haml
@@ -1,5 +1,5 @@
 = content_for :head do
-  = stylesheet_link_tag 'mailers/repository_push_email'
+  = stylesheet_link_tag 'mailers/highlighted_diff_email'
 
 %h3
   #{@message.author_name} #{@message.action_name} #{@message.ref_type} #{@message.ref_name}
@@ -17,7 +17,7 @@
   %ul
     - @message.commits.each do |commit|
       %li
-        %strong #{link_to(commit.short_id, namespace_project_commit_url(@message.project_namespace, @message.project, commit))}
+        %strong= link_to(commit.short_id, namespace_project_commit_url(@message.project_namespace, @message.project, commit))
         %div
           %span by #{commit.author_name}
           %i at #{commit.committed_date.to_s(:iso8601)}
@@ -27,9 +27,9 @@
   %h4 #{pluralize @message.diffs_count, "changed file"}:
 
   %ul
-    - @message.diffs.each_with_index do |diff, i|
+    - @message.diffs.each do |diff|
       %li.file-stats
-        %a{href: "#{@message.target_url if @message.disable_diffs?}#diff-#{i}" }
+        %a{ href: "#{@message.target_url if @message.disable_diffs?}##{hexdigest(diff.file_path)}" }
           - if diff.deleted_file
             %span.deleted-file
               &minus;
@@ -52,9 +52,10 @@
       %h5 The diff was not included because it is too large.
     - else
       %h4 Changes:
-      - diff_files.each_with_index do |diff_file, i|
-        %li{id: "diff-#{i}"}
-          %a{href: @message.target_url + "#diff-#{i}"}<
+      - diff_files.each do |diff_file|
+        - file_hash = hexdigest(diff_file.file_path)
+        %li{ id: file_hash }
+          %a{ href: @message.target_url + "##{file_hash}" }<
             - if diff_file.deleted_file
               %strong<
                 = diff_file.old_path
diff --git a/app/views/profiles/_head.html.haml b/app/views/profiles/_head.html.haml
index 943ebdaeffe..83ae9129807 100644
--- a/app/views/profiles/_head.html.haml
+++ b/app/views/profiles/_head.html.haml
@@ -1,3 +1,2 @@
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_tag('lib/cropper.js')
-  = page_specific_javascript_tag('profile/profile_bundle.js')
+  = page_specific_javascript_bundle_tag('profile')
diff --git a/app/views/profiles/accounts/show.html.haml b/app/views/profiles/accounts/show.html.haml
index e2e974ba072..5ce2220c907 100644
--- a/app/views/profiles/accounts/show.html.haml
+++ b/app/views/profiles/accounts/show.html.haml
@@ -8,24 +8,36 @@
 .row.prepend-top-default
   .col-lg-3.profile-settings-sidebar
     %h4.prepend-top-0
-      Private Token
+      = incoming_email_token_enabled? ? "Private Tokens" : "Private Token"
     %p
-      Your private token is used to access application resources without authentication.
-  .col-lg-9
-    = form_for @user, url: reset_private_token_profile_path, method: :put, html: { class: "private-token" } do |f|
+      Keep
+      = incoming_email_token_enabled? ? "these tokens" : "this token"
+      secret, anyone with access to them can interact with GitLab as if they were you.
+  .col-lg-9.private-tokens-reset
+    .reset-action
       %p.cgray
         - if current_user.private_token
-          = label_tag "token", "Private token", class: "label-light"
-          = text_field_tag "token", current_user.private_token, class: "form-control"
+          = label_tag "private-token", "Private token", class: "label-light"
+          = text_field_tag "private-token", current_user.private_token, class: "form-control", readonly: true, onclick: "this.select()"
         - else
-          %span You don`t have one yet. Click generate to fix it.
-      %p.help-block
-        It can be used for atom feeds or the API. Keep it secret!
+          %span You don't have one yet. Click generate to fix it.
+        %p.help-block
+          Your private token is used to access the API and Atom feeds without username/password authentication.
       .prepend-top-default
         - if current_user.private_token
-          = f.submit 'Reset private token', data: { confirm: "Are you sure?" }, class: "btn btn-default"
+          = link_to 'Reset private token', reset_private_token_profile_path, method: :put, data: { confirm: "Are you sure?" }, class: "btn btn-default private-token"
         - else
           = f.submit 'Generate', class: "btn btn-default"
+    - if incoming_email_token_enabled?
+      .reset-action
+        %p.cgray
+          = label_tag "incoming-email-token", "Incoming Email Token", class: 'label-light'
+          = text_field_tag "incoming-email-token", current_user.incoming_email_token, class: "form-control", readonly: true, onclick: "this.select()"
+        %p.help-block
+          Your incoming email token is used to create new issues by email, and is included in your project-specific email addresses.
+        .prepend-top-default
+          = link_to 'Reset incoming email token', reset_incoming_email_token_profile_path, method: :put, data: { confirm: "Are you sure?" }, class: "btn btn-default incoming-email-token"
+
 %hr
 .row.prepend-top-default
   .col-lg-3.profile-settings-sidebar
@@ -63,14 +75,14 @@
           .provider-btn-image
             = provider_image_tag(provider)
           - if auth_active?(provider)
-            - if provider.to_s == 'saml'
-              %a.provider-btn
-                Active
-            - else
+            - if unlink_allowed?(provider)
               = link_to unlink_profile_account_path(provider: provider), method: :delete, class: 'provider-btn' do
                 Disconnect
+            - else
+              %a.provider-btn
+                Active
           - else
-            = link_to omniauth_authorize_path(:user, provider), method: :post, class: 'provider-btn not-active', "data-no-turbolink" => "true" do
+            = link_to omniauth_authorize_path(:user, provider), method: :post, class: 'provider-btn not-active' do
               Connect
   %hr
 - if current_user.can_change_username?
@@ -81,7 +93,7 @@
       %p
         Changing your username will change path to all personal projects!
     .col-lg-9
-      = form_for @user, url: update_username_profile_path, method: :put, remote: true, html: {class: "update-username"} do |f|
+      = form_for @user, url: update_username_profile_path, method: :put, html: {class: "update-username"} do |f|
         .form-group
           = f.label :username, "Path", class: "label-light"
           .input-group
@@ -90,7 +102,7 @@
             = f.text_field :username, required: true, class: 'form-control'
         .help-block
           Current path:
-          = "#{root_url}#{current_user.username}"
+          #{root_url}#{current_user.username}
         .prepend-top-default
           = f.button class: "btn btn-warning", type: "submit" do
             = icon "spinner spin", class: "hidden loading-username"
@@ -103,7 +115,7 @@
       %h4.prepend-top-0.danger-title
         Remove account
     .col-lg-9
-      - if @user.can_be_removed?
+      - if @user.can_be_removed? && can?(current_user, :destroy_user, @user)
         %p
           Deleting an account has the following effects:
         %ul
@@ -116,7 +128,10 @@
         - if @user.solo_owned_groups.present?
           %p
             Your account is currently an owner in these groups:
-            %strong #{@user.solo_owned_groups.map(&:name).join(', ')}
+            %strong= @user.solo_owned_groups.map(&:name).join(', ')
           %p
             You must transfer ownership or delete these groups before you can delete your account.
+        - else
+          %p
+            You don't have access to delete this user.
 .append-bottom-default
diff --git a/app/views/profiles/chat_names/_chat_name.html.haml b/app/views/profiles/chat_names/_chat_name.html.haml
new file mode 100644
index 00000000000..1ec1e7c70e4
--- /dev/null
+++ b/app/views/profiles/chat_names/_chat_name.html.haml
@@ -0,0 +1,27 @@
+- service = chat_name.service
+- project = service.project
+%tr
+  %td
+    %strong
+      - if can?(current_user, :read_project, project)
+        = link_to project.name_with_namespace, project_path(project)
+      - else
+        .light N/A
+  %td
+    %strong
+      - if can?(current_user, :admin_project, project)
+        = link_to service.title, edit_namespace_project_service_path(project.namespace, project, service)
+      - else
+        = service.title
+  %td
+    = chat_name.team_domain
+  %td
+    = chat_name.chat_name
+  %td
+    - if chat_name.last_used_at
+      = time_ago_with_tooltip(chat_name.last_used_at)
+    - else
+      Never
+
+  %td
+    = link_to 'Remove', profile_chat_name_path(chat_name), method: :delete, class: 'btn btn-danger pull-right', data: { confirm: 'Are you sure you want to revoke this nickname?' }
diff --git a/app/views/profiles/chat_names/index.html.haml b/app/views/profiles/chat_names/index.html.haml
new file mode 100644
index 00000000000..20cc636b2da
--- /dev/null
+++ b/app/views/profiles/chat_names/index.html.haml
@@ -0,0 +1,30 @@
+- page_title 'Chat'
+= render 'profiles/head'
+
+.row.prepend-top-default
+  .col-lg-3.profile-settings-sidebar
+    %h4.prepend-top-0
+      = page_title
+    %p
+      You can see your Chat accounts.
+
+  .col-lg-9
+    %h5 Active chat names (#{@chat_names.size})
+
+    - if @chat_names.present?
+      .table-responsive
+        %table.table.chat-names
+          %thead
+            %tr
+              %th Project
+              %th Service
+              %th Team domain
+              %th Nickname
+              %th Last used
+              %th
+          %tbody
+            = render @chat_names
+
+    - else
+      .settings-message.text-center
+        You don't have any active chat names.
diff --git a/app/views/profiles/chat_names/new.html.haml b/app/views/profiles/chat_names/new.html.haml
new file mode 100644
index 00000000000..5bf22aa94f1
--- /dev/null
+++ b/app/views/profiles/chat_names/new.html.haml
@@ -0,0 +1,15 @@
+%h3.page-title Authorization required
+%main{ :role => "main" }
+  %p.h4
+    Authorize
+    %strong.text-info= @chat_name_params[:chat_name]
+    to use your account?
+
+  %hr
+  .actions
+    = form_tag profile_chat_names_path, method: :post do
+      = hidden_field_tag :token, @chat_name_token.token
+      = submit_tag "Authorize", class: "btn btn-success wide pull-left"
+    = form_tag deny_profile_chat_names_path, method: :delete do
+      = hidden_field_tag :token, @chat_name_token.token
+      = submit_tag "Deny", class: "btn btn-danger prepend-left-10"
diff --git a/app/views/profiles/keys/_key.html.haml b/app/views/profiles/keys/_key.html.haml
index 3276db6692c..d2a60ac2867 100644
--- a/app/views/profiles/keys/_key.html.haml
+++ b/app/views/profiles/keys/_key.html.haml
@@ -6,6 +6,9 @@
       = key.title
     .description
       = key.fingerprint
+    .last-used-at
+      last used:
+      = key.last_used_at ? time_ago_with_tooltip(key.last_used_at) : 'n/a'
   .pull-right
     %span.key-created-at
       created #{time_ago_with_tooltip(key.created_at)}
diff --git a/app/views/profiles/keys/_key_details.html.haml b/app/views/profiles/keys/_key_details.html.haml
index dd7615400dc..d44603c638c 100644
--- a/app/views/profiles/keys/_key_details.html.haml
+++ b/app/views/profiles/keys/_key_details.html.haml
@@ -11,6 +11,9 @@
         %li
           %span.light Created on:
           %strong= @key.created_at.to_s(:medium)
+        %li
+          %span.light Last used on:
+          %strong= @key.last_used_at.try(:to_s, :medium) || 'N/A'
 
   .col-md-8
     %p
diff --git a/app/views/profiles/keys/index.html.haml b/app/views/profiles/keys/index.html.haml
index 93187873501..71b224a413b 100644
--- a/app/views/profiles/keys/index.html.haml
+++ b/app/views/profiles/keys/index.html.haml
@@ -17,5 +17,5 @@
     %hr
     %h5
       Your SSH keys (#{@keys.count})
-    %div.append-bottom-default
+    .append-bottom-default
       = render 'key_table'
diff --git a/app/views/profiles/notifications/show.html.haml b/app/views/profiles/notifications/show.html.haml
index 844fce59704..51c4e8e5a73 100644
--- a/app/views/profiles/notifications/show.html.haml
+++ b/app/views/profiles/notifications/show.html.haml
@@ -3,7 +3,7 @@
 
 %div
   - if @user.errors.any?
-    %div.alert.alert-danger
+    .alert.alert-danger
       %ul
         - @user.errors.full_messages.each do |msg|
           %li= msg
@@ -30,10 +30,15 @@
       %br
       .clearfix
       .form-group.pull-left.global-notification-setting
-        = render 'shared/notifications/button', notification_setting: @global_notification_setting, left_align: true
+        = render 'shared/notifications/button', notification_setting: @global_notification_setting
 
       .clearfix
 
+      = form_for @user, url: profile_notifications_path, method: :put do |f|
+        %label{ for: 'user_notified_of_own_activity' }
+          = f.check_box :notified_of_own_activity
+          %span Receive notifications about your own activity
+
       %hr
       %h5
         Groups (#{@group_notifications.count})
diff --git a/app/views/profiles/personal_access_tokens/index.html.haml b/app/views/profiles/personal_access_tokens/index.html.haml
index 05a2ea67aa2..0645ecad496 100644
--- a/app/views/profiles/personal_access_tokens/index.html.haml
+++ b/app/views/profiles/personal_access_tokens/index.html.haml
@@ -19,92 +19,16 @@
           Your New Personal Access Token
         .form-group
           = text_field_tag 'created-personal-access-token', flash[:personal_access_token], readonly: true, class: "form-control", 'aria-describedby' => "created-personal-access-token-help-block"
-          = clipboard_button(clipboard_text: flash[:personal_access_token])
+          = clipboard_button(clipboard_text: flash[:personal_access_token], title: "Copy personal access token to clipboard", placement: "left")
           %span#created-personal-access-token-help-block.help-block.text-danger Make sure you save it - you won't be able to access it again.
 
       %hr
 
-    %h5.prepend-top-0
-      Add a Personal Access Token
-    %p.profile-settings-content
-      Pick a name for the application, and we'll give you a unique token.
-    = form_for [:profile, @personal_access_token],
-                method: :post, html: { class: 'js-requires-input' } do |f|
-
-      = form_errors(@personal_access_token)
-
-      .form-group
-        = f.label :name, class: 'label-light'
-        = f.text_field :name, class: "form-control", required: true
-
-      .form-group
-        = f.label :expires_at, class: 'label-light'
-        = f.text_field :expires_at, class: "datepicker form-control", required: false
-
-      .prepend-top-default
-        = f.submit 'Create Personal Access Token', class: "btn btn-create"
-
-    %hr
-
-    %h5 Active Personal Access Tokens (#{@active_personal_access_tokens.length})
-
-    - if @active_personal_access_tokens.present?
-      .table-responsive
-        %table.table.active-personal-access-tokens
-          %thead
-            %tr
-              %th Name
-              %th Created
-              %th Expires
-              %th
-          %tbody
-            - @active_personal_access_tokens.each do |token|
-              %tr
-                %td= token.name
-                %td= token.created_at.to_date.to_s(:medium)
-                %td
-                  - if token.expires_at.present?
-                    = token.expires_at.to_date.to_s(:medium)
-                  - else
-                    %span.personal-access-tokens-never-expires-label Never
-                %td= link_to "Revoke", revoke_profile_personal_access_token_path(token), method: :put, class: "btn btn-danger pull-right", data: { confirm: "Are you sure you want to revoke this token? This action cannot be undone." }
-
-    - else
-      .settings-message.text-center
-        You don't have any active tokens yet.
-
-    %hr
-
-    %h5 Inactive Personal Access Tokens (#{@inactive_personal_access_tokens.length})
-
-    - if @inactive_personal_access_tokens.present?
-      .table-responsive
-        %table.table.inactive-personal-access-tokens
-          %thead
-            %tr
-              %th Name
-              %th Created
-          %tbody
-            - @inactive_personal_access_tokens.each do |token|
-              %tr
-                %td= token.name
-                %td= token.created_at.to_date.to_s(:medium)
-
-    - else
-      .settings-message.text-center
-        There are no inactive tokens.
+    = render "shared/personal_access_tokens_form", path: profile_personal_access_tokens_path, impersonation: false, token: @personal_access_token, scopes: @scopes
 
+    = render "shared/personal_access_tokens_table", impersonation: false, active_tokens: @active_personal_access_tokens, inactive_tokens: @inactive_personal_access_tokens
 
 :javascript
-  var date = $('#personal_access_token_expires_at').val();
-
-  var datepicker = $(".datepicker").datepicker({
-    dateFormat: "yy-mm-dd",
-    minDate: 0
-  });
-
   $("#created-personal-access-token").click(function() {
     this.select();
   });
-
-  $("#created-personal-access-token").effect('highlight', { color: '#ffff99' }, 2000);
diff --git a/app/views/profiles/preferences/show.html.haml b/app/views/profiles/preferences/show.html.haml
index 2afa026847a..99690e6b98a 100644
--- a/app/views/profiles/preferences/show.html.haml
+++ b/app/views/profiles/preferences/show.html.haml
@@ -1,25 +1,14 @@
 - page_title 'Preferences'
 = render 'profiles/head'
 
-= form_for @user, url: profile_preferences_path, remote: true, method: :put, html: {class: 'row prepend-top-default js-preferences-form'} do |f|
-  .col-lg-3.profile-settings-sidebar
-    %h4.prepend-top-0
-      Application theme
-    %p
-      This setting allows you to customize the appearance of the site, e.g. the sidebar.
-  .col-lg-9.application-theme
-    - Gitlab::Themes.each do |theme|
-      = label_tag do
-        .preview{class: theme.css_class}
-        = f.radio_button :theme_id, theme.id
-        = theme.name
-  .col-sm-12
-    %hr
+= form_for @user, url: profile_preferences_path, remote: true, method: :put, html: { class: 'row prepend-top-default js-preferences-form' } do |f|
   .col-lg-3.profile-settings-sidebar
     %h4.prepend-top-0
       Syntax highlighting theme
     %p
-      This setting allow you to customize the appearance of the syntax.
+      This setting allows you to customize the appearance of the syntax.
+      = succeed '.' do
+        = link_to 'Learn more', help_page_path('user/profile/preferences', anchor: 'syntax-highlighting-theme'), target: '_blank'
   .col-lg-9.syntax-theme
     - Gitlab::ColorSchemes.each do |scheme|
       = label_tag do
@@ -33,6 +22,8 @@
       Behavior
     %p
       This setting allows you to customize the behavior of the system layout and default views.
+      = succeed '.' do
+        = link_to 'Learn more', help_page_path('user/profile/preferences', anchor: 'behavior'), target: '_blank'
   .col-lg-9
     .form-group
       = f.label :layout, class: 'label-light' do
@@ -42,13 +33,11 @@
         Choose between fixed (max. 1200px) and fluid (100%) application layout.
     .form-group
       = f.label :dashboard, class: 'label-light' do
-        Default Dashboard
-        = link_to('(?)', help_page_path('profile/preferences') + '#default-dashboard', target: '_blank')
+        Default dashboard
       = f.select :dashboard, dashboard_choices, {}, class: 'form-control'
     .form-group
       = f.label :project_view, class: 'label-light' do
         Project view
-        = link_to('(?)', help_page_path('profile/preferences') + '#default-project-view', target: '_blank')
       = f.select :project_view, project_view_choices, {}, class: 'form-control'
       .help-block
         Choose what content you want to see on a project's home page.
diff --git a/app/views/profiles/preferences/update.js.erb b/app/views/profiles/preferences/update.js.erb
index 8966dd3fd86..431ab9d052b 100644
--- a/app/views/profiles/preferences/update.js.erb
+++ b/app/views/profiles/preferences/update.js.erb
@@ -1,7 +1,3 @@
-// Remove body class for any previous theme, re-add current one
-$('body').removeClass('<%= Gitlab::Themes.body_classes %>')
-$('body').addClass('<%= user_application_theme %>')
-
 // Toggle container-fluid class
 if ('<%= current_user.layout %>' === 'fluid') {
   $('.content-wrapper .container-fluid').removeClass('container-limited')
diff --git a/app/views/profiles/show.html.haml b/app/views/profiles/show.html.haml
index 578af9fe98d..c74b3249a13 100644
--- a/app/views/profiles/show.html.haml
+++ b/app/views/profiles/show.html.haml
@@ -18,7 +18,8 @@
             or change it at #{link_to Gitlab.config.gravatar.host, "http://" + Gitlab.config.gravatar.host}
     .col-lg-9
       .clearfix.avatar-image.append-bottom-default
-        = image_tag avatar_icon(@user, 160), alt: '', class: 'avatar s160'
+        = link_to avatar_icon(@user, 400), target: '_blank', rel: 'noopener noreferrer' do
+          = image_tag avatar_icon(@user, 160), alt: '', class: 'avatar s160'
       %h5.prepend-top-0
         Upload new avatar
       .prepend-top-5.append-bottom-10
@@ -30,7 +31,7 @@
         The maximum file size allowed is 200KB.
       - if @user.avatar?
         %hr
-        = link_to 'Remove avatar', profile_avatar_path, data: { confirm: "Avatar will be removed. Are you sure?"}, method: :delete, class: "btn btn-gray"
+        = link_to 'Remove avatar', profile_avatar_path, data: { confirm: "Avatar will be removed. Are you sure?" }, method: :delete, class: "btn btn-gray"
   %hr
   .row
     .col-lg-3.profile-settings-sidebar
@@ -61,7 +62,7 @@
             %span.help-block
               Please click the link in the confirmation email before continuing. It was sent to
               = succeed "." do
-                %strong #{@user.unconfirmed_email}
+                %strong= @user.unconfirmed_email
               %p
               = link_to "Resend confirmation e-mail", user_confirmation_path(user: { email: @user.unconfirmed_email }), method: :post
 
@@ -69,7 +70,7 @@
             %span.help-block We also use email for avatar detection if no avatar is uploaded.
       .form-group
         = f.label :public_email, class: "label-light"
-        = f.select :public_email, options_for_select(@user.all_emails, selected: @user.public_email), {include_blank: 'Do not show on profile'}, class: "select2"
+        = f.select :public_email, options_for_select(@user.all_emails, selected: @user.public_email), { include_blank: 'Do not show on profile' }, class: "select2"
         %span.help-block This email will be displayed on your public profile.
       .form-group
         = f.label :skype, class: "label-light"
@@ -101,14 +102,14 @@
   .modal-dialog
     .modal-content
       .modal-header
-        %button.close{:type => "button", :'data-dismiss' => "modal"}
+        %button.close{ :type => "button", :'data-dismiss' => "modal" }
           %span
             &times;
         %h4.modal-title
           Position and size your new avatar
       .modal-body
         .profile-crop-image-container
-          %img.modal-profile-crop-image
+          %img.modal-profile-crop-image{ alt: "Avatar cropper" }
         .crop-controls
           .btn-group
             %button.btn.btn-primary{ data: { method: "zoom", option: "0.1" } }
@@ -116,5 +117,5 @@
             %button.btn.btn-primary{ data: { method: "zoom", option: "-0.1" } }
               %span.fa.fa-search-minus
       .modal-footer
-        %button.btn.btn-primary.js-upload-user-avatar{:type => "button"}
+        %button.btn.btn-primary.js-upload-user-avatar{ :type => "button" }
           Set new profile picture
diff --git a/app/views/profiles/two_factor_auths/show.html.haml b/app/views/profiles/two_factor_auths/show.html.haml
index 03ac739ade5..7ade5f00d47 100644
--- a/app/views/profiles/two_factor_auths/show.html.haml
+++ b/app/views/profiles/two_factor_auths/show.html.haml
@@ -4,7 +4,7 @@
 
 - if inject_u2f_api?
   - content_for :page_specific_javascripts do
-    = page_specific_javascript_tag('u2f.js')
+    = page_specific_javascript_bundle_tag('u2f')
 
 .row.prepend-top-default
   .col-lg-3
@@ -30,7 +30,7 @@
               To add the entry manually, provide the following details to the application on your phone.
             %p.prepend-top-0.append-bottom-0
               Account:
-              = current_user.email
+              = @account_string
             %p.prepend-top-0.append-bottom-0
               Key:
               = current_user.otp_secret.scan(/.{4}/).join(' ')
@@ -96,4 +96,3 @@
   :javascript
     var button = "<a class='btn btn-xs btn-warning pull-right' data-method='patch' href='#{skip_profile_two_factor_auth_path}'>Configure it later</a>";
     $(".flash-alert").append(button);
-
diff --git a/app/views/profiles/update_username.js.haml b/app/views/profiles/update_username.js.haml
deleted file mode 100644
index de1337a2a24..00000000000
--- a/app/views/profiles/update_username.js.haml
+++ /dev/null
@@ -1,6 +0,0 @@
-- if @user.valid?
-  :plain
-    new Flash("Username successfully changed", "notice")
-- else
-  :plain
-    new Flash("Username change failed - #{@user.errors.full_messages.first}", "alert")
diff --git a/app/views/projects/_activity.html.haml b/app/views/projects/_activity.html.haml
index d011e51e696..aa0cb3e1a50 100644
--- a/app/views/projects/_activity.html.haml
+++ b/app/views/projects/_activity.html.haml
@@ -2,18 +2,17 @@
 
 %div{ class: container_class }
   .nav-block.activity-filter-block
-    - if current_user
-      .controls
-        = link_to namespace_project_path(@project.namespace, @project, format: :atom, private_token: current_user.private_token), title: "Feed", class: 'btn rss-btn' do
-          = icon('rss')
+    .controls
+      = link_to namespace_project_path(@project.namespace, @project, rss_url_options), title: "Subscribe", class: 'btn rss-btn has-tooltip' do
+        = icon('rss')
 
     = render 'shared/event_filter'
 
-  .content_list.project-activity{:"data-href" => activity_project_path(@project)}
+  .content_list.project-activity{ :"data-href" => activity_project_path(@project) }
   = spinner
 
 :javascript
-  var activity = new Activities();
+  var activity = new gl.Activities();
   $(document).on('page:restore', function (event) {
     activity.reloadActivities()
   })
diff --git a/app/views/projects/_bitbucket_import_modal.html.haml b/app/views/projects/_bitbucket_import_modal.html.haml
index e74fd5b93ea..c24a496486c 100644
--- a/app/views/projects/_bitbucket_import_modal.html.haml
+++ b/app/views/projects/_bitbucket_import_modal.html.haml
@@ -1,8 +1,8 @@
-%div#bitbucket_import_modal.modal
+#bitbucket_import_modal.modal
   .modal-dialog
     .modal-content
       .modal-header
-        %a.close{href: "#", "data-dismiss" => "modal"} ×
+        %a.close{ href: "#", "data-dismiss" => "modal" } ×
         %h3 Import projects from Bitbucket
       .modal-body
         To enable importing projects from Bitbucket,
@@ -10,4 +10,4 @@
           as administrator you need to configure
         - else
           ask your GitLab administrator to configure
-        == #{link_to 'OAuth integration', help_page_path("integration/bitbucket")}.
+        = link_to 'OAuth integration', help_page_path("integration/bitbucket")
diff --git a/app/views/projects/_customize_workflow.html.haml b/app/views/projects/_customize_workflow.html.haml
index d2c1e943db1..a41791f0eca 100644
--- a/app/views/projects/_customize_workflow.html.haml
+++ b/app/views/projects/_customize_workflow.html.haml
@@ -1,8 +1,8 @@
 .row-content-block.project-home-empty
-  %div.text-center{ class: container_class }
+  .text-center{ class: container_class }
     %h4
       Customize your workflow!
     %p
-      Get started with GitLab by enabling features that work best for your project. From issues and wikis, to merge requests and builds, GitLab can help manage your workflow from idea to production!
+      Get started with GitLab by enabling features that work best for your project. From issues and wikis, to merge requests and pipelines, GitLab can help manage your workflow from idea to production!
     - if can?(current_user, :admin_project, @project)
       = link_to "Get started", edit_project_path(@project), class: "btn btn-success"
diff --git a/app/views/projects/_find_file_link.html.haml b/app/views/projects/_find_file_link.html.haml
index 08e2fc48be7..dbb33090670 100644
--- a/app/views/projects/_find_file_link.html.haml
+++ b/app/views/projects/_find_file_link.html.haml
@@ -1,3 +1,3 @@
-= link_to namespace_project_find_file_path(@project.namespace, @project, @ref), class: 'btn btn-grouped shortcuts-find-file', rel: 'nofollow' do

-  = icon('search')

-  %span Find File

+= link_to namespace_project_find_file_path(@project.namespace, @project, @ref), class: 'btn btn-grouped shortcuts-find-file', rel: 'nofollow' do
+  = icon('search')
+  %span Find File
diff --git a/app/views/projects/_gitlab_import_modal.html.haml b/app/views/projects/_gitlab_import_modal.html.haml
index e9f39b16aa7..00aef66e1f8 100644
--- a/app/views/projects/_gitlab_import_modal.html.haml
+++ b/app/views/projects/_gitlab_import_modal.html.haml
@@ -1,8 +1,8 @@
-%div#gitlab_import_modal.modal
+#gitlab_import_modal.modal
   .modal-dialog
     .modal-content
       .modal-header
-        %a.close{href: "#", "data-dismiss" => "modal"} ×
+        %a.close{ href: "#", "data-dismiss" => "modal" } ×
         %h3 Import projects from GitLab.com
       .modal-body
         To enable importing projects from GitLab.com,
@@ -10,4 +10,4 @@
           as administrator you need to configure
         - else
           ask your GitLab administrator to configure
-        == #{link_to 'OAuth integration', help_page_path("integration/gitlab")}.
+        = link_to 'OAuth integration', help_page_path("integration/gitlab")
diff --git a/app/views/projects/_head.html.haml b/app/views/projects/_head.html.haml
new file mode 100644
index 00000000000..db08b77c8e0
--- /dev/null
+++ b/app/views/projects/_head.html.haml
@@ -0,0 +1,20 @@
+= content_for :sub_nav do
+  .scrolling-tabs-container.sub-nav-scroll
+    = render 'shared/nav_scroll'
+    .nav-links.sub-nav.scrolling-tabs
+      %ul{ class: container_class }
+        = nav_link(path: 'projects#show') do
+          = link_to project_path(@project), title: 'Project home', class: 'shortcuts-project' do
+            %span
+              Home
+
+        = nav_link(path: 'projects#activity') do
+          = link_to activity_project_path(@project), title: 'Activity', class: 'shortcuts-project-activity' do
+            %span
+              Activity
+
+        - if can?(current_user, :read_cycle_analytics, @project)
+          = nav_link(path: 'cycle_analytics#show') do
+            = link_to project_cycle_analytics_path(@project), title: 'Cycle Analytics', class: 'shortcuts-project-cycle-analytics' do
+              %span
+                Cycle Analytics
diff --git a/app/views/projects/_home_panel.html.haml b/app/views/projects/_home_panel.html.haml
index 5a04c3318cf..0fd19780570 100644
--- a/app/views/projects/_home_panel.html.haml
+++ b/app/views/projects/_home_panel.html.haml
@@ -1,11 +1,11 @@
 - empty_repo = @project.empty_repo?
 .project-home-panel.text-center{ class: ("empty-project" if empty_repo) }
-  %div{ class: container_class }
+  .limit-container-width{ class: container_class }
     .avatar-container.s70.project-avatar
       = project_icon(@project, alt: @project.name, class: 'avatar s70 avatar-tile')
     %h1.project-title
       = @project.name
-      %span.visibility-icon.has-tooltip{data: { container: 'body' }, title: visibility_icon_description(@project)}
+      %span.visibility-icon.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@project) }
         = visibility_level_icon(@project.visibility_level, fw: false)
 
     .project-home-desc
@@ -18,11 +18,21 @@
           = link_to project_path(forked_from_project) do
             = forked_from_project.namespace.try(:name)
 
-    .project-repo-buttons.project-action-buttons
+    .project-repo-buttons
       .count-buttons
         = render 'projects/buttons/star'
         = render 'projects/buttons/fork'
 
-      - if @project.feature_available?(:repository, current_user)
-        .project-clone-holder
-          = render "shared/clone_panel"
+      %span.hidden-xs
+        - if @project.feature_available?(:repository, current_user)
+          .project-clone-holder
+            = render "shared/clone_panel"
+
+        - if current_user
+          - if can?(current_user, :download_code, @project)
+            = render 'projects/buttons/download', project: @project, ref: @ref
+            = render 'projects/buttons/dropdown'
+            = render 'projects/buttons/koding'
+
+          = render 'shared/notifications/button', notification_setting: @notification_setting
+          = render 'shared/members/access_request_buttons', source: @project
diff --git a/app/views/projects/_last_commit.html.haml b/app/views/projects/_last_commit.html.haml
index 8e23d51b224..e1fea8ccf3d 100644
--- a/app/views/projects/_last_commit.html.haml
+++ b/app/views/projects/_last_commit.html.haml
@@ -1,12 +1,13 @@
+
 - ref = local_assigns.fetch(:ref)
 - status = commit.status(ref)
 - if status
-  = link_to builds_namespace_project_commit_path(commit.project.namespace, commit.project, commit), class: "ci-status ci-#{status}" do
+  = link_to pipelines_namespace_project_commit_path(commit.project.namespace, commit.project, commit), class: "ci-status ci-#{status}" do
     = ci_icon_for_status(status)
     = ci_label_for_status(status)
 
 = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit_short_id"
 = link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit), class: "commit-row-message"
 &middot;
-#{time_ago_with_tooltip(commit.committed_date, skip_js: true)} by
+#{time_ago_with_tooltip(commit.committed_date)} by
 = commit_author_link(commit, avatar: true, size: 24)
diff --git a/app/views/projects/_last_push.html.haml b/app/views/projects/_last_push.html.haml
index 1c3bccccb5c..a08436715d2 100644
--- a/app/views/projects/_last_push.html.haml
+++ b/app/views/projects/_last_push.html.haml
@@ -10,6 +10,7 @@
             - if @project && event.project != @project
               %span at
               %strong= link_to_project event.project
+            = clipboard_button(clipboard_text: event.ref_name, class: 'btn-clipboard btn-transparent', title: 'Copy branch to clipboard')
             #{time_ago_with_tooltip(event.created_at)}
 
           .pull-right
diff --git a/app/views/projects/_md_preview.html.haml b/app/views/projects/_md_preview.html.haml
index 58d961d93ca..23e27c1105c 100644
--- a/app/views/projects/_md_preview.html.haml
+++ b/app/views/projects/_md_preview.html.haml
@@ -15,23 +15,23 @@
 
       %li.pull-right
         .toolbar-group
-          = markdown_toolbar_button({icon: "bold fw", data: { "md-tag" => "**" }, title: "Add bold text" })
-          = markdown_toolbar_button({icon: "italic fw", data: { "md-tag" => "*" }, title: "Add italic text" })
-          = markdown_toolbar_button({icon: "quote-right fw", data: { "md-tag" => "> ", "md-prepend" => true }, title: "Insert a quote" })
-          = markdown_toolbar_button({icon: "code fw", data: { "md-tag" => "`", "md-block" => "```" }, title: "Insert code" })
-          = markdown_toolbar_button({icon: "list-ul fw", data: { "md-tag" => "* ", "md-prepend" => true }, title: "Add a bullet list" })
-          = markdown_toolbar_button({icon: "list-ol fw", data: { "md-tag" => "1. ", "md-prepend" => true }, title: "Add a numbered list" })
-          = markdown_toolbar_button({icon: "check-square-o fw", data: { "md-tag" => "* [ ] ", "md-prepend" => true }, title: "Add a task list" })
+          = markdown_toolbar_button({ icon: "bold fw", data: { "md-tag" => "**" }, title: "Add bold text" })
+          = markdown_toolbar_button({ icon: "italic fw", data: { "md-tag" => "*" }, title: "Add italic text" })
+          = markdown_toolbar_button({ icon: "quote-right fw", data: { "md-tag" => "> ", "md-prepend" => true }, title: "Insert a quote" })
+          = markdown_toolbar_button({ icon: "code fw", data: { "md-tag" => "`", "md-block" => "```" }, title: "Insert code" })
+          = markdown_toolbar_button({ icon: "list-ul fw", data: { "md-tag" => "* ", "md-prepend" => true }, title: "Add a bullet list" })
+          = markdown_toolbar_button({ icon: "list-ol fw", data: { "md-tag" => "1. ", "md-prepend" => true }, title: "Add a numbered list" })
+          = markdown_toolbar_button({ icon: "check-square-o fw", data: { "md-tag" => "* [ ] ", "md-prepend" => true }, title: "Add a task list" })
         .toolbar-group
-          %button.toolbar-btn.js-zen-enter.has-tooltip.hidden-xs{ type: "button", tabindex: -1, aria: { label: "Go full screen" }, title: "Go full screen", data: { container: "body" } }
-            =icon("arrows-alt fw")
+          %button.toolbar-btn.js-zen-enter.has-tooltip{ type: "button", tabindex: -1, aria: { label: "Go full screen" }, title: "Go full screen", data: { container: "body" } }
+            = icon("arrows-alt fw")
 
   .md-write-holder
     = yield
-  .md.md-preview-holder.js-md-preview.hide{class: (preview_class if defined?(preview_class))}
+  .md.md-preview-holder.js-md-preview.hide{ class: (preview_class if defined?(preview_class)) }
 
   - if defined?(referenced_users) && referenced_users
-    %div.referenced-users.hide
+    .referenced-users.hide
       %span
         = icon("exclamation-triangle")
         You are about to add
diff --git a/app/views/projects/_merge_request_merge_settings.html.haml b/app/views/projects/_merge_request_merge_settings.html.haml
new file mode 100644
index 00000000000..61420fd0fb6
--- /dev/null
+++ b/app/views/projects/_merge_request_merge_settings.html.haml
@@ -0,0 +1,19 @@
+- form = local_assigns.fetch(:form)
+
+.form-group
+  .checkbox.builds-feature
+    = form.label :only_allow_merge_if_pipeline_succeeds do
+      = form.check_box :only_allow_merge_if_pipeline_succeeds
+      %strong Only allow merge requests to be merged if the pipeline succeeds
+      %br
+      %span.descr
+        Pipelines need to be configured to enable this feature.
+        = link_to icon('question-circle'), help_page_path('user/project/merge_requests/merge_when_pipeline_succeeds', anchor: 'only-allow-merge-requests-to-be-merged-if-the-pipeline-succeeds')
+  .checkbox
+    = form.label :only_allow_merge_if_all_discussions_are_resolved do
+      = form.check_box :only_allow_merge_if_all_discussions_are_resolved
+      %strong Only allow merge requests to be merged if all discussions are resolved
+  .checkbox
+    = form.label :printing_merge_request_link_enabled do
+      = form.check_box :printing_merge_request_link_enabled
+      %strong Show link to create/view merge request when pushing from the command line
diff --git a/app/views/projects/_merge_request_settings.html.haml b/app/views/projects/_merge_request_settings.html.haml
index 6e143c4b570..818010bc7d3 100644
--- a/app/views/projects/_merge_request_settings.html.haml
+++ b/app/views/projects/_merge_request_settings.html.haml
@@ -1,18 +1,8 @@
-.merge-requests-feature
-  %fieldset.builds-feature
-    %hr
-    %h5.prepend-top-0
-      Merge Requests
-    .form-group
-      .checkbox
-        = f.label :only_allow_merge_if_build_succeeds do
-          = f.check_box :only_allow_merge_if_build_succeeds
-          %strong Only allow merge requests to be merged if the build succeeds
-          %br
-          %span.descr
-            Builds need to be configured to enable this feature.
-            = link_to icon('question-circle'), help_page_path('user/project/merge_requests/merge_when_build_succeeds', anchor: 'only-allow-merge-requests-to-be-merged-if-the-build-succeeds')
-      .checkbox
-        = f.label :only_allow_merge_if_all_discussions_are_resolved do
-          = f.check_box :only_allow_merge_if_all_discussions_are_resolved
-          %strong Only allow merge requests to be merged if all discussions are resolved
+- form = local_assigns.fetch(:form)
+
+%fieldset.features.merge-requests-feature.append-bottom-default
+  %hr
+  %h5.prepend-top-0
+    Merge Requests
+
+  = render 'projects/merge_request_merge_settings', form: form
diff --git a/app/views/projects/_readme.html.haml b/app/views/projects/_readme.html.haml
index 369a847e7d4..b6fb08b68e9 100644
--- a/app/views/projects/_readme.html.haml
+++ b/app/views/projects/_readme.html.haml
@@ -18,5 +18,5 @@
         distributed with computer software, forming part of its documentation.
       %p
         We recommend you to
-        = link_to "add a README", new_readme_path, class: 'underlined-link'
+        = link_to "add a README", add_special_file_path(@project, file_name: 'README.md'), class: 'underlined-link'
         file to the repository and GitLab will render it here instead of this message.
diff --git a/app/views/projects/_visibility_select.html.haml b/app/views/projects/_visibility_select.html.haml
new file mode 100644
index 00000000000..65fc0a36ca9
--- /dev/null
+++ b/app/views/projects/_visibility_select.html.haml
@@ -0,0 +1,7 @@
+- if can_change_visibility_level?(@project, current_user)
+  = form.select(model_method, visibility_select_options(@project, selected_level), {}, class: 'form-control visibility-select')
+- else
+  .info.js-locked{ data: { help_block: visibility_level_description(@project.visibility_level, @project) } }
+    = visibility_level_icon(@project.visibility_level)
+    %strong
+      = visibility_level_label(@project.visibility_level)
diff --git a/app/views/projects/_wiki.html.haml b/app/views/projects/_wiki.html.haml
index f00422dd7c0..41d42740f61 100644
--- a/app/views/projects/_wiki.html.haml
+++ b/app/views/projects/_wiki.html.haml
@@ -7,7 +7,7 @@
 - else
   - can_create_wiki = can?(current_user, :create_wiki, @project)
   .project-home-empty{ class: [('row-content-block' if can_create_wiki), ('content-block' unless can_create_wiki)] }
-    %div.text-center{ class: container_class }
+    .text-center{ class: container_class }
       %h4
         This project does not have a wiki homepage yet
       - if can_create_wiki
diff --git a/app/views/projects/activity.html.haml b/app/views/projects/activity.html.haml
index 3c0f01cbf6f..27c8e3c7fca 100644
--- a/app/views/projects/activity.html.haml
+++ b/app/views/projects/activity.html.haml
@@ -1,4 +1,5 @@
 - page_title "Activity"
+= render "projects/head"
 
 = render 'projects/last_push'
 
diff --git a/app/views/projects/artifacts/_tree_directory.html.haml b/app/views/projects/artifacts/_tree_directory.html.haml
index def493c56f5..9e49c93388a 100644
--- a/app/views/projects/artifacts/_tree_directory.html.haml
+++ b/app/views/projects/artifacts/_tree_directory.html.haml
@@ -1,6 +1,6 @@
 - path_to_directory = browse_namespace_project_build_artifacts_path(@project.namespace, @project, @build, path: directory.path)
 
-%tr.tree-item{ 'data-link' => path_to_directory}
+%tr.tree-item{ 'data-link' => path_to_directory }
   %td.tree-item-file-name
     = tree_icon('folder', '755', directory.name)
     %span.str-truncated
diff --git a/app/views/projects/artifacts/browse.html.haml b/app/views/projects/artifacts/browse.html.haml
index 539d07d634a..de8c173f26f 100644
--- a/app/views/projects/artifacts/browse.html.haml
+++ b/app/views/projects/artifacts/browse.html.haml
@@ -1,15 +1,14 @@
-- page_title 'Artifacts', "#{@build.name} (##{@build.id})", 'Builds'
-- header_title project_title(@project, "Builds", project_builds_path(@project))
+- page_title 'Artifacts', "#{@build.name} (##{@build.id})", 'Jobs'
 
 .top-block.row-content-block.clearfix
   .pull-right
     = link_to download_namespace_project_build_artifacts_path(@project.namespace, @project, @build),
-      class: 'btn btn-default download' do
+      rel: 'nofollow', download: '', class: 'btn btn-default download' do
       = icon('download')
       Download artifacts archive
 
 .tree-holder
-  %div.tree-content-holder
+  .tree-content-holder
     %table.table.tree-table
       %thead
         %tr
diff --git a/app/views/projects/blame/show.html.haml b/app/views/projects/blame/show.html.haml
index dfb96305f48..4ad77b6266d 100644
--- a/app/views/projects/blame/show.html.haml
+++ b/app/views/projects/blame/show.html.haml
@@ -7,13 +7,8 @@
 
   #blob-content-holder.tree-holder
     .file-holder
-      .file-title
-        = blob_icon @blob.mode, @blob.name
-        %strong
-          = @path
-        %small= number_to_human_size @blob.size
-        .file-actions
-          = render "projects/blob/actions"
+      = render "projects/blob/header", blob: @blob
+
       .table-responsive.file-content.blame.code.js-syntax-highlight
         %table
           - current_line = 1
@@ -31,12 +26,12 @@
                     &nbsp;
                   .light
                     = commit_author_link(commit, avatar: false)
-                    authored
-                    #{time_ago_with_tooltip(commit.committed_date, skip_js: true)}
+                    committed
+                    #{time_ago_with_tooltip(commit.committed_date)}
               %td.line-numbers
                 - line_count = blame_group[:lines].count
                 - (current_line...(current_line + line_count)).each do |i|
-                  %a.diff-line-num{href: "#L#{i}", id: "L#{i}", 'data-line-number' => i}
+                  %a.diff-line-num{ href: "#L#{i}", id: "L#{i}", 'data-line-number' => i }
                     = icon("link")
                     = i
                   \
diff --git a/app/views/projects/blob/_actions.html.haml b/app/views/projects/blob/_actions.html.haml
deleted file mode 100644
index ff893ea74e1..00000000000
--- a/app/views/projects/blob/_actions.html.haml
+++ /dev/null
@@ -1,22 +0,0 @@
-.btn-group.tree-btn-group
-  = link_to 'Raw', namespace_project_raw_path(@project.namespace, @project, @id),
-      class: 'btn btn-sm', target: '_blank'
-  -# only show normal/blame view links for text files
-  - if blob_text_viewable?(@blob)
-    - if current_page? namespace_project_blame_path(@project.namespace, @project, @id)
-      = link_to 'Normal View', namespace_project_blob_path(@project.namespace, @project, @id),
-          class: 'btn btn-sm'
-    - else
-      = link_to 'Blame', namespace_project_blame_path(@project.namespace, @project, @id),
-          class: 'btn btn-sm' unless @blob.empty?
-  = link_to 'History', namespace_project_commits_path(@project.namespace, @project, @id),
-      class: 'btn btn-sm'
-  = link_to 'Permalink', namespace_project_blob_path(@project.namespace, @project,
-      tree_join(@commit.sha, @path)), class: 'btn btn-sm'
-
-- if current_user
-  .btn-group{ role: "group" }
-    - if blob_text_viewable?(@blob)
-      = edit_blob_link
-    = replace_blob_link
-    = delete_blob_link
diff --git a/app/views/projects/blob/_blob.html.haml b/app/views/projects/blob/_blob.html.haml
index 149ee7c59d6..2b2ee6ed987 100644
--- a/app/views/projects/blob/_blob.html.haml
+++ b/app/views/projects/blob/_blob.html.haml
@@ -22,14 +22,7 @@
   - blob_commit = @repository.last_commit_for_path(@commit.id, blob.path)
   = render blob_commit, project: @project, ref: @ref
 
-%div#blob-content-holder.blob-content-holder
+#blob-content-holder.blob-content-holder
   %article.file-holder
-    .file-title
-      = blob_icon blob.mode, blob.name
-      %strong
-        = blob.name
-      %small
-        = number_to_human_size(blob_size(blob))
-      .file-actions.hidden-xs
-        = render "actions"
-    = render blob, blob: blob
+    = render "projects/blob/header", blob: blob
+    = render blob.to_partial_path(@project), blob: blob
diff --git a/app/views/projects/blob/_editor.html.haml b/app/views/projects/blob/_editor.html.haml
index 4a6aa92e3f3..e7adef5558a 100644
--- a/app/views/projects/blob/_editor.html.haml
+++ b/app/views/projects/blob/_editor.html.haml
@@ -1,5 +1,5 @@
 .file-holder.file.append-bottom-default
-  .file-title.clearfix
+  .js-file-title.file-title.clearfix
     .editor-ref
       = icon('code-fork')
       = ref
@@ -21,6 +21,8 @@
         = dropdown_tag("Choose a .gitignore template", options: { toggle_class: 'btn js-gitignore-selector', title: "Choose a template", filter: true, placeholder: "Filter", data: { data: gitignore_names } } )
       .gitlab-ci-yml-selector.js-gitlab-ci-yml-selector-wrap.hidden
         = dropdown_tag("Choose a GitLab CI Yaml template", options: { toggle_class: 'btn js-gitlab-ci-yml-selector', title: "Choose a template", filter: true, placeholder: "Filter", data: { data: gitlab_ci_ymls } } )
+      .dockerfile-selector.js-dockerfile-selector-wrap.hidden
+        = dropdown_tag("Choose a Dockerfile template", options: { toggle_class: 'btn js-dockerfile-selector', title: "Choose a template", filter: true, placeholder: "Filter", data: { data: dockerfile_names } } )
       = button_tag class: 'soft-wrap-toggle btn', type: 'button' do
         %span.no-wrap
           = custom_icon('icon_no_wrap')
@@ -32,7 +34,7 @@
         = select_tag :encoding, options_for_select([ "base64", "text" ], "text"), class: 'select2'
 
   .file-editor.code
-    %pre.js-edit-mode-pane#editor #{params[:content] || local_assigns[:blob_data]}
+    %pre.js-edit-mode-pane#editor= params[:content] || local_assigns[:blob_data]
     - if local_assigns[:path]
       .js-edit-mode-pane#preview.hide
         .center
diff --git a/app/views/projects/blob/_header.html.haml b/app/views/projects/blob/_header.html.haml
new file mode 100644
index 00000000000..deeeae3d64a
--- /dev/null
+++ b/app/views/projects/blob/_header.html.haml
@@ -0,0 +1,39 @@
+.js-file-title.file-title-flex-parent
+  .file-header-content
+    = blob_icon blob.mode, blob.name
+
+    %strong.file-title-name
+      = blob.name
+
+    = copy_file_path_button(blob.path)
+
+    %small
+      = number_to_human_size(blob_size(blob))
+
+  .file-actions.hidden-xs
+    .btn-group{ role: "group" }<
+      = copy_blob_content_button(blob) if blob_text_viewable?(blob)
+      = open_raw_file_button(namespace_project_raw_path(@project.namespace, @project, @id))
+      = view_on_environment_button(@commit.sha, @path, @environment) if @environment
+
+    .btn-group{ role: "group" }<
+      -# only show normal/blame view links for text files
+      - if blob_text_viewable?(blob)
+        - if current_page? namespace_project_blame_path(@project.namespace, @project, @id)
+          = link_to 'Normal View', namespace_project_blob_path(@project.namespace, @project, @id),
+              class: 'btn btn-sm'
+        - else
+          = link_to 'Blame', namespace_project_blame_path(@project.namespace, @project, @id),
+              class: 'btn btn-sm js-blob-blame-link' unless blob.empty?
+
+      = link_to 'History', namespace_project_commits_path(@project.namespace, @project, @id),
+          class: 'btn btn-sm'
+
+      = link_to 'Permalink', namespace_project_blob_path(@project.namespace, @project,
+          tree_join(@commit.sha, @path)), class: 'btn btn-sm js-data-file-blob-permalink-url'
+
+    - if current_user
+      .btn-group{ role: "group" }<
+        = edit_blob_link if blob_text_viewable?(blob)
+        = replace_blob_link
+        = delete_blob_link
diff --git a/app/views/projects/blob/_image.html.haml b/app/views/projects/blob/_image.html.haml
index 4c356d1f07f..ea3cecb86a9 100644
--- a/app/views/projects/blob/_image.html.haml
+++ b/app/views/projects/blob/_image.html.haml
@@ -1,15 +1,15 @@
 .file-content.image_file
   - if blob.svg?
     - if blob.size_within_svg_limits?
-      - # We need to scrub SVG but we cannot do so in the RawController: it would
-      - # be wrong/strange if RawController modified the data.
+      -# We need to scrub SVG but we cannot do so in the RawController: it would
+      -# be wrong/strange if RawController modified the data.
       - blob.load_all_data!(@repository)
       - blob = sanitize_svg(blob)
-      %img{src: "data:#{blob.mime_type};base64,#{Base64.encode64(blob.data)}"}
+      %img{ src: "data:#{blob.mime_type};base64,#{Base64.encode64(blob.data)}", alt: "#{blob.name}" }
     - else
       .nothing-here-block
         The SVG could not be displayed as it is too large, you can
-        #{link_to('view the raw file', namespace_project_raw_path(@project.namespace, @project, @id), target: '_blank')}
+        #{link_to('view the raw file', namespace_project_raw_path(@project.namespace, @project, @id), target: '_blank', rel: 'noopener noreferrer')}
         instead.
   - else
-    %img{src: namespace_project_raw_path(@project.namespace, @project, tree_join(@commit.id, blob.path))}
+    %img{ src: namespace_project_raw_path(@project.namespace, @project, tree_join(@commit.id, blob.path)), alt: "#{blob.name}" }
diff --git a/app/views/projects/blob/_new_dir.html.haml b/app/views/projects/blob/_new_dir.html.haml
index 84694203d7d..7f470b890ba 100644
--- a/app/views/projects/blob/_new_dir.html.haml
+++ b/app/views/projects/blob/_new_dir.html.haml
@@ -2,7 +2,7 @@
   .modal-dialog
     .modal-content
       .modal-header
-        %a.close{href: "#", "data-dismiss" => "modal"} ×
+        %a.close{ href: "#", "data-dismiss" => "modal" } ×
         %h3.page-title Create New Directory
       .modal-body
         = form_tag namespace_project_create_dir_path(@project.namespace, @project, @id), method: :post, remote: false, class: 'form-horizontal js-create-dir-form js-quick-submit js-requires-input' do
diff --git a/app/views/projects/blob/_notebook.html.haml b/app/views/projects/blob/_notebook.html.haml
new file mode 100644
index 00000000000..ab1cf933944
--- /dev/null
+++ b/app/views/projects/blob/_notebook.html.haml
@@ -0,0 +1,5 @@
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('common_vue')
+  = page_specific_javascript_bundle_tag('notebook_viewer')
+
+.file-content#js-notebook-viewer{ data: { endpoint: namespace_project_raw_path(@project.namespace, @project, @id) } }
diff --git a/app/views/projects/blob/_remove.html.haml b/app/views/projects/blob/_remove.html.haml
index 2e1f32fd15e..db6662a95ac 100644
--- a/app/views/projects/blob/_remove.html.haml
+++ b/app/views/projects/blob/_remove.html.haml
@@ -2,7 +2,7 @@
   .modal-dialog
     .modal-content
       .modal-header
-        %a.close{href: "#", "data-dismiss" => "modal"} ×
+        %a.close{ href: "#", "data-dismiss" => "modal" } ×
         %h3.page-title Delete #{@blob.name}
 
       .modal-body
diff --git a/app/views/projects/blob/_text.html.haml b/app/views/projects/blob/_text.html.haml
index 58524418a67..7b16d266982 100644
--- a/app/views/projects/blob/_text.html.haml
+++ b/app/views/projects/blob/_text.html.haml
@@ -3,17 +3,17 @@
     .nothing-here-block
       File too large, you can
       = succeed '.' do
-        = link_to 'view the raw file', namespace_project_raw_path(@project.namespace, @project, @id), target: '_blank'
+        = link_to 'view the raw file', namespace_project_raw_path(@project.namespace, @project, @id), target: '_blank', rel: 'noopener noreferrer'
 
 - else
   - blob.load_all_data!(@repository)
 
-  - if markup?(blob.name)
-    .file-content.wiki
-      = render_markup(blob.name, blob.data)
+  - if blob.empty?
+    .file-content.code
+      .nothing-here-block Empty file
   - else
-    - if blob.empty?
-      .file-content.code
-        .nothing-here-block Empty file
+    - if markup?(blob.name)
+      .file-content.wiki
+        = render_markup(blob.name, blob.data)
     - else
       = render 'shared/file_highlight', blob: blob, repository: @repository
diff --git a/app/views/projects/blob/_upload.html.haml b/app/views/projects/blob/_upload.html.haml
index 57a27ec904e..e14885f264b 100644
--- a/app/views/projects/blob/_upload.html.haml
+++ b/app/views/projects/blob/_upload.html.haml
@@ -2,17 +2,17 @@
   .modal-dialog
     .modal-content
       .modal-header
-        %a.close{href: "#", "data-dismiss" => "modal"} ×
-        %h3.page-title #{title}
+        %a.close{ href: "#", "data-dismiss" => "modal" } ×
+        %h3.page-title= title
       .modal-body
-        = form_tag form_path, method: method, class: 'js-quick-submit js-upload-blob-form form-horizontal' do
+        = form_tag form_path, method: method, class: 'js-quick-submit js-upload-blob-form form-horizontal', data: { method: method } do
           .dropzone
             .dropzone-previews.blob-upload-dropzone-previews
               %p.dz-message.light
                 Attach a file by drag &amp; drop or
                 = link_to 'click to upload', '#', class: "markdown-selector"
           %br
-          .dropzone-alerts{class: "alert alert-danger data", style: "display:none"}
+          .dropzone-alerts.alert.alert-danger.data{ style: "display:none" }
 
           = render 'shared/new_commit_form', placeholder: placeholder
 
@@ -24,8 +24,5 @@
               .inline.prepend-left-10
                 = commit_in_fork_help
 
-
-:javascript
-  gl.utils.disableButtonIfEmptyField($('.js-upload-blob-form').find('.js-commit-message'), '.btn-upload-file');
-  new BlobFileDropzone($('.js-upload-blob-form'), '#{method}');
-  new NewCommitForm($('.js-upload-blob-form'))
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('blob')
diff --git a/app/views/projects/blob/diff.html.haml b/app/views/projects/blob/diff.html.haml
index a79ae53c780..d1d448f0d4c 100644
--- a/app/views/projects/blob/diff.html.haml
+++ b/app/views/projects/blob/diff.html.haml
@@ -9,22 +9,22 @@
     - line_old = line_new - @form.offset
     - line_content = capture do
       %td.line_content.noteable_line{ class: line_class }==#{' ' * @form.indent}#{line}
-    %tr.line_holder{ id: line_old, class: line_class }
+    %tr.line_holder.diff-expanded{ id: line_old, class: line_class }
       - case diff_view
       - when :inline
         %td.old_line.diff-line-num{ data: { linenumber: line_old } }
-          %a{href: "##{line_old}", data: { linenumber: line_old }}
+          %a{ href: "#", data: { linenumber: line_old }, disabled: true }
         %td.new_line.diff-line-num{ data: { linenumber: line_new } }
-          %a{href: "##{line_new}", data: { linenumber: line_new }}
+          %a{ href: "#", data: { linenumber: line_new }, disabled: true }
         = line_content
       - when :parallel
-        %td.old_line.diff-line-num{data: { linenumber: line_old }}
-          = link_to raw(line_old), "##{line_old}"
+        %td.old_line.diff-line-num{ data: { linenumber: line_old } }
+          %a{ href: "##{line_old}", data: { linenumber: line_old }, disabled: true }
         = line_content
-        %td.new_line.diff-line-num{data: { linenumber: line_new }}
-          = link_to raw(line_new), "##{line_new}"
+        %td.new_line.diff-line-num{ data: { linenumber: line_new } }
+          %a{ href: "##{line_new}", data: { linenumber: line_new }, disabled: true }
         = line_content
 
-  - if @form.unfold? && @form.bottom? && @form.to < @blob.loc
+  - if @form.unfold? && @form.bottom? && @form.to < @blob.lines.size
     %tr.line_holder{ id: @form.to, class: line_class }
-      = diff_match_line @form.to, @form.to, text: @match_line, view: diff_view, bottom: true
+      = diff_match_line @form.to - @form.offset, @form.to, text: @match_line, view: diff_view, bottom: true
diff --git a/app/views/projects/blob/edit.html.haml b/app/views/projects/blob/edit.html.haml
index 2a0352a71b7..afe0b5dba45 100644
--- a/app/views/projects/blob/edit.html.haml
+++ b/app/views/projects/blob/edit.html.haml
@@ -2,14 +2,14 @@
 - page_title "Edit", @blob.path, @ref
 - content_for :page_specific_javascripts do
   = page_specific_javascript_tag('lib/ace.js')
-  = page_specific_javascript_tag('blob_edit/blob_edit_bundle.js')
+  = page_specific_javascript_bundle_tag('blob')
 = render "projects/commits/head"
 
 %div{ class: container_class }
   - if @conflict
     .alert.alert-danger
       Someone edited the file the same time you did. Please check out
-      = link_to "the file", namespace_project_blob_path(@project.namespace, @project, tree_join(@target_branch, @file_path)), target: "_blank"
+      = link_to "the file", namespace_project_blob_path(@project.namespace, @project, tree_join(@target_branch, @file_path)), target: "_blank", rel: 'noopener noreferrer'
       and make sure your changes will not unintentionally remove theirs.
 
   .file-editor
@@ -27,5 +27,5 @@
       = render 'shared/new_commit_form', placeholder: "Update #{@blob.name}"
       = hidden_field_tag 'last_commit_sha', @last_commit_sha
       = hidden_field_tag 'content', '', id: "file-content"
-      = hidden_field_tag 'from_merge_request_id', params[:from_merge_request_id]
+      = hidden_field_tag 'from_merge_request_iid', params[:from_merge_request_iid]
       = render 'projects/commit_button', ref: @ref, cancel_path: namespace_project_blob_path(@project.namespace, @project, @id)
diff --git a/app/views/projects/blob/new.html.haml b/app/views/projects/blob/new.html.haml
index b6ed9518c48..4c449e040ee 100644
--- a/app/views/projects/blob/new.html.haml
+++ b/app/views/projects/blob/new.html.haml
@@ -1,7 +1,7 @@
 - page_title "New File", @path.presence, @ref
 - content_for :page_specific_javascripts do
   = page_specific_javascript_tag('lib/ace.js')
-  = page_specific_javascript_tag('blob_edit/blob_edit_bundle.js')
+  = page_specific_javascript_bundle_tag('blob')
 
 %h3.page-title
   New File
diff --git a/app/views/projects/blob/preview.html.haml b/app/views/projects/blob/preview.html.haml
index 541dc96c45f..5cafb644b40 100644
--- a/app/views/projects/blob/preview.html.haml
+++ b/app/views/projects/blob/preview.html.haml
@@ -20,6 +20,6 @@
                 - else
                   %td.old_line.diff-line-num
                   %td.new_line.diff-line-num
-                  %td.line_content{class: "#{line.type}"}= diff_line_content(line.text)
+                  %td.line_content{ class: "#{line.type}" }= diff_line_content(line.text)
         - else
           .nothing-here-block No changes.
diff --git a/app/views/projects/blob/show.html.haml b/app/views/projects/blob/show.html.haml
index 0ab78a39cf9..b6738c3380f 100644
--- a/app/views/projects/blob/show.html.haml
+++ b/app/views/projects/blob/show.html.haml
@@ -5,7 +5,7 @@
 %div{ class: container_class }
   = render 'projects/last_push'
 
-  %div#tree-holder.tree-holder
+  #tree-holder.tree-holder
     = render 'blob', blob: @blob
 
   - if can_edit_blob?(@blob)
diff --git a/app/views/projects/boards/_show.html.haml b/app/views/projects/boards/_show.html.haml
new file mode 100644
index 00000000000..added3f669b
--- /dev/null
+++ b/app/views/projects/boards/_show.html.haml
@@ -0,0 +1,39 @@
+- @no_container = true
+- @content_class = "issue-boards-content"
+- page_title "Boards"
+
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('common_vue')
+  = page_specific_javascript_bundle_tag('filtered_search')
+  = page_specific_javascript_bundle_tag('boards')
+  = page_specific_javascript_bundle_tag('simulate_drag') if Rails.env.test?
+
+  %script#js-board-template{ type: "text/x-template" }= render "projects/boards/components/board"
+  %script#js-board-list-template{ type: "text/x-template" }= render "projects/boards/components/board_list"
+  %script#js-board-modal-filter{ type: "text/x-template" }= render "shared/issuable/search_bar", type: :boards_modal
+
+= render "projects/issues/head"
+
+.hidden-xs.hidden-sm
+  = render 'shared/issuable/search_bar', type: :boards
+
+#board-app.boards-app{ "v-cloak" => true, data: board_data }
+  .boards-list{ ":class" => "{ 'is-compact': detailIssueVisible }" }
+    .boards-app-loading.text-center{ "v-if" => "loading" }
+      = icon("spinner spin")
+    %board{ "v-cloak" => true,
+      "v-for" => "list in state.lists",
+      "ref" => "board",
+      ":list" => "list",
+      ":disabled" => "disabled",
+      ":issue-link-base" => "issueLinkBase",
+      ":root-path" => "rootPath",
+      ":key" => "_uid" }
+  = render "projects/boards/components/sidebar"
+  %board-add-issues-modal{ "blank-state-image" => render('shared/empty_states/icons/issues.svg'),
+    "new-issue-path" => new_namespace_project_issue_path(@project.namespace, @project),
+    "milestone-path" => milestones_filter_dropdown_path,
+    "label-path" => labels_filter_path,
+    ":issue-link-base" => "issueLinkBase",
+    ":root-path" => "rootPath",
+    ":project-id" => @project.try(:id) }
diff --git a/app/views/projects/boards/components/_blank_state.html.haml b/app/views/projects/boards/components/_blank_state.html.haml
deleted file mode 100644
index 97eb952eff1..00000000000
--- a/app/views/projects/boards/components/_blank_state.html.haml
+++ /dev/null
@@ -1,15 +0,0 @@
-%board-blank-state{ "inline-template" => true,
-  "v-if" => "list.id == 'blank'" }
-  .board-blank-state
-    %p
-      Add the following default lists to your Issue Board with one click:
-    %ul.board-blank-state-list
-      %li{ "v-for" => "label in predefinedLabels" }
-        %span.label-color{ ":style" =>  "{ backgroundColor: label.color } " }
-        {{ label.title }}
-    %p
-      Starting out with the default set of lists will get you right on the way to making the most of your board.
-    %button.btn.btn-create.btn-inverted.btn-block{ type: "button", "@click.stop" => "addDefaultLists" }
-      Add default lists
-    %button.btn.btn-default.btn-block{ type: "button", "@click.stop" => "clearBlankState" }
-      Nevermind, I'll use my own
diff --git a/app/views/projects/boards/components/_board.html.haml b/app/views/projects/boards/components/_board.html.haml
index f7071051efc..5a4eaf92b16 100644
--- a/app/views/projects/boards/components/_board.html.haml
+++ b/app/views/projects/boards/components/_board.html.haml
@@ -1,80 +1,35 @@
-%board{ "inline-template" => true,
-  "v-cloak" => true,
-  "v-for" => "list in state.lists | orderBy 'position'",
-  "v-ref:board" => true,
-  ":list" => "list",
-  ":disabled" => "disabled",
-  ":issue-link-base" => "issueLinkBase",
-  "track-by" => "_uid" }
-  .board{ ":class" => "{ 'is-draggable': !list.preset }",
-    ":data-id" => "list.id" }
-    .board-inner
-      %header.board-header{ ":class" => "{ 'has-border': list.label }", ":style" => "{ borderTopColor: (list.label ? list.label.color : null) }" }
-        %h3.board-title.js-board-handle{ ":class" => "{ 'user-can-drag': (!disabled && !list.preset) }" }
-          %span.has-tooltip{ ":title" => "(list.label ? list.label.description : '')",
-            data: { container: "body", placement: "bottom" } }
-            {{ list.title }}
-          .board-issue-count-holder.pull-right.clearfix{ "v-if" => "list.type !== 'blank'" }
-            %span.board-issue-count.pull-left{ ":class" => "{ 'has-btn': list.type !== 'done' }" }
-              {{ list.issuesSize }}
-            - if can?(current_user, :admin_issue, @project)
-              %button.btn.btn-small.btn-default.pull-right.has-tooltip{ type: "button",
-                "@click" => "showNewIssueForm",
-                "v-if" => "list.type !== 'done'",
-                "aria-label" => "Add an issue",
-                "title" => "Add an issue",
-                data: { placement: "top", container: "body" } }
-                = icon("plus")
-          - if can?(current_user, :admin_list, @project)
-            %board-delete{ "inline-template" => true,
-              ":list" => "list",
-              "v-if" => "!list.preset && list.id" }
-              %button.board-delete.has-tooltip.pull-right{ type: "button", title: "Delete list", "aria-label" => "Delete list", data: { placement: "bottom" }, "@click.stop" => "deleteBoard" }
-                = icon("trash")
-      %board-list{ "inline-template" => true,
-        "v-if" => "list.type !== 'blank'",
-        ":list" => "list",
-        ":issues" => "list.issues",
-        ":loading" => "list.loading",
-        ":disabled" => "disabled",
-        ":show-issue-form.sync" => "showIssueForm",
-        ":issue-link-base" => "issueLinkBase" }
-        .board-list-loading.text-center{ "v-if" => "loading" }
-          = icon("spinner spin")
-        - if can? current_user, :create_issue, @project
-          %board-new-issue{ "inline-template" => true,
+.board{ ":class" => '{ "is-draggable": !list.preset }',
+  ":data-id" => "list.id" }
+  .board-inner
+    %header.board-header{ ":class" => '{ "has-border": list.label }', ":style" => "{ borderTopColor: (list.label ? list.label.color : null) }" }
+      %h3.board-title.js-board-handle{ ":class" => '{ "user-can-drag": (!disabled && !list.preset) }' }
+        %span.has-tooltip{ ":title" => '(list.label ? list.label.description : "")',
+          data: { container: "body", placement: "bottom" } }
+          {{ list.title }}
+        .board-issue-count-holder.pull-right.clearfix{ "v-if" => 'list.type !== "blank"' }
+          %span.board-issue-count.pull-left{ ":class" => '{ "has-btn": list.type !== "closed" && !disabled }' }
+            {{ list.issuesSize }}
+          - if can?(current_user, :admin_issue, @project)
+            %button.btn.btn-small.btn-default.pull-right.has-tooltip{ type: "button",
+              "@click" => "showNewIssueForm",
+              "v-if" => 'list.type !== "closed"',
+              "aria-label" => "Add an issue",
+              "title" => "Add an issue",
+              data: { placement: "top", container: "body" } }
+              = icon("plus")
+        - if can?(current_user, :admin_list, @project)
+          %board-delete{ "inline-template" => true,
             ":list" => "list",
-            ":show-issue-form.sync" => "showIssueForm",
-            "v-show" => "list.type !== 'done' && showIssueForm" }
-            .card.board-new-issue-form
-              %form{ "@submit" => "submit($event)" }
-                .flash-container{ "v-if" => "error" }
-                  .flash-alert
-                    An error occured. Please try again.
-                %label.label-light{ ":for" => "list.id + '-title'" }
-                  Title
-                %input.form-control{ type: "text",
-                  "v-model" => "title",
-                  "v-el:input" => true,
-                  ":id" => "list.id + '-title'" }
-                .clearfix.prepend-top-10
-                  %button.btn.btn-success.pull-left{ type: "submit",
-                    ":disabled" => "title === ''",
-                    "v-el:submit-button" => true }
-                    Submit issue
-                  %button.btn.btn-default.pull-right{ type: "button",
-                    "@click" => "cancel" }
-                    Cancel
-        %ul.board-list{ "v-el:list" => true,
-          "v-show" => "!loading",
-          ":data-board" => "list.id",
-          ":class" => "{ 'is-smaller': showIssueForm }" }
-          = render "projects/boards/components/card"
-          %li.board-list-count.text-center{ "v-if" => "showCount" }
-            = icon("spinner spin", "v-show" => "list.loadingMore" )
-            %span{ "v-if" => "list.issues.length === list.issuesSize" }
-              Showing all issues
-            %span{ "v-else" => true }
-              Showing {{ list.issues.length }} of {{ list.issuesSize }} issues
-      - if can?(current_user, :admin_list, @project)
-        = render "projects/boards/components/blank_state"
+            "v-if" => "!list.preset && list.id" }
+            %button.board-delete.has-tooltip.pull-right{ type: "button", title: "Delete list", "aria-label" => "Delete list", data: { placement: "bottom" }, "@click.stop" => "deleteBoard" }
+              = icon("trash")
+    %board-list{ "v-if" => 'list.type !== "blank"',
+      ":list" => "list",
+      ":issues" => "list.issues",
+      ":loading" => "list.loading",
+      ":disabled" => "disabled",
+      ":issue-link-base" => "issueLinkBase",
+      ":root-path" => "rootPath",
+      "ref" => "board-list" }
+    - if can?(current_user, :admin_list, @project)
+      %board-blank-state{ "v-if" => 'list.id == "blank"' }
diff --git a/app/views/projects/boards/components/_board_list.html.haml b/app/views/projects/boards/components/_board_list.html.haml
new file mode 100644
index 00000000000..4a0b2110601
--- /dev/null
+++ b/app/views/projects/boards/components/_board_list.html.haml
@@ -0,0 +1,26 @@
+.board-list-component
+  .board-list-loading.text-center{ "v-if" => "loading" }
+    = icon("spinner spin")
+  - if can? current_user, :create_issue, @project
+    %board-new-issue{ ":list" => "list",
+      "v-if" => 'list.type !== "closed" && showIssueForm' }
+  %ul.board-list{ "ref" => "list",
+    "v-show" => "!loading",
+    ":data-board" => "list.id",
+    ":class" => '{ "is-smaller": showIssueForm }' }
+    %board-card{ "v-for" => "(issue, index) in issues",
+      "ref" => "issue",
+      ":index" => "index",
+      ":list" => "list",
+      ":issue" => "issue",
+      ":issue-link-base" => "issueLinkBase",
+      ":root-path" => "rootPath",
+      ":disabled" => "disabled",
+      ":key" => "issue.id" }
+    %li.board-list-count.text-center{ "v-if" => "showCount",
+      "data-issue-id" => "-1" }
+      = icon("spinner spin", "v-show" => "list.loadingMore" )
+      %span{ "v-if" => "list.issues.length === list.issuesSize" }
+        Showing all issues
+      %span{ "v-else" => true }
+        Showing {{ list.issues.length }} of {{ list.issuesSize }} issues
diff --git a/app/views/projects/boards/components/_card.html.haml b/app/views/projects/boards/components/_card.html.haml
deleted file mode 100644
index 8fce702314c..00000000000
--- a/app/views/projects/boards/components/_card.html.haml
+++ /dev/null
@@ -1,36 +0,0 @@
-%board-card{ "inline-template" => true,
-  "v-for" => "issue in issues | orderBy 'priority'",
-  "v-ref:issue" => true,
-  ":index" => "$index",
-  ":list" => "list",
-  ":issue" => "issue",
-  ":issue-link-base" => "issueLinkBase",
-  ":disabled" => "disabled",
-  "track-by" => "id" }
-  %li.card{ ":class" => "{ 'user-can-drag': !disabled && issue.id, 'is-disabled': disabled || !issue.id, 'is-active': issueDetailVisible }",
-    ":index" => "index",
-    "@mousedown" => "mouseDown",
-    "@mouseMove" => "mouseMove",
-    "@mouseup" => "showIssue($event)" }
-    %h4.card-title
-      = icon("eye-slash", class: "confidential-icon", "v-if" => "issue.confidential")
-      %a{ ":href" => "issueLinkBase + '/' + issue.id",
-        ":title" => "issue.title" }
-        {{ issue.title }}
-    .card-footer
-      %span.card-number{ "v-if" => "issue.id" }
-        = precede '#' do
-          {{ issue.id }}
-      %a.has-tooltip{ ":href" => "'#{root_path}' + issue.assignee.username",
-        ":title" => "'Assigned to ' + issue.assignee.name",
-        "v-if" => "issue.assignee",
-        data: { container: 'body' } }
-        %img.avatar.avatar-inline.s20{ ":src" => "issue.assignee.avatar", width: 20, height: 20 }
-      %button.label.color-label.has-tooltip{ "v-for" => "label in issue.labels",
-        type: "button",
-        "v-if" => "(!list.label || label.id !== list.label.id)",
-        "@click" => "filterByLabel(label, $event)",
-        ":style" => "{ backgroundColor: label.color, color: label.textColor }",
-        ":title" => "label.description",
-        data: { container: 'body' } }
-        {{ label.title }}
diff --git a/app/views/projects/boards/components/_sidebar.html.haml b/app/views/projects/boards/components/_sidebar.html.haml
index f0c0c6953e0..24d76da6f06 100644
--- a/app/views/projects/boards/components/_sidebar.html.haml
+++ b/app/views/projects/boards/components/_sidebar.html.haml
@@ -1,23 +1,26 @@
 %board-sidebar{ "inline-template" => true,
-  ":current-user" => "#{current_user.to_json(only: [:username, :id, :name], methods: [:avatar_url]) if current_user}" }
-  %aside.right-sidebar.right-sidebar-expanded.issue-boards-sidebar{ "v-show" => "showSidebar" }
-    .issuable-sidebar
-      .block.issuable-sidebar-header
-        %span.issuable-header-text.hide-collapsed.pull-left
-          %strong
-            {{ issue.title }}
-          %br/
-          %span
-            = precede "#" do
-              {{ issue.id }}
-        %a.gutter-toggle.pull-right{ role: "button",
-          href: "#",
-          "@click.prevent" => "closeSidebar",
-          "aria-label" => "Toggle sidebar" }
-          = custom_icon("icon_close", size: 15)
-      .js-issuable-update
-        = render "projects/boards/components/sidebar/assignee"
-        = render "projects/boards/components/sidebar/milestone"
-        = render "projects/boards/components/sidebar/due_date"
-        = render "projects/boards/components/sidebar/labels"
-        = render "projects/boards/components/sidebar/notifications"
+  ":current-user" => "#{current_user ? current_user.to_json(only: [:username, :id, :name], methods: [:avatar_url]) : {}}" }
+  %transition{ name: "boards-sidebar-slide" }
+    %aside.right-sidebar.right-sidebar-expanded.issue-boards-sidebar{ "v-show" => "showSidebar" }
+      .issuable-sidebar
+        .block.issuable-sidebar-header
+          %span.issuable-header-text.hide-collapsed.pull-left
+            %strong
+              {{ issue.title }}
+            %br/
+            %span
+              = precede "#" do
+                {{ issue.id }}
+          %a.gutter-toggle.pull-right{ role: "button",
+            href: "#",
+            "@click.prevent" => "closeSidebar",
+            "aria-label" => "Toggle sidebar" }
+            = custom_icon("icon_close", size: 15)
+        .js-issuable-update
+          = render "projects/boards/components/sidebar/assignee"
+          = render "projects/boards/components/sidebar/milestone"
+          = render "projects/boards/components/sidebar/due_date"
+          = render "projects/boards/components/sidebar/labels"
+          = render "projects/boards/components/sidebar/notifications"
+          %remove-btn{ ":issue" => "issue",
+            ":list" => "list" }
diff --git a/app/views/projects/boards/components/sidebar/_assignee.html.haml b/app/views/projects/boards/components/sidebar/_assignee.html.haml
index 604e13858d1..e75ce305440 100644
--- a/app/views/projects/boards/components/sidebar/_assignee.html.haml
+++ b/app/views/projects/boards/components/sidebar/_assignee.html.haml
@@ -1,8 +1,8 @@
 .block.assignee
   .title.hide-collapsed
     Assignee
-    = icon("spinner spin", class: "block-loading")
     - if can?(current_user, :admin_issue, @project)
+      = icon("spinner spin", class: "block-loading")
       = link_to "Edit", "#", class: "edit-link pull-right"
   .value.hide-collapsed
     %span.assign-yourself.no-value{ "v-if" => "!issue.assignee" }
@@ -14,7 +14,7 @@
     %a.author_link.bold{ ":href" => "'#{root_url}' + issue.assignee.username",
       "v-if" => "issue.assignee" }
       %img.avatar.avatar-inline.s32{ ":src" => "issue.assignee.avatar",
-        width: "32" }
+        width: "32", alt: "Avatar" }
       %span.author
         {{ issue.assignee.name }}
       %span.username
diff --git a/app/views/projects/boards/components/sidebar/_due_date.html.haml b/app/views/projects/boards/components/sidebar/_due_date.html.haml
index c7da1d0d4ac..1a3b88e28c5 100644
--- a/app/views/projects/boards/components/sidebar/_due_date.html.haml
+++ b/app/views/projects/boards/components/sidebar/_due_date.html.haml
@@ -1,8 +1,8 @@
 .block.due_date
   .title
     Due date
-    = icon("spinner spin", class: "block-loading")
     - if can?(current_user, :admin_issue, @project)
+      = icon("spinner spin", class: "block-loading")
       = link_to "Edit", "#", class: "edit-link pull-right"
   .value
     .value-content
diff --git a/app/views/projects/boards/components/sidebar/_labels.html.haml b/app/views/projects/boards/components/sidebar/_labels.html.haml
index ce68e5e1998..0f0a84c156d 100644
--- a/app/views/projects/boards/components/sidebar/_labels.html.haml
+++ b/app/views/projects/boards/components/sidebar/_labels.html.haml
@@ -1,8 +1,8 @@
 .block.labels
   .title
     Labels
-    = icon("spinner spin", class: "block-loading")
     - if can?(current_user, :admin_issue, @project)
+      = icon("spinner spin", class: "block-loading")
       = link_to "Edit", "#", class: "edit-link pull-right"
   .value.issuable-show-labels
     %span.no-value{ "v-if" => "issue.labels && issue.labels.length === 0" }
diff --git a/app/views/projects/boards/components/sidebar/_milestone.html.haml b/app/views/projects/boards/components/sidebar/_milestone.html.haml
index 3cd20d1c0f7..008d1186478 100644
--- a/app/views/projects/boards/components/sidebar/_milestone.html.haml
+++ b/app/views/projects/boards/components/sidebar/_milestone.html.haml
@@ -1,8 +1,8 @@
 .block.milestone
   .title
     Milestone
-    = icon("spinner spin", class: "block-loading")
     - if can?(current_user, :admin_issue, @project)
+      = icon("spinner spin", class: "block-loading")
       = link_to "Edit", "#", class: "edit-link pull-right"
   .value
     %span.no-value{ "v-if" => "!issue.milestone" }
diff --git a/app/views/projects/boards/components/sidebar/_notifications.html.haml b/app/views/projects/boards/components/sidebar/_notifications.html.haml
index 21c9563e9db..a08c7f2af09 100644
--- a/app/views/projects/boards/components/sidebar/_notifications.html.haml
+++ b/app/views/projects/boards/components/sidebar/_notifications.html.haml
@@ -1,11 +1,7 @@
 - if current_user
   .block.light.subscription{ ":data-url" => "'#{namespace_project_issues_path(@project.namespace, @project)}/' + issue.id + '/toggle_subscription'" }
-    .title
+    %span.issuable-header-text.hide-collapsed.pull-left
       Notifications
-    %button.btn.btn-block.btn-default.js-subscribe-button.issuable-subscribe-button.hide-collapsed{ type: "button" }
-      {{ issue.subscribed ? 'Unsubscribe' : 'Subscribe' }}
-    .subscription-status{ ":data-status" => "issue.subscribed ? 'subscribed' : 'unsubscribed'" }
-      .unsubscribed{ "v-show" => "!issue.subscribed" }
-        You're not receiving notifications from this thread.
-      .subscribed{ "v-show" => "issue.subscribed" }
-        You're receiving notifications because you're subscribed to this thread.
+    %button.btn.btn-default.pull-right.js-subscribe-button.issuable-subscribe-button.hide-collapsed{ type: "button" }
+      %span
+        {{issue.subscribed ? 'Unsubscribe' : 'Subscribe'}}
diff --git a/app/views/projects/boards/index.html.haml b/app/views/projects/boards/index.html.haml
index 29c9a43a0c1..2a5b8b1441e 100644
--- a/app/views/projects/boards/index.html.haml
+++ b/app/views/projects/boards/index.html.haml
@@ -1,18 +1 @@
-- @no_container = true
-- @content_class = "issue-boards-content"
-- page_title "Boards"
-
-- content_for :page_specific_javascripts do
-  = page_specific_javascript_tag('boards/boards_bundle.js')
-  = page_specific_javascript_tag('boards/test_utils/simulate_drag.js') if Rails.env.test?
-
-= render "projects/issues/head"
-
-= render 'shared/issuable/filter', type: :boards
-
-#board-app.boards-app{ "v-cloak" => true, data: board_data }
-  .boards-list{ ":class" => "{ 'is-compact': detailIssueVisible }" }
-    .boards-app-loading.text-center{ "v-if" => "loading" }
-      = icon("spinner spin")
-    = render "projects/boards/components/board"
-  = render "projects/boards/components/sidebar"
+= render "show"
diff --git a/app/views/projects/boards/show.html.haml b/app/views/projects/boards/show.html.haml
index 29c9a43a0c1..2a5b8b1441e 100644
--- a/app/views/projects/boards/show.html.haml
+++ b/app/views/projects/boards/show.html.haml
@@ -1,18 +1 @@
-- @no_container = true
-- @content_class = "issue-boards-content"
-- page_title "Boards"
-
-- content_for :page_specific_javascripts do
-  = page_specific_javascript_tag('boards/boards_bundle.js')
-  = page_specific_javascript_tag('boards/test_utils/simulate_drag.js') if Rails.env.test?
-
-= render "projects/issues/head"
-
-= render 'shared/issuable/filter', type: :boards
-
-#board-app.boards-app{ "v-cloak" => true, data: board_data }
-  .boards-list{ ":class" => "{ 'is-compact': detailIssueVisible }" }
-    .boards-app-loading.text-center{ "v-if" => "loading" }
-      = icon("spinner spin")
-    = render "projects/boards/components/board"
-  = render "projects/boards/components/sidebar"
+= render "show"
diff --git a/app/views/projects/branches/_branch.html.haml b/app/views/projects/branches/_branch.html.haml
index 9135cee8364..9eb610ba9c0 100644
--- a/app/views/projects/branches/_branch.html.haml
+++ b/app/views/projects/branches/_branch.html.haml
@@ -4,7 +4,7 @@
 - number_commits_behind = diverging_commit_counts[:behind]
 - number_commits_ahead = diverging_commit_counts[:ahead]
 - merge_project = can?(current_user, :create_merge_request, @project) ? @project : (current_user && current_user.fork_of(@project))
-%li(class="js-branch-#{branch.name}")
+%li{ class: "js-branch-#{branch.name}" }
   %div
     = link_to namespace_project_tree_path(@project.namespace, @project, branch.name), class: 'item-title str-truncated' do
       = branch.name
@@ -12,14 +12,13 @@
     - if branch.name == @repository.root_ref
       %span.label.label-primary default
     - elsif @repository.merged_to_root_ref? branch.name
-      %span.label.label-info.has-tooltip(title="Merged into #{@repository.root_ref}")
+      %span.label.label-info.has-tooltip{ title: "Merged into #{@repository.root_ref}" }
         merged
 
     - if @project.protected_branch? branch.name
       %span.label.label-success
-        %i.fa.fa-lock
         protected
-    .controls.hidden-xs
+    .controls.hidden-xs<
       - if merge_project && create_mr_button?(@repository.root_ref, branch.name)
         = link_to create_mr_path(@repository.root_ref, branch.name), class: 'btn btn-default' do
           Merge Request
@@ -28,11 +27,11 @@
         = link_to namespace_project_compare_index_path(@project.namespace, @project, from: @repository.root_ref, to: branch.name), class: "btn btn-default #{'prepend-left-10' unless merge_project}", method: :post, title: "Compare" do
           Compare
 
-      = render 'projects/buttons/download', project: @project, ref: branch.name
+      = render 'projects/buttons/download', project: @project, ref: branch.name, pipeline: @refs_pipelines[branch.name]
 
       - if can?(current_user, :push_code, @project)
         = link_to namespace_project_branch_path(@project.namespace, @project, branch.name),
-          class: "btn btn-remove remove-row #{can_remove_branch?(@project, branch.name) ? '' : 'disabled'}",
+          class: "btn btn-remove remove-row js-ajax-loading-spinner #{can_remove_branch?(@project, branch.name) ? '' : 'disabled'}",
           method: :delete,
           data: { confirm: "Deleting the '#{branch.name}' branch cannot be undone. Are you sure?" },
           remote: true,
diff --git a/app/views/projects/branches/index.html.haml b/app/views/projects/branches/index.html.haml
index 84f38575e84..bd1f2d96f56 100644
--- a/app/views/projects/branches/index.html.haml
+++ b/app/views/projects/branches/index.html.haml
@@ -3,19 +3,20 @@
 = render "projects/commits/head"
 
 %div{ class: container_class }
-  .top-area
+  .top-area.adjust
     .nav-text
-      Protected branches can be managed in project settings
+      Protected branches can be managed in
+      = link_to 'project settings', namespace_project_protected_branches_path(@project.namespace, @project)
 
     .nav-controls
       = form_tag(filter_branches_path, method: :get) do
         = search_field_tag :search, params[:search], { placeholder: 'Filter by branch name', id: 'branch-search', class: 'form-control search-text-input input-short', spellcheck: false }
 
-      .dropdown.inline
-        %button.dropdown-toggle.btn{type: 'button', 'data-toggle' => 'dropdown'}
+      .dropdown.inline>
+        %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
           %span.light
             = projects_sort_options_hash[@sort]
-          = icon('caret-down')
+          = icon('chevron-down')
         %ul.dropdown-menu.dropdown-menu-align-right
           %li
             = link_to filter_branches_path(sort: sort_value_name) do
@@ -26,6 +27,8 @@
               = sort_title_oldest_updated
 
       - if can? current_user, :push_code, @project
+        = link_to namespace_project_merged_branches_path(@project.namespace, @project), class: 'btn btn-inverted btn-remove has-tooltip', title: "Delete all branches that are merged into '#{@project.repository.root_ref}'", method: :delete, data: { confirm: "Deleting the merged branches cannot be undone. Are you sure?", container: 'body' } do
+          Delete merged branches
         = link_to new_namespace_project_branch_path(@project.namespace, @project), class: 'btn btn-create' do
           New branch
 
diff --git a/app/views/projects/branches/new.html.haml b/app/views/projects/branches/new.html.haml
index 5a6c8c243fa..d3c3e40d518 100644
--- a/app/views/projects/branches/new.html.haml
+++ b/app/views/projects/branches/new.html.haml
@@ -2,7 +2,7 @@
 
 - if @error
   .alert.alert-danger
-    %button{ type: "button", class: "close", "data-dismiss" => "alert"} &times;
+    %button.close{ type: "button", "data-dismiss" => "alert" } &times;
     = @error
 %h3.page-title
   New Branch
@@ -12,12 +12,16 @@
   .form-group
     = label_tag :branch_name, nil, class: 'control-label'
     .col-sm-10
-      = text_field_tag :branch_name, params[:branch_name], required: true, tabindex: 1, autofocus: true, class: 'form-control js-branch-name'
+      = text_field_tag :branch_name, params[:branch_name], required: true, autofocus: true, class: 'form-control js-branch-name'
       .help-block.text-danger.js-branch-name-error
   .form-group
     = label_tag :ref, 'Create from', class: 'control-label'
     .col-sm-10
-      = text_field_tag :ref, params[:ref] || @project.default_branch, required: true, tabindex: 2, class: 'form-control'
+      = hidden_field_tag :ref, params[:ref] || @project.default_branch
+      = dropdown_tag(params[:ref] || @project.default_branch,
+                     options: { toggle_class: 'js-branch-select wide',
+                                filter: true, dropdown_class: "dropdown-menu-selectable", placeholder: "Search branches",
+                                data: { selected: params[:ref] || @project.default_branch, field_name: 'ref' } })
       .help-block Existing branch name, tag, or commit SHA
   .form-actions
     = button_tag 'Create branch', class: 'btn btn-create', tabindex: 3
diff --git a/app/views/projects/builds/_header.html.haml b/app/views/projects/builds/_header.html.haml
index 3f2ce7377fd..7eb17e887e7 100644
--- a/app/views/projects/builds/_header.html.haml
+++ b/app/views/projects/builds/_header.html.haml
@@ -1,10 +1,13 @@
-.content-block.build-header
+.content-block.build-header.top-area
   .header-content
-    = ci_status_with_icon(@build.status)
-    Build
-    %strong ##{@build.id}
+    = render 'ci/status/badge', status: @build.detailed_status(current_user), link: false
+    Job
+    %strong.js-build-id ##{@build.id}
+    in pipeline
+    = link_to pipeline_path(@build.pipeline) do
+      %strong ##{@build.pipeline.id}
     for commit
-    = link_to ci_status_path(@build.pipeline) do
+    = link_to namespace_project_commit_path(@project.namespace, @project, @build.pipeline.sha) do
       %strong= @build.pipeline.short_sha
     from
     = link_to namespace_project_commits_path(@project.namespace, @project, @build.ref) do
@@ -13,7 +16,10 @@
     - if @build.user
       = render "user"
     = time_ago_with_tooltip(@build.created_at)
-  - if can?(current_user, :update_build, @build) && @build.retryable?
-    = link_to "Retry build", retry_namespace_project_build_path(@project.namespace, @project, @build), class: 'btn btn-inverted pull-right', method: :post
+  .nav-controls
+    - if can?(current_user, :create_issue, @project) && @build.failed?
+      = link_to "New issue", new_namespace_project_issue_path(@project.namespace, @project, issue: build_failed_issue_options), class: 'btn btn-new btn-inverted'
+    - if can?(current_user, :update_build, @build) && @build.retryable?
+      = link_to "Retry job", retry_namespace_project_build_path(@project.namespace, @project, @build), class: 'btn btn-inverted-secondary', method: :post
   %button.btn.btn-default.pull-right.visible-xs-block.visible-sm-block.build-gutter-toggle.js-sidebar-build-toggle{ role: "button", type: "button" }
     = icon('angle-double-left')
diff --git a/app/views/projects/builds/_sidebar.html.haml b/app/views/projects/builds/_sidebar.html.haml
index 28f519f11b2..6f45d5b0689 100644
--- a/app/views/projects/builds/_sidebar.html.haml
+++ b/app/views/projects/builds/_sidebar.html.haml
@@ -1,8 +1,8 @@
 - builds = @build.pipeline.builds.to_a
 
-%aside.right-sidebar.right-sidebar-expanded.build-sidebar.js-build-sidebar
+%aside.right-sidebar.right-sidebar-expanded.build-sidebar.js-build-sidebar.js-right-sidebar{ data: { "offset-top" => "153", "spy" => "affix" } }
   .block.build-sidebar-header.visible-xs-block.visible-sm-block.append-bottom-default
-    Build
+    Job
     %strong ##{@build.id}
     %a.gutter-toggle.pull-right.js-sidebar-build-toggle{ href: "#" }
       = icon('angle-double-right')
@@ -17,23 +17,23 @@
     - if can?(current_user, :read_build, @project) && (@build.artifacts? || @build.artifacts_expired?)
       .block{ class: ("block-first" if !@build.coverage) }
         .title
-          Build artifacts
+          Job artifacts
         - if @build.artifacts_expired?
           %p.build-detail-row
             The artifacts were removed
             #{time_ago_with_tooltip(@build.artifacts_expire_at)}
-        - elsif @build.artifacts_expire_at
+        - elsif @build.has_expiring_artifacts?
           %p.build-detail-row
             The artifacts will be removed in
             %span.js-artifacts-remove= @build.artifacts_expire_at
 
         - if @build.artifacts?
           .btn-group.btn-group-justified{ role: :group }
-            - if @build.artifacts_expire_at
+            - if @build.has_expiring_artifacts? && can?(current_user, :update_build, @build)
               = link_to keep_namespace_project_build_artifacts_path(@project.namespace, @project, @build), class: 'btn btn-sm btn-default', method: :post do
                 Keep
 
-            = link_to download_namespace_project_build_artifacts_path(@project.namespace, @project, @build), class: 'btn btn-sm btn-default' do
+            = link_to download_namespace_project_build_artifacts_path(@project.namespace, @project, @build), rel: 'nofollow', download: '', class: 'btn btn-sm btn-default' do
               Download
 
             - if @build.artifacts_metadata?
@@ -42,9 +42,9 @@
 
     .block{ class: ("block-first" if !@build.coverage && !(can?(current_user, :read_build, @project) && (@build.artifacts? || @build.artifacts_expired?))) }
       .title
-        Build details
+        Job details
         - if can?(current_user, :update_build, @build) && @build.retryable?
-          = link_to "Retry build", retry_namespace_project_build_path(@project.namespace, @project, @build), class: 'pull-right retry-link', method: :post
+          = link_to "Retry job", retry_namespace_project_build_path(@project.namespace, @project, @build), class: 'pull-right retry-link', method: :post
       - if @build.merge_request
         %p.build-detail-row
           %span.build-light-text Merge Request:
@@ -111,28 +111,32 @@
           %span.label.label-primary
             = tag
 
-    - if @build.pipeline.stages.many?
+    - if @build.pipeline.stages_count > 1
       .dropdown.build-dropdown
         .title Stage
-        %button.dropdown-menu-toggle{type: 'button', 'data-toggle' => 'dropdown'}
+        %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
           %span.stage-selection More
-          = icon('caret-down')
+          = icon('chevron-down')
         %ul.dropdown-menu
           - @build.pipeline.stages.each do |stage|
             %li
-              %a.stage-item= stage
+              %a.stage-item= stage.name
 
   .builds-container
     - HasStatus::ORDERED_STATUSES.each do |build_status|
       - builds.select{|build| build.status == build_status}.each do |build|
-        .build-job{class: sidebar_build_class(build, @build), data: {stage: build.stage}}
+        .build-job{ class: sidebar_build_class(build, @build), data: { stage: build.stage } }
           = link_to namespace_project_build_path(@project.namespace, @project, build) do
             = icon('arrow-right')
-            = ci_icon_for_status(build.status)
+            %span{ class: "ci-status-icon-#{build.status}" }
+              = ci_icon_for_status(build.status)
             %span
               - if build.name
                 = build.name
               - else
                 = build.id
             - if build.retried?
-              %i.fa.fa-refresh.has-tooltip{data: { container: 'body', placement: 'bottom' }, title: 'Build was retried'}
+              %i.fa.fa-refresh.has-tooltip{ data: { container: 'body', placement: 'bottom' }, title: 'Job was retried' }
+
+:javascript
+  new Sidebar();
diff --git a/app/views/projects/builds/_table.html.haml b/app/views/projects/builds/_table.html.haml
index 36294c89fa8..acfdb250aff 100644
--- a/app/views/projects/builds/_table.html.haml
+++ b/app/views/projects/builds/_table.html.haml
@@ -2,14 +2,15 @@
 
 - if builds.blank?
   %div
-    .nothing-here-block No builds to show
+    .nothing-here-block No jobs to show
 - else
   .table-holder
     %table.table.ci-table.builds-page
       %thead
         %tr
           %th Status
-          %th Build
+          %th Job
+          %th Pipeline
           - if admin
             %th Project
             %th Runner
@@ -19,6 +20,6 @@
           %th Coverage
           %th
 
-      = render partial: "projects/ci/builds/build", collection: builds, as: :build, locals: { commit_sha: true, ref: true, stage: true, allow_retry: true, coverage: admin || project.build_coverage_enabled?, admin: admin }
+      = render partial: "projects/ci/builds/build", collection: builds, as: :build, locals: { commit_sha: true, ref: true, pipeline_link: true, stage: true, allow_retry: true, coverage: admin || project.build_coverage_enabled?, admin: admin }
 
   = paginate builds, theme: 'gitlab'
diff --git a/app/views/projects/builds/index.html.haml b/app/views/projects/builds/index.html.haml
index 06070f12bbd..5ffc0e20d10 100644
--- a/app/views/projects/builds/index.html.haml
+++ b/app/views/projects/builds/index.html.haml
@@ -1,5 +1,5 @@
 - @no_container = true
-- page_title "Builds"
+- page_title "Jobs"
 = render "projects/pipelines/head"
 
 %div{ class: container_class }
@@ -14,10 +14,10 @@
             data: { confirm: 'Are you sure?' }, class: 'btn btn-danger', method: :post
 
         - unless @repository.gitlab_ci_yml
-          = link_to 'Get started with Builds', help_page_path('ci/quick_start/README'), class: 'btn btn-info'
+          = link_to 'Get started with CI/CD Pipelines', help_page_path('ci/quick_start/README'), class: 'btn btn-info'
 
         = link_to ci_lint_path, class: 'btn btn-default' do
           %span CI Lint
 
-  %div.content-list.builds-content-list
+  .content-list.builds-content-list
     = render "table", builds: @builds, project: @project
diff --git a/app/views/projects/builds/show.html.haml b/app/views/projects/builds/show.html.haml
index b5e8b0bf6eb..d5fe771613c 100644
--- a/app/views/projects/builds/show.html.haml
+++ b/app/views/projects/builds/show.html.haml
@@ -1,8 +1,6 @@
 - @no_container = true
-- page_title "#{@build.name} (##{@build.id})", "Builds"
-- trace_with_state = @build.trace_with_state
-- header_title project_title(@project, "Builds", project_builds_path(@project))
-= render "projects/pipelines/head", build_subnav: true
+- page_title "#{@build.name} (##{@build.id})", "Jobs"
+= render "projects/pipelines/head"
 
 %div{ class: container_class }
   .build-page
@@ -13,47 +11,71 @@
         .bs-callout.bs-callout-warning
           %p
             - if no_runners_for_project?(@build.project)
-              This build is stuck, because the project doesn't have any runners online assigned to it.
+              This job is stuck, because the project doesn't have any runners online assigned to it.
             - elsif @build.tags.any?
-              This build is stuck, because you don't have any active runners online with any of these tags assigned to them:
+              This job is stuck, because you don't have any active runners online with any of these tags assigned to them:
               - @build.tags.each do |tag|
                 %span.label.label-primary
                   = tag
             - else
-              This build is stuck, because you don't have any active runners that can run this build.
+              This job is stuck, because you don't have any active runners that can run this job.
 
             %br
             Go to
             = link_to namespace_project_runners_path(@build.project.namespace, @build.project) do
               Runners page
 
+    - if @build.starts_environment?
+      .prepend-top-default
+        .environment-information
+          - if @build.outdated_deployment?
+            = ci_icon_for_status('success_with_warnings')
+          - else
+            = ci_icon_for_status(@build.status)
+
+          - environment = environment_for_build(@build.project, @build)
+          - if @build.success? && @build.last_deployment.present?
+            - if @build.last_deployment.last?
+              This job is the most recent deployment to #{environment_link_for_build(@build.project, @build)}.
+            - else
+              This job is an out-of-date deployment to #{environment_link_for_build(@build.project, @build)}.
+              View the most recent deployment #{deployment_link(environment.last_deployment)}.
+          - elsif @build.complete? && !@build.success?
+            The deployment of this job to #{environment_link_for_build(@build.project, @build)} did not succeed.
+          - else
+            This job is creating a deployment to #{environment_link_for_build(@build.project, @build)}
+            - if environment.try(:last_deployment)
+              and will overwrite the #{deployment_link(environment.last_deployment, text: 'latest deployment')}
+
     .prepend-top-default
-      - if @build.active?
-        .autoscroll-container
-          %button.btn.btn-success.btn-sm#autoscroll-button{:type => "button", :data => {:state => 'disabled'}} enable autoscroll
       - if @build.erased?
         .erased.alert.alert-warning
-          - erased_by = "by #{link_to @build.erased_by.name, user_path(@build.erased_by)}" if @build.erased_by
-          Build has been erased #{erased_by.html_safe} #{time_ago_with_tooltip(@build.erased_at)}
+          - if @build.erased_by_user?
+            Job has been erased by #{link_to(@build.erased_by_name, user_path(@build.erased_by))} #{time_ago_with_tooltip(@build.erased_at)}
+          - else
+            Job has been erased #{time_ago_with_tooltip(@build.erased_at)}
       - else
         #js-build-scroll.scroll-controls
-          = link_to '#build-trace', class: 'btn' do
-            %i.fa.fa-angle-up
-          = link_to '#down-build-trace', class: 'btn' do
-            %i.fa.fa-angle-down
+          .scroll-step
+            %a.scroll-link.scroll-top{ href: '#up-build-trace', id: 'scroll-top', title: 'Scroll to top' }
+              = custom_icon('scroll_up')
+              = custom_icon('scroll_up_hover_active')
+            %a.scroll-link.scroll-bottom{ href: '#down-build-trace', id: 'scroll-bottom', title: 'Scroll to bottom' }
+              = custom_icon('scroll_down')
+              = custom_icon('scroll_down_hover_active')
+          - if @build.active?
+            .autoscroll-container
+              %span.status-message#autoscroll-status{ data: { state: 'disabled' } }
+                %span.status-text Autoscroll active
+                %i.status-icon
+                  = custom_icon('scroll_down_hover_active')
+        #up-build-trace
         %pre.build-trace#build-trace
           %code.bash.js-build-output
-          = icon("refresh spin", class: "js-build-refresh")
+          .build-loader-animation.js-build-refresh
 
-      #down-build-trace
+        #down-build-trace
 
   = render "sidebar"
 
-  :javascript
-    new Build({
-      page_url: "#{namespace_project_build_url(@project.namespace, @project, @build)}",
-      build_url: "#{namespace_project_build_url(@project.namespace, @project, @build, :json)}",
-      build_status: "#{@build.status}",
-      build_stage: "#{@build.stage}",
-      state1: "#{trace_with_state[:state]}"
-    })
+.js-build-options{ data: javascript_build_options }
diff --git a/app/views/projects/buttons/_download.html.haml b/app/views/projects/buttons/_download.html.haml
index 7e83a88913a..d90d4a27cd6 100644
--- a/app/views/projects/buttons/_download.html.haml
+++ b/app/views/projects/buttons/_download.html.haml
@@ -1,42 +1,42 @@
+- pipeline = local_assigns.fetch(:pipeline) { project.pipelines.latest_successful_for(ref) }
+
 - if !project.empty_repo? && can?(current_user, :download_code, project)
-  %span{class: 'hidden-xs hidden-sm download-button'}
-    .dropdown.inline
-      %button.btn{ 'data-toggle' => 'dropdown' }
-        = icon('download')
-        = icon("caret-down")
-        %span.sr-only
-          Select Archive Format
-      %ul.dropdown-menu.dropdown-menu-align-right{ role: 'menu' }
-        %li.dropdown-header Source code
-        %li
-          = link_to archive_namespace_project_repository_path(project.namespace, project, ref: ref, format: 'zip'), rel: 'nofollow' do
-            %i.fa.fa-download
-            %span Download zip
-        %li
-          = link_to archive_namespace_project_repository_path(project.namespace, project, ref: ref, format: 'tar.gz'), rel: 'nofollow' do
-            %i.fa.fa-download
-            %span Download tar.gz
-        %li
-          = link_to archive_namespace_project_repository_path(project.namespace, project, ref: ref, format: 'tar.bz2'), rel: 'nofollow' do
-            %i.fa.fa-download
-            %span Download tar.bz2
-        %li
-          = link_to archive_namespace_project_repository_path(project.namespace, project, ref: ref, format: 'tar'), rel: 'nofollow' do
-            %i.fa.fa-download
-            %span Download tar
+  .project-action-button.dropdown.inline>
+    %button.btn{ 'data-toggle' => 'dropdown' }
+      = icon('download')
+      = icon("caret-down")
+      %span.sr-only
+        Select Archive Format
+    %ul.dropdown-menu.dropdown-menu-align-right{ role: 'menu' }
+      %li.dropdown-header Source code
+      %li
+        = link_to archive_namespace_project_repository_path(project.namespace, project, ref: ref, format: 'zip'), rel: 'nofollow', download: '' do
+          %i.fa.fa-download
+          %span Download zip
+      %li
+        = link_to archive_namespace_project_repository_path(project.namespace, project, ref: ref, format: 'tar.gz'), rel: 'nofollow', download: '' do
+          %i.fa.fa-download
+          %span Download tar.gz
+      %li
+        = link_to archive_namespace_project_repository_path(project.namespace, project, ref: ref, format: 'tar.bz2'), rel: 'nofollow', download: '' do
+          %i.fa.fa-download
+          %span Download tar.bz2
+      %li
+        = link_to archive_namespace_project_repository_path(project.namespace, project, ref: ref, format: 'tar'), rel: 'nofollow', download: '' do
+          %i.fa.fa-download
+          %span Download tar
 
-        - pipeline = project.pipelines.latest_successful_for(ref)
-        - if pipeline
-          - artifacts = pipeline.builds.latest.with_artifacts
-          - if artifacts.any?
-            %li.dropdown-header Artifacts
-            - unless pipeline.latest?
-              - latest_pipeline = project.pipeline_for(ref)
-              %li
-                .unclickable= ci_status_for_statuseable(latest_pipeline)
-              %li.dropdown-header Previous Artifacts
-            - artifacts.each do |job|
-              %li
-                = link_to latest_succeeded_namespace_project_artifacts_path(project.namespace, project, "#{ref}/download", job: job.name), rel: 'nofollow' do
-                  %i.fa.fa-download
-                  %span Download '#{job.name}'
+      - if pipeline
+        - artifacts = pipeline.builds.latest.with_artifacts
+        - if artifacts.any?
+          %li.dropdown-header Artifacts
+          - unless pipeline.latest?
+            - latest_pipeline = project.pipeline_for(ref)
+            %li
+              .unclickable= ci_status_for_statuseable(latest_pipeline)
+            %li.dropdown-header Previous Artifacts
+          - artifacts.each do |job|
+            %li
+              = link_to latest_succeeded_namespace_project_artifacts_path(project.namespace, project, "#{ref}/download", job: job.name), rel: 'nofollow', download: '' do
+                %i.fa.fa-download
+                %span Download '#{job.name}'
diff --git a/app/views/projects/buttons/_dropdown.html.haml b/app/views/projects/buttons/_dropdown.html.haml
index 6cd9b98a706..67de8699b2e 100644
--- a/app/views/projects/buttons/_dropdown.html.haml
+++ b/app/views/projects/buttons/_dropdown.html.haml
@@ -1,6 +1,6 @@
 - if current_user
-  .dropdown.inline.project-dropdown
-    %a.btn.dropdown-toggle{href: '#', "data-toggle" => "dropdown"}
+  .project-action-button.dropdown.inline
+    %a.btn.dropdown-toggle{ href: '#', "data-toggle" => "dropdown" }
       = icon('plus')
       = icon("caret-down")
     %ul.dropdown-menu.dropdown-menu-align-right.project-home-dropdown
diff --git a/app/views/projects/buttons/_fork.html.haml b/app/views/projects/buttons/_fork.html.haml
index 27da86b9efe..851fe44a86d 100644
--- a/app/views/projects/buttons/_fork.html.haml
+++ b/app/views/projects/buttons/_fork.html.haml
@@ -8,7 +8,7 @@
       = link_to new_namespace_project_fork_path(@project.namespace, @project), title: 'Fork project', class: 'btn' do
         = custom_icon('icon_fork')
         %span Fork
-    %div.count-with-arrow
+    .count-with-arrow
       %span.arrow
       = link_to namespace_project_forks_path(@project.namespace, @project), title: 'Forks', class: 'count' do
         = @project.forks_count
diff --git a/app/views/projects/buttons/_koding.html.haml b/app/views/projects/buttons/_koding.html.haml
index fdc80d44253..a5a9e4d0621 100644
--- a/app/views/projects/buttons/_koding.html.haml
+++ b/app/views/projects/buttons/_koding.html.haml
@@ -1,7 +1,3 @@
-- if koding_enabled? && current_user && can_push_branch?(@project, @project.default_branch)
-  - if @repository.koding_yml
-    = link_to koding_project_url(@project), class: 'btn', target: '_blank' do
-      Run in IDE (Koding)
-  - else
-    = link_to add_koding_stack_path(@project), class: 'btn' do
-      Set Up Koding
+- if koding_enabled? && current_user && @repository.koding_yml && can_push_branch?(@project, @project.default_branch)
+  = link_to koding_project_url(@project), class: 'btn project-action-button inline', target: '_blank', rel: 'noopener noreferrer' do
+    Run in IDE (Koding)
diff --git a/app/views/projects/buttons/_star.html.haml b/app/views/projects/buttons/_star.html.haml
index 12d35101770..d57eb2cbfbc 100644
--- a/app/views/projects/buttons/_star.html.haml
+++ b/app/views/projects/buttons/_star.html.haml
@@ -6,7 +6,7 @@
     - else
       = icon('star-o')
       %span Star
-  %div.count-with-arrow
+  .count-with-arrow
     %span.arrow
     %span.count.star-count
       = @project.star_count
@@ -15,7 +15,7 @@
   = link_to new_user_session_path, class: 'btn has-tooltip star-btn', title: 'You must sign in to star a project' do
     = icon('star')
     Star
-  %div.count-with-arrow
+  .count-with-arrow
     %span.arrow
     %span.count
       = @project.star_count
diff --git a/app/views/projects/ci/builds/_build.html.haml b/app/views/projects/ci/builds/_build.html.haml
index 94632056b15..aeed293a724 100644
--- a/app/views/projects/ci/builds/_build.html.haml
+++ b/app/views/projects/ci/builds/_build.html.haml
@@ -2,16 +2,14 @@
 - ref = local_assigns.fetch(:ref, nil)
 - commit_sha = local_assigns.fetch(:commit_sha, nil)
 - retried = local_assigns.fetch(:retried, false)
+- pipeline_link = local_assigns.fetch(:pipeline_link, false)
 - stage = local_assigns.fetch(:stage, false)
 - coverage = local_assigns.fetch(:coverage, false)
 - allow_retry = local_assigns.fetch(:allow_retry, false)
 
-%tr.build.commit{class: ('retried' if retried)}
+%tr.build.commit{ class: ('retried' if retried) }
   %td.status
-    - if can?(current_user, :read_build, build)
-      = ci_status_with_icon(build.status, namespace_project_build_url(build.project.namespace, build.project, build))
-    - else
-      = ci_status_with_icon(build.status)
+    = render "ci/status/badge", status: build.detailed_status(current_user)
 
   %td.branch-commit
     - if can?(current_user, :read_build, build)
@@ -34,10 +32,10 @@
       = link_to build.short_sha, namespace_project_commit_path(build.project.namespace, build.project, build.sha), class: "commit-id monospace"
 
     - if build.stuck?
-      = icon('warning', class: 'text-warning has-tooltip', title: 'Build is stuck. Check runners.')
+      = icon('warning', class: 'text-warning has-tooltip', title: 'Job is stuck. Check runners.')
 
     - if retried
-      = icon('refresh', class: 'text-warning has-tooltip', title: 'Build was retried')
+      = icon('refresh', class: 'text-warning has-tooltip', title: 'Job was retried')
 
     .label-container
       - if build.tags.any?
@@ -48,15 +46,23 @@
         %span.label.label-info triggered
       - if build.try(:allow_failure)
         %span.label.label-danger allowed to fail
-      - if build.manual?
+      - if build.action?
         %span.label.label-info manual
 
+  - if pipeline_link
+    %td
+      = link_to pipeline_path(build.pipeline) do
+        %span.pipeline-id ##{build.pipeline.id}
+      %span by
+      - if build.pipeline.user
+        = user_avatar(user: build.pipeline.user, size: 20)
+      - else
+        %span.monospace API
+
   - if admin
     %td
       - if build.project
         = link_to build.project.name_with_namespace, admin_namespace_project_path(build.project.namespace, build.project)
-
-  - if admin
     %td
       - if build.try(:runner)
         = runner_link(build.runner)
@@ -79,26 +85,25 @@
     - if build.finished_at
       %p.finished-at
         = icon("calendar")
-        %span #{time_ago_with_tooltip(build.finished_at)}
+        %span= time_ago_with_tooltip(build.finished_at)
 
   %td.coverage
-    - if coverage
-      - if build.try(:coverage)
-        #{build.coverage}%
+    - if coverage && build.try(:coverage)
+      #{build.coverage}%
 
   %td
     .pull-right
       - if can?(current_user, :read_build, build) && build.artifacts?
-        = link_to download_namespace_project_build_artifacts_path(build.project.namespace, build.project, build), title: 'Download artifacts', class: 'btn btn-build' do
+        = link_to download_namespace_project_build_artifacts_path(build.project.namespace, build.project, build), rel: 'nofollow', download: '', title: 'Download artifacts', class: 'btn btn-build' do
           = icon('download')
       - if can?(current_user, :update_build, build)
         - if build.active?
           = link_to cancel_namespace_project_build_path(build.project.namespace, build.project, build, return_to: request.original_url), method: :post, title: 'Cancel', class: 'btn btn-build' do
             = icon('remove', class: 'cred')
         - elsif allow_retry
-          - if build.retryable?
-            = link_to retry_namespace_project_build_path(build.project.namespace, build.project, build, return_to: request.original_url), method: :post, title: 'Retry', class: 'btn btn-build' do
-              = icon('repeat')
-          - elsif build.playable? && !admin
+          - if build.playable? && !admin
             = link_to play_namespace_project_build_path(build.project.namespace, build.project, build, return_to: request.original_url), method: :post, title: 'Play', class: 'btn btn-build' do
               = custom_icon('icon_play')
+          - elsif build.retryable?
+            = link_to retry_namespace_project_build_path(build.project.namespace, build.project, build, return_to: request.original_url), method: :post, title: 'Retry', class: 'btn btn-build' do
+              = icon('repeat')
diff --git a/app/views/projects/ci/builds/_build_pipeline.html.haml b/app/views/projects/ci/builds/_build_pipeline.html.haml
deleted file mode 100644
index 93dca81e6f9..00000000000
--- a/app/views/projects/ci/builds/_build_pipeline.html.haml
+++ /dev/null
@@ -1,13 +0,0 @@
-- is_playable = subject.playable? && can?(current_user, :update_build, @project)
-- if is_playable
-  = link_to play_namespace_project_build_path(subject.project.namespace, subject.project, subject, return_to: request.original_url), method: :post, data: { toggle: 'tooltip', title: "#{subject.name} - play", container: '.pipeline-graph', placement: 'bottom' } do
-    = ci_icon_for_status('play')
-    .ci-status-text= subject.name
-- elsif can?(current_user, :read_build, @project)
-  = link_to namespace_project_build_path(subject.project.namespace, subject.project, subject), data: { toggle: 'tooltip', title: "#{subject.name} - #{subject.status}", container: '.pipeline-graph', placement: 'bottom' } do
-    %span.ci-status-icon
-      = ci_icon_for_status(subject.status)
-    .ci-status-text= subject.name
-- else
-  %span.ci-status-icon
-    = ci_icon_for_status(subject.status)
diff --git a/app/views/projects/ci/pipelines/_pipeline.html.haml b/app/views/projects/ci/pipelines/_pipeline.html.haml
deleted file mode 100644
index 1f748d73d06..00000000000
--- a/app/views/projects/ci/pipelines/_pipeline.html.haml
+++ /dev/null
@@ -1,100 +0,0 @@
-- status = pipeline.status
-- show_commit = local_assigns.fetch(:show_commit, true)
-- show_branch = local_assigns.fetch(:show_branch, true)
-
-%tr.commit
-  %td.commit-link
-    = link_to namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id) do
-      = ci_status_with_icon(status)
-
-  %td
-    = link_to namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id) do
-      %span.pipeline-id ##{pipeline.id}
-    %span by
-    - if pipeline.user
-      = user_avatar(user: pipeline.user, size: 20)
-    - else
-      %span.api.monospace API
-    - if pipeline.latest?
-      %span.label.label-success.has-tooltip{ title: 'Latest build for this branch' } latest
-    - if pipeline.triggered?
-      %span.label.label-primary triggered
-    - if pipeline.yaml_errors.present?
-      %span.label.label-danger.has-tooltip{ title: "#{pipeline.yaml_errors}" } yaml invalid
-    - if pipeline.builds.any?(&:stuck?)
-      %span.label.label-warning stuck
-
-  %td.branch-commit
-    - if pipeline.ref && show_branch
-      .icon-container
-        = pipeline.tag? ? icon('tag') : icon('code-fork')
-      = link_to pipeline.ref, namespace_project_commits_path(pipeline.project.namespace, pipeline.project, pipeline.ref), class: "monospace branch-name"
-    - if show_commit
-      .icon-container.commit-icon
-        = custom_icon("icon_commit")
-      = link_to pipeline.short_sha, namespace_project_commit_path(pipeline.project.namespace, pipeline.project, pipeline.sha), class: "commit-id monospace"
-
-    %p.commit-title
-      - if commit = pipeline.commit
-        = author_avatar(commit, size: 20)
-        = link_to_gfm truncate(commit.title, length: 60, escape: false), namespace_project_commit_path(pipeline.project.namespace, pipeline.project, commit.id), class: "commit-row-message"
-      - else
-        Cant find HEAD commit for this branch
-
-  - stages_status = pipeline.statuses.latest.stages_status
-  %td.stage-cell
-    - stages.each do |stage|
-      - status = stages_status[stage]
-      - tooltip = "#{stage.titleize}: #{status || 'not found'}"
-      - if status
-        .stage-container
-          = link_to namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id, anchor: stage), class: "has-tooltip ci-status-icon-#{status}", title: tooltip do
-            = ci_icon_for_status(status)
-
-  %td
-    - if pipeline.duration
-      %p.duration
-        = custom_icon("icon_timer")
-        = duration_in_numbers(pipeline.duration)
-    - if pipeline.finished_at
-      %p.finished-at
-        = icon("calendar")
-        #{time_ago_with_tooltip(pipeline.finished_at, short_format: false, skip_js: true)}
-
-  %td.pipeline-actions.hidden-xs
-    .controls.pull-right
-      - artifacts = pipeline.builds.latest.with_artifacts_not_expired
-      - actions = pipeline.manual_actions
-      - if artifacts.present? || actions.any?
-        .btn-group.inline
-          - if actions.any?
-            .btn-group
-              %a.dropdown-toggle.btn.btn-default{type: 'button', 'data-toggle' => 'dropdown'}
-                = custom_icon('icon_play')
-                = icon('caret-down')
-              %ul.dropdown-menu.dropdown-menu-align-right
-                - actions.each do |build|
-                  %li
-                    = link_to play_namespace_project_build_path(pipeline.project.namespace, pipeline.project, build), method: :post, rel: 'nofollow' do
-                      = custom_icon('icon_play')
-                      %span= build.name.humanize
-          - if artifacts.present?
-            .btn-group
-              %a.dropdown-toggle.btn.btn-default.build-artifacts{type: 'button', 'data-toggle' => 'dropdown'}
-                = icon("download")
-                = icon('caret-down')
-              %ul.dropdown-menu.dropdown-menu-align-right
-                - artifacts.each do |build|
-                  %li
-                    = link_to download_namespace_project_build_artifacts_path(pipeline.project.namespace, pipeline.project, build), rel: 'nofollow' do
-                      = icon("download")
-                      %span Download '#{build.name}' artifacts
-
-      - if can?(current_user, :update_pipeline, pipeline.project)
-        .cancel-retry-btns.inline
-          - if pipeline.retryable?
-            = link_to retry_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: 'btn has-tooltip', title: "Retry", method: :post do
-              = icon("repeat")
-          - if pipeline.cancelable?
-            = link_to cancel_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: 'btn btn-remove has-tooltip', title: "Cancel", method: :post do
-              = icon("remove")
diff --git a/app/views/projects/commit/_builds.html.haml b/app/views/projects/commit/_builds.html.haml
deleted file mode 100644
index b7087749428..00000000000
--- a/app/views/projects/commit/_builds.html.haml
+++ /dev/null
@@ -1,2 +0,0 @@
-- @ci_pipelines.each do |pipeline|
-  = render "pipeline", pipeline: pipeline, pipeline_details: true
diff --git a/app/views/projects/commit/_change.html.haml b/app/views/projects/commit/_change.html.haml
index e4cd55b9f7a..b5f67cae341 100644
--- a/app/views/projects/commit/_change.html.haml
+++ b/app/views/projects/commit/_change.html.haml
@@ -1,34 +1,33 @@
 - case type.to_s
 - when 'revert'
   - label = 'Revert'
-  - target_label = 'Revert in branch'
+  - branch_label = 'Revert in branch'
 - when 'cherry-pick'
   - label = 'Cherry-pick'
-  - target_label = 'Pick into branch'
+  - branch_label = 'Pick into branch'
 
-.modal{id: "modal-#{type}-commit"}
+.modal{ id: "modal-#{type}-commit" }
   .modal-dialog
     .modal-content
       .modal-header
-        %a.close{href: "#", "data-dismiss" => "modal"} ×
-        %h3.page-title== #{label} this #{commit.change_type_title}
+        %a.close{ href: "#", "data-dismiss" => "modal" } ×
+        %h3.page-title== #{label} this #{commit.change_type_title(current_user)}
       .modal-body
-        = form_tag send("#{type.underscore}_namespace_project_commit_path", @project.namespace, @project, commit.id), method: :post, remote: false, class: 'form-horizontal js-#{type}-form js-requires-input' do
+        = form_tag [type.underscore, @project.namespace.becomes(Namespace), @project, commit], method: :post, remote: false, class: "form-horizontal js-#{type}-form js-requires-input" do
           .form-group.branch
-            = label_tag 'target_branch', target_label, class: 'control-label'
+            = label_tag 'start_branch', branch_label, class: 'control-label'
             .col-sm-10
-              = hidden_field_tag :target_branch, @project.default_branch, id: 'target_branch'
-              = dropdown_tag(@project.default_branch, options: { title: "Switch branch", filter: true, placeholder: "Search branches", toggle_class: 'js-project-refs-dropdown js-target-branch dynamic', dropdown_class: 'dropdown-menu-selectable', data: { field_name: "target_branch", selected: @project.default_branch, target_branch: @project.default_branch, refs_url: namespace_project_branches_path(@project.namespace, @project), submit_form_on_click: false }})
+              = hidden_field_tag :start_branch, @project.default_branch, id: 'start_branch'
+              = dropdown_tag(@project.default_branch, options: { title: "Switch branch", filter: true, placeholder: "Search branches", toggle_class: 'js-project-refs-dropdown js-target-branch dynamic', dropdown_class: 'dropdown-menu-selectable', data: { field_name: "start_branch", selected: @project.default_branch, start_branch: @project.default_branch, refs_url: namespace_project_branches_path(@project.namespace, @project), submit_form_on_click: false } })
 
               - if can?(current_user, :push_code, @project)
                 .js-create-merge-request-container
                   .checkbox
-                    - nonce = SecureRandom.hex
-                    = label_tag "create_merge_request-#{nonce}" do
-                      = check_box_tag 'create_merge_request', 1, true, class: 'js-create-merge-request', id: "create_merge_request-#{nonce}"
+                    = label_tag do
+                      = check_box_tag 'create_merge_request', 1, true, class: 'js-create-merge-request', id: nil
                       Start a <strong>new merge request</strong> with these changes
               - else
-                = hidden_field_tag 'create_merge_request', 1
+                = hidden_field_tag 'create_merge_request', 1, id: nil
           .form-actions
             = submit_tag label, class: 'btn btn-create'
             = link_to "Cancel", '#', class: "btn btn-cancel", "data-dismiss" => "modal"
@@ -38,4 +37,4 @@
                 = commit_in_fork_help
 
 :javascript
-  new NewCommitForm($('.js-#{type}-form'))
+  new NewCommitForm($('.js-#{type}-form'), 'start_branch')
diff --git a/app/views/projects/commit/_ci_menu.html.haml b/app/views/projects/commit/_ci_menu.html.haml
index cbfd99ca448..8aed88da38b 100644
--- a/app/views/projects/commit/_ci_menu.html.haml
+++ b/app/views/projects/commit/_ci_menu.html.haml
@@ -7,8 +7,4 @@
     = nav_link(path: 'commit#pipelines') do
       = link_to pipelines_namespace_project_commit_path(@project.namespace, @project, @commit.id) do
         Pipelines
-        %span.badge= @ci_pipelines.count
-  = nav_link(path: 'commit#builds') do
-    = link_to builds_namespace_project_commit_path(@project.namespace, @project, @commit.id) do
-      Builds
-      %span.badge= @statuses.count
+        %span.badge= @commit.pipelines.size
diff --git a/app/views/projects/commit/_ci_stage.html.haml b/app/views/projects/commit/_ci_stage.html.haml
deleted file mode 100644
index 6bb900e3fc1..00000000000
--- a/app/views/projects/commit/_ci_stage.html.haml
+++ /dev/null
@@ -1,15 +0,0 @@
-%tr
-  %th{colspan: 10}
-    %strong
-      %a{name: stage}
-      - status = statuses.latest.status
-      %span{class: "ci-status-link ci-status-icon-#{status}"}
-        = ci_icon_for_status(status)
-      - if stage
-        &nbsp;
-        = stage.titleize
-  = render statuses.latest_ci_stages, coverage: @project.build_coverage_enabled?, stage: false, ref: false, allow_retry: true
-  = render statuses.retried_ci_stages, coverage: @project.build_coverage_enabled?, stage: false, ref: false, retried: true
-  %tr
-    %td{colspan: 10}
-      &nbsp;
diff --git a/app/views/projects/commit/_commit_box.html.haml b/app/views/projects/commit/_commit_box.html.haml
index 0ebc38d16cf..a0a292d0508 100644
--- a/app/views/projects/commit/_commit_box.html.haml
+++ b/app/views/projects/commit/_commit_box.html.haml
@@ -1,13 +1,7 @@
-.commit-info-row.commit-info-row-header
-  .commit-meta
-    %strong Commit
-    %strong.monospace.js-details-short= @commit.short_id
-    = link_to("#", class: "js-details-expand hidden-xs hidden-sm") do
-      %span.text-expander
-        \...
-    %span.js-details-content.hide
-      %strong.monospace.commit-hash-full= @commit.id
-    = clipboard_button(clipboard_text: @commit.id)
+.page-content-header
+  .header-main-content
+    %strong Commit #{@commit.short_id}
+    = clipboard_button(clipboard_text: @commit.id, title: "Copy commit SHA to clipboard")
     %span.hidden-xs authored
     #{time_ago_with_tooltip(@commit.authored_date)}
     %span by
@@ -19,7 +13,8 @@
       %strong
         = commit_committer_link(@commit, avatar: true, size: 24)
       #{time_ago_with_tooltip(@commit.committed_date)}
-  .commit-action-buttons
+
+  .header-action-buttons
     - if defined?(@notes_count) && @notes_count > 0
       %span.btn.disabled.btn-grouped.hidden-xs.append-right-10
         = icon('comment')
@@ -39,8 +34,9 @@
             = revert_commit_link(@commit, namespace_project_commit_path(@project.namespace, @project, @commit.id), has_tooltip: false)
         %li.clearfix
           = cherry_pick_commit_link(@commit, namespace_project_commit_path(@project.namespace, @project, @commit.id), has_tooltip: false)
-        %li.clearfix
-          = link_to "Tag", new_namespace_project_tag_path(@project.namespace, @project, ref: @commit)
+        - if can_collaborate_with_project?
+          %li.clearfix
+            = link_to "Tag", new_namespace_project_tag_path(@project.namespace, @project, ref: @commit)
         %li.divider
         %li.dropdown-header
           Download
@@ -55,8 +51,8 @@
     %pre.commit-description
       = preserve(markdown(@commit.description, pipeline: :single_line, author: @commit.author))
 
-.commit-info-widget
-  .widget-row.branch-info
+.info-well
+  .well-segment.branch-info
     .icon-container.commit-icon
       = custom_icon("icon_commit")
     %span.cgray= pluralize(@commit.parents.count, "parent")
@@ -66,15 +62,16 @@
       %i.fa.fa-spinner.fa-spin
 
   - if @commit.status
-    .widget-row.pipeline-info
-      .icon-container
-        = ci_icon_for_status(@commit.status)
+    .well-segment.pipeline-info
+      .status-icon-container{ class: "ci-status-icon-#{@commit.status}" }
+        = link_to namespace_project_pipeline_path(@project.namespace, @project, @commit.latest_pipeline.id) do
+          = ci_icon_for_status(@commit.status)
       Pipeline
-      = link_to "##{@commit.pipelines.last.id}", pipelines_namespace_project_commit_path(@project.namespace, @project, @commit.id), class: "monospace"
-      for
-      = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace"
-      %span.ci-status-label
-        = ci_label_for_status(@commit.status)
+      = link_to "##{@commit.latest_pipeline.id}", namespace_project_pipeline_path(@project.namespace, @project, @commit.latest_pipeline.id), class: "monospace"
+      = ci_label_for_status(@commit.status)
+      - if @commit.latest_pipeline.stages.any?
+        .mr-widget-pipeline-graph
+          = render 'shared/mini_pipeline_graph', pipeline: @commit.latest_pipeline, klass: 'js-commit-pipeline-graph'
       in
       = time_interval_in_words @commit.pipelines.total_duration
 
diff --git a/app/views/projects/commit/_pipeline.html.haml b/app/views/projects/commit/_pipeline.html.haml
index d6916fb7f1a..c2b32a22170 100644
--- a/app/views/projects/commit/_pipeline.html.haml
+++ b/app/views/projects/commit/_pipeline.html.haml
@@ -1,13 +1,9 @@
 .pipeline-graph-container
   .row-content-block.build-content.middle-block.pipeline-actions
     .pull-right
-      .btn.btn-grouped.btn-white.toggle-pipeline-btn
-        %span.toggle-btn-text Hide
-        %span pipeline graph
-        %span.caret
       - if can?(current_user, :update_pipeline, pipeline.project)
         - if pipeline.builds.latest.failed.any?(&:retryable?)
-          = link_to "Retry failed", retry_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: 'btn btn-grouped btn-primary', method: :post
+          = link_to "Retry", retry_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: 'js-retry-button btn btn-grouped btn-primary', method: :post
 
         - if pipeline.builds.running_or_pending.any?
           = link_to "Cancel running", cancel_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), data: { confirm: 'Are you sure?' }, class: 'btn btn-grouped btn-danger', method: :post
@@ -17,7 +13,7 @@
         Pipeline
         = link_to "##{pipeline.id}", namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: "monospace"
         with
-        = pluralize pipeline.statuses.count(:id), "build"
+        = pluralize pipeline.statuses.count(:id), "job"
         - if pipeline.ref
           for
           = link_to pipeline.ref, namespace_project_commits_path(pipeline.project.namespace, pipeline.project, pipeline.ref), class: "monospace"
@@ -28,20 +24,8 @@
           in
           = time_interval_in_words pipeline.duration
 
-  .row-content-block.build-content.middle-block.pipeline-graph.hidden
-    .pipeline-visualization
-      %ul.stage-column-list
-        - stages = pipeline.stages_with_latest_statuses
-        - stages.each do |stage, statuses|
-          %li.stage-column
-            .stage-name
-              %a{name: stage}
-              - if stage
-                = stage.titleize
-            .builds-container
-              %ul
-                = render "projects/commit/pipeline_stage", statuses: statuses
-
+  .row-content-block.build-content.middle-block.js-pipeline-graph.hidden
+    = render "projects/pipelines/graph", pipeline: pipeline
 
 - if pipeline.yaml_errors.present?
   .bs-callout.bs-callout-danger
@@ -60,11 +44,10 @@
     %thead
       %tr
         %th Status
-        %th Build ID
+        %th Job ID
         %th Name
         %th
         - if pipeline.project.build_coverage_enabled?
           %th Coverage
         %th
-    - pipeline.statuses.relevant.stages.each do |stage|
-      = render 'projects/commit/ci_stage', stage: stage, statuses: pipeline.statuses.relevant.where(stage: stage)
+    = render partial: "projects/stage/stage", collection: pipeline.stages, as: :stage
diff --git a/app/views/projects/commit/_pipeline_stage.html.haml b/app/views/projects/commit/_pipeline_stage.html.haml
deleted file mode 100644
index 289aa5178b1..00000000000
--- a/app/views/projects/commit/_pipeline_stage.html.haml
+++ /dev/null
@@ -1,14 +0,0 @@
-- status_groups = statuses.group_by(&:group_name)
-- status_groups.each do |group_name, grouped_statuses|
-  - if grouped_statuses.one?
-    - status = grouped_statuses.first
-    - is_playable = status.playable? && can?(current_user, :update_build, @project)
-    %li.build{ class: ("playable" if is_playable) }
-      .curve
-      .build-content
-        = render "projects/#{status.to_partial_path}_pipeline", subject: status
-  - else
-    %li.build
-      .curve
-      .dropdown.inline.build-content
-        = render "projects/commit/pipeline_status_group", name: group_name, subject: grouped_statuses
diff --git a/app/views/projects/commit/_pipeline_status_group.html.haml b/app/views/projects/commit/_pipeline_status_group.html.haml
deleted file mode 100644
index 18daa2ee693..00000000000
--- a/app/views/projects/commit/_pipeline_status_group.html.haml
+++ /dev/null
@@ -1,13 +0,0 @@
-- group_status = CommitStatus.where(id: subject).status
-%button.dropdown-menu-toggle.has-tooltip{ type: 'button', data: { toggle: 'dropdown', title: "#{name} - #{group_status}" } }
-  %span.ci-status-icon
-    = ci_icon_for_status(group_status)
-  %span.ci-status-text
-    = name
-  %span.badge= subject.size
-.dropdown-menu.grouped-pipeline-dropdown
-  .arrow
-  %ul
-    - subject.each do |status|
-      %li
-        = render "projects/#{status.to_partial_path}_pipeline", subject: status
diff --git a/app/views/projects/commit/_pipelines_list.haml b/app/views/projects/commit/_pipelines_list.haml
index 2dc91a9b762..09e3a775d1c 100644
--- a/app/views/projects/commit/_pipelines_list.haml
+++ b/app/views/projects/commit/_pipelines_list.haml
@@ -1,15 +1,9 @@
-%ul.content-list.pipelines
-  - if pipelines.blank?
-    %li
-      .nothing-here-block No pipelines to show
-  - else
-    .table-holder
-      %table.table.ci-table
-        %tbody
-          %th Status
-          %th Pipeline
-          %th Commit
-          %th Stages
-          %th
-          %th
-        = render pipelines, commit_sha: true, stage: true, allow_retry: true, stages: pipelines.stages, show_commit: false
+- disable_initialization = local_assigns.fetch(:disable_initialization, false)
+#commit-pipeline-table-view{ data: { disable_initialization: disable_initialization,
+  endpoint: endpoint,
+  "help-page-path" => help_page_path('ci/quick_start/README'),
+} }
+
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('common_vue')
+  = page_specific_javascript_bundle_tag('commit_pipelines')
diff --git a/app/views/projects/commit/builds.html.haml b/app/views/projects/commit/builds.html.haml
deleted file mode 100644
index 077b2d2725b..00000000000
--- a/app/views/projects/commit/builds.html.haml
+++ /dev/null
@@ -1,9 +0,0 @@
-- @no_container = true
-- page_title "Builds", "#{@commit.title} (#{@commit.short_id})", "Commits"
-= render "projects/commits/head"
-
-%div{ class: container_class }
-  = render "commit_box"
-
-  = render "ci_menu"
-  = render "builds"
diff --git a/app/views/projects/commit/pipelines.html.haml b/app/views/projects/commit/pipelines.html.haml
index 8233e26e4e7..ac93eac41ac 100644
--- a/app/views/projects/commit/pipelines.html.haml
+++ b/app/views/projects/commit/pipelines.html.haml
@@ -1,6 +1,5 @@
-- page_title "Pipelines", "#{@commit.title} (#{@commit.short_id})", "Commits"
+- page_title 'Pipelines', "#{@commit.title} (#{@commit.short_id})", 'Commits'
 
-= render "commit_box"
-
-= render "ci_menu"
-= render "pipelines_list", pipelines: @ci_pipelines
+= render 'commit_box'
+= render 'ci_menu'
+= render 'projects/commit/pipelines_list', endpoint: pipelines_namespace_project_commit_path(@project.namespace, @project, @commit.id)
diff --git a/app/views/projects/commit/show.html.haml b/app/views/projects/commit/show.html.haml
index b8c64d1f13e..d5fc283aa8d 100644
--- a/app/views/projects/commit/show.html.haml
+++ b/app/views/projects/commit/show.html.haml
@@ -8,8 +8,8 @@
   - if @commit.status
     = render "ci_menu"
   - else
-    %div.block-connector
-  = render "projects/diffs/diffs", diffs: @diffs
+    .block-connector
+  = render "projects/diffs/diffs", diffs: @diffs, environment: @environment
   = render "projects/notes/notes_with_form"
   - if can_collaborate_with_project?
     - %w(revert cherry-pick).each do |type|
diff --git a/app/views/projects/commits/_commit.html.haml b/app/views/projects/commits/_commit.html.haml
index 9f80a974d64..4b1ff75541a 100644
--- a/app/views/projects/commits/_commit.html.haml
+++ b/app/views/projects/commits/_commit.html.haml
@@ -6,37 +6,37 @@
   - note_count = notes.user.count
 
 - cache_key = [project.path_with_namespace, commit.id, current_application_settings, note_count]
-- cache_key.push(commit.status) if commit.status
+- cache_key.push(commit.status(ref)) if commit.status(ref)
 
 = cache(cache_key, expires_in: 1.day) do
-  %li.commit.js-toggle-container{ id: "commit-#{commit.short_id}" }
-    = author_avatar(commit, size: 36)
+  %li.commit.flex-list.js-toggle-container{ id: "commit-#{commit.short_id}" }
 
-    .commit-info-block
-      .commit-row-title
-        %span.item-title
-          = link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-row-message"
-          %span.commit-row-message.visible-xs-inline
-            &middot;
-            = commit.short_id
-          - if commit.status(ref)
-            .visible-xs-inline
-              = render_commit_status(commit, ref: ref)
-          - if commit.description?
-            %a.text-expander.hidden-xs.js-toggle-button ...
+    .avatar-cell.hidden-xs
+      = author_avatar(commit, size: 36)
 
-        .commit-actions.hidden-xs
-          - if commit.status(ref)
+    .commit-detail
+      .commit-content
+        = link_to_gfm commit.title, namespace_project_commit_path(project.namespace, project, commit.id), class: "commit-row-message item-title"
+        %span.commit-row-message.visible-xs-inline
+          &middot;
+          = commit.short_id
+        - if commit.status(ref)
+          .visible-xs-inline
             = render_commit_status(commit, ref: ref)
-          = clipboard_button(clipboard_text: commit.id)
-          = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit-short-id btn btn-transparent"
-          = link_to_browse_code(project, commit)
+        - if commit.description?
+          %button.text-expander.hidden-xs.js-toggle-button{ type: "button" } ...
 
-      - if commit.description?
-        %pre.commit-row-description.js-toggle-content
-          = preserve(markdown(commit.description, pipeline: :single_line, author: commit.author))
+        - if commit.description?
+          %pre.commit-row-description.js-toggle-content
+            = preserve(markdown(commit.description, pipeline: :single_line, author: commit.author))
+        .commiter
+          = commit_author_link(commit, avatar: false, size: 24)
+          committed
+          #{time_ago_with_tooltip(commit.committed_date)}
 
-      .commit-row-info
-        = commit_author_link(commit, avatar: false, size: 24)
-        authored
-        #{time_ago_with_tooltip(commit.committed_date)}
+      .commit-actions.flex-row.hidden-xs
+        - if commit.status(ref)
+          = render_commit_status(commit, ref: ref)
+        = clipboard_button(clipboard_text: commit.id, title: "Copy commit SHA to clipboard")
+        = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit-short-id btn btn-transparent"
+        = link_to_browse_code(project, commit)
diff --git a/app/views/projects/commits/_commit_list.html.haml b/app/views/projects/commits/_commit_list.html.haml
index ce416caa494..6f5835cb9be 100644
--- a/app/views/projects/commits/_commit_list.html.haml
+++ b/app/views/projects/commits/_commit_list.html.haml
@@ -1,7 +1,7 @@
 - commits, hidden = limited_commits(@commits)
 - commits = Commit.decorate(commits, @project)
 
-%div.panel.panel-default
+.panel.panel-default
   .panel-heading
     Commits (#{@commits.count})
   - if hidden > 0
diff --git a/app/views/projects/commits/_commits.html.haml b/app/views/projects/commits/_commits.html.haml
index 48756c68941..88c7d7bc44b 100644
--- a/app/views/projects/commits/_commits.html.haml
+++ b/app/views/projects/commits/_commits.html.haml
@@ -2,9 +2,9 @@
 - commits, hidden = limited_commits(@commits)
 
 - commits.chunk { |c| c.committed_date.in_time_zone.to_date }.each do |day, commits|
-  %li.commit-header= "#{day.strftime('%d %b, %Y')} #{pluralize(commits.count, 'commit')}"
+  %li.commit-header #{day.strftime('%d %b, %Y')} #{pluralize(commits.count, 'commit')}
   %li.commits-row
-    %ul.list-unstyled.commit-list
+    %ul.content-list.commit-list
       = render commits, project: project, ref: ref
 
 - if hidden > 0
diff --git a/app/views/projects/commits/_head.html.haml b/app/views/projects/commits/_head.html.haml
index 80763ce67ca..dd6797f10c0 100644
--- a/app/views/projects/commits/_head.html.haml
+++ b/app/views/projects/commits/_head.html.haml
@@ -11,14 +11,6 @@
           = link_to namespace_project_commits_path(@project.namespace, @project, current_ref) do
             Commits
 
-        = nav_link(controller: %w(network)) do
-          = link_to namespace_project_network_path(@project.namespace, @project, current_ref) do
-            Network
-
-        = nav_link(controller: :compare) do
-          = link_to namespace_project_compare_index_path(@project.namespace, @project, from: @repository.root_ref, to: current_ref) do
-            Compare
-
         = nav_link(html_options: {class: branches_tab_class}) do
           = link_to namespace_project_branches_path(@project.namespace, @project) do
             Branches
@@ -26,3 +18,19 @@
         = nav_link(controller: [:tags, :releases]) do
           = link_to namespace_project_tags_path(@project.namespace, @project) do
             Tags
+
+        = nav_link(path: 'graphs#show') do
+          = link_to namespace_project_graph_path(@project.namespace, @project, current_ref) do
+            Contributors
+
+        = nav_link(controller: %w(network)) do
+          = link_to namespace_project_network_path(@project.namespace, @project, current_ref) do
+            Graph
+
+        = nav_link(controller: :compare) do
+          = link_to namespace_project_compare_index_path(@project.namespace, @project, from: @repository.root_ref, to: current_ref) do
+            Compare
+
+        = nav_link(path: 'graphs#charts') do
+          = link_to charts_namespace_project_graph_path(@project.namespace, @project, current_ref) do
+            Charts
diff --git a/app/views/projects/commits/show.atom.builder b/app/views/projects/commits/show.atom.builder
index 30bb7412073..2f0b6e39800 100644
--- a/app/views/projects/commits/show.atom.builder
+++ b/app/views/projects/commits/show.atom.builder
@@ -1,7 +1,7 @@
 xml.instruct!
 xml.feed "xmlns" => "http://www.w3.org/2005/Atom", "xmlns:media" => "http://search.yahoo.com/mrss/" do
   xml.title   "#{@project.name}:#{@ref} commits"
-  xml.link    href: namespace_project_commits_url(@project.namespace, @project, @ref, format: :atom, private_token: current_user.try(:private_token)), rel: "self", type: "application/atom+xml"
+  xml.link    href: namespace_project_commits_url(@project.namespace, @project, @ref, rss_url_options), rel: "self", type: "application/atom+xml"
   xml.link    href: namespace_project_commits_url(@project.namespace, @project, @ref), rel: "alternate", type: "text/html"
   xml.id      namespace_project_commits_url(@project.namespace, @project, @ref)
   xml.updated @commits.first.committed_date.xmlschema if @commits.any?
diff --git a/app/views/projects/commits/show.html.haml b/app/views/projects/commits/show.html.haml
index 9628cbd1634..38dbf2ac10b 100644
--- a/app/views/projects/commits/show.html.haml
+++ b/app/views/projects/commits/show.html.haml
@@ -2,38 +2,35 @@
 
 - page_title "Commits", @ref
 = content_for :meta_tags do
-  - if current_user
-    = auto_discovery_link_tag(:atom, namespace_project_commits_url(@project.namespace, @project, @ref, format: :atom, private_token: current_user.private_token), title: "#{@project.name}:#{@ref} commits")
+  = auto_discovery_link_tag(:atom, namespace_project_commits_url(@project.namespace, @project, @ref, rss_url_options), title: "#{@project.name}:#{@ref} commits")
 
 = content_for :sub_nav do
   = render "head"
 
 %div{ class: container_class }
-  .row-content-block.second-block.content-component-block
+  .row-content-block.second-block.content-component-block.flex-container-block
     .tree-ref-holder
       = render 'shared/ref_switcher', destination: 'commits'
 
+    %ul.breadcrumb.repo-breadcrumb
+      = commits_breadcrumbs
+
     .block-controls.hidden-xs.hidden-sm
       - if @merge_request.present?
         .control
           = link_to "View Open Merge Request", namespace_project_merge_request_path(@project.namespace, @project, @merge_request), class: 'btn'
       - elsif create_mr_button?(@repository.root_ref, @ref)
         .control
-          = link_to create_mr_path(@repository.root_ref, @ref), class: 'btn btn-success' do
-            = icon('plus')
-            Create Merge Request
+          = link_to "Create Merge Request", create_mr_path(@repository.root_ref, @ref), class: 'btn btn-success'
 
       .control
         = form_tag(namespace_project_commits_path(@project.namespace, @project, @id), method: :get, class: 'commits-search-form') do
           = search_field_tag :search, params[:search], { placeholder: 'Filter by commit message', id: 'commits-search', class: 'form-control search-text-input input-short', spellcheck: false }
-      - if current_user && current_user.private_token
-        .control
-          = link_to namespace_project_commits_path(@project.namespace, @project, @ref, {format: :atom, private_token: current_user.private_token}), title: "Commits Feed", class: 'btn' do
-            = icon("rss")
-    %ul.breadcrumb.repo-breadcrumb
-      = commits_breadcrumbs
+      .control
+        = link_to namespace_project_commits_path(@project.namespace, @project, @ref, rss_url_options), title: "Commits Feed", class: 'btn' do
+          = icon("rss")
 
-  %div{id: dom_id(@project)}
+  %div{ id: dom_id(@project) }
     %ol#commits-list.list-unstyled.content_list
       = render 'commits', project: @project, ref: @ref
   = spinner
diff --git a/app/views/projects/compare/_form.html.haml b/app/views/projects/compare/_form.html.haml
index 7bde20c3286..08236216421 100644
--- a/app/views/projects/compare/_form.html.haml
+++ b/app/views/projects/compare/_form.html.haml
@@ -2,27 +2,25 @@
   .clearfix
     - if params[:to] && params[:from]
       .compare-switch-container
-        = link_to icon('exchange'), {from: params[:to], to: params[:from]}, {class: 'commits-compare-switch has-tooltip', title: 'Switch base of comparison'}
+        = link_to icon('exchange'), {from: params[:to], to: params[:from]}, {class: 'commits-compare-switch has-tooltip btn btn-white', title: 'Switch base of comparison'}
     .form-group.dropdown.compare-form-group.from.js-compare-from-dropdown
       .input-group.inline-input-group
         %span.input-group-addon from
         = hidden_field_tag :from, params[:from]
-        = button_tag type: 'button', class: "form-control compare-dropdown-toggle js-compare-dropdown", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-from-dropdown", selected: params[:from], field_name: :from } do
-          .dropdown-toggle-text= params[:from] || 'Select branch/tag'
+        = button_tag type: 'button', title: params[:from], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-from-dropdown", selected: params[:from], field_name: :from } do
+          .dropdown-toggle-text.str-truncated= params[:from] || 'Select branch/tag'
       = render "ref_dropdown"
     .compare-ellipsis.inline ...
     .form-group.dropdown.compare-form-group.to.js-compare-to-dropdown
       .input-group.inline-input-group
         %span.input-group-addon to
         = hidden_field_tag :to, params[:to]
-        = button_tag type: 'button', class: "form-control compare-dropdown-toggle js-compare-dropdown", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-to-dropdown", selected: params[:to], field_name: :to } do
-          .dropdown-toggle-text= params[:to] || 'Select branch/tag'
+        = button_tag type: 'button', title: params[:to], class: "form-control compare-dropdown-toggle js-compare-dropdown has-tooltip", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-to-dropdown", selected: params[:to], field_name: :to } do
+          .dropdown-toggle-text.str-truncated= params[:to] || 'Select branch/tag'
       = render "ref_dropdown"
     &nbsp;
     = button_tag "Compare", class: "btn btn-create commits-compare-btn"
     - if @merge_request.present?
       = link_to "View Open Merge Request", namespace_project_merge_request_path(@project.namespace, @project, @merge_request), class: 'prepend-left-10 btn'
     - elsif create_mr_button?
-      = link_to create_mr_path, class: 'prepend-left-10 btn' do
-        = icon("plus")
-        Create Merge Request
+      = link_to "Create Merge Request", create_mr_path, class: 'prepend-left-10 btn'
diff --git a/app/views/projects/compare/show.html.haml b/app/views/projects/compare/show.html.haml
index 819e9bc15ae..0dfc9fe20ed 100644
--- a/app/views/projects/compare/show.html.haml
+++ b/app/views/projects/compare/show.html.haml
@@ -8,7 +8,7 @@
 
   - if @commits.present?
     = render "projects/commits/commit_list"
-    = render "projects/diffs/diffs", diffs: @diffs
+    = render "projects/diffs/diffs", diffs: @diffs, environment: @environment
   - else
     .light-well
       .center
@@ -16,9 +16,9 @@
           There isn't anything to compare.
         %p.slead
           - if params[:to] == params[:from]
-            %span.label-branch #{params[:from]}
+            %span.label-branch= params[:from]
             and
-            %span.label-branch #{params[:to]}
+            %span.label-branch= params[:to]
             are the same.
           - else
             You'll need to use different branch names to get a valid comparison.
diff --git a/app/views/projects/cycle_analytics/_empty_stage.html.haml b/app/views/projects/cycle_analytics/_empty_stage.html.haml
new file mode 100644
index 00000000000..c3f95860e92
--- /dev/null
+++ b/app/views/projects/cycle_analytics/_empty_stage.html.haml
@@ -0,0 +1,7 @@
+.empty-stage-container
+  .empty-stage
+    .icon-no-data
+      = custom_icon ('icon_no_data')
+    %h4 We don't have enough data to show this stage.
+    %p
+      {{currentStage.emptyStageText}}
diff --git a/app/views/projects/cycle_analytics/_no_access.html.haml b/app/views/projects/cycle_analytics/_no_access.html.haml
new file mode 100644
index 00000000000..0ffc79b3181
--- /dev/null
+++ b/app/views/projects/cycle_analytics/_no_access.html.haml
@@ -0,0 +1,7 @@
+.no-access-stage-container
+  .no-access-stage
+    .icon-lock
+      = custom_icon ('icon_lock')
+    %h4 You need permission.
+    %p
+      Want to see the data? Please ask administrator for access.
diff --git a/app/views/projects/cycle_analytics/_overview.html.haml b/app/views/projects/cycle_analytics/_overview.html.haml
new file mode 100644
index 00000000000..9007f2c24ba
--- /dev/null
+++ b/app/views/projects/cycle_analytics/_overview.html.haml
@@ -0,0 +1,15 @@
+.cycle-analytics-overview
+  .container
+    .row
+      .col-md-10.col-md-offset-1
+        .row.overview-details
+          .col-md-6.overview-text
+            %h4 Introducing Cycle Analytics
+            %p
+              Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.
+              To set up CA, you must first define a production environment by setting up your CI and then deploy to production.
+            %p
+              %a.btn{ href: help_page_path('user/project/cycle_analytics'), target: '_blank' } Read more
+          .col-md-6.overview-image
+            %span.overview-icon
+              = custom_icon ('icon_cycle_analytics_overview')
diff --git a/app/views/projects/cycle_analytics/show.html.haml b/app/views/projects/cycle_analytics/show.html.haml
index 247d612ba6f..dd3fa814716 100644
--- a/app/views/projects/cycle_analytics/show.html.haml
+++ b/app/views/projects/cycle_analytics/show.html.haml
@@ -1,63 +1,91 @@
 - @no_container = true
 - page_title "Cycle Analytics"
-
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_tag('cycle_analytics/cycle_analytics_bundle.js')
-
-= render "projects/pipelines/head"
+  = page_specific_javascript_bundle_tag('common_vue')
+  = page_specific_javascript_bundle_tag('cycle_analytics')
 
-#cycle-analytics{class: container_class, "v-cloak" => "true", data: { request_path: project_cycle_analytics_path(@project) }}
+= render "projects/head"
 
-  .bordered-box.landing.content-block{"v-if" => "!isHelpDismissed"}
-    = icon('times', class: 'dismiss-icon', "@click" => "dismissLanding()")
-    .row
-      .col-sm-3.col-xs-12.svg-container
-        = custom_icon('icon_cycle_analytics_splash')
-      .col-sm-8.col-xs-12.inner-content
-        %h4
-          Introducing Cycle Analytics
-        %p
-          Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.
-
-        = link_to "Read more",  help_page_path('user/project/cycle_analytics'), target: '_blank', class: 'btn'
+#cycle-analytics{ class: container_class, "v-cloak" => "true", data: { request_path: project_cycle_analytics_path(@project) } }
+  - if @cycle_analytics_no_data
+    .bordered-box.landing.content-block{ "v-if" => "!isOverviewDialogDismissed" }
+      = icon("times", class: "dismiss-icon", "@click" => "dismissOverviewDialog()")
+      .row
+        .col-sm-3.col-xs-12.svg-container
+          = custom_icon('icon_cycle_analytics_splash')
+        .col-sm-8.col-xs-12.inner-content
+          %h4
+            Introducing Cycle Analytics
+          %p
+            Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.
 
+          = link_to "Read more",  help_page_path('user/project/cycle_analytics'), target: '_blank', class: 'btn'
   = icon("spinner spin", "v-show" => "isLoading")
-
-  .wrapper{"v-show" => "!isLoading && !hasError"}
+  .wrapper{ "v-show" => "!isLoading && !hasError" }
     .panel.panel-default
       .panel-heading
         Pipeline Health
-
       .content-block
         .container-fluid
           .row
-            .col-sm-3.col-xs-12.column{"v-for" => "item in analytics.summary"}
-              %h3.header {{item.value}}
-              %p.text {{item.title}}
-
+            .col-sm-3.col-xs-12.column{ "v-for" => "item in state.summary" }
+              %h3.header {{ item.value }}
+              %p.text {{ item.title }}
             .col-sm-3.col-xs-12.column
               .dropdown.inline.js-ca-dropdown
-                %button.dropdown-menu-toggle{"data-toggle" => "dropdown", :type => "button"}
+                %button.dropdown-menu-toggle{ "data-toggle" => "dropdown", :type => "button" }
                   %span.dropdown-label Last 30 days
                   %i.fa.fa-chevron-down
                 %ul.dropdown-menu.dropdown-menu-align-right
                   %li
-                    %a{'href' => "#", 'data-value' => '30'}
+                    %a{ "href" => "#", "data-value" => "30" }
                       Last 30 days
                   %li
-                    %a{'href' => "#", 'data-value' => '90'}
+                    %a{ "href" => "#", "data-value" => "90" }
                       Last 90 days
-
-    .bordered-box
-      %ul.content-list
-        %li{"v-for" => "item in analytics.stats"}
-          .container-fluid
-            .row
-              .col-xs-8.title-col
-                %p.title
-                  {{item.title}}
-                %p.text
-                  {{item.description}}
-              .col-xs-4.value-col
-                %span
-                  {{item.value}}
+    .stage-panel-container
+      .panel.panel-default.stage-panel
+        .panel-heading
+          %nav.col-headers
+            %ul
+              %li.stage-header
+                %span.stage-name
+                  Stage
+                %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: "The phase of the development lifecycle.", "aria-hidden" => "true" }
+              %li.median-header
+                %span.stage-name
+                  Median
+                %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: "The value lying at the midpoint of a series of observed values. E.g., between 3, 5, 9, the median is 5. Between 3, 5, 7, 8, the median is (5+7)/2 = 6.", "aria-hidden" => "true" }
+              %li.event-header
+                %span.stage-name
+                  {{ currentStage ? currentStage.legend : 'Related Issues' }}
+                %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: "The collection of events added to the data gathered for that stage.", "aria-hidden" => "true" }
+              %li.total-time-header
+                %span.stage-name
+                  Total Time
+                %i.has-tooltip.fa.fa-question-circle{ "data-placement" => "top", title: "The time taken by each data entry gathered by that stage.", "aria-hidden" => "true" }
+        .stage-panel-body
+          %nav.stage-nav
+            %ul
+              %li.stage-nav-item{ ':class' => '{ active: stage.active }', '@click' => 'selectStage(stage)', "v-for" => "stage in state.stages" }
+                .stage-nav-item-cell.stage-name
+                  {{ stage.title }}
+                .stage-nav-item-cell.stage-median
+                  %template{ "v-if" => "stage.isUserAllowed" }
+                    %span{ "v-if" => "stage.value" }
+                      {{ stage.value }}
+                    %span.stage-empty{ "v-else" => true }
+                      Not enough data
+                  %template{ "v-else" => true }
+                    %span.not-available
+                      Not available
+          .section.stage-events
+            %template{ "v-if" => "isLoadingStage" }
+              = icon("spinner spin")
+            %template{ "v-if" => "currentStage && !currentStage.isUserAllowed" }
+              = render partial: "no_access"
+            %template{ "v-else" => true }
+              %template{ "v-if" => "isEmptyStage && !isLoadingStage" }
+                = render partial: "empty_stage"
+              %template{ "v-if" => "state.events.length && !isLoadingStage && !isEmptyStage" }
+                %component{ ":is" => "currentStage.component", ":stage" => "currentStage", ":items" => "state.events" }
diff --git a/app/views/projects/deploy_keys/_deploy_key.html.haml b/app/views/projects/deploy_keys/_deploy_key.html.haml
index 450aaeb367c..ec8fc4c9ee8 100644
--- a/app/views/projects/deploy_keys/_deploy_key.html.haml
+++ b/app/views/projects/deploy_keys/_deploy_key.html.haml
@@ -6,6 +6,9 @@
       = deploy_key.title
     .description
       = deploy_key.fingerprint
+    - if deploy_key.can_push?
+      .write-access-allowed
+        Write access allowed
   .deploy-key-content.prepend-left-default.deploy-key-projects
     - deploy_key.projects.each do |project|
       - if can?(current_user, :read_project, project)
@@ -15,7 +18,7 @@
     %span.key-created-at
       created #{time_ago_with_tooltip(deploy_key.created_at)}
     .visible-xs-block.visible-sm-block
-    - if @available_keys.include?(deploy_key)
+    - if @deploy_keys.key_available?(deploy_key)
       = link_to enable_namespace_project_deploy_key_path(@project.namespace, @project, deploy_key), class: "btn btn-sm prepend-left-10", method: :put do
         Enable
     - else
diff --git a/app/views/projects/deploy_keys/_form.html.haml b/app/views/projects/deploy_keys/_form.html.haml
index 901605f7ca3..1421da72418 100644
--- a/app/views/projects/deploy_keys/_form.html.haml
+++ b/app/views/projects/deploy_keys/_form.html.haml
@@ -1,5 +1,5 @@
-= form_for [@project.namespace.becomes(Namespace), @project, @key], url: namespace_project_deploy_keys_path, html: { class: "js-requires-input" } do |f|
-  = form_errors(@key)
+= form_for [@project.namespace.becomes(Namespace), @project, @deploy_keys.new_key], url: namespace_project_deploy_keys_path, html: { class: "js-requires-input" } do |f|
+  = form_errors(@deploy_keys.new_key)
   .form-group
     = f.label :title, class: "label-light"
     = f.text_field :title, class: 'form-control', autofocus: true, required: true
@@ -10,4 +10,13 @@
     %p.light.append-bottom-0
       Paste a machine public key here. Read more about how to generate it
       = link_to "here", help_page_path("ssh/README")
+  .form-group
+    .checkbox
+      = f.label :can_push do
+        = f.check_box :can_push
+        %strong Write access allowed
+  .form-group
+    %p.light.append-bottom-0
+      Allow this key to push to repository as well? (Default only allows pull access.)
+
   = f.submit "Add key", class: "btn-create btn"
diff --git a/app/views/projects/deploy_keys/_index.html.haml b/app/views/projects/deploy_keys/_index.html.haml
new file mode 100644
index 00000000000..4cfbd9add00
--- /dev/null
+++ b/app/views/projects/deploy_keys/_index.html.haml
@@ -0,0 +1,34 @@
+.row.prepend-top-default
+  .col-lg-3.profile-settings-sidebar
+    %h4.prepend-top-0
+      Deploy Keys
+    %p
+      Deploy keys allow read-only or read-write (if enabled) access to your repository. Deploy keys can be used for CI, staging or production servers. You can create a deploy key or add an existing one.
+  .col-lg-9
+    %h5.prepend-top-0
+      Create a new deploy key for this project
+    = render @deploy_keys.form_partial_path
+  .col-lg-9.col-lg-offset-3
+    %hr
+  .col-lg-9.col-lg-offset-3.append-bottom-default.deploy-keys
+    %h5.prepend-top-0
+      Enabled deploy keys for this project (#{@deploy_keys.enabled_keys_size})
+    - if @deploy_keys.any_keys_enabled?
+      %ul.well-list
+        = render partial: 'projects/deploy_keys/deploy_key', collection: @deploy_keys.enabled_keys, as: :deploy_key
+    - else
+      .settings-message.text-center
+        No deploy keys found. Create one with the form above.
+    %h5.prepend-top-default
+      Deploy keys from projects you have access to (#{@deploy_keys.available_project_keys_size})
+    - if @deploy_keys.any_available_project_keys_enabled?
+      %ul.well-list
+        = render partial: 'projects/deploy_keys/deploy_key', collection: @deploy_keys.available_project_keys, as: :deploy_key
+    - else
+      .settings-message.text-center
+        No deploy keys from your projects could be found. Create one with the form above or add existing one below.
+    - if @deploy_keys.any_available_public_keys_enabled?
+      %h5.prepend-top-default
+        Public deploy keys available to any project (#{@deploy_keys.available_public_keys_size})
+      %ul.well-list
+        = render partial: 'projects/deploy_keys/deploy_key', collection: @deploy_keys.available_public_keys, as: :deploy_key
diff --git a/app/views/projects/deploy_keys/index.html.haml b/app/views/projects/deploy_keys/index.html.haml
deleted file mode 100644
index 04fbb37d93f..00000000000
--- a/app/views/projects/deploy_keys/index.html.haml
+++ /dev/null
@@ -1,36 +0,0 @@
-- page_title "Deploy Keys"
-
-.row.prepend-top-default
-  .col-lg-3.profile-settings-sidebar
-    %h4.prepend-top-0
-      = page_title
-    %p
-      Deploy keys allow read-only access to your repository. Deploy keys can be used for CI, staging or production servers. You can create a deploy key or add an existing one.
-  .col-lg-9
-    %h5.prepend-top-0
-      Create a new deploy key for this project
-    = render "form"
-  .col-lg-9.col-lg-offset-3
-    %hr
-  .col-lg-9.col-lg-offset-3.append-bottom-default.deploy-keys
-    %h5.prepend-top-0
-      Enabled deploy keys for this project (#{@enabled_keys.size})
-    - if @enabled_keys.any?
-      %ul.well-list
-        = render @enabled_keys
-    - else
-      .settings-message.text-center
-        No deploy keys found. Create one with the form above or add existing one below.
-    %h5.prepend-top-default
-      Deploy keys from projects you have access to (#{@available_project_keys.size})
-    - if @available_project_keys.any?
-      %ul.well-list
-        = render @available_project_keys
-    - else
-      .settings-message.text-center
-        No deploy keys from your projects could be found. Create one with the form above or add existing one below.
-    - if @available_public_keys.any?
-      %h5.prepend-top-default
-        Public deploy keys available to any project (#{@available_public_keys.size})
-      %ul.well-list
-        = render @available_public_keys
diff --git a/app/views/projects/deployments/_actions.haml b/app/views/projects/deployments/_actions.haml
index 58a214bdbd1..506246f2ee6 100644
--- a/app/views/projects/deployments/_actions.haml
+++ b/app/views/projects/deployments/_actions.haml
@@ -1,9 +1,9 @@
 - if can?(current_user, :create_deployment, deployment)
   - actions = deployment.manual_actions
   - if actions.present?
-    .inline
+    .btn-group
       .dropdown
-        %a.dropdown-new.btn.btn-default{type: 'button', 'data-toggle' => 'dropdown'}
+        %button.dropdown.dropdown-new.btn.btn-default{ type: 'button', 'data-toggle' => 'dropdown' }
           = custom_icon('icon_play')
           = icon('caret-down')
         %ul.dropdown-menu.dropdown-menu-align-right
@@ -12,4 +12,3 @@
               = link_to [:play, @project.namespace.becomes(Namespace), @project, action], method: :post, rel: 'nofollow' do
                 = custom_icon('icon_play')
                 %span= action.name.humanize
-
diff --git a/app/views/projects/deployments/_commit.html.haml b/app/views/projects/deployments/_commit.html.haml
index ff250eeca50..170d786ecbf 100644
--- a/app/views/projects/deployments/_commit.html.haml
+++ b/app/views/projects/deployments/_commit.html.haml
@@ -1,4 +1,4 @@
-%div.branch-commit
+.branch-commit
   - if deployment.ref
     .icon-container
       = deployment.tag? ? icon('tag') : icon('code-fork')
diff --git a/app/views/projects/deployments/_deployment.html.haml b/app/views/projects/deployments/_deployment.html.haml
index 9238f232c7e..260c9023daf 100644
--- a/app/views/projects/deployments/_deployment.html.haml
+++ b/app/views/projects/deployments/_deployment.html.haml
@@ -1,6 +1,6 @@
 %tr.deployment
   %td
-    %strong= "##{deployment.iid}"
+    %strong ##{deployment.iid}
 
   %td
     = render 'projects/deployments/commit', deployment: deployment
@@ -8,7 +8,7 @@
   %td.build-column
     - if deployment.deployable
       = link_to [@project.namespace.becomes(Namespace), @project, deployment.deployable], class: 'build-link' do
-        = "#{deployment.deployable.name} (##{deployment.deployable.id})"
+        #{deployment.deployable.name} (##{deployment.deployable.id})
       - if deployment.user
         by
         = user_avatar(user: deployment.user, size: 20)
@@ -17,6 +17,6 @@
     #{time_ago_with_tooltip(deployment.created_at)}
 
   %td.hidden-xs
-    .pull-right
+    .pull-right.btn-group
       = render 'projects/deployments/actions', deployment: deployment
       = render 'projects/deployments/rollback', deployment: deployment
diff --git a/app/views/projects/diffs/_content.html.haml b/app/views/projects/diffs/_content.html.haml
index 779c8ea0104..5c38b5ad9c0 100644
--- a/app/views/projects/diffs/_content.html.haml
+++ b/app/views/projects/diffs/_content.html.haml
@@ -1,5 +1,5 @@
 .diff-content.diff-wrap-lines
-  - # Skip all non non-supported blobs
+  -# Skip all non non-supported blobs
   - return unless blob.respond_to?(:text?)
   - if diff_file.too_large?
     .nothing-here-block This diff could not be displayed because it is too large.
@@ -9,23 +9,26 @@
     - if !project.repository.diffable?(blob)
       .nothing-here-block This diff was suppressed by a .gitattributes entry.
     - elsif diff_file.collapsed?
-      - url = url_for(params.merge(action: :diff_for_path, old_path: diff_file.old_path, new_path: diff_file.new_path))
-      .nothing-here-block.diff-collapsed{data: { diff_for_path: url } }
+      - url = url_for(params.merge(action: :diff_for_path, old_path: diff_file.old_path, new_path: diff_file.new_path, file_identifier: diff_file.file_identifier))
+      .nothing-here-block.diff-collapsed{ data: { diff_for_path: url } }
         This diff is collapsed.
         %a.click-to-expand
           Click to expand it.
     - elsif diff_file.diff_lines.length > 0
+      - total_lines = 0
+      - if blob.lines.any?
+        - total_lines = blob.lines.last.chomp == '' ? blob.lines.size - 1 : blob.lines.size
       - if diff_view == :parallel
-        = render "projects/diffs/parallel_view", diff_file: diff_file, project: project, blob: blob
+        = render "projects/diffs/parallel_view", diff_file: diff_file, total_lines: total_lines
       - else
-        = render "projects/diffs/text_file", diff_file: diff_file
+        = render "projects/diffs/text_file", diff_file: diff_file, total_lines: total_lines
     - else
       - if diff_file.mode_changed?
         .nothing-here-block File mode changed
       - elsif diff_file.renamed_file
         .nothing-here-block File moved
   - elsif blob.image?
-    - old_blob = diff_file.old_blob(diff_commit)
+    - old_blob = diff_file.old_blob(diff_file.old_content_commit || @base_commit)
     = render "projects/diffs/image", diff_file: diff_file, old_file: old_blob, file: blob
   - else
     .nothing-here-block No preview for this file type
diff --git a/app/views/projects/diffs/_diffs.html.haml b/app/views/projects/diffs/_diffs.html.haml
index 067cf595da3..4b49bed835f 100644
--- a/app/views/projects/diffs/_diffs.html.haml
+++ b/app/views/projects/diffs/_diffs.html.haml
@@ -1,3 +1,4 @@
+- environment = local_assigns.fetch(:environment, nil)
 - show_whitespace_toggle = local_assigns.fetch(:show_whitespace_toggle, true)
 - can_create_note = !@diff_notes_disabled && can?(current_user, :create_note, diffs.project)
 - diff_files = diffs.diff_files
@@ -18,15 +19,16 @@
       = parallel_diff_btn
   = render 'projects/diffs/stats', diff_files: diff_files
 
-- if diff_files.overflow?
-  = render 'projects/diffs/warning', diff_files: diff_files
+- if render_overflow_warning?(diff_files)
+  = render 'projects/diffs/warning', diff_files: diffs
 
 .files{ data: { can_create_note: can_create_note } }
-  - diff_files.each_with_index do |diff_file, index|
+  - diff_files.each_with_index do |diff_file|
     - diff_commit = commit_for_diff(diff_file)
     - blob = diff_file.blob(diff_commit)
     - next unless blob
     - blob.load_all_data!(diffs.project.repository) unless blob.only_display_raw?
+    - file_hash = hexdigest(diff_file.file_path)
 
-    = render 'projects/diffs/file', index: index, project: diffs.project,
-      diff_file: diff_file, diff_commit: diff_commit, blob: blob
+    = render 'projects/diffs/file', file_hash: file_hash, project: diffs.project,
+      diff_file: diff_file, diff_commit: diff_commit, blob: blob, environment: environment
diff --git a/app/views/projects/diffs/_file.html.haml b/app/views/projects/diffs/_file.html.haml
index 8f4f9ad4a80..0232a09b4a8 100644
--- a/app/views/projects/diffs/_file.html.haml
+++ b/app/views/projects/diffs/_file.html.haml
@@ -1,18 +1,21 @@
-.diff-file.file-holder{id: "diff-#{index}", data: diff_file_html_data(project, diff_file.file_path, diff_commit.id)}
-  .file-title{id: "file-path-#{hexdigest(diff_file.file_path)}"}
-    = render "projects/diffs/file_header", diff_file: diff_file, blob: blob, diff_commit: diff_commit, project: project, url: "#diff-#{index}"
+- environment = local_assigns.fetch(:environment, nil)
+.diff-file.file-holder{ id: file_hash, data: diff_file_html_data(project, diff_file.file_path, diff_commit.id) }
+  .js-file-title.file-title-flex-parent
+    .file-header-content
+      = render "projects/diffs/file_header", diff_file: diff_file, blob: blob, diff_commit: diff_commit, project: project, url: "##{file_hash}"
 
     - unless diff_file.submodule?
       .file-actions.hidden-xs
         - if blob_text_viewable?(blob)
-          = link_to '#', class: 'js-toggle-diff-comments btn active has-tooltip btn-file-option', title: "Toggle comments for this file", disabled: @diff_notes_disabled do
+          = link_to '#', class: 'js-toggle-diff-comments btn active has-tooltip', title: "Toggle comments for this file", disabled: @diff_notes_disabled do
             = icon('comment')
           \
           - if editable_diff?(diff_file)
-            - link_opts = @merge_request.id ? { from_merge_request_id: @merge_request.id } : {}
+            - link_opts = @merge_request.persisted? ? { from_merge_request_iid: @merge_request.iid } : {}
             = edit_blob_link(@merge_request.source_project, @merge_request.source_branch, diff_file.new_path,
                              blob: blob, link_opts: link_opts)
 
-        = view_file_btn(diff_commit.id, diff_file.new_path, project)
+        = view_file_button(diff_commit.id, diff_file.new_path, project)
+        = view_on_environment_button(diff_commit.id, diff_file.new_path, environment) if environment
 
   = render 'projects/diffs/content', diff_file: diff_file, diff_commit: diff_commit, blob: blob, project: project
diff --git a/app/views/projects/diffs/_file_header.html.haml b/app/views/projects/diffs/_file_header.html.haml
index d3ed8e1bf38..7d6b3701f95 100644
--- a/app/views/projects/diffs/_file_header.html.haml
+++ b/app/views/projects/diffs/_file_header.html.haml
@@ -2,27 +2,30 @@
 - if defined?(blob) && blob && diff_file.submodule?
   %span
     = icon('archive fw')
-    %span
+
+    %strong.file-title-name
       = submodule_link(blob, diff_commit.id, project.repository)
+
+    = copy_file_path_button(blob.path)
 - else
   = conditional_link_to url.present?, url do
     = blob_icon diff_file.b_mode, diff_file.file_path
 
     - if diff_file.renamed_file
       - old_path, new_path = mark_inline_diffs(diff_file.old_path, diff_file.new_path)
-      %strong
+      %strong.file-title-name.has-tooltip{ data: { title: diff_file.old_path, container: 'body' } }
         = old_path
       &rarr;
-      %strong
+      %strong.file-title-name.has-tooltip{ data: { title: diff_file.new_path, container: 'body' } }
         = new_path
     - else
-      %strong
+      %strong.file-title-name.has-tooltip{ data: { title: diff_file.new_path, container: 'body' } }
         = diff_file.new_path
       - if diff_file.deleted_file
         deleted
 
-  = clipboard_button(clipboard_text: diff_file.new_path, class: 'btn-clipboard btn-transparent prepend-left-5', title: 'Copy filename to clipboard')
+  = copy_file_path_button(diff_file.new_path)
 
   - if diff_file.mode_changed?
     %small
-      = "#{diff_file.a_mode} → #{diff_file.b_mode}"
+      #{diff_file.a_mode} → #{diff_file.b_mode}
diff --git a/app/views/projects/diffs/_image.html.haml b/app/views/projects/diffs/_image.html.haml
index 9ec6a7aa5cd..ca10921c5e2 100644
--- a/app/views/projects/diffs/_image.html.haml
+++ b/app/views/projects/diffs/_image.html.haml
@@ -7,18 +7,18 @@
 - if diff.renamed_file || diff.new_file || diff.deleted_file
   .image
     %span.wrap
-      .frame{class: image_diff_class(diff)}
-        %img{src: diff.deleted_file ? old_file_raw_path : file_raw_path}
-      %p.image-info= "#{number_to_human_size file.size}"
+      .frame{ class: image_diff_class(diff) }
+        %img{ src: diff.deleted_file ? old_file_raw_path : file_raw_path, alt: diff.new_path }
+      %p.image-info= number_to_human_size(file.size)
 - else
   .image
-    %div.two-up.view
+    .two-up.view
       %span.wrap
         .frame.deleted
-          %a{href: namespace_project_blob_path(@project.namespace, @project, tree_join(diff_file.old_ref, diff.old_path))}
-            %img{src: old_file_raw_path}
+          %a{ href: namespace_project_blob_path(@project.namespace, @project, tree_join(diff_file.old_ref, diff.old_path)) }
+            %img{ src: old_file_raw_path, alt: diff.old_path }
         %p.image-info.hide
-          %span.meta-filesize= "#{number_to_human_size old_file.size}"
+          %span.meta-filesize= number_to_human_size(old_file.size)
           |
           %b W:
           %span.meta-width
@@ -27,10 +27,10 @@
           %span.meta-height
       %span.wrap
         .frame.added
-          %a{href: namespace_project_blob_path(@project.namespace, @project, tree_join(diff_file.new_ref, diff.new_path))}
-            %img{src: file_raw_path}
+          %a{ href: namespace_project_blob_path(@project.namespace, @project, tree_join(diff_file.new_ref, diff.new_path)) }
+            %img{ src: file_raw_path, alt: diff.new_path }
         %p.image-info.hide
-          %span.meta-filesize= "#{number_to_human_size file.size}"
+          %span.meta-filesize= number_to_human_size(file.size)
           |
           %b W:
           %span.meta-width
@@ -38,32 +38,32 @@
           %b H:
           %span.meta-height
 
-    %div.swipe.view.hide
+    .swipe.view.hide
       .swipe-frame
         .frame.deleted
-          %img{src: old_file_raw_path}
+          %img{ src: old_file_raw_path, alt: diff.old_path }
         .swipe-wrap
           .frame.added
-            %img{src: file_raw_path}
+            %img{ src: file_raw_path, alt: diff.new_path }
         %span.swipe-bar
           %span.top-handle
           %span.bottom-handle
 
-    %div.onion-skin.view.hide
+    .onion-skin.view.hide
       .onion-skin-frame
         .frame.deleted
-          %img{src: old_file_raw_path}
+          %img{ src: old_file_raw_path, alt: diff.old_path }
         .frame.added
-          %img{src: file_raw_path}
+          %img{ src: file_raw_path, alt: diff.new_path }
         .controls
           .transparent
           .drag-track
-            .dragger{:style => "left: 0px;"}
+            .dragger{ :style => "left: 0px;" }
           .opaque
 
 
   .view-modes.hide
     %ul.view-modes-menu
-      %li.two-up{data: {mode: 'two-up'}} 2-up
-      %li.swipe{data: {mode: 'swipe'}} Swipe
-      %li.onion-skin{data: {mode: 'onion-skin'}} Onion skin
+      %li.two-up{ data: { mode: 'two-up' } } 2-up
+      %li.swipe{ data: { mode: 'swipe' } } Swipe
+      %li.onion-skin{ data: { mode: 'onion-skin' } } Onion skin
diff --git a/app/views/projects/diffs/_line.html.haml b/app/views/projects/diffs/_line.html.haml
index 7042e9f1fc9..c09c7b87e24 100644
--- a/app/views/projects/diffs/_line.html.haml
+++ b/app/views/projects/diffs/_line.html.haml
@@ -1,37 +1,39 @@
 - email = local_assigns.fetch(:email, false)
 - plain = local_assigns.fetch(:plain, false)
+- discussions = local_assigns.fetch(:discussions, nil)
 - type = line.type
 - line_code = diff_file.line_code(line)
-%tr.line_holder{ plain ? { class: type} : { class: type, id: line_code } }
+- if discussions && !line.meta?
+  - discussion = discussions[line_code]
+%tr.line_holder{ class: type, id: (line_code unless plain) }
   - case type
   - when 'match'
     = diff_match_line line.old_pos, line.new_pos, text: line.text
-  - when 'nonewline'
+  - when 'old-nonewline', 'new-nonewline'
     %td.old_line.diff-line-num
     %td.new_line.diff-line-num
     %td.line_content.match= line.text
   - else
-    %td.old_line.diff-line-num{ class: type, data: { linenumber: line.old_pos } }
+    %td.old_line.diff-line-num{ class: [type, ("js-avatar-container" if !plain)], data: { linenumber: line.old_pos } }
       - link_text = type == "new" ? " " : line.old_pos
       - if plain
         = link_text
       - else
-        %a{href: "##{line_code}", data: { linenumber: link_text }}
+        %a{ href: "##{line_code}", data: { linenumber: link_text } }
+      - if discussion && discussion.resolvable? && !plain
+        %diff-note-avatars{ "discussion-id" => discussion.id }
     %td.new_line.diff-line-num{ class: type, data: { linenumber: line.new_pos } }
       - link_text = type == "old" ? " " : line.new_pos
       - if plain
         = link_text
       - else
-        %a{href: "##{line_code}", data: { linenumber: link_text }}
+        %a{ href: "##{line_code}", data: { linenumber: link_text } }
     %td.line_content.noteable_line{ class: type, data: (diff_view_line_data(line_code, diff_file.position(line), type) unless plain) }<
       - if email
-        %pre= diff_line_content(line.text, type)
+        %pre= line.text
       - else
-        = diff_line_content(line.text, type)
+        = diff_line_content(line.text)
 
-- discussions = local_assigns.fetch(:discussions, nil)
-- if discussions && !line.meta?
-  - discussion = discussions[line_code]
-  - if discussion
-    - discussion_expanded = local_assigns.fetch(:discussion_expanded, discussion.expanded?)
-    = render "discussions/diff_discussion", discussion: discussion, expanded: discussion_expanded
+- if discussion
+  - discussion_expanded = local_assigns.fetch(:discussion_expanded, discussion.expanded?)
+  = render "discussions/diff_discussion", discussion: discussion, expanded: discussion_expanded
diff --git a/app/views/projects/diffs/_parallel_view.html.haml b/app/views/projects/diffs/_parallel_view.html.haml
index 78aa9fb7391..b7346f27ddb 100644
--- a/app/views/projects/diffs/_parallel_view.html.haml
+++ b/app/views/projects/diffs/_parallel_view.html.haml
@@ -1,41 +1,55 @@
 / Side-by-side diff view
-%div.text-file.diff-wrap-lines.code.js-syntax-highlight{ data: diff_view_data }
+.text-file.diff-wrap-lines.code.js-syntax-highlight{ data: diff_view_data }
   %table
-    - last_line = 0
     - diff_file.parallel_diff_lines.each do |line|
       - left = line[:left]
       - right = line[:right]
       - last_line = right.new_pos if right
+      - unless @diff_notes_disabled
+        - discussion_left, discussion_right = parallel_diff_discussions(left, right, diff_file)
       %tr.line_holder.parallel
         - if left
-          - if left.meta?
+          - case left.type
+          - when 'match'
             = diff_match_line left.old_pos, nil, text: left.text, view: :parallel
+          - when 'old-nonewline', 'new-nonewline'
+            %td.old_line.diff-line-num
+            %td.line_content.match= left.text
           - else
             - left_line_code = diff_file.line_code(left)
             - left_position = diff_file.position(left)
-            %td.old_line.diff-line-num{id: left_line_code, class: left.type, data: { linenumber: left.old_pos }}
-              %a{href: "##{left_line_code}" }= raw(left.old_pos)
-            %td.line_content.parallel.noteable_line{class: left.type, data: diff_view_line_data(left_line_code, left_position, 'old')}= diff_line_content(left.text)
+            %td.old_line.diff-line-num.js-avatar-container{ id: left_line_code, class: left.type, data: { linenumber: left.old_pos } }
+              %a{ href: "##{left_line_code}", data: { linenumber: left.old_pos } }
+              - if discussion_left && discussion_left.resolvable?
+                %diff-note-avatars{ "discussion-id" => discussion_left.id }
+            %td.line_content.parallel.noteable_line{ class: left.type, data: diff_view_line_data(left_line_code, left_position, 'old') }= diff_line_content(left.text)
         - else
           %td.old_line.diff-line-num.empty-cell
           %td.line_content.parallel
 
         - if right
-          - if right.meta?
+          - case right.type
+          - when 'match'
             = diff_match_line nil, right.new_pos, text: left.text, view: :parallel
+          - when 'old-nonewline', 'new-nonewline'
+            %td.new_line.diff-line-num
+            %td.line_content.match= right.text
           - else
             - right_line_code = diff_file.line_code(right)
             - right_position = diff_file.position(right)
-            %td.new_line.diff-line-num{id: right_line_code, class: right.type, data: { linenumber: right.new_pos }}
-              %a{href: "##{right_line_code}" }= raw(right.new_pos)
-            %td.line_content.parallel.noteable_line{class: right.type, data: diff_view_line_data(right_line_code, right_position, 'new')}= diff_line_content(right.text)
+            %td.new_line.diff-line-num.js-avatar-container{ id: right_line_code, class: right.type, data: { linenumber: right.new_pos } }
+              %a{ href: "##{right_line_code}", data: { linenumber: right.new_pos } }
+              - if discussion_right && discussion_right.resolvable?
+                %diff-note-avatars{ "discussion-id" => discussion_right.id }
+            %td.line_content.parallel.noteable_line{ class: right.type, data: diff_view_line_data(right_line_code, right_position, 'new') }= diff_line_content(right.text)
         - else
           %td.old_line.diff-line-num.empty-cell
           %td.line_content.parallel
 
-      - unless @diff_notes_disabled
-        - discussion_left, discussion_right = parallel_diff_discussions(left, right, diff_file)
-        - if discussion_left || discussion_right
-          = render "discussions/parallel_diff_discussion", discussion_left: discussion_left, discussion_right: discussion_right
-    - if !diff_file.new_file && last_line > 0
-      = diff_match_line last_line, last_line, bottom: true, view: :parallel
+      - if discussion_left || discussion_right
+        = render "discussions/parallel_diff_discussion", discussion_left: discussion_left, discussion_right: discussion_right
+    - if !diff_file.new_file && !diff_file.deleted_file && diff_file.diff_lines.any?
+      - last_line = diff_file.diff_lines.last
+      - if last_line.new_pos < total_lines
+        %tr.line_holder.parallel
+          = diff_match_line last_line.old_pos, last_line.new_pos, bottom: true, view: :parallel
diff --git a/app/views/projects/diffs/_stats.html.haml b/app/views/projects/diffs/_stats.html.haml
index e751dabdf99..fd4f3c8d3cc 100644
--- a/app/views/projects/diffs/_stats.html.haml
+++ b/app/views/projects/diffs/_stats.html.haml
@@ -1,36 +1,36 @@
 .js-toggle-container
   .commit-stat-summary
     Showing
-    = link_to '#', class: 'js-toggle-button' do
-      %strong #{pluralize(diff_files.size, "changed file")}
+    %button.diff-stats-summary-toggler.js-toggle-button{ type: "button" }
+      %strong= pluralize(diff_files.size, "changed file")
     with
     %strong.cgreen #{diff_files.sum(&:added_lines)} additions
     and
     %strong.cred #{diff_files.sum(&:removed_lines)} deletions
   .file-stats.js-toggle-content.hide
     %ul
-      - diff_files.each_with_index do |diff_file, i|
+      - diff_files.each do |diff_file|
+        - file_hash = hexdigest(diff_file.file_path)
         %li
           - if diff_file.deleted_file
             %span.deleted-file
-              %a{href: "#diff-#{i}"}
+              %a{ href: "##{file_hash}" }
                 %i.fa.fa-minus
                 = diff_file.old_path
           - elsif diff_file.renamed_file
             %span.renamed-file
-              %a{href: "#diff-#{i}"}
+              %a{ href: "##{file_hash}" }
                 %i.fa.fa-minus
                 = diff_file.old_path
                 &rarr;
                 = diff_file.new_path
           - elsif diff_file.new_file
             %span.new-file
-              %a{href: "#diff-#{i}"}
+              %a{ href: "##{file_hash}" }
                 %i.fa.fa-plus
                 = diff_file.new_path
           - else
             %span.edit-file
-              %a{href: "#diff-#{i}"}
+              %a{ href: "##{file_hash}" }
                 %i.fa.fa-adjust
                 = diff_file.new_path
-
diff --git a/app/views/projects/diffs/_text_file.html.haml b/app/views/projects/diffs/_text_file.html.haml
index f1d2d4bf268..ebd1a914ee7 100644
--- a/app/views/projects/diffs/_text_file.html.haml
+++ b/app/views/projects/diffs/_text_file.html.haml
@@ -4,13 +4,14 @@
     %a.show-suppressed-diff.js-show-suppressed-diff Changes suppressed. Click to show.
 
 %table.text-file.code.js-syntax-highlight{ data: diff_view_data, class: too_big ? 'hide' : '' }
-  - last_line = 0
   - discussions = @grouped_diff_discussions unless @diff_notes_disabled
   = render partial: "projects/diffs/line",
     collection: diff_file.highlighted_diff_lines,
     as: :line,
     locals: { diff_file: diff_file, discussions: discussions }
 
-  - last_line = diff_file.highlighted_diff_lines.last.new_pos
-  - if !diff_file.new_file && last_line > 0
-    = diff_match_line last_line, last_line, bottom: true
+  - if !diff_file.new_file && !diff_file.deleted_file && diff_file.highlighted_diff_lines.any?
+    - last_line = diff_file.highlighted_diff_lines.last
+    - if last_line.new_pos < total_lines
+      %tr.line_holder
+        = diff_match_line last_line.old_pos, last_line.new_pos, bottom: true
diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml
index 0aa8801c2d8..b78de092a60 100644
--- a/app/views/projects/edit.html.haml
+++ b/app/views/projects/edit.html.haml
@@ -1,3 +1,4 @@
+= render "projects/settings/head"
 .project-edit-container
   .row.prepend-top-default
     .col-lg-3.profile-settings-sidebar
@@ -6,11 +7,18 @@
     .col-lg-9
       .project-edit-errors
       = form_for [@project.namespace.becomes(Namespace), @project], remote: true, html: { multipart: true, class: "edit-project" }, authenticity_token: true do |f|
-        %fieldset.append-bottom-0
-          .form-group
-            = f.label :name, class: 'label-light' do
-              Project name
-            = f.text_field :name, class: "form-control", id: "project_name_edit"
+        %fieldset
+          .row
+            .form-group.col-md-9
+              = f.label :name, class: 'label-light', for: 'project_name_edit' do
+                Project name
+              = f.text_field :name, class: "form-control", id: "project_name_edit"
+
+            .form-group.col-md-3
+              = f.label :id, class: 'label-light' do
+                Project ID
+              = f.text_field :id, class: 'form-control', readonly: true
+
           .form-group
             = f.label :description, class: 'label-light' do
               Project description
@@ -21,85 +29,78 @@
             .form-group
               = f.label :default_branch, "Default Branch", class: 'label-light'
               = f.select(:default_branch, @project.repository.branch_names, {}, {class: 'select2 select-wide'})
-        .form-group.project-visibility-level-holder
-          = f.label :visibility_level, class: 'label-light' do
-            Visibility Level
-            = link_to "(?)", help_page_path("public_access/public_access")
-          - if can_change_visibility_level?(@project, current_user)
-            = render('shared/visibility_radios', model_method: :visibility_level, form: f, selected_level: @project.visibility_level, form_model: @project)
-          - else
-            .info
-              = visibility_level_icon(@project.visibility_level)
-              %strong
-                = visibility_level_label(@project.visibility_level)
-              .light= visibility_level_description(@project.visibility_level, @project)
-
-        .form-group
-          = render 'shared/allow_request_access', form: f
-
         .form-group
           = f.label :tag_list, "Tags", class: 'label-light'
-          = f.text_field :tag_list, value: @project.tag_list.to_s, maxlength: 2000, class: "form-control"
+          = f.text_field :tag_list, value: @project.tag_list.sort.join(', '), maxlength: 2000, class: "form-control"
           %p.help-block Separate tags with commas.
         %hr
-        %fieldset.features.append-bottom-0
+        %fieldset
           %h5.prepend-top-0
-            Feature Visibility
-
-          = f.fields_for :project_feature do |feature_fields|
-            .form_group.prepend-top-20
-              .row
-                .col-md-9
-                  = feature_fields.label :repository_access_level, "Repository", class: 'label-light'
-                  %span.help-block Push files to be stored in this project
-                .col-md-3.js-repo-access-level
-                  = project_feature_access_select(:repository_access_level)
-
-                .col-sm-12
-                  .row
-                    .col-md-9.project-feature-nested
-                      = feature_fields.label :merge_requests_access_level, "Merge requests", class: 'label-light'
-                      %span.help-block Submit changes to be merged upstream
-                    .col-md-3
-                      = project_feature_access_select(:merge_requests_access_level)
+            Sharing &amp; Permissions
+          .form_group.prepend-top-20.sharing-and-permissions
+            .row.js-visibility-select
+              .col-md-9
+                %label.label-light
+                  = label_tag :project_visibility, 'Project Visibility', class: 'label-light'
+                  = link_to "(?)", help_page_path("public_access/public_access")
+                %span.help-block
+              .col-md-3.visibility-select-container
+                = render('projects/visibility_select', model_method: :visibility_level, form: f, selected_level: @project.visibility_level)
+            = f.fields_for :project_feature do |feature_fields|
+              %fieldset.features
+                .row
+                  .col-md-9.project-feature
+                    = feature_fields.label :repository_access_level, "Repository", class: 'label-light'
+                    %span.help-block View and edit files in this project
+                  .col-md-3.js-repo-access-level
+                    = project_feature_access_select(:repository_access_level)
 
-                  .row
-                    .col-md-9.project-feature-nested
-                      = feature_fields.label :builds_access_level, "Builds", class: 'label-light'
-                      %span.help-block Submit, test and deploy your changes before merge
-                    .col-md-3
-                      = project_feature_access_select(:builds_access_level)
+                .row
+                  .col-md-9.project-feature.nested
+                    = feature_fields.label :merge_requests_access_level, "Merge requests", class: 'label-light'
+                    %span.help-block Submit changes to be merged upstream
+                  .col-md-3
+                    = project_feature_access_select(:merge_requests_access_level)
 
-              .row
-                .col-md-9
-                  = feature_fields.label :snippets_access_level, "Snippets", class: 'label-light'
-                  %span.help-block Share code pastes with others out of Git repository
-                .col-md-3
-                  = project_feature_access_select(:snippets_access_level)
+                .row
+                  .col-md-9.project-feature.nested
+                    = feature_fields.label :builds_access_level, "Pipelines", class: 'label-light'
+                    %span.help-block Submit, test and deploy your changes before merge
+                  .col-md-3
+                    = project_feature_access_select(:builds_access_level)
 
-              .row
-                .col-md-9
-                  = feature_fields.label :issues_access_level, "Issues", class: 'label-light'
-                  %span.help-block Lightweight issue tracking system for this project
-                .col-md-3
-                  = project_feature_access_select(:issues_access_level)
+                .row
+                  .col-md-9.project-feature
+                    = feature_fields.label :snippets_access_level, "Snippets", class: 'label-light'
+                    %span.help-block Share code pastes with others out of Git repository
+                  .col-md-3
+                    = project_feature_access_select(:snippets_access_level)
 
-              .row
-                .col-md-9
-                  = feature_fields.label :wiki_access_level, "Wiki", class: 'label-light'
-                  %span.help-block Pages for project documentation
-                .col-md-3
-                  = project_feature_access_select(:wiki_access_level)
+                .row
+                  .col-md-9.project-feature
+                    = feature_fields.label :issues_access_level, "Issues", class: 'label-light'
+                    %span.help-block Lightweight issue tracking system for this project
+                  .col-md-3
+                    = project_feature_access_select(:issues_access_level)
 
+                .row
+                  .col-md-9.project-feature
+                    = feature_fields.label :wiki_access_level, "Wiki", class: 'label-light'
+                    %span.help-block Pages for project documentation
+                  .col-md-3
+                    = project_feature_access_select(:wiki_access_level)
+          .form-group
+            = render 'shared/allow_request_access', form: f
           - if Gitlab.config.lfs.enabled && current_user.admin?
-            .checkbox
-              = f.label :lfs_enabled do
-                = f.check_box :lfs_enabled
-                %strong LFS
-                %br
-                %span.descr
+            .row
+              .col-md-9
+                = f.label :lfs_enabled, 'LFS', class: 'label-light'
+                %span.help-block
                   Git Large File Storage
                   = link_to icon('question-circle'), help_page_path('workflow/lfs/manage_large_binaries_with_git_lfs')
+              .col-md-3
+                = f.select :lfs_enabled, [%w(Enabled true), %w(Disabled false)], {}, selected: @project.lfs_enabled?, class: 'pull-right form-control', data: { field: 'lfs_enabled' }
+
 
         - if Gitlab.config.registry.enabled
           .form-group.js-container-registry{ style: ("display: none;" if @project.project_feature.send(:repository_access_level) == 0) }
@@ -111,7 +112,8 @@
                 %span.descr Enable Container Registry for this project
                 = link_to icon('question-circle'), help_page_path('user/project/container_registry'), target: '_blank'
 
-        = render 'merge_request_settings', f: f
+        = render 'merge_request_settings', form: f
+
         %hr
         %fieldset.features.append-bottom-default
           %h5.prepend-top-0
@@ -119,7 +121,7 @@
           .form-group
             - if @project.avatar?
               .avatar-container.s160
-                = project_icon("#{@project.namespace.to_param}/#{@project.to_param}", alt: '', class: 'avatar project-avatar s160')
+                = project_icon(@project.full_path, alt: '', class: 'avatar project-avatar s160')
             %p.light
               - if @project.avatar_in_git
                 Project avatar in repository: #{ @project.avatar_in_git }
@@ -132,6 +134,7 @@
               %hr
               = link_to 'Remove avatar', namespace_project_avatar_path(@project.namespace, @project), data: { confirm: "Project avatar will be removed. Are you sure?"}, method: :delete, class: "btn btn-remove btn-sm remove-avatar"
         = f.submit 'Save changes', class: "btn btn-save"
+
   .row.prepend-top-default
   %hr
   .row.prepend-top-default
@@ -144,7 +147,7 @@
           such as compressing file revisions and removing unreachable objects.
     .col-lg-9
       = link_to 'Housekeeping', housekeeping_namespace_project_path(@project.namespace, @project),
-          method: :post, class: "btn btn-save"
+          method: :post, class: "btn btn-default"
   %hr
   .row.prepend-top-default
     .col-lg-3
@@ -160,7 +163,7 @@
 
       - if @project.export_project_path
         = link_to 'Download export',  download_export_namespace_project_path(@project.namespace, @project),
-                method: :get, class: "btn btn-default"
+                rel: 'nofollow', download: '', method: :get, class: "btn btn-default"
         = link_to 'Generate new export',  generate_new_export_namespace_project_path(@project.namespace, @project),
                 method: :post, class: "btn btn-default"
       - else
@@ -179,11 +182,13 @@
           %p
             The following items will NOT be exported:
           %ul
-            %li Build traces and artifacts
+            %li Job traces and artifacts
             %li LFS objects
             %li Container registry images
-  %hr
+            %li CI variables
+            %li Any encrypted tokens
   - if can? current_user, :archive_project, @project
+    %hr
     .row.prepend-top-default
       .col-lg-3
         %h4.warning-title.prepend-top-0
@@ -228,7 +233,7 @@
           .form-group
             .input-group
               .input-group-addon
-                #{URI.join(root_url, @project.namespace.path)}/
+                #{URI.join(root_url, @project.namespace.full_path)}/
               = f.text_field :path, class: 'form-control'
           %ul
             %li Be careful. Renaming a project's repository can have unintended side effects.
diff --git a/app/views/projects/empty.html.haml b/app/views/projects/empty.html.haml
index 7a39064adc5..85e442e115c 100644
--- a/app/views/projects/empty.html.haml
+++ b/app/views/projects/empty.html.haml
@@ -5,6 +5,7 @@
     = render 'shared/no_ssh'
     = render 'shared/no_password'
 
+= render "projects/head"
 = render "home_panel"
 
 .row-content-block.second-block.center
@@ -16,7 +17,7 @@
     %p
       Otherwise you can start with adding a
       = succeed ',' do
-        = link_to "README", new_readme_path, class: 'underlined-link'
+        = link_to "README", add_special_file_path(@project, file_name: 'README.md'), class: 'underlined-link'
       a
       = succeed ',' do
         = link_to "LICENSE", add_special_file_path(@project, file_name: 'LICENSE'), class: 'underlined-link'
@@ -32,7 +33,7 @@
     .empty_wrapper
       %h3.page-title-empty
         Command line instructions
-      %div.git-empty
+      .git-empty
         %fieldset
           %h5 Git global setup
           %pre.light-well
@@ -52,7 +53,7 @@
               git push -u origin master
 
         %fieldset
-          %h5 Existing folder or Git repository
+          %h5 Existing folder
           %pre.light-well
             :preserve
               cd existing_folder
@@ -62,6 +63,15 @@
               git commit
               git push -u origin master
 
+        %fieldset
+          %h5 Existing Git repository
+          %pre.light-well
+            :preserve
+              cd existing_repo
+              git remote add origin #{ content_tag(:span, default_url_to_repo, class: 'clone')}
+              git push -u origin --all
+              git push -u origin --tags
+
           - if can? current_user, :remove_project, @project
             .prepend-top-20
               = link_to 'Remove project', [@project.namespace.becomes(Namespace), @project], data: { confirm: remove_project_message(@project)}, method: :delete, class: "btn btn-remove pull-right"
diff --git a/app/views/projects/environments/_environment.html.haml b/app/views/projects/environments/_environment.html.haml
deleted file mode 100644
index b75d5df4150..00000000000
--- a/app/views/projects/environments/_environment.html.haml
+++ /dev/null
@@ -1,35 +0,0 @@
-- last_deployment = environment.last_deployment
-
-%tr.environment
-  %td
-    = link_to environment.name, namespace_project_environment_path(@project.namespace, @project, environment)
-
-  %td.deployment-column
-    - if last_deployment
-      %span ##{last_deployment.iid} 
-      - if last_deployment.user
-        by
-        = user_avatar(user: last_deployment.user, size: 20)
-
-  %td
-    - if last_deployment && last_deployment.deployable
-      = link_to [@project.namespace.becomes(Namespace), @project, last_deployment.deployable], class: 'build-link' do
-        = "#{last_deployment.deployable.name} (##{last_deployment.deployable.id})"
-
-  %td
-    - if last_deployment
-      = render 'projects/deployments/commit', deployment: last_deployment
-    - else
-      %p.commit-title
-        No deployments yet
-
-  %td
-    - if last_deployment
-      #{time_ago_with_tooltip(last_deployment.created_at)}
-
-  %td.hidden-xs
-    .pull-right
-      = render 'projects/environments/external_url', environment: environment
-      = render 'projects/deployments/actions', deployment: last_deployment
-      = render 'projects/environments/stop', environment: environment
-      = render 'projects/deployments/rollback', deployment: last_deployment
diff --git a/app/views/projects/environments/_external_url.html.haml b/app/views/projects/environments/_external_url.html.haml
index 4c8fe1c271b..bf0f1819073 100644
--- a/app/views/projects/environments/_external_url.html.haml
+++ b/app/views/projects/environments/_external_url.html.haml
@@ -1,3 +1,3 @@
 - if environment.external_url && can?(current_user, :read_environment, environment)
-  = link_to environment.external_url, target: '_blank', class: 'btn external-url' do
+  = link_to environment.external_url, target: '_blank', rel: 'noopener noreferrer', class: 'btn external-url' do
     = icon('external-link')
diff --git a/app/views/projects/environments/_header_title.html.haml b/app/views/projects/environments/_header_title.html.haml
deleted file mode 100644
index e056fccad5d..00000000000
--- a/app/views/projects/environments/_header_title.html.haml
+++ /dev/null
@@ -1 +0,0 @@
-- header_title project_title(@project, "Environments", project_environments_path(@project))
diff --git a/app/views/projects/environments/_metrics_button.html.haml b/app/views/projects/environments/_metrics_button.html.haml
new file mode 100644
index 00000000000..acbac1869fd
--- /dev/null
+++ b/app/views/projects/environments/_metrics_button.html.haml
@@ -0,0 +1,6 @@
+- environment = local_assigns.fetch(:environment)
+
+- return unless environment.has_metrics? && can?(current_user, :read_environment, environment)
+
+= link_to environment_metrics_path(environment), title: 'See metrics', class: 'btn metrics-button' do
+  = icon('area-chart')
diff --git a/app/views/projects/environments/_stop.html.haml b/app/views/projects/environments/_stop.html.haml
index 69848123c17..14a2d627203 100644
--- a/app/views/projects/environments/_stop.html.haml
+++ b/app/views/projects/environments/_stop.html.haml
@@ -1,4 +1,4 @@
-- if can?(current_user, :create_deployment, environment) && environment.stoppable?
+- if can?(current_user, :create_deployment, environment) && environment.stop_action?
   .inline
     = link_to stop_namespace_project_environment_path(@project.namespace, @project, environment), method: :post,
       class: 'btn stop-env-link', rel: 'nofollow', data: { confirm: 'Are you sure you want to stop this environment?' } do
diff --git a/app/views/projects/environments/_terminal_button.html.haml b/app/views/projects/environments/_terminal_button.html.haml
new file mode 100644
index 00000000000..97de9c95de7
--- /dev/null
+++ b/app/views/projects/environments/_terminal_button.html.haml
@@ -0,0 +1,3 @@
+- if environment.has_terminals? && can?(current_user, :admin_environment, @project)
+  = link_to terminal_namespace_project_environment_path(@project.namespace, @project, environment), class: 'btn terminal-button' do
+    = icon('terminal')
diff --git a/app/views/projects/environments/folder.html.haml b/app/views/projects/environments/folder.html.haml
new file mode 100644
index 00000000000..4b101447bc0
--- /dev/null
+++ b/app/views/projects/environments/folder.html.haml
@@ -0,0 +1,14 @@
+- @no_container = true
+- page_title "Environments"
+= render "projects/pipelines/head"
+
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('common_vue')
+  = page_specific_javascript_bundle_tag("environments_folder")
+
+#environments-folder-list-view{ data: { "can-create-deployment" => can?(current_user, :create_deployment, @project).to_s,
+  "can-read-environment" => can?(current_user, :read_environment, @project).to_s,
+  "css-class" => container_class,
+  "commit-icon-svg" => custom_icon("icon_commit"),
+  "terminal-icon-svg" => custom_icon("icon_terminal"),
+  "play-icon-svg" => custom_icon("icon_play") } }
diff --git a/app/views/projects/environments/index.html.haml b/app/views/projects/environments/index.html.haml
index 8f555afcf11..80d2b6f5d95 100644
--- a/app/views/projects/environments/index.html.haml
+++ b/app/views/projects/environments/index.html.haml
@@ -2,47 +2,16 @@
 - page_title "Environments"
 = render "projects/pipelines/head"
 
-%div{ class: container_class }
-  .top-area
-    %ul.nav-links
-      %li{class: ('active' if @scope.nil?)}
-        = link_to project_environments_path(@project) do
-          Available
-          %span.badge.js-available-environments-count
-            = number_with_delimiter(@all_environments.available.count)
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('common_vue')
+  = page_specific_javascript_bundle_tag("environments")
 
-      %li{class: ('active' if @scope == 'stopped')}
-        = link_to project_environments_path(@project, scope: :stopped) do
-          Stopped
-          %span.badge.js-stopped-environments-count
-            = number_with_delimiter(@all_environments.stopped.count)
-
-    - if can?(current_user, :create_environment, @project) && !@all_environments.blank?
-      .nav-controls
-        = link_to new_namespace_project_environment_path(@project.namespace, @project), class: 'btn btn-create' do
-          New environment
-
-  .environments-container
-    - if @all_environments.blank?
-      .blank-state.blank-state-no-icon
-        %h2.blank-state-title
-          You don't have any environments right now.
-        %p.blank-state-text
-          Environments are places where code gets deployed, such as staging or production.
-          %br
-          = succeed "." do
-            = link_to "Read more about environments", help_page_path("ci/environments")
-        - if can?(current_user, :create_environment, @project)
-          = link_to new_namespace_project_environment_path(@project.namespace, @project), class: 'btn btn-create' do
-            New environment
-    - else
-      .table-holder
-        %table.table.ci-table.environments
-          %tbody
-            %th Environment
-            %th Last Deployment
-            %th Build
-            %th Commit
-            %th
-            %th.hidden-xs
-          = render @environments
+#environments-list-view{ data: { environments_data: environments_list_data,
+  "can-create-deployment" => can?(current_user, :create_deployment, @project).to_s,
+  "can-read-environment" => can?(current_user, :read_environment, @project).to_s,
+  "can-create-environment" => can?(current_user, :create_environment, @project).to_s,
+  "project-environments-path" => project_environments_path(@project),
+  "project-stopped-environments-path" => project_environments_path(@project, scope: :stopped),
+  "new-environment-path" => new_namespace_project_environment_path(@project.namespace, @project),
+  "help-page-path" => help_page_path("ci/environments"),
+  "css-class" => container_class } }
diff --git a/app/views/projects/environments/metrics.html.haml b/app/views/projects/environments/metrics.html.haml
new file mode 100644
index 00000000000..3b45162df52
--- /dev/null
+++ b/app/views/projects/environments/metrics.html.haml
@@ -0,0 +1,28 @@
+- @no_container = true
+- page_title "Metrics for environment", @environment.name
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('common_d3')
+  = page_specific_javascript_bundle_tag('monitoring')
+= render "projects/pipelines/head"
+
+%div{ class: container_class }
+  .top-area
+    .row
+      .col-sm-6
+        %h3.page-title
+          Environment:
+          = @environment.name
+
+      .col-sm-6
+        .nav-controls
+          = render 'projects/deployments/actions', deployment: @environment.last_deployment
+  .row
+    .col-sm-12
+      %h4
+        CPU utilization
+      %svg.prometheus-graph{ 'graph-type' => 'cpu_values' }
+  .row
+    .col-sm-12
+      %h4
+        Memory usage
+      %svg.prometheus-graph{ 'graph-type' => 'memory_values' }
diff --git a/app/views/projects/environments/show.html.haml b/app/views/projects/environments/show.html.haml
index bcac73d3698..f463a429f65 100644
--- a/app/views/projects/environments/show.html.haml
+++ b/app/views/projects/environments/show.html.haml
@@ -5,16 +5,18 @@
 %div{ class: container_class }
   .top-area.adjust
     .col-md-9
-      %h3.page-title= @environment.name.capitalize
+      %h3.page-title= @environment.name
     .col-md-3
       .nav-controls
+        = render 'projects/environments/metrics_button', environment: @environment
+        = render 'projects/environments/terminal_button', environment: @environment
         = render 'projects/environments/external_url', environment: @environment
         - if can?(current_user, :update_environment, @environment)
           = link_to 'Edit', edit_namespace_project_environment_path(@project.namespace, @project, @environment), class: 'btn'
-        - if can?(current_user, :create_deployment, @environment) && @environment.stoppable?
+        - if can?(current_user, :create_deployment, @environment) && @environment.can_stop?
           = link_to 'Stop', stop_namespace_project_environment_path(@project.namespace, @project, @environment), data: { confirm: 'Are you sure you want to stop this environment?' }, class: 'btn btn-danger', method: :post
 
-  .deployments-container
+  .environments-container
     - if @deployments.blank?
       .blank-state.blank-state-no-icon
         %h2.blank-state-title
@@ -31,8 +33,8 @@
             %tr
               %th ID
               %th Commit
-              %th Build
-              %th
+              %th Job
+              %th Created
               %th.hidden-xs
 
           = render @deployments
diff --git a/app/views/projects/environments/terminal.html.haml b/app/views/projects/environments/terminal.html.haml
new file mode 100644
index 00000000000..c8363087d6a
--- /dev/null
+++ b/app/views/projects/environments/terminal.html.haml
@@ -0,0 +1,24 @@
+- @no_container = true
+- page_title "Terminal for environment", @environment.name
+= render "projects/pipelines/head"
+
+- content_for :page_specific_javascripts do
+  = stylesheet_link_tag "xterm/xterm"
+  = page_specific_javascript_bundle_tag("terminal")
+
+%div{ class: container_class }
+  .top-area
+    .row
+      .col-sm-6
+        %h3.page-title
+          Terminal for environment
+          = @environment.name
+
+      .col-sm-6
+        .nav-controls
+          = link_to @environment.external_url, class: 'btn btn-default', target: '_blank', rel: 'noopener noreferrer nofollow' do
+            = icon('external-link')
+          = render 'projects/deployments/actions', deployment: @environment.last_deployment
+
+.terminal-container{ class: container_class }
+  #terminal{ data: { project_path: "#{terminal_namespace_project_environment_path(@project.namespace, @project, @environment)}.ws" } }
diff --git a/app/views/projects/find_file/show.html.haml b/app/views/projects/find_file/show.html.haml
index 9322c82904f..4cdb44325b3 100644
--- a/app/views/projects/find_file/show.html.haml
+++ b/app/views/projects/find_file/show.html.haml
@@ -9,11 +9,11 @@
         = link_to namespace_project_tree_path(@project.namespace, @project, @ref) do
           = @project.path
       %li.file-finder
-        %input#file_find.form-control.file-finder-input{type: "text", placeholder: 'Find by path', autocomplete: 'off'}
+        %input#file_find.form-control.file-finder-input{ type: "text", placeholder: 'Find by path', autocomplete: 'off' }
 
-  %div.tree-content-holder
+  .tree-content-holder
     .table-holder
-      %table.table.files-slider{class: "table_#{@hex_path} tree-table table-striped" }
+      %table.table.files-slider{ class: "table_#{@hex_path} tree-table table-striped" }
         %tbody
       = spinner nil, true
 
diff --git a/app/views/projects/forks/error.html.haml b/app/views/projects/forks/error.html.haml
index 3d0ab5b85d6..98d81308407 100644
--- a/app/views/projects/forks/error.html.haml
+++ b/app/views/projects/forks/error.html.haml
@@ -13,7 +13,11 @@
     - if @forked_project && @forked_project.errors.any?
       %p
         &ndash;
-        = @forked_project.errors.full_messages.first
+        - error = @forked_project.errors.full_messages.first
+        - if error.include?("already been taken")
+          Name has already been taken
+        - else
+          = error
 
     %p
       = link_to new_namespace_project_fork_path(@project.namespace, @project), title: "Fork", class: "btn" do
diff --git a/app/views/projects/forks/index.html.haml b/app/views/projects/forks/index.html.haml
index abf4f697f86..f4aa523b32d 100644
--- a/app/views/projects/forks/index.html.haml
+++ b/app/views/projects/forks/index.html.haml
@@ -1,7 +1,7 @@
 .top-area
   .nav-text
     - full_count_title = "#{@public_forks_count} public and #{@private_forks_count} private"
-    == #{pluralize(@total_forks_count, 'fork')}: #{full_count_title}
+    #{pluralize(@total_forks_count, 'fork')}: #{full_count_title}
 
   .nav-controls
     = form_tag request.original_url, method: :get, class: 'project-filter-form', id: 'project-filter-form' do |f|
@@ -9,13 +9,13 @@
         spellcheck: false, data: { 'filter-selector' => 'span.namespace-name' }
 
     .dropdown
-      %button.dropdown-toggle.btn.sort-forks{type: 'button', 'data-toggle' => 'dropdown'}
+      %button.dropdown-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
         %span.light sort:
         - if @sort.present?
           = sort_options_hash[@sort]
         - else
           = sort_title_recently_created
-        = icon('caret-down')
+        = icon('chevron-down')
       %ul.dropdown-menu.dropdown-menu-align-right
         %li
           - excluded_filters = [:state, :scope, :label_name, :milestone_id, :assignee_id, :author_id]
diff --git a/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml b/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml
index 80fe6be49b0..07fb80750d6 100644
--- a/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml
+++ b/app/views/projects/generic_commit_statuses/_generic_commit_status.html.haml
@@ -1,39 +1,67 @@
-%tr.generic_commit_status
+- admin = local_assigns.fetch(:admin, false)
+- ref = local_assigns.fetch(:ref, nil)
+- commit_sha = local_assigns.fetch(:commit_sha, nil)
+- retried = local_assigns.fetch(:retried, false)
+- pipeline_link = local_assigns.fetch(:pipeline_link, false)
+- stage = local_assigns.fetch(:stage, false)
+- coverage = local_assigns.fetch(:coverage, false)
+
+%tr.generic_commit_status{ class: ('retried' if retried) }
   %td.status
-    - if can?(current_user, :read_commit_status, generic_commit_status) && generic_commit_status.target_url
-      = ci_status_with_icon(generic_commit_status.status, generic_commit_status.target_url)
-    - else
-      = ci_status_with_icon(generic_commit_status.status)
+    = render 'ci/status/badge', status: generic_commit_status.detailed_status(current_user)
 
   %td.generic_commit_status-link
     - if can?(current_user, :read_commit_status, generic_commit_status) && generic_commit_status.target_url
       = link_to generic_commit_status.target_url do
-        %strong ##{generic_commit_status.id}
+        %span.build-link ##{generic_commit_status.id}
     - else
-      %strong ##{generic_commit_status.id}
+      %span.build-link ##{generic_commit_status.id}
+
+    - if ref
+      - if generic_commit_status.ref
+        .icon-container
+          = generic_commit_status.tags.any? ? icon('tag') : icon('code-fork')
+        = link_to generic_commit_status.ref, namespace_project_commits_path(generic_commit_status.project.namespace, generic_commit_status.project, generic_commit_status.ref)
+      - else
+        .light none
+      .icon-container.commit-icon
+        = custom_icon("icon_commit")
+
+    - if commit_sha
+      = link_to generic_commit_status.short_sha, namespace_project_commit_path(generic_commit_status.project.namespace, generic_commit_status.project, generic_commit_status.sha), class: "commit-id monospace"
 
-    - if defined?(retried) && retried
+    - if retried
       = icon('warning', class: 'text-warning has-tooltip', title: 'Status was retried.')
 
-  - if defined?(commit_sha) && commit_sha
-    %td
-      = link_to generic_commit_status.short_sha, namespace_project_commit_path(generic_commit_status.project.namespace, generic_commit_status.project, generic_commit_status.sha), class: "monospace"
+    .label-container
+      - if generic_commit_status.tags.any?
+        - generic_commit_status.tags.each do |tag|
+          %span.label.label-primary
+            = tag
+      - if retried
+        %span.label.label-warning retried
 
-  - if defined?(ref) && ref
+  - if pipeline_link
     %td
-      - if generic_commit_status.ref
-        = link_to generic_commit_status.ref, namespace_project_commits_path(generic_commit_status.project.namespace, generic_commit_status.project, generic_commit_status.ref)
+      = link_to pipeline_path(generic_commit_status.pipeline) do
+        %span.pipeline-id ##{generic_commit_status.pipeline.id}
+      %span by
+      - if generic_commit_status.pipeline.user
+        = user_avatar(user: generic_commit_status.pipeline.user, size: 20)
       - else
-        .light none
+        %span.monospace API
 
-  - if defined?(runner) && runner
+  - if admin
+    %td
+      - if generic_commit_status.project
+        = link_to generic_commit_status.project.name_with_namespace, admin_namespace_project_path(generic_commit_status.project.namespace, generic_commit_status.project)
     %td
       - if generic_commit_status.try(:runner)
         = runner_link(generic_commit_status.runner)
       - else
         .light none
 
-  - if defined?(stage) && stage
+  - if stage
     %td
       = generic_commit_status.stage
 
@@ -41,24 +69,19 @@
     = generic_commit_status.name
 
   %td
-    - if generic_commit_status.tags.any?
-      - generic_commit_status.tags.each do |tag|
-        %span.label.label-primary
-          = tag
-    - if defined?(retried) && retried
-      %span.label.label-warning retried
-
-  %td.duration
     - if generic_commit_status.duration
-      = icon("clock-o")
-      = time_interval_in_words(generic_commit_status.duration)
+      %p.duration
+        = custom_icon("icon_timer")
+        = duration_in_numbers(generic_commit_status.duration)
 
-  %td.timestamp
     - if generic_commit_status.finished_at
-      = icon("calendar")
-      %span #{time_ago_with_tooltip(generic_commit_status.finished_at)}
+      %p.finished-at
+        = icon("calendar")
+        %span= time_ago_with_tooltip(generic_commit_status.finished_at)
 
-  - if defined?(coverage) && coverage
-    %td.coverage
-      - if generic_commit_status.try(:coverage)
-        #{generic_commit_status.coverage}%
+  %td.coverage
+    - if coverage && generic_commit_status.try(:coverage)
+      #{generic_commit_status.coverage}%
+
+  %td
+    -# empty column to match number of columns in ci/builds/_build.html.haml
diff --git a/app/views/projects/generic_commit_statuses/_generic_commit_status_pipeline.html.haml b/app/views/projects/generic_commit_statuses/_generic_commit_status_pipeline.html.haml
deleted file mode 100644
index 1c457244a7a..00000000000
--- a/app/views/projects/generic_commit_statuses/_generic_commit_status_pipeline.html.haml
+++ /dev/null
@@ -1,10 +0,0 @@
-%a{ data: { toggle: 'tooltip', title: "#{subject.name} - #{subject.status}", container: '.pipeline-graph', placement: 'bottom' } }
-  - if subject.target_url
-    = link_to subject.target_url do
-      %span.ci-status-icon
-        = ci_icon_for_status(subject.status)
-      %span.ci-status-text= subject.name
-  - else
-    %span.ci-status-icon
-      = ci_icon_for_status(subject.status)
-    %span.ci-status-text= subject.name
diff --git a/app/views/projects/graphs/_head.html.haml b/app/views/projects/graphs/_head.html.haml
deleted file mode 100644
index 1a62a6a809c..00000000000
--- a/app/views/projects/graphs/_head.html.haml
+++ /dev/null
@@ -1,19 +0,0 @@
-= content_for :sub_nav do
-  .scrolling-tabs-container.sub-nav-scroll
-    = render 'shared/nav_scroll'
-    .nav-links.sub-nav.scrolling-tabs
-      %ul{ class: (container_class) }
-
-        - content_for :page_specific_javascripts do
-          = page_specific_javascript_tag('lib/chart.js')
-          = page_specific_javascript_tag('graphs/graphs_bundle.js')
-        = nav_link(action: :show) do
-          = link_to 'Contributors', namespace_project_graph_path
-        = nav_link(action: :commits) do
-          = link_to 'Commits', commits_namespace_project_graph_path
-        = nav_link(action: :languages) do
-          = link_to 'Languages', languages_namespace_project_graph_path
-        - if @project.feature_available?(:builds, current_user)
-          = nav_link(action: :ci) do
-            = link_to ci_namespace_project_graph_path do
-              Continuous Integration
diff --git a/app/views/projects/graphs/charts.html.haml b/app/views/projects/graphs/charts.html.haml
new file mode 100644
index 00000000000..464ac34d961
--- /dev/null
+++ b/app/views/projects/graphs/charts.html.haml
@@ -0,0 +1,127 @@
+- @no_container = true
+- page_title "Charts"
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('common_d3')
+  = page_specific_javascript_bundle_tag('graphs')
+= render "projects/commits/head"
+
+.repo-charts{ class: container_class }
+  %h4.sub-header
+    Programming languages used in this repository
+
+  .row
+    .col-md-4
+      %ul.bordered-list
+        - @languages.each do |language|
+          %li
+            %span{ style: "color: #{language[:color]}" }
+              = icon('circle')
+            &nbsp;
+            = language[:label]
+            .pull-right
+              = language[:value]
+              \%
+    .col-md-8
+      %canvas#languages-chart{ height: 400 }
+
+.repo-charts{ class: container_class }
+  .sub-header-block.border-top
+
+  .row.tree-ref-header
+    .col-md-6
+      %h4
+        Commit statistics for
+        %strong= @ref
+        #{@commits_graph.start_date.strftime('%b %d')} - #{@commits_graph.end_date.strftime('%b %d')}
+
+    .col-md-6
+      .tree-ref-container
+        .tree-ref-holder
+          = render 'shared/ref_switcher', destination: 'graphs_commits'
+        %ul.breadcrumb.repo-breadcrumb
+          = commits_breadcrumbs
+
+  .row
+    .col-md-6
+      %ul.commit-stats
+        %li
+          Total:
+          %strong #{@commits_graph.commits.size} commits
+        %li
+          Average per day:
+          %strong #{@commits_graph.commit_per_day} commits
+        %li
+          Authors:
+          %strong= @commits_graph.authors
+    .col-md-6
+      %div
+        %p.slead
+          Commits per day of month
+        %canvas#month-chart
+  .row
+    .col-md-6
+    .col-md-6
+      %div
+        %p.slead
+          Commits per weekday
+        %canvas#weekday-chart
+  .row
+    .col-md-6
+    .col-md-6
+      %div
+        %p.slead
+          Commits per day hour (UTC)
+        %canvas#hour-chart
+
+:javascript
+  var responsiveChart = function (selector, data) {
+    var options = { "scaleOverlay": true, responsive: true, pointHitDetectionRadius: 2, maintainAspectRatio: false };
+    // get selector by context
+    var ctx = selector.get(0).getContext("2d");
+    // pointing parent container to make chart.js inherit its width
+    var container = $(selector).parent();
+    var generateChart = function() {
+      selector.attr('width', $(container).width());
+      if (window.innerWidth < 768) {
+        // Scale fonts if window width lower than 768px (iPad portrait)
+        options.scaleFontSize = 8
+      }
+      return new Chart(ctx).Bar(data, options);
+    };
+    // enabling auto-resizing
+    $(window).resize(generateChart);
+    return generateChart();
+  };
+
+  var chartData = function (keys, values) {
+    var data = {
+      labels : keys,
+      datasets : [{
+        fillColor : "rgba(220,220,220,0.5)",
+        strokeColor : "rgba(220,220,220,1)",
+        barStrokeWidth: 1,
+        barValueSpacing: 1,
+        barDatasetSpacing: 1,
+        data : values
+      }]
+    };
+    return data;
+  };
+
+  var hourData = chartData(#{@commits_per_time.keys.to_json}, #{@commits_per_time.values.to_json});
+  responsiveChart($('#hour-chart'), hourData);
+
+  var dayData = chartData(#{@commits_per_week_days.keys.to_json}, #{@commits_per_week_days.values.to_json});
+  responsiveChart($('#weekday-chart'), dayData);
+
+  var monthData = chartData(#{@commits_per_month.keys.to_json}, #{@commits_per_month.values.to_json});
+  responsiveChart($('#month-chart'), monthData);
+
+  var data = #{@languages.to_json};
+  var ctx = $("#languages-chart").get(0).getContext("2d");
+  var options = {
+    scaleOverlay: true,
+    responsive: true,
+    maintainAspectRatio: false
+  }
+  var myPieChart = new Chart(ctx).Pie(data, options);
diff --git a/app/views/projects/graphs/ci.html.haml b/app/views/projects/graphs/ci.html.haml
deleted file mode 100644
index 6be4273b6ab..00000000000
--- a/app/views/projects/graphs/ci.html.haml
+++ /dev/null
@@ -1,18 +0,0 @@
-- @no_container = true
-- page_title "Continuous Integration", "Graphs"
-= render 'head'
-
-%div{ class: container_class }
-  .sub-header-block
-    .oneline
-      A collection of graphs for Continuous Integration
-
-  #charts.ci-charts
-    .row
-      .col-md-6
-        = render 'projects/graphs/ci/overall'
-      .col-md-6
-        = render 'projects/graphs/ci/build_times'
-
-    %hr
-    = render 'projects/graphs/ci/builds'
diff --git a/app/views/projects/graphs/ci/_build_times.haml b/app/views/projects/graphs/ci/_build_times.haml
deleted file mode 100644
index 195f18afc76..00000000000
--- a/app/views/projects/graphs/ci/_build_times.haml
+++ /dev/null
@@ -1,27 +0,0 @@
-%div
-  %p.light
-    Commit duration in minutes for last 30 commits
-
-  %canvas#build_timesChart{height: 200}
-
-:javascript
-  var data = {
-    labels : #{@charts[:build_times].labels.to_json},
-    datasets : [
-      {
-        fillColor : "rgba(220,220,220,0.5)",
-        strokeColor : "rgba(220,220,220,1)",
-        barStrokeWidth: 1,
-        barValueSpacing: 1,
-        barDatasetSpacing: 1,
-        data : #{@charts[:build_times].build_times.to_json}
-      }
-    ]
-  }
-  var ctx = $("#build_timesChart").get(0).getContext("2d");
-  var options = { scaleOverlay: true, responsive: true, maintainAspectRatio: false };
-  if (window.innerWidth < 768) {
-    // Scale fonts if window width lower than 768px (iPad portrait)
-    options.scaleFontSize = 8
-  }
-  new Chart(ctx).Bar(data, options);
diff --git a/app/views/projects/graphs/ci/_builds.haml b/app/views/projects/graphs/ci/_builds.haml
deleted file mode 100644
index 1fbf6ca2c1c..00000000000
--- a/app/views/projects/graphs/ci/_builds.haml
+++ /dev/null
@@ -1,56 +0,0 @@
-%h4 Build charts
-%p
-  &nbsp;
-  %span.cgreen
-    = icon("circle")
-    success
-  &nbsp;
-  %span.cgray
-    = icon("circle")
-    all
-
-.prepend-top-default
-  %p.light
-    Builds for last week
-    (#{date_from_to(Date.today - 7.days, Date.today)})
-  %canvas#weekChart{height: 200}
-
-.prepend-top-default
-  %p.light
-    Builds for last month
-    (#{date_from_to(Date.today - 30.days, Date.today)})
-  %canvas#monthChart{height: 200}
-
-.prepend-top-default
-  %p.light
-    Builds for last year
-  %canvas#yearChart.padded{height: 250}
-
-- [:week, :month, :year].each do |scope|
-  :javascript
-    var data = {
-      labels : #{@charts[scope].labels.to_json},
-      datasets : [
-        {
-          fillColor : "#7f8fa4",
-          strokeColor : "#7f8fa4",
-          pointColor : "#7f8fa4",
-          pointStrokeColor : "#EEE",
-          data : #{@charts[scope].total.to_json}
-        },
-        {
-          fillColor : "#44aa22",
-          strokeColor : "#44aa22",
-          pointColor : "#44aa22",
-          pointStrokeColor : "#fff",
-          data : #{@charts[scope].success.to_json}
-        }
-      ]
-    }
-    var ctx = $("##{scope}Chart").get(0).getContext("2d");
-    var options = { scaleOverlay: true, responsive: true, maintainAspectRatio: false };
-    if (window.innerWidth < 768) {
-      // Scale fonts if window width lower than 768px (iPad portrait)
-      options.scaleFontSize = 8
-    }
-    new Chart(ctx).Line(data, options);
diff --git a/app/views/projects/graphs/commits.html.haml b/app/views/projects/graphs/commits.html.haml
deleted file mode 100644
index 7e34a89f9ae..00000000000
--- a/app/views/projects/graphs/commits.html.haml
+++ /dev/null
@@ -1,95 +0,0 @@
-- @no_container = true
-- page_title "Commits", "Graphs"
-= render 'head'
-
-%div{ class: container_class }
-  .sub-header-block
-    .tree-ref-holder
-      = render 'shared/ref_switcher', destination: 'graphs_commits'
-    %ul.breadcrumb.repo-breadcrumb
-      = commits_breadcrumbs
-
-  %p.lead
-    Commit statistics for
-    %strong #{@ref}
-    #{@commits_graph.start_date.strftime('%b %d')} - #{@commits_graph.end_date.strftime('%b %d')}
-
-  .row
-    .col-md-6
-      %ul
-        %li
-          %p.lead
-            %strong #{@commits_graph.commits.size}
-            commits during
-            %strong #{@commits_graph.duration}
-            days
-        %li
-          %p.lead
-            Average
-            %strong #{@commits_graph.commit_per_day}
-            commits per day
-        %li
-          %p.lead
-            Contributed by
-            %strong #{@commits_graph.authors}
-            authors
-    .col-md-6
-      %div
-        %p.slead
-          Commits per day of month
-        %canvas#month-chart
-  .row
-    .col-md-6
-      %div
-        %p.slead
-          Commits per day hour (UTC)
-        %canvas#hour-chart
-    .col-md-6
-      %div
-        %p.slead
-          Commits per weekday
-        %canvas#weekday-chart
-
-:javascript
-  var responsiveChart = function (selector, data) {
-    var options = { "scaleOverlay": true, responsive: true, pointHitDetectionRadius: 2, maintainAspectRatio: false };
-    // get selector by context
-    var ctx = selector.get(0).getContext("2d");
-    // pointing parent container to make chart.js inherit its width
-    var container = $(selector).parent();
-    var generateChart = function() {
-      selector.attr('width', $(container).width());
-      if (window.innerWidth < 768) {
-        // Scale fonts if window width lower than 768px (iPad portrait)
-        options.scaleFontSize = 8
-      }
-      return new Chart(ctx).Bar(data, options);
-    };
-    // enabling auto-resizing
-    $(window).resize(generateChart);
-    return generateChart();
-  };
-
-  var chartData = function (keys, values) {
-    var data = {
-      labels : keys,
-      datasets : [{
-        fillColor : "rgba(220,220,220,0.5)",
-        strokeColor : "rgba(220,220,220,1)",
-        barStrokeWidth: 1,
-        barValueSpacing: 1,
-        barDatasetSpacing: 1,
-        data : values
-      }]
-    };
-    return data;
-  };
-
-  var hourData = chartData(#{@commits_per_time.keys.to_json}, #{@commits_per_time.values.to_json});
-  responsiveChart($('#hour-chart'), hourData);
-
-  var dayData = chartData(#{@commits_per_week_days.keys.to_json}, #{@commits_per_week_days.values.to_json});
-  responsiveChart($('#weekday-chart'), dayData);
-
-  var monthData = chartData(#{@commits_per_month.keys.to_json}, #{@commits_per_month.values.to_json});
-  responsiveChart($('#month-chart'), monthData);
diff --git a/app/views/projects/graphs/languages.html.haml b/app/views/projects/graphs/languages.html.haml
deleted file mode 100644
index fcfcae0be20..00000000000
--- a/app/views/projects/graphs/languages.html.haml
+++ /dev/null
@@ -1,33 +0,0 @@
-- @no_container = true
-- page_title "Languages", "Graphs"
-= render 'head'
-
-%div{ class: container_class }
-  .sub-header-block
-    .oneline
-      Programming languages used in this repository
-
-  .row
-    .col-md-8
-      %canvas#languages-chart{ height: 400 }
-    .col-md-4
-      %ul.bordered-list
-        - @languages.each do |language|
-          %li
-            %span{ style: "color: #{language[:color]}" }
-              = icon('circle')
-            &nbsp;
-            = language[:label]
-            .pull-right
-              = language[:value]
-              \%
-
-:javascript
-  var data = #{@languages.to_json};
-  var ctx = $("#languages-chart").get(0).getContext("2d");
-  var options = {
-    scaleOverlay: true,
-    responsive: true,
-    maintainAspectRatio: false
-  }
-  var myPieChart = new Chart(ctx).Pie(data, options);
diff --git a/app/views/projects/graphs/show.html.haml b/app/views/projects/graphs/show.html.haml
index ac5f792d140..680f8ae6c8f 100644
--- a/app/views/projects/graphs/show.html.haml
+++ b/app/views/projects/graphs/show.html.haml
@@ -1,6 +1,9 @@
 - @no_container = true
-- page_title "Contributors", "Graphs"
-= render 'head'
+- page_title "Contributors"
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('common_d3')
+  = page_specific_javascript_bundle_tag('graphs')
+= render 'projects/commits/head'
 
 %div{ class: container_class }
   .sub-header-block
@@ -21,7 +24,7 @@
       %h3#date_header.page-title
       %p.light
         Commits to #{@ref}, excluding merge commits. Limited to 6,000 commits.
-      %input#brush_change{:type => "hidden"}
+      %input#brush_change{ :type => "hidden" }
     .graphs.row
       #contributors-master
       #contributors.clearfix
diff --git a/app/views/projects/group_links/_index.html.haml b/app/views/projects/group_links/_index.html.haml
new file mode 100644
index 00000000000..b6116dbec41
--- /dev/null
+++ b/app/views/projects/group_links/_index.html.haml
@@ -0,0 +1,55 @@
+- page_title "Groups"
+.row.prepend-top-default
+  .col-lg-3.settings-sidebar
+    %h4.prepend-top-0
+      Share project with other groups
+    %p
+      Projects can be stored in only one group at once. However you can share a project with other groups here.
+  .col-lg-9
+    %h5.prepend-top-0
+      Set a group to share
+    = form_tag namespace_project_group_links_path(@project.namespace, @project), class: 'js-requires-input', method: :post do
+      .form-group
+        = label_tag :link_group_id, "Group", class: "label-light"
+        = groups_select_tag(:link_group_id, data: { skip_groups: @skip_groups }, required: true)
+      .form-group
+        = label_tag :link_group_access, "Max access level", class: "label-light"
+        .select-wrapper
+          = select_tag :link_group_access, options_for_select(ProjectGroupLink.access_options, ProjectGroupLink.default_access), class: "form-control select-control"
+          = icon('caret-down')
+      .form-group
+        = label_tag :expires_at, 'Access expiration date', class: 'label-light'
+        .clearable-input
+          = text_field_tag :expires_at, nil, class: 'form-control js-access-expiration-date-groups', placeholder: 'Select access expiration date', id: 'expires_at_groups'
+          %i.clear-icon.js-clear-input
+        .help-block
+          On this date, all members in the group will automatically lose access to this project.
+      = submit_tag "Share", class: "btn btn-create"
+  .col-lg-9.col-lg-offset-3
+    %hr
+  .col-lg-9.col-lg-offset-3.append-bottom-default.enabled-groups
+    %h5.prepend-top-0
+      Groups you share with (#{@group_links.size})
+    - if @group_links.present?
+      %ul.well-list
+        - @group_links.each do |group_link|
+          - group = group_link.group
+          %li
+            .pull-left.append-right-10.hidden-xs
+              = icon("folder-open-o", class: "settings-list-icon")
+            .pull-left
+              = link_to group do
+                = group.full_name
+              %br
+              up to #{group_link.human_access}
+              - if group_link.expires?
+                ·
+                %span{ class: ('text-warning' if group_link.expires_soon?) }
+                  expires in #{distance_of_time_in_words_to_now(group_link.expires_at)}
+            .pull-right
+              = link_to namespace_project_group_link_path(@project.namespace, @project, group_link), method: :delete, class: "btn btn-transparent" do
+                %span.sr-only disable sharing
+                = icon("trash")
+    - else
+      .settings-message.text-center
+        There are no groups with access to your project, add one in the form above
diff --git a/app/views/projects/group_links/index.html.haml b/app/views/projects/group_links/index.html.haml
deleted file mode 100644
index 1b0dbbb8111..00000000000
--- a/app/views/projects/group_links/index.html.haml
+++ /dev/null
@@ -1,55 +0,0 @@
-- page_title "Groups"
-.row.prepend-top-default
-  .col-lg-3.settings-sidebar
-    %h4.prepend-top-0
-      Share project with other groups
-    %p
-      Projects can be stored in only one group at once. However you can share a project with other groups here.
-  .col-lg-9
-    %h5.prepend-top-0
-      Set a group to share
-    = form_tag namespace_project_group_links_path(@project.namespace, @project), class: 'js-requires-input', method: :post do
-      .form-group
-        = label_tag :link_group_id, "Group", class: "label-light"
-        = groups_select_tag(:link_group_id, data: { skip_groups: @skip_groups }, required: true)
-      .form-group
-        = label_tag :link_group_access, "Max access level", class: "label-light"
-        .select-wrapper
-          = select_tag :link_group_access, options_for_select(ProjectGroupLink.access_options, ProjectGroupLink.default_access), class: "form-control select-control"
-          = icon('caret-down')
-      .form-group
-        = label_tag :expires_at, 'Access expiration date', class: 'label-light'
-        .clearable-input
-          = text_field_tag :expires_at, nil, class: 'form-control js-access-expiration-date', placeholder: 'Select access expiration date'
-          %i.clear-icon.js-clear-input
-        .help-block
-          On this date, all users in the group will automatically lose access to this project.
-      = submit_tag "Share", class: "btn btn-create"
-  .col-lg-9.col-lg-offset-3
-    %hr
-  .col-lg-9.col-lg-offset-3.append-bottom-default.enabled-groups
-    %h5.prepend-top-0
-      Groups you share with (#{@group_links.size})
-    - if @group_links.present?
-      %ul.well-list
-        - @group_links.each do |group_link|
-          - group = group_link.group
-          %li
-            .pull-left.append-right-10.hidden-xs
-              = icon("folder-open-o", class: "settings-list-icon")
-            .pull-left
-              = link_to group do
-                = group.name
-              %br
-              up to #{group_link.human_access}
-              - if group_link.expires?
-                ·
-                %span{ class: ('text-warning' if group_link.expires_soon?) }
-                  expires in #{distance_of_time_in_words_to_now(group_link.expires_at)}
-            .pull-right
-              = link_to namespace_project_group_link_path(@project.namespace, @project, group_link), method: :delete, class: "btn btn-transparent" do
-                %span.sr-only disable sharing
-                = icon("trash")
-    - else
-      .settings-message.text-center
-        There are no groups with access to your project, add one in the form above
diff --git a/app/views/projects/group_links/update.js.haml b/app/views/projects/group_links/update.js.haml
index af9a5b19060..55520fda494 100644
--- a/app/views/projects/group_links/update.js.haml
+++ b/app/views/projects/group_links/update.js.haml
@@ -1,3 +1,4 @@
 :plain
   var $listItem = $('#{escape_javascript(render('shared/members/group', group_link: @group_link))}');
   $("#group_member_#{@group_link.id} .list-item-name").replaceWith($listItem.find('.list-item-name'));
+  gl.utils.localTimeAgo($('.js-timeago'), $("#group_member_#{@group_link.id}"));
diff --git a/app/views/projects/hooks/index.html.haml b/app/views/projects/hooks/_index.html.haml
index 8faad351463..8faad351463 100644
--- a/app/views/projects/hooks/index.html.haml
+++ b/app/views/projects/hooks/_index.html.haml
diff --git a/app/views/projects/imports/show.html.haml b/app/views/projects/imports/show.html.haml
index 4d8ee562e6a..c52b3860636 100644
--- a/app/views/projects/imports/show.html.haml
+++ b/app/views/projects/imports/show.html.haml
@@ -1,4 +1,4 @@
-- page_title "Import in progress"
+- page_title @project.forked? ? "Forking in progress" : "Import in progress"
 .save-project-loader
   .center
     %h2
diff --git a/app/views/projects/issues/_discussion.html.haml b/app/views/projects/issues/_discussion.html.haml
index c2f4457b60b..5d4e593e4ef 100644
--- a/app/views/projects/issues/_discussion.html.haml
+++ b/app/views/projects/issues/_discussion.html.haml
@@ -1,7 +1,7 @@
 - content_for :note_actions do
   - if can?(current_user, :update_issue, @issue)
-    = link_to 'Reopen issue', issue_path(@issue, issue: {state_event: :reopen}, status_only: true, format: 'json'), data: {no_turbolink: true, original_text: "Reopen issue", alternative_text: "Comment & reopen issue"}, class: "btn btn-nr btn-reopen btn-comment js-note-target-reopen #{issue_button_visibility(@issue, false)}", title: 'Reopen issue'
-    = link_to 'Close issue', issue_path(@issue, issue: {state_event: :close}, status_only: true, format: 'json'), data: {no_turbolink: true, original_text: "Close issue", alternative_text: "Comment & close issue"}, class: "btn btn-nr btn-close btn-comment js-note-target-close #{issue_button_visibility(@issue, true)}", title: 'Close issue'
+    = link_to 'Reopen issue', issue_path(@issue, issue: {state_event: :reopen}, format: 'json'), data: {no_turbolink: true, original_text: "Reopen issue", alternative_text: "Comment & reopen issue"}, class: "btn btn-nr btn-reopen btn-comment js-note-target-reopen #{issue_button_visibility(@issue, false)}", title: 'Reopen issue'
+    = link_to 'Close issue', issue_path(@issue, issue: {state_event: :close}, format: 'json'), data: {no_turbolink: true, original_text: "Close issue", alternative_text: "Comment & close issue"}, class: "btn btn-nr btn-close btn-comment js-note-target-close #{issue_button_visibility(@issue, true)}", title: 'Close issue'
 
 #notes
   = render 'projects/notes/notes_with_form'
diff --git a/app/views/projects/issues/_form.html.haml b/app/views/projects/issues/_form.html.haml
index 7076f5db015..8b011af78eb 100644
--- a/app/views/projects/issues/_form.html.haml
+++ b/app/views/projects/issues/_form.html.haml
@@ -1,8 +1,2 @@
 = form_for [@project.namespace.becomes(Namespace), @project, @issue], html: { class: 'form-horizontal issue-form common-note-form js-quick-submit js-requires-input' } do |f|
   = render 'shared/issuable/form', f: f, issuable: @issue
-
-:javascript
-  $('.assign-to-me-link').on('click', function(e){
-    $('#issue_assignee_id').val("#{current_user.id}").trigger("change");
-    e.preventDefault();
-  });
diff --git a/app/views/projects/issues/_head.html.haml b/app/views/projects/issues/_head.html.haml
index 4825820c4d9..7a188cb6445 100644
--- a/app/views/projects/issues/_head.html.haml
+++ b/app/views/projects/issues/_head.html.haml
@@ -7,7 +7,7 @@
           = nav_link(controller: :issues) do
             = link_to namespace_project_issues_path(@project.namespace, @project), title: 'Issues' do
               %span
-                Issues
+                List
 
           = nav_link(controller: :boards) do
             = link_to namespace_project_boards_path(@project.namespace, @project), title: 'Board' do
diff --git a/app/views/projects/issues/_issue.html.haml b/app/views/projects/issues/_issue.html.haml
index c80210d6ff4..0e3902c066a 100644
--- a/app/views/projects/issues/_issue.html.haml
+++ b/app/views/projects/issues/_issue.html.haml
@@ -1,60 +1,46 @@
 %li{ id: dom_id(issue), class: issue_css_classes(issue), url: issue_path(issue), data: { labels: issue.label_ids, id: issue.id } }
-  - if @bulk_edit
-    .issue-check
-      = check_box_tag dom_id(issue, "selected"), nil, false, 'data-id' => issue.id, class: "selected_issue"
+  .issue-box
+    - if @bulk_edit
+      .issue-check
+        = check_box_tag dom_id(issue, "selected"), nil, false, 'data-id' => issue.id, class: "selected_issue"
+    .issue-info-container
+      .issue-title.title
+        %span.issue-title-text
+          = confidential_icon(issue)
+          = link_to issue.title, issue_path(issue)
+        %ul.controls
+          - if issue.closed?
+            %li
+              CLOSED
 
-  .issue-title.title
-    %span.issue-title-text
-      = confidential_icon(issue)
-      = link_to issue.title, issue_path(issue)
-    %ul.controls
-      - if issue.closed?
-        %li
-          CLOSED
+          - if issue.assignee
+            %li
+              = link_to_member(@project, issue.assignee, name: false, title: "Assigned to :name")
 
-      - if issue.assignee
-        %li
-          = link_to_member(@project, issue.assignee, name: false, title: "Assigned to :name")
+          = render 'shared/issuable_meta_data', issuable: issue
 
-      - upvotes, downvotes = issue.upvotes, issue.downvotes
-      - if upvotes > 0
-        %li
-          = icon('thumbs-up')
-          = upvotes
+      .issue-info
+        #{issuable_reference(issue)} &middot;
+        opened #{time_ago_with_tooltip(issue.created_at, placement: 'bottom')}
+        by #{link_to_member(@project, issue.author, avatar: false)}
+        - if issue.milestone
+          &nbsp;
+          = link_to namespace_project_issues_path(issue.project.namespace, issue.project, milestone_title: issue.milestone.title) do
+            = icon('clock-o')
+            = issue.milestone.title
+        - if issue.due_date
+          %span{ class: "#{'cred' if issue.overdue?}" }
+            &nbsp;
+            = icon('calendar')
+            = issue.due_date.to_s(:medium)
+        - if issue.labels.any?
+          &nbsp;
+          - issue.labels.each do |label|
+            = link_to_label(label, subject: issue.project, css_class: 'label-link')
+        - if issue.tasks?
+          &nbsp;
+          %span.task-status
+            = issue.task_status
 
-      - if downvotes > 0
-        %li
-          = icon('thumbs-down')
-          = downvotes
-
-      - note_count = issue.notes.user.count
-      %li
-        = link_to issue_path(issue, anchor: 'notes'), class: ('no-comments' if note_count.zero?) do
-          = icon('comments')
-          = note_count
-
-  .issue-info
-    #{issue.to_reference} &middot;
-    opened #{time_ago_with_tooltip(issue.created_at, placement: 'bottom')}
-    by #{link_to_member(@project, issue.author, avatar: false)}
-    - if issue.milestone
-      &nbsp;
-      = link_to namespace_project_issues_path(issue.project.namespace, issue.project, milestone_title: issue.milestone.title) do
-        = icon('clock-o')
-        = issue.milestone.title
-    - if issue.due_date
-      %span{class: "#{'cred' if issue.overdue?}"}
-        &nbsp;
-        = icon('calendar')
-        = issue.due_date.to_s(:medium)
-    - if issue.labels.any?
-      &nbsp;
-      - issue.labels.each do |label|
-        = link_to_label(label, subject: issue.project)
-    - if issue.tasks?
-      &nbsp;
-      %span.task-status
-        = issue.task_status
-
-    .pull-right.issue-updated-at
-      %span updated #{time_ago_with_tooltip(issue.updated_at, placement: 'bottom', html_class: 'issue_update_ago')}
+        .pull-right.issue-updated-at
+          %span updated #{time_ago_with_tooltip(issue.updated_at, placement: 'bottom', html_class: 'issue_update_ago')}
diff --git a/app/views/projects/issues/_issue_by_email.html.haml b/app/views/projects/issues/_issue_by_email.html.haml
index 72669372497..d2038a2be68 100644
--- a/app/views/projects/issues/_issue_by_email.html.haml
+++ b/app/views/projects/issues/_issue_by_email.html.haml
@@ -12,16 +12,23 @@
           Create new issue by email
       .modal-body
         %p
-          Write an email to the below email address. (This is a private email address, so keep it secret.)
+          You can create a new issue inside this project by sending an email to the following email address:
         .email-modal-input-group.input-group
           = text_field_tag :issue_email, email, class: "monospace js-select-on-focus form-control", readonly: true
           .input-group-btn
             = clipboard_button(clipboard_target: '#issue_email')
         %p
-          Send an email to this address to create an issue.
-        %p
-          Use the subject line as the title of your issue.
+          The subject will be used as the title of the new issue, and the message will be the description.
+
+          = link_to 'Slash commands', help_page_path('user/project/slash_commands'), target: '_blank', tabindex: -1
+          and styling with
+          = link_to 'Markdown', help_page_path('user/markdown'), target: '_blank', tabindex: -1
+          are supported.
+
         %p
-          Use the message as the body of your issue (feel free to include some nice
-          = succeed ")." do
-            = link_to "Markdown", help_page_path('markdown', 'markdown')
+          This is a private email address, generated just for you.
+
+          Anyone who gets ahold of it can create issues as if they were you.
+          You should
+          = link_to 'reset it', new_issue_address_namespace_project_path(@project.namespace, @project), class: 'incoming-email-token-reset'
+          if that ever happens.
diff --git a/app/views/projects/issues/_issues.html.haml b/app/views/projects/issues/_issues.html.haml
index a4b752ad86d..34d5a3e1831 100644
--- a/app/views/projects/issues/_issues.html.haml
+++ b/app/views/projects/issues/_issues.html.haml
@@ -1,8 +1,7 @@
 %ul.content-list.issues-list.issuable-list
   = render partial: "projects/issues/issue", collection: @issues
   - if @issues.blank?
-    %li
-      .nothing-here-block No issues to show
+    = render 'shared/empty_states/issues'
 
 - if @issues.present?
   = paginate @issues, theme: "gitlab"
diff --git a/app/views/projects/issues/_merge_requests.html.haml b/app/views/projects/issues/_merge_requests.html.haml
index 31d3ec23276..d48923b422a 100644
--- a/app/views/projects/issues/_merge_requests.html.haml
+++ b/app/views/projects/issues/_merge_requests.html.haml
@@ -2,12 +2,12 @@
   %h2.merge-requests-title
     = pluralize(@merge_requests.count, 'Related Merge Request')
   %ul.unstyled-list.related-merge-requests
-    - has_any_ci = @merge_requests.any?(&:pipeline)
+    - has_any_ci = @merge_requests.any?(&:head_pipeline)
     - @merge_requests.each do |merge_request|
       %li
         %span.merge-request-ci-status
-          - if merge_request.pipeline
-            = render_pipeline_status(merge_request.pipeline)
+          - if merge_request.head_pipeline
+            = render_pipeline_status(merge_request.head_pipeline)
           - elsif has_any_ci
             = icon('blank fw')
         %span.merge-request-id
@@ -19,11 +19,17 @@
             in
             - project = merge_request.target_project
             = link_to project.name_with_namespace, namespace_project_path(project.namespace, project)
-        %span.merge-request-status.prepend-left-10
-          - if merge_request.merged?
-            MERGED
-          - elsif merge_request.closed?
-            CLOSED
+
+        - if merge_request.merged?
+          %span.merge-request-status.prepend-left-10.merged
+            Merged
+        - elsif merge_request.closed?
+          %span.merge-request-status.prepend-left-10.closed
+            Closed
+        - else
+          %span.merge-request-status.prepend-left-10.open
+            Open
+
     - if @closed_by_merge_requests.present?
       %li
         = render partial: 'projects/issues/closed_by_box', locals: {merge_request_count: @merge_requests.count}
diff --git a/app/views/projects/issues/_new_branch.html.haml b/app/views/projects/issues/_new_branch.html.haml
index c56b6cc11f5..13e2150f997 100644
--- a/app/views/projects/issues/_new_branch.html.haml
+++ b/app/views/projects/issues/_new_branch.html.haml
@@ -1,9 +1,6 @@
 - if can?(current_user, :push_code, @project)
   .pull-right
-    #new-branch.new-branch{'data-path' => can_create_branch_namespace_project_issue_path(@project.namespace, @project, @issue)}
-      = link_to '#', class: 'checking btn btn-grouped', disabled: 'disabled' do
-        = icon('spinner spin')
-        Checking branches
+    #new-branch.new-branch{ 'data-path' => can_create_branch_namespace_project_issue_path(@project.namespace, @project, @issue) }
       = link_to namespace_project_branches_path(@project.namespace, @project, branch_name: @issue.to_branch_name, issue_iid: @issue.iid),
         method: :post, class: 'btn btn-new btn-inverted btn-grouped has-tooltip available hide', title: @issue.to_branch_name do
         New branch
diff --git a/app/views/projects/issues/index.atom.builder b/app/views/projects/issues/index.atom.builder
index a0df0db77c5..4feec09bb5d 100644
--- a/app/views/projects/issues/index.atom.builder
+++ b/app/views/projects/issues/index.atom.builder
@@ -4,7 +4,7 @@ xml.feed "xmlns" => "http://www.w3.org/2005/Atom", "xmlns:media" => "http://sear
   xml.link    href: url_for(params), rel: "self", type: "application/atom+xml"
   xml.link    href: namespace_project_issues_url(@project.namespace, @project), rel: "alternate", type: "text/html"
   xml.id      namespace_project_issues_url(@project.namespace, @project)
-  xml.updated @issues.first.created_at.xmlschema if @issues.reorder(nil).any?
+  xml.updated @issues.first.updated_at.xmlschema if @issues.reorder(nil).any?
 
   xml << render(partial: 'issues/issue', collection: @issues) if @issues.reorder(nil).any?
 end
diff --git a/app/views/projects/issues/index.html.haml b/app/views/projects/issues/index.html.haml
index c493ff3585b..f3a429d12d9 100644
--- a/app/views/projects/issues/index.html.haml
+++ b/app/views/projects/issues/index.html.haml
@@ -6,51 +6,32 @@
 = content_for :sub_nav do
   = render "projects/issues/head"
 
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('filtered_search')
+
 = content_for :meta_tags do
-  - if current_user
-    = auto_discovery_link_tag(:atom, url_for(params.merge(format: :atom, private_token: current_user.private_token)), title: "#{@project.name} issues")
+  = auto_discovery_link_tag(:atom, params.merge(rss_url_options), title: "#{@project.name} issues")
 
-%div{ class: (container_class) }
-  - if @project.issues.any?
+- if project_issues(@project).exists?
+  %div{ class: (container_class) }
     .top-area
       = render 'shared/issuable/nav', type: :issues
       .nav-controls
-        - if current_user
-          = link_to url_for(params.merge(format: :atom, private_token: current_user.private_token)), class: 'btn append-right-10' do
-            = icon('rss')
-            %span.icon-label
-              Subscribe
-        = render 'shared/issuable/search_form', path: namespace_project_issues_path(@project.namespace, @project)
-        - if can? current_user, :create_issue, @project
-          = link_to new_namespace_project_issue_path(@project.namespace,
-                                                     @project,
-                                                     issue: { assignee_id: issues_finder.assignee.try(:id),
-                                                              milestone_id: issues_finder.milestones.first.try(:id) }),
-                                                     class: "btn btn-new",
-                                                     title: "New Issue",
-                                                     id: "new_issue_link" do
-            New Issue
-    = render 'shared/issuable/filter', type: :issues
+        = link_to params.merge(rss_url_options), class: 'btn append-right-10 has-tooltip', title: 'Subscribe' do
+          = icon('rss')
+        = link_to new_namespace_project_issue_path(@project.namespace,
+                                                   @project,
+                                                   issue: { assignee_id: issues_finder.assignee.try(:id),
+                                                            milestone_id: issues_finder.milestones.first.try(:id) }),
+                                                   class: "btn btn-new",
+                                                   title: "New Issue",
+                                                   id: "new_issue_link" do
+          New Issue
+    = render 'shared/issuable/search_bar', type: :issues
 
     .issues-holder
       = render 'issues'
       - if new_issue_email
         = render 'issue_by_email', email: new_issue_email
-  - else
-    .blank-state.blank-state-welcome
-      %h2.blank-state-title.blank-state-welcome-title
-        Welcome to GitLab Issues
-      %p.blank-state-text
-        Code, test, and deploy together
-    .blank-state
-      .blank-state-icon
-        = custom_icon("issues", size: 50)
-      %h3.blank-state-title
-        You don't have any issues right now.
-      %p.blank-state-text
-        Issues are the best way to track your project progress
-      - if can? current_user, :create_issue, @project
-        = link_to new_namespace_project_issue_path(@project.namespace, @project), class: "btn btn-new", title: "New Issue", id: "new_issue_link" do
-          New Issue
-        - if new_issue_email
-          = render 'issue_by_email', email: new_issue_email
+- else
+  = render 'shared/empty_states/issues', button_path: new_namespace_project_issue_path(@project.namespace, @project)
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index bd629b5c519..6ac05bf3afe 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -1,3 +1,4 @@
+- @content_class = "limit-container-width" unless fluid_layout
 - page_title           "#{@issue.title} (#{@issue.to_reference})", "Issues"
 - page_description     @issue.description
 - page_card_attributes @issue.card_attributes
@@ -19,37 +20,34 @@
       = confidential_icon(@issue)
       = issuable_meta(@issue, @project, "Issue")
 
-  - if can?(current_user, :create_issue, @project) || can?(current_user, :update_issue, @issue)
-    .issuable-actions
-      .clearfix.issue-btn-group.dropdown
-        %button.btn.btn-default.pull-left.hidden-md.hidden-lg{ type: "button", data: { toggle: "dropdown" } }
-          Options
-          = icon('caret-down')
-        .dropdown-menu.dropdown-menu-align-right.hidden-lg
-          %ul
-            - if can?(current_user, :create_issue, @project)
-              %li
-                = link_to 'New issue', new_namespace_project_issue_path(@project.namespace, @project), title: 'New issue', id: 'new_issue_link'
-            - if can?(current_user, :update_issue, @issue)
-              %li
-                = link_to 'Reopen issue', issue_path(@issue, issue: { state_event: :reopen }, status_only: true, format: 'json'), data: {no_turbolink: true}, class: "btn-reopen #{issue_button_visibility(@issue, false)}", title: 'Reopen issue'
-              %li
-                = link_to 'Close issue', issue_path(@issue, issue: { state_event: :close }, status_only: true, format: 'json'), data: {no_turbolink: true}, class: "btn-close #{issue_button_visibility(@issue, true)}", title: 'Close issue'
-              %li
-                = link_to 'Edit', edit_namespace_project_issue_path(@project.namespace, @project, @issue)
-            - if @issue.submittable_as_spam? && current_user.admin?
-              %li
-                = link_to 'Submit as spam', mark_as_spam_namespace_project_issue_path(@project.namespace, @project, @issue), method: :post, class: 'btn-spam', title: 'Submit as spam'
+  .issuable-actions
+    .clearfix.issue-btn-group.dropdown
+      %button.btn.btn-default.pull-left.hidden-md.hidden-lg{ type: "button", data: { toggle: "dropdown" } }
+        Options
+        = icon('caret-down')
+      .dropdown-menu.dropdown-menu-align-right.hidden-lg
+        %ul
+          %li
+            = link_to 'New issue', new_namespace_project_issue_path(@project.namespace, @project), title: 'New issue', id: 'new_issue_link'
+          - if can?(current_user, :update_issue, @issue)
+            %li
+              = link_to 'Reopen issue', issue_path(@issue, issue: { state_event: :reopen }, format: 'json'), data: {no_turbolink: true}, class: "btn-reopen #{issue_button_visibility(@issue, false)}", title: 'Reopen issue'
+            %li
+              = link_to 'Close issue', issue_path(@issue, issue: { state_event: :close }, format: 'json'), data: {no_turbolink: true}, class: "btn-close #{issue_button_visibility(@issue, true)}", title: 'Close issue'
+            %li
+              = link_to 'Edit', edit_namespace_project_issue_path(@project.namespace, @project, @issue)
+          - if @issue.submittable_as_spam_by?(current_user)
+            %li
+              = link_to 'Submit as spam', mark_as_spam_namespace_project_issue_path(@project.namespace, @project, @issue), method: :post, class: 'btn-spam', title: 'Submit as spam'
 
-        - if can?(current_user, :create_issue, @project)
-          = link_to new_namespace_project_issue_path(@project.namespace, @project), class: 'hidden-xs hidden-sm btn btn-grouped new-issue-link btn-new btn-inverted', title: 'New issue', id: 'new_issue_link' do
-            New issue
-        - if can?(current_user, :update_issue, @issue)
-          = link_to 'Reopen issue', issue_path(@issue, issue: { state_event: :reopen }, status_only: true, format: 'json'), data: {no_turbolink: true}, class: "hidden-xs hidden-sm btn btn-grouped btn-reopen #{issue_button_visibility(@issue, false)}", title: 'Reopen issue'
-          = link_to 'Close issue', issue_path(@issue, issue: { state_event: :close }, status_only: true, format: 'json'), data: {no_turbolink: true}, class: "hidden-xs hidden-sm btn btn-grouped btn-close #{issue_button_visibility(@issue, true)}", title: 'Close issue'
-          - if @issue.submittable_as_spam? && current_user.admin?
-            = link_to 'Submit as spam', mark_as_spam_namespace_project_issue_path(@project.namespace, @project, @issue), method: :post, class: 'hidden-xs hidden-sm btn btn-grouped btn-spam', title: 'Submit as spam'
-          = link_to 'Edit', edit_namespace_project_issue_path(@project.namespace, @project, @issue), class: 'hidden-xs hidden-sm btn btn-grouped issuable-edit'
+    = link_to new_namespace_project_issue_path(@project.namespace, @project), class: 'hidden-xs hidden-sm btn btn-grouped new-issue-link btn-new btn-inverted', title: 'New issue', id: 'new_issue_link' do
+      New issue
+    - if can?(current_user, :update_issue, @issue)
+      = link_to 'Reopen issue', issue_path(@issue, issue: { state_event: :reopen }, format: 'json'), data: {no_turbolink: true}, class: "hidden-xs hidden-sm btn btn-grouped btn-reopen #{issue_button_visibility(@issue, false)}", title: 'Reopen issue'
+      = link_to 'Close issue', issue_path(@issue, issue: { state_event: :close }, format: 'json'), data: {no_turbolink: true}, class: "hidden-xs hidden-sm btn btn-grouped btn-close #{issue_button_visibility(@issue, true)}", title: 'Close issue'
+      - if @issue.submittable_as_spam_by?(current_user)
+        = link_to 'Submit as spam', mark_as_spam_namespace_project_issue_path(@project.namespace, @project, @issue), method: :post, class: 'hidden-xs hidden-sm btn btn-grouped btn-spam', title: 'Submit as spam'
+      = link_to 'Edit', edit_namespace_project_issue_path(@project.namespace, @project, @issue), class: 'hidden-xs hidden-sm btn btn-grouped issuable-edit'
 
 
 .issue-details.issuable-details
@@ -72,7 +70,7 @@
       // This element is filled in using JavaScript.
 
   .content-block.content-block-small
-    = render 'new_branch'
+    = render 'new_branch' unless @issue.confidential?
     = render 'award_emoji/awards_block', awardable: @issue, inline: true
 
   %section.issuable-discussion
diff --git a/app/views/projects/issues/verify.html.haml b/app/views/projects/issues/verify.html.haml
new file mode 100644
index 00000000000..6da7c317f3a
--- /dev/null
+++ b/app/views/projects/issues/verify.html.haml
@@ -0,0 +1,5 @@
+- form = [@project.namespace.becomes(Namespace), @project, @issue]
+
+= render layout: 'layouts/recaptcha_verification', locals: { spammable: @issue, form: form } do
+  = hidden_field_tag(:merge_request_to_resolve_discussions_of, params[:merge_request_to_resolve_discussions_of])
+  = hidden_field_tag(:discussion_to_resolve, params[:discussion_to_resolve])
diff --git a/app/views/projects/labels/destroy.js.haml b/app/views/projects/labels/destroy.js.haml
deleted file mode 100644
index 8d09e2bda11..00000000000
--- a/app/views/projects/labels/destroy.js.haml
+++ /dev/null
@@ -1,2 +0,0 @@
-- if @labels.empty?
-  $('.labels').load(document.URL + ' .nothing-here-block').hide().fadeIn(1000)
diff --git a/app/views/projects/labels/index.html.haml b/app/views/projects/labels/index.html.haml
index 05a8475dcd6..8d4a91cb64c 100644
--- a/app/views/projects/labels/index.html.haml
+++ b/app/views/projects/labels/index.html.haml
@@ -3,37 +3,38 @@
 - hide_class = ''
 = render "projects/issues/head"
 
-%div{ class: container_class }
-  .top-area.adjust
-    .nav-text
-      Labels can be applied to issues and merge requests. Star a label to make it a priority label. Order the prioritized labels to change their relative priority, by dragging.
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('simulate_drag') if Rails.env.test?
 
-    .nav-controls
-      - if can?(current_user, :admin_label, @project)
-        = link_to new_namespace_project_label_path(@project.namespace, @project), class: "btn btn-new" do
-          New label
+- if @labels.exists? || @prioritized_labels.exists?
+  %div{ class: container_class }
+    .top-area.adjust
+      .nav-text
+        Labels can be applied to issues and merge requests. Star a label to make it a priority label. Order the prioritized labels to change their relative priority, by dragging.
 
-  .labels
-    - if can?(current_user, :admin_label, @project)
-      -# Only show it in the first page
-      - hide = @available_labels.empty? || (params[:page].present? && params[:page] != '1')
-      .prioritized-labels{ class: ('hide' if hide) }
-        %h5 Prioritized Labels
-        %ul.content-list.manage-labels-list.js-prioritized-labels{ "data-url" => set_priorities_namespace_project_labels_path(@project.namespace, @project) }
-          %p.empty-message{ class: ('hidden' unless @prioritized_labels.empty?) } No prioritized labels yet
-          - if @prioritized_labels.present?
-            = render partial: 'shared/label', subject: @project, collection: @prioritized_labels, as: :label
+      .nav-controls
+        - if can?(current_user, :admin_label, @project)
+          = link_to new_namespace_project_label_path(@project.namespace, @project), class: "btn btn-new" do
+            New label
 
-    .other-labels
+    .labels
       - if can?(current_user, :admin_label, @project)
-        %h5{ class: ('hide' if hide) } Other Labels
-      %ul.content-list.manage-labels-list.js-other-labels
-        - if @labels.present?
-          = render partial: 'shared/label', subject: @project, collection: @labels, as: :label
-        = paginate @labels, theme: 'gitlab'
-      - if @labels.blank?
-        .nothing-here-block
+        -# Only show it in the first page
+        - hide = @available_labels.empty? || (params[:page].present? && params[:page] != '1')
+        .prioritized-labels{ class: ('hide' if hide) }
+          %h5 Prioritized Labels
+          %ul.content-list.manage-labels-list.js-prioritized-labels{ "data-url" => set_priorities_namespace_project_labels_path(@project.namespace, @project) }
+            #js-priority-labels-empty-state{ class: "#{'hidden' unless @prioritized_labels.empty?}" }
+              = render 'shared/empty_states/priority_labels'
+            - if @prioritized_labels.present?
+              = render partial: 'shared/label', subject: @project, collection: @prioritized_labels, as: :label
+
+      - if @labels.present?
+        .other-labels
           - if can?(current_user, :admin_label, @project)
-            Create a label or #{link_to 'generate a default set of labels', generate_namespace_project_labels_path(@project.namespace, @project), method: :post}.
-          - else
-            No labels created
+            %h5{ class: ('hide' if hide) } Other Labels
+          %ul.content-list.manage-labels-list.js-other-labels
+            = render partial: 'shared/label', subject: @project, collection: @labels, as: :label
+            = paginate @labels, theme: 'gitlab'
+- else
+  = render 'shared/empty_states/labels'
diff --git a/app/views/projects/mattermosts/_no_teams.html.haml b/app/views/projects/mattermosts/_no_teams.html.haml
new file mode 100644
index 00000000000..aac74a25b75
--- /dev/null
+++ b/app/views/projects/mattermosts/_no_teams.html.haml
@@ -0,0 +1,16 @@
+- if @teams_error_message
+  = content_for :flash_message do
+    .alert.alert-danger= @teams_error_message
+
+%p
+  You aren’t a member of any team on the Mattermost instance at
+  %strong= Gitlab.config.mattermost.host
+%p
+  To install this service,
+  = link_to "#{Gitlab.config.mattermost.host}/select_team", target: '__blank' do
+    join a team
+    = icon('external-link')
+  and try again.
+%hr
+.clearfix
+  = link_to 'Go back', edit_namespace_project_service_path(@project.namespace, @project, @service), class: 'btn btn-lg pull-right'
diff --git a/app/views/projects/mattermosts/_team_selection.html.haml b/app/views/projects/mattermosts/_team_selection.html.haml
new file mode 100644
index 00000000000..04bd4e8b683
--- /dev/null
+++ b/app/views/projects/mattermosts/_team_selection.html.haml
@@ -0,0 +1,46 @@
+%p
+  This service will be installed on the Mattermost instance at
+  %strong= link_to Gitlab.config.mattermost.host, Gitlab.config.mattermost.host
+%hr
+= form_for(:mattermost, method: :post, url: namespace_project_mattermost_path(@project.namespace, @project), html: { class: 'js-requires-input'} ) do |f|
+  %h4 Team
+  %p
+    = @teams.one? ? 'The team' : 'Select the team'
+    where the slash commands will be used in
+  - selected_id = @teams.one? ? @teams.first['id'] : nil
+  - options = options_for_select(mattermost_teams_options(@teams), selected_id)
+  = f.select(:team_id, options, { include_blank: 'Select team...'}, { class: 'form-control', disabled: @teams.one?, selected: selected_id, required: true })
+  = f.hidden_field(:team_id, value: selected_id, required: true) if @teams.one?
+  .help-block
+    - if @teams.one?
+      This is the only available team.
+    - else
+      The list shows all available teams.
+    To create a team,
+    = link_to "#{Gitlab.config.mattermost.host}/create_team" do
+      use Mattermost's interface
+      = icon('external-link')
+    or ask your Mattermost system administrator.
+  %hr
+  %h4 Command trigger word
+  %p Choose the word that will trigger commands
+  = f.text_field(:trigger, value: @project.path, class: 'form-control', required: true)
+  .help-block
+    %p
+      Trigger word must be unique, and can't begin with a slash or contain any spaces.
+      Use the word that works best for your team.
+    %p
+      Suggestions:
+      %code= 'gitlab'
+      %code= @project.path # Path contains no spaces, but dashes
+      %code= @project.path_with_namespace
+    %p
+      Reserved:
+      = link_to 'https://docs.mattermost.com/help/messaging/executing-commands.html#built-in-commands', target: '__blank' do
+        see list of built-in slash commands
+        = icon('external-link')
+  %hr
+  .clearfix
+    .pull-right
+      = link_to 'Cancel', edit_namespace_project_service_path(@project.namespace, @project, @service), class: 'btn btn-lg'
+      = f.submit 'Install', class: 'btn btn-save btn-lg'
diff --git a/app/views/projects/mattermosts/new.html.haml b/app/views/projects/mattermosts/new.html.haml
new file mode 100644
index 00000000000..15829a3f143
--- /dev/null
+++ b/app/views/projects/mattermosts/new.html.haml
@@ -0,0 +1,10 @@
+- @body_class = 'card-content'
+
+.service-installation
+  .inline.pull-right
+    = custom_icon('mattermost_logo', size: 48)
+  %h3 Install Mattermost Command
+  - if @teams.empty?
+    = render 'no_teams'
+  - else
+    = render 'team_selection'
diff --git a/app/views/projects/merge_requests/_form.html.haml b/app/views/projects/merge_requests/_form.html.haml
index 88525f4036a..9607a7b5d06 100644
--- a/app/views/projects/merge_requests/_form.html.haml
+++ b/app/views/projects/merge_requests/_form.html.haml
@@ -1,8 +1,2 @@
 = form_for [@project.namespace.becomes(Namespace), @project, @merge_request], html: { class: 'merge-request-form form-horizontal common-note-form js-requires-input js-quick-submit' } do |f|
   = render 'shared/issuable/form', f: f, issuable: @merge_request
-
-:javascript
-  $('.assign-to-me-link').on('click', function(e){
-    $('#merge_request_assignee_id').val("#{current_user.id}").trigger("change");
-    e.preventDefault();
-  });
diff --git a/app/views/projects/merge_requests/_merge_request.html.haml b/app/views/projects/merge_requests/_merge_request.html.haml
index 12408068834..11b7aaec704 100644
--- a/app/views/projects/merge_requests/_merge_request.html.haml
+++ b/app/views/projects/merge_requests/_merge_request.html.haml
@@ -1,72 +1,61 @@
-%li{ class: mr_css_classes(merge_request) }
+%li{ id: dom_id(merge_request), class: mr_css_classes(merge_request), data: { labels: merge_request.label_ids, id: merge_request.id } }
   - if @bulk_edit
     .issue-check
       = check_box_tag dom_id(merge_request, "selected"), nil, false, 'data-id' => merge_request.id, class: "selected_issue"
 
-  .merge-request-title.title
-    %span.merge-request-title-text
-      = link_to merge_request.title, merge_request_path(merge_request)
-    %ul.controls
-      - if merge_request.merged?
-        %li
-          MERGED
-      - elsif merge_request.closed?
-        %li
-          = icon('ban')
-          CLOSED
-
-      - if merge_request.pipeline
-        %li
-          = render_pipeline_status(merge_request.pipeline)
-
-      - if merge_request.open? && merge_request.broken?
-        %li
-          = link_to merge_request_path(merge_request), class: "has-tooltip", title: "Cannot be merged automatically", data: { container: 'body' } do
-            = icon('exclamation-triangle')
-
-      - if merge_request.assignee
-        %li
-          = link_to_member(merge_request.source_project, merge_request.assignee, name: false, title: "Assigned to :name")
-
-      - upvotes, downvotes = merge_request.upvotes, merge_request.downvotes
-      - if upvotes > 0
-        %li
-          = icon('thumbs-up')
-          = upvotes
-
-      - if downvotes > 0
-        %li
-          = icon('thumbs-down')
-          = downvotes
-
-      - note_count = merge_request.mr_and_commit_notes.user.count
-      %li
-        = link_to merge_request_path(merge_request, anchor: 'notes'), class: ('no-comments' if note_count.zero?) do
-          = icon('comments')
-          = note_count
-
-  .merge-request-info
-    #{merge_request.to_reference} &middot;
-    opened #{time_ago_with_tooltip(merge_request.created_at, placement: 'bottom')}
-    by #{link_to_member(@project, merge_request.author, avatar: false)}
-    - if merge_request.target_project.default_branch != merge_request.target_branch
-      &nbsp;
-      = link_to namespace_project_commits_path(merge_request.project.namespace, merge_request.project, merge_request.target_branch) do
-        = icon('code-fork')
-        = merge_request.target_branch
-    - if merge_request.milestone
-      &nbsp;
-      = link_to namespace_project_merge_requests_path(merge_request.project.namespace, merge_request.project, milestone_title: merge_request.milestone.title) do
-        = icon('clock-o')
-        = merge_request.milestone.title
-    - if merge_request.labels.any?
-      &nbsp;
-      - merge_request.labels.each do |label|
-        = link_to_label(label, subject: merge_request.project, type: :merge_request)
-    - if merge_request.tasks?
-      &nbsp;
-      %span.task-status
-        = merge_request.task_status
-
-    .pull-right.hidden-xs
-      %span updated #{time_ago_with_tooltip(merge_request.updated_at, placement: 'bottom', html_class: 'merge_request_updated_ago')}
+  .issue-info-container
+    .merge-request-title.title
+      %span.merge-request-title-text
+        = link_to merge_request.title, merge_request_path(merge_request)
+      %ul.controls
+        - if merge_request.merged?
+          %li
+            MERGED
+        - elsif merge_request.closed?
+          %li
+            = icon('ban')
+            CLOSED
+
+        - if merge_request.head_pipeline
+          %li
+            = render_pipeline_status(merge_request.head_pipeline)
+
+        - if merge_request.open? && merge_request.broken?
+          %li
+            = link_to merge_request_path(merge_request), class: "has-tooltip", title: "Cannot be merged automatically", data: { container: 'body' } do
+              = icon('exclamation-triangle')
+
+        - if merge_request.assignee
+          %li
+            = link_to_member(merge_request.source_project, merge_request.assignee, name: false, title: "Assigned to :name")
+
+        = render 'shared/issuable_meta_data', issuable: merge_request
+
+    .merge-request-info
+      #{issuable_reference(merge_request)} &middot;
+      opened #{time_ago_with_tooltip(merge_request.created_at, placement: 'bottom')}
+      by #{link_to_member(@project, merge_request.author, avatar: false)}
+      - if merge_request.target_project.default_branch != merge_request.target_branch
+        &nbsp;
+        = link_to namespace_project_commits_path(merge_request.project.namespace, merge_request.project, merge_request.target_branch) do
+          = icon('code-fork')
+          = merge_request.target_branch
+
+      - if merge_request.milestone
+        &nbsp;
+        = link_to namespace_project_merge_requests_path(merge_request.project.namespace, merge_request.project, milestone_title: merge_request.milestone.title) do
+          = icon('clock-o')
+          = merge_request.milestone.title
+
+      - if merge_request.labels.any?
+        &nbsp;
+        - merge_request.labels.each do |label|
+          = link_to_label(label, subject: merge_request.project, type: :merge_request, css_class: 'label-link')
+
+      - if merge_request.tasks?
+        &nbsp;
+        %span.task-status
+          = merge_request.task_status
+
+      .pull-right.hidden-xs
+        %span updated #{time_ago_with_tooltip(merge_request.updated_at, placement: 'bottom', html_class: 'merge_request_updated_ago')}
diff --git a/app/views/projects/merge_requests/_new_compare.html.haml b/app/views/projects/merge_requests/_new_compare.html.haml
index 466ec1475d8..8d134aaac67 100644
--- a/app/views/projects/merge_requests/_new_compare.html.haml
+++ b/app/views/projects/merge_requests/_new_compare.html.haml
@@ -30,7 +30,7 @@
                   branches: @merge_request.source_branches,
                   selected: f.object.source_branch
         .panel-footer
-          = icon('spinner spin', class: 'js-source-loading')
+          .text-center= icon('spinner spin', class: 'js-source-loading')
           %ul.list-unstyled.mr_source_commit
 
     .col-md-6
@@ -60,7 +60,7 @@
                   branches: @merge_request.target_branches,
                   selected: f.object.target_branch
         .panel-footer
-          = icon('spinner spin', class: "js-target-loading")
+          .text-center= icon('spinner spin', class: "js-target-loading")
           %ul.list-unstyled.mr_target_commit
 
   - if @merge_request.errors.any?
diff --git a/app/views/projects/merge_requests/_new_diffs.html.haml b/app/views/projects/merge_requests/_new_diffs.html.haml
index 74367ab9b7b..627fc4e9671 100644
--- a/app/views/projects/merge_requests/_new_diffs.html.haml
+++ b/app/views/projects/merge_requests/_new_diffs.html.haml
@@ -1 +1 @@
-= render "projects/diffs/diffs", diffs: @diffs, show_whitespace_toggle: false
+= render "projects/diffs/diffs", diffs: @diffs, environment: @environment, show_whitespace_toggle: false
diff --git a/app/views/projects/merge_requests/_new_submit.html.haml b/app/views/projects/merge_requests/_new_submit.html.haml
index 9c6f562f7db..e7fcac4c477 100644
--- a/app/views/projects/merge_requests/_new_submit.html.haml
+++ b/app/views/projects/merge_requests/_new_submit.html.haml
@@ -3,15 +3,15 @@
 %p.slead
   - source_title, target_title = format_mr_branch_names(@merge_request)
   From
-  %strong.label-branch #{source_title}
+  %strong.label-branch= source_title
   %span into
-  %strong.label-branch #{target_title}
+  %strong.label-branch= target_title
 
   %span.pull-right
     = link_to 'Change branches', mr_change_branches_path(@merge_request)
 %hr
-= form_for [@project.namespace.becomes(Namespace), @project, @merge_request], html: { class: 'merge-request-form form-horizontal common-note-form js-requires-input' } do |f|
-  = render 'shared/issuable/form', f: f, issuable: @merge_request
+= form_for [@project.namespace.becomes(Namespace), @project, @merge_request], html: { class: 'merge-request-form form-horizontal common-note-form js-requires-input js-quick-submit' } do |f|
+  = render 'shared/issuable/form', f: f, issuable: @merge_request, commits: @commits
   = f.hidden_field :source_project_id
   = f.hidden_field :source_branch
   = f.hidden_field :target_project_id
@@ -34,10 +34,6 @@
           = link_to url_for(params), data: {target: 'div#pipelines', action: 'pipelines', toggle: 'tab'} do
             Pipelines
             %span.badge= @pipelines.size
-        %li.builds-tab
-          = link_to url_for(params), data: {target: 'div#builds', action: 'builds', toggle: 'tab'} do
-            Builds
-            %span.badge= @statuses.size
       %li.diffs-tab
         = link_to url_for(params.merge(action: 'new_diffs')), data: {target: 'div#diffs', action: 'new/diffs', toggle: 'tab'} do
           Changes
@@ -47,23 +43,15 @@
       #commits.commits.tab-pane.active
         = render "projects/merge_requests/show/commits"
       #diffs.diffs.tab-pane
-        - # This tab is always loaded via AJAX
+        -# This tab is always loaded via AJAX
       - if @pipelines.any?
-        #builds.builds.tab-pane
-          = render "projects/merge_requests/show/builds"
         #pipelines.pipelines.tab-pane
-          = render "projects/merge_requests/show/pipelines"
+          = render 'projects/merge_requests/show/pipelines', endpoint: url_for(params.merge(format: :json))
 
   .mr-loading-status
     = spinner
 
 :javascript
-  $('.assign-to-me-link').on('click', function(e){
-    $('#merge_request_assignee_id').val("#{current_user.id}").trigger("change");
-    e.preventDefault();
-  });
-:javascript
   var merge_request = new MergeRequest({
-    action: "#{(@show_changes_tab ? 'new/diffs' : 'new')}",
-    buildsLoaded: "#{@pipelines.any? ? 'true' : 'false'}"
+    action: "#{(@show_changes_tab ? 'new/diffs' : 'new')}"
   });
diff --git a/app/views/projects/merge_requests/_show.html.haml b/app/views/projects/merge_requests/_show.html.haml
index f57abe73977..881ee9fd596 100644
--- a/app/views/projects/merge_requests/_show.html.haml
+++ b/app/views/projects/merge_requests/_show.html.haml
@@ -1,20 +1,22 @@
+- @content_class = "limit-container-width" unless fluid_layout
 - page_title           "#{@merge_request.title} (#{@merge_request.to_reference})", "Merge Requests"
 - page_description     @merge_request.description
 - page_card_attributes @merge_request.card_attributes
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_tag('diff_notes/diff_notes_bundle.js')
+  = page_specific_javascript_bundle_tag('common_vue')
+  = page_specific_javascript_bundle_tag('diff_notes')
 
-.merge-request{'data-url' => merge_request_path(@merge_request)}
+.merge-request{ 'data-url' => merge_request_path(@merge_request), 'data-project-path' => project_path(@merge_request.project) }
   = render "projects/merge_requests/show/mr_title"
 
-  .merge-request-details.issuable-details{data: {id: @merge_request.project.id}}
+  .merge-request-details.issuable-details{ data: { id: @merge_request.project.id } }
     = render "projects/merge_requests/show/mr_box"
     .append-bottom-default.mr-source-target.prepend-top-default
       - if @merge_request.open?
         .pull-right
           - if @merge_request.source_branch_exists?
             - if koding_enabled? && @repository.koding_yml
-              = link_to koding_project_url(@merge_request.source_project, @merge_request.source_branch, @merge_request.commits.first.short_id), class: "btn inline btn-grouped btn-sm", target: '_blank' do
+              = link_to koding_project_url(@merge_request.source_project, @merge_request.source_branch, @merge_request.commits.first.short_id), class: "btn inline btn-grouped btn-sm", target: '_blank', rel: 'noopener noreferrer' do
                 Run in IDE (Koding)
             = link_to "#modal_merge_info", class: "btn inline btn-grouped btn-sm", "data-toggle" => "modal" do
               Check out branch
@@ -27,11 +29,11 @@
               %li= link_to "Email Patches", merge_request_path(@merge_request, format: :patch)
               %li= link_to "Plain Diff",    merge_request_path(@merge_request, format: :diff)
       .normal
-        %span Request to merge
+        %span <b>Request to merge</b>
         %span.label-branch= source_branch_with_namespace(@merge_request)
-        %span into
+        %span <b>into</b>
         %span.label-branch
-          = link_to @merge_request.target_branch, namespace_project_commits_path(@project.namespace, @project, @merge_request.target_branch)
+          = link_to_if @merge_request.target_branch_exists?, @merge_request.target_branch, namespace_project_commits_path(@project.namespace, @project, @merge_request.target_branch)
         - if @merge_request.open? && @merge_request.diverged_from_target_branch?
           %span (#{pluralize(@merge_request.diverged_commits_count, 'commit')} behind)
 
@@ -41,69 +43,67 @@
     = render "projects/merge_requests/widget/show.html.haml"
 
     - if @merge_request.source_branch_exists? && @merge_request.mergeable? && @merge_request.can_be_merged_by?(current_user)
-      .light.prepend-top-default.append-bottom-default
+      .merge-manually.light.prepend-top-default
         You can also accept this merge request manually using the
         = succeed '.' do
           = link_to "command line", "#modal_merge_info", class: "how_to_merge_link vlink", title: "How To Merge", "data-toggle" => "modal"
 
-    - if @commits_count.nonzero?
-      .merge-request-tabs-holder{ class: ("js-tabs-affix" unless ENV['RAILS_ENV'] == 'test') }
-        %div{ class: container_class }
-          %ul.merge-request-tabs.nav-links.no-top.no-bottom
-            %li.notes-tab
-              = link_to namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: 'div#notes', action: 'notes', toggle: 'tab' } do
-                Discussion
-                %span.badge= @merge_request.mr_and_commit_notes.user.count
-            - if @merge_request.source_project
-              %li.commits-tab
-                = link_to commits_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: 'div#commits', action: 'commits', toggle: 'tab' } do
-                  Commits
-                  %span.badge= @commits_count
-            - if @pipeline
-              %li.pipelines-tab
-                = link_to pipelines_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: '#pipelines', action: 'pipelines', toggle: 'tab' } do
-                  Pipelines
-                  %span.badge= @pipelines.size
-              %li.builds-tab
-                = link_to builds_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: '#builds', action: 'builds', toggle: 'tab' } do
-                  Builds
-                  %span.badge= @statuses.size
-            %li.diffs-tab
-              = link_to diffs_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: 'div#diffs', action: 'diffs', toggle: 'tab' } do
-                Changes
-                %span.badge= @merge_request.diff_size
-            %li#resolve-count-app.line-resolve-all-container.pull-right.prepend-top-10.hidden-xs{ "v-cloak" => true }
-              %resolve-count{ "inline-template" => true, ":logged-out" => "#{current_user.nil?}"  }
+    .content-block.content-block-small.emoji-list-container
+      = render 'award_emoji/awards_block', awardable: @merge_request, inline: true
+
+    .merge-request-tabs-holder{ class: ("js-tabs-affix" unless ENV['RAILS_ENV'] == 'test') }
+      .merge-request-tabs-container.scrolling-tabs-container.inner-page-scroll-tabs
+        .fade-left= icon('angle-left')
+        .fade-right= icon('angle-right')
+        %ul.merge-request-tabs.nav-links.scrolling-tabs
+          %li.notes-tab
+            = link_to namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: 'div#notes', action: 'notes', toggle: 'tab' } do
+              Discussion
+              %span.badge= @merge_request.related_notes.user.count
+          - if @merge_request.source_project
+            %li.commits-tab
+              = link_to commits_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: 'div#commits', action: 'commits', toggle: 'tab' } do
+                Commits
+                %span.badge= @commits_count
+          - if @pipelines.any?
+            %li.pipelines-tab
+              = link_to pipelines_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: '#pipelines', action: 'pipelines', toggle: 'tab' } do
+                Pipelines
+                %span.badge= @pipelines.size
+          %li.diffs-tab
+            = link_to diffs_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), data: { target: 'div#diffs', action: 'diffs', toggle: 'tab' } do
+              Changes
+              %span.badge= @merge_request.diff_size
+          %li#resolve-count-app.line-resolve-all-container.pull-right.prepend-top-10.hidden-xs{ "v-cloak" => true }
+            %resolve-count{ "inline-template" => true, ":logged-out" => "#{current_user.nil?}" }
+              %div
                 .line-resolve-all{ "v-show" => "discussionCount > 0",
                   ":class" => "{ 'has-next-btn': !loggedOut && resolvedDiscussionCount !== discussionCount }" }
                   %span.line-resolve-btn.is-disabled{ type: "button",
                       ":class" => "{ 'is-active': resolvedDiscussionCount === discussionCount }" }
                     = render "shared/icons/icon_status_success.svg"
                   %span.line-resolve-text
-                    {{ resolvedDiscussionCount }}/{{ discussionCount }} {{ discussionCount | pluralize 'discussion' }} resolved
+                    {{ resolvedDiscussionCount }}/{{ discussionCount }} {{ resolvedCountText }} resolved
+                = render "discussions/new_issue_for_all_discussions", merge_request: @merge_request
                 = render "discussions/jump_to_next"
 
-      .tab-content#diff-notes-app
-        #notes.notes.tab-pane.voting_notes
-          .content-block.content-block-small
-            = render 'award_emoji/awards_block', awardable: @merge_request, inline: true
-
-          .row
-            %section.col-md-12
-              .issuable-discussion
-                = render "projects/merge_requests/discussion"
+    .tab-content#diff-notes-app
+      #notes.notes.tab-pane.voting_notes
+        .row
+          %section.col-md-12
+            .issuable-discussion
+              = render "projects/merge_requests/discussion"
 
-        #commits.commits.tab-pane
-          - # This tab is always loaded via AJAX
-        #builds.builds.tab-pane
-          - # This tab is always loaded via AJAX
-        #pipelines.pipelines.tab-pane
-          - # This tab is always loaded via AJAX
-        #diffs.diffs.tab-pane
-          - # This tab is always loaded via AJAX
+      #commits.commits.tab-pane
+        -# This tab is always loaded via AJAX
+      #pipelines.pipelines.tab-pane
+        - if @pipelines.any?
+          = render 'projects/commit/pipelines_list', disable_initialization: true, endpoint: pipelines_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)
+      #diffs.diffs.tab-pane
+        -# This tab is always loaded via AJAX
 
-      .mr-loading-status
-        = spinner
+    .mr-loading-status
+      = spinner
 
 = render 'shared/issuable/sidebar', issuable: @merge_request
 - if @merge_request.can_be_reverted?(current_user)
@@ -112,8 +112,10 @@
   = render "projects/commit/change", type: 'cherry-pick', commit: @merge_request.merge_commit, title: @merge_request.title
 
 :javascript
-  var merge_request;
-
-  merge_request = new MergeRequest({
-    action: "#{controller.action_name}"
+  $(function () {
+    new MergeRequest({
+      action: "#{controller.action_name}"
+    });
   });
+
+  var mrRefreshWidgetUrl = "#{mr_widget_refresh_url(@merge_request)}";
diff --git a/app/views/projects/merge_requests/cancel_merge_when_build_succeeds.js.haml b/app/views/projects/merge_requests/cancel_merge_when_pipeline_succeeds.js.haml
index eab5be488b5..eab5be488b5 100644
--- a/app/views/projects/merge_requests/cancel_merge_when_build_succeeds.js.haml
+++ b/app/views/projects/merge_requests/cancel_merge_when_pipeline_succeeds.js.haml
diff --git a/app/views/projects/merge_requests/conflicts.html.haml b/app/views/projects/merge_requests/conflicts.html.haml
index d9f74d2cbfb..51d59280be8 100644
--- a/app/views/projects/merge_requests/conflicts.html.haml
+++ b/app/views/projects/merge_requests/conflicts.html.haml
@@ -1,6 +1,7 @@
 - page_title "Merge Conflicts", "#{@merge_request.title} (#{@merge_request.to_reference}", "Merge Requests"
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_tag('merge_conflicts/merge_conflicts_bundle.js')
+  = page_specific_javascript_bundle_tag('common_vue')
+  = page_specific_javascript_bundle_tag('merge_conflicts')
   = page_specific_javascript_tag('lib/ace.js')
 = render "projects/merge_requests/show/mr_title"
 
@@ -9,32 +10,29 @@
 
 = render 'shared/issuable/sidebar', issuable: @merge_request
 
-#conflicts{"v-cloak" => "true", data: { conflicts_path: conflicts_namespace_project_merge_request_path(@merge_request.project.namespace, @merge_request.project, @merge_request, format: :json),
+#conflicts{ "v-cloak" => "true", data: { conflicts_path: conflicts_namespace_project_merge_request_path(@merge_request.project.namespace, @merge_request.project, @merge_request, format: :json),
     resolve_conflicts_path: resolve_conflicts_namespace_project_merge_request_path(@merge_request.project.namespace, @merge_request.project, @merge_request) } }
-  .loading{"v-if" => "isLoading"}
+  .loading{ "v-if" => "isLoading" }
     %i.fa.fa-spinner.fa-spin
 
-  .nothing-here-block{"v-if" => "hasError"}
+  .nothing-here-block{ "v-if" => "hasError" }
     {{conflictsData.errorMessage}}
 
   = render partial: "projects/merge_requests/conflicts/commit_stats"
 
-  .files-wrapper{"v-if" => "!isLoading && !hasError"}
+  .files-wrapper{ "v-if" => "!isLoading && !hasError" }
     .files
-      .diff-file.file-holder.conflict{"v-for" => "file in conflictsData.files"}
-        .file-title
-          %i.fa.fa-fw{":class" => "file.iconClass"}
+      .diff-file.file-holder.conflict{ "v-for" => "file in conflictsData.files" }
+        .js-file-title.file-title
+          %i.fa.fa-fw{ ":class" => "file.iconClass" }
           %strong {{file.filePath}}
           = render partial: 'projects/merge_requests/conflicts/file_actions'
         .diff-content.diff-wrap-lines
-          .diff-wrap-lines.code.file-content.js-syntax-highlight{"v-show" => "!isParallel && file.resolveMode === 'interactive' && file.type === 'text'" }
+          .diff-wrap-lines.code.file-content.js-syntax-highlight{ "v-show" => "!isParallel && file.resolveMode === 'interactive' && file.type === 'text'" }
             = render partial: "projects/merge_requests/conflicts/components/inline_conflict_lines"
-          .diff-wrap-lines.code.file-content.js-syntax-highlight{"v-show" => "isParallel && file.resolveMode === 'interactive' && file.type === 'text'" }
-            = render partial: "projects/merge_requests/conflicts/components/parallel_conflict_lines"
-          %div{"v-show" => "file.resolveMode === 'edit' ||  file.type === 'text-editor'"}
+          .diff-wrap-lines.code.file-content.js-syntax-highlight{ "v-show" => "isParallel && file.resolveMode === 'interactive' && file.type === 'text'" }
+            %parallel-conflict-lines{ ":file" => "file" }
+          %div{ "v-show" => "file.resolveMode === 'edit' ||  file.type === 'text-editor'" }
             = render partial: "projects/merge_requests/conflicts/components/diff_file_editor"
 
     = render partial: "projects/merge_requests/conflicts/submit_form"
-
--# Components
-= render partial: 'projects/merge_requests/conflicts/components/parallel_conflict_line'
diff --git a/app/views/projects/merge_requests/conflicts/_commit_stats.html.haml b/app/views/projects/merge_requests/conflicts/_commit_stats.html.haml
index 5ab3cd96163..964dc40a213 100644
--- a/app/views/projects/merge_requests/conflicts/_commit_stats.html.haml
+++ b/app/views/projects/merge_requests/conflicts/_commit_stats.html.haml
@@ -1,9 +1,9 @@
-.content-block.oneline-block.files-changed{"v-if" => "!isLoading && !hasError"}
-  .inline-parallel-buttons{"v-if" => "showDiffViewTypeSwitcher"}
+.content-block.oneline-block.files-changed{ "v-if" => "!isLoading && !hasError" }
+  .inline-parallel-buttons{ "v-if" => "showDiffViewTypeSwitcher" }
     .btn-group
-      %button.btn{":class" => "{'active': !isParallel}", "@click" => "handleViewTypeChange('inline')"}
+      %button.btn{ ":class" => "{'active': !isParallel}", "@click" => "handleViewTypeChange('inline')" }
         Inline
-      %button.btn{":class" => "{'active': isParallel}", "@click" => "handleViewTypeChange('parallel')"}
+      %button.btn{ ":class" => "{'active': isParallel}", "@click" => "handleViewTypeChange('parallel')" }
         Side-by-side
 
   .js-toggle-container
diff --git a/app/views/projects/merge_requests/conflicts/_file_actions.html.haml b/app/views/projects/merge_requests/conflicts/_file_actions.html.haml
index 05af57acf03..0839880713f 100644
--- a/app/views/projects/merge_requests/conflicts/_file_actions.html.haml
+++ b/app/views/projects/merge_requests/conflicts/_file_actions.html.haml
@@ -1,5 +1,5 @@
 .file-actions
-  .btn-group{"v-if" => "file.type === 'text'"}
+  .btn-group{ "v-if" => "file.type === 'text'" }
     %button.btn{ ":class" => "{ 'active': file.resolveMode == 'interactive' }",
       '@click' => "onClickResolveModeButton(file, 'interactive')",
       type: 'button' }
@@ -8,5 +8,5 @@
       '@click' => "onClickResolveModeButton(file, 'edit')",
       type: 'button' }
       Edit inline
-  %a.btn.view-file.btn-file-option{":href" => "file.blobPath"}
+  %a.btn.view-file{ ":href" => "file.blobPath" }
     View file @{{conflictsData.shortCommitSha}}
diff --git a/app/views/projects/merge_requests/conflicts/_submit_form.html.haml b/app/views/projects/merge_requests/conflicts/_submit_form.html.haml
index 6ffaa9ad4d2..62c9748c510 100644
--- a/app/views/projects/merge_requests/conflicts/_submit_form.html.haml
+++ b/app/views/projects/merge_requests/conflicts/_submit_form.html.haml
@@ -10,7 +10,7 @@
     .col-sm-offset-2.col-sm-10
       .row
         .col-xs-6
-          %button{ type: "button", class: "btn btn-success js-submit-button", "@click" => "commit()", ":disabled" => "!readyToCommit" }
+          %button.btn.btn-success.js-submit-button{ type: "button", "@click" => "commit()", ":disabled" => "!readyToCommit" }
             %span {{commitButtonText}}
         .col-xs-6.text-right
           = link_to "Cancel", namespace_project_merge_request_path(@merge_request.project.namespace, @merge_request.project, @merge_request), class: "btn btn-cancel"
diff --git a/app/views/projects/merge_requests/conflicts/components/_diff_file_editor.html.haml b/app/views/projects/merge_requests/conflicts/components/_diff_file_editor.html.haml
index 3c927d362c2..aff3fb82fa6 100644
--- a/app/views/projects/merge_requests/conflicts/components/_diff_file_editor.html.haml
+++ b/app/views/projects/merge_requests/conflicts/components/_diff_file_editor.html.haml
@@ -1,4 +1,4 @@
-%diff-file-editor{"inline-template" => "true", ":file" => "file", ":on-cancel-discard-confirmation" => "cancelDiscardConfirmation", ":on-accept-discard-confirmation" => "acceptDiscardConfirmation"}
+%diff-file-editor{ "inline-template" => "true", ":file" => "file", ":on-cancel-discard-confirmation" => "cancelDiscardConfirmation", ":on-accept-discard-confirmation" => "acceptDiscardConfirmation" }
   .diff-editor-wrap{ "v-show" => "file.showEditor" }
     .discard-changes-alert-wrap{ "v-if" => "file.promptDiscardConfirmation" }
       .discard-changes-alert
diff --git a/app/views/projects/merge_requests/conflicts/components/_inline_conflict_lines.html.haml b/app/views/projects/merge_requests/conflicts/components/_inline_conflict_lines.html.haml
index f094df7fcaa..d828cb6cf9e 100644
--- a/app/views/projects/merge_requests/conflicts/components/_inline_conflict_lines.html.haml
+++ b/app/views/projects/merge_requests/conflicts/components/_inline_conflict_lines.html.haml
@@ -1,15 +1,14 @@
-%inline-conflict-lines{ "inline-template" => "true", ":file" => "file"}
+%inline-conflict-lines{ "inline-template" => "true", ":file" => "file" }
   %table
-    %tr.line_holder.diff-inline{"v-for" => "line in file.inlineLines"}
-      %td.diff-line-num.new_line{":class" => "lineCssClass(line)", "v-if" => "!line.isHeader"}
+    %tr.line_holder.diff-inline{ "v-for" => "line in file.inlineLines" }
+      %td.diff-line-num.new_line{ ":class" => "lineCssClass(line)", "v-if" => "!line.isHeader" }
         %a {{line.new_line}}
-      %td.diff-line-num.old_line{":class" => "lineCssClass(line)", "v-if" => "!line.isHeader"}
+      %td.diff-line-num.old_line{ ":class" => "lineCssClass(line)", "v-if" => "!line.isHeader" }
         %a {{line.old_line}}
-      %td.line_content{":class" => "lineCssClass(line)", "v-if" => "!line.isHeader"}
-        {{{line.richText}}}
-      %td.diff-line-num.header{":class" => "lineCssClass(line)", "v-if" => "line.isHeader"}
-      %td.diff-line-num.header{":class" => "lineCssClass(line)", "v-if" => "line.isHeader"}
-      %td.line_content.header{":class" => "lineCssClass(line)", "v-if" => "line.isHeader"}
-        %strong {{{line.richText}}}
+      %td.line_content{ ":class" => "lineCssClass(line)", "v-if" => "!line.isHeader", "v-html" => "line.richText" }
+      %td.diff-line-num.header{ ":class" => "lineCssClass(line)", "v-if" => "line.isHeader" }
+      %td.diff-line-num.header{ ":class" => "lineCssClass(line)", "v-if" => "line.isHeader" }
+      %td.line_content.header{ ":class" => "lineCssClass(line)", "v-if" => "line.isHeader" }
+        %strong{ "v-html" => "line.richText" }
         %button.btn{ "@click" => "handleSelected(file, line.id, line.section)" }
           {{line.buttonTitle}}
diff --git a/app/views/projects/merge_requests/conflicts/components/_parallel_conflict_line.html.haml b/app/views/projects/merge_requests/conflicts/components/_parallel_conflict_line.html.haml
deleted file mode 100644
index 5690bf7419c..00000000000
--- a/app/views/projects/merge_requests/conflicts/components/_parallel_conflict_line.html.haml
+++ /dev/null
@@ -1,10 +0,0 @@
-%script{"id" => 'parallel-conflict-line', "type" => "text/x-template"}
-  %td.diff-line-num.header{":class" => "lineCssClass(line)", "v-if" => "line.isHeader"}
-  %td.line_content.header{":class" => "lineCssClass(line)", "v-if" => "line.isHeader"}
-    %strong {{line.richText}}
-    %button.btn{"@click" => "handleSelected(file, line.id, line.section)"}
-      {{line.buttonTitle}}
-  %td.diff-line-num.old_line{":class" => "lineCssClass(line)", "v-if" => "!line.isHeader"}
-    {{line.lineNumber}}
-  %td.line_content.parallel{":class" => "lineCssClass(line)", "v-if" => "!line.isHeader"}
-    {{{line.richText}}}
diff --git a/app/views/projects/merge_requests/conflicts/components/_parallel_conflict_lines.html.haml b/app/views/projects/merge_requests/conflicts/components/_parallel_conflict_lines.html.haml
deleted file mode 100644
index a8ecdf59393..00000000000
--- a/app/views/projects/merge_requests/conflicts/components/_parallel_conflict_lines.html.haml
+++ /dev/null
@@ -1,4 +0,0 @@
-%parallel-conflict-lines{"inline-template" => "true", ":file" => "file"}
-  %table
-    %tr.line_holder.parallel{"v-for" => "section in file.parallelLines"}
-      %td{"is"=>"parallel-conflict-line", "v-for" => "line in section", ":line" => "line", ":file" => "file"}
diff --git a/app/views/projects/merge_requests/index.html.haml b/app/views/projects/merge_requests/index.html.haml
index 144b3a9c8c8..8a96c8dacf6 100644
--- a/app/views/projects/merge_requests/index.html.haml
+++ b/app/views/projects/merge_requests/index.html.haml
@@ -2,21 +2,21 @@
 - @bulk_edit = can?(current_user, :admin_merge_request, @project)
 
 - page_title "Merge Requests"
-= render "projects/issues/head"
 = render 'projects/last_push'
 
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('filtered_search')
+
 %div{ class: container_class }
   .top-area
     = render 'shared/issuable/nav', type: :merge_requests
     .nav-controls
-      = render 'shared/issuable/search_form', path: namespace_project_merge_requests_path(@project.namespace, @project)
-
       - merge_project = can?(current_user, :create_merge_request, @project) ? @project : (current_user && current_user.fork_of(@project))
       - if merge_project
         = link_to new_namespace_project_merge_request_path(merge_project.namespace, merge_project), class: "btn btn-new", title: "New Merge Request" do
           New Merge Request
 
-  = render 'shared/issuable/filter', type: :merge_requests
+  = render 'shared/issuable/search_bar', type: :merge_requests
 
   .merge-requests-holder
     = render 'merge_requests'
diff --git a/app/views/projects/merge_requests/merge.js.haml b/app/views/projects/merge_requests/merge.js.haml
index 84b6c9ebc5c..e632fc681cf 100644
--- a/app/views/projects/merge_requests/merge.js.haml
+++ b/app/views/projects/merge_requests/merge.js.haml
@@ -1,10 +1,11 @@
 - case @status
 - when :success
+  - remove_source_branch = params[:should_remove_source_branch] == '1' || @merge_request.remove_source_branch?
   :plain
-    merge_request_widget.mergeInProgress(#{params[:should_remove_source_branch] == '1'});
-- when :merge_when_build_succeeds
+    merge_request_widget.mergeInProgress(#{remove_source_branch});
+- when :merge_when_pipeline_succeeds
   :plain
-    $('.mr-widget-body').html("#{escape_javascript(render('projects/merge_requests/widget/open/merge_when_build_succeeds'))}");
+    $('.mr-widget-body').html("#{escape_javascript(render('projects/merge_requests/widget/open/merge_when_pipeline_succeeds'))}");
 - when :sha_mismatch
   :plain
     $('.mr-widget-body').html("#{escape_javascript(render('projects/merge_requests/widget/open/sha_mismatch'))}");
diff --git a/app/views/projects/merge_requests/show/_builds.html.haml b/app/views/projects/merge_requests/show/_builds.html.haml
deleted file mode 100644
index 808ef7fed27..00000000000
--- a/app/views/projects/merge_requests/show/_builds.html.haml
+++ /dev/null
@@ -1 +0,0 @@
-= render "projects/commit/pipeline", pipeline: @pipeline, link_to_commit: true
diff --git a/app/views/projects/merge_requests/show/_commits.html.haml b/app/views/projects/merge_requests/show/_commits.html.haml
index a0e12fb3f38..11793919ff7 100644
--- a/app/views/projects/merge_requests/show/_commits.html.haml
+++ b/app/views/projects/merge_requests/show/_commits.html.haml
@@ -1,6 +1,8 @@
-.content-block.oneline-block
-  = icon("sort-amount-desc")
-  Most recent commits displayed first
-
-%ol#commits-list.list-unstyled
-  = render "projects/commits/commits", project: @merge_request.source_project, ref: @merge_request.source_branch
+- if @commits.empty?
+  .commits-empty
+    %h4
+      There are no commits yet.
+    = custom_icon ('illustration_no_commits')
+- else
+  %ol#commits-list.list-unstyled
+    = render "projects/commits/commits", project: @merge_request.source_project, ref: @merge_request.source_branch
diff --git a/app/views/projects/merge_requests/show/_diffs.html.haml b/app/views/projects/merge_requests/show/_diffs.html.haml
index 99c71e1454a..7f0913ea516 100644
--- a/app/views/projects/merge_requests/show/_diffs.html.haml
+++ b/app/views/projects/merge_requests/show/_diffs.html.haml
@@ -1,13 +1,5 @@
-- if @merge_request_diff.collected?
+- if @merge_request_diff.collected? || @merge_request_diff.overflow?
   = render 'projects/merge_requests/show/versions'
-  = render "projects/diffs/diffs", diffs: @diffs
+  = render "projects/diffs/diffs", diffs: @diffs, environment: @environment
 - elsif @merge_request_diff.empty?
   .nothing-here-block Nothing to merge from #{@merge_request.source_branch} into #{@merge_request.target_branch}
-- else
-  .alert.alert-warning
-    %h4
-      Changes view for this comparison is extremely large.
-    %p
-      You can
-      = link_to "download it", merge_request_path(@merge_request, format: :diff), class: "vlink"
-      instead.
diff --git a/app/views/projects/merge_requests/show/_how_to_merge.html.haml b/app/views/projects/merge_requests/show/_how_to_merge.html.haml
index f1d5441f9dd..cde0ce08e14 100644
--- a/app/views/projects/merge_requests/show/_how_to_merge.html.haml
+++ b/app/views/projects/merge_requests/show/_how_to_merge.html.haml
@@ -1,14 +1,14 @@
-%div#modal_merge_info.modal
+#modal_merge_info.modal
   .modal-dialog
     .modal-content
       .modal-header
-        %a.close{href: "#", "data-dismiss" => "modal"} ×
+        %a.close{ href: "#", "data-dismiss" => "modal" } ×
         %h3 Check out, review, and merge locally
       .modal-body
         %p
           %strong Step 1.
           Fetch and check out the branch for this merge request
-        = clipboard_button(clipboard_target: "pre#merge-info-1")
+        = clipboard_button(clipboard_target: "pre#merge-info-1", title: "Copy commands to clipboard")
         %pre.dark#merge-info-1
           - if @merge_request.for_fork?
             :preserve
@@ -25,7 +25,7 @@
         %p
           %strong Step 3.
           Merge the branch and fix any conflicts that come up
-        = clipboard_button(clipboard_target: "pre#merge-info-3")
+        = clipboard_button(clipboard_target: "pre#merge-info-3", title: "Copy commands to clipboard")
         %pre.dark#merge-info-3
           - if @merge_request.for_fork?
             :preserve
@@ -38,7 +38,7 @@
         %p
           %strong Step 4.
           Push the result of the merge to GitLab
-        = clipboard_button(clipboard_target: "pre#merge-info-4")
+        = clipboard_button(clipboard_target: "pre#merge-info-4", title: "Copy commands to clipboard")
         %pre.dark#merge-info-4
           :preserve
             git push origin #{h @merge_request.target_branch}
@@ -49,7 +49,7 @@
           %strong Tip:
           = succeed '.' do
             You can also checkout merge requests locally by
-            = link_to 'following these guidelines', help_page_path('user/project/merge_requests.md', anchor: "checkout-merge-requests-locally"), target: '_blank'
+            = link_to 'following these guidelines', help_page_path('user/project/merge_requests.md', anchor: "checkout-merge-requests-locally"), target: '_blank', rel: 'noopener noreferrer'
 
 :javascript
   $(function(){
diff --git a/app/views/projects/merge_requests/show/_mr_box.html.haml b/app/views/projects/merge_requests/show/_mr_box.html.haml
index ed23d06ee5e..683cb8a5a27 100644
--- a/app/views/projects/merge_requests/show/_mr_box.html.haml
+++ b/app/views/projects/merge_requests/show/_mr_box.html.haml
@@ -4,7 +4,7 @@
 
   %div
     - if @merge_request.description.present?
-      .description{class: can?(current_user, :update_merge_request, @merge_request) ? 'js-task-list-container' : ''}
+      .description{ class: can?(current_user, :update_merge_request, @merge_request) ? 'js-task-list-container' : '' }
         .wiki
           = preserve do
             = markdown_field(@merge_request, :description)
diff --git a/app/views/projects/merge_requests/show/_pipelines.html.haml b/app/views/projects/merge_requests/show/_pipelines.html.haml
index afe3f3430c6..de4aa255bbd 100644
--- a/app/views/projects/merge_requests/show/_pipelines.html.haml
+++ b/app/views/projects/merge_requests/show/_pipelines.html.haml
@@ -1 +1,3 @@
-= render "projects/commit/pipelines_list", pipelines: @pipelines, link_to_commit: true
+- endpoint_path = local_assigns[:endpoint] || pipelines_namespace_project_merge_request_path(@project.namespace, @project, @merge_request, format: :json)
+
+= render 'projects/commit/pipelines_list', endpoint: endpoint_path
diff --git a/app/views/projects/merge_requests/show/_versions.html.haml b/app/views/projects/merge_requests/show/_versions.html.haml
index eab48b78cb3..74a7b1dc498 100644
--- a/app/views/projects/merge_requests/show/_versions.html.haml
+++ b/app/views/projects/merge_requests/show/_versions.html.haml
@@ -1,6 +1,6 @@
 - if @merge_request_diffs.size > 1
   .mr-version-controls
-    %div.mr-version-menus-container.content-block
+    .mr-version-menus-container.content-block
       Changes between
       %span.dropdown.inline.mr-version-dropdown
         %a.dropdown-toggle.btn.btn-default{ data: {toggle: :dropdown} }
@@ -13,21 +13,21 @@
         .dropdown-menu.dropdown-select.dropdown-menu-selectable
           .dropdown-title
             %span Version:
-            %button.dropdown-title-button.dropdown-menu-close{aria: {label: "Close"}}
+            %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
               = icon('times', class: 'dropdown-menu-close-icon')
           .dropdown-content
             %ul
               - @merge_request_diffs.each do |merge_request_diff|
                 %li
-                  = link_to merge_request_version_path(@project, @merge_request, merge_request_diff), class: ('is-active' if merge_request_diff == @merge_request_diff) do
+                  = link_to merge_request_version_path(@project, @merge_request, merge_request_diff, @start_sha), class: ('is-active' if merge_request_diff == @merge_request_diff) do
                     %strong
                       - if merge_request_diff.latest?
                         latest version
                       - else
                         version #{version_index(merge_request_diff)}
-                    .monospace #{short_sha(merge_request_diff.head_commit_sha)}
+                    .monospace= short_sha(merge_request_diff.head_commit_sha)
                     %small
-                      #{number_with_delimiter(merge_request_diff.commits.count)} #{'commit'.pluralize(merge_request_diff.commits.count)},
+                      #{number_with_delimiter(merge_request_diff.commits_count)} #{'commit'.pluralize(merge_request_diff.commits_count)},
                       = time_ago_with_tooltip(merge_request_diff.created_at)
 
       - if @merge_request_diff.base_commit_sha
@@ -43,7 +43,7 @@
           .dropdown-menu.dropdown-select.dropdown-menu-selectable
             .dropdown-title
               %span Compared with:
-              %button.dropdown-title-button.dropdown-menu-close{aria: {label: "Close"}}
+              %button.dropdown-title-button.dropdown-menu-close{ aria: { label: "Close" } }
                 = icon('times', class: 'dropdown-menu-close-icon')
             .dropdown-content
               %ul
@@ -55,14 +55,14 @@
                           latest version
                         - else
                           version #{version_index(merge_request_diff)}
-                      .monospace #{short_sha(merge_request_diff.head_commit_sha)}
+                      .monospace= short_sha(merge_request_diff.head_commit_sha)
                       %small
                         = time_ago_with_tooltip(merge_request_diff.created_at)
                 %li
                   = link_to merge_request_version_path(@project, @merge_request, @merge_request_diff), class: ('is-active' unless @start_sha) do
                     %strong
                       #{@merge_request.target_branch} (base)
-                    .monospace #{short_sha(@merge_request_diff.base_commit_sha)}
+                    .monospace= short_sha(@merge_request_diff.base_commit_sha)
 
     - if different_base?(@start_version, @merge_request_diff)
       .content-block
@@ -72,7 +72,7 @@
         = link_to namespace_project_compare_path(@project.namespace, @project, from: @start_version.base_commit_sha, to: @merge_request_diff.base_commit_sha) do
           new commits
         from
-        %code #{@merge_request.target_branch}
+        %code= @merge_request.target_branch
 
     - unless @merge_request_diff.latest? && !@start_sha
       .comments-disabled-notif.content-block
diff --git a/app/views/projects/merge_requests/widget/_closed.html.haml b/app/views/projects/merge_requests/widget/_closed.html.haml
index f3cc0e7e8a1..15f47ecf210 100644
--- a/app/views/projects/merge_requests/widget/_closed.html.haml
+++ b/app/views/projects/merge_requests/widget/_closed.html.haml
@@ -6,7 +6,7 @@
       - if @merge_request.closed_event
         by #{link_to_member(@project, @merge_request.closed_event.author, avatar: true)}
         #{time_ago_with_tooltip(@merge_request.closed_event.created_at)}
-    %p 
+    %p
       = succeed '.' do
         The changes were not merged into
         %span.label-branch= @merge_request.target_branch
diff --git a/app/views/projects/merge_requests/widget/_heading.html.haml b/app/views/projects/merge_requests/widget/_heading.html.haml
index a82c846baa7..1298376ac25 100644
--- a/app/views/projects/merge_requests/widget/_heading.html.haml
+++ b/app/views/projects/merge_requests/widget/_heading.html.haml
@@ -1,46 +1,48 @@
 - if @pipeline
   .mr-widget-heading
-    - %w[success success_with_warnings skipped canceled failed running pending].each do |status|
+    - %w[success success_with_warnings skipped manual canceled failed running pending].each do |status|
       .ci_widget{ class: "ci-#{status}", style: ("display:none" unless @pipeline.status == status) }
-        = ci_icon_for_status(status)
+        %div{ class: "ci-status-icon ci-status-icon-#{status}" }
+          = link_to namespace_project_pipeline_path(@pipeline.project.namespace, @pipeline.project, @pipeline.id), class: 'icon-link' do
+            = ci_icon_for_status(status)
         %span
           Pipeline
           = link_to "##{@pipeline.id}", namespace_project_pipeline_path(@pipeline.project.namespace, @pipeline.project, @pipeline.id), class: 'pipeline'
           = ci_label_for_status(status)
-        for
-        - commit = @merge_request.diff_head_commit
-        = succeed "." do
-          = link_to @pipeline.short_sha, namespace_project_commit_path(@merge_request.source_project.namespace, @merge_request.source_project, @pipeline.sha), class: "monospace"
+        - if @pipeline.stages.any?
+          .mr-widget-pipeline-graph
+            = render 'shared/mini_pipeline_graph', pipeline: @pipeline, klass: 'js-pipeline-inline-mr-widget-graph'
+        %span
+          for
+          = succeed "." do
+            = link_to @pipeline.short_sha, namespace_project_commit_path(@merge_request.source_project.namespace, @merge_request.source_project, @pipeline.sha), class: "monospace js-commit-link"
         %span.ci-coverage
-        = link_to "View details", pipelines_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), class: "js-show-tab", data: {action: 'pipelines'}
 
 - elsif @merge_request.has_ci?
-  - # Compatibility with old CI integrations (ex jenkins) when you request status from CI server via AJAX
-  - # Remove in later versions when services like Jenkins will set CI status via Commit status API
+  -# Compatibility with old CI integrations (ex jenkins) when you request status from CI server via AJAX
+  -# TODO, remove in later versions when services like Jenkins will set CI status via Commit status API
   .mr-widget-heading
     - %w[success skipped canceled failed running pending].each do |status|
-      .ci_widget{class: "ci-#{status}", style: "display:none"}
+      .ci_widget{ class: "ci-#{status} ci-status-icon-#{status}", style: "display:none" }
         = ci_icon_for_status(status)
         %span
-          CI build
+          CI job
           = ci_label_for_status(status)
-        for
+          for
         - commit = @merge_request.diff_head_commit
         = succeed "." do
           = link_to commit.short_id, namespace_project_commit_path(@merge_request.source_project.namespace, @merge_request.source_project, commit), class: "monospace"
         %span.ci-coverage
-        - if details_path = ci_build_details_path(@merge_request)
-          = link_to "View details", details_path, :"data-no-turbolink" => "data-no-turbolink"
 
     .ci_widget
       = icon("spinner spin")
       Checking CI status for #{@merge_request.diff_head_commit.short_id}&hellip;
 
-    .ci_widget.ci-not_found{style: "display:none"}
+    .ci_widget.ci-not_found{ style: "display:none" }
       = icon("times-circle")
       Could not find CI status for #{@merge_request.diff_head_commit.short_id}.
 
-    .ci_widget.ci-error{style: "display:none"}
+    .ci_widget.ci-error{ style: "display:none" }
       = icon("times-circle")
       Could not connect to the CI server. Please check your settings and try again.
 
diff --git a/app/views/projects/merge_requests/widget/_merged.html.haml b/app/views/projects/merge_requests/widget/_merged.html.haml
index 7794d6d7df2..adc3bbc37f3 100644
--- a/app/views/projects/merge_requests/widget/_merged.html.haml
+++ b/app/views/projects/merge_requests/widget/_merged.html.haml
@@ -7,28 +7,46 @@
         by #{link_to_member(@project, @merge_request.merge_event.author, avatar: true)}
         #{time_ago_with_tooltip(@merge_request.merge_event.created_at)}
     - if !@merge_request.source_branch_exists? || params[:deleted_source_branch]
-      %p
-        The changes were merged into
-        #{link_to @merge_request.target_branch, namespace_project_commits_path(@project.namespace, @project, @merge_request.target_branch), class: "label-branch"}.
-        The source branch has been removed.
+      .remove-message-pipes
+        %ul
+          %li
+            %span
+              The changes were merged into
+              #{link_to @merge_request.target_branch, namespace_project_commits_path(@project.namespace, @project, @merge_request.target_branch), class: "label-branch"}.
+          %li
+            %span
+              The source branch has been removed.
       = render 'projects/merge_requests/widget/merged_buttons'
     - elsif @merge_request.can_remove_source_branch?(current_user)
-      .remove_source_branch_widget
-        %p
-          The changes were merged into
-          #{link_to @merge_request.target_branch, namespace_project_commits_path(@project.namespace, @project, @merge_request.target_branch), class: "label-branch"}.
-          You can remove the source branch now.
+      .remove_source_branch_widget.remove-message-pipes
+        %ul
+          %li
+            %span
+              The changes were merged into
+              #{link_to @merge_request.target_branch, namespace_project_commits_path(@project.namespace, @project, @merge_request.target_branch), class: "label-branch"}.
+          %li
+            %span
+              You can remove the source branch now.
         = render 'projects/merge_requests/widget/merged_buttons', source_branch_exists: true
-      .remove_source_branch_widget.failed.hide
-        %p
-          Failed to remove source branch '#{@merge_request.source_branch}'.
-
-      .remove_source_branch_in_progress.hide
-        %p
-          = icon('spinner spin')
-          Removing source branch '#{@merge_request.source_branch}'. Please wait, this page will be automatically reloaded.
+      .remove_source_branch_widget.failed.remove-message-pipes.hide
+        %ul
+          %li
+            %span
+              Failed to remove source branch '#{@merge_request.source_branch}'.
+      .remove_source_branch_in_progress.remove-message-pipes.hide
+        %ul
+          %li
+            %span
+              = icon('spinner spin')
+              Removing source branch '#{@merge_request.source_branch}'.
+          %li
+            %span
+              Please wait, this page will be automatically reloaded.
     - else
-      %p
-        The changes were merged into
-        #{link_to @merge_request.target_branch, namespace_project_commits_path(@project.namespace, @project, @merge_request.target_branch), class: "label-branch"}.
-      = render 'projects/merge_requests/widget/merged_buttons'
+      .remove-message-pipes
+        %ul
+          %li
+            %span
+              The changes were merged into
+              #{link_to @merge_request.target_branch, namespace_project_commits_path(@project.namespace, @project, @merge_request.target_branch), class: "label-branch"}.
+        = render 'projects/merge_requests/widget/merged_buttons'
diff --git a/app/views/projects/merge_requests/widget/_merged_buttons.haml b/app/views/projects/merge_requests/widget/_merged_buttons.haml
index d836a253507..caf3bf54eef 100644
--- a/app/views/projects/merge_requests/widget/_merged_buttons.haml
+++ b/app/views/projects/merge_requests/widget/_merged_buttons.haml
@@ -5,10 +5,10 @@
 - if can_remove_source_branch || mr_can_be_reverted || mr_can_be_cherry_picked
   .clearfix.merged-buttons
     - if can_remove_source_branch
-      = link_to namespace_project_branch_path(@merge_request.source_project.namespace, @merge_request.source_project, @merge_request.source_branch), remote: true, method: :delete, class: "btn btn-default btn-sm remove_source_branch" do
+      = link_to namespace_project_branch_path(@merge_request.source_project.namespace, @merge_request.source_project, @merge_request.source_branch), remote: true, method: :delete, class: "btn btn-default remove_source_branch" do
         = icon('trash-o')
         Remove Source Branch
     - if mr_can_be_reverted
-      = revert_commit_link(@merge_request.merge_commit, namespace_project_merge_request_path(@project.namespace, @project, @merge_request), btn_class: 'sm')
+      = revert_commit_link(@merge_request.merge_commit, namespace_project_merge_request_path(@project.namespace, @project, @merge_request), btn_class: "close")
     - if mr_can_be_cherry_picked
-      = cherry_pick_commit_link(@merge_request.merge_commit, namespace_project_merge_request_path(@project.namespace, @project, @merge_request), btn_class: 'sm')
+      = cherry_pick_commit_link(@merge_request.merge_commit, namespace_project_merge_request_path(@project.namespace, @project, @merge_request), btn_class: "default")
diff --git a/app/views/projects/merge_requests/widget/_open.html.haml b/app/views/projects/merge_requests/widget/_open.html.haml
index 01314eb37d0..bc426f1dc0c 100644
--- a/app/views/projects/merge_requests/widget/_open.html.haml
+++ b/app/views/projects/merge_requests/widget/_open.html.haml
@@ -9,32 +9,39 @@
 
     - if @project.archived?
       = render 'projects/merge_requests/widget/open/archived'
-    - elsif @merge_request.commits.blank?
-      = render 'projects/merge_requests/widget/open/nothing'
     - elsif @merge_request.branch_missing?
       = render 'projects/merge_requests/widget/open/missing_branch'
+    - elsif @merge_request.has_no_commits?
+      = render 'projects/merge_requests/widget/open/nothing'
     - elsif @merge_request.unchecked?
       = render 'projects/merge_requests/widget/open/check'
     - elsif @merge_request.cannot_be_merged? && !resolved_conflicts
       = render 'projects/merge_requests/widget/open/conflicts'
     - elsif @merge_request.work_in_progress?
       = render 'projects/merge_requests/widget/open/wip'
-    - elsif @merge_request.merge_when_build_succeeds?
-      = render 'projects/merge_requests/widget/open/merge_when_build_succeeds'
+    - elsif @merge_request.merge_when_pipeline_succeeds?
+      = render 'projects/merge_requests/widget/open/merge_when_pipeline_succeeds'
     - elsif !@merge_request.can_be_merged_by?(current_user)
       = render 'projects/merge_requests/widget/open/not_allowed'
-    - elsif !@merge_request.mergeable_ci_state?
+    - elsif !@merge_request.mergeable_ci_state? && (@pipeline.failed? || @pipeline.canceled?)
       = render 'projects/merge_requests/widget/open/build_failed'
     - elsif !@merge_request.mergeable_discussions_state?
       = render 'projects/merge_requests/widget/open/unresolved_discussions'
+    - elsif @pipeline&.blocked?
+      = render 'projects/merge_requests/widget/open/manual'
     - elsif @merge_request.can_be_merged? || resolved_conflicts
       = render 'projects/merge_requests/widget/open/accept'
 
-  - if mr_closes_issues.present?
+  - if mr_closes_issues.present? || mr_issues_mentioned_but_not_closing.present?
     .mr-widget-footer
       %span
-        %i.fa.fa-check
-        Accepting this merge request will close #{"issue".pluralize(mr_closes_issues.size)}
-        = succeed '.' do
-          != markdown issues_sentence(mr_closes_issues), pipeline: :gfm, author: @merge_request.author
-        = mr_assign_issues_link
+        = icon('check')
+        - if mr_closes_issues.present?
+          Accepting this merge request will close #{"issue".pluralize(mr_closes_issues.size)}
+          = succeed '.' do
+            != markdown issues_sentence(mr_closes_issues), pipeline: :gfm, author: @merge_request.author
+          = mr_assign_issues_link
+        - if mr_issues_mentioned_but_not_closing.present?
+          #{"Issue".pluralize(mr_issues_mentioned_but_not_closing.size)}
+          != markdown issues_sentence(mr_issues_mentioned_but_not_closing), pipeline: :gfm, author: @merge_request.author
+          #{mr_issues_mentioned_but_not_closing.size > 1 ? 'are' : 'is'} mentioned but will not be closed.
diff --git a/app/views/projects/merge_requests/widget/_show.html.haml b/app/views/projects/merge_requests/widget/_show.html.haml
index 608fdf1c5f5..0b0fb7854c2 100644
--- a/app/views/projects/merge_requests/widget/_show.html.haml
+++ b/app/views/projects/merge_requests/widget/_show.html.haml
@@ -14,22 +14,24 @@
     ci_status_url: "#{ci_status_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)}",
     ci_environments_status_url: "#{ci_environments_status_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)}",
     gitlab_icon: "#{asset_path 'gitlab_logo.png'}",
-    ci_status: "#{@merge_request.pipeline ? @merge_request.pipeline.status : ''}",
+    ci_status: "#{@merge_request.head_pipeline ? @merge_request.head_pipeline.status : ''}",
     ci_message: {
-      normal: "Build {{status}} for \"{{title}}\"",
-      preparing: "{{status}} build for \"{{title}}\""
+      normal: "Pipeline {{status}} for \"{{title}}\"",
+      preparing: "{{status}} pipeline for \"{{title}}\""
     },
     ci_enable: #{@project.ci_service ? "true" : "false"},
     ci_title: {
-      preparing: "{{status}} build",
-      normal: "Build {{status}}"
+      preparing: "{{status}} pipeline",
+      normal: "Pipeline {{status}}"
     },
-    builds_path: "#{builds_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)}",
+    ci_sha: "#{@merge_request.head_pipeline ? @merge_request.head_pipeline.short_sha : ''}",
+    ci_pipeline: #{@merge_request.head_pipeline.try(:id).to_json},
+    commits_path: "#{project_commits_path(@project)}",
+    pipeline_path: "#{project_pipelines_path(@project)}",
     pipelines_path: "#{pipelines_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)}"
   };
 
   if (typeof merge_request_widget !== 'undefined') {
-    clearInterval(merge_request_widget.fetchBuildStatusInterval);
     merge_request_widget.cancelPolling();
     merge_request_widget.clearEventListeners();
   }
diff --git a/app/views/projects/merge_requests/widget/open/_accept.html.haml b/app/views/projects/merge_requests/widget/open/_accept.html.haml
index ce43ca3a286..e5ec151a61d 100644
--- a/app/views/projects/merge_requests/widget/open/_accept.html.haml
+++ b/app/views/projects/merge_requests/widget/open/_accept.html.haml
@@ -1,4 +1,5 @@
-- status_class = @pipeline ? " ci-#{@pipeline.status}" : nil
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('merge_request_widget')
 
 = form_for [:merge, @project.namespace.becomes(Namespace), @project, @merge_request], remote: true, method: :post, html: { class: 'accept-mr-form js-quick-submit js-requires-input' } do |f|
   = hidden_field_tag :authenticity_token, form_authenticity_token
@@ -8,58 +9,42 @@
       .accept-action
         - if @pipeline && @pipeline.active?
           %span.btn-group
-            = button_tag class: "btn btn-create js-merge-button merge_when_build_succeeds" do
-              Merge When Build Succeeds
-            - unless @project.only_allow_merge_if_build_succeeds?
-              = button_tag class: "btn btn-success dropdown-toggle", 'data-toggle' => 'dropdown' do
+            = button_tag class: "btn btn-info js-merge-when-pipeline-succeeds-button merge-when-pipeline-succeeds" do
+              Merge When Pipeline Succeeds
+            - unless @project.only_allow_merge_if_pipeline_succeeds?
+              = button_tag class: "btn btn-info dropdown-toggle", 'data-toggle' => 'dropdown' do
                 = icon('caret-down')
                 %span.sr-only
                   Select Merge Moment
               %ul.js-merge-dropdown.dropdown-menu.dropdown-menu-right{ role: 'menu' }
                 %li
-                  = link_to "#", class: "merge_when_build_succeeds" do
+                  = link_to "#", class: "merge_when_pipeline_succeeds" do
                     = icon('check fw')
-                    Merge When Build Succeeds
+                    Merge When Pipeline Succeeds
                 %li
-                  = link_to "#", class: "accept_merge_request" do
+                  = link_to "#", class: "accept-merge-request" do
                     = icon('warning fw')
                     Merge Immediately
         - else
-          = f.button class: "btn btn-create btn-grouped js-merge-button accept_merge_request #{status_class}" do
+          = f.button class: "btn btn-grouped js-merge-button accept-merge-request" do
             Accept Merge Request
       - if @merge_request.force_remove_source_branch?
         .accept-control
           The source branch will be removed.
       - elsif @merge_request.can_remove_source_branch?(current_user)
         .accept-control.checkbox
-          = label_tag :should_remove_source_branch, class: "remove_source_checkbox" do
+          = label_tag :should_remove_source_branch, class: "merge-param-checkbox" do
             = check_box_tag :should_remove_source_branch
             Remove source branch
-      .accept-control.right
-        = link_to "#", class: "modify-merge-commit-link js-toggle-button" do
+      .accept-control
+        %button.modify-merge-commit-link.js-toggle-button{ type: "button" }
           = icon('edit')
           Modify commit message
     .js-toggle-content.hide.prepend-top-default
       = render 'shared/commit_message_container', params: params,
+          message_with_description: @merge_request.merge_commit_message(include_description: true),
+          message_without_description: @merge_request.merge_commit_message,
           text: @merge_request.merge_commit_message,
           rows: 14, hint: true
 
-    = hidden_field_tag :merge_when_build_succeeds, "", autocomplete: "off"
-
-  :javascript
-    $('.accept-mr-form').on('ajax:send', function() {
-      $(".accept-mr-form :input").disable();
-    });
-
-    $('.accept_merge_request').on('click', function() {
-      $('.js-merge-button').html("<i class='fa fa-spinner fa-spin'></i> Merge in progress");
-    });
-
-    $('.merge_when_build_succeeds').on('click', function() {
-      $("#merge_when_build_succeeds").val("1");
-    });
-
-    $('.js-merge-dropdown a').on('click', function(e) {
-      e.preventDefault();
-      $(this).closest("form").submit();
-    });
+    = hidden_field_tag :merge_when_pipeline_succeeds, "", autocomplete: "off"
diff --git a/app/views/projects/merge_requests/widget/open/_archived.html.haml b/app/views/projects/merge_requests/widget/open/_archived.html.haml
index ab30fa6b243..0d61e56d8fb 100644
--- a/app/views/projects/merge_requests/widget/open/_archived.html.haml
+++ b/app/views/projects/merge_requests/widget/open/_archived.html.haml
@@ -1,4 +1,4 @@
-%h4 
+%h4
   Project is archived
 %p
   This merge request cannot be merged because archived projects cannot be written to.
diff --git a/app/views/projects/merge_requests/widget/open/_build_failed.html.haml b/app/views/projects/merge_requests/widget/open/_build_failed.html.haml
index 14f51af5360..3979d5fa8ed 100644
--- a/app/views/projects/merge_requests/widget/open/_build_failed.html.haml
+++ b/app/views/projects/merge_requests/widget/open/_build_failed.html.haml
@@ -1,6 +1,6 @@
 %h4
   = icon('exclamation-triangle')
-  The build for this merge request failed
+  The pipeline for this merge request failed
 
 %p
-  Please retry the build or push a new commit to fix the failure.
+  Please retry the job or push a new commit to fix the failure.
diff --git a/app/views/projects/merge_requests/widget/open/_check.html.haml b/app/views/projects/merge_requests/widget/open/_check.html.haml
index e16878ba513..909dc52fc06 100644
--- a/app/views/projects/merge_requests/widget/open/_check.html.haml
+++ b/app/views/projects/merge_requests/widget/open/_check.html.haml
@@ -1,9 +1,6 @@
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('merge_request_widget')
+
 %strong
   = icon("spinner spin")
   Checking ability to merge automatically&hellip;
-
-:javascript
-  $(function() {
-    merge_request_widget.getMergeStatus();
-  });
-
diff --git a/app/views/projects/merge_requests/widget/open/_conflicts.html.haml b/app/views/projects/merge_requests/widget/open/_conflicts.html.haml
index af3096f04d9..621ee313026 100644
--- a/app/views/projects/merge_requests/widget/open/_conflicts.html.haml
+++ b/app/views/projects/merge_requests/widget/open/_conflicts.html.haml
@@ -1,21 +1,27 @@
-%h4.has-conflicts
-  = icon("exclamation-triangle")
-  This merge request contains merge conflicts
+- can_resolve = @merge_request.conflicts_can_be_resolved_by?(current_user)
+- can_resolve_in_ui = @merge_request.conflicts_can_be_resolved_in_ui?
+- can_merge = @merge_request.can_be_merged_via_command_line_by?(current_user)
 
-%p
-  Please
-  - if @merge_request.conflicts_can_be_resolved_by?(current_user)
-    - if @merge_request.conflicts_can_be_resolved_in_ui?
-      = link_to "resolve these conflicts", conflicts_namespace_project_merge_request_path(@project.namespace, @project, @merge_request)
-    - else
-      %span.has-tooltip{title: "These conflicts cannot be resolved through GitLab"}
-        resolve these conflicts locally
-  - else
-    resolve these conflicts
+%h4.has-conflicts
+  %p
+    = icon("exclamation-triangle")
+    This merge request contains merge conflicts
 
-  or
+.remove-message-pipes
+  %ul
+    %li
+      %span
+        To merge this request, resolve these conflicts
+        - if can_resolve && !can_resolve_in_ui
+          locally
+        or
+        - unless can_merge
+          ask someone with write access to this repository to
+        merge it locally.
 
-  - if @merge_request.can_be_merged_via_command_line_by?(current_user)
-    #{link_to "merge this request manually", "#modal_merge_info", class: "how_to_merge_link vlink", "data-toggle" => "modal"}.
-  - else
-    ask someone with write access to this repository to merge this request manually.
+- if (can_resolve && can_resolve_in_ui) || can_merge
+  .merged-buttons.clearfix
+    - if can_resolve && can_resolve_in_ui
+      = link_to "Resolve conflicts", conflicts_namespace_project_merge_request_path(@project.namespace, @project, @merge_request), class: "btn"
+    - if can_merge
+      = link_to "Merge locally", "#modal_merge_info", class: "btn how_to_merge_link vlink", "data-toggle" => "modal"
diff --git a/app/views/projects/merge_requests/widget/open/_manual.html.haml b/app/views/projects/merge_requests/widget/open/_manual.html.haml
new file mode 100644
index 00000000000..9078b7e21dd
--- /dev/null
+++ b/app/views/projects/merge_requests/widget/open/_manual.html.haml
@@ -0,0 +1,4 @@
+%h4
+  Pipeline blocked
+%p
+  The pipeline for this merge request requires a manual action to proceed.
diff --git a/app/views/projects/merge_requests/widget/open/_merge_when_build_succeeds.html.haml b/app/views/projects/merge_requests/widget/open/_merge_when_build_succeeds.html.haml
deleted file mode 100644
index 2b6b5e05e86..00000000000
--- a/app/views/projects/merge_requests/widget/open/_merge_when_build_succeeds.html.haml
+++ /dev/null
@@ -1,25 +0,0 @@
-%h4
-  Set by #{link_to_member(@project, @merge_request.merge_user, avatar: true)}
-  to be merged automatically when the build succeeds.
-%div
-  %p
-    = succeed '.' do
-      The changes will be merged into
-      %span.label-branch= @merge_request.target_branch
-    - if @merge_request.remove_source_branch?
-      The source branch will be removed.
-    - else
-      The source branch will not be removed.
-
-  - remove_source_branch_button = !@merge_request.remove_source_branch? && @merge_request.can_remove_source_branch?(current_user) && @merge_request.merge_user == current_user
-  - user_can_cancel_automatic_merge = @merge_request.can_cancel_merge_when_build_succeeds?(current_user)
-  - if remove_source_branch_button || user_can_cancel_automatic_merge
-    .clearfix.prepend-top-10
-      - if remove_source_branch_button
-        = link_to merge_namespace_project_merge_request_path(@merge_request.target_project.namespace, @merge_request.target_project, @merge_request, merge_when_build_succeeds: true, should_remove_source_branch: true, sha: @merge_request.diff_head_sha), remote: true, method: :post, class: "btn btn-grouped btn-primary btn-sm remove_source_branch" do
-          = icon('times')
-          Remove Source Branch When Merged
-
-      - if user_can_cancel_automatic_merge
-        = link_to cancel_merge_when_build_succeeds_namespace_project_merge_request_path(@merge_request.target_project.namespace, @merge_request.target_project, @merge_request), remote: true, method: :post, class: "btn btn-grouped btn-warning btn-sm" do
-          Cancel Automatic Merge
diff --git a/app/views/projects/merge_requests/widget/open/_merge_when_pipeline_succeeds.html.haml b/app/views/projects/merge_requests/widget/open/_merge_when_pipeline_succeeds.html.haml
new file mode 100644
index 00000000000..5f347acce4d
--- /dev/null
+++ b/app/views/projects/merge_requests/widget/open/_merge_when_pipeline_succeeds.html.haml
@@ -0,0 +1,33 @@
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('merge_request_widget')
+
+%h4
+  Set by #{link_to_member(@project, @merge_request.merge_user, avatar: true)}
+  to be merged automatically when the pipeline succeeds.
+.remove-message-pipes
+  %ul
+    %li
+      %span
+        = succeed '.' do
+          The changes will be merged into #{link_to @merge_request.target_branch, namespace_project_commits_path(@project.namespace, @project, @merge_request.target_branch), class: "label-branch"}
+        - if @merge_request.remove_source_branch?
+          %li
+            %span
+              The source branch will be removed.
+        - else
+          %li
+            %span
+              The source branch will not be removed.
+
+  - remove_source_branch_button = !@merge_request.remove_source_branch? && @merge_request.can_remove_source_branch?(current_user) && @merge_request.merge_user == current_user
+  - user_can_cancel_automatic_merge = @merge_request.can_cancel_merge_when_pipeline_succeeds?(current_user)
+  - if remove_source_branch_button || user_can_cancel_automatic_merge
+    .clearfix.prepend-top-10
+      - if remove_source_branch_button
+        = link_to merge_namespace_project_merge_request_path(@merge_request.target_project.namespace, @merge_request.target_project, @merge_request, merge_params(@merge_request)), remote: true, method: :post, class: "btn btn-grouped btn-primary btn-sm remove_source_branch" do
+          = icon('times')
+          Remove Source Branch When Merged
+
+      - if user_can_cancel_automatic_merge
+        = link_to cancel_merge_when_pipeline_succeeds_namespace_project_merge_request_path(@merge_request.target_project.namespace, @merge_request.target_project, @merge_request), remote: true, method: :post, class: "btn btn-grouped btn-sm" do
+          Cancel Automatic Merge
diff --git a/app/views/projects/merge_requests/widget/open/_nothing.html.haml b/app/views/projects/merge_requests/widget/open/_nothing.html.haml
index 35626b624b7..7af8c01c134 100644
--- a/app/views/projects/merge_requests/widget/open/_nothing.html.haml
+++ b/app/views/projects/merge_requests/widget/open/_nothing.html.haml
@@ -1,4 +1,4 @@
-%h4 
+%h4
   = icon("exclamation-triangle")
   Nothing to merge from
   %span.label-branch= source_branch_with_namespace(@merge_request)
diff --git a/app/views/projects/merge_requests/widget/open/_unresolved_discussions.html.haml b/app/views/projects/merge_requests/widget/open/_unresolved_discussions.html.haml
index 35d5677ee37..ec9346ce89b 100644
--- a/app/views/projects/merge_requests/widget/open/_unresolved_discussions.html.haml
+++ b/app/views/projects/merge_requests/widget/open/_unresolved_discussions.html.haml
@@ -3,4 +3,8 @@
   This merge request has unresolved discussions
 
 %p
-  Please resolve these discussions to allow this merge request to be merged.
\ No newline at end of file
+  Please resolve these discussions
+  - if @project.issues_enabled? && can?(current_user, :create_issue, @project)
+    or
+    = link_to "open an issue to resolve them later", new_namespace_project_issue_path(@project.namespace, @project, merge_request_to_resolve_discussions_of: @merge_request.iid)
+  to allow this merge request to be merged.
diff --git a/app/views/projects/milestones/_form.html.haml b/app/views/projects/milestones/_form.html.haml
index cbf1ba04170..0f4a8508751 100644
--- a/app/views/projects/milestones/_form.html.haml
+++ b/app/views/projects/milestones/_form.html.haml
@@ -14,17 +14,12 @@
             = render 'projects/notes/hints'
           .clearfix
           .error-alert
-    .col-md-6
-      .form-group
-        = f.label :due_date, "Due Date", class: "control-label"
-        .col-sm-10
-          = f.text_field :due_date, class: "datepicker form-control", placeholder: "Select due date"
-          %a.inline.prepend-top-5.js-clear-due-date{ href: "#" } Clear due date
+    = render "shared/milestones/form_dates", f: f
 
   .form-actions
     - if @milestone.new_record?
       = f.submit 'Create milestone', class: "btn-create btn"
       = link_to "Cancel", namespace_project_milestones_path(@project.namespace, @project), class: "btn btn-cancel"
-    -else
+    - else
       = f.submit 'Save changes', class: "btn-save btn"
       = link_to "Cancel", namespace_project_milestone_path(@project.namespace, @project, @milestone), class: "btn btn-cancel"
diff --git a/app/views/projects/milestones/edit.html.haml b/app/views/projects/milestones/edit.html.haml
index 11f41e75e63..55b0b837c6d 100644
--- a/app/views/projects/milestones/edit.html.haml
+++ b/app/views/projects/milestones/edit.html.haml
@@ -5,7 +5,7 @@
 %div{ class: container_class }
 
   %h3.page-title
-    Edit Milestone ##{@milestone.iid}
+    Edit Milestone #{@milestone.to_reference}
 
   %hr
 
diff --git a/app/views/projects/milestones/index.html.haml b/app/views/projects/milestones/index.html.haml
index ad2bfbec915..b6340a00b29 100644
--- a/app/views/projects/milestones/index.html.haml
+++ b/app/views/projects/milestones/index.html.haml
@@ -1,14 +1,15 @@
 - @no_container = true
-- page_title "Milestones"
-= render "projects/issues/head"
+- page_title 'Milestones'
+= render 'projects/issues/head'
 
 %div{ class: container_class }
   .top-area
-    = render 'shared/milestones_filter'
+    = render 'shared/milestones_filter', counts: milestone_counts(@project.milestones)
 
     .nav-controls
+      = render 'shared/milestones_sort_dropdown'
       - if can?(current_user, :admin_milestone, @project)
-        = link_to new_namespace_project_milestone_path(@project.namespace, @project), class: "btn btn-new", title: "New Milestone" do
+        = link_to new_namespace_project_milestone_path(@project.namespace, @project), class: 'btn btn-new', title: 'New Milestone' do
           New Milestone
 
   .milestones
@@ -19,4 +20,4 @@
         %li
           .nothing-here-block No milestones to show
 
-    = paginate @milestones, theme: "gitlab"
+    = paginate @milestones, theme: 'gitlab'
diff --git a/app/views/projects/milestones/show.html.haml b/app/views/projects/milestones/show.html.haml
index f9ba77e87b5..f612b5c7d6b 100644
--- a/app/views/projects/milestones/show.html.haml
+++ b/app/views/projects/milestones/show.html.haml
@@ -3,22 +3,27 @@
 - page_description @milestone.description
 = render "projects/issues/head"
 
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('simulate_drag') if Rails.env.test?
+
 %div{ class: container_class }
-  .detail-page-header
+  .detail-page-header.milestone-page-header
     .status-box{ class: status_box_class(@milestone) }
       - if @milestone.closed?
         Closed
       - elsif @milestone.expired?
         Past due
+      - elsif @milestone.upcoming?
+        Upcoming
       - else
         Open
-    %span.identifier
-      Milestone ##{@milestone.iid}
-    - if @milestone.expires_at
-      %span.creator
-        &middot;
-        = @milestone.expires_at
-    .pull-right
+    .header-text-content
+      %span.identifier
+        %strong
+          Milestone #{@milestone.to_reference}
+      - if @milestone.due_date || @milestone.start_date
+        = milestone_date_range(@milestone)
+    .milestone-buttons
       - if can?(current_user, :admin_milestone, @project)
         - if @milestone.active?
           = link_to 'Close Milestone', namespace_project_milestone_path(@project.namespace, @project, @milestone, milestone: {state_event: :close }), method: :put, class: "btn btn-close btn-nr btn-grouped"
@@ -31,6 +36,9 @@
         = link_to namespace_project_milestone_path(@project.namespace, @project, @milestone), data: { confirm: 'Are you sure?' }, method: :delete, class: "btn btn-grouped btn-danger" do
           Delete
 
+      %a.btn.btn-default.btn-grouped.pull-right.visible-xs-block.js-sidebar-toggle{ href: "#" }
+        = icon('angle-double-left')
+
   .detail-page-description.milestone-detail{ class: ('hide-bottom-border' unless @milestone.description.present? ) }
     %h2.title
       = markdown_field(@milestone, :title)
@@ -41,12 +49,12 @@
             = preserve do
               = markdown_field(@milestone, :description)
 
-  - if @milestone.total_items_count(current_user).zero?
+  - if can?(current_user, :read_issue, @project) && @milestone.total_items_count(current_user).zero?
     .alert.alert-success.prepend-top-default
       %span Assign some issues to this milestone.
   - elsif @milestone.complete?(current_user) && @milestone.active?
     .alert.alert-success.prepend-top-default
       %span All issues for this milestone are closed. You may close this milestone now.
 
-  = render 'shared/milestones/summary', milestone: @milestone, project: @project
   = render 'shared/milestones/tabs', milestone: @milestone
+  = render 'shared/milestones/sidebar', milestone: @milestone, project: @project, affix_offset: 153
diff --git a/app/views/projects/network/show.html.haml b/app/views/projects/network/show.html.haml
index 29df1bab04e..ed6077f6c6b 100644
--- a/app/views/projects/network/show.html.haml
+++ b/app/views/projects/network/show.html.haml
@@ -1,7 +1,6 @@
-- page_title "Network", @ref
+- page_title "Graph", @ref
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_tag('lib/raphael.js')
-  = page_specific_javascript_tag('network/network_bundle.js')
+  = page_specific_javascript_bundle_tag('network')
 = render "projects/commits/head"
 = render "head"
 %div{ class: container_class }
@@ -17,5 +16,6 @@
               = check_box_tag :filter_ref, 1, @options[:filter_ref]
               %span Begin with the selected commit
 
-    .network-graph{ data: { url: @url, commit_url: @commit_url, ref: @ref, commit_id: @commit.id } }
-      = spinner nil, true
+    - if @commit
+      .network-graph{ data: { url: @url, commit_url: @commit_url, ref: @ref, commit_id: @commit.id } }
+        = spinner nil, true
diff --git a/app/views/projects/new.html.haml b/app/views/projects/new.html.haml
index 932603f03b0..09ac1fd6794 100644
--- a/app/views/projects/new.html.haml
+++ b/app/views/projects/new.html.haml
@@ -1,5 +1,6 @@
 - page_title    'New Project'
 - header_title  "Projects", dashboard_projects_path
+- visibility_level = params.dig(:project, :visibility_level) || default_project_visibility
 
 .project-edit-container
   .project-edit-errors
@@ -12,7 +13,7 @@
         Create or Import your project from popular Git services
     .col-lg-9
       = form_for @project, html: { class: 'new_project' } do |f|
-        %fieldset.append-bottom-0
+        .row
           .form-group.col-xs-12.col-sm-6
             = f.label :namespace_id, class: 'label-light' do
               %span
@@ -22,7 +23,7 @@
                 - if current_user.can_select_namespace?
                   .input-group-addon
                     = root_url
-                  = f.select :namespace_id, namespaces_options(params[:namespace_id] || :current_user, display_path: true), {}, {class: 'select2 js-select-namespace', tabindex: 1}
+                  = f.select :namespace_id, namespaces_options(namespace_id_from(params) || :current_user, display_path: true, extra_group: namespace_id_from(params)), {}, { class: 'select2 js-select-namespace', tabindex: 1}
 
                 - else
                   .input-group-addon.static-namespace
@@ -50,7 +51,7 @@
                       = icon('github', text: 'GitHub')
                 %div
                   - if bitbucket_import_enabled?
-                    = link_to status_import_bitbucket_path, class: "btn import_bitbucket #{'how_to_import_link' unless bitbucket_import_configured?}", "data-no-turbolink" => "true" do
+                    = link_to status_import_bitbucket_path, class: "btn import_bitbucket #{'how_to_import_link' unless bitbucket_import_configured?}" do
                       = icon('bitbucket', text: 'Bitbucket')
                     - unless bitbucket_import_configured?
                       = render 'bitbucket_import_modal'
@@ -69,10 +70,15 @@
                     = link_to new_import_fogbugz_path, class: 'btn import_fogbugz' do
                       = icon('bug', text: 'Fogbugz')
                 %div
+                  - if gitea_import_enabled?
+                    = link_to new_import_gitea_url, class: 'btn import_gitea' do
+                      = custom_icon('go_logo')
+                      Gitea
+                %div
                   - if git_import_enabled?
-                    = link_to "#", class: 'btn js-toggle-button import_git' do
+                    %button.btn.js-toggle-button.import_git{ type: "button" }
                       = icon('git', text: 'Repo by URL')
-                %div{ class: 'import_gitlab_project' }
+                .import_gitlab_project
                   - if gitlab_project_import_enabled?
                     = link_to new_import_gitlab_project_path, class: 'btn btn_import_gitlab_project project-submit' do
                       = icon('gitlab', text: 'GitLab export')
@@ -89,8 +95,8 @@
         .form-group.project-visibility-level-holder
           = f.label :visibility_level, class: 'label-light' do
             Visibility Level
-            = link_to "(?)", help_page_path("public_access/public_access")
-          = render('shared/visibility_radios', model_method: :visibility_level, form: f, selected_level: @project.visibility_level, form_model: @project)
+            = link_to icon('question-circle'), help_page_path("public_access/public_access")
+          = render 'shared/visibility_level', f: f, visibility_level: visibility_level.to_i, can_change_visibility_level: true, form_model: @project, with_label: false
 
         = f.submit 'Create project', class: "btn btn-create project-submit", tabindex: 4
         = link_to 'Cancel', dashboard_projects_path, class: 'btn btn-cancel'
diff --git a/app/views/projects/notes/_edit_form.html.haml b/app/views/projects/notes/_edit_form.html.haml
index 8620f492282..e8e450742b5 100644
--- a/app/views/projects/notes/_edit_form.html.haml
+++ b/app/views/projects/notes/_edit_form.html.haml
@@ -1,11 +1,14 @@
 .note-edit-form
-  = form_for note, url: namespace_project_note_path(@project.namespace, @project, note), method: :put, remote: true, authenticity_token: true, html: { class: 'edit-note common-note-form js-quick-submit' } do |f|
-    = note_target_fields(note)
-    = render layout: 'projects/md_preview', locals: { preview_class: 'md-preview' } do
-      = render 'projects/zen', f: f, attr: :note, classes: 'note-textarea js-note-text js-task-list-field', placeholder: "Write a comment or drag your files here..."
+  = form_tag '#', method: :put, class: 'edit-note common-note-form js-quick-submit' do
+    = hidden_field_tag :target_id, '', class: 'js-form-target-id'
+    = hidden_field_tag :target_type, '', class: 'js-form-target-type'
+    = render layout: 'projects/md_preview', locals: { preview_class: 'md-preview', referenced_users: true } do
+      = render 'projects/zen', attr: 'note[note]', classes: 'note-textarea js-note-text js-task-list-field', placeholder: "Write a comment or drag your files here..."
       = render 'projects/notes/hints'
 
     .note-form-actions.clearfix
-      = f.submit 'Save Comment', class: 'btn btn-nr btn-save js-comment-button'
+      .settings-message.note-edit-warning.js-edit-warning
+        Finish editing this message first!
+      = submit_tag 'Save Comment', class: 'btn btn-nr btn-save js-comment-button'
       %button.btn.btn-nr.btn-cancel.note-edit-cancel{ type: 'button' }
         Cancel
diff --git a/app/views/projects/notes/_form.html.haml b/app/views/projects/notes/_form.html.haml
index 46b402545cd..b561052e721 100644
--- a/app/views/projects/notes/_form.html.haml
+++ b/app/views/projects/notes/_form.html.haml
@@ -3,6 +3,7 @@
 = form_for [@project.namespace.becomes(Namespace), @project, @note], remote: true, html: { :'data-type' => 'json', multipart: true, id: nil, class: "new-note js-new-note-form js-quick-submit common-note-form", "data-noteable-iid" => @note.noteable.try(:iid), }, authenticity_token: true do |f|
   = hidden_field_tag :view, diff_view
   = hidden_field_tag :line_type
+  = hidden_field_tag :merge_request_diff_head_sha, @note.noteable.try(:diff_head_sha)
   = note_target_fields(@note)
   = f.hidden_field :commit_id
   = f.hidden_field :line_code
@@ -23,5 +24,5 @@
   .note-form-actions.clearfix
     = f.submit 'Comment', class: "btn btn-nr btn-create append-right-10 comment-btn js-comment-button"
     = yield(:note_actions)
-    %a.btn.btn-cancel.js-note-discard{role: "button", data: {cancel_text: "Cancel"}}
+    %a.btn.btn-cancel.js-note-discard{ role: "button", data: {cancel_text: "Cancel" } }
       Discard draft
diff --git a/app/views/projects/notes/_hints.html.haml b/app/views/projects/notes/_hints.html.haml
index 6c14f48d41b..81d97eabe65 100644
--- a/app/views/projects/notes/_hints.html.haml
+++ b/app/views/projects/notes/_hints.html.haml
@@ -1,7 +1,6 @@
 - supports_slash_commands = local_assigns.fetch(:supports_slash_commands, false)
 .comment-toolbar.clearfix
   .toolbar-text
-    Styling with
     = link_to 'Markdown', help_page_path('user/markdown'), target: '_blank', tabindex: -1
     - if supports_slash_commands
       and
diff --git a/app/views/projects/notes/_note.html.haml b/app/views/projects/notes/_note.html.haml
index ab719e38904..6c0e6d48d6c 100644
--- a/app/views/projects/notes/_note.html.haml
+++ b/app/views/projects/notes/_note.html.haml
@@ -2,50 +2,58 @@
 - return if note.cross_reference_not_visible_for?(current_user)
 
 - note_editable = note_editable?(note)
-%li.timeline-entry{ id: dom_id(note), class: ["note", "note-row-#{note.id}", ('system-note' if note.system)], data: {author_id: note.author.id, editable: note_editable} }
+%li.timeline-entry{ id: dom_id(note), class: ["note", "note-row-#{note.id}", ('system-note' if note.system)], data: {author_id: note.author.id, editable: note_editable, note_id: note.id} }
   .timeline-entry-inner
     .timeline-icon
-      %a{href: user_path(note.author)}
+      %a{ href: user_path(note.author) }
         = image_tag avatar_icon(note.author), alt: '', class: 'avatar s40'
     .timeline-content
       .note-header
-        = link_to_member(note.project, note.author, avatar: false)
-        .inline.note-headline-light
+        %a.visible-xs{ href: user_path(note.author) }
           = note.author.to_reference
+        = link_to_member(note.project, note.author, avatar: false, extra_class: 'hidden-xs')
+        .note-headline-light
+          %span.hidden-xs
+            = note.author.to_reference
           - unless note.system
             commented
+          - if note.system
+            %span.system-note-message
+              = note.redacted_note_html
           %a{ href: "##{dom_id(note)}" }
             = time_ago_with_tooltip(note.created_at, placement: 'bottom', html_class: 'note-created-ago')
         - unless note.system?
           .note-actions
             - access = note_max_access_for_user(note)
             - if access
-              %span.note-role.hidden-xs= access
+              %span.note-role= access
 
             - if note.resolvable?
               - can_resolve = can?(current_user, :resolve_note, note)
-              %resolve-btn{ "project-path" => "#{project_path(note.project)}",
-                  "discussion-id" => "#{note.discussion_id}",
+              %resolve-btn{ "project-path" => project_path(note.project),
+                  "discussion-id" => note.discussion_id,
                   ":note-id" => note.id,
                   ":resolved" => note.resolved?,
                   ":can-resolve" => can_resolve,
-                  "resolved-by" => "#{note.resolved_by.try(:name)}",
+                  ":author-name" => "'#{j(note.author.name)}'",
+                  "author-avatar" => note.author.avatar_url,
+                  ":note-truncated" => "'#{j(truncate(note.note, length: 17))}'",
+                  ":resolved-by" => "'#{j(note.resolved_by.try(:name))}'",
                   "v-show" => "#{can_resolve || note.resolved?}",
                   "inline-template" => true,
-                  "v-ref:note_#{note.id}" => true }
+                  "ref" => "note_#{note.id}" }
 
-                .note-action-button
+                %button.note-action-button.line-resolve-btn{ type: "button",
+                    class: ("is-disabled" unless can_resolve),
+                    ":class" => "{ 'is-active': isResolved }",
+                    ":aria-label" => "buttonText",
+                    "@click" => "resolve",
+                    ":title" => "buttonText",
+                    "v-show" => "!loading",
+                    ":ref" => "'button'" }
                   = icon("spin spinner", "v-show" => "loading")
-                  %button.line-resolve-btn{ type: "button",
-                      class: ("is-disabled" unless can_resolve),
-                      ":class" => "{ 'is-active': isResolved }",
-                      ":aria-label" => "buttonText",
-                      "@click" => "resolve",
-                      ":title" => "buttonText",
-                      "v-show" => "!loading",
-                      "v-el:button" => true }
 
-                    = render "shared/icons/icon_status_success.svg"
+                  = render "shared/icons/icon_status_success.svg"
 
             - if current_user
               - if note.emoji_awardable?
@@ -56,18 +64,23 @@
               - if note_editable
                 = link_to '#', title: 'Edit comment', class: 'note-action-button js-note-edit' do
                   = icon('pencil', class: 'link-highlight')
-                = link_to namespace_project_note_path(note.project.namespace, note.project, note), title: 'Remove comment', method: :delete, data: { confirm: 'Are you sure you want to remove this comment?' }, remote: true, class: 'note-action-button hidden-xs js-note-delete danger' do
+                = link_to namespace_project_note_path(note.project.namespace, note.project, note), title: 'Remove comment', method: :delete, data: { confirm: 'Are you sure you want to remove this comment?' }, remote: true, class: 'note-action-button js-note-delete danger' do
                   = icon('trash-o', class: 'danger-highlight')
-      .note-body{class: note_editable ? 'js-task-list-container' : ''}
+      .note-body{ class: note_editable ? 'js-task-list-container' : '' }
         .note-text.md
           = preserve do
             = note.redacted_note_html
-          = edited_time_ago_with_tooltip(note, placement: 'bottom', html_class: 'note_edited_ago', include_author: true)
+        = edited_time_ago_with_tooltip(note, placement: 'bottom', html_class: 'note_edited_ago', include_author: true)
         - if note_editable
-          = render 'projects/notes/edit_form', note: note
+          .original-note-content.hidden{ data: { post_url: namespace_project_note_path(@project.namespace, @project, note), target_id: note.noteable.id, target_type: note.noteable.class.name.underscore } }
+            #{note.note}
+          %textarea.hidden.js-task-list-field.original-task-list{ data: {update_url: namespace_project_note_path(@project.namespace, @project, note) } }= note.note
         .note-awards
           = render 'award_emoji/awards_block', awardable: note, inline: false
-
+        - if note.system
+          .system-note-commit-list-toggler
+            Toggle commit list
+            %i.fa.fa-angle-down
       - if note.attachment.url
         .note-attachment
           - if note.attachment.image?
diff --git a/app/views/projects/notes/_notes_with_form.html.haml b/app/views/projects/notes/_notes_with_form.html.haml
index 00b62a595ff..90a150aa74c 100644
--- a/app/views/projects/notes/_notes_with_form.html.haml
+++ b/app/views/projects/notes/_notes_with_form.html.haml
@@ -1,5 +1,8 @@
 %ul#notes-list.notes.main-notes-list.timeline
   = render "projects/notes/notes"
+
+= render 'projects/notes/edit_form'
+
 %ul.notes.notes-form.timeline
   %li.timeline-entry
     .flash-container.timeline-content
@@ -10,7 +13,7 @@
           = image_tag avatar_icon(current_user), alt: current_user.to_reference, class: 'avatar s40'
       .timeline-content.timeline-content-form
         = render "projects/notes/form", view: diff_view
-    - else
+    - elsif !current_user
       .disabled-comment.text-center
         .disabled-comment-text.inline
           Please
@@ -20,4 +23,4 @@
           to post a comment
 
 :javascript
-  var notes = new Notes("#{namespace_project_notes_path(namespace_id: @project.namespace, target_id: @noteable.id, target_type: @noteable.class.name.underscore)}", #{@notes.map(&:id).to_json}, #{Time.now.to_i}, "#{diff_view}")
+  var notes = new Notes("#{namespace_project_noteable_notes_path(namespace_id: @project.namespace, project_id: @project, target_id: @noteable.id, target_type: @noteable.class.name.underscore)}", #{@notes.map(&:id).to_json}, #{Time.now.to_i}, "#{diff_view}")
diff --git a/app/views/projects/pages/_access.html.haml b/app/views/projects/pages/_access.html.haml
new file mode 100644
index 00000000000..82e20eeebb3
--- /dev/null
+++ b/app/views/projects/pages/_access.html.haml
@@ -0,0 +1,13 @@
+- if @project.pages_deployed?
+  .panel.panel-default
+    .panel-heading
+      Access pages
+    .panel-body
+      %p
+        %strong
+          Congratulations! Your pages are served under:
+
+      %p= link_to @project.pages_url, @project.pages_url
+
+      - @project.pages_domains.each do |domain|
+        %p= link_to domain.url, domain.url
diff --git a/app/views/projects/pages/_destroy.haml b/app/views/projects/pages/_destroy.haml
new file mode 100644
index 00000000000..42d9ef5ccba
--- /dev/null
+++ b/app/views/projects/pages/_destroy.haml
@@ -0,0 +1,12 @@
+- if @project.pages_deployed?
+  - if can?(current_user, :remove_pages, @project)
+    .panel.panel-default.panel.panel-danger
+      .panel-heading Remove pages
+      .errors-holder
+      .panel-body
+        %p
+          Removing the pages will prevent from exposing them to outside world.
+        .form-actions
+          = link_to 'Remove pages', namespace_project_pages_path(@project.namespace, @project), data: { confirm: 'Are you sure?'}, method: :delete, class: "btn btn-remove"
+  - else
+    .nothing-here-block Only the project owner can remove pages
diff --git a/app/views/projects/pages/_disabled.html.haml b/app/views/projects/pages/_disabled.html.haml
new file mode 100644
index 00000000000..ad51fbc6cab
--- /dev/null
+++ b/app/views/projects/pages/_disabled.html.haml
@@ -0,0 +1,4 @@
+.panel.panel-default
+  .nothing-here-block
+    GitLab Pages are disabled.
+    Ask your system's administrator to enable it.
diff --git a/app/views/projects/pages/_list.html.haml b/app/views/projects/pages/_list.html.haml
new file mode 100644
index 00000000000..4f2dd1a1398
--- /dev/null
+++ b/app/views/projects/pages/_list.html.haml
@@ -0,0 +1,17 @@
+- if can?(current_user, :update_pages, @project) && @domains.any?
+  .panel.panel-default
+    .panel-heading
+      Domains (#{@domains.count})
+    %ul.well-list
+      - @domains.each do |domain|
+        %li
+          .pull-right
+            = link_to 'Details', namespace_project_pages_domain_path(@project.namespace, @project, domain), class: "btn btn-sm btn-grouped"
+            = link_to 'Remove', namespace_project_pages_domain_path(@project.namespace, @project, domain), data: { confirm: 'Are you sure?'}, method: :delete, class: "btn btn-remove btn-sm btn-grouped"
+          .clearfix
+            %span= link_to domain.domain, domain.url
+          %p
+            - if domain.subject
+              %span.label.label-gray Certificate: #{domain.subject}
+            - if domain.expired?
+              %span.label.label-danger Expired
diff --git a/app/views/projects/pages/_no_domains.html.haml b/app/views/projects/pages/_no_domains.html.haml
new file mode 100644
index 00000000000..7cea5f3e70b
--- /dev/null
+++ b/app/views/projects/pages/_no_domains.html.haml
@@ -0,0 +1,7 @@
+- if can?(current_user, :update_pages, @project)
+  .panel.panel-default
+    .panel-heading
+      Domains
+    .nothing-here-block
+      Support for domains and certificates is disabled.
+      Ask your system's administrator to enable it.
diff --git a/app/views/projects/pages/_use.html.haml b/app/views/projects/pages/_use.html.haml
new file mode 100644
index 00000000000..e442e6e9a09
--- /dev/null
+++ b/app/views/projects/pages/_use.html.haml
@@ -0,0 +1,10 @@
+- unless @project.pages_deployed?
+  .panel.panel-info
+    .panel-heading
+      Configure pages
+    .panel-body
+      %p
+        Learn how to upload your static site and have it served by
+        GitLab by following the
+        = succeed '.' do
+          = link_to 'documentation on GitLab Pages', help_page_path('user/project/pages/index.md'), target: '_blank'
diff --git a/app/views/projects/pages/show.html.haml b/app/views/projects/pages/show.html.haml
new file mode 100644
index 00000000000..259d5bd63d6
--- /dev/null
+++ b/app/views/projects/pages/show.html.haml
@@ -0,0 +1,28 @@
+- page_title 'Pages'
+= render "projects/settings/head"
+
+%h3.page_title
+  Pages
+
+  - if can?(current_user, :update_pages, @project) && (Gitlab.config.pages.external_http || Gitlab.config.pages.external_https)
+    = link_to new_namespace_project_pages_domain_path(@project.namespace, @project), class: 'btn btn-new pull-right', title: 'New Domain' do
+      %i.fa.fa-plus
+      New Domain
+
+%p.light
+  With GitLab Pages you can host your static websites on GitLab.
+  Combined with the power of GitLab CI and the help of GitLab Runner
+  you can deploy static pages for your individual projects, your user or your group.
+
+%hr.clearfix
+
+- if Gitlab.config.pages.enabled
+  = render 'access'
+  = render 'use'
+  - if Gitlab.config.pages.external_http || Gitlab.config.pages.external_https
+    = render 'list'
+  - else
+    = render 'no_domains'
+  = render 'destroy'
+- else
+  = render 'disabled'
diff --git a/app/views/projects/pages_domains/_form.html.haml b/app/views/projects/pages_domains/_form.html.haml
new file mode 100644
index 00000000000..ca1b41b140a
--- /dev/null
+++ b/app/views/projects/pages_domains/_form.html.haml
@@ -0,0 +1,34 @@
+= form_for [@project.namespace.becomes(Namespace), @project, @domain], html: { class: 'form-horizontal fieldset-form' } do |f|
+  - if @domain.errors.any?
+    #error_explanation
+      .alert.alert-danger
+        - @domain.errors.full_messages.each do |msg|
+          %p= msg
+
+  .form-group
+    = f.label :domain, class: 'control-label' do
+      Domain
+    .col-sm-10
+      = f.text_field :domain, required: true, autocomplete: 'off', class: 'form-control'
+
+  - if Gitlab.config.pages.external_https
+    .form-group
+      = f.label :certificate, class: 'control-label' do
+        Certificate (PEM)
+      .col-sm-10
+        = f.text_area :certificate, rows: 5, class: 'form-control'
+        %span.help-inline Upload a certificate for your domain with all intermediates
+
+    .form-group
+      = f.label :key, class: 'control-label' do
+        Key (PEM)
+      .col-sm-10
+        = f.text_area :key, rows: 5, class: 'form-control'
+        %span.help-inline Upload a private key for your certificate
+  - else
+    .nothing-here-block
+      Support for custom certificates is disabled.
+      Ask your system's administrator to enable it.
+
+  .form-actions
+    = f.submit 'Create New Domain', class: "btn btn-save"
diff --git a/app/views/projects/pages_domains/new.html.haml b/app/views/projects/pages_domains/new.html.haml
new file mode 100644
index 00000000000..e1477c71d06
--- /dev/null
+++ b/app/views/projects/pages_domains/new.html.haml
@@ -0,0 +1,6 @@
+- page_title 'New Pages Domain'
+%h3.page_title
+  New Pages Domain
+%hr.clearfix
+%div
+  = render 'form'
diff --git a/app/views/projects/pages_domains/show.html.haml b/app/views/projects/pages_domains/show.html.haml
new file mode 100644
index 00000000000..876cac0dacb
--- /dev/null
+++ b/app/views/projects/pages_domains/show.html.haml
@@ -0,0 +1,30 @@
+- page_title "#{@domain.domain}", 'Pages Domains'
+
+%h3.page-title
+  Pages Domain
+
+.table-holder
+  %table.table
+    %tr
+      %td
+        Domain
+      %td
+        = link_to @domain.domain, @domain.url
+    %tr
+      %td
+        DNS
+      %td
+        %p
+          To access the domain create a new DNS record:
+        %pre
+          #{@domain.domain} CNAME #{@domain.project.pages_subdomain}.#{Settings.pages.host}.
+    %tr
+      %td
+        Certificate
+      %td
+        - if @domain.certificate_text
+          %pre
+            = @domain.certificate_text
+        - else
+          .light
+            missing
diff --git a/app/views/projects/pipelines/_graph.html.haml b/app/views/projects/pipelines/_graph.html.haml
new file mode 100644
index 00000000000..0202833c0bf
--- /dev/null
+++ b/app/views/projects/pipelines/_graph.html.haml
@@ -0,0 +1,4 @@
+- pipeline = local_assigns.fetch(:pipeline)
+.pipeline-visualization.pipeline-graph
+  %ul.stage-column-list
+    = render partial: "projects/stage/graph", collection: pipeline.stages, as: :stage
diff --git a/app/views/projects/pipelines/_head.html.haml b/app/views/projects/pipelines/_head.html.haml
index b10dd47709f..bc57f7f1c46 100644
--- a/app/views/projects/pipelines/_head.html.haml
+++ b/app/views/projects/pipelines/_head.html.haml
@@ -1,28 +1,28 @@
 = content_for :sub_nav do
   .scrolling-tabs-container.sub-nav-scroll
     = render 'shared/nav_scroll'
-    .nav-links.sub-nav.scrolling-tabs{ class: ('build' if local_assigns.fetch(:build_subnav, false)) }
+    .nav-links.sub-nav.scrolling-tabs
       %ul{ class: (container_class) }
         - if project_nav_tab? :pipelines
-          = nav_link(controller: :pipelines) do
+          = nav_link(path: 'pipelines#index', controller: :pipelines) do
             = link_to project_pipelines_path(@project), title: 'Pipelines', class: 'shortcuts-pipelines' do
               %span
                 Pipelines
 
         - if project_nav_tab? :builds
-          = nav_link(controller: %w(builds)) do
-            = link_to project_builds_path(@project), title: 'Builds', class: 'shortcuts-builds' do
+          = nav_link(controller: :builds) do
+            = link_to project_builds_path(@project), title: 'Jobs', class: 'shortcuts-builds' do
               %span
-                Builds
+                Jobs
 
         - if project_nav_tab? :environments
-          = nav_link(controller: %w(environments)) do
+          = nav_link(controller: :environments) do
             = link_to project_environments_path(@project), title: 'Environments', class: 'shortcuts-environments' do
               %span
                 Environments
 
-        - if can?(current_user, :read_cycle_analytics, @project)
-          = nav_link(controller: %w(cycle_analytics)) do
-            = link_to project_cycle_analytics_path(@project), title: 'Cycle Analytics' do
+        - if @project.feature_available?(:builds, current_user) && !@project.empty_repo?
+          = nav_link(path: 'pipelines#charts') do
+            = link_to charts_namespace_project_pipelines_path(@project.namespace, @project), title: 'Charts', class: 'shortcuts-pipelines-charts' do
               %span
-                Cycle Analytics
+                Charts
diff --git a/app/views/projects/pipelines/_info.html.haml b/app/views/projects/pipelines/_info.html.haml
index d288efc546f..4be9a1371ec 100644
--- a/app/views/projects/pipelines/_info.html.haml
+++ b/app/views/projects/pipelines/_info.html.haml
@@ -1,39 +1,49 @@
-%p
-.commit-info-row
-  Pipeline
-  = link_to "##{@pipeline.id}", namespace_project_pipeline_path(@project.namespace, @project, @pipeline.id), class: "monospace"
-  with
-  = pluralize @pipeline.statuses.count(:id), "build"
-  - if @pipeline.ref
-    for
-    = link_to @pipeline.ref, namespace_project_commits_path(@project.namespace, @project, @pipeline.ref), class: "monospace"
-  - if @pipeline.duration
-    in
-    = time_interval_in_words(@pipeline.duration)
-  - if @pipeline.queued_duration
-    = "(queued for #{time_interval_in_words(@pipeline.queued_duration)})"
-
-  .pull-right
-    = link_to namespace_project_pipeline_path(@project.namespace, @project, @pipeline), class: "ci-status ci-#{@pipeline.status}" do
-      = ci_icon_for_status(@pipeline.status)
-      = ci_label_for_status(@pipeline.status)
-
-- if @commit
-  .commit-info-row
-    %span.light Authored by
-    %strong
-      = commit_author_link(@commit, avatar: true, size: 24)
-    #{time_ago_with_tooltip(@commit.authored_date)}
-
-.commit-info-row
-  %span.light Commit
-  = link_to @pipeline.sha, namespace_project_commit_path(@project.namespace, @project, @pipeline.sha), class: "monospace"
-  = clipboard_button(clipboard_text: @pipeline.sha)
+.page-content-header
+  .header-main-content
+    = render 'ci/status/badge', status: @pipeline.detailed_status(current_user)
+    %strong Pipeline ##{@pipeline.id}
+    triggered #{time_ago_with_tooltip(@pipeline.created_at)}
+    - if @pipeline.user
+      by
+      = user_avatar(user: @pipeline.user, size: 24)
+      = user_link(@pipeline.user)
+  .header-action-buttons
+    - if can?(current_user, :update_pipeline, @pipeline.project)
+      - if @pipeline.retryable?
+        = link_to "Retry", retry_namespace_project_pipeline_path(@pipeline.project.namespace, @pipeline.project, @pipeline.id), class: 'js-retry-button btn btn-inverted-secondary', method: :post
+      - if @pipeline.cancelable?
+        = link_to "Cancel running", cancel_namespace_project_pipeline_path(@pipeline.project.namespace, @pipeline.project, @pipeline.id), data: { confirm: 'Are you sure?' }, class: 'btn btn-danger', method: :post
 
 - if @commit
-  .commit-box.content-block
+  .commit-box
     %h3.commit-title
       = markdown(@commit.title, pipeline: :single_line)
     - if @commit.description.present?
       %pre.commit-description
         = preserve(markdown(@commit.description, pipeline: :single_line))
+
+.info-well
+  - if @commit.status
+    .well-segment.pipeline-info
+      .icon-container
+        = icon('clock-o')
+      = pluralize @pipeline.statuses.count(:id), "job"
+      - if @pipeline.ref
+        from
+        = link_to @pipeline.ref, namespace_project_commits_path(@project.namespace, @project, @pipeline.ref), class: "monospace"
+      - if @pipeline.duration
+        in
+        = time_interval_in_words(@pipeline.duration)
+      - if @pipeline.queued_duration
+        = "(queued for #{time_interval_in_words(@pipeline.queued_duration)})"
+
+  .well-segment.branch-info
+    .icon-container.commit-icon
+      = custom_icon("icon_commit")
+    = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @pipeline.sha), class: "monospace js-details-short"
+    = link_to("#", class: "js-details-expand hidden-xs hidden-sm") do
+      %span.text-expander
+        \...
+    %span.js-details-content.hide
+      = link_to @pipeline.sha, namespace_project_commit_path(@project.namespace, @project, @pipeline.sha), class: "monospace commit-hash-full"
+    = clipboard_button(clipboard_text: @pipeline.sha, title: "Copy commit SHA to clipboard")
diff --git a/app/views/projects/pipelines/_stage.html.haml b/app/views/projects/pipelines/_stage.html.haml
new file mode 100644
index 00000000000..3feb99cfcd7
--- /dev/null
+++ b/app/views/projects/pipelines/_stage.html.haml
@@ -0,0 +1,5 @@
+- grouped_statuses = @stage.statuses.latest_ordered.group_by(&:status)
+- HasStatus::ORDERED_STATUSES.each do |ordered_status|
+  - grouped_statuses.fetch(ordered_status, []).each do |status|
+    %li
+      = render 'ci/status/dropdown_graph_badge', subject: status
diff --git a/app/views/projects/pipelines/_with_tabs.html.haml b/app/views/projects/pipelines/_with_tabs.html.haml
new file mode 100644
index 00000000000..53067cdcba4
--- /dev/null
+++ b/app/views/projects/pipelines/_with_tabs.html.haml
@@ -0,0 +1,42 @@
+.tabs-holder
+  %ul.pipelines-tabs.nav-links.no-top.no-bottom
+    %li.js-pipeline-tab-link
+      = link_to namespace_project_pipeline_path(@project.namespace, @project, @pipeline), data: { target: 'div#js-tab-pipeline', action: 'pipelines', toggle: 'tab' },  class: 'pipeline-tab' do
+        Pipeline
+    %li.js-builds-tab-link
+      = link_to builds_namespace_project_pipeline_path(@project.namespace, @project, @pipeline), data: {target: 'div#js-tab-builds', action: 'builds', toggle: 'tab' }, class: 'builds-tab' do
+        Jobs
+        %span.badge.js-builds-counter= pipeline.statuses.count
+
+
+
+.tab-content
+  #js-tab-pipeline.tab-pane
+    .build-content.middle-block.js-pipeline-graph
+      = render "projects/pipelines/graph", pipeline: pipeline
+
+  #js-tab-builds.tab-pane
+    - if pipeline.yaml_errors.present?
+      .bs-callout.bs-callout-danger
+        %h4 Found errors in your .gitlab-ci.yml:
+        %ul
+          - pipeline.yaml_errors.split(",").each do |error|
+            %li= error
+        You can also test your .gitlab-ci.yml in the #{link_to "Lint", ci_lint_path}
+
+    - if pipeline.project.builds_enabled? && !pipeline.ci_yaml_file
+      .bs-callout.bs-callout-warning
+        \.gitlab-ci.yml not found in this commit
+
+    .table-holder.pipeline-holder
+      %table.table.ci-table.pipeline
+        %thead
+          %tr
+            %th Status
+            %th Job ID
+            %th Name
+            %th
+            - if pipeline.project.build_coverage_enabled?
+              %th Coverage
+            %th
+        = render partial: "projects/stage/stage", collection: pipeline.stages, as: :stage
diff --git a/app/views/projects/pipelines/charts.html.haml b/app/views/projects/pipelines/charts.html.haml
new file mode 100644
index 00000000000..4a5043aac3c
--- /dev/null
+++ b/app/views/projects/pipelines/charts.html.haml
@@ -0,0 +1,21 @@
+- @no_container = true
+- page_title "Charts", "Pipelines"
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('common_d3')
+  = page_specific_javascript_bundle_tag('graphs')
+= render 'head'
+
+%div{ class: container_class }
+  .sub-header-block
+    .oneline
+      A collection of graphs for Continuous Integration
+
+  #charts.ci-charts
+    .row
+      .col-md-6
+        = render 'projects/pipelines/charts/overall'
+      .col-md-6
+        = render 'projects/pipelines/charts/build_times'
+
+    %hr
+    = render 'projects/pipelines/charts/builds'
diff --git a/app/views/projects/pipelines/charts/_build_times.haml b/app/views/projects/pipelines/charts/_build_times.haml
new file mode 100644
index 00000000000..bb0975a9535
--- /dev/null
+++ b/app/views/projects/pipelines/charts/_build_times.haml
@@ -0,0 +1,27 @@
+%div
+  %p.light
+    Commit duration in minutes for last 30 commits
+
+  %canvas#build_timesChart{ height: 200 }
+
+:javascript
+  var data = {
+    labels : #{@charts[:build_times].labels.to_json},
+    datasets : [
+      {
+        fillColor : "rgba(220,220,220,0.5)",
+        strokeColor : "rgba(220,220,220,1)",
+        barStrokeWidth: 1,
+        barValueSpacing: 1,
+        barDatasetSpacing: 1,
+        data : #{@charts[:build_times].build_times.to_json}
+      }
+    ]
+  }
+  var ctx = $("#build_timesChart").get(0).getContext("2d");
+  var options = { scaleOverlay: true, responsive: true, maintainAspectRatio: false };
+  if (window.innerWidth < 768) {
+    // Scale fonts if window width lower than 768px (iPad portrait)
+    options.scaleFontSize = 8
+  }
+  new Chart(ctx).Bar(data, options);
diff --git a/app/views/projects/pipelines/charts/_builds.haml b/app/views/projects/pipelines/charts/_builds.haml
new file mode 100644
index 00000000000..b6f453b9736
--- /dev/null
+++ b/app/views/projects/pipelines/charts/_builds.haml
@@ -0,0 +1,56 @@
+%h4 Pipelines charts
+%p
+  &nbsp;
+  %span.cgreen
+    = icon("circle")
+    success
+  &nbsp;
+  %span.cgray
+    = icon("circle")
+    all
+
+.prepend-top-default
+  %p.light
+    Jobs for last week
+    (#{date_from_to(Date.today - 7.days, Date.today)})
+  %canvas#weekChart{ height: 200 }
+
+.prepend-top-default
+  %p.light
+    Jobs for last month
+    (#{date_from_to(Date.today - 30.days, Date.today)})
+  %canvas#monthChart{ height: 200 }
+
+.prepend-top-default
+  %p.light
+    Jobs for last year
+  %canvas#yearChart.padded{ height: 250 }
+
+- [:week, :month, :year].each do |scope|
+  :javascript
+    var data = {
+      labels : #{@charts[scope].labels.to_json},
+      datasets : [
+        {
+          fillColor : "#7f8fa4",
+          strokeColor : "#7f8fa4",
+          pointColor : "#7f8fa4",
+          pointStrokeColor : "#EEE",
+          data : #{@charts[scope].total.to_json}
+        },
+        {
+          fillColor : "#44aa22",
+          strokeColor : "#44aa22",
+          pointColor : "#44aa22",
+          pointStrokeColor : "#fff",
+          data : #{@charts[scope].success.to_json}
+        }
+      ]
+    }
+    var ctx = $("##{scope}Chart").get(0).getContext("2d");
+    var options = { scaleOverlay: true, responsive: true, maintainAspectRatio: false };
+    if (window.innerWidth < 768) {
+      // Scale fonts if window width lower than 768px (iPad portrait)
+      options.scaleFontSize = 8
+    }
+    new Chart(ctx).Line(data, options);
diff --git a/app/views/projects/graphs/ci/_overall.haml b/app/views/projects/pipelines/charts/_overall.haml
index edc4f7b079f..edc4f7b079f 100644
--- a/app/views/projects/graphs/ci/_overall.haml
+++ b/app/views/projects/pipelines/charts/_overall.haml
diff --git a/app/views/projects/pipelines/index.html.haml b/app/views/projects/pipelines/index.html.haml
index 4bc49072f35..3d73284699f 100644
--- a/app/views/projects/pipelines/index.html.haml
+++ b/app/views/projects/pipelines/index.html.haml
@@ -2,55 +2,19 @@
 - page_title "Pipelines"
 = render "projects/pipelines/head"
 
-%div{ class: container_class }
-  .top-area
-    %ul.nav-links
-      %li{class: ('active' if @scope.nil?)}
-        = link_to project_pipelines_path(@project) do
-          All
-          %span.badge.js-totalbuilds-count
-            = number_with_delimiter(@pipelines_count)
-
-      %li{class: ('active' if @scope == 'running')}
-        = link_to project_pipelines_path(@project, scope: :running) do
-          Running
-          %span.badge.js-running-count
-            = number_with_delimiter(@running_or_pending_count)
-
-      %li{class: ('active' if @scope == 'branches')}
-        = link_to project_pipelines_path(@project, scope: :branches) do
-          Branches
-
-      %li{class: ('active' if @scope == 'tags')}
-        = link_to project_pipelines_path(@project, scope: :tags) do
-          Tags
-
-    .nav-controls
-      - if can? current_user, :create_pipeline, @project
-        = link_to new_namespace_project_pipeline_path(@project.namespace, @project), class: 'btn btn-create' do
-          Run pipeline
-
-        - unless @repository.gitlab_ci_yml
-          = link_to 'Get started with Pipelines', help_page_path('ci/quick_start/README'), class: 'btn btn-info'
-
-        = link_to ci_lint_path, class: 'btn btn-default' do
-          %span CI Lint
-
-  %div.content-list.pipelines
-    - stages = @pipelines.stages
-    - if @pipelines.blank?
-      %div
-        .nothing-here-block No pipelines to show
-    - else
-      .table-holder
-        %table.table.ci-table
-          %thead
-            %th Status
-            %th Pipeline
-            %th Commit
-            %th Stages
-            %th
-            %th.hidden-xs
-          = render @pipelines, commit_sha: true, stage: true, allow_retry: true, stages: stages
-
-      = paginate @pipelines, theme: 'gitlab'
+#pipelines-list-vue{ data: { endpoint: namespace_project_pipelines_path(@project.namespace, @project, format: :json),
+  "css-class" => container_class,
+  "help-page-path" => help_page_path('ci/quick_start/README'),
+  "new-pipeline-path" => new_namespace_project_pipeline_path(@project.namespace, @project),
+  "can-create-pipeline" => can?(current_user, :create_pipeline, @project).to_s,
+  "all-path" =>  project_pipelines_path(@project),
+  "pending-path" => project_pipelines_path(@project, scope: :pending),
+  "running-path" => project_pipelines_path(@project, scope: :running),
+  "finished-path" => project_pipelines_path(@project, scope: :finished),
+  "branches-path" => project_pipelines_path(@project, scope: :branches),
+  "tags-path" => project_pipelines_path(@project, scope: :tags),
+  "has-ci" => @repository.gitlab_ci_yml,
+  "ci-lint-path" => ci_lint_path } }
+
+= page_specific_javascript_bundle_tag('common_vue')
+= page_specific_javascript_bundle_tag('vue_pipelines')
diff --git a/app/views/projects/pipelines/new.html.haml b/app/views/projects/pipelines/new.html.haml
index 55202725b9e..14a270a3039 100644
--- a/app/views/projects/pipelines/new.html.haml
+++ b/app/views/projects/pipelines/new.html.haml
@@ -9,7 +9,11 @@
   .form-group
     = f.label :ref, 'Create for', class: 'control-label'
     .col-sm-10
-      = f.text_field :ref, required: true, tabindex: 2, class: 'form-control js-branch-name ui-autocomplete-input', autocomplete: :false, id: :ref
+      = hidden_field_tag 'pipeline[ref]', params[:ref] || @project.default_branch
+      = dropdown_tag(params[:ref] || @project.default_branch,
+                     options: { toggle_class: 'js-branch-select wide',
+                                filter: true, dropdown_class: "dropdown-menu-selectable", placeholder: "Search branches",
+                                data: { selected: params[:ref] || @project.default_branch, field_name: 'pipeline[ref]' } })
       .help-block Existing branch name, tag
   .form-actions
     = f.submit 'Create pipeline', class: 'btn btn-create', tabindex: 3
diff --git a/app/views/projects/pipelines/show.html.haml b/app/views/projects/pipelines/show.html.haml
index 688535ad764..49c1d886423 100644
--- a/app/views/projects/pipelines/show.html.haml
+++ b/app/views/projects/pipelines/show.html.haml
@@ -2,10 +2,8 @@
 - page_title "Pipeline"
 = render "projects/pipelines/head"
 
-%div{ class: container_class }
-  .prepend-top-default
-    - if @commit
-      = render "projects/pipelines/info"
-    %div.block-connector
+.js-pipeline-container{ class: container_class, data: { controller_action: "#{controller.action_name}" } }
+  - if @commit
+    = render "projects/pipelines/info"
 
-  = render "projects/commit/pipeline", pipeline: @pipeline
+  = render "projects/pipelines/with_tabs", pipeline: @pipeline
diff --git a/app/views/projects/pipelines_settings/_badge.html.haml b/app/views/projects/pipelines_settings/_badge.html.haml
index 7b7fa56d993..43bbd735059 100644
--- a/app/views/projects/pipelines_settings/_badge.html.haml
+++ b/app/views/projects/pipelines_settings/_badge.html.haml
@@ -1,4 +1,4 @@
-.row{ class: badge.title.gsub(' ', '-') }
+%div{ class: badge.title.gsub(' ', '-') }
   .col-lg-3.profile-settings-sidebar
     %h4.prepend-top-0
       = badge.title.capitalize
@@ -25,3 +25,10 @@
               HTML
             .col-md-10.code.js-syntax-highlight
               = highlight('.html', badge.to_html)
+          .row
+            %hr
+          .row
+            .col-md-2.text-center
+              AsciiDoc
+            .col-md-10.code.js-syntax-highlight
+              = highlight('.adoc', badge.to_asciidoc)
diff --git a/app/views/projects/pipelines_settings/_show.html.haml b/app/views/projects/pipelines_settings/_show.html.haml
new file mode 100644
index 00000000000..132f6372e40
--- /dev/null
+++ b/app/views/projects/pipelines_settings/_show.html.haml
@@ -0,0 +1,96 @@
+.row.prepend-top-default
+  .col-lg-3.profile-settings-sidebar
+    %h4.prepend-top-0
+      CI/CD Pipelines
+  .col-lg-9
+    = form_for @project, url: namespace_project_pipelines_settings_path(@project.namespace.becomes(Namespace), @project) do |f|
+      %fieldset.builds-feature
+        - unless @repository.gitlab_ci_yml
+          .form-group
+            %p Pipelines need to be configured before you can begin using Continuous Integration.
+            = link_to 'Get started with CI/CD Pipelines', help_page_path('ci/quick_start/README'), class: 'btn btn-info'
+            %hr
+        .form-group.append-bottom-default
+          = f.label :runners_token, "Runner token", class: 'label-light'
+          = f.text_field :runners_token, class: "form-control", placeholder: 'xEeFCaDAB89'
+          %p.help-block The secure token used by the Runner to checkout the project
+
+        %hr
+        .form-group
+          %h5.prepend-top-0
+            Git strategy for pipelines
+          %p
+            Choose between <code>clone</code> or <code>fetch</code> to get the recent application code
+            = link_to icon('question-circle'), help_page_path('user/project/pipelines/settings', anchor: 'git-strategy')
+          .radio
+            = f.label :build_allow_git_fetch_false do
+              = f.radio_button :build_allow_git_fetch, 'false'
+              %strong git clone
+              %br
+              %span.descr
+                Slower but makes sure the project workspace is pristine as it clones the repository from scratch for every job
+          .radio
+            = f.label :build_allow_git_fetch_true do
+              = f.radio_button :build_allow_git_fetch, 'true'
+              %strong git fetch
+              %br
+              %span.descr
+                Faster as it re-uses the project workspace (falling back to clone if it doesn't exist)
+
+        %hr
+        .form-group
+          = f.label :build_timeout_in_minutes, 'Timeout', class: 'label-light'
+          = f.number_field :build_timeout_in_minutes, class: 'form-control', min: '0'
+          %p.help-block
+            Per job in minutes. If a job passes this threshold, it will be marked as failed.
+            = link_to icon('question-circle'), help_page_path('user/project/pipelines/settings', anchor: 'timeout')
+
+        %hr
+        .form-group
+          .checkbox
+            = f.label :public_builds do
+              = f.check_box :public_builds
+              %strong Public pipelines
+            .help-block
+              Allow everyone to access pipelines for public and internal projects
+              = link_to icon('question-circle'), help_page_path('user/project/pipelines/settings', anchor: 'visibility-of-pipelines')
+
+        %hr
+        .form-group
+          = f.label :build_coverage_regex, "Test coverage parsing", class: 'label-light'
+          .input-group
+            %span.input-group-addon /
+            = f.text_field :build_coverage_regex, class: 'form-control', placeholder: 'Regular expression'
+            %span.input-group-addon /
+          %p.help-block
+            A regular expression that will be used to find the test coverage
+            output in the job trace. Leave blank to disable
+            = link_to icon('question-circle'), help_page_path('user/project/pipelines/settings', anchor: 'test-coverage-parsing')
+          .bs-callout.bs-callout-info
+            %p Below are examples of regex for existing tools:
+            %ul
+              %li
+                Simplecov (Ruby) -
+                %code \(\d+.\d+\%\) covered
+              %li
+                pytest-cov (Python) -
+                %code \d+\%\s*$
+              %li
+                phpunit --coverage-text --colors=never (PHP) -
+                %code ^\s*Lines:\s*\d+.\d+\%
+              %li
+                gcovr (C/C++) -
+                %code ^TOTAL.*\s+(\d+\%)$
+              %li
+                tap --coverage-report=text-summary (NodeJS) -
+                %code ^Statements\s*:\s*([^%]+)
+              %li
+                excoveralls (Elixir) -
+                %code \[TOTAL\]\s+(\d+\.\d+)%
+
+        = f.submit 'Save changes', class: "btn btn-save"
+
+%hr
+
+.row.prepend-top-default
+  = render partial: 'projects/pipelines_settings/badge', collection: @badges
diff --git a/app/views/projects/pipelines_settings/show.html.haml b/app/views/projects/pipelines_settings/show.html.haml
deleted file mode 100644
index 96221a20502..00000000000
--- a/app/views/projects/pipelines_settings/show.html.haml
+++ /dev/null
@@ -1,95 +0,0 @@
-- page_title "CI/CD Pipelines"
-
-.row.prepend-top-default
-  .col-lg-3.profile-settings-sidebar
-    %h4.prepend-top-0
-      = page_title
-  .col-lg-9
-    = form_for @project, url: namespace_project_pipelines_settings_path(@project.namespace.becomes(Namespace), @project) do |f|
-      %fieldset.builds-feature
-        - unless @repository.gitlab_ci_yml
-          .form-group
-            %p Pipelines need to be configured before you can begin using Continuous Integration.
-            = link_to 'Get started with CI/CD Pipelines', help_page_path('ci/quick_start/README'), class: 'btn btn-info'
-            %hr
-        .form-group.append-bottom-default
-          = f.label :runners_token, "Runner token", class: 'label-light'
-          = f.text_field :runners_token, class: "form-control", placeholder: 'xEeFCaDAB89'
-          %p.help-block The secure token used by the Runner to checkout the project
-
-        %hr
-        .form-group
-          %h5.prepend-top-0
-            Git strategy for pipelines
-          %p
-            Choose between <code>clone</code> or <code>fetch</code> to get the recent application code
-            = link_to icon('question-circle'), help_page_path('user/project/pipelines/settings', anchor: 'git-strategy')
-          .radio
-            = f.label :build_allow_git_fetch_false do
-              = f.radio_button :build_allow_git_fetch, 'false'
-              %strong git clone
-              %br
-              %span.descr
-                Slower but makes sure the project workspace is pristine as it clones the repository from scratch for every job
-          .radio
-            = f.label :build_allow_git_fetch_true do
-              = f.radio_button :build_allow_git_fetch, 'true'
-              %strong git fetch
-              %br
-              %span.descr
-                Faster as it re-uses the project workspace (falling back to clone if it doesn't exist)
-
-        %hr
-        .form-group
-          = f.label :build_timeout_in_minutes, 'Timeout', class: 'label-light'
-          = f.number_field :build_timeout_in_minutes, class: 'form-control', min: '0'
-          %p.help-block
-            Per job in minutes. If a job passes this threshold, it will be marked as failed.
-            = link_to icon('question-circle'), help_page_path('user/project/pipelines/settings', anchor: 'timeout')
-
-        %hr
-        .form-group
-          .checkbox
-            = f.label :public_builds do
-              = f.check_box :public_builds
-              %strong Public pipelines
-            .help-block
-              Allow everyone to access pipelines for public and internal projects
-              = link_to icon('question-circle'), help_page_path('user/project/pipelines/settings', anchor: 'visibility-of-pipelines')
-
-        %hr
-        .form-group
-          = f.label :build_coverage_regex, "Test coverage parsing", class: 'label-light'
-          .input-group
-            %span.input-group-addon /
-            = f.text_field :build_coverage_regex, class: 'form-control', placeholder: '\(\d+.\d+\%\) covered'
-            %span.input-group-addon /
-          %p.help-block
-            A regular expression that will be used to find the test coverage
-            output in the build trace. Leave blank to disable
-            = link_to icon('question-circle'), help_page_path('user/project/pipelines/settings', anchor: 'test-coverage-parsing')
-          .bs-callout.bs-callout-info
-            %p Below are examples of regex for existing tools:
-            %ul
-              %li
-                Simplecov (Ruby) -
-                %code \(\d+.\d+\%\) covered
-              %li
-                pytest-cov (Python) -
-                %code \d+\%\s*$
-              %li
-                phpunit --coverage-text --colors=never (PHP) -
-                %code ^\s*Lines:\s*\d+.\d+\%
-              %li
-                gcovr (C/C++) -
-                %code ^TOTAL.*\s+(\d+\%)$
-              %li
-                tap --coverage-report=text-summary (NodeJS) -
-                %code ^Statements\s*:\s*([^%]+)
-
-        = f.submit 'Save changes', class: "btn btn-save"
-
-%hr
-
-.row.prepend-top-default
-  = render partial: 'badge', collection: @badges
diff --git a/app/views/projects/project_members/_group_members.html.haml b/app/views/projects/project_members/_group_members.html.haml
index 9738f369a35..c7996077bc7 100644
--- a/app/views/projects/project_members/_group_members.html.haml
+++ b/app/views/projects/project_members/_group_members.html.haml
@@ -1,7 +1,7 @@
 .panel.panel-default
   .panel-heading
     Group members with access to
-    %strong #{@group.name}
+    %strong= @group.name
     %span.badge= members.size
     - if can?(current_user, :admin_group_member, @group)
       .controls
diff --git a/app/views/projects/project_members/_groups.html.haml b/app/views/projects/project_members/_groups.html.haml
index d7f5fa96527..fdeb5f21fbe 100644
--- a/app/views/projects/project_members/_groups.html.haml
+++ b/app/views/projects/project_members/_groups.html.haml
@@ -1,7 +1,7 @@
 .panel.panel-default.project-members-groups
   .panel-heading
     Groups with access to
-    %strong #{@project.name}
+    %strong= @project.name
     %span.badge= group_links.size
   %ul.content-list
     = render partial: 'shared/members/group', collection: group_links, as: :group_link
diff --git a/app/views/projects/project_members/_index.html.haml b/app/views/projects/project_members/_index.html.haml
new file mode 100644
index 00000000000..ab0771b5751
--- /dev/null
+++ b/app/views/projects/project_members/_index.html.haml
@@ -0,0 +1,22 @@
+.row.prepend-top-default
+  .col-lg-3.settings-sidebar
+    %h4.prepend-top-0
+      Members
+    - if can?(current_user, :admin_project_member, @project)
+      %p
+        Add a new member to
+        %strong= @project.name
+  .col-lg-9
+    .light.prepend-top-default
+      - if can?(current_user, :admin_project_member, @project)
+        = render "projects/project_members/new_project_member"
+
+        = render 'shared/members/requests', membership_source: @project, requesters: @requesters
+        .append-bottom-default.clearfix
+          %h5.member.existing-title
+            Existing members and groups
+        - if @group_links.any?
+          = render 'projects/project_members/groups', group_links: @group_links
+
+    = render 'projects/project_members/team', members: @project_members
+    = paginate @project_members, theme: "gitlab"
diff --git a/app/views/projects/project_members/_new_project_member.html.haml b/app/views/projects/project_members/_new_project_member.html.haml
index 79dcd7a6ee9..2b1c23f7dda 100644
--- a/app/views/projects/project_members/_new_project_member.html.haml
+++ b/app/views/projects/project_members/_new_project_member.html.haml
@@ -1,22 +1,18 @@
 = form_for @project_member, as: :project_member, url: namespace_project_project_members_path(@project.namespace, @project), html: { class: 'users-project-form' } do |f|
-  .row
-    .col-md-4.col-lg-6
-      = users_select_tag(:user_ids, multiple: true, class: "input-clamp", scope: :all, email_user: true)
-      .help-block.append-bottom-10
-        Search for users by name, username, or email, or invite new ones using their email address.
-
-    .col-md-3.col-lg-2
-      = select_tag :access_level, options_for_select(ProjectMember.access_level_roles, @project_member.access_level), class: "form-control project-access-select"
-      .help-block.append-bottom-10
-        = link_to "Read more", help_page_path("user/permissions"), class: "vlink"
-        about role permissions
-
-    .col-md-3.col-lg-2
-      .clearable-input
-        = text_field_tag :expires_at, nil, class: 'form-control js-access-expiration-date', placeholder: 'Expiration date'
-        %i.clear-icon.js-clear-input
-      .help-block.append-bottom-10
-        On this date, the user(s) will automatically lose access to this project.
-
-    .col-md-2
-      = f.submit "Add to project", class: "btn btn-create btn-block"
+  .form-group
+    = users_select_tag(:user_ids, multiple: true, class: "input-clamp", scope: :all, email_user: true, placeholder: "Search for members to update or invite")
+    .help-block.append-bottom-10
+      Search for members by name, username, or email, or invite new ones using their email address.
+  .form-group
+    = select_tag :access_level, options_for_select(ProjectMember.access_level_roles, @project_member.access_level), class: "form-control project-access-select"
+    .help-block.append-bottom-10
+      = link_to "Read more", help_page_path("user/permissions"), class: "vlink"
+      about role permissions
+  .form-group
+    .clearable-input
+      = text_field_tag :expires_at, nil, class: 'form-control js-access-expiration-date', placeholder: 'Expiration date'
+      %i.clear-icon.js-clear-input
+    .help-block.append-bottom-10
+      On this date, the member(s) will automatically lose access to this project.
+  = f.submit "Add to project", class: "btn btn-create"
+  = link_to "Import", import_namespace_project_project_members_path(@project.namespace, @project), class: "btn btn-default", title: "Import members from another project"
diff --git a/app/views/projects/project_members/_shared_group_members.html.haml b/app/views/projects/project_members/_shared_group_members.html.haml
index 77370c14def..7902ddb1ae9 100644
--- a/app/views/projects/project_members/_shared_group_members.html.haml
+++ b/app/views/projects/project_members/_shared_group_members.html.haml
@@ -5,9 +5,9 @@
   .panel.panel-default
     .panel-heading
       Shared with
-      %strong #{shared_group.name}
+      %strong= shared_group.name
       group, members with
-      %strong #{group_links.human_access}
+      %strong= group_links.human_access
       role (#{shared_group_users_count})
       - if can?(current_user, :admin_group, shared_group)
         .panel-head-actions
diff --git a/app/views/projects/project_members/_team.html.haml b/app/views/projects/project_members/_team.html.haml
index c1e894d8f40..81d57c77edf 100644
--- a/app/views/projects/project_members/_team.html.haml
+++ b/app/views/projects/project_members/_team.html.haml
@@ -1,7 +1,13 @@
 .panel.panel-default
   .panel-heading
-    Users with access to
-    %strong #{@project.name}
+    Members with access to
+    %strong= @project.name
     %span.badge= @project_members.total_count
+    = form_tag namespace_project_settings_members_path(@project.namespace, @project), method: :get, class: 'form-inline member-search-form'  do
+      .form-group
+        = search_field_tag :search, params[:search], { placeholder: 'Find existing members by name', class: 'form-control', spellcheck: false }
+        %button.member-search-btn{ type: "submit", "aria-label" => "Submit search" }
+          = icon("search")
+        = render 'shared/members/sort_dropdown'
   %ul.content-list
     = render partial: 'shared/members/member', collection: members, as: :member
diff --git a/app/views/projects/project_members/import.html.haml b/app/views/projects/project_members/import.html.haml
index eef97107d77..42ce4f8001b 100644
--- a/app/views/projects/project_members/import.html.haml
+++ b/app/views/projects/project_members/import.html.haml
@@ -12,5 +12,4 @@
 
   .form-actions
     = button_tag 'Import project members', class: "btn btn-create"
-    = link_to "Cancel", namespace_project_project_members_path(@project.namespace, @project), class: "btn btn-cancel"
-
+    = link_to "Cancel", namespace_project_settings_members_path(@project.namespace, @project), class: "btn btn-cancel"
diff --git a/app/views/projects/project_members/index.html.haml b/app/views/projects/project_members/index.html.haml
deleted file mode 100644
index bdeb704b6da..00000000000
--- a/app/views/projects/project_members/index.html.haml
+++ /dev/null
@@ -1,28 +0,0 @@
-- page_title "Members"
-
-.project-members-page.prepend-top-default
-  %h4.project-members-title.clearfix
-    Members
-    = link_to "Import", import_namespace_project_project_members_path(@project.namespace, @project), class: "btn btn-default pull-right hidden-xs", title: "Import members from another project"
-  - if can?(current_user, :admin_project_member, @project)
-    .project-members-new.append-bottom-default
-      %p.clearfix
-        Add new user to
-        %strong= @project.name
-      = render "new_project_member"
-
-      = render 'shared/members/requests', membership_source: @project, requesters: @requesters
-
-  .append-bottom-default.clearfix
-    %h5.member.existing-title
-      Existing users and groups
-    = form_tag namespace_project_project_members_path(@project.namespace, @project), method: :get, class: 'form-inline member-search-form'  do
-      .form-group
-        = search_field_tag :search, params[:search], { placeholder: 'Find existing members by name', class: 'form-control', spellcheck: false }
-        %button.member-search-btn{ type: "submit", "aria-label" => "Submit search" }
-          = icon("search")
-  - if @group_links.any?
-    = render 'groups', group_links: @group_links
-
-  = render 'team', members: @project_members
-  = paginate @project_members, theme: "gitlab"
diff --git a/app/views/projects/project_members/update.js.haml b/app/views/projects/project_members/update.js.haml
index 91927181efb..d15f4310ff5 100644
--- a/app/views/projects/project_members/update.js.haml
+++ b/app/views/projects/project_members/update.js.haml
@@ -1,3 +1,4 @@
 :plain
   var $listItem = $('#{escape_javascript(render('shared/members/member', member: @project_member))}');
   $("##{dom_id(@project_member)} .list-item-name").replaceWith($listItem.find('.list-item-name'));
+  gl.utils.localTimeAgo($('.js-timeago'), $("##{dom_id(@project_member)}"));
diff --git a/app/views/projects/protected_branches/_branches_list.html.haml b/app/views/projects/protected_branches/_branches_list.html.haml
index 04b19a8c5a7..cf0db943865 100644
--- a/app/views/projects/protected_branches/_branches_list.html.haml
+++ b/app/views/projects/protected_branches/_branches_list.html.haml
@@ -23,6 +23,6 @@
           - if can_admin_project
             %th
       %tbody
-        = render partial: @protected_branches, locals: { can_admin_project: can_admin_project }
+        = render partial: 'projects/protected_branches/protected_branch', collection: @protected_branches, locals: { can_admin_project: can_admin_project}
 
     = paginate @protected_branches, theme: 'gitlab'
diff --git a/app/views/projects/protected_branches/_create_protected_branch.html.haml b/app/views/projects/protected_branches/_create_protected_branch.html.haml
index e95a3b1b4c3..b8e885b4d9a 100644
--- a/app/views/projects/protected_branches/_create_protected_branch.html.haml
+++ b/app/views/projects/protected_branches/_create_protected_branch.html.haml
@@ -10,7 +10,7 @@
           = f.label :name, class: 'col-md-2 text-right' do
             Branch:
           .col-md-10
-            = render partial: "dropdown", locals: { f: f }
+            = render partial: "projects/protected_branches/dropdown", locals: { f: f }
             .help-block
               = link_to 'Wildcards', help_page_path('user/project/protected_branches', anchor: 'wildcard-protected-branches')
               such as
diff --git a/app/views/projects/protected_branches/_dropdown.html.haml b/app/views/projects/protected_branches/_dropdown.html.haml
index a9e27df5a87..5af0cc7a2f3 100644
--- a/app/views/projects/protected_branches/_dropdown.html.haml
+++ b/app/views/projects/protected_branches/_dropdown.html.haml
@@ -10,6 +10,6 @@
 
   %ul.dropdown-footer-list
     %li
-      = link_to '#', title: "New Protected Branch", class: "create-new-protected-branch" do
+      %button{ class: "create-new-protected-branch-button js-create-new-protected-branch", title: "New Protected Branch" }
         Create wildcard
         %code
diff --git a/app/views/projects/protected_branches/_index.html.haml b/app/views/projects/protected_branches/_index.html.haml
new file mode 100644
index 00000000000..2d8c519c025
--- /dev/null
+++ b/app/views/projects/protected_branches/_index.html.haml
@@ -0,0 +1,21 @@
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('protected_branches')
+
+.row.prepend-top-default.append-bottom-default
+  .col-lg-3
+    %h4.prepend-top-0
+      Protected Branches
+    %p Keep stable branches secure and force developers to use merge requests.
+    %p.prepend-top-20
+      By default, protected branches are designed to:
+      %ul
+        %li prevent their creation, if not already created, from everybody except Masters
+        %li prevent pushes from everybody except Masters
+        %li prevent <strong>anyone</strong> from force pushing to the branch
+        %li prevent <strong>anyone</strong> from deleting the branch
+      %p.append-bottom-0 Read more about #{link_to "protected branches", help_page_path("user/project/protected_branches"), class: "underlined-link"} and #{link_to "project permissions", help_page_path("user/permissions"), class: "underlined-link"}.
+  .col-lg-9
+    - if can? current_user, :admin_project, @project
+      = render 'projects/protected_branches/create_protected_branch'
+
+    = render "projects/protected_branches/branches_list"
diff --git a/app/views/projects/protected_branches/_protected_branch.html.haml b/app/views/projects/protected_branches/_protected_branch.html.haml
index 0193800dedf..b2a6b8469a3 100644
--- a/app/views/projects/protected_branches/_protected_branch.html.haml
+++ b/app/views/projects/protected_branches/_protected_branch.html.haml
@@ -14,7 +14,7 @@
       - else
         (branch was removed from repository)
 
-  = render partial: 'update_protected_branch', locals: { protected_branch: protected_branch }
+  = render partial: 'projects/protected_branches/update_protected_branch', locals: { protected_branch: protected_branch }
 
   - if can_admin_project
     %td
diff --git a/app/views/projects/protected_branches/index.html.haml b/app/views/projects/protected_branches/index.html.haml
deleted file mode 100644
index 42e9bdbd30e..00000000000
--- a/app/views/projects/protected_branches/index.html.haml
+++ /dev/null
@@ -1,22 +0,0 @@
-- page_title "Protected branches"
-- content_for :page_specific_javascripts do
-  = page_specific_javascript_tag('protected_branches/protected_branches_bundle.js')
-
-.row.prepend-top-default.append-bottom-default
-  .col-lg-3
-    %h4.prepend-top-0
-      = page_title
-    %p Keep stable branches secure and force developers to use merge requests.
-    %p.prepend-top-20
-      By default, protected branches are designed to:
-      %ul
-        %li prevent their creation, if not already created, from everybody except Masters
-        %li prevent pushes from everybody except Masters
-        %li prevent <strong>anyone</strong> from force pushing to the branch
-        %li prevent <strong>anyone</strong> from deleting the branch
-      %p.append-bottom-0 Read more about #{link_to "protected branches", help_page_path("user/project/protected_branches"), class: "underlined-link"} and #{link_to "project permissions", help_page_path("user/permissions"), class: "underlined-link"}.
-  .col-lg-9
-    - if can? current_user, :admin_project, @project
-      = render 'create_protected_branch'
-
-    = render "branches_list"
diff --git a/app/views/projects/refs/logs_tree.js.haml b/app/views/projects/refs/logs_tree.js.haml
index 1141168f037..d07bb661615 100644
--- a/app/views/projects/refs/logs_tree.js.haml
+++ b/app/views/projects/refs/logs_tree.js.haml
@@ -14,5 +14,8 @@
       // Load more commit logs for each file in tree
       // if we still on the same page
       var url = "#{escape_javascript(@more_log_url)}";
-      ajaxGet(url);
+      gl.utils.ajaxGet(url);
     }
+
+:plain
+  gl.utils.localTimeAgo($('.js-timeago', 'table.table_#{@hex_path} tbody'));
diff --git a/app/views/projects/releases/edit.html.haml b/app/views/projects/releases/edit.html.haml
index 33d5cbff420..79d8d721aa9 100644
--- a/app/views/projects/releases/edit.html.haml
+++ b/app/views/projects/releases/edit.html.haml
@@ -7,7 +7,7 @@
     .oneline
       .title
         Release notes for tag
-        %strong #{@tag.name}
+        %strong= @tag.name
 
 
   = form_for(@release, method: :put, url: namespace_project_tag_release_path(@project.namespace, @project, @tag.name), html: { class: 'form-horizontal common-note-form release-form js-quick-submit' }) do |f|
diff --git a/app/views/projects/runners/_form.html.haml b/app/views/projects/runners/_form.html.haml
index 33a9a96183c..2ef1f98ba48 100644
--- a/app/views/projects/runners/_form.html.haml
+++ b/app/views/projects/runners/_form.html.haml
@@ -5,7 +5,7 @@
     .col-sm-10
       .checkbox
         = f.check_box :active
-        %span.light Paused Runners don't accept new builds
+        %span.light Paused Runners don't accept new jobs
   .form-group
     = label :run_untagged, 'Run untagged jobs', class: 'control-label'
     .col-sm-10
@@ -32,7 +32,7 @@
     = label_tag :tag_list, class: 'control-label' do
       Tags
     .col-sm-10
-      = f.text_field :tag_list, value: runner.tag_list.to_s, class: 'form-control'
+      = f.text_field :tag_list, value: runner.tag_list.sort.join(', '), class: 'form-control'
       .help-block You can setup jobs to only use Runners with specific tags
   .form-actions
     = f.submit 'Save changes', class: 'btn btn-save'
diff --git a/app/views/projects/runners/_index.html.haml b/app/views/projects/runners/_index.html.haml
new file mode 100644
index 00000000000..f9808f7c990
--- /dev/null
+++ b/app/views/projects/runners/_index.html.haml
@@ -0,0 +1,25 @@
+.light.prepend-top-default
+  %p
+    A 'Runner' is a process which runs a job.
+    You can setup as many Runners as you need.
+    %br
+    Runners can be placed on separate users, servers, and even on your local machine.
+
+  %p Each Runner can be in one of the following states:
+  %div
+    %ul
+      %li
+        %span.label.label-success active
+        \- Runner is active and can process any new jobs
+      %li
+        %span.label.label-danger paused
+        \- Runner is paused and will not receive any new jobs
+
+%hr
+
+%p.lead To start serving your jobs you can either add specific Runners to your project or use shared Runners
+.row
+  .col-sm-6
+    = render 'projects/runners/specific_runners'
+  .col-sm-6
+    = render 'projects/runners/shared_runners'
diff --git a/app/views/projects/runners/_runner.html.haml b/app/views/projects/runners/_runner.html.haml
index 6e58e5a0c78..deeadb609f6 100644
--- a/app/views/projects/runners/_runner.html.haml
+++ b/app/views/projects/runners/_runner.html.haml
@@ -1,4 +1,4 @@
-%li.runner{id: dom_id(runner)}
+%li.runner{ id: dom_id(runner) }
   %h4
     = runner_status_icon(runner)
     %span.monospace
@@ -31,6 +31,6 @@
       = runner.description
   - if runner.tag_list.present?
     %p
-      - runner.tag_list.each do |tag|
+      - runner.tag_list.sort.each do |tag|
         %span.label.label-primary
           = tag
diff --git a/app/views/projects/runners/_shared_runners.html.haml b/app/views/projects/runners/_shared_runners.html.haml
index 5afa193357e..0671dd66e78 100644
--- a/app/views/projects/runners/_shared_runners.html.haml
+++ b/app/views/projects/runners/_shared_runners.html.haml
@@ -22,7 +22,7 @@
 - else
   %h4.underlined-title Available shared Runners : #{@shared_runners_count}
   %ul.bordered-list.available-shared-runners
-    = render partial: 'runner', collection: @shared_runners, as: :runner
+    = render partial: 'projects/runners/runner', collection: @shared_runners, as: :runner
   - if @shared_runners_count > 10
     .light
       and #{@shared_runners_count - 10} more...
diff --git a/app/views/projects/runners/_specific_runners.html.haml b/app/views/projects/runners/_specific_runners.html.haml
index 51b0939564e..6b8e6bd4fee 100644
--- a/app/views/projects/runners/_specific_runners.html.haml
+++ b/app/views/projects/runners/_specific_runners.html.haml
@@ -9,10 +9,10 @@
       (checkout the #{link_to 'GitLab Runner section', 'https://about.gitlab.com/gitlab-ci/#gitlab-runner', target: '_blank'} for information on how to install it).
     %li
       Specify the following URL during the Runner setup:
-      %code #{ci_root_url(only_path: false)}
+      %code= ci_root_url(only_path: false)
     %li
       Use the following registration token during setup:
-      %code #{@project.runners_token}
+      %code= @project.runners_token
     %li
       Start the Runner!
 
@@ -20,10 +20,10 @@
 - if @project_runners.any?
   %h4.underlined-title Runners activated for this project
   %ul.bordered-list.activated-specific-runners
-    = render partial: 'runner', collection: @project_runners, as: :runner
+    = render partial: 'projects/runners/runner', collection: @project_runners, as: :runner
 
 - if @assignable_runners.any?
   %h4.underlined-title Available specific runners
   %ul.bordered-list.available-specific-runners
-    = render partial: 'runner', collection: @assignable_runners, as: :runner
+    = render partial: 'projects/runners/runner', collection: @assignable_runners, as: :runner
   = paginate @assignable_runners, theme: "gitlab"
diff --git a/app/views/projects/runners/index.html.haml b/app/views/projects/runners/index.html.haml
deleted file mode 100644
index 92957470070..00000000000
--- a/app/views/projects/runners/index.html.haml
+++ /dev/null
@@ -1,27 +0,0 @@
-- page_title "Runners"
-
-.light.prepend-top-default
-  %p
-    A 'Runner' is a process which runs a build.
-    You can setup as many Runners as you need.
-    %br
-    Runners can be placed on separate users, servers, and even on your local machine.
-
-  %p Each Runner can be in one of the following states:
-  %div
-    %ul
-      %li
-        %span.label.label-success active
-        \- Runner is active and can process any new builds
-      %li
-        %span.label.label-danger paused
-        \- Runner is paused and will not receive any new builds
-
-%hr
-
-%p.lead To start serving your builds you can either add specific Runners to your project or use shared Runners
-.row
-  .col-sm-6
-    = render 'specific_runners'
-  .col-sm-6
-    = render 'shared_runners'
diff --git a/app/views/projects/runners/show.html.haml b/app/views/projects/runners/show.html.haml
index 61b99f35d74..49415ba557b 100644
--- a/app/views/projects/runners/show.html.haml
+++ b/app/views/projects/runners/show.html.haml
@@ -28,7 +28,7 @@
     %tr
       %td Tags
       %td
-        - @runner.tag_list.each do |tag|
+        - @runner.tag_list.sort.each do |tag|
           %span.label.label-primary
             = tag
     %tr
diff --git a/app/views/projects/services/_form.html.haml b/app/views/projects/services/_form.html.haml
index b41edeb2c7e..f1a80f1d5e1 100644
--- a/app/views/projects/services/_form.html.haml
+++ b/app/views/projects/services/_form.html.haml
@@ -7,14 +7,14 @@
     %p= @service.description
   .col-lg-9
     = form_for(@service, as: :service, url: namespace_project_service_path(@project.namespace, @project, @service.to_param), method: :put, html: { class: 'form-horizontal' }) do |form|
-      = render 'shared/service_settings', form: form
+      = render 'shared/service_settings', form: form, subject: @service
+      .footer-block.row-content-block
+        = form.submit 'Save changes', class: 'btn btn-save'
+        &nbsp;
+        - if @service.valid? && @service.activated?
+          - unless @service.can_test?
+            - disabled_class = 'disabled'
+            - disabled_title = @service.disabled_title
 
-      = form.submit 'Save changes', class: 'btn btn-save'
-      &nbsp;
-      - if @service.valid? && @service.activated?
-        - unless @service.can_test?
-          - disabled_class = 'disabled'
-          - disabled_title = @service.disabled_title
-
-        = link_to 'Test settings', test_namespace_project_service_path(@project.namespace, @project, @service), class: "btn #{disabled_class}", title: disabled_title
-      = link_to "Cancel", namespace_project_services_path(@project.namespace, @project), class: "btn btn-cancel"
+          = link_to 'Test settings', test_namespace_project_service_path(@project.namespace, @project, @service), class: "btn #{disabled_class}", title: disabled_title
+        = link_to "Cancel", namespace_project_settings_integrations_path(@project.namespace, @project), class: "btn btn-cancel"
diff --git a/app/views/projects/services/_index.html.haml b/app/views/projects/services/_index.html.haml
new file mode 100644
index 00000000000..86d5a0ec7b8
--- /dev/null
+++ b/app/views/projects/services/_index.html.haml
@@ -0,0 +1,31 @@
+.row.prepend-top-default.append-bottom-default
+  .col-lg-3
+    %h4.prepend-top-0
+      Project services
+    %p Project services allow you to integrate GitLab with other applications
+  .col-lg-9
+    %table.table
+      %colgroup
+        %col
+        %col
+        %col.hidden-xs
+        %col{ width: "120" }
+      %thead
+        %tr
+          %th
+          %th Service
+          %th.hidden-xs Description
+          %th Last edit
+      - @services.sort_by(&:title).each do |service|
+        %tr
+          %td{ "aria-label" => "#{service.title}: status " + (service.activated? ? "on" : "off") }
+            = boolean_to_icon service.activated?
+          %td
+            = link_to edit_namespace_project_service_path(@project.namespace, @project, service.to_param) do
+              %strong= service.title
+          %td.hidden-xs
+            = service.description
+          %td.light
+            - if service.updated_at.present?
+              = time_ago_in_words service.updated_at
+              ago
diff --git a/app/views/projects/services/index.html.haml b/app/views/projects/services/index.html.haml
deleted file mode 100644
index 4a33a5bc6f6..00000000000
--- a/app/views/projects/services/index.html.haml
+++ /dev/null
@@ -1,32 +0,0 @@
-- page_title "Services"
-
-.row.prepend-top-default.append-bottom-default
-  .col-lg-3
-    %h4.prepend-top-0
-      Project services
-    %p Project services allow you to integrate GitLab with other applications
-  .col-lg-9
-    %table.table
-      %colgroup
-        %col
-        %col
-        %col.hidden-xs
-        %col{ width: "120" }
-      %thead
-        %tr
-          %th
-          %th Service
-          %th.hidden-xs Description
-          %th Last edit
-      - @services.sort_by(&:title).each do |service|
-        %tr
-          %td
-            = boolean_to_icon service.activated?
-          %td
-            = link_to edit_namespace_project_service_path(@project.namespace, @project, service.to_param) do
-              %strong= service.title
-          %td.hidden-xs
-            = service.description
-          %td.light
-            = time_ago_in_words service.updated_at
-            ago
diff --git a/app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml b/app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml
new file mode 100644
index 00000000000..2fb88297fb3
--- /dev/null
+++ b/app/views/projects/services/mattermost_slash_commands/_detailed_help.html.haml
@@ -0,0 +1,99 @@
+- run_actions_text = "Perform common operations on GitLab project: #{@project.name_with_namespace}"
+
+%p To setup this service:
+%ul.list-unstyled.indent-list
+  %li
+    1.
+    = link_to 'https://docs.mattermost.com/developer/slash-commands.html#enabling-custom-commands', target: '_blank', rel: 'noopener noreferrer nofollow' do
+      Enable custom slash commands
+      = icon('external-link')
+    on your Mattermost installation
+  %li
+    2.
+    = link_to 'https://docs.mattermost.com/developer/slash-commands.html#set-up-a-custom-command', target: '_blank', rel: 'noopener noreferrer nofollow' do
+      Add a slash command
+      = icon('external-link')
+    in your Mattermost team with these options:
+%hr
+
+.help-form
+  .form-group
+    = label_tag :display_name, 'Display name', class: 'col-sm-2 col-xs-12 control-label'
+    .col-sm-10.col-xs-12.input-group
+      = text_field_tag :display_name, "GitLab / #{@project.name_with_namespace}", class: 'form-control input-sm', readonly: 'readonly'
+      .input-group-btn
+        = clipboard_button(clipboard_target: '#display_name')
+
+  .form-group
+    = label_tag :description, 'Description', class: 'col-sm-2 col-xs-12 control-label'
+    .col-sm-10.col-xs-12.input-group
+      = text_field_tag :description, run_actions_text, class: 'form-control input-sm', readonly: 'readonly'
+      .input-group-btn
+        = clipboard_button(clipboard_target: '#description')
+
+  .form-group
+    = label_tag nil, 'Command trigger word', class: 'col-sm-2 col-xs-12 control-label'
+    .col-sm-10.col-xs-12.text-block
+      %p Fill in the word that works best for your team.
+      %p
+        Suggestions:
+        %code= 'gitlab'
+        %code= @project.path # Path contains no spaces, but dashes
+        %code= @project.path_with_namespace
+
+  .form-group
+    = label_tag :request_url, 'Request URL', class: 'col-sm-2 col-xs-12 control-label'
+    .col-sm-10.col-xs-12.input-group
+      = text_field_tag :request_url, service_trigger_url(subject), class: 'form-control input-sm', readonly: 'readonly'
+      .input-group-btn
+        = clipboard_button(clipboard_target: '#request_url')
+
+  .form-group
+    = label_tag nil, 'Request method', class: 'col-sm-2 col-xs-12 control-label'
+    .col-sm-10.col-xs-12.text-block POST
+
+  .form-group
+    = label_tag :response_username, 'Response username', class: 'col-sm-2 col-xs-12 control-label'
+    .col-sm-10.col-xs-12.input-group
+      = text_field_tag :response_username, 'GitLab', class: 'form-control input-sm', readonly: 'readonly'
+      .input-group-btn
+        = clipboard_button(clipboard_target: '#response_username')
+
+  .form-group
+    = label_tag :response_icon, 'Response icon', class: 'col-sm-2 col-xs-12 control-label'
+    .col-sm-10.col-xs-12.input-group
+      = text_field_tag :response_icon, asset_url('gitlab_logo.png'), class: 'form-control input-sm', readonly: 'readonly'
+      .input-group-btn
+        = clipboard_button(clipboard_target: '#response_icon')
+
+  .form-group
+    = label_tag nil, 'Autocomplete', class: 'col-sm-2 col-xs-12 control-label'
+    .col-sm-10.col-xs-12.text-block Yes
+
+  .form-group
+    = label_tag :autocomplete_hint, 'Autocomplete hint', class: 'col-sm-2 col-xs-12 control-label'
+    .col-sm-10.col-xs-12.input-group
+      = text_field_tag :autocomplete_hint, '[help]', class: 'form-control input-sm', readonly: 'readonly'
+      .input-group-btn
+        = clipboard_button(clipboard_target: '#autocomplete_hint')
+
+  .form-group
+    = label_tag :autocomplete_description, 'Autocomplete description', class: 'col-sm-2 col-xs-12 control-label'
+    .col-sm-10.col-xs-12.input-group
+      = text_field_tag :autocomplete_description, run_actions_text, class: 'form-control input-sm', readonly: 'readonly'
+      .input-group-btn
+        = clipboard_button(clipboard_target: '#autocomplete_description')
+
+%hr
+
+%ul.list-unstyled.indent-list
+  %li
+    3. Paste the
+    %strong Token
+    into the field below
+  %li
+    4. Select the
+    %strong Active
+    checkbox, press
+    %strong Save changes
+    and start using GitLab inside Mattermost!
diff --git a/app/views/projects/services/mattermost_slash_commands/_help.html.haml b/app/views/projects/services/mattermost_slash_commands/_help.html.haml
new file mode 100644
index 00000000000..2a1b9d4c465
--- /dev/null
+++ b/app/views/projects/services/mattermost_slash_commands/_help.html.haml
@@ -0,0 +1,18 @@
+- enabled = Gitlab.config.mattermost.enabled
+
+.well
+  %p
+    This service allows users to perform common operations on this
+    project by entering slash commands in Mattermost.
+    = link_to help_page_path('user/project/integrations/mattermost_slash_commands.md'), target: '_blank' do
+      View documentation
+      = icon('external-link')
+  %p.inline
+    See list of available commands in Mattermost after setting up this service,
+    by entering
+  %kbd.inline /&lt;trigger&gt; help
+  - unless enabled || @service.template?
+    = render 'projects/services/mattermost_slash_commands/detailed_help', subject: @service
+
+- if enabled && !@service.template?
+  = render 'projects/services/mattermost_slash_commands/installation_info', subject: @service
diff --git a/app/views/projects/services/mattermost_slash_commands/_installation_info.html.haml b/app/views/projects/services/mattermost_slash_commands/_installation_info.html.haml
new file mode 100644
index 00000000000..fcc91be11cd
--- /dev/null
+++ b/app/views/projects/services/mattermost_slash_commands/_installation_info.html.haml
@@ -0,0 +1,7 @@
+.services-installation-info
+  - unless @service.activated?
+    .row
+      .col-sm-9.col-sm-offset-3
+        = link_to new_namespace_project_mattermost_path(@project.namespace, @project), class: 'btn btn-lg' do
+          = custom_icon('mattermost_logo', size: 15)
+          Add to Mattermost
diff --git a/app/views/projects/services/slack_slash_commands/_help.html.haml b/app/views/projects/services/slack_slash_commands/_help.html.haml
new file mode 100644
index 00000000000..078b7be6865
--- /dev/null
+++ b/app/views/projects/services/slack_slash_commands/_help.html.haml
@@ -0,0 +1,99 @@
+- pretty_name = defined?(@project) ? @project.name_with_namespace : 'namespace / path'
+- run_actions_text = "Perform common operations on GitLab project: #{pretty_name}"
+
+.well
+  %p
+    This service allows users to perform common operations on this
+    project by entering slash commands in Slack.
+    = link_to help_page_path('user/project/integrations/slack_slash_commands.md'), target: '_blank' do
+      View documentation
+      = icon('external-link')
+  %p.inline
+    See list of available commands in Slack after setting up this service,
+    by entering
+  %kbd.inline /&lt;command&gt; help
+  - unless @service.template?
+    %p To setup this service:
+    %ul.list-unstyled.indent-list
+      %li
+        1.
+        = link_to 'https://my.slack.com/services/new/slash-commands', target: '_blank', rel: 'noreferrer noopener nofollow' do
+          Add a slash command
+          = icon('external-link')
+        in your Slack team with these options:
+
+    %hr
+
+    .help-form
+      .form-group
+        = label_tag nil, 'Command', class: 'col-sm-2 col-xs-12 control-label'
+        .col-sm-10.col-xs-12.text-block
+          %p Fill in the word that works best for your team.
+          %p
+            Suggestions:
+            %code= 'gitlab'
+            %code= @project.path # Path contains no spaces, but dashes
+            %code= @project.path_with_namespace
+
+      .form-group
+        = label_tag :url, 'URL', class: 'col-sm-2 col-xs-12 control-label'
+        .col-sm-10.col-xs-12.input-group
+          = text_field_tag :url, service_trigger_url(subject), class: 'form-control input-sm', readonly: 'readonly'
+          .input-group-btn
+            = clipboard_button(clipboard_target: '#url')
+
+      .form-group
+        = label_tag nil, 'Method', class: 'col-sm-2 col-xs-12 control-label'
+        .col-sm-10.col-xs-12.text-block POST
+
+      .form-group
+        = label_tag :customize_name, 'Customize name', class: 'col-sm-2 col-xs-12 control-label'
+        .col-sm-10.col-xs-12.input-group
+          = text_field_tag :customize_name, 'GitLab', class: 'form-control input-sm', readonly: 'readonly'
+          .input-group-btn
+            = clipboard_button(clipboard_target: '#customize_name')
+
+      .form-group
+        = label_tag nil, 'Customize icon', class: 'col-sm-2 col-xs-12 control-label'
+        .col-sm-10.col-xs-12.text-block
+          = image_tag(asset_url('slash-command-logo.png'), width: 36, height: 36)
+          = link_to('Download image', asset_url('gitlab_logo.png'), class: 'btn btn-sm', target: '_blank', rel: 'noopener noreferrer')
+
+      .form-group
+        = label_tag nil, 'Autocomplete', class: 'col-sm-2 col-xs-12 control-label'
+        .col-sm-10.col-xs-12.text-block Show this command in the autocomplete list
+
+      .form-group
+        = label_tag :autocomplete_description, 'Autocomplete description', class: 'col-sm-2 col-xs-12 control-label'
+        .col-sm-10.col-xs-12.input-group
+          = text_field_tag :autocomplete_description, run_actions_text, class: 'form-control input-sm', readonly: 'readonly'
+          .input-group-btn
+            = clipboard_button(clipboard_target: '#autocomplete_description')
+
+      .form-group
+        = label_tag :autocomplete_usage_hint, 'Autocomplete usage hint', class: 'col-sm-2 col-xs-12 control-label'
+        .col-sm-10.col-xs-12.input-group
+          = text_field_tag :autocomplete_usage_hint, '[help]', class: 'form-control input-sm', readonly: 'readonly'
+          .input-group-btn
+            = clipboard_button(clipboard_target: '#autocomplete_usage_hint')
+
+      .form-group
+        = label_tag :descriptive_label, 'Descriptive label', class: 'col-sm-2 col-xs-12 control-label'
+        .col-sm-10.col-xs-12.input-group
+          = text_field_tag :descriptive_label, 'Perform common operations on GitLab project', class: 'form-control input-sm', readonly: 'readonly'
+          .input-group-btn
+            = clipboard_button(clipboard_target: '#descriptive_label')
+
+    %hr
+
+    %ul.list-unstyled.indent-list
+      %li
+        2. Paste the
+        %strong Token
+        into the field below
+      %li
+        3. Select the
+        %strong Active
+        checkbox, press
+        %strong Save changes
+        and start using GitLab inside Slack!
diff --git a/app/views/projects/settings/_head.html.haml b/app/views/projects/settings/_head.html.haml
new file mode 100644
index 00000000000..88bcb541dac
--- /dev/null
+++ b/app/views/projects/settings/_head.html.haml
@@ -0,0 +1,33 @@
+= content_for :sub_nav do
+  .scrolling-tabs-container.sub-nav-scroll
+    = render 'shared/nav_scroll'
+    .nav-links.sub-nav.scrolling-tabs
+      %ul{ class: container_class }
+        - can_edit = can?(current_user, :admin_project, @project)
+        - if can_edit
+          = nav_link(controller: :projects) do
+            = link_to edit_project_path(@project), title: 'General' do
+              %span
+                General
+        = nav_link(controller: :members) do
+          = link_to project_settings_members_path(@project), title: 'Members' do
+            %span
+              Members
+        - if can_edit
+          = nav_link(controller: :integrations) do
+            = link_to project_settings_integrations_path(@project), title: 'Integrations' do
+              %span
+                Integrations
+          = nav_link(controller: :repository) do
+            = link_to namespace_project_settings_repository_path(@project.namespace, @project), title: 'Repository' do
+              %span
+                Repository
+          - if @project.feature_available?(:builds, current_user)
+            = nav_link(controller: :ci_cd) do
+              = link_to namespace_project_settings_ci_cd_path(@project.namespace, @project), title: 'CI/CD Pipelines' do
+                %span
+                  CI/CD Pipelines
+          = nav_link(controller: :pages) do
+            = link_to namespace_project_pages_path(@project.namespace, @project), title: 'Pages' do
+              %span
+                Pages
diff --git a/app/views/projects/settings/ci_cd/show.html.haml b/app/views/projects/settings/ci_cd/show.html.haml
new file mode 100644
index 00000000000..e2603096014
--- /dev/null
+++ b/app/views/projects/settings/ci_cd/show.html.haml
@@ -0,0 +1,7 @@
+- page_title "CI/CD Pipelines"
+= render "projects/settings/head"
+
+= render 'projects/runners/index'
+= render 'projects/variables/index'
+= render 'projects/triggers/index'
+= render 'projects/pipelines_settings/show'
diff --git a/app/views/projects/hooks/_project_hook.html.haml b/app/views/projects/settings/integrations/_project_hook.html.haml
index ceabe2eab3d..ceabe2eab3d 100644
--- a/app/views/projects/hooks/_project_hook.html.haml
+++ b/app/views/projects/settings/integrations/_project_hook.html.haml
diff --git a/app/views/projects/settings/integrations/show.html.haml b/app/views/projects/settings/integrations/show.html.haml
new file mode 100644
index 00000000000..f69992566b5
--- /dev/null
+++ b/app/views/projects/settings/integrations/show.html.haml
@@ -0,0 +1,4 @@
+- page_title 'Integrations'
+= render "projects/settings/head"
+= render 'projects/hooks/index'
+= render 'projects/services/index'
diff --git a/app/views/projects/settings/members/show.html.haml b/app/views/projects/settings/members/show.html.haml
new file mode 100644
index 00000000000..20e1ad68244
--- /dev/null
+++ b/app/views/projects/settings/members/show.html.haml
@@ -0,0 +1,7 @@
+- page_title "Members"
+= render "projects/settings/head"
+
+= render "projects/project_members/index"
+- if can?(current_user, :admin_project, @project)
+  - if @project.allowed_to_share_with_group?
+    = render "projects/group_links/index"
diff --git a/app/views/projects/settings/repository/show.html.haml b/app/views/projects/settings/repository/show.html.haml
new file mode 100644
index 00000000000..4c02302e161
--- /dev/null
+++ b/app/views/projects/settings/repository/show.html.haml
@@ -0,0 +1,5 @@
+- page_title "Repository"
+= render "projects/settings/head"
+
+= render @deploy_keys
+= render "projects/protected_branches/index"
diff --git a/app/views/projects/show.atom.builder b/app/views/projects/show.atom.builder
index 11310d5e1e1..5c7f2e315f0 100644
--- a/app/views/projects/show.atom.builder
+++ b/app/views/projects/show.atom.builder
@@ -1,7 +1,7 @@
 xml.instruct!
 xml.feed "xmlns" => "http://www.w3.org/2005/Atom", "xmlns:media" => "http://search.yahoo.com/mrss/" do
   xml.title   "#{@project.name} activity"
-  xml.link    href: namespace_project_url(@project.namespace, @project, format: :atom, private_token: current_user.try(:private_token)), rel: "self", type: "application/atom+xml"
+  xml.link    href: namespace_project_url(@project.namespace, @project, rss_url_options), rel: "self", type: "application/atom+xml"
   xml.link    href: namespace_project_url(@project.namespace, @project), rel: "alternate", type: "text/html"
   xml.id      namespace_project_url(@project.namespace, @project)
   xml.updated @events[0].updated_at.xmlschema if @events[0]
diff --git a/app/views/projects/show.html.haml b/app/views/projects/show.html.haml
index 4de95036eef..edfe6da1816 100644
--- a/app/views/projects/show.html.haml
+++ b/app/views/projects/show.html.haml
@@ -1,26 +1,26 @@
 - @no_container = true
 
 = content_for :meta_tags do
-  - if current_user
-    = auto_discovery_link_tag(:atom, namespace_project_path(@project.namespace, @project, format: :atom, private_token: current_user.private_token), title: "#{@project.name} activity")
+  = auto_discovery_link_tag(:atom, namespace_project_path(@project.namespace, @project, rss_url_options), title: "#{@project.name} activity")
 
 = content_for :flash_message do
   - if current_user && can?(current_user, :download_code, @project)
     = render 'shared/no_ssh'
     = render 'shared/no_password'
 
-= render 'projects/last_push'
+= render "projects/head"
+= render "projects/last_push"
 = render "home_panel"
 
 - if current_user && can?(current_user, :download_code, @project)
-  %nav.project-stats{ class: container_class }
+  %nav.project-stats.limit-container-width{ class: container_class }
     %ul.nav
       %li
         = link_to project_files_path(@project) do
-          Files (#{repository_size})
+          Files (#{storage_counter(@project.statistics.total_repository_size)})
       %li
         = link_to namespace_project_commits_path(@project.namespace, @project, current_ref) do
-          #{'Commit'.pluralize(@project.commit_count)} (#{number_with_delimiter(@project.commit_count)})
+          #{'Commit'.pluralize(@project.statistics.commit_count)} (#{number_with_delimiter(@project.statistics.commit_count)})
       %li
         = link_to namespace_project_branches_path(@project.namespace, @project) do
           #{'Branch'.pluralize(@repository.branch_count)} (#{number_with_delimiter(@repository.branch_count)})
@@ -64,24 +64,21 @@
         - unless @repository.gitlab_ci_yml
           %li.missing
             = link_to add_special_file_path(@project, file_name: '.gitlab-ci.yml') do
-              Set Up CI
-
-      %li.project-repo-buttons-right
-        .project-repo-buttons.project-right-buttons
-          - if current_user
-            = render 'shared/members/access_request_buttons', source: @project
-            = render "projects/buttons/koding"
-
-          .btn-group.project-repo-btn-group
-            = render 'projects/buttons/download', project: @project, ref: @ref
-            = render 'projects/buttons/dropdown'
+              Set up CI
+        - if koding_enabled? && @repository.koding_yml.blank?
+          %li.missing
+            = link_to 'Set up Koding', add_koding_stack_path(@project)
+        - if @repository.gitlab_ci_yml.blank? && @project.deployment_service.present?
+          %li.missing
+            = link_to add_special_file_path(@project, file_name: '.gitlab-ci.yml', commit_message: 'Set up auto deploy', target_branch: 'auto-deploy', context: 'autodeploy') do
+              Set up auto deploy
 
-          = render 'shared/notifications/button', notification_setting: @notification_setting
   - if @repository.commit
-    .project-last-commit{ class: container_class }
-      = render 'projects/last_commit', commit: @repository.commit, ref: current_ref, project: @project
+    .limit-container-width{ class: container_class }
+      .project-last-commit
+        = render 'projects/last_commit', commit: @repository.commit, ref: current_ref, project: @project
 
-%div{ class: container_class }
+.limit-container-width{ class: container_class }
   - if @project.archived?
     .text-warning.center.prepend-top-20
       %p
diff --git a/app/views/projects/snippets/_actions.html.haml b/app/views/projects/snippets/_actions.html.haml
index 32e1f8a21b0..34ee4ff1937 100644
--- a/app/views/projects/snippets/_actions.html.haml
+++ b/app/views/projects/snippets/_actions.html.haml
@@ -1,13 +1,17 @@
+- return unless current_user
+
 .hidden-xs
-  - if can?(current_user, :create_project_snippet, @project)
-    = link_to new_namespace_project_snippet_path(@project.namespace, @project), class: 'btn btn-grouped btn-create new-snippet-link', title: "New snippet" do
-      New snippet
   - if can?(current_user, :update_project_snippet, @snippet)
-    = link_to namespace_project_snippet_path(@project.namespace, @project, @snippet), method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-grouped btn-danger", title: 'Delete Snippet' do
-      Delete
-  - if can?(current_user, :update_project_snippet, @snippet)
-    = link_to edit_namespace_project_snippet_path(@project.namespace, @project, @snippet), class: "btn btn-grouped snippable-edit" do
+    = link_to edit_namespace_project_snippet_path(@project.namespace, @project, @snippet), class: "btn btn-grouped" do
       Edit
+  - if can?(current_user, :update_project_snippet, @snippet)
+    = link_to namespace_project_snippet_path(@project.namespace, @project, @snippet), method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-grouped btn-inverted btn-remove", title: 'Delete Snippet' do
+      Delete
+  - if can?(current_user, :create_project_snippet, @project)
+    = link_to new_namespace_project_snippet_path(@project.namespace, @project), class: 'btn btn-grouped btn-inverted btn-create', title: "New snippet" do
+      New snippet
+  - if @snippet.submittable_as_spam_by?(current_user)
+    = link_to 'Submit as spam', mark_as_spam_namespace_project_snippet_path(@project.namespace, @project, @snippet), method: :post, class: 'btn btn-grouped btn-spam', title: 'Submit as spam'
 - if can?(current_user, :create_project_snippet, @project) || can?(current_user, :update_project_snippet, @snippet)
   .visible-xs-block.dropdown
     %button.btn.btn-default.btn-block.append-bottom-0.prepend-top-5{ data: { toggle: "dropdown" } }
@@ -27,3 +31,6 @@
           %li
             = link_to edit_namespace_project_snippet_path(@project.namespace, @project, @snippet) do
               Edit
+        - if @snippet.submittable_as_spam_by?(current_user)
+          %li
+            = link_to 'Submit as spam', mark_as_spam_namespace_project_snippet_path(@project.namespace, @project, @snippet), method: :post
diff --git a/app/views/projects/snippets/edit.html.haml b/app/views/projects/snippets/edit.html.haml
index 216f70f5605..fb39028529d 100644
--- a/app/views/projects/snippets/edit.html.haml
+++ b/app/views/projects/snippets/edit.html.haml
@@ -3,4 +3,4 @@
 %h3.page-title
   Edit Snippet
 %hr
-= render "shared/snippets/form", url: namespace_project_snippet_path(@project.namespace, @project, @snippet), visibility_level: @snippet.visibility_level
+= render "shared/snippets/form", url: namespace_project_snippet_path(@project.namespace, @project, @snippet)
diff --git a/app/views/projects/snippets/index.html.haml b/app/views/projects/snippets/index.html.haml
index e77e1b026f6..84e05cd6d88 100644
--- a/app/views/projects/snippets/index.html.haml
+++ b/app/views/projects/snippets/index.html.haml
@@ -1,11 +1,19 @@
 - page_title "Snippets"
 
-.sub-header-block
-  - if can?(current_user, :create_project_snippet, @project)
-    = link_to new_namespace_project_snippet_path(@project.namespace, @project), class: "btn btn-new btn-wide-on-sm pull-right", title: "New snippet" do
-      New snippet
+- if current_user
+  .top-area
+    - include_private = @project.team.member?(current_user) || current_user.admin?
+    = render partial: 'snippets/snippets_scope_menu', locals: { subject: @project, include_private: include_private }
+
+    .nav-controls.hidden-xs
+      - if can?(current_user, :create_project_snippet, @project)
+        = link_to new_namespace_project_snippet_path(@project.namespace, @project), class: "btn btn-new", title: "New snippet" do
+          New snippet
 
-  .oneline
-    Share code pastes with others out of git repository
+- if can?(current_user, :create_project_snippet, @project)
+  .visible-xs
+    &nbsp;
+    = link_to new_namespace_project_snippet_path(@project.namespace, @project), class: "btn btn-new btn-block", title: "New snippet" do
+      New snippet
 
 = render 'snippets/snippets'
diff --git a/app/views/projects/snippets/new.html.haml b/app/views/projects/snippets/new.html.haml
index 772a594269c..cfed3a79bc5 100644
--- a/app/views/projects/snippets/new.html.haml
+++ b/app/views/projects/snippets/new.html.haml
@@ -3,4 +3,4 @@
 %h3.page-title
   New Snippet
 %hr
-= render "shared/snippets/form", url: namespace_project_snippets_path(@project.namespace, @project, @snippet), visibility_level: default_snippet_visibility
+= render "shared/snippets/form", url: namespace_project_snippets_path(@project.namespace, @project, @snippet)
diff --git a/app/views/projects/snippets/show.html.haml b/app/views/projects/snippets/show.html.haml
index 9503dbded13..e35385f4cab 100644
--- a/app/views/projects/snippets/show.html.haml
+++ b/app/views/projects/snippets/show.html.haml
@@ -4,14 +4,9 @@
 
 .project-snippets
   %article.file-holder.snippet-file-content
-    .file-title
-      = blob_icon 0, @snippet.file_name
-      = @snippet.file_name
-      .file-actions
-        = clipboard_button(clipboard_target: ".blob-content[data-blob-id='#{@snippet.id}']")
-        = link_to 'Raw', raw_namespace_project_snippet_path(@project.namespace, @project, @snippet), class: "btn btn-sm", target: "_blank"
-    = render 'shared/snippets/blob'
+    = render 'shared/snippets/blob', raw_path: raw_namespace_project_snippet_path(@project.namespace, @project, @snippet)
 
-  = render 'award_emoji/awards_block', awardable: @snippet, inline: true
+  .row-content-block.top-block.content-component-block
+    = render 'award_emoji/awards_block', awardable: @snippet, inline: true
 
-  %div#notes= render "projects/notes/notes_with_form"
+  #notes= render "projects/notes/notes_with_form"
diff --git a/app/views/projects/snippets/verify.html.haml b/app/views/projects/snippets/verify.html.haml
new file mode 100644
index 00000000000..eb56f03b3f4
--- /dev/null
+++ b/app/views/projects/snippets/verify.html.haml
@@ -0,0 +1,4 @@
+- form = [@project.namespace.becomes(Namespace), @project, @snippet.becomes(Snippet)]
+
+= render 'layouts/recaptcha_verification', spammable: @snippet, form: form
+
diff --git a/app/views/projects/stage/_graph.html.haml b/app/views/projects/stage/_graph.html.haml
new file mode 100644
index 00000000000..4ee30b023ac
--- /dev/null
+++ b/app/views/projects/stage/_graph.html.haml
@@ -0,0 +1,19 @@
+- stage = local_assigns.fetch(:stage)
+- statuses = stage.statuses.latest
+- status_groups = statuses.sort_by(&:sortable_name).group_by(&:group_name)
+%li.stage-column
+  .stage-name
+    %a{ name: stage.name }
+    = stage.name.titleize
+  .builds-container
+    %ul
+      - status_groups.each do |group_name, grouped_statuses|
+        - if grouped_statuses.one?
+          - status = grouped_statuses.first
+          %li.build{ 'id' => "ci-badge-#{group_name}" }
+            .curve
+            = render 'ci/status/graph_badge', subject: status
+        - else
+          %li.build{ 'id' => "ci-badge-#{group_name}" }
+            .curve
+            = render 'projects/stage/in_stage_group', name: group_name, subject: grouped_statuses
diff --git a/app/views/projects/stage/_in_stage_group.html.haml b/app/views/projects/stage/_in_stage_group.html.haml
new file mode 100644
index 00000000000..671a3ef481c
--- /dev/null
+++ b/app/views/projects/stage/_in_stage_group.html.haml
@@ -0,0 +1,14 @@
+- group_status = CommitStatus.where(id: subject).status
+%button.dropdown-menu-toggle.build-content.has-tooltip{ type: 'button', data: { toggle: 'dropdown',  title: "#{name} - #{group_status}", container: 'body' } }
+  %span{ class: "ci-status-icon ci-status-icon-#{group_status}" }
+    = ci_icon_for_status(group_status)
+  %span.ci-status-text
+    = name
+  %span.dropdown-counter-badge= subject.size
+
+%ul.dropdown-menu.big-pipeline-graph-dropdown-menu.js-grouped-pipeline-dropdown
+  .arrow
+  .scrollable-menu
+    - subject.each do |status|
+      %li
+        = render 'ci/status/dropdown_graph_badge', subject: status
diff --git a/app/views/projects/stage/_stage.html.haml b/app/views/projects/stage/_stage.html.haml
new file mode 100644
index 00000000000..28e1c060875
--- /dev/null
+++ b/app/views/projects/stage/_stage.html.haml
@@ -0,0 +1,13 @@
+%tr
+  %th{ colspan: 10 }
+    %strong
+      %a{ name: stage.name }
+      %span{ class: "ci-status-link ci-status-icon-#{stage.status}" }
+        = ci_icon_for_status(stage.status)
+      &nbsp;
+      = stage.name.titleize
+= render stage.statuses.latest_ordered, coverage: @project.build_coverage_enabled?, stage: false, ref: false, pipeline_link: false, allow_retry: true
+= render stage.statuses.retried_ordered, coverage: @project.build_coverage_enabled?, stage: false, ref: false, pipeline_link: false, retried: true
+%tr
+  %td{ colspan: 10 }
+    &nbsp;
diff --git a/app/views/projects/tags/_tag.html.haml b/app/views/projects/tags/_tag.html.haml
index c42641afea0..dffe908e85a 100644
--- a/app/views/projects/tags/_tag.html.haml
+++ b/app/views/projects/tags/_tag.html.haml
@@ -1,7 +1,7 @@
 - commit = @repository.commit(tag.dereferenced_target)
 - release = @releases.find { |release| release.tag == tag.name }
-%li
-  %div
+%li.flex-row
+  .row-main-content.str-truncated
     = link_to namespace_project_tag_path(@project.namespace, @project, tag.name) do
       %span.item-title
         = icon('tag')
@@ -10,24 +10,25 @@
       &nbsp;
       = strip_gpg_signature(tag.message)
 
-    .controls
-      = render 'projects/buttons/download', project: @project, ref: tag.name
+    - if commit
+      .block-truncated
+        = render 'projects/branches/commit', commit: commit, project: @project
+    - else
+      %p
+        Cant find HEAD commit for this tag
+    - if release && release.description.present?
+      .description.prepend-top-default
+        .wiki
+          = preserve do
+            = markdown_field(release, :description)
 
-      - if can?(current_user, :push_code, @project)
-        = link_to edit_namespace_project_tag_release_path(@project.namespace, @project, tag.name), class: 'btn has-tooltip', title: "Edit release notes", data: { container: "body" } do
-          = icon("pencil")
+  .row-fixed-content.controls
+    = render 'projects/buttons/download', project: @project, ref: tag.name, pipeline: @tags_pipelines[tag.name]
 
-      - if can?(current_user, :admin_project, @project)
-        = link_to namespace_project_tag_path(@project.namespace, @project, tag.name), class: 'btn btn-remove remove-row has-tooltip', title: "Delete tag", method: :delete, data: { confirm: "Deleting the '#{tag.name}' tag cannot be undone. Are you sure?", container: 'body' }, remote: true do
-          = icon("trash-o")
+    - if can?(current_user, :push_code, @project)
+      = link_to edit_namespace_project_tag_release_path(@project.namespace, @project, tag.name), class: 'btn has-tooltip', title: "Edit release notes", data: { container: "body" } do
+        = icon("pencil")
 
-  - if commit
-    = render 'projects/branches/commit', commit: commit, project: @project
-  - else
-    %p
-      Cant find HEAD commit for this tag
-  - if release && release.description.present?
-    .description.prepend-top-default
-      .wiki
-        = preserve do
-          = markdown_field(release, :description)
+    - if can?(current_user, :admin_project, @project)
+      = link_to namespace_project_tag_path(@project.namespace, @project, tag.name), class: 'btn btn-remove remove-row has-tooltip', title: "Delete tag", method: :delete, data: { confirm: "Deleting the '#{tag.name}' tag cannot be undone. Are you sure?", container: 'body' }, remote: true do
+        = icon("trash-o")
diff --git a/app/views/projects/tags/destroy.js.haml b/app/views/projects/tags/destroy.js.haml
index e4a78fadbeb..cde23e03d54 100644
--- a/app/views/projects/tags/destroy.js.haml
+++ b/app/views/projects/tags/destroy.js.haml
@@ -1,2 +1,4 @@
-- if @repository.tags.empty?
+- if @error.present?
+  new Flash('#{escape_javascript(@error)}', 'alert');
+- elsif @repository.tags.empty?
   $('.tags').load(document.URL + ' .nothing-here-block').hide().fadeIn(1000)
diff --git a/app/views/projects/tags/index.html.haml b/app/views/projects/tags/index.html.haml
index 7a0d9dcc94f..7f9a44e565f 100644
--- a/app/views/projects/tags/index.html.haml
+++ b/app/views/projects/tags/index.html.haml
@@ -2,23 +2,24 @@
 - page_title "Tags"
 = render "projects/commits/head"
 
-%div{ class: container_class }
-  .top-area
-    .nav-text
+.flex-list{ class: container_class }
+  .top-area.adjust
+    .nav-text.row-main-content
       Tags give the ability to mark specific points in history as being important
 
-    .nav-controls
+    .nav-controls.row-fixed-content
       = form_tag(filter_tags_path, method: :get) do
         = search_field_tag :search, params[:search], { placeholder: 'Filter by tag name', id: 'tag-search', class: 'form-control search-text-input input-short', spellcheck: false }
-      .dropdown.inline
-        %button.dropdown-toggle.btn{ type: 'button', data: { toggle: 'dropdown'} }
+
+      .dropdown
+        %button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown'} }
           %span.light
-            = @sort.humanize
-          = icon('caret-down')
+            = projects_sort_options_hash[@sort]
+          = icon('chevron-down')
         %ul.dropdown-menu.dropdown-menu-align-right
           %li
-            = link_to filter_tags_path(sort: nil) do
-              Name
+            = link_to filter_tags_path(sort: sort_value_name) do
+              = sort_title_name
             = link_to filter_tags_path(sort: sort_value_recently_updated) do
               = sort_title_recently_updated
             = link_to filter_tags_path(sort: sort_value_oldest_updated) do
@@ -29,7 +30,7 @@
 
   .tags
     - if @tags.any?
-      %ul.content-list
+      %ul.flex-list.content-list
         = render partial: 'tag', collection: @tags
 
       = paginate @tags, theme: 'gitlab'
diff --git a/app/views/projects/tags/new.html.haml b/app/views/projects/tags/new.html.haml
index 3a097750d6e..160d4c7a223 100644
--- a/app/views/projects/tags/new.html.haml
+++ b/app/views/projects/tags/new.html.haml
@@ -2,7 +2,7 @@
 
 - if @error
   .alert.alert-danger
-    %button{ type: "button", class: "close", "data-dismiss" => "alert"} &times;
+    %button.close{ type: "button", "data-dismiss" => "alert" } &times;
     = @error
 
 %h3.page-title
@@ -23,7 +23,7 @@
     = label_tag :message, nil, class: 'control-label'
     .col-sm-10
       = text_area_tag :message, nil, required: false, tabindex: 3, class: 'form-control', rows: 5
-      .help-block Optionally, enter a message to create an annotated tag.
+      .help-block Optionally, add a message to the tag.
   %hr
   .form-group
     = label_tag :release_description, 'Release notes', class: 'control-label'
diff --git a/app/views/projects/tags/show.html.haml b/app/views/projects/tags/show.html.haml
index 155af755759..fad3c5c2173 100644
--- a/app/views/projects/tags/show.html.haml
+++ b/app/views/projects/tags/show.html.haml
@@ -3,29 +3,32 @@
 = render "projects/commits/head"
 
 %div{ class: container_class }
-  .sub-header-block
-    .pull-right.tag-buttons
-      - if can?(current_user, :push_code, @project)
-        = link_to edit_namespace_project_tag_release_path(@project.namespace, @project, @tag.name), class: 'btn has-tooltip', title: 'Edit release notes' do
-          = icon("pencil")
-      = link_to namespace_project_tree_path(@project.namespace, @project, @tag.name), class: 'btn has-tooltip', title: 'Browse files' do
-        = icon('files-o')
-      = link_to namespace_project_commits_path(@project.namespace, @project, @tag.name), class: 'btn has-tooltip', title: 'Browse commits' do
-        = icon('history')
-      = render 'projects/buttons/download', project: @project, ref: @tag.name
-      - if can?(current_user, :admin_project, @project)
-        .pull-right
-          = link_to namespace_project_tag_path(@project.namespace, @project, @tag.name), class: 'btn btn-remove remove-row grouped has-tooltip', title: "Delete tag", method: :delete, data: { confirm: "Deleting the '#{@tag.name}' tag cannot be undone. Are you sure?" } do
-            %i.fa.fa-trash-o
-    .tag-info.append-bottom-10
+  .top-area.multi-line
+    .nav-text
       .title
         %span.item-title= @tag.name
       - if @commit
         = render 'projects/branches/commit', commit: @commit, project: @project
       - else
         Cant find HEAD commit for this tag
+
+    .nav-controls.controls-flex
+      - if can?(current_user, :push_code, @project)
+        = link_to edit_namespace_project_tag_release_path(@project.namespace, @project, @tag.name), class: 'btn controls-item has-tooltip', title: 'Edit release notes' do
+          = icon("pencil")
+      = link_to namespace_project_tree_path(@project.namespace, @project, @tag.name), class: 'btn controls-item has-tooltip', title: 'Browse files' do
+        = icon('files-o')
+      = link_to namespace_project_commits_path(@project.namespace, @project, @tag.name), class: 'btn controls-item has-tooltip', title: 'Browse commits' do
+        = icon('history')
+      .btn-container.controls-item
+        = render 'projects/buttons/download', project: @project, ref: @tag.name
+      - if can?(current_user, :admin_project, @project)
+        .btn-container.controls-item-full
+          = link_to namespace_project_tag_path(@project.namespace, @project, @tag.name), class: 'btn btn-remove remove-row has-tooltip', title: "Delete tag", method: :delete, data: { confirm: "Deleting the '#{@tag.name}' tag cannot be undone. Are you sure?" } do
+            %i.fa.fa-trash-o
+
     - if @tag.message.present?
-      %pre.body
+      %pre.wrap
         = strip_gpg_signature(@tag.message)
 
   .append-bottom-default.prepend-top-default
diff --git a/app/views/projects/tree/_blob_item.html.haml b/app/views/projects/tree/_blob_item.html.haml
index ee417b58cbf..425b460eb09 100644
--- a/app/views/projects/tree/_blob_item.html.haml
+++ b/app/views/projects/tree/_blob_item.html.haml
@@ -6,4 +6,4 @@
       %span.str-truncated= file_name
   %td.hidden-xs.tree-commit
   %td.tree-time-ago.cgray.text-right
-    = render 'projects/tree/spinner'
\ No newline at end of file
+    = render 'projects/tree/spinner'
diff --git a/app/views/projects/tree/_readme.html.haml b/app/views/projects/tree/_readme.html.haml
index a1f4e3e8ed6..bdcc160a067 100644
--- a/app/views/projects/tree/_readme.html.haml
+++ b/app/views/projects/tree/_readme.html.haml
@@ -1,5 +1,5 @@
 %article.file-holder.readme-holder
-  .file-title
+  .js-file-title.file-title
     = blob_icon readme.mode, readme.name
     = link_to namespace_project_blob_path(@project.namespace, @project, tree_join(@ref, @path, readme.name)) do
       %strong
diff --git a/app/views/projects/tree/_submodule_item.html.haml b/app/views/projects/tree/_submodule_item.html.haml
index 2b5f671c09e..04d52361db0 100644
--- a/app/views/projects/tree/_submodule_item.html.haml
+++ b/app/views/projects/tree/_submodule_item.html.haml
@@ -1,4 +1,4 @@
-%tr{ class: "tree-item" }
+%tr.tree-item
   %td.tree-item-file-name
     %i.fa.fa-archive.fa-fw
     = submodule_link(submodule_item, @ref)
diff --git a/app/views/projects/tree/_tree_content.html.haml b/app/views/projects/tree/_tree_content.html.haml
index 21e378b8735..6855c463c6d 100644
--- a/app/views/projects/tree/_tree_content.html.haml
+++ b/app/views/projects/tree/_tree_content.html.haml
@@ -1,19 +1,18 @@
-%div.tree-content-holder
+.tree-content-holder
   .table-holder
-    %table.table#tree-slider{class: "table_#{@hex_path} tree-table" }
+    %table.table#tree-slider{ class: "table_#{@hex_path} tree-table" }
       %thead
         %tr
           %th Name
           %th.hidden-xs
-            .pull-left Last Commit
+            .pull-left Last commit
             .last-commit.hidden-sm.pull-left
-              &nbsp;
               %i.fa.fa-angle-right
-              &nbsp;
               %small.light
                 = link_to @commit.short_id, namespace_project_commit_path(@project.namespace, @project, @commit), class: "monospace"
-                &ndash;
+                = clipboard_button(clipboard_text: @commit.id, title: "Copy commit SHA to clipboard")
                 = time_ago_with_tooltip(@commit.committed_date)
+                \-
                 = @commit.full_title
             %small.commit-history-link-spacer &#124;
             = link_to 'History', namespace_project_commits_path(@project.namespace, @project, @id), class: 'commit-history-link'
diff --git a/app/views/projects/tree/_tree_header.html.haml b/app/views/projects/tree/_tree_header.html.haml
index 1c5f8b3928b..259207a6dfd 100644
--- a/app/views/projects/tree/_tree_header.html.haml
+++ b/app/views/projects/tree/_tree_header.html.haml
@@ -15,11 +15,11 @@
   - if current_user
     %li
       - if !on_top_of_branch?
-        %span.btn.add-to-tree.disabled.has-tooltip{title: "You can only add files when you are on a branch", data: { container: 'body' }}
+        %span.btn.add-to-tree.disabled.has-tooltip{ title: "You can only add files when you are on a branch", data: { container: 'body' } }
           = icon('plus')
       - else
         %span.dropdown
-          %a.dropdown-toggle.btn.add-to-tree{href: '#', "data-toggle" => "dropdown"}
+          %a.dropdown-toggle.btn.add-to-tree{ href: '#', "data-toggle" => "dropdown" }
             = icon('plus')
           %ul.dropdown-menu
             - if can_edit_tree?
@@ -28,11 +28,11 @@
                   = icon('pencil fw')
                   New file
               %li
-                = link_to '#modal-upload-blob', { 'data-target' => '#modal-upload-blob', 'data-toggle' => 'modal'} do
+                = link_to '#modal-upload-blob', { 'data-target' => '#modal-upload-blob', 'data-toggle' => 'modal' } do
                   = icon('file fw')
                   Upload file
               %li
-                = link_to '#modal-create-new-dir', { 'data-target' => '#modal-create-new-dir', 'data-toggle' => 'modal'} do
+                = link_to '#modal-create-new-dir', { 'data-target' => '#modal-create-new-dir', 'data-toggle' => 'modal' } do
                   = icon('folder fw')
                   New directory
             - elsif can?(current_user, :fork_project, @project)
diff --git a/app/views/projects/tree/_tree_item.html.haml b/app/views/projects/tree/_tree_item.html.haml
index 1ccef6d52ab..15c9536133c 100644
--- a/app/views/projects/tree/_tree_item.html.haml
+++ b/app/views/projects/tree/_tree_item.html.haml
@@ -6,4 +6,4 @@
       %span.str-truncated= path
   %td.hidden-xs.tree-commit
   %td.tree-time-ago.text-right
-    = render 'projects/tree/spinner'
\ No newline at end of file
+    = render 'projects/tree/spinner'
diff --git a/app/views/projects/tree/show.html.haml b/app/views/projects/tree/show.html.haml
index 9864be3562a..a2a26039220 100644
--- a/app/views/projects/tree/show.html.haml
+++ b/app/views/projects/tree/show.html.haml
@@ -2,8 +2,7 @@
 
 - page_title @path.presence || "Files", @ref
 = content_for :meta_tags do
-  - if current_user
-    = auto_discovery_link_tag(:atom, namespace_project_commits_url(@project.namespace, @project, @ref, format: :atom, private_token: current_user.private_token), title: "#{@project.name}:#{@ref} commits")
+  = auto_discovery_link_tag(:atom, namespace_project_commits_url(@project.namespace, @project, @ref, rss_url_options), title: "#{@project.name}:#{@ref} commits")
 = render "projects/commits/head"
 = render 'projects/last_push'
 
diff --git a/app/views/projects/triggers/_content.html.haml b/app/views/projects/triggers/_content.html.haml
new file mode 100644
index 00000000000..ea32eac2ae2
--- /dev/null
+++ b/app/views/projects/triggers/_content.html.haml
@@ -0,0 +1,14 @@
+%h4.prepend-top-0
+  Triggers
+%p.prepend-top-20
+  Triggers can force a specific branch or tag to get rebuilt with an API call.  These tokens will
+  impersonate their associated user including their access to projects and their project
+  permissions.
+%p.prepend-top-20
+  Triggers with the
+  %span.label.label-primary legacy
+  label do not have an associated user and only have access to the current project.
+%p.append-bottom-0
+  = succeed '.' do
+    Learn more in the
+    = link_to 'triggers documentation', help_page_path('ci/triggers/README'), target: '_blank'
diff --git a/app/views/projects/triggers/_form.html.haml b/app/views/projects/triggers/_form.html.haml
new file mode 100644
index 00000000000..5f708b3a2ed
--- /dev/null
+++ b/app/views/projects/triggers/_form.html.haml
@@ -0,0 +1,11 @@
+= form_for [@project.namespace.becomes(Namespace), @project, @trigger], html: { class: 'gl-show-field-errors' } do |f|
+  = form_errors(@trigger)
+
+  - if @trigger.token
+    .form-group
+      %label.label-light Token
+      %p.form-control-static= @trigger.token
+  .form-group
+    = f.label :key, "Description", class: "label-light"
+    = f.text_field :description, class: "form-control", required: true, title: 'Trigger description is required.', placeholder: "Trigger description"
+  = f.submit btn_text, class: "btn btn-save"
diff --git a/app/views/projects/triggers/_index.html.haml b/app/views/projects/triggers/_index.html.haml
new file mode 100644
index 00000000000..cc74e50a5e3
--- /dev/null
+++ b/app/views/projects/triggers/_index.html.haml
@@ -0,0 +1,104 @@
+.row.prepend-top-default.append-bottom-default.triggers-container
+  .col-lg-3
+    = render "projects/triggers/content"
+  .col-lg-9
+    .panel.panel-default
+      .panel-heading
+        %h4.panel-title
+          Manage your project's triggers
+      .panel-body
+        = render "projects/triggers/form", btn_text: "Add trigger"
+        %hr
+        - if @triggers.any?
+          .table-responsive.triggers-list
+            %table.table
+              %thead
+                %th
+                  %strong Token
+                %th
+                  %strong Description
+                %th
+                  %strong Owner
+                %th
+                  %strong Last used
+                %th
+              = render partial: 'projects/triggers/trigger', collection: @triggers, as: :trigger
+        - else
+          %p.settings-message.text-center.append-bottom-default
+            No triggers have been created yet. Add one using the form above.
+
+      .panel-footer
+
+        %p
+          In the following examples, you can see the exact API call you need to
+          make in order to rebuild a specific
+          %code ref
+          (branch or tag) with a trigger token.
+        %p
+          All you need to do is replace the
+          %code TOKEN
+          and
+          %code REF_NAME
+          with the trigger token and the branch or tag name respectively.
+
+        %h5.prepend-top-default
+          Use cURL
+
+        %p.light
+          Copy one of the tokens above, set your branch or tag name, and that
+          reference will be rebuilt.
+
+        %pre
+          :plain
+            curl -X POST \
+                 -F token=TOKEN \
+                 -F ref=REF_NAME \
+                 #{builds_trigger_url(@project.id)}
+        %h5.prepend-top-default
+          Use .gitlab-ci.yml
+
+        %p.light
+          In the
+          %code .gitlab-ci.yml
+          of another project, include the following snippet.
+          The project will be rebuilt at the end of the pipeline.
+
+        %pre
+          :plain
+            trigger_build:
+              stage: deploy
+              script:
+                - "curl -X POST -F token=TOKEN -F ref=REF_NAME #{builds_trigger_url(@project.id)}"
+        %h5.prepend-top-default
+          Use webhook
+
+        %p.light
+          Add the following webhook to another project for Push and Tag push events.
+          The project will be rebuilt at the corresponding event.
+
+        %pre
+          :plain
+             #{builds_trigger_url(@project.id, ref: 'REF_NAME')}?token=TOKEN
+        %h5.prepend-top-default
+          Pass job variables
+
+        %p.light
+          Add
+          %code variables[VARIABLE]=VALUE
+          to an API request. Variable values can be used to distinguish between triggered pipelines and normal pipelines.
+
+          With cURL:
+
+        %pre
+          :plain
+            curl -X POST \
+                 -F token=TOKEN \
+                 -F "ref=REF_NAME" \
+                 -F "variables[RUN_NIGHTLY_BUILD]=true" \
+                 #{builds_trigger_url(@project.id)}
+        %p.light
+          With webhook:
+
+        %pre.append-bottom-0
+          :plain
+             #{builds_trigger_url(@project.id, ref: 'REF_NAME')}?token=TOKEN&variables[RUN_NIGHTLY_BUILD]=true
diff --git a/app/views/projects/triggers/_trigger.html.haml b/app/views/projects/triggers/_trigger.html.haml
index 112b51712ef..ed68e0ed56d 100644
--- a/app/views/projects/triggers/_trigger.html.haml
+++ b/app/views/projects/triggers/_trigger.html.haml
@@ -1,12 +1,42 @@
 %tr
   %td
-    %span.monospace= trigger.token
+    - if can?(current_user, :admin_trigger, trigger)
+      %span= trigger.token
+      = clipboard_button(clipboard_text: trigger.token, title: "Copy trigger token to clipboard")
+    - else
+      %span= trigger.short_token
+
+    .label-container
+      - if trigger.legacy?
+        %span.label.label-primary.has-tooltip{ title: "Trigger makes use of deprecated functionality" } legacy
+      - if !trigger.can_access_project?
+        %span.label.label-danger.has-tooltip{ title: "Trigger user has insufficient permissions to project" } invalid
+
+  %td
+    - if trigger.description? && trigger.description.length > 15
+      %span.has-tooltip{ title: trigger.description }= truncate(trigger.description, length: 15)
+    - else
+      = trigger.description
+
+  %td
+    - if trigger.owner
+      .trigger-owner.sr-only= trigger.owner.name
+      = user_avatar(user: trigger.owner, size: 20)
 
   %td
-    - if trigger.last_trigger_request
-      #{time_ago_in_words(trigger.last_trigger_request.created_at)} ago
+    - if trigger.last_used
+      #{time_ago_in_words(trigger.last_used)} ago
     - else
       Never
 
-  %td.text-right
-    = link_to 'Revoke', namespace_project_trigger_path(@project.namespace, @project, trigger), data: { confirm: 'Are you sure?'}, method: :delete, class: "btn btn-warning btn-sm"
+  %td.text-right.trigger-actions
+    - take_ownership_confirmation = "By taking ownership you will bind this trigger to your user account. With this the trigger will have access to all your projects as if it was you. Are you sure?"
+    - revoke_trigger_confirmation = "By revoking a trigger you will break any processes making use of it. Are you sure?"
+    - if trigger.owner != current_user && can?(current_user, :manage_trigger, trigger)
+      = link_to 'Take ownership', take_ownership_namespace_project_trigger_path(@project.namespace, @project, trigger), data: { confirm: take_ownership_confirmation }, method: :post, class: "btn btn-default btn-sm btn-trigger-take-ownership"
+    - if can?(current_user, :admin_trigger, trigger)
+      = link_to edit_namespace_project_trigger_path(@project.namespace, @project, trigger), method: :get, title: "Edit", class: "btn btn-default btn-sm" do
+        %i.fa.fa-pencil
+    - if can?(current_user, :manage_trigger, trigger)
+      = link_to namespace_project_trigger_path(@project.namespace, @project, trigger), data: { confirm: revoke_trigger_confirmation }, method: :delete, title: "Revoke", class: "btn btn-default btn-warning btn-sm btn-trigger-revoke" do
+        %i.fa.fa-trash
diff --git a/app/views/projects/triggers/edit.html.haml b/app/views/projects/triggers/edit.html.haml
new file mode 100644
index 00000000000..c35df322b9d
--- /dev/null
+++ b/app/views/projects/triggers/edit.html.haml
@@ -0,0 +1,9 @@
+- page_title "Trigger"
+
+.row.prepend-top-default.append-bottom-default
+  .col-lg-3
+    = render "content"
+  .col-lg-9
+    %h4.prepend-top-0
+      Update trigger
+    = render "form", btn_text: "Save trigger"
diff --git a/app/views/projects/triggers/index.html.haml b/app/views/projects/triggers/index.html.haml
deleted file mode 100644
index f6e0b0a7c8a..00000000000
--- a/app/views/projects/triggers/index.html.haml
+++ /dev/null
@@ -1,92 +0,0 @@
-- page_title "Triggers"
-
-.row.prepend-top-default.append-bottom-default
-  .col-lg-3
-    %h4.prepend-top-0
-      = page_title
-    %p.prepend-top-20
-      Triggers can force a specific branch or tag to get rebuilt with an API call.
-    %p.append-bottom-0
-      = succeed '.' do
-        Learn more in the
-        = link_to 'triggers documentation', help_page_path('ci/triggers/README'), target: '_blank'
-  .col-lg-9
-    .panel.panel-default
-      .panel-heading
-        %h4.panel-title
-          Manage your project's triggers
-      .panel-body
-        - if @triggers.any?
-          .table-responsive
-            %table.table
-              %thead
-                %th
-                  %strong Token
-                %th
-                  %strong Last used
-                %th
-              = render partial: 'trigger', collection: @triggers, as: :trigger
-        - else
-          %p.settings-message.text-center.append-bottom-default
-            No triggers have been created yet. Add one using the button below.
-
-        = form_for @trigger, url: url_for(controller: 'projects/triggers', action: 'create') do |f|
-          = f.submit "Add trigger", class: 'btn btn-success'
-
-      .panel-footer
-
-        %p
-          In the following examples, you can see the exact API call you need to
-          make in order to rebuild a specific
-          %code ref
-          (branch or tag) with a trigger token.
-        %p
-          All you need to do is replace the
-          %code TOKEN
-          and
-          %code REF_NAME
-          with the trigger token and the branch or tag name respectively.
-
-        %h5.prepend-top-default
-          Use cURL
-
-        %p.light
-          Copy one of the tokens above, set your branch or tag name, and that
-          reference will be rebuilt.
-
-        %pre
-          :plain
-            curl -X POST \
-                 -F token=TOKEN \
-                 -F ref=REF_NAME \
-                 #{builds_trigger_url(@project.id)}
-        %h5.prepend-top-default
-          Use .gitlab-ci.yml
-
-        %p.light
-          In the
-          %code .gitlab-ci.yml
-          of another project, include the following snippet.
-          The project will be rebuilt at the end of the build.
-
-        %pre
-          :plain
-            trigger_build:
-              stage: deploy
-              script:
-                - "curl -X POST -F token=TOKEN -F ref=REF_NAME #{builds_trigger_url(@project.id)}"
-        %h5.prepend-top-default
-          Pass build variables
-
-        %p.light
-          Add
-          %code variables[VARIABLE]=VALUE
-          to an API request. Variable values can be used to distinguish between triggered builds and normal builds.
-
-        %pre.append-bottom-0
-          :plain
-            curl -X POST \
-                 -F token=TOKEN \
-                 -F "ref=REF_NAME" \
-                 -F "variables[RUN_NIGHTLY_BUILD]=true" \
-                 #{builds_trigger_url(@project.id)}
diff --git a/app/views/projects/variables/_content.html.haml b/app/views/projects/variables/_content.html.haml
index 0249e0c1bf1..06477aba103 100644
--- a/app/views/projects/variables/_content.html.haml
+++ b/app/views/projects/variables/_content.html.haml
@@ -5,4 +5,4 @@
 %p
   So you can use them for passwords, secret keys or whatever you want.
 %p
-  The value of the variable can be visible in build log if explicitly asked to do so.
+  The value of the variable can be visible in job log if explicitly asked to do so.
diff --git a/app/views/projects/variables/_form.html.haml b/app/views/projects/variables/_form.html.haml
index a5bae83e0ce..1ae86d258af 100644
--- a/app/views/projects/variables/_form.html.haml
+++ b/app/views/projects/variables/_form.html.haml
@@ -6,5 +6,5 @@
     = f.text_field :key, class: "form-control", placeholder: "PROJECT_VARIABLE", required: true
   .form-group
     = f.label :value, "Value", class: "label-light"
-    = f.text_area :value, class: "form-control", placeholder: "PROJECT_VARIABLE", required: true
+    = f.text_area :value, class: "form-control", placeholder: "PROJECT_VARIABLE"
   = f.submit btn_text, class: "btn btn-save"
diff --git a/app/views/projects/variables/_index.html.haml b/app/views/projects/variables/_index.html.haml
new file mode 100644
index 00000000000..1b852a9c5b3
--- /dev/null
+++ b/app/views/projects/variables/_index.html.haml
@@ -0,0 +1,16 @@
+.row.prepend-top-default.append-bottom-default
+  .col-lg-3
+    = render "projects/variables/content"
+  .col-lg-9
+    %h5.prepend-top-0
+      Add a variable
+    = render "projects/variables/form", btn_text: "Add new variable"
+    %hr
+    %h5.prepend-top-0
+      Your variables (#{@project.variables.size})
+    - if @project.variables.empty?
+      %p.settings-message.text-center.append-bottom-0
+        No variables found, add one with the form above.
+    - else
+      = render "projects/variables/table"
+      %button.btn.btn-info.js-btn-toggle-reveal-values{ "data-status" => 'hidden' } Reveal Values
diff --git a/app/views/projects/variables/_table.html.haml b/app/views/projects/variables/_table.html.haml
index 07cee86ba4c..c7cebf45160 100644
--- a/app/views/projects/variables/_table.html.haml
+++ b/app/views/projects/variables/_table.html.haml
@@ -12,8 +12,8 @@
       - @project.variables.order_key_asc.each do |variable|
         - if variable.id?
           %tr
-            %td= variable.key
-            %td= variable.value
+            %td.variable-key= variable.key
+            %td.variable-value{ "data-value" => variable.value }******
             %td
               = link_to namespace_project_variable_path(@project.namespace, @project, variable), class: "btn btn-transparent btn-variable-edit" do
                 %span.sr-only
diff --git a/app/views/projects/variables/index.html.haml b/app/views/projects/variables/index.html.haml
deleted file mode 100644
index 09bb54600af..00000000000
--- a/app/views/projects/variables/index.html.haml
+++ /dev/null
@@ -1,17 +0,0 @@
-- page_title "Variables"
-
-.row.prepend-top-default.append-bottom-default
-  .col-lg-3
-    = render "content"
-  .col-lg-9
-    %h5.prepend-top-0
-      Add a variable
-    = render "form", btn_text: "Add new variable"
-    %hr
-    %h5.prepend-top-0
-      Your variables (#{@project.variables.size})
-    - if @project.variables.empty?
-      %p.settings-message.text-center.append-bottom-0
-        No variables found, add one with the form above.
-    - else
-      = render "table"
diff --git a/app/views/projects/wikis/_form.html.haml b/app/views/projects/wikis/_form.html.haml
index 4e41a15d9f4..c52527332bc 100644
--- a/app/views/projects/wikis/_form.html.haml
+++ b/app/views/projects/wikis/_form.html.haml
@@ -34,9 +34,6 @@
     - if @page && @page.persisted?
       = f.submit 'Save changes', class: "btn-save btn"
       .pull-right
-        - if can?(current_user, :admin_wiki, @project)
-          = link_to namespace_project_wiki_path(@project.namespace, @project, @page), data: { confirm: "Are you sure you want to delete this page?"}, method: :delete, class: "btn btn-danger btn-grouped" do
-            Delete
         = link_to "Cancel", namespace_project_wiki_path(@project.namespace, @project, @page), class: "btn btn-cancel btn-grouped"
     - else
       = f.submit 'Create page', class: "btn-create btn"
diff --git a/app/views/projects/wikis/_main_links.html.haml b/app/views/projects/wikis/_main_links.html.haml
index 763c2fea39b..5211ade1a5f 100644
--- a/app/views/projects/wikis/_main_links.html.haml
+++ b/app/views/projects/wikis/_main_links.html.haml
@@ -4,6 +4,6 @@
       New Page
   = link_to namespace_project_wiki_history_path(@project.namespace, @project, @page), class: "btn" do
     Page History
-  - if can?(current_user, :create_wiki, @project)
+  - if can?(current_user, :create_wiki, @project) && @page.latest?
     = link_to namespace_project_wiki_edit_path(@project.namespace, @project, @page), class: "btn" do
       Edit
diff --git a/app/views/projects/wikis/_nav.html.haml b/app/views/projects/wikis/_nav.html.haml
deleted file mode 100644
index 09c4411d67e..00000000000
--- a/app/views/projects/wikis/_nav.html.haml
+++ /dev/null
@@ -1,16 +0,0 @@
-= content_for :sub_nav do
-  .scrolling-tabs-container.sub-nav-scroll
-    = render 'shared/nav_scroll'
-    .nav-links.sub-nav.scrolling-tabs
-      %ul{ class: (container_class) }
-        = nav_link(html_options: {class: params[:id] == 'home' ? 'active' : '' }) do
-          = link_to 'Home', namespace_project_wiki_path(@project.namespace, @project, :home)
-
-        = nav_link(path: 'wikis#pages') do
-          = link_to 'Pages', namespace_project_wiki_pages_path(@project.namespace, @project)
-
-        = nav_link(path: 'wikis#git_access') do
-          = link_to namespace_project_wikis_git_access_path(@project.namespace, @project) do
-            Git Access
-
-      = render 'projects/wikis/new'
diff --git a/app/views/projects/wikis/_new.html.haml b/app/views/projects/wikis/_new.html.haml
index c32cb122c26..3d33679f07d 100644
--- a/app/views/projects/wikis/_new.html.haml
+++ b/app/views/projects/wikis/_new.html.haml
@@ -1,11 +1,11 @@
 - @no_container = true
 
 %div{ class: container_class }
-  %div#modal-new-wiki.modal
+  #modal-new-wiki.modal
     .modal-dialog
       .modal-content
         .modal-header
-          %a.close{href: "#", "data-dismiss" => "modal"} ×
+          %a.close{ href: "#", "data-dismiss" => "modal" } ×
           %h3.page-title New Wiki Page
         .modal-body
           %form.new-wiki-page
@@ -13,5 +13,9 @@
               = label_tag :new_wiki_path do
                 %span Page slug
               = text_field_tag :new_wiki_path, nil, placeholder: 'how-to-setup', class: 'form-control', required: true, :'data-wikis-path' => namespace_project_wikis_path(@project.namespace, @project), autofocus: true
+              %span.new-wiki-page-slug-tip
+                = icon('lightbulb-o')
+                Tip: You can specify the full path for the new file.
+                We will automatically create any missing directories.
             .form-actions
               = button_tag 'Create Page', class: 'build-new-wiki btn btn-create'
diff --git a/app/views/projects/wikis/_pages_wiki_page.html.haml b/app/views/projects/wikis/_pages_wiki_page.html.haml
new file mode 100644
index 00000000000..6298cf6c8da
--- /dev/null
+++ b/app/views/projects/wikis/_pages_wiki_page.html.haml
@@ -0,0 +1,5 @@
+%li
+  = link_to wiki_page.title, namespace_project_wiki_path(@project.namespace, @project, wiki_page)
+  %small (#{wiki_page.format})
+  .pull-right
+    %small Last edited #{time_ago_with_tooltip(wiki_page.commit.authored_date)}
diff --git a/app/views/projects/wikis/_sidebar.html.haml b/app/views/projects/wikis/_sidebar.html.haml
new file mode 100644
index 00000000000..713b758727e
--- /dev/null
+++ b/app/views/projects/wikis/_sidebar.html.haml
@@ -0,0 +1,24 @@
+%aside.right-sidebar.right-sidebar-expanded.wiki-sidebar.js-wiki-sidebar.js-right-sidebar{ data: { "offset-top" => "102", "spy" => "affix" } }
+  .block.wiki-sidebar-header.append-bottom-default
+    %a.gutter-toggle.pull-right.visible-xs-block.visible-sm-block.js-sidebar-wiki-toggle{ href: "#" }
+      = icon('angle-double-right')
+
+    - git_access_url = namespace_project_wikis_git_access_path(@project.namespace, @project)
+    = link_to git_access_url, class: active_nav_link?(path: 'wikis#git_access') ? 'active' : '' do
+      = succeed '&nbsp;' do
+        = icon('cloud-download')
+      Clone repository
+
+  .blocks-container
+    .block.block-first
+      %ul.wiki-pages
+        = render @sidebar_wiki_entries, context: 'sidebar'
+
+    .block
+      = link_to namespace_project_wikis_pages_path(@project.namespace, @project), class: 'btn btn-block' do
+        More Pages
+
+= render 'projects/wikis/new'
+
+:javascript
+  new Sidebar();
diff --git a/app/views/projects/wikis/_sidebar_wiki_page.html.haml b/app/views/projects/wikis/_sidebar_wiki_page.html.haml
new file mode 100644
index 00000000000..0a61d90177b
--- /dev/null
+++ b/app/views/projects/wikis/_sidebar_wiki_page.html.haml
@@ -0,0 +1,3 @@
+%li{ class: active_when(params[:id] == wiki_page.slug) }
+  = link_to namespace_project_wiki_path(@project.namespace, @project, wiki_page) do
+    = wiki_page.title.capitalize
diff --git a/app/views/projects/wikis/_wiki_directory.html.haml b/app/views/projects/wikis/_wiki_directory.html.haml
new file mode 100644
index 00000000000..0e5f32ed859
--- /dev/null
+++ b/app/views/projects/wikis/_wiki_directory.html.haml
@@ -0,0 +1,4 @@
+%li
+  = wiki_directory.slug
+  %ul
+    = render wiki_directory.pages, context: context
diff --git a/app/views/projects/wikis/_wiki_page.html.haml b/app/views/projects/wikis/_wiki_page.html.haml
new file mode 100644
index 00000000000..c84d06dad02
--- /dev/null
+++ b/app/views/projects/wikis/_wiki_page.html.haml
@@ -0,0 +1 @@
+= render "#{context}_wiki_page", wiki_page: wiki_page
diff --git a/app/views/projects/wikis/edit.html.haml b/app/views/projects/wikis/edit.html.haml
index 679d6018bef..8cf018da1b7 100644
--- a/app/views/projects/wikis/edit.html.haml
+++ b/app/views/projects/wikis/edit.html.haml
@@ -1,23 +1,35 @@
 - @no_container = true
 - page_title "Edit", @page.title.capitalize, "Wiki"
-= render 'nav'
 
 %div{ class: container_class }
-  .top-area
+  .wiki-page-header.has-sidebar-toggle
+    %button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
+      = icon('angle-double-left')
+
     .nav-text
-      %strong
+      %h2.wiki-page-title
         - if @page.persisted?
           = link_to @page.title.capitalize, namespace_project_wiki_path(@project.namespace, @project, @page)
         - else
           = @page.title.capitalize
-      %span.light
-        &middot;
-        Edit Page
+        %span.light
+          &middot;
+          - if @page.persisted?
+            Edit Page
+          - else
+            Create Page
 
     .nav-controls
-      - if !(@page && @page.persisted?)
-        - if can?(current_user, :create_wiki, @project)
-          = link_to '#modal-new-wiki', class: "add-new-wiki btn btn-new", "data-toggle" => "modal" do
-            New Page
+      - if can?(current_user, :create_wiki, @project)
+        = link_to '#modal-new-wiki', class: "add-new-wiki btn btn-new", "data-toggle" => "modal" do
+          New Page
+      - if @page.persisted?
+        = link_to namespace_project_wiki_history_path(@project.namespace, @project, @page), class: "btn" do
+          Page History
+        - if can?(current_user, :admin_wiki, @project)
+          = link_to namespace_project_wiki_path(@project.namespace, @project, @page), data: { confirm: "Are you sure you want to delete this page?"}, method: :delete, class: "btn btn-danger" do
+            Delete
 
   = render 'form'
+
+= render 'sidebar'
diff --git a/app/views/projects/wikis/git_access.html.haml b/app/views/projects/wikis/git_access.html.haml
index b8811a28dd6..fb0efd85dcd 100644
--- a/app/views/projects/wikis/git_access.html.haml
+++ b/app/views/projects/wikis/git_access.html.haml
@@ -1,34 +1,43 @@
 - @no_container = true
 - page_title "Git Access", "Wiki"
 
-= render 'nav'
 %div{ class: container_class }
-  .sub-header-block
-    %span.oneline
-      Git access for
+  .wiki-page-header.has-sidebar-toggle
+    %button.btn.btn-default.visible-xs.visible-sm.pull-right.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
+      = icon('angle-double-left')
+
+    .git-access-header
+      Clone repository
       %strong= @project_wiki.path_with_namespace
 
-    .pull-right
-      = render "shared/clone_panel", project: @project_wiki
+    = render "shared/clone_panel", project: @project_wiki
+
+  .wiki-git-access
+    %h3 Install Gollum
+    %pre.dark
+      :preserve
+        gem install gollum
+    %p
+      It is recommended to install
+      %code github-markdown
+      so that GFM features render locally:
+    %pre.dark
+      :preserve
+        gem install github-markdown
 
-  .prepend-top-default
-    %fieldset
-      %legend Install Gollum:
-      %pre.dark
-        :preserve
-          gem install gollum
+    %h3 Clone your wiki
+    %pre.dark
+      :preserve
+        git clone #{ content_tag(:span, default_url_to_repo(@project_wiki), class: 'clone')}
+        cd #{h @project_wiki.path}
 
-      %legend Clone Your Wiki:
-      %pre.dark
-        :preserve
-          git clone #{ content_tag(:span, default_url_to_repo(@project_wiki), class: 'clone')}
-          cd #{h @project_wiki.path}
+    %h3 Start Gollum and edit locally
+    %pre.dark
+      :preserve
+        gollum
+        == Sinatra/1.3.5 has taken the stage on 4567 for development with backup from Thin
+        >> Thin web server (v1.5.0 codename Knife)
+        >> Maximum connections set to 1024
+        >> Listening on 0.0.0.0:4567, CTRL+C to stop
 
-      %legend Start Gollum And Edit Locally:
-      %pre.dark
-        :preserve
-          gollum
-          == Sinatra/1.3.5 has taken the stage on 4567 for development with backup from Thin
-          >> Thin web server (v1.5.0 codename Knife)
-          >> Maximum connections set to 1024
-          >> Listening on 0.0.0.0:4567, CTRL+C to stop
+= render 'sidebar'
diff --git a/app/views/projects/wikis/history.html.haml b/app/views/projects/wikis/history.html.haml
index 4c0b14e2c42..dd7213622c1 100644
--- a/app/views/projects/wikis/history.html.haml
+++ b/app/views/projects/wikis/history.html.haml
@@ -1,13 +1,16 @@
 - page_title "History", @page.title.capitalize, "Wiki"
-= render 'nav'
+
 %div{ class: container_class }
-  .top-area
+  .wiki-page-header.has-sidebar-toggle
+    %button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
+      = icon('angle-double-left')
+
     .nav-text
-      %strong
+      %h2.wiki-page-title
         = link_to @page.title.capitalize, namespace_project_wiki_path(@project.namespace, @project, @page)
-      %span.light
-        &middot;
-        History
+        %span.light
+          &middot;
+          History
 
   .table-holder
     %table.table
@@ -35,3 +38,5 @@
             %td
               %strong
                 = @page.page.wiki.page(@page.page.name, commit.id).try(:format)
+
+= render 'sidebar'
diff --git a/app/views/projects/wikis/pages.html.haml b/app/views/projects/wikis/pages.html.haml
index 9c10acd4cb6..5fba2b1a5ae 100644
--- a/app/views/projects/wikis/pages.html.haml
+++ b/app/views/projects/wikis/pages.html.haml
@@ -1,14 +1,19 @@
 - @no_container = true
 - page_title "Pages", "Wiki"
 
-= render 'nav'
-
 %div{ class: container_class }
-  %ul.content-list
-    - @wiki_pages.each do |wiki_page|
-      %li
-        = link_to wiki_page.title, namespace_project_wiki_path(@project.namespace, @project, wiki_page)
-        %small (#{wiki_page.format})
-        .pull-right
-          %small Last edited #{time_ago_with_tooltip(wiki_page.commit.authored_date)}
+  .wiki-page-header
+
+    .nav-text
+      %h2.wiki-page-title
+        Wiki Pages
+
+    .nav-controls
+      = link_to namespace_project_wikis_git_access_path(@project.namespace, @project), class: 'btn' do
+        = icon('cloud-download')
+        Clone repository
+
+  %ul.wiki-pages-list.content-list
+    = render @wiki_entries, context: 'pages'
+
   = paginate @wiki_pages, theme: 'gitlab'
diff --git a/app/views/projects/wikis/show.html.haml b/app/views/projects/wikis/show.html.haml
index 5cebb538cf5..3609461b721 100644
--- a/app/views/projects/wikis/show.html.haml
+++ b/app/views/projects/wikis/show.html.haml
@@ -1,15 +1,21 @@
 - @no_container = true
 - page_title @page.title.capitalize, "Wiki"
-= render 'nav'
 
 %div{ class: container_class }
-  .top-area
-    .nav-text
-      %strong= @page.title.capitalize
+  .wiki-page-header.has-sidebar-toggle
+    %button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
+      = icon('angle-double-left')
+
+    .wiki-breadcrumb
+      %span= breadcrumb(@page.slug)
 
+    .nav-text
+      %h2.wiki-page-title= @page.title.capitalize
       %span.wiki-last-edit-by
-        &middot;
-        last edited by #{@page.commit.author.name} #{time_ago_with_tooltip(@page.commit.authored_date)}
+        Last edited by
+        %strong
+          #{@page.commit.author.name}
+        #{time_ago_with_tooltip(@page.commit.authored_date)}
 
     .nav-controls
       = render 'main_links'
@@ -19,8 +25,9 @@
       This is an old version of this page.
       You can view the #{link_to "most recent version", namespace_project_wiki_path(@project.namespace, @project, @page)} or browse the #{link_to "history", namespace_project_wiki_history_path(@project.namespace, @project, @page)}.
 
-
   .wiki-holder.prepend-top-default.append-bottom-default
     .wiki
       = preserve do
         = render_wiki_content(@page)
+
+= render 'sidebar'
diff --git a/app/views/repository_check_mailer/notify.html.haml b/app/views/repository_check_mailer/notify.html.haml
index a585147ddd1..94e5a5d9709 100644
--- a/app/views/repository_check_mailer/notify.html.haml
+++ b/app/views/repository_check_mailer/notify.html.haml
@@ -2,7 +2,7 @@
   #{@message}.
 
 %p
-  = link_to "See the affected projects in the GitLab admin panel", admin_namespaces_projects_url(last_repository_check_failed: 1)
+  = link_to "See the affected projects in the GitLab admin panel", admin_projects_url(last_repository_check_failed: 1)
 
 %p
   You are receiving this message because you are a GitLab administrator for #{Gitlab.config.gitlab.url}.
diff --git a/app/views/repository_check_mailer/notify.text.haml b/app/views/repository_check_mailer/notify.text.haml
index 93db151329e..0902c50d052 100644
--- a/app/views/repository_check_mailer/notify.text.haml
+++ b/app/views/repository_check_mailer/notify.text.haml
@@ -1,6 +1,6 @@
 #{@message}.
 \
-View details: #{admin_namespaces_projects_url(last_repository_check_failed: 1)}
+View details: #{admin_projects_url(last_repository_check_failed: 1)}
 
 You are receiving this message because you are a GitLab administrator
 for #{Gitlab.config.gitlab.url}.
diff --git a/app/views/search/_category.html.haml b/app/views/search/_category.html.haml
index 2c378231237..059a0d1ac78 100644
--- a/app/views/search/_category.html.haml
+++ b/app/views/search/_category.html.haml
@@ -1,71 +1,74 @@
-%ul.nav-links.search-filter
-  - if @project
-    %li{class: ("active" if @scope == 'blobs')}
-      = link_to search_filter_path(scope: 'blobs') do
-        Code
-        %span.badge
-          = @search_results.blobs_count
-    %li{class: ("active" if @scope == 'issues')}
-      = link_to search_filter_path(scope: 'issues') do
-        Issues
-        %span.badge
-          = @search_results.issues_count
-    %li{class: ("active" if @scope == 'merge_requests')}
-      = link_to search_filter_path(scope: 'merge_requests') do
-        Merge requests
-        %span.badge
-          = @search_results.merge_requests_count
-    %li{class: ("active" if @scope == 'milestones')}
-      = link_to search_filter_path(scope: 'milestones') do
-        Milestones
-        %span.badge
-          = @search_results.milestones_count
-    %li{class: ("active" if @scope == 'notes')}
-      = link_to search_filter_path(scope: 'notes') do
-        Comments
-        %span.badge
-          = @search_results.notes_count
-    %li{class: ("active" if @scope == 'wiki_blobs')}
-      = link_to search_filter_path(scope: 'wiki_blobs') do
-        Wiki
-        %span.badge
-          = @search_results.wiki_blobs_count
-    %li{class: ("active" if @scope == 'commits')}
-      = link_to search_filter_path(scope: 'commits') do
-        Commits
-        %span.badge
-          = @search_results.commits_count
+.scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
+  .fade-left= icon('angle-left')
+  .fade-right= icon('angle-right')
+  %ul.nav-links.search-filter.scrolling-tabs
+    - if @project
+      %li{ class: active_when(@scope == 'blobs') }
+        = link_to search_filter_path(scope: 'blobs') do
+          Code
+          %span.badge
+            = @search_results.blobs_count
+      %li{ class: active_when(@scope == 'issues') }
+        = link_to search_filter_path(scope: 'issues') do
+          Issues
+          %span.badge
+            = @search_results.issues_count
+      %li{ class: active_when(@scope == 'merge_requests') }
+        = link_to search_filter_path(scope: 'merge_requests') do
+          Merge requests
+          %span.badge
+            = @search_results.merge_requests_count
+      %li{ class: active_when(@scope == 'milestones') }
+        = link_to search_filter_path(scope: 'milestones') do
+          Milestones
+          %span.badge
+            = @search_results.milestones_count
+      %li{ class: active_when(@scope == 'notes') }
+        = link_to search_filter_path(scope: 'notes') do
+          Comments
+          %span.badge
+            = @search_results.notes_count
+      %li{ class: active_when(@scope == 'wiki_blobs') }
+        = link_to search_filter_path(scope: 'wiki_blobs') do
+          Wiki
+          %span.badge
+            = @search_results.wiki_blobs_count
+      %li{ class: active_when(@scope == 'commits') }
+        = link_to search_filter_path(scope: 'commits') do
+          Commits
+          %span.badge
+            = @search_results.commits_count
 
-  - elsif @show_snippets
-    %li{class: ("active" if @scope == 'snippet_blobs')}
-      = link_to search_filter_path(scope: 'snippet_blobs', snippets: true, group_id: nil, project_id: nil) do
-        Snippet Contents
-        %span.badge
-          = @search_results.snippet_blobs_count
-    %li{class: ("active" if @scope == 'snippet_titles')}
-      = link_to search_filter_path(scope: 'snippet_titles', snippets: true, group_id: nil, project_id: nil) do
-        Titles and Filenames
-        %span.badge
-          = @search_results.snippet_titles_count
+    - elsif @show_snippets
+      %li{ class: active_when(@scope == 'snippet_blobs') }
+        = link_to search_filter_path(scope: 'snippet_blobs', snippets: true, group_id: nil, project_id: nil) do
+          Snippet Contents
+          %span.badge
+            = @search_results.snippet_blobs_count
+      %li{ class: active_when(@scope == 'snippet_titles') }
+        = link_to search_filter_path(scope: 'snippet_titles', snippets: true, group_id: nil, project_id: nil) do
+          Titles and Filenames
+          %span.badge
+            = @search_results.snippet_titles_count
 
-  - else
-    %li{class: ("active" if @scope == 'projects')}
-      = link_to search_filter_path(scope: 'projects') do
-        Projects
-        %span.badge
-          = @search_results.projects_count
-    %li{class: ("active" if @scope == 'issues')}
-      = link_to search_filter_path(scope: 'issues') do
-        Issues
-        %span.badge
-          = @search_results.issues_count
-    %li{class: ("active" if @scope == 'merge_requests')}
-      = link_to search_filter_path(scope: 'merge_requests') do
-        Merge requests
-        %span.badge
-          = @search_results.merge_requests_count
-    %li{class: ("active" if @scope == 'milestones')}
-      = link_to search_filter_path(scope: 'milestones') do
-        Milestones
-        %span.badge
-          = @search_results.milestones_count
+    - else
+      %li{ class: active_when(@scope == 'projects') }
+        = link_to search_filter_path(scope: 'projects') do
+          Projects
+          %span.badge
+            = @search_results.projects_count
+      %li{ class: active_when(@scope == 'issues') }
+        = link_to search_filter_path(scope: 'issues') do
+          Issues
+          %span.badge
+            = @search_results.issues_count
+      %li{ class: active_when(@scope == 'merge_requests') }
+        = link_to search_filter_path(scope: 'merge_requests') do
+          Merge requests
+          %span.badge
+            = @search_results.merge_requests_count
+      %li{ class: active_when(@scope == 'milestones') }
+        = link_to search_filter_path(scope: 'milestones') do
+          Milestones
+          %span.badge
+            = @search_results.milestones_count
diff --git a/app/views/search/_filter.html.haml b/app/views/search/_filter.html.haml
index ef1c0296d49..938be20c7cf 100644
--- a/app/views/search/_filter.html.haml
+++ b/app/views/search/_filter.html.haml
@@ -3,7 +3,7 @@
 - if params[:project_id].present?
   = hidden_field_tag :project_id, params[:project_id]
 .dropdown
-  %button.dropdown-menu-toggle.btn.js-search-group-dropdown{ type: "button", data: { toggle: "dropdown", default_label: "Group:" } }
+  %button.dropdown-menu-toggle.js-search-group-dropdown{ type: "button", data: { toggle: "dropdown", default_label: "Group:" } }
     %span.dropdown-toggle-text
       Group:
       - if @group.present?
@@ -18,7 +18,7 @@
     = dropdown_loading
 
 .dropdown.project-filter
-  %button.dropdown-menu-toggle.btn.js-search-project-dropdown{ type: "button", data: { toggle: "dropdown", default_label: "Project:" } }
+  %button.dropdown-menu-toggle.js-search-project-dropdown{ type: "button", data: { toggle: "dropdown", default_label: "Project:" } }
     %span.dropdown-toggle-text
       Project:
       - if @project.present?
diff --git a/app/views/search/_results.html.haml b/app/views/search/_results.html.haml
index 7fe2bce3e7c..02133d09cdf 100644
--- a/app/views/search/_results.html.haml
+++ b/app/views/search/_results.html.haml
@@ -11,7 +11,7 @@
 
   .results.prepend-top-10
     - if @scope == 'commits'
-      %ul.list-unstyled
+      %ul.content-list.commit-list
         = render partial: "search/results/commit", collection: @search_objects
     - else
       .search-results
diff --git a/app/views/search/results/_blob.html.haml b/app/views/search/results/_blob.html.haml
index 6f0a0ea36ec..7f1f807e2e7 100644
--- a/app/views/search/results/_blob.html.haml
+++ b/app/views/search/results/_blob.html.haml
@@ -1,11 +1,13 @@
-- blob = parse_search_result(blob)
+- file_name, blob = blob
 .blob-result
   .file-holder
-    .file-title
-      - blob_link = namespace_project_blob_path(@project.namespace, @project, tree_join(blob.ref, blob.filename))
+    .js-file-title.file-title
+      - ref = @search_results.repository_ref
+      - blob_link = namespace_project_blob_path(@project.namespace, @project, tree_join(ref, file_name))
       = link_to blob_link do
         %i.fa.fa-file
         %strong
-          = blob.filename
-    .file-content.code.term
-      = render 'shared/file_highlight', blob: blob, first_line_number: blob.startline, blob_link: blob_link
+          = file_name
+    - if blob
+      .file-content.code.term
+        = render 'shared/file_highlight', blob: blob, first_line_number: blob.startline, blob_link: blob_link
diff --git a/app/views/search/results/_commit.html.haml b/app/views/search/results/_commit.html.haml
index 5b2d83d6b92..f34eaf89027 100644
--- a/app/views/search/results/_commit.html.haml
+++ b/app/views/search/results/_commit.html.haml
@@ -1 +1 @@
-= render 'projects/commits/commit', project: @project, commit: commit
+= render 'projects/commits/commit', project: @project, commit: commit, ref: nil
diff --git a/app/views/search/results/_empty.html.haml b/app/views/search/results/_empty.html.haml
index 05a63016c09..821a39d61f5 100644
--- a/app/views/search/results/_empty.html.haml
+++ b/app/views/search/results/_empty.html.haml
@@ -3,4 +3,4 @@
   %h4
     = icon('search')
     We couldn't find any results matching
-    %code #{@search_term}
+    %code= @search_term
diff --git a/app/views/search/results/_merge_request.html.haml b/app/views/search/results/_merge_request.html.haml
index 07b17bc69c0..2e6adf3027c 100644
--- a/app/views/search/results/_merge_request.html.haml
+++ b/app/views/search/results/_merge_request.html.haml
@@ -2,7 +2,7 @@
   %h4
     = link_to [merge_request.target_project.namespace.becomes(Namespace), merge_request.target_project, merge_request] do
       %span.term.str-truncated= merge_request.title
-    .pull-right #{merge_request.to_reference}
+    .pull-right= merge_request.to_reference
   - if merge_request.description.present?
     .description.term
       = preserve do
diff --git a/app/views/search/results/_snippet_blob.html.haml b/app/views/search/results/_snippet_blob.html.haml
index c9b7bd154af..f84be600df8 100644
--- a/app/views/search/results/_snippet_blob.html.haml
+++ b/app/views/search/results/_snippet_blob.html.haml
@@ -7,46 +7,39 @@
     = snippet.title
     by
     = link_to user_snippets_path(snippet.author) do
-      = image_tag avatar_icon(snippet.author_email), class: "avatar avatar-inline s16", alt: ''
+      = image_tag avatar_icon(snippet.author), class: "avatar avatar-inline s16", alt: ''
       = snippet.author_name
-    %span.light #{time_ago_with_tooltip(snippet.created_at)}
+    %span.light= time_ago_with_tooltip(snippet.created_at)
   %h4.snippet-title
   - snippet_path = reliable_snippet_path(snippet)
-  = link_to snippet_path do
-    .file-holder
-      .file-title
+  .file-holder
+    .js-file-title.file-title
+      = link_to snippet_path do
         %i.fa.fa-file
         %strong= snippet.file_name
-      - if markup?(snippet.file_name)
-        .file-content.wiki
+    - if markup?(snippet.file_name)
+      .file-content.wiki
+        - snippet_chunks.each do |chunk|
+          - unless chunk[:data].empty?
+            = render_markup(snippet.file_name, chunk[:data])
+          - else
+            .file-content.code
+              .nothing-here-block Empty file
+    - else
+      .file-content.code.js-syntax-highlight
+        .line-numbers
           - snippet_chunks.each do |chunk|
             - unless chunk[:data].empty?
-              = render_markup(snippet.file_name, chunk[:data])
+              - Gitlab::Git::Util.count_lines(chunk[:data]).times do |index|
+                - offset = defined?(chunk[:start_line]) ? chunk[:start_line] : 1
+                - i = index + offset
+                = link_to snippet_path+"#L#{i}", id: "L#{i}", rel: "#L#{i}", class: "diff-line-num" do
+                  %i.fa.fa-link
+                  = i
+        .blob-content
+          - snippet_chunks.each do |chunk|
+            - unless chunk[:data].empty?
+              = highlight(snippet.file_name, chunk[:data], repository: nil, plain: snippet.no_highlighting?)
             - else
               .file-content.code
                 .nothing-here-block Empty file
-      - else
-        .file-content.code.js-syntax-highlight
-          .line-numbers
-            - snippet_chunks.each do |chunk|
-              - unless chunk[:data].empty?
-                - Gitlab::Git::Util.count_lines(chunk[:data]).times do |index|
-                  - offset = defined?(chunk[:start_line]) ? chunk[:start_line] : 1
-                  - i = index + offset
-                  = link_to snippet_path+"#L#{i}", id: "L#{i}", rel: "#L#{i}", class: "diff-line-num" do
-                    %i.fa.fa-link
-                    = i
-                - unless snippet == snippet_chunks.last
-                  %a.diff-line-num
-                    = "."
-          %pre.code
-            %code
-              - snippet_chunks.each do |chunk|
-                - unless chunk[:data].empty?
-                  = chunk[:data]
-                  - unless chunk == snippet_chunks.last
-                    %a
-                      = "..."
-                - else
-                  .file-content.code
-                    .nothing-here-block Empty file
diff --git a/app/views/search/results/_snippet_title.html.haml b/app/views/search/results/_snippet_title.html.haml
index c414acb6a11..026f404ce07 100644
--- a/app/views/search/results/_snippet_title.html.haml
+++ b/app/views/search/results/_snippet_title.html.haml
@@ -14,10 +14,10 @@
       = link_to snippet_title.project.name_with_namespace, namespace_project_path(snippet_title.project.namespace, snippet_title.project)
 
   .snippet-info
-    = "##{snippet_title.id}"
+    = snippet_title.to_reference
     %span
       by
       = link_to user_snippets_path(snippet_title.author) do
-        = image_tag avatar_icon(snippet_title.author_email), class: "avatar avatar-inline s16", alt: ''
+        = image_tag avatar_icon(snippet_title.author), class: "avatar avatar-inline s16", alt: ''
         = snippet_title.author_name
-      %span.light #{time_ago_with_tooltip(snippet_title.created_at)}
+      %span.light= time_ago_with_tooltip(snippet_title.created_at)
diff --git a/app/views/search/results/_wiki_blob.html.haml b/app/views/search/results/_wiki_blob.html.haml
index 648d0bd76cb..d87f9df2677 100644
--- a/app/views/search/results/_wiki_blob.html.haml
+++ b/app/views/search/results/_wiki_blob.html.haml
@@ -1,7 +1,7 @@
 - wiki_blob = parse_search_result(wiki_blob)
 .blob-result
   .file-holder
-    .file-title
+    .js-file-title.file-title
       = link_to namespace_project_wiki_path(@project.namespace, @project, wiki_blob.basename) do
         %i.fa.fa-file
         %strong
diff --git a/app/views/shared/_branch_switcher.html.haml b/app/views/shared/_branch_switcher.html.haml
new file mode 100644
index 00000000000..7799aff6b5b
--- /dev/null
+++ b/app/views/shared/_branch_switcher.html.haml
@@ -0,0 +1,8 @@
+- dropdown_toggle_text = @target_branch || tree_edit_branch
+= hidden_field_tag 'target_branch', dropdown_toggle_text
+
+.dropdown
+  = dropdown_toggle dropdown_toggle_text, { toggle: 'dropdown', selected: dropdown_toggle_text, field_name: 'target_branch', form_id: '.js-edit-blob-form', refs_url: namespace_project_branches_path(@project.namespace, @project) }, { toggle_class: 'js-project-branches-dropdown js-target-branch' }
+  .dropdown-menu.dropdown-menu-selectable.dropdown-menu-paging.dropdown-menu-branches
+    = render partial: 'shared/projects/blob/branch_page_default'
+    = render partial: 'shared/projects/blob/branch_page_create'
diff --git a/app/views/shared/_choose_group_avatar_button.html.haml b/app/views/shared/_choose_group_avatar_button.html.haml
index b6618aef7cb..96956ccc9d8 100644
--- a/app/views/shared/_choose_group_avatar_button.html.haml
+++ b/app/views/shared/_choose_group_avatar_button.html.haml
@@ -1,4 +1,4 @@
-%a.choose-btn.btn.btn-sm.js-choose-group-avatar-button
+%button.choose-btn.btn.btn-sm.js-choose-group-avatar-button{ type: 'button' }
   %i.fa.fa-paperclip
   %span Choose File ...
 &nbsp;
diff --git a/app/views/shared/_clone_panel.html.haml b/app/views/shared/_clone_panel.html.haml
index 3b82d8e686f..03684389742 100644
--- a/app/views/shared/_clone_panel.html.haml
+++ b/app/views/shared/_clone_panel.html.haml
@@ -2,12 +2,12 @@
 
 .git-clone-holder.input-group
   .input-group-btn
-    -if allowed_protocols_present?
+    - if allowed_protocols_present?
       .clone-dropdown-btn.btn.btn-static
         %span
           = enabled_project_button(project, enabled_protocol)
     - else
-      %a#clone-dropdown.clone-dropdown-btn.btn{href: '#', data: { toggle: 'dropdown' }}
+      %a#clone-dropdown.clone-dropdown-btn.btn{ href: '#', data: { toggle: 'dropdown' } }
         %span
           = default_clone_protocol.upcase
         = icon('caret-down')
@@ -19,7 +19,7 @@
 
   = text_field_tag :project_clone, default_url_to_repo(project), class: "js-select-on-focus form-control", readonly: true
   .input-group-btn
-    = clipboard_button(clipboard_target: '#project_clone')
+    = clipboard_button(clipboard_target: '#project_clone', title: "Copy URL to clipboard")
 
 :javascript
   $('ul.clone-options-dropdown a').on('click',function(e){
diff --git a/app/views/shared/_commit_message_container.html.haml b/app/views/shared/_commit_message_container.html.haml
index 0a38327baa2..4b98ff88241 100644
--- a/app/views/shared/_commit_message_container.html.haml
+++ b/app/views/shared/_commit_message_container.html.haml
@@ -1,5 +1,6 @@
 .form-group.commit_message-group
   - nonce = SecureRandom.hex
+  - descriptions = local_assigns.slice(:message_with_description, :message_without_description)
   = label_tag "commit_message-#{nonce}", class: 'control-label' do
     Commit message
   .col-sm-10
@@ -8,9 +9,17 @@
       = text_area_tag 'commit_message',
           (params[:commit_message] || local_assigns[:text] || local_assigns[:placeholder]),
           class: 'form-control js-commit-message', placeholder: local_assigns[:placeholder],
+          data: descriptions,
           required: true, rows: (local_assigns[:rows] || 3),
           id: "commit_message-#{nonce}"
     - if local_assigns[:hint]
       %p.hint
         Try to keep the first line under 52 characters
         and the others under 72.
+    - if descriptions.present?
+      .hint.js-with-description-hint
+        = link_to "#", class: "js-with-description-link" do
+          Include description in commit message
+      .hint.js-without-description-hint.hide
+        = link_to "#", class: "js-without-description-link" do
+          Don't include description in commit message
diff --git a/app/views/shared/_confirm_modal.html.haml b/app/views/shared/_confirm_modal.html.haml
index b0fc60573f7..f94f8ffc604 100644
--- a/app/views/shared/_confirm_modal.html.haml
+++ b/app/views/shared/_confirm_modal.html.haml
@@ -1,8 +1,8 @@
-#modal-confirm-danger.modal{tabindex: -1}
+#modal-confirm-danger.modal{ tabindex: -1 }
   .modal-dialog
     .modal-content
       .modal-header
-        %a.close{href: "#", "data-dismiss" => "modal"} ×
+        %a.close{ href: "#", "data-dismiss" => "modal" } ×
         %h3.page-title
           Confirmation required
 
@@ -14,7 +14,7 @@
           To prevent accidental actions we ask you to confirm your intention.
           %br
           Please type
-          %code.js-confirm-danger-match #{phrase}
+          %code.js-confirm-danger-match= phrase
           to proceed or close this modal to cancel.
 
         .form-group
diff --git a/app/views/shared/_event_filter.html.haml b/app/views/shared/_event_filter.html.haml
index c367ae336db..e50ab5fea09 100644
--- a/app/views/shared/_event_filter.html.haml
+++ b/app/views/shared/_event_filter.html.haml
@@ -5,5 +5,7 @@
   - if event_filter_visible(:merge_requests)
     = event_filter_link EventFilter.merged, 'Merge events'
   - if event_filter_visible(:issues)
+    = event_filter_link EventFilter.issue, 'Issue events'
+  - if comments_visible?
     = event_filter_link EventFilter.comments, 'Comments'
   = event_filter_link EventFilter.team, 'Team'
diff --git a/app/views/shared/_file_highlight.html.haml b/app/views/shared/_file_highlight.html.haml
index e26693bf5b9..8d64cb5d698 100644
--- a/app/views/shared/_file_highlight.html.haml
+++ b/app/views/shared/_file_highlight.html.haml
@@ -9,8 +9,8 @@
         - offset = defined?(first_line_number) ? first_line_number : 1
         - i = index + offset
         -# We're not using `link_to` because it is too slow once we get to thousands of lines.
-        %a.diff-line-num{href: "#{link}#L#{i}", id: "L#{i}", 'data-line-number' => i}
+        %a.diff-line-num{ href: "#{link}#L#{i}", id: "L#{i}", 'data-line-number' => i }
           = link_icon
           = i
-  .blob-content{data: {blob_id: blob.id}}
+  .blob-content{ data: { blob_id: blob.id } }
     = highlight(blob.path, blob.data, repository: repository, plain: blob.no_highlighting?)
diff --git a/app/views/shared/_group_form.html.haml b/app/views/shared/_group_form.html.haml
index 0fb63a81cb1..89e176bb909 100644
--- a/app/views/shared/_group_form.html.haml
+++ b/app/views/shared/_group_form.html.haml
@@ -1,18 +1,28 @@
+- parent = GroupFinder.new(current_user).execute(id: params[:parent_id] || @group.parent_id)
+- group_path = root_url
+- group_path << parent.full_path + '/' if parent
 - if @group.persisted?
   .form-group.col-xs-12
     = f.label :name, class: 'label-light' do
       %span Group name
     = f.text_field :name, placeholder: 'open-source', class: 'form-control'
 
+<<<<<<< HEAD
 .form-group.col-xs-12
   = f.label :path, class: 'label-light' do
     %span Group path
   .input-group.gl-field-error-anchor
-    .input-group-addon
-      = root_url
+    .group-root-path.input-group-addon.has-tooltip{ title: group_path, :'data-placement' => 'bottom' }
+      %span>= root_url
+      - if parent
+        %strong= parent.full_path + '/'
     = f.text_field :path, placeholder: 'open-source', class: 'form-control',
-      autofocus: local_assigns[:autofocus] || false,  pattern: "[a-zA-Z0-9-_]+",
-      required: true, title: 'Please choose a group name with no special characters.'
+      autofocus: local_assigns[:autofocus] || false, required: true,
+      pattern: Gitlab::Regex::NAMESPACE_REGEX_STR_JS,
+      title: 'Please choose a group name with no special characters.',
+      "data-bind-in" => "#{'create_chat_team' if Gitlab.config.mattermost.enabled}"
+    - if parent
+      = f.hidden_field :parent_id, value: parent.id
 
   - if @group.persisted?
     .alert.alert-warning.prepend-top-10
diff --git a/app/views/shared/_import_form.html.haml b/app/views/shared/_import_form.html.haml
index 65a3a6bddab..54b5ae2402e 100644
--- a/app/views/shared/_import_form.html.haml
+++ b/app/views/shared/_import_form.html.haml
@@ -2,7 +2,7 @@
   = f.label :import_url, class: 'control-label' do
     %span Git repository URL
   .col-sm-10
-    = f.text_field :import_url, class: 'form-control', placeholder: 'https://username:password@gitlab.company.com/group/project.git', disabled: true
+    = f.text_field :import_url, autocomplete: 'off', class: 'form-control', placeholder: 'https://username:password@gitlab.company.com/group/project.git', disabled: true
 
     .well.prepend-top-20
       %ul
@@ -13,4 +13,4 @@
         %li
           The import will time out after 15 minutes. For repositories that take longer, use a clone/push combination.
         %li
-          To migrate an SVN repository, check out #{link_to "this document", "http://doc.gitlab.com/ce/workflow/importing/migrating_from_svn.html"}.
+          To migrate an SVN repository, check out #{link_to "this document", help_page_path('workflow/importing/migrating_from_svn')}.
diff --git a/app/views/shared/_issuable_meta_data.html.haml b/app/views/shared/_issuable_meta_data.html.haml
new file mode 100644
index 00000000000..1d4fd71522d
--- /dev/null
+++ b/app/views/shared/_issuable_meta_data.html.haml
@@ -0,0 +1,25 @@
+- note_count         = @issuable_meta_data[issuable.id].notes_count
+- issue_votes        = @issuable_meta_data[issuable.id]
+- upvotes, downvotes = issue_votes.upvotes, issue_votes.downvotes
+- issuable_url       = @collection_type == "Issue" ? issue_path(issuable, anchor: 'notes') : merge_request_path(issuable, anchor: 'notes')
+- issuable_mr        = @issuable_meta_data[issuable.id].merge_requests_count
+
+- if issuable_mr > 0
+  %li
+    = image_tag('icon-merge-request-unmerged.svg', class: 'icon-merge-request-unmerged')
+    = issuable_mr
+
+- if upvotes > 0
+  %li
+    = icon('thumbs-up')
+    = upvotes
+
+- if downvotes > 0
+  %li
+    = icon('thumbs-down')
+    = downvotes
+
+%li
+  = link_to issuable_url, class: ('no-comments' if note_count.zero?) do
+    = icon('comments')
+    = note_count
diff --git a/app/views/shared/_issues.html.haml b/app/views/shared/_issues.html.haml
index a5df502d7b5..3a49227961f 100644
--- a/app/views/shared/_issues.html.haml
+++ b/app/views/shared/_issues.html.haml
@@ -1,16 +1,7 @@
-- if @issues.reorder(nil).any?
-  - @issues.group_by(&:project).each do |group|
-    .panel.panel-default.panel-small
-      - project = group[0]
-      .panel-heading
-        = link_to project.name_with_namespace, namespace_project_issues_path(project.namespace, project)
-        - if can?(current_user, :create_issue, project)
-          .pull-right
-            = link_to 'New issue', new_namespace_project_issue_path(project.namespace, project)
-
-      %ul.content-list.issues-list
-        - group[1].each do |issue|
-          = render 'projects/issues/issue', issue: issue
+- if @issues.to_a.any?
+  .panel.panel-default.panel-small.panel-without-border
+    %ul.content-list.issues-list
+      = render partial: 'projects/issues/issue', collection: @issues
   = paginate @issues, theme: "gitlab"
 - else
-  .nothing-here-block No issues to show
+  = render 'shared/empty_states/issues'
diff --git a/app/views/shared/_label.html.haml b/app/views/shared/_label.html.haml
index 6ccdef0df46..bd994cdad01 100644
--- a/app/views/shared/_label.html.haml
+++ b/app/views/shared/_label.html.haml
@@ -1,9 +1,8 @@
 - label_css_id = dom_id(label)
-- open_issues_count = label.open_issues_count(current_user)
-- open_merge_requests_count = label.open_merge_requests_count(current_user)
+- status = label_subscription_status(label, @project).inquiry if current_user
 - subject = local_assigns[:subject]
 
-%li{id: label_css_id, data: { id: label.id } }
+%li{ id: label_css_id, data: { id: label.id } }
   = render "shared/label_row", label: label
 
   .visible-xs.visible-sm-inline-block.visible-md-inline-block.dropdown
@@ -14,41 +13,73 @@
       %ul
         %li
           = link_to_label(label, subject: subject, type: :merge_request) do
-            = pluralize open_merge_requests_count, 'merge request'
+            view merge requests
         %li
           = link_to_label(label, subject: subject) do
-            = pluralize open_issues_count, 'open issue'
-        - if current_user
-          %li.label-subscription{ data: toggle_subscription_data(label) }
-            %a.js-subscribe-button.label-subscribe-button.subscription-status{ role: "button", href: "#", data: { toggle: "tooltip", status: label_subscription_status(label) } }
-              %span= label_subscription_toggle_button_text(label)
+            view open issues
+        - if current_user && defined?(@project)
+          %li.label-subscription
+            - if label.is_a?(ProjectLabel)
+              %a.js-subscribe-button.label-subscribe-button{ role: 'button', href: '#', data: { status: status, url: toggle_subscription_namespace_project_label_path(@project.namespace, @project, label) } }
+                %span= label_subscription_toggle_button_text(label, @project)
+            - else
+              %a.js-unsubscribe-button.label-subscribe-button{ role: 'button', href: '#', class: ('hidden' if status.unsubscribed?), data: { url: group_label_unsubscribe_path(label, @project) } }
+                %span Unsubscribe
+              %a.js-subscribe-button.label-subscribe-button{ role: 'button', href: '#', class: ('hidden' unless status.unsubscribed?), data: { url: toggle_subscription_namespace_project_label_path(@project.namespace, @project, label) } }
+                %span Subscribe at project level
+              %a.js-subscribe-button.label-subscribe-button{ role: 'button', href: '#', class: ('hidden' unless status.unsubscribed?), data: { url: toggle_subscription_group_label_path(label.group, label) } }
+                %span Subscribe at group level
+
         - if can?(current_user, :admin_label, label)
           %li
             = link_to 'Edit', edit_label_path(label)
           %li
-            = link_to 'Delete', destroy_label_path(label), title: 'Delete', method: :delete, remote: true, data: {confirm: 'Remove this label? Are you sure?'}
+            = link_to 'Delete', destroy_label_path(label), title: 'Delete', method: :delete, data: {confirm: 'Remove this label? Are you sure?'}
 
   .pull-right.hidden-xs.hidden-sm.hidden-md
     = link_to_label(label, subject: subject, type: :merge_request, css_class: 'btn btn-transparent btn-action') do
-      = pluralize open_merge_requests_count, 'merge request'
+      view merge requests
     = link_to_label(label, subject: subject, css_class: 'btn btn-transparent btn-action') do
-      = pluralize open_issues_count, 'open issue'
+      view open issues
+
+    - if current_user && defined?(@project)
+      .label-subscription.inline
+        - if label.is_a?(ProjectLabel)
+          %button.js-subscribe-button.label-subscribe-button.btn.btn-default{ type: 'button', data: { status: status, url: toggle_subscription_namespace_project_label_path(@project.namespace, @project, label) } }
+            %span= label_subscription_toggle_button_text(label, @project)
+            = icon('spinner spin', class: 'label-subscribe-button-loading')
+        - else
+          %button.js-unsubscribe-button.label-subscribe-button.btn.btn-default{ type: 'button', class: ('hidden' if status.unsubscribed?), data: { url: group_label_unsubscribe_path(label, @project) } }
+            %span Unsubscribe
+            = icon('spinner spin', class: 'label-subscribe-button-loading')
 
-    - if current_user
-      .label-subscription.inline{ data: toggle_subscription_data(label) }
-        %button.js-subscribe-button.label-subscribe-button.btn.btn-transparent.btn-action.subscription-status{ type: "button", title: label_subscription_toggle_button_text(label), data: { toggle: "tooltip", status: label_subscription_status(label) } }
-          %span.sr-only= label_subscription_toggle_button_text(label)
-          = icon('eye', class: 'label-subscribe-button-icon', disabled: label.is_a?(GroupLabel))
-          = icon('spinner spin', class: 'label-subscribe-button-loading')
+          .dropdown.dropdown-group-label{ class: ('hidden' unless status.unsubscribed?) }
+            %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
+              %span Subscribe
+              = icon('chevron-down')
+            %ul.dropdown-menu
+              %li
+                %a.js-subscribe-button{ data: { url: toggle_subscription_namespace_project_label_path(@project.namespace, @project, label) } }
+                  Project level
+                %a.js-subscribe-button{ data: { url: toggle_subscription_group_label_path(label.group, label) } }
+                  Group level
 
+    - if label.is_a?(ProjectLabel) && label.project.group && can?(current_user, :admin_group, label.project.group)
+      = link_to promote_namespace_project_label_path(label.project.namespace, label.project, label), title: "Promote to Group Label", class: 'btn btn-transparent btn-action', data: {confirm: "Promoting this label will make this label available to all projects inside this group. Existing project labels with the same name will be merged. Are you sure?", toggle: "tooltip"}, method: :post do
+        %span.sr-only Promote to Group
+        = icon('level-up')
     - if can?(current_user, :admin_label, label)
       = link_to edit_label_path(label), title: "Edit", class: 'btn btn-transparent btn-action', data: {toggle: "tooltip"} do
         %span.sr-only Edit
         = icon('pencil-square-o')
-      = link_to destroy_label_path(label), title: "Delete", class: 'btn btn-transparent btn-action remove-row', method: :delete, remote: true, data: {confirm: label_deletion_confirm_text(label), toggle: "tooltip"} do
+      = link_to destroy_label_path(label), title: "Delete", class: 'btn btn-transparent btn-action remove-row', method: :delete, data: {confirm: label_deletion_confirm_text(label), toggle: "tooltip"} do
         %span.sr-only Delete
         = icon('trash-o')
 
-  - if current_user && label.is_a?(ProjectLabel)
-    :javascript
-      new Subscription('##{dom_id(label)} .label-subscription');
+  - if current_user && defined?(@project)
+    - if label.is_a?(ProjectLabel)
+      :javascript
+        new gl.ProjectLabelSubscription('##{dom_id(label)} .label-subscription');
+    - else
+      :javascript
+        new gl.GroupLabelSubscription('##{dom_id(label)} .label-subscription');
diff --git a/app/views/shared/_logo.svg b/app/views/shared/_logo.svg
index 9b67422da2c..10e6c49ae9f 100644
--- a/app/views/shared/_logo.svg
+++ b/app/views/shared/_logo.svg
@@ -1,4 +1,4 @@
-<svg width="36" height="36" class="tanuki-logo">
+<svg width="28" height="28" class="tanuki-logo" viewBox="0 0 36 36">
   <path class="tanuki-shape tanuki-left-ear" fill="#e24329" d="M2 14l9.38 9v-9l-4-12.28c-.205-.632-1.176-.632-1.38 0z"/>
   <path class="tanuki-shape tanuki-right-ear" fill="#e24329" d="M34 14l-9.38 9v-9l4-12.28c.205-.632 1.176-.632 1.38 0z"/>
   <path class="tanuki-shape tanuki-nose" fill="#e24329" d="M18,34.38 3,14 33,14 Z"/>
diff --git a/app/views/shared/_merge_requests.html.haml b/app/views/shared/_merge_requests.html.haml
index ca3178395c1..b7982b7fe9b 100644
--- a/app/views/shared/_merge_requests.html.haml
+++ b/app/views/shared/_merge_requests.html.haml
@@ -1,16 +1,8 @@
-- if @merge_requests.reorder(nil).any?
-  - @merge_requests.group_by(&:target_project).each do |group|
-    .panel.panel-default.panel-small
-      - project = group[0]
-      .panel-heading
-        = link_to project.name_with_namespace, namespace_project_merge_requests_path(project.namespace, project)
-        - if can?(current_user, :create_merge_request, project)
-          .pull-right
-            = link_to 'New merge request', new_namespace_project_merge_request_path(project.namespace, project)
+- if @merge_requests.to_a.any?
+  .panel.panel-default.panel-small.panel-without-border
+    %ul.content-list.mr-list
+      = render partial: 'projects/merge_requests/merge_request', collection: @merge_requests
 
-      %ul.content-list.mr-list
-        - group[1].each do |merge_request|
-          = render 'projects/merge_requests/merge_request', merge_request: merge_request
   = paginate @merge_requests, theme: "gitlab"
 
 - else
diff --git a/app/views/shared/_milestone_expired.html.haml b/app/views/shared/_milestone_expired.html.haml
index b8eef15fbec..5e9007aaaac 100644
--- a/app/views/shared/_milestone_expired.html.haml
+++ b/app/views/shared/_milestone_expired.html.haml
@@ -1,5 +1,7 @@
 - if milestone.expired? and not milestone.closed?
   %span.cred (Expired)
-- if milestone.expires_at
+- if milestone.upcoming?
+  %span.clgray (Upcoming)
+- if milestone.due_date || milestone.start_date
   %span
-    = milestone.expires_at
+    = milestone_date_range(milestone)
diff --git a/app/views/shared/_milestones_filter.html.haml b/app/views/shared/_milestones_filter.html.haml
index 73d288e2236..db2ac1e1d12 100644
--- a/app/views/shared/_milestones_filter.html.haml
+++ b/app/views/shared/_milestones_filter.html.haml
@@ -1,19 +1,13 @@
-- if @project
-  - counts = milestone_counts(@project.milestones)
-
 %ul.nav-links
-  %li{class: milestone_class_for_state(params[:state], 'opened', true)}
+  %li{ class: milestone_class_for_state(params[:state], 'opened', true) }>
     = link_to milestones_filter_path(state: 'opened') do
       Open
-      - if @project
-        %span.badge #{counts[:opened]}
-  %li{class: milestone_class_for_state(params[:state], 'closed')}
-    = link_to milestones_filter_path(state: 'closed') do
+      %span.badge= counts[:opened]
+  %li{ class: milestone_class_for_state(params[:state], 'closed') }>
+    = link_to milestones_filter_path(state: 'closed', sort: 'due_date_desc') do
       Closed
-      - if @project
-        %span.badge #{counts[:closed]}
-  %li{class: milestone_class_for_state(params[:state], 'all')}
-    = link_to milestones_filter_path(state: 'all') do
+      %span.badge= counts[:closed]
+  %li{ class: milestone_class_for_state(params[:state], 'all') }>
+    = link_to milestones_filter_path(state: 'all', sort: 'due_date_desc') do
       All
-      - if @project
-        %span.badge #{counts[:all]}
+      %span.badge= counts[:all]
diff --git a/app/views/shared/_milestones_sort_dropdown.html.haml b/app/views/shared/_milestones_sort_dropdown.html.haml
new file mode 100644
index 00000000000..9b2f2fdcc93
--- /dev/null
+++ b/app/views/shared/_milestones_sort_dropdown.html.haml
@@ -0,0 +1,22 @@
+.dropdown.inline.prepend-left-10
+  %button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown' } }
+    %span.light
+    - if @sort.present?
+      = milestone_sort_options_hash[@sort]
+    - else
+      = sort_title_due_date_soon
+    = icon('chevron-down')
+  %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-sort
+    %li
+      = link_to page_filter_path(sort: sort_value_due_date_soon, label: true) do
+        = sort_title_due_date_soon
+      = link_to page_filter_path(sort: sort_value_due_date_later, label: true) do
+        = sort_title_due_date_later
+      = link_to page_filter_path(sort: sort_value_start_date_soon, label: true) do
+        = sort_title_start_date_soon
+      = link_to page_filter_path(sort: sort_value_start_date_later, label: true) do
+        = sort_title_start_date_later
+      = link_to page_filter_path(sort: sort_value_name, label: true) do
+        = sort_title_name_asc
+      = link_to page_filter_path(sort: sort_value_name_desc, label: true) do
+        = sort_title_name_desc
diff --git a/app/views/shared/_mini_pipeline_graph.html.haml b/app/views/shared/_mini_pipeline_graph.html.haml
new file mode 100644
index 00000000000..b0778653d4e
--- /dev/null
+++ b/app/views/shared/_mini_pipeline_graph.html.haml
@@ -0,0 +1,18 @@
+.stage-cell
+  - pipeline.stages.each do |stage|
+    - if stage.status
+      - detailed_status = stage.detailed_status(current_user)
+      - icon_status = "#{detailed_status.icon}_borderless"
+      - status_klass = "ci-status-icon ci-status-icon-#{detailed_status.group}"
+
+      .stage-container.dropdown{ class: klass }
+        %button.mini-pipeline-graph-dropdown-toggle.has-tooltip.js-builds-dropdown-button{ class: "ci-status-icon-#{detailed_status.group}", type: 'button', data: { toggle: 'dropdown', title: "#{stage.name}: #{detailed_status.label}", placement: 'top', "stage-endpoint" => stage_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline, stage: stage.name) } }
+          = custom_icon(icon_status)
+          = icon('caret-down')
+
+        %ul.dropdown-menu.mini-pipeline-graph-dropdown-menu.js-builds-dropdown-container
+          .arrow-up
+          .js-builds-dropdown-list.scrollable-menu
+
+          .js-builds-dropdown-loading.builds-dropdown-loading.hidden
+            %span.fa.fa-spinner.fa-spin
diff --git a/app/views/shared/_nav_scroll.html.haml b/app/views/shared/_nav_scroll.html.haml
index 4e3b1b3a571..61646f150c1 100644
--- a/app/views/shared/_nav_scroll.html.haml
+++ b/app/views/shared/_nav_scroll.html.haml
@@ -1,4 +1,4 @@
 .fade-left
   = icon('angle-left')
 .fade-right
-  = icon('angle-right')
\ No newline at end of file
+  = icon('angle-right')
diff --git a/app/views/shared/_new_commit_form.html.haml b/app/views/shared/_new_commit_form.html.haml
index 0c8ac48bb58..3ac5e15d1c4 100644
--- a/app/views/shared/_new_commit_form.html.haml
+++ b/app/views/shared/_new_commit_form.html.haml
@@ -7,7 +7,7 @@
     .form-group.branch
       = label_tag 'target_branch', 'Target branch', class: 'control-label'
       .col-sm-10
-        = text_field_tag 'target_branch', @target_branch || tree_edit_branch, required: true, class: "form-control js-target-branch"
+        = render 'shared/branch_switcher'
 
         .js-create-merge-request-container
           .checkbox
diff --git a/app/views/shared/_no_password.html.haml b/app/views/shared/_no_password.html.haml
index a43bf33751a..ed6fc76c61e 100644
--- a/app/views/shared/_no_password.html.haml
+++ b/app/views/shared/_no_password.html.haml
@@ -1,8 +1,8 @@
 - if cookies[:hide_no_password_message].blank? && !current_user.hide_no_password && current_user.require_password?
-  .no-password-message.alert.alert-warning.hidden-xs
+  .no-password-message.alert.alert-warning
     You won't be able to pull or push project code via #{gitlab_config.protocol.upcase} until you #{link_to 'set a password', edit_profile_password_path} on your account
 
-    .pull-right
+    .alert-link-group
       = link_to "Don't show again", profile_path(user: {hide_no_password: true}), method: :put
       |
       = link_to 'Remind later', '#', class: 'hide-no-password-message'
diff --git a/app/views/shared/_no_ssh.html.haml b/app/views/shared/_no_ssh.html.haml
index bb5fff2d3bb..d663fa13d10 100644
--- a/app/views/shared/_no_ssh.html.haml
+++ b/app/views/shared/_no_ssh.html.haml
@@ -1,8 +1,8 @@
 - if cookies[:hide_no_ssh_message].blank? && !current_user.hide_no_ssh_key && current_user.require_ssh_key?
-  .no-ssh-key-message.alert.alert-warning.hidden-xs
+  .no-ssh-key-message.alert.alert-warning
     You won't be able to pull or push project code via SSH until you #{link_to 'add an SSH key', profile_keys_path, class: 'alert-link'} to your profile
 
-    .pull-right
+    .alert-link-group
       = link_to "Don't show again", profile_path(user: {hide_no_ssh_key: true}), method: :put, class: 'alert-link'
       |
       = link_to 'Remind later', '#', class: 'hide-no-ssh-message alert-link'
diff --git a/app/views/shared/_outdated_browser.html.haml b/app/views/shared/_outdated_browser.html.haml
index 0eba1fe075f..c06d1ffa59b 100644
--- a/app/views/shared/_outdated_browser.html.haml
+++ b/app/views/shared/_outdated_browser.html.haml
@@ -1,8 +1,7 @@
 - if outdated_browser?
-  - link = "https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/install/requirements.md#supported-web-browsers"
   .browser-alert
     GitLab may not work properly because you are using an outdated web browser.
     %br
     Please install a
-    = link_to 'supported web browser', link
+    = link_to 'supported web browser', help_page_url('install/requirements', anchor: 'supported-web-browsers')
     for a better experience.
diff --git a/app/views/shared/_personal_access_tokens_form.html.haml b/app/views/shared/_personal_access_tokens_form.html.haml
new file mode 100644
index 00000000000..af4cc90f4a7
--- /dev/null
+++ b/app/views/shared/_personal_access_tokens_form.html.haml
@@ -0,0 +1,39 @@
+- type = impersonation ? "Impersonation" : "Personal Access"
+
+%h5.prepend-top-0
+  Add a #{type} Token
+%p.profile-settings-content
+  Pick a name for the application, and we'll give you a unique #{type} Token.
+
+= form_for token, url: path, method: :post, html: { class: 'js-requires-input' } do |f|
+
+  = form_errors(token)
+
+  .form-group
+    = f.label :name, class: 'label-light'
+    = f.text_field :name, class: "form-control", required: true
+
+  .form-group
+    = f.label :expires_at, class: 'label-light'
+    = f.text_field :expires_at, class: "datepicker form-control"
+
+  .form-group
+    = f.label :scopes, class: 'label-light'
+    = render 'shared/tokens/scopes_form', prefix: 'personal_access_token', token: token, scopes: scopes
+
+  .prepend-top-default
+    = f.submit "Create #{type} Token", class: "btn btn-create"
+
+:javascript
+  var $dateField = $('.datepicker');
+  var date = $dateField.val();
+
+  new Pikaday({
+    field: $dateField.get(0),
+    theme: 'gitlab-theme',
+    format: 'yyyy-mm-dd',
+    minDate: new Date(),
+    onSelect: function(dateText) {
+      $dateField.val(dateFormat(new Date(dateText), 'yyyy-mm-dd'));
+    }
+  });
diff --git a/app/views/shared/_personal_access_tokens_table.html.haml b/app/views/shared/_personal_access_tokens_table.html.haml
new file mode 100644
index 00000000000..67a49815478
--- /dev/null
+++ b/app/views/shared/_personal_access_tokens_table.html.haml
@@ -0,0 +1,60 @@
+- type = impersonation ? "Impersonation" : "Personal Access"
+%hr
+
+%h5 Active #{type} Tokens (#{active_tokens.length})
+- if impersonation
+  %p.profile-settings-content
+    To see all the user's personal access tokens you must impersonate them first.
+
+- if active_tokens.present?
+  .table-responsive
+    %table.table.active-tokens
+      %thead
+        %tr
+          %th Name
+          %th Created
+          %th Expires
+          %th Scopes
+          - if impersonation
+            %th Token
+          %th
+      %tbody
+        - active_tokens.each do |token|
+          %tr
+            %td= token.name
+            %td= token.created_at.to_date.to_s(:medium)
+            %td
+              - if token.expires?
+                %span{ class: ('text-warning' if token.expires_soon?) }
+                  In #{distance_of_time_in_words_to_now(token.expires_at)}
+              - else
+                %span.token-never-expires-label Never
+            %td= token.scopes.present? ? token.scopes.join(", ") : "<no scopes selected>"
+            - if impersonation
+              %td.token-token-container
+                = text_field_tag 'impersonation-token-token', token.token, readonly: true, class: "form-control"
+                = clipboard_button(clipboard_text: token.token)
+            - path = impersonation ? revoke_admin_user_impersonation_token_path(token.user, token) : revoke_profile_personal_access_token_path(token)
+            %td= link_to "Revoke", path, method: :put, class: "btn btn-danger pull-right", data: { confirm: "Are you sure you want to revoke this #{type} Token? This action cannot be undone." }
+- else
+  .settings-message.text-center
+    This user has no active #{type} Tokens.
+
+%hr
+
+%h5 Inactive #{type} Tokens (#{inactive_tokens.length})
+- if inactive_tokens.present?
+  .table-responsive
+    %table.table.inactive-tokens
+      %thead
+        %tr
+          %th Name
+          %th Created
+      %tbody
+        - inactive_tokens.each do |token|
+          %tr
+            %td= token.name
+            %td= token.created_at.to_date.to_s(:medium)
+- else
+  .settings-message.text-center
+    This user has no inactive #{type} Tokens.
diff --git a/app/views/shared/_service_settings.html.haml b/app/views/shared/_service_settings.html.haml
index 5254d265918..9c5053dace5 100644
--- a/app/views/shared/_service_settings.html.haml
+++ b/app/views/shared/_service_settings.html.haml
@@ -1,46 +1,50 @@
 = form_errors(@service)
 
-- if @service.help.present?
+- if lookup_context.template_exists?('help', "projects/services/#{@service.to_param}", true)
+  = render "projects/services/#{@service.to_param}/help", subject: subject
+- elsif @service.help.present?
   .well
     = preserve do
       = markdown @service.help
 
-.form-group
-  = form.label :active, "Active", class: "control-label"
-  .col-sm-10
-    = form.check_box :active
-
-.form-group
-  = form.label :url, "Trigger", class: 'control-label'
-
-  .col-sm-10
-    - @service.supported_events.each do |event|
-      %div
-        = form.check_box service_event_field_name(event), class: 'pull-left'
-        .prepend-left-20
-          = form.label service_event_field_name(event), class: 'list-label' do
-            %strong
-              = event.humanize
-
-      - field = @service.event_field(event)
-
-      - if field
-        %p
-          = form.text_field field[:name], class: "form-control", placeholder: field[:placeholder]
-
-      %p.light
-        = service_event_description(event)
-
-- @service.global_fields.each do |field|
-  - type = field[:type]
-
-  - if type == 'fieldset'
-    - fields = field[:fields]
-    - legend = field[:legend]
-
-    %fieldset
-      %legend= legend
-      - fields.each do |subfield|
-        = render 'shared/field', form: form, field: subfield
-  - else
-    = render 'shared/field', form: form, field: field
+.service-settings
+  .form-group
+    = form.label :active, "Active", class: "control-label"
+    .col-sm-10
+      = form.check_box :active
+
+  - if @service.supported_events.present?
+    .form-group
+      = form.label :url, "Trigger", class: 'control-label'
+
+      .col-sm-10
+        - @service.supported_events.each do |event|
+          %div
+            = form.check_box service_event_field_name(event), class: 'pull-left'
+            .prepend-left-20
+              = form.label service_event_field_name(event), class: 'list-label' do
+                %strong
+                  = event.humanize
+
+          - field = @service.event_field(event)
+
+          - if field
+            %p
+              = form.text_field field[:name], class: "form-control", placeholder: field[:placeholder]
+
+          %p.light
+            = service_event_description(event)
+
+  - @service.global_fields.each do |field|
+    - type = field[:type]
+
+    - if type == 'fieldset'
+      - fields = field[:fields]
+      - legend = field[:legend]
+
+      %fieldset
+        %legend= legend
+        - fields.each do |subfield|
+          = render 'shared/field', form: form, field: subfield
+    - else
+      = render 'shared/field', form: form, field: field
diff --git a/app/views/shared/_sort_dropdown.html.haml b/app/views/shared/_sort_dropdown.html.haml
index 68e05cb72e1..a212c714826 100644
--- a/app/views/shared/_sort_dropdown.html.haml
+++ b/app/views/shared/_sort_dropdown.html.haml
@@ -1,15 +1,16 @@
 .dropdown.inline.prepend-left-10
-  %button.dropdown-toggle.btn{type: 'button', 'data-toggle' => 'dropdown'}
-    %span.light
+  %button.dropdown-toggle{ type: 'button', data: {toggle: 'dropdown' } }
     - if @sort.present?
       = sort_options_hash[@sort]
     - else
       = sort_title_recently_created
-    = icon('caret-down')
+    = icon('chevron-down')
   %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-sort
     %li
       = link_to page_filter_path(sort: sort_value_priority, label: true) do
         = sort_title_priority
+      = link_to page_filter_path(sort: sort_value_label_priority, label: true) do
+        = sort_title_label_priority
       = link_to page_filter_path(sort: sort_value_recently_created, label: true) do
         = sort_title_recently_created
       = link_to page_filter_path(sort: sort_value_oldest_created, label: true) do
diff --git a/app/views/shared/_user_callout.html.haml b/app/views/shared/_user_callout.html.haml
new file mode 100644
index 00000000000..8f1293adcb1
--- /dev/null
+++ b/app/views/shared/_user_callout.html.haml
@@ -0,0 +1,14 @@
+.user-callout
+  .bordered-box.landing.content-block
+    %button.btn.btn-default.close.js-close-callout{ type: 'button',
+      'aria-label' => 'Dismiss customize experience box' }
+      = icon('times', class: 'dismiss-icon', 'aria-hidden' => 'true')
+    .row
+      .col-sm-3.col-xs-12.svg-container
+        = custom_icon('icon_customization')
+      .col-sm-8.col-xs-12.inner-content
+        %h4
+          Customize your experience
+        %p
+          Change syntax themes, default project pages, and more in preferences.
+        = link_to 'Check it out', profile_preferences_path, class: 'btn btn-default js-close-callout'
diff --git a/app/views/shared/_visibility_level.html.haml b/app/views/shared/_visibility_level.html.haml
index b11257ee0e6..73efec88bb1 100644
--- a/app/views/shared/_visibility_level.html.haml
+++ b/app/views/shared/_visibility_level.html.haml
@@ -1,8 +1,11 @@
+- with_label = local_assigns.fetch(:with_label, true)
+
 .form-group.project-visibility-level-holder
-  = f.label :visibility_level, class: 'control-label' do
-    Visibility Level
-    = link_to icon('question-circle'), help_page_path("public_access/public_access")
-  .col-sm-10
+  - if with_label
+    = f.label :visibility_level, class: 'control-label' do
+      Visibility Level
+      = link_to icon('question-circle'), help_page_path("public_access/public_access")
+  %div{ :class => ("col-sm-10" if with_label) }
     - if can_change_visibility_level
       = render('shared/visibility_radios', model_method: :visibility_level, form: f, selected_level: visibility_level, form_model: form_model)
     - else
diff --git a/app/views/shared/builds/_tabs.html.haml b/app/views/shared/builds/_tabs.html.haml
index 60353aee7f1..3baa956b910 100644
--- a/app/views/shared/builds/_tabs.html.haml
+++ b/app/views/shared/builds/_tabs.html.haml
@@ -1,23 +1,23 @@
 %ul.nav-links
-  %li{ class: ('active' if scope.nil?) }
+  %li{ class: active_when(scope.nil?) }>
     = link_to build_path_proc.call(nil) do
       All
       %span.badge.js-totalbuilds-count
         = number_with_delimiter(all_builds.count(:id))
 
-  %li{ class: ('active' if scope == 'pending') }
+  %li{ class: active_when(scope == 'pending') }>
     = link_to build_path_proc.call('pending') do
       Pending
       %span.badge
         = number_with_delimiter(all_builds.pending.count(:id))
 
-  %li{ class: ('active' if scope == 'running') }
+  %li{ class: active_when(scope == 'running') }>
     = link_to build_path_proc.call('running') do
       Running
       %span.badge
         = number_with_delimiter(all_builds.running.count(:id))
 
-  %li{ class: ('active' if scope == 'finished') }
+  %li{ class: active_when(scope == 'finished') }>
     = link_to build_path_proc.call('finished') do
       Finished
       %span.badge
diff --git a/app/views/shared/empty_states/_issues.html.haml b/app/views/shared/empty_states/_issues.html.haml
new file mode 100644
index 00000000000..7a7e3d46796
--- /dev/null
+++ b/app/views/shared/empty_states/_issues.html.haml
@@ -0,0 +1,21 @@
+- button_path = local_assigns.fetch(:button_path, false)
+- project_select_button = local_assigns.fetch(:project_select_button, false)
+- has_button = button_path || project_select_button
+
+.row.empty-state
+  .pull-right.col-xs-12{ class: "#{'col-sm-6' if has_button}" }
+    .svg-content
+      = render 'shared/empty_states/icons/issues.svg'
+  .col-xs-12{ class: "#{'col-sm-6' if has_button}" }
+    .text-content
+      - if has_button && current_user
+        %h4
+          The Issue Tracker is the place to add things that need to be improved or solved in a project
+        %p
+          Issues can be bugs, tasks or ideas to be discussed.
+          Also, issues are searchable and filterable.
+        - if project_select_button
+          = render 'shared/new_project_item_select', path: 'issues/new', label: 'New issue'
+      - else
+        %h4 There are no issues to show.
+      = link_to 'New issue', button_path, class: 'btn btn-new', title: 'New issue', id: 'new_issue_link'
diff --git a/app/views/shared/empty_states/_labels.html.haml b/app/views/shared/empty_states/_labels.html.haml
new file mode 100644
index 00000000000..00fb77bdb3b
--- /dev/null
+++ b/app/views/shared/empty_states/_labels.html.haml
@@ -0,0 +1,11 @@
+.row.empty-state.labels
+  .pull-right.col-xs-12.col-sm-6
+    .svg-content
+      = render 'shared/empty_states/icons/labels.svg'
+  .col-xs-12.col-sm-6
+    .text-content
+      %h4 Labels can be applied to issues and merge requests to categorize them.
+      %p You can also star a label to make it a priority label.
+      - if can?(current_user, :admin_label, @project)
+        = link_to 'New label', new_namespace_project_label_path(@project.namespace, @project), class: 'btn btn-new', title: 'New label', id: 'new_label_link'
+        = link_to 'Generate a default set of labels', generate_namespace_project_labels_path(@project.namespace, @project), method: :post, class: 'btn btn-success btn-inverted', title: 'Generate a default set of labels', id: 'generate_labels_link'
diff --git a/app/views/shared/empty_states/_priority_labels.html.haml b/app/views/shared/empty_states/_priority_labels.html.haml
new file mode 100644
index 00000000000..bc268301a97
--- /dev/null
+++ b/app/views/shared/empty_states/_priority_labels.html.haml
@@ -0,0 +1,3 @@
+.text-center
+  = render 'shared/empty_states/icons/priority_labels.svg'
+  %p Star labels to start sorting by priority
diff --git a/app/views/shared/empty_states/icons/_issues.svg b/app/views/shared/empty_states/icons/_issues.svg
new file mode 100644
index 00000000000..2e92bf19579
--- /dev/null
+++ b/app/views/shared/empty_states/icons/_issues.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="790 253 425 254" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><rect id="a" width="25" height="8.9423" x="25" y="88.4231" rx="2"/><mask id="h" width="25" height="8.9423" x="0" y="0" fill="#fff"><use xlink:href="#a"/></mask><path id="b" d="M16 29.8013h43V91.404H16z"/><mask id="i" width="43" height="61.6026" x="0" y="0" fill="#fff"><use xlink:href="#b"/></mask><path id="c" d="M57 60.6026l13.1868 9.3587c.449.3188.876 1.0142.9556 1.5673l3.5747 24.863c.1564 1.0866-.253 1.2572-.912.384L66 86.436l-9-6.9552"/><mask id="j" width="17.7504" height="36.7306" x="0" y="0" fill="#fff"><use xlink:href="#c"/></mask><path id="d" d="M.2496 60.6026l13.1868 9.3587c.449.3188.876 1.0142.9556 1.5673l3.5748 24.863c.1562 1.0866-.2532 1.2572-.9123.384L9.2495 86.436l-9-6.9552"/><mask id="k" width="17.7504" height="36.7306" x="0" y="0" fill="#fff"><use xlink:href="#d"/></mask><path id="e" d="M16 29.8013L35.786 1.4556c.9466-1.3562 2.4792-1.3594 3.428 0L59 29.8013"/><mask id="l" width="43" height="29.364" x="0" y="0" fill="#fff"><use xlink:href="#e"/></mask><rect id="f" width="26.2653" height="35.5088" x="6.3673" rx="13.1327"/><mask id="m" width="26.2653" height="35.5088" x="0" y="0" fill="#fff"><use xlink:href="#f"/></mask><rect id="g" width="16.8367" height="22.386" x="4.0816" rx="8.4184"/><mask id="n" width="16.8367" height="22.386" x="0" y="0" fill="#fff"><use xlink:href="#g"/></mask></defs><g fill="none" fill-rule="evenodd" transform="translate(792.000000, 255.000000)"><g fill="#FDE5D8"><path d="M225.4372 59.5866c-.059.5897-.1323 1.2698-.2203 2.0305-.252 2.1764-.5717 4.559-.9653 7.07-.1283.8185.4312 1.586 1.2496 1.7143.8185.1283 1.586-.4312 1.7142-1.2497.4-2.5528.7253-4.975.9815-7.1898.0898-.7762.1646-1.4715.2252-2.0762.0366-.365.0604-.62.0722-.7557.0717-.8254-.539-1.5526-1.3645-1.6244-.8254-.0717-1.5526.539-1.6244 1.3645-.0106.1228-.0332.365-.0684.7166zM219.8738 87.9413c-.2563.7878.1745 1.6342.9622 1.8906.7878.2562 1.6342-.1745 1.8906-.9623.975-2.9962 1.849-6.2827 2.6287-9.797.1794-.8086-.3308-1.6097-1.1395-1.789-.8088-.1795-1.61.3306-1.7893 1.1394-.76 3.4256-1.6096 6.6206-2.5527 9.5183zM209.9266 103.166c-.781.2766-1.1897 1.134-.913 1.9148.2765.781 1.1338 1.1897 1.9147.913 2.9792-1.0552 5.5414-3.679 7.7796-7.6272.4084-.7207.1554-1.636-.5653-2.0447-.7207-.4086-1.636-.1556-2.0446.565-1.9152 3.3786-3.9945 5.508-6.1714 6.279zM190.439 107.5834c-.7636.3214-1.122 1.201-.8005 1.9645.3215.7634 1.201 1.1217 1.9645.8003 3.1204-1.314 6.2717-2.3243 9.258-2.9816.809-.178 1.3205-.9783 1.1424-1.7874-.178-.809-.9783-1.3205-1.7874-1.1424-3.1666.697-6.4914 1.763-9.777 3.1464zM173.231 118.6257c-.6005.5706-.6248 1.52-.0542 2.1206s1.52.625 2.1206.0543c2.282-2.1682 4.8656-4.162 7.6758-5.946.6994-.444.9064-1.371.4624-2.0704-.444-.6994-1.371-.9064-2.0704-.4624-2.9698 1.8854-5.707 3.998-8.1342 6.304zM162.4543 136.2492c-.2022.8034.2852 1.6185 1.0885 1.8207.8034.202 1.6186-.2853 1.8208-1.0886.7688-3.0547 2.0416-5.9768 3.781-8.7486.4403-.7018.2284-1.6276-.4733-2.068-.7017-.4402-1.6275-.2283-2.068.4734-1.9026 3.0322-3.3016 6.2438-4.149 9.611zM162.1894 156.693c.1036.822.854 1.4042 1.676 1.3006.8218-.1037 1.404-.854 1.3004-1.676-.367-2.9097-.5796-6.1364-.6444-9.8167-.0146-.8284-.698-1.488-1.5262-1.4734-.8283.0146-1.488.698-1.4733 1.5262.0665 3.783.286 7.1162.6674 10.1393zM168.408 176.1653c.3876.7322 1.2953 1.0117 2.0275.6242.7322-.3875 1.0117-1.2952.6242-2.0274-1.6733-3.162-2.9028-5.9954-3.8477-8.943-.2528-.789-1.0973-1.2235-1.8862-.9706-.789.2528-1.2234 1.0974-.9706 1.8863 1.0025 3.1275 2.3014 6.121 4.053 9.4306zM175.9738 188.9357c1.056 1.7165 1.8892 3.0806 2.7307 4.474.4283.709 1.3503.9368 2.0595.5085.709-.4283.9368-1.3503.5085-2.0595-.8464-1.4014-1.6836-2.772-2.7434-4.4948.0808.131-1.9545-3.1733-2.486-4.0405-.4328-.7063-1.3563-.928-2.0627-.495-.7063.4327-.928 1.3563-.495 2.0626.5334.8707 2.5708 4.1785 2.4885 4.0447zM184.83 211.3822c.011.8284.6912 1.491 1.5196 1.4803.8283-.0108 1.491-.691 1.4803-1.5194-.046-3.519-.6604-6.996-1.8367-10.3262-.276-.7812-1.1328-1.1908-1.914-.915-.781.276-1.1906 1.133-.9147 1.914 1.0668 3.0206 1.624 6.1733 1.6655 9.3664zM179.3467 229.4095c-.459.6896-.2723 1.6208.4173 2.08.6896.459 1.6208.272 2.08-.4175 1.966-2.9533 3.4756-6.124 4.4877-9.4165.2434-.7918-.2012-1.631-.993-1.8745-.792-.2434-1.6312.2012-1.8746.993-.9264 3.014-2.3108 5.922-4.1173 8.6355z"/></g><g transform="translate(336.866969, 147.225953) rotate(-300.000000) translate(-336.866969, -147.225953) translate(299.366969, 69.725953)"><path stroke="#FDE5D8" stroke-width="3" d="M19 154l10-52.6603m16 0L55 154" stroke-linecap="round"/><rect width="3" height="38.75" x="35" y="99.3526" fill="#FDE5D8" rx="1.5"/><use fill="#FFF" stroke="#FDE5D8" stroke-width="6" mask="url(#h)" xlink:href="#a"/><use stroke="#FDE5D8" stroke-width="6" mask="url(#i)" xlink:href="#b"/><use stroke="#FDE5D8" stroke-width="6" mask="url(#j)" xlink:href="#c"/><use stroke="#FDE5D8" stroke-width="6" mask="url(#k)" transform="translate(9.124810, 78.967887) scale(-1, 1) translate(-9.124810, -78.967887)" xlink:href="#d"/><use stroke="#FDE5D8" stroke-width="6" mask="url(#l)" xlink:href="#e"/><ellipse cx="28.5" cy="82.9583" fill="#FC8A51" rx="1.5" ry="1.4904"/><ellipse cx="34.5" cy="82.9583" fill="#FC8A51" rx="1.5" ry="1.4904"/><ellipse cx="40.5" cy="82.9583" fill="#FC8A51" rx="1.5" ry="1.4904"/><ellipse cx="46.5" cy="82.9583" fill="#FC8A51" rx="1.5" ry="1.4904"/><ellipse cx="37.5" cy="55.1378" stroke="#FDE5D8" stroke-width="3" rx="10.5" ry="10.4327"/><ellipse cx="37.5" cy="55.1378" stroke="#FDE5D8" stroke-width="3" rx="5.5" ry="5.4647"/></g><path fill="#EEE" d="M96.0426 37.2106c-.1512 1.6874.0814 3.815.997 6.146.2046.5207.7936.7774 1.3155.5733.522-.2043.7793-.792.5747-1.313-.7912-2.0142-.99-3.832-.865-5.226.0102-.1143.0195-.186.0238-.2113.092-.552-.2814-1.0738-.8344-1.1658-.553-.092-1.076.2808-1.168.8326-.0126.075-.0285.1975-.0434.364zM107.5302 52.8934c.4913.239 1.098.0626 1.355-.394.2572-.4566.0674-1.0205-.4238-1.2595-1.8668-.9083-3.4584-1.9152-4.7943-3.0075-.4162-.3404-1.0506-.3026-1.4168.0843-.3663.387-.3256.9766.0907 1.317 1.4583 1.1925 3.1828 2.2835 5.1893 3.2596zM120.661 58.9533c.5467.171 1.1257-.1425 1.2933-.7003.1675-.5577-.1397-1.1484-.6864-1.3194-3.0283-.9472-4.1984-1.3178-5.915-1.8824-.544-.179-1.1274.126-1.3028.6813-.1754.5552.1235 1.1504.6677 1.3294 1.729.5686 2.9053.941 5.943 1.8913zM132.5954 62.881c.449.246 1.022.0983 1.2798-.33.258-.4282.103-.975-.3458-1.221-1.4942-.819-3.1928-1.545-5.2675-2.2746-.486-.1708-1.025.0664-1.204.53-.179.4634.0697.9776.5555 1.1484 1.9832.6973 3.5892 1.3838 4.982 2.1472zM141.9774 73.383c.205.4938.809.742 1.3485.5543.5395-.1878.8106-.7404.6055-1.2344-.8504-2.0482-1.853-3.7962-3.0375-5.3046-.337-.429-.99-.527-1.4588-.2184-.4687.3085-.5755.9064-.2386 1.3354 1.0743 1.368 1.9926 2.9692 2.7808 4.8675zM144.609 87.025c.0183.5535.5682.99 1.2283.9746.66-.0153 1.1805-.4764 1.1622-1.03-.0725-2.2033-.2693-4.206-.622-6.1198-.1008-.5473-.7115-.9225-1.3642-.838-.6526.0846-1.1.597-.999 1.1442.336 1.8248.5248 3.745.5947 5.869z"/><path fill="#E5E5E5" d="M144.1423 95.7297c-.0863 2.5442-.1214 3.769-.1422 5.2548-.0076.5523.3963 1.007.9022 1.0154.506.0083.9223-.4326.93-.985.0205-1.4668.0554-2.6812.1412-5.2113l.026-.7667c.0185-.552-.3764-1.016-.882-1.0363-.5056-.0203-.9306.411-.949.963l-.026.766zM144.939 115.201c.1196.5447.6727.8925 1.2355.7768.5628-.1157.922-.651.8026-1.1957-.417-1.9-.7104-3.84-.8976-5.8637-.0513-.5545-.5574-.964-1.1305-.9142-.573.0497-.996.5396-.9448 1.0942.1944 2.1015.4998 4.121.9348 6.103zM149.995 127.5248c.296.454.9528.61 1.4668.3485.514-.2614.6907-.8413.3947-1.2952-1.0787-1.6535-2.0046-3.3145-2.7896-4.9916-.2266-.484-.8547-.7143-1.403-.5142-.548.2-.809.7546-.5823 1.2387.8208 1.7534 1.788 3.4886 2.9134 5.2138zM154.8088 135.226c1.0587 1.232 2.242 2.4097 3.543 3.531.404.3482 1.0276.3186 1.393-.066.3657-.3843.3346-.978-.0692-1.3262-1.2296-1.0597-2.345-2.17-3.3402-3.328-.195-.227-.3872-.4542-.5764-.6813-.3385-.4063-.9588-.4744-1.3856-.1522-.4267.3223-.4983.913-.1598 1.3192.1954.2346.3938.469.5952.7034zM170.634 146.9026c.4806.242 1.0517.0176 1.2758-.501.224-.5188.0162-1.1354-.4642-1.3773-1.7563-.8842-3.422-1.8432-4.9857-2.8726-.4527-.298-1.0434-.1435-1.3195.3452-.276.4885-.133 1.126.3198 1.424 1.6256 1.0704 3.354 2.0655 5.1738 2.9816z"/><path fill="#EEE" d="M184.7334 151.9698c.5527.1412 1.1072-.2262 1.2385-.8206.1312-.5944-.2104-1.1908-.763-1.332-2.001-.5114-3.9602-1.1002-5.8632-1.763-.5405-.1883-1.1205.1303-1.2955.7115-.175.5813.1212 1.205.6616 1.3934 1.9557.6813 3.9676 1.286 6.0214 1.8108zM197.9337 153.9977c.5532.04 1.0297-.445 1.0643-1.083.0346-.6383-.3857-1.188-.939-1.228-1.973-.1424-3.952-.3682-5.9206-.676-.5492-.086-1.0547.358-1.1292.9917-.0744.6336.3105 1.2168.8597 1.3027 2.0164.3154 4.0433.5467 6.0647.6927zM212.1213 152.6062c.5493-.055.9392-.4576.871-.8994-.0684-.442-.569-.7555-1.1184-.7006-1.9168.1917-3.893.3194-5.9104.382-.553.0173-.9842.392-.9628.8368.0213.445.487.7916 1.0402.7744 2.0737-.0645 4.1064-.1957 6.0803-.3932zM226.3665 149.949c.5293-.22.7755-.8162.5497-1.332-.2257-.5155-.838-.7553-1.3672-.5354-1.7815.74-3.7143 1.3827-5.7772 1.923-.5558.1454-.8852.7023-.7358 1.2436.1494.5414.721.8623 1.2768.7168 2.1547-.5643 4.1797-1.2376 6.0537-2.016zM237.8486 140.4168c.292-.4344.1488-1.006-.3202-1.2766-.469-.2706-1.086-.1378-1.3782.2967-.9575 1.4237-2.225 2.7337-3.7847 3.9202-.427.3248-.4888.9087-.138 1.3042.3505.3955.981.4528 1.408.128 1.723-1.3107 3.1363-2.7714 4.213-4.3726zM245.6725 130.6874c.3987-.3503.439-.9587.09-1.3588-.3492-.4-.9554-.4405-1.3542-.0902-1.5048 1.3222-2.8978 2.7094-4.1698 4.1635-.3497.3995-.3102 1.008.088 1.3587.3983.3508 1.0046.3113 1.3542-.0884 1.2153-1.389 2.5487-2.717 3.9918-3.985zM257.4814 122.8697c.476-.2568.657-.8577.4047-1.342-.2523-.4843-.8428-.6687-1.3188-.4118-1.7682.9542-3.4795 1.973-5.1228 3.0587-.4518.2985-.5803.9133-.287 1.373.2934.46.8975.5906 1.3494.292 1.5938-1.0528 3.2557-2.0423 4.9746-2.97zM270.276 116.9216c.5503-.1682.8513-.724.6723-1.241-.179-.5173-.77-.8003-1.3204-.632-1.9296.5898-3.932 1.2728-5.975 2.054-.536.205-.7936.7797-.5754 1.2835.218.504.8294.746 1.3654.541 1.9947-.7628 3.95-1.4298 5.833-2.0054z"/><circle cx="145" cy="90" r="5" fill="#FFF" stroke="#EEE" stroke-width="2"/><circle cx="238" cy="138" r="5" fill="#FFF" stroke="#EEE" stroke-width="2"/><path stroke="#B5A7DD" stroke-width="3" d="M20.0605 56s-17.4698 33-12 53c5.4697 20 17 32 38 44S78.5 148 107 159s29 43 29 43" stroke-linecap="round" stroke-dasharray="8 10"/><g stroke="#EEE" stroke-width="3" transform="translate(108.000000, 173.000000)"><path fill="#FFF" d="M154 77c0-42.526-34.474-77-77-77S0 34.474 0 77" stroke-linecap="round"/><circle cx="108" cy="41" r="16"/><circle cx="42.5" cy="30.5" r="8.5"/><circle cx="22" cy="58" r="5"/></g><g><g fill="#FC8A51" transform="translate(235.917801, 27.746228) rotate(-345.000000) translate(-235.917801, -27.746228) translate(216.417801, 4.246228) translate(19.897959, -0.000000)"><path d="M.398 11.2982h2.3877c0-4.234 3.3853-7.6666 7.5612-7.6666v-2.421C4.8522 1.2105.398 5.727.398 11.298z"/><ellipse cx="10.7449" cy="2.0175" rx="1.9898" ry="2.0175"/></g><g fill="#FC8A51" transform="translate(235.917801, 27.746228) rotate(-345.000000) translate(-235.917801, -27.746228) translate(216.417801, 4.246228) translate(12.602041, 6.000000) scale(-1, 1) translate(-12.602041, -6.000000) translate(6.102041, -0.000000)"><path d="M.398 11.2982h2.3877c0-4.234 3.3853-7.6666 7.5612-7.6666v-2.421C4.8522 1.2105.398 5.727.398 11.298z"/><ellipse cx="10.7449" cy="2.0175" rx="1.9898" ry="2.0175"/></g><g transform="translate(235.917801, 27.746228) rotate(-345.000000) translate(-235.917801, -27.746228) translate(216.417801, 4.246228) translate(0.000000, 10.491228)"><g fill="#FC8A51" transform="translate(29.448980, 11.298246)"><rect width="7.9592" height="2" x=".7959" y="8.8772" rx="1"/><rect width="7.9592" height="2" x=".7959" y="16.1404" transform="translate(4.775510, 17.140351) rotate(-345.000000) translate(-4.775510, -17.140351)" rx="1"/><rect width="7.9592" height="2" x=".9151" y="1.8072" transform="translate(4.894667, 2.807217) rotate(-15.000000) translate(-4.894667, -2.807217)" rx="1"/></g><g fill="#FC8A51" transform="translate(5.051020, 21.298246) scale(-1, 1) translate(-5.051020, -21.298246) translate(0.551020, 11.298246)"><rect width="7.9592" height="2" x=".7959" y="8.8772" rx="1"/><rect width="7.9592" height="2" x=".7959" y="16.1404" transform="translate(4.775510, 17.140351) rotate(-345.000000) translate(-4.775510, -17.140351)" rx="1"/><rect width="7.9592" height="2" x=".9151" y="1.8072" transform="translate(4.894667, 2.807217) rotate(-15.000000) translate(-4.894667, -2.807217)" rx="1"/></g><use stroke="#FC8A51" stroke-width="6" mask="url(#m)" xlink:href="#f"/><path fill="#FC8A51" d="M7.1633 12.9123H31.041v3H7.1632z"/></g></g><g><g fill="#EEE" transform="translate(92.956359, 18.724125) scale(-1, 1) rotate(-345.000000) translate(-92.956359, -18.724125) translate(80.456359, 3.724125) translate(12.755102, 0.000000)"><path d="M.255 7.1228h1.5307c0-2.6694 2.17-4.8333 4.847-4.8333V.7632C3.1104.7632.255 3.6105.255 7.1228z"/><ellipse cx="6.8878" cy="1.2719" rx="1.2755" ry="1.2719"/></g><g fill="#EEE" transform="translate(92.956359, 18.724125) scale(-1, 1) rotate(-345.000000) translate(-92.956359, -18.724125) translate(80.456359, 3.724125) translate(7.744898, 4.000000) scale(-1, 1) translate(-7.744898, -4.000000) translate(3.244898, 0.000000)"><path d="M.255 7.1228h1.5307c0-2.6694 2.17-4.8333 4.847-4.8333V.7632C3.1104.7632.255 3.6105.255 7.1228z"/><ellipse cx="6.8878" cy="1.2719" rx="1.2755" ry="1.2719"/></g><g transform="translate(92.956359, 18.724125) scale(-1, 1) rotate(-345.000000) translate(-92.956359, -18.724125) translate(80.456359, 3.724125) translate(0.000000, 6.614035)"><g fill="#EEE" transform="translate(18.877551, 7.122807)"><rect width="5.102" height="2" x=".5102" y="5.5965" rx="1"/><rect width="5.102" height="2" x=".5102" y="10.1754" transform="translate(3.061224, 11.175439) rotate(-345.000000) translate(-3.061224, -11.175439)" rx="1"/><rect width="5.102" height="2" x=".5866" y="1.1393" transform="translate(3.137607, 2.139333) rotate(-15.000000) translate(-3.137607, -2.139333)" rx="1"/></g><g fill="#EEE" transform="translate(3.122449, 13.622807) scale(-1, 1) translate(-3.122449, -13.622807) translate(0.122449, 7.122807)"><rect width="5.102" height="2" x=".5102" y="5.5965" rx="1"/><rect width="5.102" height="2" x=".5102" y="10.1754" transform="translate(3.061224, 11.175439) rotate(-345.000000) translate(-3.061224, -11.175439)" rx="1"/><rect width="5.102" height="2" x=".5866" y="1.1393" transform="translate(3.137607, 2.139333) rotate(-15.000000) translate(-3.137607, -2.139333)" rx="1"/></g><use stroke="#EEE" stroke-width="4" mask="url(#n)" xlink:href="#g"/><path fill="#EEE" d="M4.5918 8.1404h15.306v2H4.592z"/></g></g><g fill="#FFF" transform="translate(0.000000, 103.000000)"><circle cx="8.5" cy="8.5" r="8.5" stroke="#B5A7DD" stroke-width="4"/><circle cx="171.5" cy="20.5" r="6.5"/></g><g><g transform="translate(39.000000, 142.000000)"><ellipse cx="12.5" cy="12.5" fill="#FFF" stroke="#6B4FBB" stroke-width="4" rx="12.5" ry="12.5"/><path fill="#FC8A51" d="M10.7322 13.475l-1.7665-1.7667c-.5873-.5873-1.5368-.587-2.1226-.0012-.5897.59-.585 1.5362.0013 2.1226l2.826 2.826.0007.0007.0006.0006c.5898.5897 1.534.587 2.118.003l6.3704-6.3703c.577-.577.5826-1.5323-.003-2.118-.59-.59-1.5343-.5873-2.1183-.0033l-5.3065 5.3065z"/></g></g><circle cx="171.5" cy="122.5" r="6.5" fill="#FFF" stroke="#FC8A51" stroke-width="3"/><circle cx="22" cy="52" r="6" fill="#FFF" stroke="#B5A7DD" stroke-width="3"/><path fill="#FFF" stroke="#B5A7DD" stroke-width="3.6" d="M188.151 141.596c8.7045-7.7456 11.0126-20.9255 4.8625-31.5777-7.0208-12.1604-22.4055-16.422-34.363-9.5183-11.9572 6.9036-15.959 22.358-8.9382 34.5183 6.2353 10.8 19.068 15.3695 30.2375 11.4206l10.8992 18.8778c1.3167 2.2807 4.2302 3.063 6.5078 1.748 2.273-1.3122 3.0567-4.2295 1.74-6.51l-10.9458-18.9587zm-8.4343-4.6086c7.8576-4.5366 10.4874-14.6923 5.8738-22.6834-4.6137-7.991-14.7237-10.7915-22.5814-6.255-7.8575 4.5368-10.4873 14.6925-5.8737 22.6836 4.6137 7.991 14.7237 10.7915 22.5814 6.2548z"/></g></svg>
diff --git a/app/views/shared/empty_states/icons/_labels.svg b/app/views/shared/empty_states/icons/_labels.svg
new file mode 100644
index 00000000000..dc041a4a78b
--- /dev/null
+++ b/app/views/shared/empty_states/icons/_labels.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="787 240 386 274" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><circle id="a" cx="37" cy="107" r="8"/><mask id="e" width="16" height="16" x="0" y="0" fill="#fff"><use xlink:href="#a"/></mask><circle id="b" cx="37" cy="75" r="8"/><mask id="f" width="16" height="16" x="0" y="0" fill="#fff"><use xlink:href="#b"/></mask><circle id="c" cx="42" cy="93" r="8"/><mask id="g" width="16" height="16" x="0" y="0" fill="#fff"><use xlink:href="#c"/></mask><circle id="d" cx="43" cy="75" r="8"/><mask id="h" width="16" height="16" x="0" y="0" fill="#fff"><use xlink:href="#d"/></mask></defs><g fill="none" fill-rule="evenodd" transform="translate(791 244)"><g transform="rotate(30 49.554 229.722)"><rect width="74" height="124" x="8.6" y="95.9" fill="#FAFAFA" rx="8"/><rect width="74" height="124" y="87" fill="#FFF" stroke="#EEE" stroke-width="4" stroke-linecap="round" rx="8"/><circle cx="26.5" cy="178.5" r="3.5" fill="#FC8A51"/><circle cx="47.5" cy="178.5" r="3.5" fill="#FC8A51"/><rect width="50" height="4" x="12" y="127" fill="#E5E5E5" rx="2"/><rect width="38" height="4" x="18" y="139" fill="#E5E5E5" rx="2"/><use stroke="#E5E5E5" stroke-width="8" mask="url(#e)" stroke-linecap="round" xlink:href="#a"/><path stroke="#EEE" stroke-width="4" d="M37.3 107S10.5 18.3 81 .6" stroke-linecap="round"/><path fill="#FDE5D8" d="M31 189c0 3.3 2.7 6 6 6s6-2.7 6-6"/></g><g transform="translate(105 47)"><rect width="74" height="124" y="64" fill="#FAFAFA" rx="8"/><rect width="74" height="124" y="55" fill="#FFF" stroke="#EEE" stroke-width="4" stroke-linecap="round" rx="8"/><rect width="50" height="4" x="12" y="95" fill="#E5E5E5" rx="2"/><rect width="38" height="4" x="18" y="107" fill="#E5E5E5" rx="2"/><use stroke="#E5E5E5" stroke-width="8" mask="url(#f)" stroke-linecap="round" xlink:href="#b"/><path fill="#B5A7DD" d="M56 149.7c-.6-1-.2-2 .7-2.7l1.8-1c1-.6 2-.2 2.7.7.5 1 .2 2.2-.7 2.8l-1.8 1c-1 .5-2 .2-2.7-.8zm-37.8 0c.5-1 .2-2-.7-2.7l-1.8-1c-1-.6-2-.2-2.7.7-.6 1-.2 2.2.7 2.8l1.8 1c1 .5 2 .2 2.7-.8zM33 151h9v4h-9v-4z"/><path fill="#6B4FBB" d="M59 153c0-5.5-4.6-10-10-10-5.7 0-10 4.5-10 10s4.3 10 10 10c5.4 0 10-4.5 10-10zm-16 0c0-3.3 2.6-6 6-6 3.2 0 6 2.7 6 6s-2.8 6-6 6c-3.4 0-6-2.7-6-6zM35 153c0-5.5-4.6-10-10-10-5.7 0-10 4.5-10 10s4.3 10 10 10c5.4 0 10-4.5 10-10zm-16 0c0-3.3 2.6-6 6-6 3.2 0 6 2.7 6 6s-2.8 6-6 6c-3.4 0-6-2.7-6-6z"/><path stroke="#EEE" stroke-width="4" d="M37 75S30 0 80 0" stroke-linecap="round"/></g><g transform="rotate(15 -82.507 752.644)"><rect width="74" height="124" x="14.6" y="81.8" fill="#FAFAFA" rx="8"/><rect width="74" height="124" x="5" y="73" fill="#FFF" stroke="#EEE" stroke-width="4" stroke-linecap="round" rx="8"/><path fill="#FDE5D8" d="M41 147c0-1 1-2 2-2s2 1 2 2v3c0 1-1 2-2 2s-2-1-2-2v-3zm16.8 6.2c.8-.7 2-.6 2.8.3.7.8.5 2-.3 2.8L58 158c-1 .8-2.2.7-3 0-.6-1-.4-2.3.4-3l2.4-1.8zm-32 3c-1-.6-1-2-.4-2.7.7-1 2-1 2.8-.3l2.4 1.8c.8.7 1 2 .3 3-.8.7-2 1-3 0l-2.3-1.7z"/><rect width="2" height="7" x="39" y="168" fill="#FC8A51" rx="1"/><rect width="2" height="7" x="45" y="168" fill="#FC8A51" rx="1"/><circle cx="40" cy="169" r="2" fill="#FC8A51"/><circle cx="46" cy="169" r="2" fill="#FC8A51"/><rect width="22" height="18" x="32" y="158" stroke="#FC8A51" stroke-width="4" rx="8"/><rect width="34" height="5" x="26" y="174" fill="#FC8A51" rx="2.5"/><rect width="50" height="4" x="17" y="113" fill="#E5E5E5" rx="2"/><rect width="38" height="4" x="23" y="125" fill="#E5E5E5" rx="2"/><use stroke="#E5E5E5" stroke-width="8" mask="url(#g)" stroke-linecap="round" xlink:href="#c"/><path stroke="#EEE" stroke-width="4" d="M42 93S50 0 0 0" stroke-linecap="round"/></g><g transform="rotate(-15 276.18 -697.744)"><rect width="74" height="124" x="18.7" y="65.6" fill="#FAFAFA" rx="8"/><rect width="74" height="124" x="6" y="55" fill="#FFF" stroke="#EEE" stroke-width="4" stroke-linecap="round" rx="8"/><g transform="translate(25 129)"><path stroke="#B5A7DD" stroke-width="4" d="M32 14c0-7.7-6.3-14-14-14S4 6.3 4 14" stroke-linecap="round"/><path stroke="#B5A7DD" stroke-width="2" d="M33 15v13c0 4.4-3.6 8-8 8" stroke-linecap="round"/><rect width="7" height="4" x="20" y="34" fill="#6B4FBB" rx="2"/><rect width="7" height="13" y="15" fill="#FFF" stroke="#6B4FBB" stroke-width="3" stroke-linejoin="round" rx="3.5"/><rect width="7" height="13" x="29" y="15" fill="#FFF" stroke="#6B4FBB" stroke-width="3" stroke-linejoin="round" transform="matrix(-1 0 0 1 65 0)" rx="3.5"/></g><rect width="50" height="4" x="18" y="95" fill="#E5E5E5" rx="2"/><rect width="38" height="4" x="24" y="107" fill="#E5E5E5" rx="2"/><use stroke="#E5E5E5" stroke-width="8" mask="url(#h)" stroke-linecap="round" xlink:href="#d"/><path stroke="#EEE" stroke-width="4" d="M43 75S50 0 0 0" stroke-linecap="round"/></g><circle cx="193" cy="47" r="12" fill="#FFF" stroke="#FDE5D8" stroke-width="4"/><circle cx="193" cy="47" r="5" fill="#FFF" stroke="#FDE5D8" stroke-width="4"/><g opacity=".2"><path fill="#FC8A51" d="M30.7 254.8l-2.6 1c-1 .5-1.7 0-1.7-1v-3l-1-2.7c-.4-1 .2-1.7 1.2-1.7h3l2.6-1c1.2-.4 2 .2 2 1.2l-.2 3 1 2.6c.5 1.2 0 2-1 2l-3-.2zM374.7 133.8l-2.6 1c-1 .5-1.7 0-1.7-1v-3l-1-2.7c-.4-1 .2-1.7 1.2-1.7h3l2.6-1c1.2-.4 2 .2 2 1.2l-.2 3 1 2.6c.5 1.2 0 2-1 2l-3-.2zM5.6 95H1.8c-1.3.2-2-.8-1.4-2l1.4-3.4-.2-3.8c0-1.3 1-2 2-1.4l3.6 1.4 3.7-.2c1.2 0 2 1 1.4 2L11 91.3V95c.2 1.2-.8 2-2 1.4L5.6 95z"/><path fill="#6B4FBB" d="M308.8 62l-2-2.3c-.7-.8-.5-1.7.6-2l2.8-1 2-2c1-.6 1.8-.4 2.2.7l.8 2.8 2 2c.8 1 .5 1.8-.5 2.2l-2.8.8-2.3 2c-.8.8-1.7.5-2-.5l-1-2.8zM318 226.6h-3c-1-.2-1.4-1-1-2l1.4-2.5v-3c.2-1 1-1.4 2-1l2.6 1.4h3c1 .2 1.5 1 1 2l-1.4 2.6v3c-.2 1-1 1.5-2 1l-2.5-1.4zM121.8 8l-2-2.3c-.7-.8-.5-1.7.6-2l2.8-1 2-2c1-.6 1.8-.4 2.2.7l.8 2.8 2 2c.8 1 .5 1.8-.5 2.2l-2.8.8-2.3 2c-.8.8-1.7.5-2-.5l-1-2.8z"/></g></g></svg>
diff --git a/app/views/shared/empty_states/icons/_pipelines_empty.svg b/app/views/shared/empty_states/icons/_pipelines_empty.svg
new file mode 100644
index 00000000000..8119d5bebe0
--- /dev/null
+++ b/app/views/shared/empty_states/icons/_pipelines_empty.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 150"><g fill="none" fill-rule="evenodd" transform="translate(0-3)"><g transform="translate(0 105)"><g fill="#e5e5e5"><rect width="78" height="4" x="34" y="21" opacity=".5" rx="2"/><path d="m152 23c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4c-1.104 0-1.998-.888-1.998-2m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4c-1.104 0-1.998-.888-1.998-2m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4c-1.104 0-1.998-.888-1.998-2m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4c-1.104 0-1.998-.888-1.998-2m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4c-1.104 0-1.998-.888-1.998-2"/></g><g transform="translate(0 4)"><path fill="#98d7b2" fill-rule="nonzero" d="m19 38c-10.493 0-19-8.507-19-19 0-10.493 8.507-19 19-19 10.493 0 19 8.507 19 19 0 10.493-8.507 19-19 19m0-4c8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15-8.284 0-15 6.716-15 15 0 8.284 6.716 15 15 15"/><path fill="#31af64" d="m17.07 21.02l-2.829-2.829c-.786-.786-2.047-.781-2.828 0-.786.786-.781 2.047 0 2.828l4.243 4.243c.392.392.902.587 1.412.588.512.002 1.021-.193 1.41-.582l7.79-7.79c.777-.777.775-2.042-.006-2.823-.786-.786-2.045-.784-2.823-.006l-6.37 6.37"/></g><g fill="#e52c5a" transform="translate(102)"><path fill-rule="nonzero" d="m24 47.5c-12.979 0-23.5-10.521-23.5-23.5 0-12.979 10.521-23.5 23.5-23.5 12.979 0 23.5 10.521 23.5 23.5 0 12.979-10.521 23.5-23.5 23.5m0-5c10.217 0 18.5-8.283 18.5-18.5 0-10.217-8.283-18.5-18.5-18.5-10.217 0-18.5 8.283-18.5 18.5 0 10.217 8.283 18.5 18.5 18.5"/><path d="m28.24 24l2.833-2.833c1.167-1.167 1.167-3.067-.004-4.239-1.169-1.169-3.069-1.173-4.239-.004l-2.833 2.833-2.833-2.833c-1.167-1.167-3.067-1.167-4.239.004-1.169 1.169-1.173 3.069-.004 4.239l2.833 2.833-2.833 2.833c-1.167 1.167-1.167 3.067.004 4.239 1.169 1.169 3.069 1.173 4.239.004l2.833-2.833 2.833 2.833c1.167 1.167 3.067 1.167 4.239-.004 1.169-1.169 1.173-3.069.004-4.239l-2.833-2.833"/></g><path fill="#e5e5e5" fill-rule="nonzero" d="m236 37c-7.732 0-14-6.268-14-14 0-7.732 6.268-14 14-14 7.732 0 14 6.268 14 14 0 7.732-6.268 14-14 14m0-4c5.523 0 10-4.477 10-10 0-5.523-4.477-10-10-10-5.523 0-10 4.477-10 10 0 5.523 4.477 10 10 10"/></g><g transform="translate(69 3)"><path fill="#e5e5e5" fill-rule="nonzero" d="m4 11.99v60.02c0 4.413 3.583 7.99 8 7.99h89.991c4.419 0 8-3.579 8-7.99v-60.02c0-4.413-3.583-7.99-8-7.99h-89.991c-4.419 0-8 3.579-8 7.99m-4 0c0-6.622 5.378-11.99 12-11.99h89.991c6.629 0 12 5.367 12 11.99v60.02c0 6.622-5.378 11.99-12 11.99h-89.991c-6.629 0-12-5.367-12-11.99v-60.02m52.874 80.3l-13.253-15.292h34.76l-13.253 15.292c-2.237 2.582-6.01 2.585-8.253 0m3.02-2.62c.644.743 1.564.743 2.207 0l7.516-8.673h-17.24l7.516 8.673"/><rect width="18" height="6" x="15" y="23" fill="#fc8a51" rx="3"/><rect width="18" height="6" x="39" y="39" fill="#e52c5a" rx="3"/><rect width="18" height="6" x="33" y="55" fill="#e5e5e5" rx="3"/><rect width="12" height="6" x="39" y="23" fill="#fde5d8" rx="3"/><rect width="12" height="6" x="57" y="55" fill="#e52c5a" rx="3"/><rect width="12" height="6" x="15" y="55" fill="#b5a7dd" rx="3"/><rect width="18" height="6" x="81" y="23" fill="#fc8a51" rx="3"/><rect width="18" height="6" x="15" y="39" fill="#fde5d8" rx="3"/><rect width="6" height="6" x="57" y="23" fill="#e52c5a" rx="3"/><g fill="#fde5d8"><rect width="6" height="6" x="69" y="23" rx="3"/><rect width="6" height="6" x="75" y="39" rx="3"/></g><rect width="6" height="6" x="63" y="39" fill="#e52c5a" rx="3"/></g><g transform="matrix(.70711-.70711.70711.70711 84.34 52.5)"><path fill="#6b4fbb" fill-rule="nonzero" d="m28.02 67.48c-15.927-2.825-28.02-16.738-28.02-33.476 0-18.778 15.222-34 34-34 18.778 0 34 15.222 34 34 0 16.738-12.1 30.652-28.02 33.476.015.173.023.347.023.524v21.999c0 3.314-2.693 6-6 6-3.314 0-6-2.682-6-6v-21.999c0-.177.008-.351.023-.524m5.977-7.476c14.359 0 26-11.641 26-26 0-14.359-11.641-26-26-26-14.359 0-26 11.641-26 26 0 14.359 11.641 26 26 26"/><path fill="#fff" fill-opacity=".3" stroke="#6b4fbb" stroke-width="8" d="m31 71c16.569 0 30-13.431 30-30 0-16.569-13.431-30-30-30" transform="matrix(.86603.5-.5.86603 26.663-17.507)"/></g></g></svg>
\ No newline at end of file
diff --git a/app/views/shared/empty_states/icons/_pipelines_failed.svg b/app/views/shared/empty_states/icons/_pipelines_failed.svg
new file mode 100644
index 00000000000..7dbabf7e4ef
--- /dev/null
+++ b/app/views/shared/empty_states/icons/_pipelines_failed.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 446 249" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="0" d="m260.03 114h23.972v-.013c19.972-.53 36-16.887 36-36.987 0-20.435-16.565-37-37-37-.993 0-1.977.039-2.95.116-4.95-14.605-18.773-25.12-35.05-25.12-5.464 0-10.652 1.185-15.32 3.311-6.649-9.841-17.909-16.311-30.68-16.311-20.435 0-37 16.565-37 37 0 .701.019 1.397.058 2.088-16.11 3.999-28.06 18.561-28.06 35.912 0 20.435 16.565 37 37 37 .324 0 .646-.004.968-.012"/><ellipse id="2" cx="41" cy="41" rx="41" ry="41"/><mask id="1" width="186" height="112" x="0" y="0" fill="#fff"><use xlink:href="#0"/></mask><mask id="3" width="82" height="82" x="0" y="0" fill="#fff"><use xlink:href="#2"/></mask></defs><g fill="none" fill-rule="evenodd"><g transform="matrix(.86603.5-.5.86603 228.11 137.43)"><path stroke="#b5a7dd" stroke-width="4" d="m.445.161c15.89 10.636 34.998 16.839 55.55 16.839"/><g transform="translate(56 4)"><path fill="#fb722e" d="m16 8c0-1.105.902-2 2.01-2h7.983c1.109 0 2.01.888 2.01 2 0 1.105-.902 2-2.01 2h-7.983c-1.109 0-2.01-.888-2.01-2m0 10c0-1.105.902-2 2.01-2h7.983c1.109 0 2.01.888 2.01 2 0 1.105-.902 2-2.01 2h-7.983c-1.109 0-2.01-.888-2.01-2"/><path fill="#fde5d8" fill-rule="nonzero" d="m4 22h6c3.315 0 6-2.685 6-5.997v-6.01c0-3.315-2.684-5.997-6-5.997h-6v18m-4-18.992c0-1.661 1.343-3.01 2.994-3.01h7.01c5.523 0 10 4.47 10 9.997v6.01c0 5.521-4.476 9.997-10 9.997h-7.01c-1.654 0-2.994-1.343-2.994-3.01v-19.984"/></g></g><g fill-rule="nonzero" transform="translate(257)"><path fill="#e5e5e5" d="m3.597 18.747c5.611-9.09 15.519-14.747 26.403-14.747 17.12 0 31 13.879 31 31 0 7.02-2.34 13.685-6.58 19.1l3.149 2.466c4.786-6.111 7.431-13.639 7.431-21.565 0-19.33-15.67-35-35-35-12.286 0-23.476 6.384-29.808 16.647l3.404 2.1"/><g transform="matrix(.96593.25882-.25882.96593 15.98 9.578)"><path fill="#b5a7dd" d="m12.426 11.592l-2.142 1.768-3.664-2.116c-.186-.107-.43-.042-.543.154l-1.229 2.129c-.116.2-.052.438.138.547l3.658 2.112-.455 2.735c-.109.657-.165 1.327-.165 2.01 0 .678.055 1.348.165 2.01l.455 2.735-3.658 2.112c-.186.107-.251.351-.138.547l1.229 2.129c.116.2.353.264.543.154l3.664-2.116 2.142 1.768c1.036.855 2.205 1.533 3.462 2l2.6.972v4.225c0 .215.179.393.405.393h2.458c.231 0 .405-.174.405-.393v-4.225l2.6-.972c1.257-.47 2.426-1.147 3.462-2l2.142-1.768 3.664 2.116c.186.107.43.042.543-.154l1.229-2.129c.116-.2.052-.438-.138-.547l-3.658-2.112.455-2.735c.109-.657.165-1.327.165-2.01 0-.678-.055-1.348-.165-2.01l-.455-2.735 3.658-2.112c.186-.107.251-.351.138-.547l-1.229-2.129c-.116-.2-.353-.264-.543-.154l-3.664 2.116-2.142-1.768c-1.036-.855-2.205-1.533-3.462-2l-2.6-.972v-4.225c0-.215-.179-.393-.405-.393h-2.458c-.231 0-.405.174-.405.393v4.225l-2.6.972c-1.257.47-2.426 1.147-3.462 2m2.062-5.749v-1.45c0-2.426 1.963-4.393 4.405-4.393h2.458c2.433 0 4.405 1.967 4.405 4.393v1.45c1.689.631 3.243 1.538 4.608 2.665l1.259-.727c2.101-1.213 4.786-.497 6.01 1.618l1.229 2.129c1.216 2.107.499 4.798-1.602 6.01l-1.257.726c.144.866.219 1.755.219 2.662 0 .907-.075 1.796-.219 2.662l1.257.726c2.101 1.213 2.823 3.896 1.602 6.01l-1.229 2.129c-1.216 2.107-3.906 2.832-6.01 1.618l-1.259-.727c-1.365 1.127-2.92 2.034-4.608 2.665v1.45c0 2.426-1.963 4.393-4.405 4.393h-2.458c-2.433 0-4.405-1.967-4.405-4.393v-1.45c-1.689-.631-3.243-1.538-4.608-2.665l-1.259.727c-2.101 1.213-4.786.497-6.01-1.618l-1.229-2.129c-1.216-2.107-.499-4.798 1.602-6.01l1.257-.726c-.144-.866-.219-1.755-.219-2.662 0-.907.075-1.796.219-2.662l-1.257-.726c-2.101-1.213-2.823-3.896-1.602-6.01l1.229-2.129c1.216-2.107 3.906-2.832 6.01-1.618l1.259.727c1.365-1.127 2.92-2.034 4.608-2.665"/><path fill="#6b4fbb" d="m20.12 23.366c1.347 0 2.439-1.092 2.439-2.439 0-1.347-1.092-2.439-2.439-2.439-1.347 0-2.439 1.092-2.439 2.439 0 1.347 1.092 2.439 2.439 2.439m0 4c-3.556 0-6.439-2.883-6.439-6.439 0-3.556 2.883-6.439 6.439-6.439 3.556 0 6.439 2.883 6.439 6.439 0 3.556-2.883 6.439-6.439 6.439"/></g></g><use fill="#fff" stroke="#e5e5e5" stroke-width="8" mask="url(#1)" stroke-linejoin="round" xlink:href="#0"/><g transform="translate(175 58)"><use fill="#fff" stroke="#e5e5e5" stroke-width="8" mask="url(#3)" xlink:href="#2"/><g fill-rule="nonzero"><path fill="#e5e5e5" d="m41 78c20.435 0 37-16.565 37-37 0-20.435-16.565-37-37-37-20.435 0-37 16.565-37 37 0 20.435 16.565 37 37 37m0 4c-22.644 0-41-18.356-41-41 0-22.644 18.356-41 41-41 22.644 0 41 18.356 41 41 0 22.644-18.356 41-41 41"/><g transform="matrix(.96593.25882-.25882.96593 23.581 9.415)"><path fill="#b5a7dd" d="m14.821 13.655l-2.142 1.768-3.933-2.271c-.72-.416-1.634-.171-2.046.543l-1.507 2.61c-.409.708-.161 1.631.553 2.043l3.926 2.267-.455 2.735c-.145.869-.218 1.754-.218 2.65 0 .896.073 1.782.218 2.65l.455 2.735-3.926 2.267c-.72.416-.965 1.329-.553 2.043l1.507 2.61c.409.708 1.332.955 2.046.543l3.933-2.271 2.142 1.768c1.369 1.131 2.916 2.027 4.579 2.648l2.6.972v4.534c0 .831.669 1.5 1.493 1.5h3.01c.817 0 1.493-.676 1.493-1.5v-4.534l2.6-.972c1.663-.621 3.21-1.518 4.579-2.648l2.142-1.768 3.933 2.271c.72.416 1.634.171 2.046-.543l1.507-2.61c.409-.708.161-1.631-.553-2.043l-3.926-2.267.455-2.735c.145-.869.218-1.754.218-2.65 0-.896-.073-1.782-.218-2.65l-.455-2.735 3.926-2.267c.72-.416.965-1.329.553-2.043l-1.507-2.61c-.409-.708-1.332-.955-2.046-.543l-3.933 2.271-2.142-1.768c-1.369-1.131-2.916-2.027-4.579-2.648l-2.6-.972v-4.534c0-.831-.669-1.5-1.493-1.5h-3.01c-.817 0-1.493.676-1.493 1.5v4.534l-2.6.972c-1.663.621-3.21 1.518-4.579 2.648m3.179-6.395v-1.759c0-3.038 2.471-5.5 5.493-5.5h3.01c3.034 0 5.493 2.46 5.493 5.5v1.759c2.098.784 4.03 1.91 5.725 3.311l1.528-.882c2.631-1.519 5.999-.61 7.51 2.01l1.507 2.61c1.517 2.627.616 5.987-2.02 7.507l-1.525.881c.179 1.076.272 2.18.272 3.307 0 1.127-.093 2.231-.272 3.307l1.525.881c2.631 1.519 3.528 4.89 2.02 7.507l-1.507 2.61c-1.517 2.627-4.877 3.527-7.51 2.01l-1.528-.882c-1.696 1.401-3.627 2.527-5.725 3.311v1.759c0 3.038-2.471 5.5-5.493 5.5h-3.01c-3.034 0-5.493-2.46-5.493-5.5v-1.759c-2.098-.784-4.03-1.91-5.725-3.311l-1.528.882c-2.631 1.519-5.999.61-7.51-2.01l-1.507-2.61c-1.517-2.627-.616-5.987 2.02-7.507l1.525-.881c-.179-1.076-.272-2.18-.272-3.307 0-1.127.093-2.231.272-3.307l-1.525-.881c-2.631-1.519-3.528-4.89-2.02-7.507l1.507-2.61c1.517-2.627 4.877-3.527 7.51-2.01l1.528.882c1.696-1.401 3.627-2.527 5.725-3.311"/><path fill="#6b4fbb" d="m25 30c2.209 0 4-1.791 4-4 0-2.209-1.791-4-4-4-2.209 0-4 1.791-4 4 0 2.209 1.791 4 4 4m0 4c-4.418 0-8-3.582-8-8 0-4.418 3.582-8 8-8 4.418 0 8 3.582 8 8 0 4.418-3.582 8-8 8"/></g></g></g><g transform="translate(140 161)"><path fill="#e5e5e5" fill-rule="nonzero" d="m4 8.541v30.01c0 2.202 1.793 3.995 4 3.995h20c2.209 0 4-1.789 4-3.995v-30.01c0-2.202-1.793-3.995-4-3.995h-20c-2.209 0-4 1.789-4 3.995m-4 0c0-4.416 3.583-7.995 8-7.995h20c4.416 0 8 3.584 8 7.995v30.01c0 4.416-3.583 7.995-8 7.995h-20c-4.416 0-8-3.584-8-7.995v-30.01"/><g fill="#fb722e"><rect width="4" height="11" x="10" y="18.545" rx="2"/><rect width="4" height="11" x="21" y="18.545" rx="2"/></g></g><path fill="#e5e5e5" fill-rule="nonzero" d="m445.16 245.34c-16.874-11.778-110.62-20.336-222.14-20.336-111.61 0-205.4 8.571-222.18 20.364-.904.635-1.121 1.883-.486 2.786.635.904 1.883 1.121 2.786.486 15.756-11.07 109.46-19.636 219.88-19.636 110.34 0 203.99 8.55 219.85 19.617.906.632 2.153.41 2.785-.495.632-.906.41-2.153-.495-2.785"/></g></svg>
\ No newline at end of file
diff --git a/app/views/shared/empty_states/icons/_priority_labels.svg b/app/views/shared/empty_states/icons/_priority_labels.svg
new file mode 100644
index 00000000000..7282c2b215e
--- /dev/null
+++ b/app/views/shared/empty_states/icons/_priority_labels.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="116" height="68" viewBox="181 0 116 68"><g fill="none" fill-rule="evenodd" transform="translate(182)"><rect width="78" height="34" x="37" y="34" fill="#FAFAFA" rx="3"/><rect width="78" height="34" x="31" y="28" fill="#FFF" stroke="#EEE" stroke-width="4" stroke-linecap="round" rx="3"/><path fill="#FFF" stroke="#FC6D26" stroke-width="3" d="M34 35.8c-.6 0-1.4 0-1.8.4L29 38.8c-1 .7-1.7.4-2-.7l-.6-4c0-.5-.5-1.2-1-1.5L22 30.2c-1-.6-1-1.5 0-2l3.7-2c.5-.2 1-.8 1.2-1.3l1-4.2c.3-1 1-1.3 2-.5l3 3c.3.3 1 .6 1.6.6l4.2-.3c1 0 1.5.7 1 1.7L38 29c-.3.6-.3 1.4 0 2l1.3 3.8c.4 1 0 1.8-1.2 1.6l-4-.6z" stroke-linecap="round"/><path fill="#FDE5D8" d="M51.6 14.3c-.2-.2-.8-.4-1-.3l-2.8.5c-.7 0-1-.4-.8-1l1-2.8V9.5L46.6 7c-.3-.7 0-1.2.8-1h2.7c.3 0 .8-.2 1-.5l2-2c.6-.5 1-.4 1.3.3l.7 2.8c0 .3.4.8.7 1l2.3 1.2c.7.3.7 1 0 1.3l-2.2 1.7-.6 1-.4 3c-.2.6-.7.8-1.3.4l-2-1.7zM5.4 43.2c-.2-.2-.5-.2-.7-.2l-1.8.3c-.6 0-1-.2-.7-.7l.7-1.8V40l-1-1.7c0-.4 0-.7.6-.7h1.8c.3 0 .6 0 .8-.2L6.5 36c.3-.3.7-.2.8.2l.5 2 .5.5 1.6.8c.3.2.3.7 0 1l-1.6 1c-.2 0-.4.4-.4.7l-.4 2c0 .3-.4.5-.8.2l-1.4-1.2zM10.4 9.2C10.2 9 10 9 9.7 9L8 9.3c-.6 0-1-.2-.7-.7L8 6.8V6L7 4.3c0-.4 0-.7.6-.7h1.8c.3 0 .6 0 .8-.2L11.5 2c.3-.3.7-.2.8.2l.5 2 .5.5 1.6.8c.3.2.3.7 0 1l-1.6 1c-.2 0-.4.4-.4.7l-.4 2c0 .3-.4.5-.8.2l-1.4-1.2z"/><rect width="52" height="4" x="43" y="38" fill="#EEE" rx="2"/><rect width="36" height="4" x="43" y="48" fill="#EEE" rx="2"/></g></svg>
diff --git a/app/views/shared/empty_states/_todos_all_done.svg b/app/views/shared/empty_states/icons/_todos_all_done.svg
index 94b5c2e0ea0..94b5c2e0ea0 100644
--- a/app/views/shared/empty_states/_todos_all_done.svg
+++ b/app/views/shared/empty_states/icons/_todos_all_done.svg
diff --git a/app/views/shared/empty_states/_todos_empty.svg b/app/views/shared/empty_states/icons/_todos_empty.svg
index b1e661268fb..b1e661268fb 100644
--- a/app/views/shared/empty_states/_todos_empty.svg
+++ b/app/views/shared/empty_states/icons/_todos_empty.svg
diff --git a/app/views/shared/groups/_dropdown.html.haml b/app/views/shared/groups/_dropdown.html.haml
new file mode 100644
index 00000000000..37589b634fa
--- /dev/null
+++ b/app/views/shared/groups/_dropdown.html.haml
@@ -0,0 +1,18 @@
+.dropdown.inline
+  %button.dropdown-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
+    %span.light
+    - if @sort.present?
+      = sort_options_hash[@sort]
+    - else
+      = sort_title_recently_created
+    = icon('chevron-down')
+  %ul.dropdown-menu.dropdown-menu-align-right
+    %li
+      = link_to filter_groups_path(sort: sort_value_recently_created) do
+        = sort_title_recently_created
+      = link_to filter_groups_path(sort: sort_value_oldest_created) do
+        = sort_title_oldest_created
+      = link_to filter_groups_path(sort: sort_value_recently_updated) do
+        = sort_title_recently_updated
+      = link_to filter_groups_path(sort: sort_value_oldest_updated) do
+        = sort_title_oldest_updated
diff --git a/app/views/shared/groups/_group.html.haml b/app/views/shared/groups/_group.html.haml
index 19221e3391f..09f946f1d88 100644
--- a/app/views/shared/groups/_group.html.haml
+++ b/app/views/shared/groups/_group.html.haml
@@ -1,4 +1,6 @@
 - group_member = local_assigns[:group_member]
+- full_name = true unless local_assigns[:full_name] == false
+- group_name = full_name ? group.full_name : group.name
 - css_class = '' unless local_assigns[:css_class]
 - css_class += " no-description" if group.description.blank?
 
@@ -15,24 +17,23 @@
   .stats
     %span
       = icon('bookmark')
-      = number_with_delimiter(group.projects.count)
+      = number_with_delimiter(group.projects.non_archived.count)
 
     %span
       = icon('users')
       = number_with_delimiter(group.users.count)
 
-    %span.visibility-icon.has-tooltip{data: { container: 'body', placement: 'left' }, title: visibility_icon_description(group)}
+    %span.visibility-icon.has-tooltip{ data: { container: 'body', placement: 'left' }, title: visibility_icon_description(group) }
       = visibility_level_icon(group.visibility_level, fw: false)
 
   .avatar-container.s40
     = image_tag group_icon(group), class: "avatar s40 hidden-xs"
   .title
-    = link_to group, class: 'group-name' do
-      = group.name
+    = link_to group_name, group, class: 'group-name'
 
     - if group_member
       as
-      %span #{group_member.human_access}
+      %span= group_member.human_access
 
   - if group.description.present?
     .description
diff --git a/app/views/shared/groups/_search_form.html.haml b/app/views/shared/groups/_search_form.html.haml
new file mode 100644
index 00000000000..ad7a7faedf1
--- /dev/null
+++ b/app/views/shared/groups/_search_form.html.haml
@@ -0,0 +1,2 @@
+= form_tag request.path, method: :get, class: 'group-filter-form', id: 'group-filter-form' do |f|
+  = search_field_tag :filter_groups, params[:filter_groups], placeholder: 'Filter by name...', class: 'group-filter-form-field form-control input-short js-groups-list-filter', spellcheck: false, id: 'group-filter-form-field', tabindex: "2"
diff --git a/app/views/shared/icons/_collapse.svg.erb b/app/views/shared/icons/_collapse.svg.erb
new file mode 100644
index 00000000000..917753fb343
--- /dev/null
+++ b/app/views/shared/icons/_collapse.svg.erb
@@ -0,0 +1 @@
+<svg width="<%= size %>" height="<%= size %>" viewBox="0 0 9 13"><path d="M2.57568253,6.49866948 C2.50548852,6.57199715 2.44637866,6.59708255 2.39835118,6.57392645 C2.3503237,6.55077034 2.32631032,6.48902165 2.32631032,6.38867852 L2.32631032,-2.13272614 C2.32631032,-2.23306927 2.3503237,-2.29481796 2.39835118,-2.31797406 C2.44637866,-2.34113017 2.50548852,-2.31604477 2.57568253,-2.24271709 L6.51022184,1.86747129 C6.53977721,1.8983461 6.56379059,1.93500939 6.5822627,1.97746225 L6.5822627,2.27849013 C6.56379059,2.31708364 6.53977721,2.35374693 6.51022184,2.38848109 L2.57568253,6.49866948 Z" transform="translate(4.454287, 2.127976) rotate(90.000000) translate(-4.454287, -2.127976) "></path><path d="M3.74312342,2.09553332 C3.74312342,1.99519019 3.77821989,1.9083561 3.8484139,1.83502843 C3.91860791,1.76170075 4.00173115,1.72503747 4.09778611,1.72503747 L4.80711151,1.72503747 C4.90316647,1.72503747 4.98628971,1.76170075 5.05648372,1.83502843 C5.12667773,1.9083561 5.16177421,1.99519019 5.16177421,2.09553332 L5.16177421,10.2464421 C5.16177421,10.3467853 5.12667773,10.4336194 5.05648372,10.506947 C4.98628971,10.5802747 4.90316647,10.616938 4.80711151,10.616938 L4.09778611,10.616938 C4.00173115,10.616938 3.91860791,10.5802747 3.8484139,10.506947 C3.77821989,10.4336194 3.74312342,10.3467853 3.74312342,10.2464421 L3.74312342,2.09553332 Z" transform="translate(4.452449, 6.170988) rotate(-90.000000) translate(-4.452449, -6.170988) "></path><path d="M2.57568253,14.6236695 C2.50548852,14.6969971 2.44637866,14.7220826 2.39835118,14.6989264 C2.3503237,14.6757703 2.32631032,14.6140216 2.32631032,14.5136785 L2.32631032,5.99227386 C2.32631032,5.89193073 2.3503237,5.83018204 2.39835118,5.80702594 C2.44637866,5.78386983 2.50548852,5.80895523 2.57568253,5.88228291 L6.51022184,9.99247129 C6.53977721,10.0233461 6.56379059,10.0600094 6.5822627,10.1024622 L6.5822627,10.4034901 C6.56379059,10.4420836 6.53977721,10.4787469 6.51022184,10.5134811 L2.57568253,14.6236695 Z" transform="translate(4.454287, 10.252976) scale(1, -1) rotate(90.000000) translate(-4.454287, -10.252976) "></path></svg>
diff --git a/app/views/shared/icons/_delta.svg b/app/views/shared/icons/_delta.svg
new file mode 100644
index 00000000000..7c0c0d3999c
--- /dev/null
+++ b/app/views/shared/icons/_delta.svg
@@ -0,0 +1,3 @@
+<svg width="14px" height="10px" viewBox="322 21 14 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <path d="M330.078605,22.8166945 L335.259532,29.6235062 C335.615145,30.0907182 335.412062,30.4694683 334.822641,30.4694683 L331.657805,30.4694683 L324.04678,30.4694683 C323.449879,30.4694683 323.260751,30.0822112 323.609889,29.6235062 L328.790816,22.8166945 C329.146429,22.3494825 329.729467,22.3579895 330.078605,22.8166945 Z" id="delta" stroke="#5C5C5C" stroke-width="1" fill="none"></path>
+</svg>
diff --git a/app/views/shared/icons/_go_logo.svg.erb b/app/views/shared/icons/_go_logo.svg.erb
new file mode 100644
index 00000000000..5052651c110
--- /dev/null
+++ b/app/views/shared/icons/_go_logo.svg.erb
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="<%= size %>" height="<%= size %>" viewBox="0 0 16 16"><g fill-rule="evenodd" transform="translate(0 1)"><path d="m14 15.01h1v-8.02c0-3.862-3.134-6.991-7-6.991-3.858 0-7 3.13-7 6.991v8.02h1v-8.02c0-3.306 2.691-5.991 6-5.991 3.314 0 6 2.682 6 5.991v8.02m-10.52-13.354c-.366-.402-.894-.655-1.48-.655-1.105 0-2 .895-2 2 0 .868.552 1.606 1.325 1.883.102-.321.226-.631.371-.93-.403-.129-.695-.507-.695-.953 0-.552.448-1 1-1 .306 0 .58.138.764.354.222-.25.461-.483.717-.699m9.04-.002c.366-.401.893-.653 1.479-.653 1.105 0 2 .895 2 2 0 .867-.552 1.606-1.324 1.883-.101-.321-.225-.632-.37-.931.403-.129.694-.507.694-.952 0-.552-.448-1-1-1-.305 0-.579.137-.762.353-.222-.25-.461-.483-.717-.699"/><path d="m5.726 7.04h1.557v.124c0 .283-.033.534-.1.752-.065.202-.175.391-.33.566-.35.394-.795.591-1.335.591-.527 0-.979-.19-1.355-.571-.376-.382-.564-.841-.564-1.377 0-.547.191-1.01.574-1.391.382-.382.848-.574 1.396-.574.295 0 .57.06.825.181.244.12.484.316.72.586l-.405.388c-.309-.412-.686-.618-1.13-.618-.399 0-.733.138-1 .413-.27.27-.405.609-.405 1.015 0 .42.151.766.452 1.037.282.252.587.378.915.378.28 0 .531-.094.754-.283.223-.19.347-.418.373-.683h-.94v-.535m2.884.061c0-.53.194-.986.583-1.367.387-.381.853-.571 1.396-.571.537 0 .998.192 1.382.576.386.384.578.845.578 1.384 0 .542-.194 1-.581 1.379-.389.379-.858.569-1.408.569-.487 0-.923-.168-1.311-.505-.426-.373-.64-.861-.64-1.465m.574.007c0 .417.14.759.42 1.028.278.269.6.403.964.403.395 0 .729-.137 1-.41.272-.277.408-.613.408-1.01 0-.402-.134-.739-.403-1.01-.267-.273-.597-.41-.991-.41-.392 0-.723.137-.993.41-.27.27-.405.604-.405 1m-.184 3.918c.525.026.812.063.812.063.271.025.324-.096.116-.273 0 0-.775-.813-1.933-.813-1.159 0-1.923.813-1.923.813-.211.174-.153.3.12.273 0 0 .286-.037.81-.063v.477c0 .268.224.5.5.5.268 0 .5-.223.5-.498v-.252.25c0 .268.224.5.5.5.268 0 .5-.223.5-.498v-.478m-1-1.023c.552 0 1-.224 1-.5 0-.276-.448-.5-1-.5-.552 0-1 .224-1 .5 0 .276.448.5 1 .5"/></g></svg>
diff --git a/app/views/shared/icons/_icon_action_cancel.svg b/app/views/shared/icons/_icon_action_cancel.svg
new file mode 100644
index 00000000000..a1f700eb0ff
--- /dev/null
+++ b/app/views/shared/icons/_icon_action_cancel.svg
@@ -0,0 +1 @@
+<svg width="30px" height="30px" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><path d="M19.25,14.9765625 C19.25,14.1380166 19.0234398,13.3697952 18.5703125,12.671875 L12.6796875,18.5546875 C13.3932327,19.0182315 14.1666625,19.25 15,19.25 C15.5781279,19.25 16.1289036,19.1367199 16.6523438,18.9101562 C17.1757839,18.6835926 17.6276023,18.3802102 18.0078125,18 C18.3880227,17.6197898 18.690103,17.1653672 18.9140625,16.6367188 C19.138022,16.1080703 19.25,15.5546904 19.25,14.9765625 Z M11.4453125,17.3125 L17.34375,11.421875 C16.6406215,10.9479143 15.8593793,10.7109375 15,10.7109375 C14.2291628,10.7109375 13.5182324,10.9010398 12.8671875,11.28125 C12.2161426,11.6614602 11.7005227,12.1796842 11.3203125,12.8359375 C10.9401023,13.4921908 10.75,14.2057253 10.75,14.9765625 C10.75,15.8203167 10.9817685,16.5989548 11.4453125,17.3125 Z M21,14.9765625 C21,15.7942749 20.8411474,16.5755171 20.5234375,17.3203125 C20.2057276,18.0651079 19.7799506,18.7057265 19.2460938,19.2421875 C18.7122369,19.7786485 18.0742225,20.2057276 17.3320312,20.5234375 C16.58984,20.8411474 15.8125041,21 15,21 C14.1874959,21 13.41016,20.8411474 12.6679688,20.5234375 C11.9257775,20.2057276 11.2877631,19.7786485 10.7539062,19.2421875 C10.2200494,18.7057265 9.79427242,18.0651079 9.4765625,17.3203125 C9.15885258,16.5755171 9,15.7942749 9,14.9765625 C9,14.1588501 9.15885258,13.37891 9.4765625,12.6367188 C9.79427242,11.8945275 10.2200494,11.255211 10.7539062,10.71875 C11.2877631,10.182289 11.9257775,9.75520992 12.6679688,9.4375 C13.41016,9.11979008 14.1874959,8.9609375 15,8.9609375 C15.8125041,8.9609375 16.58984,9.11979008 17.3320312,9.4375 C18.0742225,9.75520992 18.7122369,10.182289 19.2460938,10.71875 C19.7799506,11.255211 20.2057276,11.8945275 20.5234375,12.6367188 C20.8411474,13.37891 21,14.1588501 21,14.9765625 Z"></path></svg>
diff --git a/app/views/shared/icons/_icon_action_play.svg b/app/views/shared/icons/_icon_action_play.svg
new file mode 100644
index 00000000000..6ac192cd7e9
--- /dev/null
+++ b/app/views/shared/icons/_icon_action_play.svg
@@ -0,0 +1 @@
+<svg width="30px" height="30px" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><path d="M21.5401786,15.2320328 L11.90625,20.5858274 C11.7950143,20.6486998 11.6994982,20.6559541 11.6196987,20.6075908 C11.5398992,20.5592275 11.5,20.4721748 11.5,20.3464301 L11.5,9.66785867 C11.5,9.54211399 11.5398992,9.45506129 11.6196987,9.40669795 C11.6994982,9.35833462 11.7950143,9.36558901 11.90625,9.42846135 L21.5401786,14.782256 C21.6514142,14.8451283 21.7070312,14.9200904 21.7070312,15.0071444 C21.7070312,15.0941984 21.6514142,15.1691604 21.5401786,15.2320328 Z"></path></svg>
diff --git a/app/views/shared/icons/_icon_action_retry.svg b/app/views/shared/icons/_icon_action_retry.svg
new file mode 100644
index 00000000000..0fa0243f3c0
--- /dev/null
+++ b/app/views/shared/icons/_icon_action_retry.svg
@@ -0,0 +1 @@
+<svg width="30px" height="30px" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><path d="M20.6114971,16.0821413 C20.6114971,16.106323 20.6090789,16.1232499 20.6042426,16.1329226 C20.2947172,17.42906 19.6466582,18.4797378 18.6600462,19.2849873 C17.6734341,20.0902369 16.5175677,20.4928556 15.1924122,20.4928556 C14.4863075,20.4928556 13.8031856,20.3598584 13.1430261,20.0938601 C12.4828665,19.8278617 11.8940517,19.4482152 11.376564,18.9549092 L10.4407381,19.8907351 C10.3488478,19.9826254 10.2400319,20.0285699 10.1142872,20.0285699 C9.98854256,20.0285699 9.87972669,19.9826254 9.78783635,19.8907351 C9.69594601,19.7988447 9.65000153,19.6900289 9.65000153,19.5642842 L9.65000153,16.3142842 C9.65000153,16.1885395 9.69594601,16.0797236 9.78783635,15.9878333 C9.87972669,15.895943 9.98854256,15.8499985 10.1142872,15.8499985 L13.3642872,15.8499985 C13.4900319,15.8499985 13.5988478,15.895943 13.6907381,15.9878333 C13.7826285,16.0797236 13.828573,16.1885395 13.828573,16.3142842 C13.828573,16.4400289 13.7826285,16.5488447 13.6907381,16.6407351 L12.6968765,17.6345967 C13.0402562,17.9537947 13.4295752,18.200444 13.8648453,18.374552 C14.3001153,18.5486601 14.7523057,18.6357128 15.2214301,18.6357128 C15.8694988,18.6357128 16.4740315,18.4785343 17.0350462,18.1641726 C17.5960609,17.8498109 18.0458332,17.4169655 18.3843765,16.8656235 C18.4375762,16.7834058 18.5657371,16.5004845 18.7688631,16.0168512 C18.8075538,15.9056155 18.8800977,15.8499985 18.9864971,15.8499985 L20.3793542,15.8499985 C20.4422265,15.8499985 20.4966345,15.8729707 20.5425797,15.9189159 C20.5885248,15.9648611 20.6114971,16.019269 20.6114971,16.0821413 Z M20.7928587,10.2785699 L20.7928587,13.5285699 C20.7928587,13.6543146 20.7469142,13.7631305 20.6550238,13.8550208 C20.5631335,13.9469111 20.4543176,13.9928556 20.328573,13.9928556 L17.078573,13.9928556 C16.9528283,13.9928556 16.8440124,13.9469111 16.7521221,13.8550208 C16.6602317,13.7631305 16.6142872,13.6543146 16.6142872,13.5285699 C16.6142872,13.4028252 16.6602317,13.2940094 16.7521221,13.202119 L17.7532381,12.2010029 C17.0374607,11.5384252 16.1935332,11.2071413 15.2214301,11.2071413 C14.5733614,11.2071413 13.9688287,11.3643198 13.407814,11.6786815 C12.8467993,11.9930432 12.397027,12.4258886 12.0584837,12.9772306 C12.005284,13.0594483 11.8771231,13.3423696 11.6739971,13.8260029 C11.6353064,13.9372386 11.5627625,13.9928556 11.4563631,13.9928556 L10.0127247,13.9928556 C9.9498524,13.9928556 9.89544446,13.9698834 9.84949929,13.9239382 C9.80355412,13.877993 9.78058188,13.8235851 9.78058188,13.7607128 L9.78058188,13.7099315 C10.0949436,12.4137941 10.7478388,11.3631163 11.7392872,10.5578668 C12.7307356,9.75261722 13.8914383,9.34999847 15.2214301,9.34999847 C15.9275348,9.34999847 16.6142839,9.48420472 17.281698,9.75262124 C17.949112,10.0210378 18.541554,10.3994752 19.0590417,10.8879449 L20.0021221,9.95211901 C20.0940124,9.86022867 20.2028283,9.81428419 20.328573,9.81428419 C20.4543176,9.81428419 20.5631335,9.86022867 20.6550238,9.95211901 C20.7469142,10.0440094 20.7928587,10.1528252 20.7928587,10.2785699 Z"></path></svg>
diff --git a/app/views/shared/icons/_icon_action_stop.svg b/app/views/shared/icons/_icon_action_stop.svg
new file mode 100644
index 00000000000..1c8e2fe4156
--- /dev/null
+++ b/app/views/shared/icons/_icon_action_stop.svg
@@ -0,0 +1 @@
+<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M20.1357204,10.2985704 L20.1357204,19.7271418 C20.1357204,19.8432138 20.0933101,19.9436592 20.0084882,20.0284811 C19.9236664,20.1133029 19.823221,20.1557132 19.707149,20.1557132 L10.2785775,20.1557132 C10.1625055,20.1557132 10.0620601,20.1133029 9.97723825,20.0284811 C9.89241639,19.9436592 9.8500061,19.8432138 9.8500061,19.7271418 L9.8500061,10.2985704 C9.8500061,10.1824984 9.89241639,10.0820529 9.97723825,9.99723107 C10.0620601,9.91240922 10.1625055,9.86999893 10.2785775,9.86999893 L19.707149,9.86999893 C19.823221,9.86999893 19.9236664,9.91240922 20.0084882,9.99723107 C20.0933101,10.0820529 20.1357204,10.1824984 20.1357204,10.2985704 Z"></path></svg>
diff --git a/app/views/shared/icons/_icon_customization.svg b/app/views/shared/icons/_icon_customization.svg
new file mode 100644
index 00000000000..eb1f8ba129b
--- /dev/null
+++ b/app/views/shared/icons/_icon_customization.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 112 90" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill="none" fill-rule="evenodd"><rect width="112" height="90" fill="#fff" rx="6"/><path fill="#eee" fill-rule="nonzero" d="m4 6.01v77.98c0 1.11.899 2.01 2 2.01h100c1.105 0 2-.898 2-2.01v-77.98c0-1.11-.899-2.01-2-2.01h-100c-1.105 0-2 .898-2 2.01m-4 0c0-3.319 2.686-6.01 6-6.01h100c3.315 0 6 2.694 6 6.01v77.98c0 3.319-2.686 6.01-6 6.01h-100c-3.315 0-6-2.694-6-6.01v-77.98"/><g transform="translate(26 35)"><rect width="4" height="39" x="5" fill="#eee" rx="2" id="0"/><rect width="4" height="21" x="5" y="18" fill="#fef0ea" rx="2"/><circle cx="7" cy="13" r="5" fill="#fff"/><path fill="#fb722e" fill-rule="nonzero" d="m7 20c-3.866 0-7-3.134-7-7 0-3.866 3.134-7 7-7 3.866 0 7 3.134 7 7 0 3.866-3.134 7-7 7m0-4c1.657 0 3-1.343 3-3 0-1.657-1.343-3-3-3-1.657 0-3 1.343-3 3 0 1.657 1.343 3 3 3"/></g><g transform="translate(49 35)"><use xlink:href="#0"/><rect width="4" height="21" x="5" y="18" fill="#b5a7dd" rx="2"/><circle cx="7" cy="25" r="5" fill="#fff"/><path fill="#6b4fbb" fill-rule="nonzero" d="m7 32c-3.866 0-7-3.134-7-7 0-3.866 3.134-7 7-7 3.866 0 7 3.134 7 7 0 3.866-3.134 7-7 7m0-4c1.657 0 3-1.343 3-3 0-1.657-1.343-3-3-3-1.657 0-3 1.343-3 3 0 1.657 1.343 3 3 3"/></g><g transform="translate(72 33)"><rect width="4" height="39" x="5" y="2" fill="#eee" rx="2"/><rect width="4" height="34" x="5" y="7" fill="#fef0ea" rx="2"/><circle cx="7" cy="7" r="5" fill="#fff"/><path fill="#fb722e" fill-rule="nonzero" d="m7 14c-3.866 0-7-3.134-7-7 0-3.866 3.134-7 7-7 3.866 0 7 3.134 7 7 0 3.866-3.134 7-7 7m0-4c1.657 0 3-1.343 3-3 0-1.657-1.343-3-3-3-1.657 0-3 1.343-3 3 0 1.657 1.343 3 3 3"/></g><g fill="#6b4fbb"><circle cx="13.5" cy="11.5" r="2.5"/><circle cx="23.5" cy="11.5" r="2.5" opacity=".5"/><circle cx="33.5" cy="11.5" r="2.5" opacity=".5"/></g><path fill="#eee" d="m0 19h111v4h-111z"/></g></svg>
diff --git a/app/views/shared/icons/_icon_cycle_analytics_overview.svg b/app/views/shared/icons/_icon_cycle_analytics_overview.svg
new file mode 100644
index 00000000000..eea9c975c35
--- /dev/null
+++ b/app/views/shared/icons/_icon_cycle_analytics_overview.svg
@@ -0,0 +1,81 @@
+<svg width="366px" height="229px" viewBox="784 258 366 229" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch -->
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect id="path-1" x="35" y="39" width="24" height="21" rx="10"></rect>
+        <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="24" height="21" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <rect id="path-3" x="64.8662386" y="58.3882666" width="10" height="71" rx="5"></rect>
+        <mask id="mask-4" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="10" height="71" fill="white">
+            <use xlink:href="#path-3"></use>
+        </mask>
+        <rect id="path-5" x="18.1550472" y="58.3882666" width="10" height="71" rx="5"></rect>
+        <mask id="mask-6" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="10" height="71" fill="white">
+            <use xlink:href="#path-5"></use>
+        </mask>
+        <rect id="path-7" x="24" y="56" width="46" height="10" rx="5"></rect>
+        <mask id="mask-8" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="46" height="10" fill="white">
+            <use xlink:href="#path-7"></use>
+        </mask>
+        <rect id="path-9" x="42" y="60" width="10" height="68" rx="5"></rect>
+        <mask id="mask-10" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="10" height="68" fill="white">
+            <use xlink:href="#path-9"></use>
+        </mask>
+        <rect id="path-11" x="69" y="12" width="12" height="12" rx="3"></rect>
+        <mask id="mask-12" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="12" height="12" fill="white">
+            <use xlink:href="#path-11"></use>
+        </mask>
+        <rect id="path-13" x="40" y="18" width="14" height="22" rx="6"></rect>
+        <mask id="mask-14" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="14" height="22" fill="white">
+            <use xlink:href="#path-13"></use>
+        </mask>
+        <rect id="path-15" x="41" y="8" width="34" height="20" rx="3"></rect>
+        <mask id="mask-16" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="34" height="20" fill="white">
+            <use xlink:href="#path-15"></use>
+        </mask>
+        <path d="M8,8.00793008 C8,6.34669617 9.34984627,5.0321392 11.0036812,5.07151622 L46.9963188,5.92848378 C48.6552061,5.9679811 50,7.34177063 50,8.99109042 L50,27.0089096 C50,28.6608432 48.6501537,30.0321392 46.9963188,30.0715162 L11.0036812,30.9284838 C9.34479389,30.9679811 8,29.6568766 8,27.9920699 L8,8.00793008 Z" id="path-17"></path>
+        <mask id="mask-18" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="42" height="25.858699" fill="white">
+            <use xlink:href="#path-17"></use>
+        </mask>
+        <rect id="path-19" x="-7.10542736e-15" y="1.77635684e-14" width="16" height="36" rx="3"></rect>
+        <mask id="mask-20" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="16" height="36" fill="white">
+            <use xlink:href="#path-19"></use>
+        </mask>
+    </defs>
+    <g id="Group-7" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(786.000000, 259.000000)">
+        <g id="Group-5" transform="translate(132.727922, 71.000000)">
+            <use id="Rectangle-21" stroke="#EEEEEE" mask="url(#mask-2)" stroke-width="8" fill="#FFFFFF" xlink:href="#path-1"></use>
+            <use id="Rectangle-16-Copy" stroke="#EEEEEE" mask="url(#mask-4)" stroke-width="8" fill="#FFFFFF" transform="translate(69.866239, 93.888267) rotate(-20.000000) translate(-69.866239, -93.888267) " xlink:href="#path-3"></use>
+            <use id="Rectangle-16-Copy-2" stroke="#EEEEEE" mask="url(#mask-6)" stroke-width="8" fill="#FFFFFF" transform="translate(23.155047, 93.888267) scale(-1, 1) rotate(-20.000000) translate(-23.155047, -93.888267) " xlink:href="#path-5"></use>
+            <use id="Rectangle-15" stroke="#EEEEEE" mask="url(#mask-8)" stroke-width="8" fill="#FFFFFF" xlink:href="#path-7"></use>
+            <use id="Rectangle-16" stroke="#EEEEEE" mask="url(#mask-10)" stroke-width="8" fill="#FFFFFF" xlink:href="#path-9"></use>
+            <g id="Group" transform="translate(45.500000, 33.000000) rotate(20.000000) translate(-45.500000, -33.000000) translate(5.000000, 13.000000)">
+                <use id="Rectangle-4" stroke="#EEEEEE" mask="url(#mask-12)" stroke-width="8" fill="#FFFFFF" xlink:href="#path-11"></use>
+                <use id="Rectangle-20" stroke="#EEEEEE" mask="url(#mask-14)" stroke-width="8" fill="#FFFFFF" xlink:href="#path-13"></use>
+                <use id="Rectangle-2" stroke="#EEEEEE" mask="url(#mask-16)" stroke-width="8" fill="#FFFFFF" xlink:href="#path-15"></use>
+                <use id="Rectangle" stroke="#EEEEEE" mask="url(#mask-18)" stroke-width="8" fill="#FFFFFF" xlink:href="#path-17"></use>
+                <rect id="Rectangle-17" fill="#EEEEEE" x="21" y="7" width="3" height="22"></rect>
+                <rect id="Rectangle-17-Copy" fill="#EEEEEE" x="64" y="8" width="3" height="17"></rect>
+                <circle id="Oval-9" fill="#B5A7DD" cx="40" cy="18" r="2"></circle>
+                <circle id="Oval-9-Copy-4" fill="#EEEEEE" cx="47" cy="33" r="2"></circle>
+                <use id="Rectangle-19" stroke="#EEEEEE" mask="url(#mask-20)" stroke-width="8" fill="#FFFFFF" xlink:href="#path-19"></use>
+            </g>
+        </g>
+        <path d="M265.128496,225.286991 C247.289192,194.617726 214.068171,174 176.031622,174 C137.847583,174 104.51649,194.77793 86.7279221,225.644211" id="Oval-10" stroke="#EEEEEE" stroke-width="4" stroke-linecap="round" fill="#FFFFFF"></path>
+        <circle id="Oval-11" stroke="#FDE5D8" stroke-width="4" fill="#FFFFFF" cx="24.5" cy="25.5" r="24.5"></circle>
+        <path d="M24,1.00292933 C24,0.449026756 24.4438648,0 25,0 C25.5522847,0 26,0.437881351 26,1.00292933 L26,5.99707067 C26,6.55097324 25.5561352,7 25,7 C24.4477153,7 24,6.56211865 24,5.99707067 L24,1.00292933 Z M48.46461,17.3244238 C48.9914026,17.1532585 49.5556142,17.4366422 49.7274694,17.9655581 C49.8981348,18.4908122 49.6200365,19.0519274 49.0826439,19.2265369 L44.3329333,20.7698114 C43.8061406,20.9409767 43.241929,20.6575931 43.0700738,20.1286771 C42.8994084,19.6034231 43.1775067,19.0423078 43.7148993,18.8676984 L48.46461,17.3244238 Z M40.5019265,45.6352697 C40.8275022,46.0833863 40.7323394,46.7075538 40.2824166,47.0344419 C39.8356088,47.3590667 39.2160194,47.2679737 38.8838925,46.8108402 L35.9484099,42.770495 C35.6228341,42.3223784 35.717997,41.6982109 36.1679198,41.3713229 C36.6147275,41.0466981 37.234317,41.1377911 37.5664439,41.5949245 L40.5019265,45.6352697 Z M11.1161075,46.8108402 C10.7905317,47.2589568 10.1675063,47.3613299 9.71758344,47.0344419 C9.27077569,46.709817 9.16594665,46.0924031 9.49807352,45.6352697 L12.4335561,41.5949245 C12.7591319,41.1468079 13.3821574,41.0444348 13.8320802,41.3713229 C14.278888,41.6959477 14.383717,42.3133616 14.0515901,42.770495 L11.1161075,46.8108402 Z M0.917356057,19.2265369 C0.390563404,19.0553716 0.100675355,18.4944741 0.272530576,17.9655581 C0.44319595,17.4403041 0.997997482,17.1498144 1.53539005,17.3244238 L6.28510071,18.8676984 C6.81189336,19.0388637 7.10178141,19.5997611 6.92992619,20.1286771 C6.75926082,20.6539311 6.20445928,20.9444208 5.66706672,20.7698114 L0.917356057,19.2265369 Z" id="Rectangle-23" fill="#FDE5D8"></path>
+        <rect id="Rectangle-18" fill="#FC6D26" x="24" y="14" width="3" height="12" rx="1.5"></rect>
+        <rect id="Rectangle-22" fill="#FC6D26" x="24" y="24" width="12" height="3" rx="1.5"></rect>
+        <circle id="Oval-11" fill="#6B4FBB" cx="25.5" cy="25.5" r="2.5"></circle>
+        <path d="M358.949747,6.87474747 L357.453009,7.20729654 C356.9128,7.32732164 356.570654,6.9935311 356.692198,6.44648557 L357.024747,4.94974747 L356.692198,3.45300937 C356.572173,2.91279997 356.905964,2.57065443 357.453009,2.69219839 L358.949747,3.02474747 L360.446486,2.69219839 C360.986695,2.5721733 361.328841,2.90596384 361.207297,3.45300937 L360.874747,4.94974747 L361.207297,6.44648557 C361.327322,6.98669496 360.993531,7.32884051 360.446486,7.20729654 L358.949747,6.87474747 Z" id="Star-Copy-5" fill="#6B4FBB" transform="translate(358.949747, 4.949747) rotate(-315.000000) translate(-358.949747, -4.949747) "></path>
+        <path d="M113.949747,32.8747475 L112.453009,33.2072965 C111.9128,33.3273216 111.570654,32.9935311 111.692198,32.4464856 L112.024747,30.9497475 L111.692198,29.4530094 C111.572173,28.9128 111.905964,28.5706544 112.453009,28.6921984 L113.949747,29.0247475 L115.446486,28.6921984 C115.986695,28.5721733 116.328841,28.9059638 116.207297,29.4530094 L115.874747,30.9497475 L116.207297,32.4464856 C116.327322,32.986695 115.993531,33.3288405 115.446486,33.2072965 L113.949747,32.8747475 Z" id="Star-Copy-7" fill="#B5A7DD" transform="translate(113.949747, 30.949747) rotate(-315.000000) translate(-113.949747, -30.949747) "></path>
+        <path d="M329.949747,211.874747 L328.453009,212.207297 C327.9128,212.327322 327.570654,211.993531 327.692198,211.446486 L328.024747,209.949747 L327.692198,208.453009 C327.572173,207.9128 327.905964,207.570654 328.453009,207.692198 L329.949747,208.024747 L331.446486,207.692198 C331.986695,207.572173 332.328841,207.905964 332.207297,208.453009 L331.874747,209.949747 L332.207297,211.446486 C332.327322,211.986695 331.993531,212.328841 331.446486,212.207297 L329.949747,211.874747 Z" id="Star-Copy-6" fill="#B5A7DD" opacity="0.5" transform="translate(329.949747, 209.949747) rotate(-315.000000) translate(-329.949747, -209.949747) "></path>
+        <path d="M265.363961,54.838961 L263.153969,55.3299826 C262.617155,55.4492534 262.280283,55.1035008 262.397939,54.5739526 L262.888961,52.363961 L262.397939,50.1539694 C262.278669,49.6171548 262.624421,49.2802831 263.153969,49.3979395 L265.363961,49.888961 L267.573953,49.3979395 C268.110767,49.2786686 268.447639,49.6244213 268.329983,50.1539694 L267.838961,52.363961 L268.329983,54.5739526 C268.449253,55.1107673 268.103501,55.4476389 267.573953,55.3299826 L265.363961,54.838961 Z" id="Star-Copy-9" fill="#FC6D26" transform="translate(265.363961, 52.363961) rotate(-315.000000) translate(-265.363961, -52.363961) "></path>
+        <path d="M56.363961,142.838961 L54.1539694,143.329983 C53.6171548,143.449253 53.2802831,143.103501 53.3979395,142.573953 L53.888961,140.363961 L53.3979395,138.153969 C53.2786686,137.617155 53.6244213,137.280283 54.1539694,137.397939 L56.363961,137.888961 L58.5739526,137.397939 C59.1107673,137.278669 59.4476389,137.624421 59.3299826,138.153969 L58.838961,140.363961 L59.3299826,142.573953 C59.4492534,143.110767 59.1035008,143.447639 58.5739526,143.329983 L56.363961,142.838961 Z" id="Star-Copy-8" fill="#6B4FBB" transform="translate(56.363961, 140.363961) rotate(-315.000000) translate(-56.363961, -140.363961) "></path>
+        <g id="Group-6" transform="translate(311.872633, 125.094458) rotate(-345.000000) translate(-311.872633, -125.094458) translate(290.872633, 115.094458)">
+            <circle id="Oval-12" stroke="#FDE5D8" stroke-width="4" fill="#FFFFFF" cx="21" cy="10" r="10"></circle>
+            <ellipse id="Oval-13" fill="#FDE5D8" cx="21" cy="10" rx="21" ry="2"></ellipse>
+        </g>
+    </g>
+</svg>
diff --git a/app/views/shared/icons/_icon_lock.svg b/app/views/shared/icons/_icon_lock.svg
new file mode 100644
index 00000000000..6ec671a76ed
--- /dev/null
+++ b/app/views/shared/icons/_icon_lock.svg
@@ -0,0 +1,25 @@
+<svg width="46px" height="54px" viewBox="227 0 46 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 41 (35326) - http://www.bohemiancoding.com/sketch -->
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect id="path-1" x="0" y="20" width="46" height="34" rx="8"></rect>
+        <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="46" height="34" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <path d="M29,16 C29,8.2680135 22.7319865,2 15,2 C7.2680135,2 1,8.2680135 1,16" id="path-3"></path>
+        <mask id="mask-4" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="28" height="14" fill="white">
+            <use xlink:href="#path-3"></use>
+        </mask>
+    </defs>
+    <g id="locker" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(227.000000, 0.000000)">
+        <g id="Group-8">
+            <use id="Rectangle-14" stroke="#B5A7DD" mask="url(#mask-2)" stroke-width="6" xlink:href="#path-1"></use>
+            <g id="Group-7" transform="translate(8.000000, 0.000000)">
+                <use id="Oval-3" stroke="#B5A7DD" mask="url(#mask-4)" stroke-width="6" xlink:href="#path-3"></use>
+                <rect id="Rectangle-13" fill="#B5A7DD" x="1" y="16" width="3" height="6"></rect>
+                <rect id="Rectangle-13-Copy" fill="#B5A7DD" x="26" y="16" width="3" height="6"></rect>
+            </g>
+            <path d="M25,37.4648712 C26.1956027,36.7732524 27,35.4805647 27,34 C27,31.790861 25.209139,30 23,30 C20.790861,30 19,31.790861 19,34 C19,35.4805647 19.8043973,36.7732524 21,37.4648712 L21,41.0026083 C21,42.1041422 21.8954305,43 23,43 C24.1122704,43 25,42.1057373 25,41.0026083 L25,37.4648712 Z" id="Combined-Shape" fill="#6B4FBB"></path>
+        </g>
+    </g>
+</svg>
diff --git a/app/views/shared/icons/_icon_mattermost.svg b/app/views/shared/icons/_icon_mattermost.svg
new file mode 100644
index 00000000000..d1c541523ab
--- /dev/null
+++ b/app/views/shared/icons/_icon_mattermost.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><path d="M250.05 34c1.9.04 3.8.11 5.6.2l-29.79 35.51c-.07.01-.15.03-.23.04C149.26 84.1 98.22 146.5 98.22 222.97c0 41.56 23.07 90.5 59.75 119.1 28.61 22.32 64.29 36.9 101.21 36.9 93.4 0 160.15-68.61 160.15-156 0-34.91-15.99-72.77-41.76-100.76l-1.63-47.39c54.45 39.15 89.95 103.02 90.06 175.17v.01c0 119.29-96.7 216-216 216-119.29 0-216-96.71-216-216S130.71 34 250 34h.05zm64.1 20.29c.66-.04 1.32.03 1.96.25 3.01 1 3.85 3.57 3.93 6.45l3.84 146.88c.76 28.66-17.16 68.44-60.39 68.56-30.97.08-63.68-20.83-63.68-60.13.01-14.73 5.61-31.26 19.25-48.11l90.03-111.18c1.15-1.42 3.08-2.58 5.06-2.72z"/></svg>
diff --git a/app/views/shared/icons/_icon_mr_issue.svg b/app/views/shared/icons/_icon_mr_issue.svg
new file mode 100644
index 00000000000..ae219a3ded2
--- /dev/null
+++ b/app/views/shared/icons/_icon_mr_issue.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill-rule="evenodd"><path d="m8.411 1.012c-.136-.008-.273-.012-.411-.012-3.866 0-7 3.134-7 7 0 3.866 3.134 7 7 7 3.866 0 7-3.134 7-7 0-.138-.004-.275-.012-.411-.464.201-.964.334-1.488.386 0 .008 0 .016 0 .025 0 3.038-2.462 5.5-5.5 5.5-3.038 0-5.5-2.462-5.5-5.5 0-3.038 2.462-5.5 5.5-5.5.008 0 .016 0 .025 0 .052-.524.185-1.024.386-1.488"/><path d="m12 2h-1.01c-.54 0-.991.448-.991 1 0 .556.444 1 .991 1h1.01v1.01c0 .54.448.991 1 .991.556 0 1-.444 1-.991v-1.01h1.01c.54 0 .991-.448.991-1 0-.556-.444-1-.991-1h-1.01v-1.01c0-.54-.448-.991-1-.991-.556 0-1 .444-1 .991v1.01m-5 4.01c0-.557.444-1.01 1-1.01.552 0 1 .443 1 1.01v1.981c0 .557-.444 1.01-1 1.01-.552 0-1-.443-1-1.01v-1.981m1 5.991c.552 0 1-.448 1-1 0-.552-.448-1-1-1-.552 0-1 .448-1 1 0 .552.448 1 1 1"/></g></svg>
\ No newline at end of file
diff --git a/app/views/shared/icons/_icon_no_data.svg b/app/views/shared/icons/_icon_no_data.svg
new file mode 100644
index 00000000000..ced8653b88c
--- /dev/null
+++ b/app/views/shared/icons/_icon_no_data.svg
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="211 0 78 36" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <circle id="a" cx="5" cy="31" r="5"/>
+    <mask id="e" width="10" height="10" x="0" y="0" fill="#fff">
+      <use xlink:href="#a"/>
+    </mask>
+    <circle id="b" cx="29" cy="14" r="5"/>
+    <mask id="f" width="10" height="10" x="0" y="0" fill="#fff">
+      <use xlink:href="#b"/>
+    </mask>
+    <circle id="c" cx="53" cy="24" r="5"/>
+    <mask id="g" width="10" height="10" x="0" y="0" fill="#fff">
+      <use xlink:href="#c"/>
+    </mask>
+    <circle id="d" cx="73" cy="5" r="5"/>
+    <mask id="h" width="10" height="10" x="0" y="0" fill="#fff">
+      <use xlink:href="#d"/>
+    </mask>
+  </defs>
+  <g fill="none" fill-rule="evenodd" transform="translate(211)">
+    <path stroke="#B5A7DD" stroke-width="2" d="M5 31l24-17 26 10L73 5" stroke-linecap="round" stroke-dasharray="3 6"/>
+    <use fill="#FFF" stroke="#6B4FBB" stroke-width="6" mask="url(#e)" xlink:href="#a"/>
+    <use fill="#FFF" stroke="#6B4FBB" stroke-width="6" mask="url(#f)" xlink:href="#b"/>
+    <use fill="#FFF" stroke="#B5A7DD" stroke-width="6" mask="url(#g)" xlink:href="#c"/>
+    <use fill="#FFF" stroke="#B5A7DD" stroke-width="6" mask="url(#h)" xlink:href="#d"/>
+  </g>
+</svg>
diff --git a/app/views/shared/icons/_icon_status_canceled.svg b/app/views/shared/icons/_icon_status_canceled.svg
index 1b2d0891244..bd5d04e1cd7 100644..100755
--- a/app/views/shared/icons/_icon_status_canceled.svg
+++ b/app/views/shared/icons/_icon_status_canceled.svg
@@ -1,6 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" class="ci-status-icon-canceled" viewBox="0 0 14 14">
-  <g fill="#5C5C5C" fill-rule="evenodd">
-    <path d="M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z"/>
-    <rect width="8" height="2" x="3" y="6" transform="rotate(45 7 7)" rx=".5"/>
-  </g>
-</svg>
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><path d="M5.2 3.8l4.9 4.9c.2.2.2.5 0 .7l-.7.7c-.2.2-.5.2-.7 0L3.8 5.2c-.2-.2-.2-.5 0-.7l.7-.7c.2-.2.5-.2.7 0"/></g></svg>
diff --git a/app/views/shared/icons/_icon_status_canceled_borderless.svg b/app/views/shared/icons/_icon_status_canceled_borderless.svg
new file mode 100644
index 00000000000..bf7fb29185f
--- /dev/null
+++ b/app/views/shared/icons/_icon_status_canceled_borderless.svg
@@ -0,0 +1 @@
+<svg width="22px" height="22px" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"><path d="M8.17142857,5.97142857 L15.8714286,13.6714286 C16.1857143,13.9857143 16.1857143,14.4571429 15.8714286,14.7714286 L14.7714286,15.8714286 C14.4571429,16.1857143 13.9857143,16.1857143 13.6714286,15.8714286 L5.97142857,8.17142857 C5.65714286,7.85714286 5.65714286,7.38571429 5.97142857,7.07142857 L7.07142857,5.97142857 C7.38571429,5.65714286 7.85714286,5.65714286 8.17142857,5.97142857" id="Shape"></path></svg>
diff --git a/app/views/shared/icons/_icon_status_created.svg b/app/views/shared/icons/_icon_status_created.svg
index dca5d289767..326ad04e017 100644..100755
--- a/app/views/shared/icons/_icon_status_created.svg
+++ b/app/views/shared/icons/_icon_status_created.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" class="ci-status-icon-created" viewBox="0 0 14 14" enable-background="new 0 0 14 14"><path d="M12.5,7 C12.5,4 10,1.5 7,1.5 C4,1.5 1.5,4 1.5,7 C1.5,10 4,12.5 7,12.5 C10,12.5 12.5,10 12.5,7 L12.5,7 Z M0,7 C0,3.1 3.1,0 7,0 C10.9,0 14,3.1 14,7 C14,10.9 10.9,14 7,14 C3.1,14 0,10.9 0,7 L0,7 Z" /><circle cx="7" cy="7" r="3.25"/></svg>
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><circle cx="7" cy="7" r="3.25"/></g></svg>
diff --git a/app/views/shared/icons/_icon_status_created_borderless.svg b/app/views/shared/icons/_icon_status_created_borderless.svg
new file mode 100644
index 00000000000..1810d023be8
--- /dev/null
+++ b/app/views/shared/icons/_icon_status_created_borderless.svg
@@ -0,0 +1 @@
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle id="Oval" cx="11" cy="11" r="5.10714286"></circle></svg>
diff --git a/app/views/shared/icons/_icon_status_failed.svg b/app/views/shared/icons/_icon_status_failed.svg
index e56e0887416..64da5aa31fc 100644..100755
--- a/app/views/shared/icons/_icon_status_failed.svg
+++ b/app/views/shared/icons/_icon_status_failed.svg
@@ -1,6 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
-  <g fill="#D22852" fill-rule="evenodd">
-    <path d="M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z"/>
-    <path d="M7.72916667,6.27083333 L7.72916667,4.28939247 C7.72916667,4.12531853 7.59703895,4 7.43405116,4 L6.56594884,4 C6.40541585,4 6.27083333,4.12956542 6.27083333,4.28939247 L6.27083333,6.27083333 L4.28939247,6.27083333 C4.12531853,6.27083333 4,6.40296105 4,6.56594884 L4,7.43405116 C4,7.59458415 4.12956542,7.72916667 4.28939247,7.72916667 L6.27083333,7.72916667 L6.27083333,9.71060753 C6.27083333,9.87468147 6.40296105,10 6.56594884,10 L7.43405116,10 C7.59458415,10 7.72916667,9.87043458 7.72916667,9.71060753 L7.72916667,7.72916667 L9.71060753,7.72916667 C9.87468147,7.72916667 10,7.59703895 10,7.43405116 L10,6.56594884 C10,6.40541585 9.87043458,6.27083333 9.71060753,6.27083333 L7.72916667,6.27083333 Z" transform="rotate(-45 7 7)"/>
-  </g>
-</svg>
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><path d="M7 5.969L5.599 4.568a.29.29 0 0 0-.413.004l-.614.614a.294.294 0 0 0-.004.413L5.968 7l-1.4 1.401a.29.29 0 0 0 .004.413l.614.614c.113.114.3.117.413.004L7 8.032l1.401 1.4a.29.29 0 0 0 .413-.004l.614-.614a.294.294 0 0 0 .004-.413L8.032 7l1.4-1.401a.29.29 0 0 0-.004-.413l-.614-.614a.294.294 0 0 0-.413-.004L7 5.968z"/></g></svg>
diff --git a/app/views/shared/icons/_icon_status_failed_borderless.svg b/app/views/shared/icons/_icon_status_failed_borderless.svg
new file mode 100644
index 00000000000..b7022350c74
--- /dev/null
+++ b/app/views/shared/icons/_icon_status_failed_borderless.svg
@@ -0,0 +1 @@
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M12.1458333,9.85416667 L12.1458333,6.74047388 C12.1458333,6.4826434 11.9382041,6.28571429 11.6820804,6.28571429 L10.3179196,6.28571429 C10.0656535,6.28571429 9.85416667,6.48931709 9.85416667,6.74047388 L9.85416667,9.85416667 L6.74047388,9.85416667 C6.4826434,9.85416667 6.28571429,10.0617959 6.28571429,10.3179196 L6.28571429,11.6820804 C6.28571429,11.9343465 6.48931709,12.1458333 6.74047388,12.1458333 L9.85416667,12.1458333 L9.85416667,15.2595261 C9.85416667,15.5173566 10.0617959,15.7142857 10.3179196,15.7142857 L11.6820804,15.7142857 C11.9343465,15.7142857 12.1458333,15.5106829 12.1458333,15.2595261 L12.1458333,12.1458333 L15.2595261,12.1458333 C15.5173566,12.1458333 15.7142857,11.9382041 15.7142857,11.6820804 L15.7142857,10.3179196 C15.7142857,10.0656535 15.5106829,9.85416667 15.2595261,9.85416667 L12.1458333,9.85416667 Z" id="Combined-Shape" transform="translate(11.000000, 11.000000) rotate(-45.000000) translate(-11.000000, -11.000000) "></path></svg>
diff --git a/app/views/shared/icons/_icon_status_manual.svg b/app/views/shared/icons/_icon_status_manual.svg
new file mode 100755
index 00000000000..c98839f51a9
--- /dev/null
+++ b/app/views/shared/icons/_icon_status_manual.svg
@@ -0,0 +1 @@
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><path d="M10.5 7.63V6.37l-.787-.13c-.044-.175-.132-.349-.263-.61l.481-.652-.918-.913-.657.478a2.346 2.346 0 0 0-.612-.26L7.656 3.5H6.388l-.132.783c-.219.043-.394.13-.612.26l-.657-.478-.918.913.437.652c-.131.218-.175.392-.262.61l-.744.086v1.261l.787.13c.044.218.132.392.263.61l-.438.651.92.913.655-.434c.175.086.394.173.613.26l.131.783h1.313l.131-.783c.219-.043.394-.13.613-.26l.656.478.918-.913-.48-.652c.13-.218.218-.435.262-.61l.656-.13zM7 8.283a1.285 1.285 0 0 1-1.313-1.305c0-.739.57-1.304 1.313-1.304.744 0 1.313.565 1.313 1.304 0 .74-.57 1.305-1.313 1.305z"/></g></svg>
diff --git a/app/views/shared/icons/_icon_status_manual_borderless.svg b/app/views/shared/icons/_icon_status_manual_borderless.svg
new file mode 100644
index 00000000000..5eec665688b
--- /dev/null
+++ b/app/views/shared/icons/_icon_status_manual_borderless.svg
@@ -0,0 +1 @@
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M16.5,11.9906832 L16.5,10.0093168 L15.2625,9.80434783 C15.19375,9.5310559 15.05625,9.25776398 14.85,8.84782609 L15.60625,7.82298137 L14.1625,6.38819876 L13.13125,7.13975155 C12.7875,6.93478261 12.44375,6.79813665 12.16875,6.72981366 L12.03125,5.5 L10.0375,5.5 L9.83125,6.72981366 C9.4875,6.79813665 9.2125,6.93478261 8.86875,7.13975155 L7.8375,6.38819876 L6.39375,7.82298137 L7.08125,8.84782609 C6.875,9.18944099 6.80625,9.46273292 6.66875,9.80434783 L5.5,9.94099379 L5.5,11.9223602 L6.7375,12.1273292 C6.80625,12.4689441 6.94375,12.742236 7.15,13.0838509 L6.4625,14.1086957 L7.90625,15.5434783 L8.9375,14.8602484 C9.2125,14.9968944 9.55625,15.1335404 9.9,15.2701863 L10.10625,16.5 L12.16875,16.5 L12.375,15.2701863 C12.71875,15.2018634 12.99375,15.0652174 13.3375,14.8602484 L14.36875,15.6118012 L15.8125,14.1770186 L15.05625,13.1521739 C15.2625,12.810559 15.4,12.4689441 15.46875,12.1956522 L16.5,11.9906832 L16.5,11.9906832 Z M11,13.015528 C9.83125,13.015528 8.9375,12.1273292 8.9375,10.9658385 C8.9375,9.80434783 9.83125,8.91614907 11,8.91614907 C12.16875,8.91614907 13.0625,9.80434783 13.0625,10.9658385 C13.0625,12.1273292 12.16875,13.015528 11,13.015528 L11,13.015528 Z" id="Shape" ></path></svg>
diff --git a/app/views/shared/icons/_icon_status_pending.svg b/app/views/shared/icons/_icon_status_pending.svg
index 117f0367161..02d5da407e3 100644..100755
--- a/app/views/shared/icons/_icon_status_pending.svg
+++ b/app/views/shared/icons/_icon_status_pending.svg
@@ -1,6 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
-  <g fill="#E75E40" fill-rule="evenodd">
-    <path d="M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z"/>
-    <path d="M4.69999981,5.30065012 C4.69999981,5.13460564 4.83842754,5 5.00354719,5 L5.89645243,5 C6.06409702,5 6.19999981,5.13308716 6.19999981,5.30065012 L6.19999981,8.69934988 C6.19999981,8.86539436 6.06157207,9 5.89645243,9 L5.00354719,9 C4.8359026,9 4.69999981,8.86691284 4.69999981,8.69934988 L4.69999981,5.30065012 Z M7.69999981,5.30065012 C7.69999981,5.13460564 7.83842754,5 8.00354719,5 L8.89645243,5 C9.06409702,5 9.19999981,5.13308716 9.19999981,5.30065012 L9.19999981,8.69934988 C9.19999981,8.86539436 9.06157207,9 8.89645243,9 L8.00354719,9 C7.8359026,9 7.69999981,8.86691284 7.69999981,8.69934988 L7.69999981,5.30065012 Z"/>
-  </g>
-</svg>
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><path d="M4.7 5.3c0-.2.1-.3.3-.3h.9c.2 0 .3.1.3.3v3.4c0 .2-.1.3-.3.3H5c-.2 0-.3-.1-.3-.3V5.3m3 0c0-.2.1-.3.3-.3h.9c.2 0 .3.1.3.3v3.4c0 .2-.1.3-.3.3H8c-.2 0-.3-.1-.3-.3V5.3"/></g></svg>
diff --git a/app/views/shared/icons/_icon_status_pending_borderless.svg b/app/views/shared/icons/_icon_status_pending_borderless.svg
new file mode 100644
index 00000000000..8d66e9e6c9c
--- /dev/null
+++ b/app/views/shared/icons/_icon_status_pending_borderless.svg
@@ -0,0 +1 @@
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M7.38571429,8.32857143 C7.38571429,8.01428571 7.54285714,7.85714286 7.85714286,7.85714286 L9.27142857,7.85714286 C9.58571429,7.85714286 9.74285714,8.01428571 9.74285714,8.32857143 L9.74285714,13.6714286 C9.74285714,13.9857143 9.58571429,14.1428571 9.27142857,14.1428571 L7.85714286,14.1428571 C7.54285714,14.1428571 7.38571429,13.9857143 7.38571429,13.6714286 L7.38571429,8.32857143 M12.1,8.32857143 C12.1,8.01428571 12.2571429,7.85714286 12.5714286,7.85714286 L13.9857143,7.85714286 C14.3,7.85714286 14.4571429,8.01428571 14.4571429,8.32857143 L14.4571429,13.6714286 C14.4571429,13.9857143 14.3,14.1428571 13.9857143,14.1428571 L12.5714286,14.1428571 C12.2571429,14.1428571 12.1,13.9857143 12.1,13.6714286 L12.1,8.32857143" id="Shape"></path></svg>
diff --git a/app/views/shared/icons/_icon_status_running.svg b/app/views/shared/icons/_icon_status_running.svg
index 920d7952eb5..532f4fee33c 100644..100755
--- a/app/views/shared/icons/_icon_status_running.svg
+++ b/app/views/shared/icons/_icon_status_running.svg
@@ -1,6 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
-  <g fill="#2D9FD8" fill-rule="evenodd">
-    <path d="M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z"/>
-    <path d="M7,3 C9.209139,3 11,4.790861 11,7 C11,9.209139 9.209139,11 7,11 C5.65802855,11 4.47040669,10.3391508 3.74481446,9.32513253 L7,7 L7,3 L7,3 Z"/>
-  </g>
-</svg>
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><path d="M7 3c2.2 0 4 1.8 4 4s-1.8 4-4 4c-1.3 0-2.5-.7-3.3-1.7L7 7V3"/></g></svg>
diff --git a/app/views/shared/icons/_icon_status_running_borderless.svg b/app/views/shared/icons/_icon_status_running_borderless.svg
new file mode 100644
index 00000000000..2757a168ed5
--- /dev/null
+++ b/app/views/shared/icons/_icon_status_running_borderless.svg
@@ -0,0 +1 @@
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M11,4.71428571 C14.4571429,4.71428571 17.2857143,7.54285714 17.2857143,11 C17.2857143,14.4571429 14.4571429,17.2857143 11,17.2857143 C8.95714286,17.2857143 7.07142857,16.1857143 5.81428571,14.6142857 L11,11 L11,4.71428571" id="Shape"></path></svg>
diff --git a/app/views/shared/icons/_icon_status_skipped.svg b/app/views/shared/icons/_icon_status_skipped.svg
index 014ca86b61b..1998dfef9ea 100644..100755
--- a/app/views/shared/icons/_icon_status_skipped.svg
+++ b/app/views/shared/icons/_icon_status_skipped.svg
@@ -1 +1 @@
-<svg width="20" height="20" class="ci-status-icon-skipped" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Group Copy 31</title><g fill="#5C5C5C" fill-rule="evenodd"><path d="M10 17.857c4.286 0 7.857-3.571 7.857-7.857S14.286 2.143 10 2.143 2.143 5.714 2.143 10 5.714 17.857 10 17.857M10 0c5.571 0 10 4.429 10 10s-4.429 10-10 10S0 15.571 0 10 4.429 0 10 0"/><path d="M10.986 11l-1.293 1.293a1 1 0 0 0 1.414 1.414l2.644-2.644a1.505 1.505 0 0 0 0-2.126l-2.644-2.644a1 1 0 0 0-1.414 1.414L10.986 9H6.4a1 1 0 0 0 0 2h4.586z"/></g></svg>
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><path d="M7.69 7.7l-.905.905a.7.7 0 0 0 .99.99l1.85-1.85c.411-.412.411-1.078 0-1.49l-1.85-1.85a.7.7 0 0 0-.99.99l.905.905H4.48a.7.7 0 0 0 0 1.4h3.21z"/></g></svg>
diff --git a/app/views/shared/icons/_icon_status_skipped_borderless.svg b/app/views/shared/icons/_icon_status_skipped_borderless.svg
new file mode 100644
index 00000000000..fb3e930b3cb
--- /dev/null
+++ b/app/views/shared/icons/_icon_status_skipped_borderless.svg
@@ -0,0 +1 @@
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M12.0846,12.1 L10.6623,13.5223 C10.2454306,13.9539168 10.2513924,14.6399933 10.6756996,15.0643004 C11.1000067,15.4886076 11.7860832,15.4945694 12.2177,15.0777 L15.1261,12.1693 C15.7708612,11.5230891 15.7708612,10.4769109 15.1261,9.8307 L12.2177,6.9223 C11.7860832,6.50543057 11.1000067,6.51139239 10.6756996,6.93569957 C10.2513924,7.36000675 10.2454306,8.04608322 10.6623,8.4777 L12.0846,9.9 L7.04,9.9 C6.43248678,9.9 5.94,10.3924868 5.94,11 C5.94,11.6075132 6.43248678,12.1 7.04,12.1 L12.0846,12.1 L12.0846,12.1 Z" id="Shape"></path></svg>
diff --git a/app/views/shared/icons/_icon_status_success.svg b/app/views/shared/icons/_icon_status_success.svg
index 67b378b3571..eed5006bebe 100644..100755
--- a/app/views/shared/icons/_icon_status_success.svg
+++ b/app/views/shared/icons/_icon_status_success.svg
@@ -1,6 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
-  <g fill="#31AF64" fill-rule="evenodd">
-    <path d="M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z"/>
-    <path d="M7.29166667,7.875 L5.54840803,7.875 C5.38293028,7.875 5.25,8.00712771 5.25,8.17011551 L5.25,9.03821782 C5.25,9.19875081 5.38360183,9.33333333 5.54840803,9.33333333 L8.24853534,9.33333333 C8.52035522,9.33333333 8.75,9.11228506 8.75,8.83960819 L8.75,8.46475969 L8.75,4.07392947 C8.75,3.92144267 8.61787229,3.79166667 8.45488449,3.79166667 L7.58678218,3.79166667 C7.42624919,3.79166667 7.29166667,3.91804003 7.29166667,4.07392947 L7.29166667,7.875 Z" transform="rotate(45 7 6.563)"/>
-  </g>
-</svg>
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><path d="M6.278 7.697L5.045 6.464a.296.296 0 0 0-.42-.002l-.613.614a.298.298 0 0 0 .002.42l1.91 1.909a.5.5 0 0 0 .703.005l.265-.265L9.997 6.04a.291.291 0 0 0-.009-.408l-.614-.614a.29.29 0 0 0-.408-.009L6.278 7.697z"/></g></svg>
diff --git a/app/views/shared/icons/_icon_status_success_borderless.svg b/app/views/shared/icons/_icon_status_success_borderless.svg
new file mode 100644
index 00000000000..8ee5be7ab78
--- /dev/null
+++ b/app/views/shared/icons/_icon_status_success_borderless.svg
@@ -0,0 +1 @@
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M11.4583333,12.375 L8.70008808,12.375 C8.45889044,12.375 8.25,12.5826293 8.25,12.8387529 L8.25,14.2029137 C8.25,14.4551799 8.4515113,14.6666667 8.70008808,14.6666667 L12.9619841,14.6666667 C13.3891296,14.6666667 13.75,14.3193051 13.75,13.8908129 L13.75,13.2899463 L13.75,6.42552703 C13.75,6.16226705 13.5423707,5.95833333 13.2862471,5.95833333 L11.9220863,5.95833333 C11.6698201,5.95833333 11.4583333,6.16750307 11.4583333,6.42552703 L11.4583333,12.375 Z" id="Combined-Shape" transform="translate(11.000000, 10.312500) rotate(-315.000000) translate(-11.000000, -10.312500) "></path></svg>
diff --git a/app/views/shared/icons/_icon_status_warning.svg b/app/views/shared/icons/_icon_status_warning.svg
index d0ad4bd65b1..cb785635b7e 100644..100755
--- a/app/views/shared/icons/_icon_status_warning.svg
+++ b/app/views/shared/icons/_icon_status_warning.svg
@@ -1,6 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
-  <g fill="#FF8A24" fill-rule="evenodd">
-    <path d="M12.5,7 C12.5,3.96243388 10.0375661,1.5 7,1.5 C3.96243388,1.5 1.5,3.96243388 1.5,7 C1.5,10.0375661 3.96243388,12.5 7,12.5 C10.0375661,12.5 12.5,10.0375661 12.5,7 Z M0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 Z"/>
-    <path d="M6,3.49769878 C6,3.22282734 6.21403503,3 6.50468445,3 L7.49531555,3 C7.77404508,3 8,3.21484375 8,3.49769878 L8,7.50230122 C8,7.77717266 7.78596497,8 7.49531555,8 L6.50468445,8 C6.22595492,8 6,7.78515625 6,7.50230122 L6,3.49769878 Z M6,9.50468445 C6,9.22595492 6.21403503,9 6.50468445,9 L7.49531555,9 C7.77404508,9 8,9.21403503 8,9.50468445 L8,10.4953156 C8,10.7740451 7.78596497,11 7.49531555,11 L6.50468445,11 C6.22595492,11 6,10.785965 6,10.4953156 L6,9.50468445 Z"/>
-  </g>
-</svg>
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g fill-rule="evenodd"><path d="M0 7a7 7 0 1 1 14 0A7 7 0 0 1 0 7z"/><path d="M13 7A6 6 0 1 0 1 7a6 6 0 0 0 12 0z" fill="#FFF"/><path d="M6 3.5c0-.3.2-.5.5-.5h1c.3 0 .5.2.5.5v4c0 .3-.2.5-.5.5h-1c-.3 0-.5-.2-.5-.5v-4m0 6c0-.3.2-.5.5-.5h1c.3 0 .5.2.5.5v1c0 .3-.2.5-.5.5h-1c-.3 0-.5-.2-.5-.5v-1"/></g></svg>
diff --git a/app/views/shared/icons/_icon_status_warning_borderless.svg b/app/views/shared/icons/_icon_status_warning_borderless.svg
new file mode 100644
index 00000000000..7b061624521
--- /dev/null
+++ b/app/views/shared/icons/_icon_status_warning_borderless.svg
@@ -0,0 +1 @@
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M9.42857143,5.5 C9.42857143,5.02857143 9.74285714,4.71428571 10.2142857,4.71428571 L11.7857143,4.71428571 C12.2571429,4.71428571 12.5714286,5.02857143 12.5714286,5.5 L12.5714286,11.7857143 C12.5714286,12.2571429 12.2571429,12.5714286 11.7857143,12.5714286 L10.2142857,12.5714286 C9.74285714,12.5714286 9.42857143,12.2571429 9.42857143,11.7857143 L9.42857143,5.5 M9.42857143,14.9285714 C9.42857143,14.4571429 9.74285714,14.1428571 10.2142857,14.1428571 L11.7857143,14.1428571 C12.2571429,14.1428571 12.5714286,14.4571429 12.5714286,14.9285714 L12.5714286,16.5 C12.5714286,16.9714286 12.2571429,17.2857143 11.7857143,17.2857143 L10.2142857,17.2857143 C9.74285714,17.2857143 9.42857143,16.9714286 9.42857143,16.5 L9.42857143,14.9285714" id="Shape"></path></svg>
diff --git a/app/views/shared/icons/_icon_stopwatch.svg b/app/views/shared/icons/_icon_stopwatch.svg
new file mode 100644
index 00000000000..f20de04538e
--- /dev/null
+++ b/app/views/shared/icons/_icon_stopwatch.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 14" enable-background="new 0 0 12 14"><path d="m11.5 2.4l-1.3-1.1-1 1.1 1.4 1.1.9-1.1"/><path d="m6.8 2v-.5h.5v-1.5h-2.6v1.5h.5v.5c-2.9.4-5.2 2.9-5.2 6 0 3.3 2.7 6 6 6s6-2.7 6-6c0-3-2.3-5.6-5.2-6m-.8 10.5c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5 4.5 2 4.5 4.5-2 4.5-4.5 4.5"/><path d="m6.2 8.9h-.5c-.1 0-.2-.1-.2-.2v-3.5c0-.1.1-.2.2-.2h.5c.1 0 .2.1.2.2v3.5c0 .1-.1.2-.2.2"/></svg>
\ No newline at end of file
diff --git a/app/views/shared/icons/_icon_terminal.svg b/app/views/shared/icons/_icon_terminal.svg
new file mode 100644
index 00000000000..c80f44c3edf
--- /dev/null
+++ b/app/views/shared/icons/_icon_terminal.svg
@@ -0,0 +1 @@
+<svg width="19" height="14" viewBox="0 0 19 14" xmlns="http://www.w3.org/2000/svg"><rect fill="#848484" x="7.2" y="9.25" width="6.46" height="1.5" rx=".5"/><path d="M5.851 7.016L3.81 9.103a.503.503 0 0 0 .017.709l.35.334c.207.198.524.191.717-.006l2.687-2.748a.493.493 0 0 0 .137-.376.493.493 0 0 0-.137-.376L4.894 3.892a.507.507 0 0 0-.717-.006l-.35.334a.503.503 0 0 0-.017.709L5.85 7.016z"/><path d="M1.25 11.497c0 .691.562 1.253 1.253 1.253h13.994c.694 0 1.253-.56 1.253-1.253V2.503c0-.691-.562-1.253-1.253-1.253H2.503c-.694 0-1.253.56-1.253 1.253v8.994zM2.503 0h13.994A2.504 2.504 0 0 1 19 2.503v8.994A2.501 2.501 0 0 1 16.497 14H2.503A2.504 2.504 0 0 1 0 11.497V2.503A2.501 2.501 0 0 1 2.503 0z"/></svg>
diff --git a/app/views/shared/icons/_mattermost_logo.svg.erb b/app/views/shared/icons/_mattermost_logo.svg.erb
new file mode 100644
index 00000000000..83fbd1a407d
--- /dev/null
+++ b/app/views/shared/icons/_mattermost_logo.svg.erb
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="<%= size %>" height="<%= size %>" version="1" viewBox="0 0 501 501"><path d="M236 .7C137.7 7.5 54 68.2 18.2 158.5c-32 81-19.6 172.8 33 242.5 39.8 53 97.2 87 164.3 97 16.5 2.7 48 3.2 63.5 1.2 48.7-6.3 92.2-24.6 129-54.2 13-10.5 33-31.2 42.2-43.7 26.4-35.5 42.8-75.8 49-120.3 1.6-12.3 1.6-48.7 0-61-4-28.3-12-54.8-24.2-79.5-12.8-26-26.5-45.3-46.8-65.8C417.8 64 400.2 49 398.4 49c-.6 0-.4 10.5.3 26l1.3 26 7 8.7c19 23.7 32.8 53.5 38.2 83 2.5 14 3 43 1 55.8-4.5 27.8-15.2 54-31 76.5-8.6 12.2-28 31.6-40.2 40.2-24 17-50 27.6-80 33-10 1.8-49 1.8-59 0-43-7.7-78.8-26-107.2-54.8-29.3-29.7-46.5-64-52.4-104.4-2-14-1.5-42 1-55C90 121.4 132 72 192 49.7c8-3 18.4-5.8 29.5-8.2 1.7-.4 34.4-38 35.3-40.6.3-1-10.2-1-20.8-.4z"/><path d="M322.2 24.6c-1.3.8-8.4 9.3-16 18.7-7.4 9.5-22.4 28-33.2 41.2-51 62.2-66 81.6-70.6 91-6 12-8.4 21-9 33-1.2 19.8 5 36 19 50C222 268 230 273 243 277.2c9 3 10.4 3.2 24 3.2 13.8 0 15 0 22.6-3 23.2-9 39-28.4 45-55.7 2-8.2 2-28.7.4-79.7l-2-72c-1-36.8-1.4-41.8-3-44-2-3-4.8-3.6-7.8-1.4z"/></svg>
diff --git a/app/views/shared/icons/_mr_bold.svg b/app/views/shared/icons/_mr_bold.svg
new file mode 100644
index 00000000000..2daa55a8652
--- /dev/null
+++ b/app/views/shared/icons/_mr_bold.svg
@@ -0,0 +1 @@
+<svg width="15" height="20" viewBox="0 0 12 14" xmlns="http://www.w3.org/2000/svg"><path d="M1 4.967a2.15 2.15 0 1 1 2.3 0v5.066a2.15 2.15 0 1 1-2.3 0V4.967zm7.85 5.17V5.496c0-.745-.603-1.346-1.35-1.346V6l-3-3 3-3v1.85c2.016 0 3.65 1.63 3.65 3.646v4.45a2.15 2.15 0 1 1-2.3.191z" fill-rule="nonzero"/></svg>
diff --git a/app/views/shared/icons/_scroll_down.svg b/app/views/shared/icons/_scroll_down.svg
new file mode 100644
index 00000000000..acf22ac9314
--- /dev/null
+++ b/app/views/shared/icons/_scroll_down.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="33" class="gitlab-icon-scroll-down" viewBox="0 0 16 33" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#ffffff" d="M1.385 5.534v12.47a4.145 4.145 0 0 0 4.144 4.15h4.942a4.151 4.151 0 0 0 4.144-4.15V5.535a4.145 4.145 0 0 0-4.144-4.15H5.53a4.151 4.151 0 0 0-4.144 4.15zM8.88 30.27v-4.351a.688.688 0 0 0-.69-.688.687.687 0 0 0-.69.688v4.334l-1.345-1.346a.69.69 0 0 0-.976.976l2.526 2.526a.685.685 0 0 0 .494.2.685.685 0 0 0 .493-.2l2.526-2.526a.69.69 0 1 0-.976-.976L8.88 30.27zM0 5.534A5.536 5.536 0 0 1 5.529 0h4.942A5.53 5.53 0 0 1 16 5.534v12.47a5.536 5.536 0 0 1-5.529 5.534H5.53A5.53 5.53 0 0 1 0 18.005V5.534zm7 1.01a1 1 0 1 1 2 0v2.143a1 1 0 1 1-2 0V6.544z" fill-rule="evenodd"/>
+</svg>
diff --git a/app/views/shared/icons/_scroll_down_hover_active.svg b/app/views/shared/icons/_scroll_down_hover_active.svg
new file mode 100644
index 00000000000..262576acf54
--- /dev/null
+++ b/app/views/shared/icons/_scroll_down_hover_active.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="33" class="gitlab-icon-scroll-down-hover" viewBox="0 0 16 33" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#ffffff" d="M8.88 30.27v-4.351a.688.688 0 0 0-.69-.688.687.687 0 0 0-.69.688v4.334l-1.345-1.346a.69.69 0 0 0-.976.976l2.526 2.526a.685.685 0 0 0 .494.2.685.685 0 0 0 .493-.2l2.526-2.526a.69.69 0 1 0-.976-.976L8.88 30.27zM0 5.534A5.536 5.536 0 0 1 5.529 0h4.942A5.53 5.53 0 0 1 16 5.534v12.47a5.536 5.536 0 0 1-5.529 5.534H5.53A5.53 5.53 0 0 1 0 18.005V5.534zm7 1.01a1 1 0 1 1 2 0v2.143a1 1 0 1 1-2 0V6.544z" fill-rule="evenodd"/>
+</svg>
diff --git a/app/views/shared/icons/_scroll_up.svg b/app/views/shared/icons/_scroll_up.svg
new file mode 100644
index 00000000000..f11288fd59c
--- /dev/null
+++ b/app/views/shared/icons/_scroll_up.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="33" class="gitlab-icon-scroll-up" viewBox="0 0 16 33" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#ffffff" d="M1.385 14.534v12.47a4.145 4.145 0 0 0 4.144 4.15h4.942a4.151 4.151 0 0 0 4.144-4.15v-12.47a4.145 4.145 0 0 0-4.144-4.15H5.53a4.151 4.151 0 0 0-4.144 4.15zM8.88 2.609V6.96a.688.688 0 0 1-.69.688.687.687 0 0 1-.69-.688V2.627L6.155 3.972a.69.69 0 0 1-.976-.976L7.705.47a.685.685 0 0 1 .494-.2.685.685 0 0 1 .493.2l2.526 2.526a.69.69 0 1 1-.976.976L8.88 2.609zM0 14.534A5.536 5.536 0 0 1 5.529 9h4.942A5.53 5.53 0 0 1 16 14.534v12.47a5.536 5.536 0 0 1-5.529 5.534H5.53A5.53 5.53 0 0 1 0 27.005V14.534zm7 1.01a1 1 0 1 1 2 0v2.143a1 1 0 1 1-2 0v-2.143z" fill-rule="evenodd"/>
+</svg>
diff --git a/app/views/shared/icons/_scroll_up_hover_active.svg b/app/views/shared/icons/_scroll_up_hover_active.svg
new file mode 100644
index 00000000000..4658dbb1bb7
--- /dev/null
+++ b/app/views/shared/icons/_scroll_up_hover_active.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="33" class="gitlab-icon-scroll-up-hover" viewBox="0 0 16 33" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#ffffff" d="M8.88 2.646l1.362 1.362a.69.69 0 0 0 .976-.976L8.692.507A.685.685 0 0 0 8.2.306a.685.685 0 0 0-.494.2L5.179 3.033a.69.69 0 1 0 .976.976L7.5 2.663v4.179c0 .38.306.688.69.688.381 0 .69-.306.69-.688V2.646zM0 14.534A5.536 5.536 0 0 1 5.529 9h4.942A5.53 5.53 0 0 1 16 14.534v12.47a5.536 5.536 0 0 1-5.529 5.534H5.53A5.53 5.53 0 0 1 0 27.005V14.534zm7 1.01a1 1 0 1 1 2 0v2.143a1 1 0 1 1-2 0v-2.143z" fill-rule="evenodd"/>
+</svg>
diff --git a/app/views/shared/issuable/_filter.html.haml b/app/views/shared/issuable/_filter.html.haml
index ed93857e6d4..847a86e2e68 100644
--- a/app/views/shared/issuable/_filter.html.haml
+++ b/app/views/shared/issuable/_filter.html.haml
@@ -1,4 +1,4 @@
-- finder = controller.controller_name == 'issues' || controller.controller_name == 'boards' ? issues_finder : merge_requests_finder
+- finder = controller.controller_name == 'issues' ? issues_finder : merge_requests_finder
 - boards_page = controller.controller_name == 'boards'
 
 .issues-filters
@@ -24,55 +24,42 @@
             placeholder: "Search assignee", data: { any_user: "Any Assignee", first_user: current_user.try(:username), null_user: true, current_user: true, project_id: @project.try(:id), selected: params[:assignee_id], field_name: "assignee_id", default_label: "Assignee" } })
 
         .filter-item.inline.milestone-filter
-          = render "shared/issuable/milestone_dropdown", selected: finder.milestones.try(:first), name: :milestone_title, show_any: true, show_upcoming: true
+          = render "shared/issuable/milestone_dropdown", selected: finder.milestones.try(:first), name: :milestone_title, show_any: true, show_upcoming: true, show_started: true
 
         .filter-item.inline.labels-filter
           = render "shared/issuable/label_dropdown", selected: finder.labels.select(:title).uniq, use_id: false, selected_toggle: params[:label_name], data_options: { field_name: "label_name[]" }
 
-        - if issuable_filters_present
+        - if issuable_filter_present?
           .filter-item.inline.reset-filters
-            %a{href: page_filter_path(without: [:assignee_id, :author_id, :milestone_title, :label_name, :search])} Reset filters
+            %a{ href: page_filter_path(without: issuable_filter_params) } Reset filters
 
         .pull-right
-          - if boards_page
-            #js-boards-seach.issue-boards-search
-              %input.pull-left.form-control{ type: "search", placeholder: "Filter by name...", "v-model" => "filters.search", "debounce" => "250" }
-              - if can?(current_user, :admin_list, @project)
-                .dropdown.pull-right
-                  %button.btn.btn-create.js-new-board-list{ type: "button", data: { toggle: "dropdown", labels: labels_filter_path, namespace_path: @project.try(:namespace).try(:path), project_path: @project.try(:path) } }
-                    Create new list
-                  .dropdown-menu.dropdown-menu-paging.dropdown-menu-align-right.dropdown-menu-issues-board-new.dropdown-menu-selectable
-                    = render partial: "shared/issuable/label_page_default", locals: { show_footer: true, show_create: true, show_boards_content: true, title: "Create a new list" }
-                    - if can?(current_user, :admin_label, @project)
-                      = render partial: "shared/issuable/label_page_create"
-                    = dropdown_loading
-          - else
-            = render 'shared/sort_dropdown'
+          = render 'shared/sort_dropdown'
 
     - if @bulk_edit
       .issues_bulk_update.hide
         = form_tag [:bulk_update, @project.namespace.becomes(Namespace), @project, type], method: :post, class: 'bulk-update'  do
           .filter-item.inline
-            = dropdown_tag("Status", options: { toggle_class: "js-issue-status", title: "Change status", dropdown_class: "dropdown-menu-status dropdown-menu-selectable", data: { field_name: "update[state_event]" } } ) do
+            = dropdown_tag("Status", options: { toggle_class: "js-issue-status", title: "Change status", dropdown_class: "dropdown-menu-status dropdown-menu-selectable", data: { field_name: "update[state_event]", default_label: "Status" } } ) do
               %ul
                 %li
-                  %a{href: "#", data: {id: "reopen"}} Open
+                  %a{ href: "#", data: { id: "reopen" } } Open
                 %li
-                  %a{href: "#", data: {id: "close"}} Closed
+                  %a{ href: "#", data: {id: "close" } } Closed
           .filter-item.inline
             = dropdown_tag("Assignee", options: { toggle_class: "js-user-search js-update-assignee js-filter-submit js-filter-bulk-update", title: "Assign to", filter: true, dropdown_class: "dropdown-menu-user dropdown-menu-selectable",
-              placeholder: "Search authors", data: { first_user: (current_user.username if current_user), null_user: true, current_user: true, project_id: @project.id, field_name: "update[assignee_id]" } })
+              placeholder: "Search authors", data: { first_user: (current_user.username if current_user), null_user: true, current_user: true, project_id: @project.id, field_name: "update[assignee_id]", default_label: "Assignee" } })
           .filter-item.inline
-            = dropdown_tag("Milestone", options: { title: "Assign milestone", toggle_class: 'js-milestone-select js-extra-options js-filter-submit js-filter-bulk-update', filter: true, dropdown_class: "dropdown-menu-selectable dropdown-menu-milestone", placeholder: "Search milestones", data: { show_no: true, field_name: "update[milestone_id]", project_id: @project.id, milestones: namespace_project_milestones_path(@project.namespace, @project, :json), use_id: true } })
+            = dropdown_tag("Milestone", options: { title: "Assign milestone", toggle_class: 'js-milestone-select js-extra-options js-filter-submit js-filter-bulk-update', filter: true, dropdown_class: "dropdown-menu-selectable dropdown-menu-milestone", placeholder: "Search milestones", data: { show_no: true, field_name: "update[milestone_id]", default_label: "Milestone", project_id: @project.id, milestones: namespace_project_milestones_path(@project.namespace, @project, :json), use_id: true } })
           .filter-item.inline.labels-filter
-            = render "shared/issuable/label_dropdown", classes: ['js-filter-bulk-update', 'js-multiselect'], show_create: false, show_footer: false, extra_options: false, filter_submit: false, data_options: { persist_when_hide: "true", field_name: "update[label_ids][]", show_no: false, show_any: false, use_id: true }
+            = render "shared/issuable/label_dropdown", classes: ['js-filter-bulk-update', 'js-multiselect'], dropdown_title: 'Apply a label', show_create: false, show_footer: false, extra_options: false, filter_submit: false, data_options: { persist_when_hide: "true", field_name: "update[label_ids][]", show_no: false, show_any: false, use_id: true }
           .filter-item.inline
-            = dropdown_tag("Subscription", options: { toggle_class: "js-subscription-event", title: "Change subscription", dropdown_class: "dropdown-menu-selectable", data: { field_name: "update[subscription_event]" } } ) do
+            = dropdown_tag("Subscription", options: { toggle_class: "js-subscription-event", title: "Change subscription", dropdown_class: "dropdown-menu-selectable", data: { field_name: "update[subscription_event]", default_label: "Subscription" } } ) do
               %ul
                 %li
-                  %a{href: "#", data: {id: "subscribe"}} Subscribe
+                  %a{ href: "#", data: { id: "subscribe" } } Subscribe
                 %li
-                  %a{href: "#", data: {id: "unsubscribe"}} Unsubscribe
+                  %a{ href: "#", data: { id: "unsubscribe" } } Unsubscribe
 
           = hidden_field_tag 'update[issuable_ids]', []
           = hidden_field_tag :state_event, params[:state_event]
@@ -91,5 +78,5 @@
   new SubscriptionSelect();
   $('form.filter-form').on('submit', function (event) {
     event.preventDefault();
-    Turbolinks.visit(this.action + '&' + $(this).serialize());
+    gl.utils.visitUrl(this.action + '&' + $(this).serialize());
   });
diff --git a/app/views/shared/issuable/_form.html.haml b/app/views/shared/issuable/_form.html.haml
index 0ace6be8f4e..17107f55a2d 100644
--- a/app/views/shared/issuable/_form.html.haml
+++ b/app/views/shared/issuable/_form.html.haml
@@ -1,113 +1,33 @@
+- form = local_assigns.fetch(:f)
+- commits = local_assigns[:commits]
 - project = @target_project || @project
+
 = form_errors(issuable)
 
 - if @conflict
   .alert.alert-danger
     Someone edited the #{issuable.class.model_name.human.downcase} the same time you did.
     Please check out
-    = link_to "the #{issuable.class.model_name.human.downcase}", polymorphic_path([@project.namespace.becomes(Namespace), @project, issuable]), target: "_blank"
+    = link_to "the #{issuable.class.model_name.human.downcase}", polymorphic_path([@project.namespace.becomes(Namespace), @project, issuable]), target: "_blank", rel: 'noopener noreferrer'
     and make sure your changes will not unintentionally remove theirs
 
 .form-group
-  = f.label :title, class: 'control-label'
-
-  - issuable_template_names = issuable_templates(issuable)
-
-  - if issuable_template_names.any?
-    .col-sm-3.col-lg-2
-      .js-issuable-selector-wrap{ data: { issuable_type: issuable.class.to_s.underscore.downcase } }
-        - title = selected_template(issuable) || "Choose a template"
-
-        = dropdown_tag(title, options: { toggle_class: 'js-issuable-selector',
-          title: title, filter: true, placeholder: 'Filter', footer_content: true,
-          data: { data: issuable_template_names, field_name: 'issuable_template', selected: selected_template(issuable), project_path: ref_project.path, namespace_path: ref_project.namespace.path } } ) do
-          %ul.dropdown-footer-list
-            %li
-              %a.no-template
-                No template
-              %a.reset-template
-                Reset template
-  %div{ class: issuable_template_names.any? ? 'col-sm-7 col-lg-8' : 'col-sm-10' }
-    = f.text_field :title, maxlength: 255, autofocus: true, autocomplete: 'off',
-        class: 'form-control pad', required: true
-
-    - if issuable.is_a?(MergeRequest)
-      %p.help-block
-        .js-wip-explanation
-          %a.js-toggle-wip{href: "", tabindex: -1}
-            Remove the
-            %code WIP:
-            prefix from the title
-          to allow this
-          %strong Work In Progress
-          merge request to be merged when it's ready.
-        .js-no-wip-explanation
-          %a.js-toggle-wip{href: "", tabindex: -1}
-            Start the title with
-            %code WIP:
-          to prevent a
-          %strong Work In Progress
-          merge request from being merged before it's ready.
-
-    - if can_add_template?(issuable)
-      %p.help-block
-        Add
-        = link_to "description templates", help_page_path('user/project/description_templates'), tabindex: -1
-        to help your contributors communicate effectively!
-
-.form-group.detail-page-description
-  = f.label :description, 'Description', class: 'control-label'
-  .col-sm-10
-
-    = render layout: 'projects/md_preview', locals: { preview_class: "md-preview", referenced_users: true } do
-      = render 'projects/zen', f: f, attr: :description,
-                               classes: 'note-textarea',
-                               placeholder: "Write a comment or drag your files here...",
-                               supports_slash_commands: !issuable.persisted?
-      = render 'projects/notes/hints', supports_slash_commands: !issuable.persisted?
-      .clearfix
-      .error-alert
-
-- if issuable.is_a?(Issue)
+  = form.label :title, class: 'control-label'
+
+  = render 'shared/issuable/form/template_selector', issuable: issuable
+  = render 'shared/issuable/form/title', issuable: issuable, form: form, has_wip_commits: commits && commits.detect(&:work_in_progress?)
+
+= render 'shared/issuable/form/description', issuable: issuable, form: form
+
+- if issuable.respond_to?(:confidential)
   .form-group
     .col-sm-offset-2.col-sm-10
       .checkbox
-        = f.label :confidential do
-          = f.check_box :confidential
+        = form.label :confidential do
+          = form.check_box :confidential
           This issue is confidential and should only be visible to team members with at least Reporter access.
 
-- if can?(current_user, :"admin_#{issuable.to_ability_name}", issuable.project)
-  - has_due_date = issuable.has_attribute?(:due_date)
-  %hr
-  .row
-    %div{ class: (has_due_date ? "col-lg-6" : "col-sm-12") }
-      .form-group.issue-assignee
-        = f.label :assignee_id, "Assignee", class: "control-label #{"col-lg-4" if has_due_date}"
-        .col-sm-10{ class: ("col-lg-8" if has_due_date) }
-          .issuable-form-select-holder
-            - if issuable.assignee_id
-              = f.hidden_field :assignee_id
-            = dropdown_tag(user_dropdown_label(issuable.assignee_id, "Assignee"), options: { toggle_class: "js-dropdown-keep-input js-user-search js-issuable-form-dropdown js-assignee-search", title: "Select assignee", filter: true, dropdown_class: "dropdown-menu-user dropdown-menu-selectable dropdown-menu-assignee js-filter-submit",
-              placeholder: "Search assignee", data: { first_user: current_user.try(:username), null_user: true, current_user: true, project_id: project.try(:id), selected: issuable.assignee_id, field_name: "#{issuable.class.model_name.param_key}[assignee_id]", default_label: "Assignee"} })
-      .form-group.issue-milestone
-        = f.label :milestone_id, "Milestone", class: "control-label #{"col-lg-4" if has_due_date}"
-        .col-sm-10{ class: ("col-lg-8" if has_due_date) }
-          .issuable-form-select-holder
-            = render "shared/issuable/milestone_dropdown", selected: issuable.milestone, name: "#{issuable.class.model_name.param_key}[milestone_id]", show_any: false, show_upcoming: false, extra_class: "js-issuable-form-dropdown js-dropdown-keep-input", dropdown_title: "Select milestone"
-      .form-group
-        - has_labels = @labels && @labels.any?
-        = f.label :label_ids, "Labels", class: "control-label #{"col-lg-4" if has_due_date}"
-        = f.hidden_field :label_ids, multiple: true, value: ''
-        .col-sm-10{ class: "#{"col-lg-8" if has_due_date} #{'issuable-form-padding-top' if !has_labels}" }
-          .issuable-form-select-holder
-            = render "shared/issuable/label_dropdown", classes: ["js-issuable-form-dropdown"], selected: issuable.labels, data_options: { field_name: "#{issuable.class.model_name.param_key}[label_ids][]", show_any: false}, dropdown_title: "Select label"
-    - if has_due_date
-      .col-lg-6
-        .form-group
-          = f.label :due_date, "Due date", class: "control-label"
-          .col-sm-10
-            .issuable-form-select-holder
-              = f.text_field :due_date, id: "issuable-due-date", class: "datepicker form-control", placeholder: "Select due date"
+= render 'shared/issuable/form/metadata', issuable: issuable, form: form
 
 - if issuable.can_move?(current_user)
   %hr
@@ -121,51 +41,51 @@
       title: 'Moving an issue will copy the discussion to a different project and close it here. All participants will be notified of the new location.' }
         = icon('question-circle')
 
-- if issuable.is_a?(MergeRequest) && !issuable.closed_without_fork?
-  %hr
-  - if @merge_request.new_record?
-    .form-group
-      = f.label :source_branch, class: 'control-label'
-      .col-sm-10
-        .issuable-form-select-holder
-          = f.select(:source_branch, [@merge_request.source_branch], { }, { class: 'source_branch select2 span2', disabled: true })
+= render 'shared/issuable/form/branch_chooser', issuable: issuable, form: form
+
+= render 'shared/issuable/form/merge_params', issuable: issuable
+
+- if @merge_request_to_resolve_discussions_of
   .form-group
-    = f.label :target_branch, class: 'control-label'
-    .col-sm-10
-      .issuable-form-select-holder
-        = f.select(:target_branch, @merge_request.target_branches, { include_blank: true }, { class: 'target_branch select2 span2', disabled: @merge_request.new_record?, data: {placeholder: "Select branch"} })
-      - if @merge_request.new_record?
-        &nbsp;
-        = link_to 'Change branches', mr_change_branches_path(@merge_request)
-  - if @merge_request.can_remove_source_branch?(current_user)
-    .form-group
-      .col-sm-10.col-sm-offset-2
-        .checkbox
-          = label_tag 'merge_request[force_remove_source_branch]' do
-            = hidden_field_tag 'merge_request[force_remove_source_branch]', '0'
-            = check_box_tag 'merge_request[force_remove_source_branch]', '1', @merge_request.force_remove_source_branch?
-            Remove source branch when merge request is accepted.
+    .col-sm-10.col-sm-offset-2
+      = icon('info-circle')
+      - if @merge_request_to_resolve_discussions_of.discussions_can_be_resolved_by?(current_user)
+        = hidden_field_tag 'merge_request_to_resolve_discussions_of', @merge_request_to_resolve_discussions_of.iid
+        - if @discussion_to_resolve
+          = hidden_field_tag 'discussion_to_resolve', @discussion_to_resolve.id
+          Creating this issue will resolve the discussion in
+        - else
+          Creating this issue will resolve all discussions in
+        = link_to_discussions_to_resolve(@merge_request_to_resolve_discussions_of, @discussion_to_resolve)
+      - else
+        The
+        = @discussion_to_resolve ? 'discussion' : 'discussions'
+        at
+        = link_to_discussions_to_resolve(@merge_request_to_resolve_discussions_of, @discussion_to_resolve)
+        will stay unresolved. Ask someone with permission to resolve
+        = @discussion_to_resolve ? 'it.' : 'them.'
 
 - is_footer = !(issuable.is_a?(MergeRequest) && issuable.new_record?)
-.row-content-block{class: (is_footer ? "footer-block" : "middle-block")}
-  - if issuable.new_record?
-    = f.submit "Submit #{issuable.class.model_name.human.downcase}", class: 'btn btn-create'
-  - else
-    = f.submit 'Save changes', class: 'btn btn-save'
+.row-content-block{ class: (is_footer ? "footer-block" : "middle-block") }
+  .pull-right
+    - if issuable.new_record?
+      = link_to 'Cancel', polymorphic_path([@project.namespace.becomes(Namespace), @project, issuable.class]), class: 'btn btn-cancel'
+    - else
+      - if can?(current_user, :"destroy_#{issuable.to_ability_name}", @project)
+        = link_to 'Delete', polymorphic_path([@project.namespace.becomes(Namespace), @project, issuable]), data: { confirm: "#{issuable.human_class_name} will be removed! Are you sure?" }, method: :delete, class: 'btn btn-danger btn-grouped'
+      = link_to 'Cancel', polymorphic_path([@project.namespace.becomes(Namespace), @project, issuable]), class: 'btn btn-grouped btn-cancel'
+
+  %span.append-right-10
+    - if issuable.new_record?
+      = form.submit "Submit #{issuable.class.model_name.human.downcase}", class: 'btn btn-create'
+    - else
+      = form.submit 'Save changes', class: 'btn btn-save'
 
   - if !issuable.persisted? && !issuable.project.empty_repo? && (guide_url = contribution_guide_path(issuable.project))
-    .inline.prepend-left-10
+    .inline.prepend-top-10
       Please review the
-      %strong #{link_to 'contribution guidelines', guide_url}
+      %strong= link_to('contribution guidelines', guide_url)
       for this project.
 
-  - if issuable.new_record?
-    = link_to 'Cancel', polymorphic_path([@project.namespace.becomes(Namespace), @project, issuable.class]), class: 'btn btn-cancel'
-  - else
-    .pull-right
-      - if can?(current_user, :"destroy_#{issuable.to_ability_name}", @project)
-        = link_to 'Delete', polymorphic_path([@project.namespace.becomes(Namespace), @project, issuable]), data: { confirm: "#{issuable.class.name.titleize} will be removed! Are you sure?" },
-                                                                                                  method: :delete, class: 'btn btn-danger btn-grouped'
-      = link_to 'Cancel', polymorphic_path([@project.namespace.becomes(Namespace), @project, issuable]), class: 'btn btn-grouped btn-cancel'
 
-= f.hidden_field :lock_version
+= form.hidden_field :lock_version
diff --git a/app/views/shared/issuable/_label_dropdown.html.haml b/app/views/shared/issuable/_label_dropdown.html.haml
index 1d778bc88de..93c7fa0c7d6 100644
--- a/app/views/shared/issuable/_label_dropdown.html.haml
+++ b/app/views/shared/issuable/_label_dropdown.html.haml
@@ -19,10 +19,10 @@
     = hidden_field_tag data_options[:field_name], use_id ? label.try(:id) : label.try(:title), id: nil
 
 .dropdown
-  %button.dropdown-menu-toggle.js-label-select.js-multiselect{class: classes.join(' '), type: "button", data: dropdown_data}
+  %button.dropdown-menu-toggle.js-label-select.js-multiselect{ class: classes.join(' '), type: "button", data: dropdown_data }
     %span.dropdown-toggle-text{ class: ("is-default" if selected.nil? || selected.empty?) }
       = multi_label_name(selected, "Labels")
-    = icon('caret-down')
+    = icon('chevron-down')
   .dropdown-menu.dropdown-select.dropdown-menu-paging.dropdown-menu-labels.dropdown-menu-selectable
     = render partial: "shared/issuable/label_page_default", locals: { title: dropdown_title, show_footer: show_footer, show_create: show_create }
     - if show_create && project && can?(current_user, :admin_label, project)
diff --git a/app/views/shared/issuable/_label_page_create.html.haml b/app/views/shared/issuable/_label_page_create.html.haml
index 3bc57d3d2ac..bd66f39fa59 100644
--- a/app/views/shared/issuable/_label_page_create.html.haml
+++ b/app/views/shared/issuable/_label_page_create.html.haml
@@ -9,7 +9,7 @@
           &nbsp
     .dropdown-label-color-input
       .dropdown-label-color-preview.js-dropdown-label-color-preview
-      %input#new_label_color.default-dropdown-input{ type: "text" }
+      %input#new_label_color.default-dropdown-input{ type: "text", placeholder: "Assign custom color like #FF0000" }
     .clearfix
       %button.btn.btn-primary.pull-left.js-new-label-btn{ type: "button" }
         Create
diff --git a/app/views/shared/issuable/_label_page_default.html.haml b/app/views/shared/issuable/_label_page_default.html.haml
index c0dc63be2bf..9a8529c6cbb 100644
--- a/app/views/shared/issuable/_label_page_default.html.haml
+++ b/app/views/shared/issuable/_label_page_default.html.haml
@@ -1,17 +1,15 @@
 - title = local_assigns.fetch(:title, 'Assign labels')
 - show_create = local_assigns.fetch(:show_create, true)
 - show_footer = local_assigns.fetch(:show_footer, true)
-- filter_placeholder = local_assigns.fetch(:filter_placeholder, 'Search labels')
+- filter_placeholder = local_assigns.fetch(:filter_placeholder, 'Search')
 - show_boards_content = local_assigns.fetch(:show_boards_content, false)
 .dropdown-page-one
   = dropdown_title(title)
   - if show_boards_content
     .issue-board-dropdown-content
       %p
-        Each label that exists in your issue tracker can have its own dedicated
-        list. Select a label below to add a list to your Board and it will
-        automatically be populated with issues that have that label. To create
-        a list for a label that doesn't exist yet, simply create the label below.
+        Create lists from the labels you use in your project. Issues with that
+        label will automatically be added to the list.
   = dropdown_filter(filter_placeholder)
   = dropdown_content
   - if @project && show_footer
@@ -19,7 +17,7 @@
       %ul.dropdown-footer-list
         - if can?(current_user, :admin_label, @project)
           %li
-            %a.dropdown-toggle-page{href: "#"}
+            %a.dropdown-toggle-page{ href: "#" }
               Create new label
         %li
           = link_to namespace_project_labels_path(@project.namespace, @project), :"data-is-link" => true do
diff --git a/app/views/shared/issuable/_milestone_dropdown.html.haml b/app/views/shared/issuable/_milestone_dropdown.html.haml
index 40fe53e6a8d..f0d50828e2a 100644
--- a/app/views/shared/issuable/_milestone_dropdown.html.haml
+++ b/app/views/shared/issuable/_milestone_dropdown.html.haml
@@ -3,10 +3,10 @@
 - show_menu_above = show_menu_above || false
 - selected_text = selected.try(:title) || params[:milestone_title]
 - dropdown_title = local_assigns.fetch(:dropdown_title, "Filter by milestone")
-- if selected.present?
+- if selected.present? || params[:milestone_title].present?
   = hidden_field_tag(name, name == :milestone_title ? selected_text : selected.id)
 = dropdown_tag(milestone_dropdown_label(selected_text), options: { title: dropdown_title, toggle_class: "js-milestone-select js-filter-submit #{extra_class}", filter: true, dropdown_class: "dropdown-menu-selectable dropdown-menu-milestone",
-  placeholder: "Search milestones", footer_content: project.present?, data: { show_no: true, show_menu_above: show_menu_above, show_any: show_any, show_upcoming: show_upcoming, field_name: name, selected: selected.try(:title), project_id: project.try(:id), milestones: milestones_filter_dropdown_path, default_label: "Milestone" } }) do
+  placeholder: "Search milestones", footer_content: project.present?, data: { show_no: true, show_menu_above: show_menu_above, show_any: show_any, show_upcoming: show_upcoming, show_started: show_started, field_name: name, selected: selected.try(:title), project_id: project.try(:id), milestones: milestones_filter_dropdown_path, default_label: "Milestone" } }) do
   - if project
     %ul.dropdown-footer-list
       - if can? current_user, :admin_milestone, project
diff --git a/app/views/shared/issuable/_nav.html.haml b/app/views/shared/issuable/_nav.html.haml
index 5527a2f889a..ad995cbe962 100644
--- a/app/views/shared/issuable/_nav.html.haml
+++ b/app/views/shared/issuable/_nav.html.haml
@@ -3,23 +3,23 @@
 - issuables = @issues || @merge_requests
 
 %ul.nav-links.issues-state-filters
-  %li{class: ("active" if params[:state] == 'opened')}
-    = link_to page_filter_path(state: 'opened', label: true), title: "Filter by #{page_context_word} that are currently opened." do
+  %li{ class: active_when(params[:state] == 'opened') }>
+    = link_to page_filter_path(state: 'opened', label: true), id: 'state-opened', title: "Filter by #{page_context_word} that are currently opened." do
       #{issuables_state_counter_text(type, :opened)}
 
   - if type == :merge_requests
-    %li{class: ("active" if params[:state] == 'merged')}
-      = link_to page_filter_path(state: 'merged', label: true), title: 'Filter by merge requests that are currently merged.' do
+    %li{ class: active_when(params[:state] == 'merged') }>
+      = link_to page_filter_path(state: 'merged', label: true), id: 'state-merged', title: 'Filter by merge requests that are currently merged.' do
         #{issuables_state_counter_text(type, :merged)}
 
-    %li{class: ("active" if params[:state] == 'closed')}
-      = link_to page_filter_path(state: 'closed', label: true), title: 'Filter by merge requests that are currently closed and unmerged.' do
+    %li{ class: active_when(params[:state] == 'closed') }>
+      = link_to page_filter_path(state: 'closed', label: true), id: 'state-closed', title: 'Filter by merge requests that are currently closed and unmerged.' do
         #{issuables_state_counter_text(type, :closed)}
   - else
-    %li{class: ("active" if params[:state] == 'closed')}
-      = link_to page_filter_path(state: 'closed', label: true), title: 'Filter by issues that are currently closed.' do
+    %li{ class: active_when(params[:state] == 'closed') }>
+      = link_to page_filter_path(state: 'closed', label: true), id: 'state-all', title: 'Filter by issues that are currently closed.' do
         #{issuables_state_counter_text(type, :closed)}
 
-  %li{class: ("active" if params[:state] == 'all')}
-    = link_to page_filter_path(state: 'all', label: true), title: "Show all #{page_context_word}." do
+  %li{ class: active_when(params[:state] == 'all') }>
+    = link_to page_filter_path(state: 'all', label: true), id: 'state-all', title: "Show all #{page_context_word}." do
       #{issuables_state_counter_text(type, :all)}
diff --git a/app/views/shared/issuable/_participants.html.haml b/app/views/shared/issuable/_participants.html.haml
index 33a9a494857..171da899937 100644
--- a/app/views/shared/issuable/_participants.html.haml
+++ b/app/views/shared/issuable/_participants.html.haml
@@ -13,8 +13,8 @@
       .participants-author.js-participants-author
         = link_to_member(@project, participant, name: false, size: 24)
     - if participants_extra > 0
-      %div.participants-more
-        %a.js-participants-more{href: "#", data: {original_text: "+ #{participants_size - 7} more", less_text: "- show less"}}
+      .participants-more
+        %a.js-participants-more{ href: "#", data: { original_text: "+ #{participants_size - 7} more", less_text: "- show less" } }
           + #{participants_extra} more
 :javascript
   IssuableContext.prototype.PARTICIPANTS_ROW_COUNT = #{participants_row};
diff --git a/app/views/shared/issuable/_search_bar.html.haml b/app/views/shared/issuable/_search_bar.html.haml
new file mode 100644
index 00000000000..330fa8a5b10
--- /dev/null
+++ b/app/views/shared/issuable/_search_bar.html.haml
@@ -0,0 +1,153 @@
+- type = local_assigns.fetch(:type)
+- block_css_class = type != :boards_modal ? 'row-content-block second-block' : ''
+
+.issues-filters
+  .issues-details-filters.filtered-search-block{ class: block_css_class, "v-pre" => type == :boards_modal }
+    = form_tag page_filter_path(without: [:assignee_id, :author_id, :milestone_title, :label_name, :search]), method: :get, class: 'filter-form js-filter-form' do
+      - if params[:search].present?
+        = hidden_field_tag :search, params[:search]
+      - if @bulk_edit
+        .check-all-holder
+          = check_box_tag "check_all_issues", nil, false,
+            class: "check_all_issues left"
+      .issues-other-filters.filtered-search-container
+        .filtered-search-input-container
+          .scroll-container
+            %ul.tokens-container.list-unstyled
+              %li.input-token
+                %input.form-control.filtered-search{ placeholder: 'Search or filter results...', data: { id: "filtered-search-#{type.to_s}", 'project-id' => @project.id, 'username-params' => @users.to_json(only: [:id, :username]), 'base-endpoint' => namespace_project_path(@project.namespace, @project) } }
+            = icon('filter')
+            %button.clear-search.hidden{ type: 'button' }
+              = icon('times')
+          #js-dropdown-hint.dropdown-menu.hint-dropdown
+            %ul{ data: { dropdown: true } }
+              %li.filter-dropdown-item{ data: { action: 'submit' } }
+                %button.btn.btn-link
+                  = icon('search')
+                  %span
+                    Press Enter or click to search
+            %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
+              %li.filter-dropdown-item
+                %button.btn.btn-link
+                  -# Encapsulate static class name `{{icon}}` inside #{} to bypass
+                  -# haml lint's ClassAttributeWithStaticValue
+                  %i.fa{ class: "#{'{{icon}}'}" }
+                  %span.js-filter-hint
+                    {{hint}}
+                  %span.js-filter-tag.dropdown-light-content
+                    {{tag}}
+          #js-dropdown-author.dropdown-menu{ data: { icon: 'pencil', hint: 'author', tag: '@author' } }
+            %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
+              %li.filter-dropdown-item
+                %button.btn.btn-link.dropdown-user
+                  %img.avatar{ alt: '{{name}}\'s avatar', width: '30', data: { src: '{{avatar_url}}' } }
+                  .dropdown-user-details
+                    %span
+                      {{name}}
+                    %span.dropdown-light-content
+                      @{{username}}
+          #js-dropdown-assignee.dropdown-menu{ data: { icon: 'user', hint: 'assignee', tag: '@assignee' } }
+            %ul{ data: { dropdown: true } }
+              %li.filter-dropdown-item{ data: { value: 'none' } }
+                %button.btn.btn-link
+                  No Assignee
+              %li.divider
+            %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
+              %li.filter-dropdown-item
+                %button.btn.btn-link.dropdown-user
+                  %img.avatar{ alt: '{{name}}\'s avatar', width: '30', data: { src: '{{avatar_url}}' } }
+                  .dropdown-user-details
+                    %span
+                      {{name}}
+                    %span.dropdown-light-content
+                      @{{username}}
+          #js-dropdown-milestone.dropdown-menu{ data: { icon: 'clock-o', hint: 'milestone', tag: '%milestone' } }
+            %ul{ data: { dropdown: true } }
+              %li.filter-dropdown-item{ data: { value: 'none' } }
+                %button.btn.btn-link
+                  No Milestone
+              %li.filter-dropdown-item{ data: { value: 'upcoming' } }
+                %button.btn.btn-link
+                  Upcoming
+              %li.filter-dropdown-item{ 'data-value' => 'started' }
+                %button.btn.btn-link
+                  Started
+              %li.divider
+            %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
+              %li.filter-dropdown-item
+                %button.btn.btn-link.js-data-value
+                  {{title}}
+          #js-dropdown-label.dropdown-menu{ data: { icon: 'tag', hint: 'label', tag: '~label', type: 'array' } }
+            %ul{ data: { dropdown: true } }
+              %li.filter-dropdown-item{ data: { value: 'none' } }
+                %button.btn.btn-link
+                  No Label
+              %li.divider
+            %ul.filter-dropdown{ data: { dynamic: true, dropdown: true } }
+              %li.filter-dropdown-item
+                %button.btn.btn-link
+                  %span.dropdown-label-box{ style: 'background: {{color}}' }
+                  %span.label-title.js-data-value
+                    {{title}}
+        .filter-dropdown-container
+          - if type == :boards
+            - if can?(current_user, :admin_list, @project)
+              .dropdown.prepend-left-10#js-add-list
+                %button.btn.btn-create.btn-inverted.js-new-board-list{ type: "button", data: { toggle: "dropdown", labels: labels_filter_path, namespace_path: @project.try(:namespace).try(:path), project_path: @project.try(:path) } }
+                  Add list
+                .dropdown-menu.dropdown-menu-paging.dropdown-menu-align-right.dropdown-menu-issues-board-new.dropdown-menu-selectable
+                  = render partial: "shared/issuable/label_page_default", locals: { show_footer: true, show_create: true, show_boards_content: true, title: "Add list" }
+                  - if can?(current_user, :admin_label, @project)
+                    = render partial: "shared/issuable/label_page_create"
+                  = dropdown_loading
+              #js-add-issues-btn.prepend-left-10
+          - elsif type != :boards_modal
+            = render 'shared/sort_dropdown'
+
+    - if @bulk_edit
+      .issues_bulk_update.hide
+        = form_tag [:bulk_update, @project.namespace.becomes(Namespace), @project, type], method: :post, class: 'bulk-update'  do
+          .filter-item.inline
+            = dropdown_tag("Status", options: { toggle_class: "js-issue-status", title: "Change status", dropdown_class: "dropdown-menu-status dropdown-menu-selectable", data: { field_name: "update[state_event]" } } ) do
+              %ul
+                %li
+                  %a{ href: "#", data: { id: "reopen" } } Open
+                %li
+                  %a{ href: "#", data: { id: "close" } } Closed
+          .filter-item.inline
+            = dropdown_tag("Assignee", options: { toggle_class: "js-user-search js-update-assignee js-filter-submit js-filter-bulk-update", title: "Assign to", filter: true, dropdown_class: "dropdown-menu-user dropdown-menu-selectable",
+              placeholder: "Search authors", data: { first_user: (current_user.username if current_user), null_user: true, current_user: true, project_id: @project.id, field_name: "update[assignee_id]" } })
+          .filter-item.inline
+            = dropdown_tag("Milestone", options: { title: "Assign milestone", toggle_class: 'js-milestone-select js-extra-options js-filter-submit js-filter-bulk-update', filter: true, dropdown_class: "dropdown-menu-selectable dropdown-menu-milestone", placeholder: "Search milestones", data: { show_no: true, field_name: "update[milestone_id]", project_id: @project.id, milestones: namespace_project_milestones_path(@project.namespace, @project, :json), use_id: true } })
+          .filter-item.inline.labels-filter
+            = render "shared/issuable/label_dropdown", classes: ['js-filter-bulk-update', 'js-multiselect'], dropdown_title: 'Apply a label', show_create: false, show_footer: false, extra_options: false, filter_submit: false, data_options: { persist_when_hide: "true", field_name: "update[label_ids][]", show_no: false, show_any: false, use_id: true }
+          .filter-item.inline
+            = dropdown_tag("Subscription", options: { toggle_class: "js-subscription-event", title: "Change subscription", dropdown_class: "dropdown-menu-selectable", data: { field_name: "update[subscription_event]" } } ) do
+              %ul
+                %li
+                  %a{ href: "#", data: { id: "subscribe" } } Subscribe
+                %li
+                  %a{ href: "#", data: { id: "unsubscribe" } } Unsubscribe
+
+          = hidden_field_tag 'update[issuable_ids]', []
+          = hidden_field_tag :state_event, params[:state_event]
+          .filter-item.inline.update-issues-btn
+            = button_tag "Update #{type.to_s.humanize(capitalize: false)}", class: "btn update_selected_issues btn-save"
+
+- unless type === :boards_modal
+  :javascript
+    new UsersSelect();
+    new LabelsSelect();
+    new MilestoneSelect();
+    new IssueStatusSelect();
+    new SubscriptionSelect();
+
+    $(document).off('page:restore').on('page:restore', function (event) {
+      if (gl.FilteredSearchManager) {
+        new gl.FilteredSearchManager();
+      }
+      Issuable.init();
+      new gl.IssuableBulkActions({
+        prefixId: 'issue_',
+      });
+    });
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index 7363ead09ff..92d2d93a732 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -1,32 +1,33 @@
 - todo = issuable_todo(issuable)
-%aside.right-sidebar{ class: sidebar_gutter_collapsed_class }
+- content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('common_vue')
+  = page_specific_javascript_bundle_tag('issuable')
+
+%aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => "102", "spy" => "affix" }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' }
   .issuable-sidebar
     - can_edit_issuable = can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
     .block.issuable-sidebar-header
       - if current_user
         %span.issuable-header-text.hide-collapsed.pull-left
           Todo
-      %a.gutter-toggle.pull-right.js-sidebar-toggle{ role: "button", href: "#", aria: { label: "Toggle sidebar" } }
+      %a.gutter-toggle.pull-right.js-sidebar-toggle{ role: "button", href: "#", "aria-label" => "Toggle sidebar" }
         = sidebar_gutter_toggle_icon
       - if current_user
-        %button.btn.btn-default.issuable-header-btn.pull-right.js-issuable-todo{ type: "button", aria: { label: (todo.nil? ? "Add Todo" : "Mark Done") }, data: { todo_text: "Add Todo", mark_text: "Mark Done", issuable_id: issuable.id, issuable_type: issuable.class.name.underscore, url: namespace_project_todos_path(@project.namespace, @project), delete_path: (dashboard_todo_path(todo) if todo) } }
-          %span.js-issuable-todo-text
-            - if todo
-              Mark Done
-            - else
-              Add Todo
-          = icon('spin spinner', class: 'hidden js-issuable-todo-loading')
+        = render "shared/issuable/sidebar_todo", todo: todo, issuable: issuable
 
-    = form_for [@project.namespace.becomes(Namespace), @project, issuable], remote: true, format: :json, html: {class: 'issuable-context-form inline-update js-issuable-update'} do |f|
+    = form_for [@project.namespace.becomes(Namespace), @project, issuable], remote: true, format: :json, html: { class: 'issuable-context-form inline-update js-issuable-update' } do |f|
+      - if current_user
+        .block.todo.hide-expanded
+          = render "shared/issuable/sidebar_todo", todo: todo, issuable: issuable, is_collapsed: true
       .block.assignee
-        .sidebar-collapsed-icon.sidebar-collapsed-user{data: {toggle: "tooltip", placement: "left", container: "body"}, title: (issuable.assignee.name if issuable.assignee)}
+        .sidebar-collapsed-icon.sidebar-collapsed-user{ data: { toggle: "tooltip", placement: "left", container: "body" }, title: (issuable.assignee.name if issuable.assignee) }
           - if issuable.assignee
             = link_to_member(@project, issuable.assignee, size: 24)
           - else
-            = icon('user')
+            = icon('user', 'aria-hidden': 'true')
         .title.hide-collapsed
           Assignee
-          = icon('spinner spin', class: 'block-loading')
+          = icon('spinner spin', class: 'hidden block-loading', 'aria-hidden': 'true')
           - if can_edit_issuable
             = link_to 'Edit', '#', class: 'edit-link pull-right'
         .value.hide-collapsed
@@ -34,7 +35,7 @@
             = link_to_member(@project, issuable.assignee, size: 32, extra_class: 'bold') do
               - if issuable.instance_of?(MergeRequest) && !issuable.can_be_merged_by?(issuable.assignee)
                 %span.pull-right.cannot-be-merged{ data: { toggle: 'tooltip', placement: 'left' }, title: 'Not allowed to merge' }
-                  = icon('exclamation-triangle')
+                  = icon('exclamation-triangle', 'aria-hidden': 'true')
               %span.username
                 = issuable.assignee.to_reference
           - else
@@ -51,16 +52,16 @@
 
       .block.milestone
         .sidebar-collapsed-icon
-          = icon('clock-o')
+          = icon('clock-o', 'aria-hidden': 'true')
           %span
             - if issuable.milestone
-              %span.has-tooltip{title: milestone_remaining_days(issuable.milestone), data: {container: 'body', html: 1, placement: 'left'}}
+              %span.has-tooltip{ title: milestone_remaining_days(issuable.milestone), data: { container: 'body', html: 1, placement: 'left' } }
                 = issuable.milestone.title
             - else
               None
         .title.hide-collapsed
           Milestone
-          = icon('spinner spin', class: 'block-loading')
+          = icon('spinner spin', class: 'hidden block-loading', 'aria-hidden': 'true')
           - if can_edit_issuable
             = link_to 'Edit', '#', class: 'edit-link pull-right'
         .value.hide-collapsed
@@ -72,16 +73,22 @@
         .selectbox.hide-collapsed
           = f.hidden_field 'milestone_id', value: issuable.milestone_id, id: nil
           = dropdown_tag('Milestone', options: { title: 'Assign milestone', toggle_class: 'js-milestone-select js-extra-options', filter: true, dropdown_class: 'dropdown-menu-selectable', placeholder: 'Search milestones', data: { show_no: true, field_name: "#{issuable.to_ability_name}[milestone_id]", project_id: @project.id, issuable_id: issuable.id, milestones: namespace_project_milestones_path(@project.namespace, @project, :json), ability_name: issuable.to_ability_name, issue_update: issuable_json_path(issuable), use_id: true }})
-
+      - if issuable.has_attribute?(:time_estimate)
+        #issuable-time-tracker.block
+          %issuable-time-tracker{ ':time_estimate' => 'issuable.time_estimate', ':time_spent' => 'issuable.total_time_spent', ':human_time_estimate' => 'issuable.human_time_estimate', ':human_time_spent' => 'issuable.human_total_time_spent', 'docs-url' => help_page_path('workflow/time_tracking.md') }
+            // Fallback while content is loading
+            .title.hide-collapsed
+              Time tracking
+              = icon('spinner spin', 'aria-hidden': 'true')
       - if issuable.has_attribute?(:due_date)
         .block.due_date
           .sidebar-collapsed-icon
-            = icon('calendar')
+            = icon('calendar', 'aria-hidden': 'true')
             %span.js-due-date-sidebar-value
               = issuable.due_date.try(:to_s, :medium) || 'None'
           .title.hide-collapsed
             Due date
-            = icon('spinner spin', class: 'block-loading')
+            = icon('spinner spin', class: 'hidden block-loading', 'aria-hidden': 'true')
             - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
               = link_to 'Edit', '#', class: 'edit-link pull-right'
           .value.hide-collapsed
@@ -97,11 +104,11 @@
                   remove due date
           - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
             .selectbox.hide-collapsed
-              = f.hidden_field :due_date, value: issuable.due_date
+              = f.hidden_field :due_date, value: issuable.due_date.try(:strftime, 'yy-mm-dd')
               .dropdown
                 %button.dropdown-menu-toggle.js-due-date-select{ type: 'button', data: { toggle: 'dropdown', field_name: "#{issuable.to_ability_name}[due_date]", ability_name: issuable.to_ability_name, issue_update: issuable_json_path(issuable) } }
                   %span.dropdown-toggle-text Due date
-                  = icon('chevron-down')
+                  = icon('chevron-down', 'aria-hidden': 'true')
                 .dropdown-menu.dropdown-menu-due-date
                   = dropdown_title('Due date')
                   = dropdown_content do
@@ -111,28 +118,28 @@
         - selected_labels = issuable.labels
         .block.labels
           .sidebar-collapsed-icon.js-sidebar-labels-tooltip{ title: issuable_labels_tooltip(issuable.labels_array), data: { placement: "left", container: "body" } }
-            = icon('tags')
+            = icon('tags', 'aria-hidden': 'true')
             %span
               = selected_labels.size
           .title.hide-collapsed
             Labels
-            = icon('spinner spin', class: 'block-loading')
+            = icon('spinner spin', class: 'hidden block-loading', 'aria-hidden': 'true')
             - if can_edit_issuable
               = link_to 'Edit', '#', class: 'edit-link pull-right'
           .value.issuable-show-labels.hide-collapsed{ class: ("has-labels" if selected_labels.any?) }
             - if selected_labels.any?
               - selected_labels.each do |label|
-                = link_to_label(label, type: issuable.to_ability_name)
+                = link_to_label(label, subject: issuable.project, type: issuable.to_ability_name)
             - else
               %span.no-value None
           .selectbox.hide-collapsed
             - selected_labels.each do |label|
               = hidden_field_tag "#{issuable.to_ability_name}[label_names][]", label.id, id: nil
             .dropdown
-              %button.dropdown-menu-toggle.js-label-select.js-multiselect.js-label-sidebar-dropdown{type: "button", data: {toggle: "dropdown", default_label: "Labels", field_name: "#{issuable.to_ability_name}[label_names][]", ability_name: issuable.to_ability_name, show_no: "true", show_any: "true", namespace_path: @project.try(:namespace).try(:path), project_path: @project.try(:path), issue_update: issuable_json_path(issuable), labels: (namespace_project_labels_path(@project.namespace, @project, :json) if @project)}}
-                %span.dropdown-toggle-text{ class: ("is-default" if selected_labels.empty?)}
+              %button.dropdown-menu-toggle.js-label-select.js-multiselect.js-label-sidebar-dropdown{ type: "button", data: {toggle: "dropdown", default_label: "Labels", field_name: "#{issuable.to_ability_name}[label_names][]", ability_name: issuable.to_ability_name, show_no: "true", show_any: "true", namespace_path: @project.try(:namespace).try(:path), project_path: @project.try(:path), issue_update: issuable_json_path(issuable), labels: (namespace_project_labels_path(@project.namespace, @project, :json) if @project) } }
+                %span.dropdown-toggle-text{ class: ("is-default" if selected_labels.empty?) }
                   = multi_label_name(selected_labels, "Labels")
-                = icon('chevron-down')
+                = icon('chevron-down', 'aria-hidden': 'true')
               .dropdown-menu.dropdown-select.dropdown-menu-paging.dropdown-menu-labels.dropdown-menu-selectable
                 = render partial: "shared/issuable/label_page_default"
                 - if can? current_user, :admin_label, @project and @project
@@ -140,36 +147,33 @@
 
       = render "shared/issuable/participants", participants: issuable.participants(current_user)
       - if current_user
-        - subscribed = issuable.subscribed?(current_user)
-        .block.light.subscription{data: {url: toggle_subscription_path(issuable)}}
+        - subscribed = issuable.subscribed?(current_user, @project)
+        .block.light.subscription{ data: { url: toggle_subscription_path(issuable) } }
           .sidebar-collapsed-icon
-            = icon('rss')
-          .title.hide-collapsed
+            = icon('rss', 'aria-hidden': 'true')
+          %span.issuable-header-text.hide-collapsed.pull-left
             Notifications
           - subscribtion_status = subscribed ? 'subscribed' : 'unsubscribed'
-          %button.btn.btn-block.btn-default.js-subscribe-button.issuable-subscribe-button.hide-collapsed{ type: "button" }
+          %button.btn.btn-default.pull-right.js-subscribe-button.issuable-subscribe-button.hide-collapsed{ type: "button" }
             %span= subscribed ? 'Unsubscribe' : 'Subscribe'
-          .subscription-status.hide-collapsed{data: {status: subscribtion_status}}
-            .unsubscribed{class: ( 'hidden' if subscribed )}
-              You're not receiving notifications from this thread.
-            .subscribed{class: ( 'hidden' unless subscribed )}
-              You're receiving notifications because you're subscribed to this thread.
 
       - project_ref = cross_project_reference(@project, issuable)
       .block.project-reference
         .sidebar-collapsed-icon.dont-change-state
-          = clipboard_button(clipboard_text: project_ref)
+          = clipboard_button(clipboard_text: project_ref, title: "Copy reference to clipboard", placement: "left")
         .cross-project-reference.hide-collapsed
           %span
             Reference:
-            %cite{title: project_ref}
+            %cite{ title: project_ref }
               = project_ref
-          = clipboard_button(clipboard_text: project_ref)
+          = clipboard_button(clipboard_text: project_ref, title: "Copy reference to clipboard", placement: "left")
 
     :javascript
-      new MilestoneSelect('{"namespace":"#{@project.namespace.path}","path":"#{@project.path}"}');
+      gl.IssuableResource = new gl.SubbableResource('#{issuable_json_path(issuable)}');
+      new gl.IssuableTimeTracking("#{escape_javascript(serialize_issuable(issuable))}");
+      new MilestoneSelect('{"full_path":"#{@project.full_path}"}');
       new LabelsSelect();
       new IssuableContext('#{escape_javascript(current_user.to_json(only: [:username, :id, :name]))}');
-      new Subscription('.subscription')
+      gl.Subscription.bindAll('.subscription');
       new gl.DueDateSelectors();
-      sidebar = new Sidebar();
+      window.sidebar = new Sidebar();
diff --git a/app/views/shared/issuable/_sidebar_todo.html.haml b/app/views/shared/issuable/_sidebar_todo.html.haml
new file mode 100644
index 00000000000..574e2958ae8
--- /dev/null
+++ b/app/views/shared/issuable/_sidebar_todo.html.haml
@@ -0,0 +1,15 @@
+- is_collapsed = local_assigns.fetch(:is_collapsed, false)
+- mark_content = is_collapsed ? icon('check-square', class: 'todo-undone') : 'Mark done'
+- todo_content = is_collapsed ? icon('plus-square') : 'Add todo'
+
+%button.issuable-todo-btn.js-issuable-todo{ type: 'button',
+  class: (is_collapsed ? 'btn-blank sidebar-collapsed-icon dont-change-state has-tooltip' : 'btn btn-default issuable-header-btn pull-right'),
+  title: (todo.nil? ? 'Add todo' : 'Mark done'),
+  'aria-label' => (todo.nil? ? 'Add todo' : 'Mark done'),
+  data: issuable_todo_button_data(issuable, todo, is_collapsed) }
+  %span.issuable-todo-inner.js-issuable-todo-inner<
+    - if todo
+      = mark_content
+    - else
+      = todo_content
+  = icon('spin spinner', 'aria-hidden': 'true')
diff --git a/app/views/shared/issuable/form/_branch_chooser.html.haml b/app/views/shared/issuable/form/_branch_chooser.html.haml
new file mode 100644
index 00000000000..2793e7bcff4
--- /dev/null
+++ b/app/views/shared/issuable/form/_branch_chooser.html.haml
@@ -0,0 +1,21 @@
+- issuable = local_assigns.fetch(:issuable)
+- form = local_assigns.fetch(:form)
+
+- return unless issuable.is_a?(MergeRequest)
+- return if issuable.closed_without_fork?
+
+%hr
+- if issuable.new_record?
+  .form-group
+    = form.label :source_branch, class: 'control-label'
+    .col-sm-10
+      .issuable-form-select-holder
+        = form.select(:source_branch, [issuable.source_branch], {}, { class: 'source_branch select2 span2', disabled: true })
+.form-group
+  = form.label :target_branch, class: 'control-label'
+  .col-sm-10
+    .issuable-form-select-holder
+      = form.select(:target_branch, issuable.target_branches, { include_blank: true }, { class: 'target_branch select2 span2', disabled: issuable.new_record?, data: { placeholder: "Select branch" }})
+    - if issuable.new_record?
+      &nbsp;
+      = link_to 'Change branches', mr_change_branches_path(issuable)
diff --git a/app/views/shared/issuable/form/_description.html.haml b/app/views/shared/issuable/form/_description.html.haml
new file mode 100644
index 00000000000..dbace9ce401
--- /dev/null
+++ b/app/views/shared/issuable/form/_description.html.haml
@@ -0,0 +1,15 @@
+- issuable = local_assigns.fetch(:issuable)
+- form = local_assigns.fetch(:form)
+
+.form-group.detail-page-description
+  = form.label :description, 'Description', class: 'control-label'
+  .col-sm-10
+
+    = render layout: 'projects/md_preview', locals: { preview_class: "md-preview", referenced_users: true } do
+      = render 'projects/zen', f: form, attr: :description,
+                               classes: 'note-textarea',
+                               placeholder: "Write a comment or drag your files here...",
+                               supports_slash_commands: !issuable.persisted?
+      = render 'projects/notes/hints', supports_slash_commands: !issuable.persisted?
+      .clearfix
+      .error-alert
diff --git a/app/views/shared/issuable/form/_merge_params.html.haml b/app/views/shared/issuable/form/_merge_params.html.haml
new file mode 100644
index 00000000000..03309722326
--- /dev/null
+++ b/app/views/shared/issuable/form/_merge_params.html.haml
@@ -0,0 +1,16 @@
+- issuable = local_assigns.fetch(:issuable)
+
+- return unless issuable.is_a?(MergeRequest)
+- return if issuable.closed_without_fork?
+
+-# This check is duplicated below, to avoid conflicts with EE.
+- return unless issuable.can_remove_source_branch?(current_user)
+
+.form-group
+  .col-sm-10.col-sm-offset-2
+    - if issuable.can_remove_source_branch?(current_user)
+      .checkbox
+        = label_tag 'merge_request[force_remove_source_branch]' do
+          = hidden_field_tag 'merge_request[force_remove_source_branch]', '0', id: nil
+          = check_box_tag 'merge_request[force_remove_source_branch]', '1', issuable.force_remove_source_branch?
+          Remove source branch when merge request is accepted.
diff --git a/app/views/shared/issuable/form/_metadata.html.haml b/app/views/shared/issuable/form/_metadata.html.haml
new file mode 100644
index 00000000000..9dbfedb84f1
--- /dev/null
+++ b/app/views/shared/issuable/form/_metadata.html.haml
@@ -0,0 +1,38 @@
+- issuable = local_assigns.fetch(:issuable)
+
+- return unless can?(current_user, :"admin_#{issuable.to_ability_name}", issuable.project)
+
+- has_due_date = issuable.has_attribute?(:due_date)
+- has_labels = @labels && @labels.any?
+- form = local_assigns.fetch(:form)
+
+%hr
+.row
+  %div{ class: (has_due_date ? "col-lg-6" : "col-sm-12") }
+    .form-group.issue-assignee
+      = form.label :assignee_id, "Assignee", class: "control-label #{"col-lg-4" if has_due_date}"
+      .col-sm-10{ class: ("col-lg-8" if has_due_date) }
+        .issuable-form-select-holder
+          = form.hidden_field :assignee_id
+          = dropdown_tag(user_dropdown_label(issuable.assignee_id, "Assignee"), options: { toggle_class: "js-dropdown-keep-input js-user-search js-issuable-form-dropdown js-assignee-search", title: "Select assignee", filter: true, dropdown_class: "dropdown-menu-user dropdown-menu-selectable dropdown-menu-assignee js-filter-submit",
+            placeholder: "Search assignee", data: { first_user: current_user.try(:username), null_user: true, current_user: true, project_id: issuable.project.try(:id), selected: issuable.assignee_id, field_name: "#{issuable.class.model_name.param_key}[assignee_id]", default_label: "Assignee"} })
+        = link_to 'Assign to me', '#', class: "assign-to-me-link #{'hide' if issuable.assignee_id == current_user.id}"
+    .form-group.issue-milestone
+      = form.label :milestone_id, "Milestone", class: "control-label #{"col-lg-4" if has_due_date}"
+      .col-sm-10{ class: ("col-lg-8" if has_due_date) }
+        .issuable-form-select-holder
+          = render "shared/issuable/milestone_dropdown", selected: issuable.milestone, name: "#{issuable.class.model_name.param_key}[milestone_id]", show_any: false, show_upcoming: false, show_started: false, extra_class: "js-issuable-form-dropdown js-dropdown-keep-input", dropdown_title: "Select milestone"
+    .form-group
+      - has_labels = @labels && @labels.any?
+      = form.label :label_ids, "Labels", class: "control-label #{"col-lg-4" if has_due_date}"
+      = form.hidden_field :label_ids, multiple: true, value: ''
+      .col-sm-10{ class: "#{"col-lg-8" if has_due_date} #{'issuable-form-padding-top' if !has_labels}" }
+        .issuable-form-select-holder
+          = render "shared/issuable/label_dropdown", classes: ["js-issuable-form-dropdown"], selected: issuable.labels, data_options: { field_name: "#{issuable.class.model_name.param_key}[label_ids][]", show_any: false}, dropdown_title: "Select label"
+  - if has_due_date
+    .col-lg-6
+      .form-group
+        = form.label :due_date, "Due date", class: "control-label"
+        .col-sm-10
+          .issuable-form-select-holder
+            = form.text_field :due_date, id: "issuable-due-date", class: "datepicker form-control", placeholder: "Select due date"
diff --git a/app/views/shared/issuable/form/_template_selector.html.haml b/app/views/shared/issuable/form/_template_selector.html.haml
new file mode 100644
index 00000000000..d613bd31d81
--- /dev/null
+++ b/app/views/shared/issuable/form/_template_selector.html.haml
@@ -0,0 +1,13 @@
+- issuable = local_assigns.fetch(:issuable, nil)
+
+- return unless issuable && issuable_templates(issuable).any?
+
+.col-sm-3.col-lg-2
+  .js-issuable-selector-wrap{ data: { issuable_type: issuable.to_ability_name } }
+    = template_dropdown_tag(issuable) do
+      %ul.dropdown-footer-list
+        %li
+          %a.no-template
+            No template
+          %a.reset-template
+            Reset template
diff --git a/app/views/shared/issuable/form/_title.html.haml b/app/views/shared/issuable/form/_title.html.haml
new file mode 100644
index 00000000000..64826d41d60
--- /dev/null
+++ b/app/views/shared/issuable/form/_title.html.haml
@@ -0,0 +1,36 @@
+- issuable = local_assigns.fetch(:issuable)
+- has_wip_commits = local_assigns.fetch(:has_wip_commits)
+- form = local_assigns.fetch(:form)
+- no_issuable_templates = issuable_templates(issuable).empty?
+- div_class = no_issuable_templates ? 'col-sm-10' : 'col-sm-7 col-lg-8'
+
+%div{ class: div_class }
+  = form.text_field :title, required: true, maxlength: 255, autofocus: true,
+      autocomplete: 'off', class: 'form-control pad'
+
+  - if issuable.respond_to?(:work_in_progress?)
+    %p.help-block
+      .js-wip-explanation
+        %a.js-toggle-wip{ href: '', tabindex: -1 }
+          Remove the
+          %code WIP:
+          prefix from the title
+        to allow this
+        %strong Work In Progress
+        merge request to be merged when it's ready.
+      .js-no-wip-explanation
+        - if has_wip_commits
+          It looks like you have some WIP commits in this branch.
+          %br
+        %a.js-toggle-wip{ href: '', tabindex: -1 }
+          Start the title with
+          %code WIP:
+        to prevent a
+        %strong Work In Progress
+        merge request from being merged before it's ready.
+
+  - if no_issuable_templates && can?(current_user, :push_code, issuable.project)
+    %p.help-block
+      Add
+      = link_to 'description templates', help_page_path('user/project/description_templates'), tabindex: -1
+      to help your contributors communicate effectively!
diff --git a/app/views/shared/members/_access_request_buttons.html.haml b/app/views/shared/members/_access_request_buttons.html.haml
index eff914398bb..fb795ad1c72 100644
--- a/app/views/shared/members/_access_request_buttons.html.haml
+++ b/app/views/shared/members/_access_request_buttons.html.haml
@@ -1,10 +1,17 @@
-- if can?(current_user, :request_access, source)
-  - if requester = source.requesters.find_by(user_id: current_user.id)
+- model_name = source.model_name.to_s.downcase
+
+.project-action-button.inline
+  - if can?(current_user, :"destroy_#{model_name}_member", source.members.find_by(user_id: current_user.id))
+    = link_to "Leave #{model_name}", polymorphic_path([:leave, source, :members]),
+              method: :delete,
+              data: { confirm: leave_confirmation_message(source) },
+              class: 'btn'
+  - elsif requester = source.requesters.find_by(user_id: current_user.id)
     = link_to 'Withdraw Access Request', polymorphic_path([:leave, source, :members]),
               method: :delete,
               data: { confirm: remove_member_message(requester) },
               class: 'btn'
-  - else
+  - elsif source.request_access_enabled && can?(current_user, :request_access, source)
     = link_to 'Request Access', polymorphic_path([:request_access, source, :members]),
               method: :post,
               class: 'btn'
diff --git a/app/views/shared/members/_group.html.haml b/app/views/shared/members/_group.html.haml
index 1c0346bbc78..1d5a61cffce 100644
--- a/app/views/shared/members/_group.html.haml
+++ b/app/views/shared/members/_group.html.haml
@@ -1,11 +1,12 @@
 - group_link = local_assigns[:group_link]
 - group = group_link.group
 - can_admin_member = can?(current_user, :admin_project_member, @project)
-%li.member.group_member{ id: "group_member_#{group_link.id}" }
-  %span{ class: "list-item-name" }
+- dom_id = "group_member_#{group_link.id}"
+%li.member.group_member{ id: dom_id }
+  %span.list-item-name
     = image_tag group_icon(group), class: "avatar s40", alt: ''
     %strong
-      = link_to group.name, group_path(group)
+      = link_to group.full_name, group_path(group)
     .cgray
       Joined #{time_ago_with_tooltip(group.created_at)}
       - if group_link.expires?
@@ -14,13 +15,28 @@
           Expires in #{distance_of_time_in_words_to_now(group_link.expires_at)}
   .controls.member-controls
     = form_tag namespace_project_group_link_path(@project.namespace, @project, group_link), method: :put, remote: true, class: 'form-horizontal js-edit-member-form' do
-      = select_tag 'group_link[group_access]', options_for_select(ProjectGroupLink.access_options, group_link.group_access), class: 'form-control member-form-control append-right-5 js-member-update-control', id: "member_access_level_#{group.id}", disabled: !can_admin_member
+      = hidden_field_tag "group_link[group_access]", group_link.group_access
+      .member-form-control.dropdown.append-right-5
+        %button.dropdown-menu-toggle.js-member-permissions-dropdown{ type: "button",
+          disabled: !can_admin_member,
+          data: { toggle: "dropdown", field_name: "group_link[group_access]" } }
+          %span.dropdown-toggle-text
+            = group_link.human_access
+          = icon("chevron-down")
+        .dropdown-menu.dropdown-select.dropdown-menu-align-right.dropdown-menu-selectable
+          = dropdown_title("Change permissions")
+          .dropdown-content
+            %ul
+              - Gitlab::Access.options.each do |role, role_id|
+                %li
+                  = link_to role, "javascript:void(0)",
+                    class: ("is-active" if group_link.group_access == role_id),
+                    data: { id: role_id, el_id: dom_id }
       .prepend-left-5.clearable-input.member-form-control
         = text_field_tag 'group_link[expires_at]', group_link.expires_at, class: 'form-control js-access-expiration-date js-member-update-control', placeholder: 'Expiration date', id: "member_expires_at_#{group.id}", disabled: !can_admin_member
         %i.clear-icon.js-clear-input
     - if can_admin_member
       = link_to namespace_project_group_link_path(@project.namespace, @project, group_link),
-        remote: true,
         method: :delete,
         data: { confirm: "Are you sure you want to remove #{group.name}?" },
         class: 'btn btn-remove prepend-left-10' do
diff --git a/app/views/shared/members/_member.html.haml b/app/views/shared/members/_member.html.haml
index 432047a1c4e..a5aa768b1b2 100644
--- a/app/views/shared/members/_member.html.haml
+++ b/app/views/shared/members/_member.html.haml
@@ -19,9 +19,9 @@
         %label.label.label-danger
           %strong Blocked
 
-      - if source.instance_of?(Group) && !@group
-        = link_to source, class: "member-group-link prepend-left-5" do
-          = "· #{source.name}"
+      - if source.instance_of?(Group) && source != @group
+        &middot;
+        = link_to source.full_name, source, class: "member-group-link"
 
       .hidden-xs.cgray
         - if member.request?
@@ -31,7 +31,7 @@
           Joined #{time_ago_with_tooltip(member.created_at)}
         - if member.expires?
           ·
-          %span{ class: ('text-warning' if member.expires_soon?) }
+          %span{ class: "#{"text-warning" if member.expires_soon?} has-tooltip", title: member.expires_at.to_time.in_time_zone.to_s(:medium) }
             Expires in #{distance_of_time_in_words_to_now(member.expires_at)}
 
     - else
@@ -44,13 +44,30 @@
           = link_to member.created_by.name, user_path(member.created_by)
         = time_ago_with_tooltip(member.created_at)
   - if show_roles
+    - current_resource = @project || @group
     .controls.member-controls
-      - if show_controls
-        - if user != current_user
+      - if show_controls && member.source == current_resource
+        - if user != current_user && can_admin_member
           = form_for member, remote: true, html: { class: 'form-horizontal js-edit-member-form' } do |f|
-            = f.select :access_level, options_for_select(member.class.access_level_roles, member.access_level), {}, class: 'form-control member-form-control append-right-5 js-member-update-control', id: "member_access_level_#{member.id}", disabled: !can_admin_member
+            = f.hidden_field :access_level
+            .member-form-control.dropdown.append-right-5
+              %button.dropdown-menu-toggle.js-member-permissions-dropdown{ type: "button",
+                disabled: !can_admin_member,
+                data: { toggle: "dropdown", field_name: "#{f.object_name}[access_level]" } }
+                %span.dropdown-toggle-text
+                  = member.human_access
+                = icon("chevron-down")
+              .dropdown-menu.dropdown-select.dropdown-menu-align-right.dropdown-menu-selectable
+                = dropdown_title("Change permissions")
+                .dropdown-content
+                  %ul
+                    - member.class.access_level_roles.each do |role, role_id|
+                      %li
+                        = link_to role, "javascript:void(0)",
+                          class: ("is-active" if member.access_level == role_id),
+                          data: { id: role_id, el_id: dom_id(member) }
             .prepend-left-5.clearable-input.member-form-control
-              = f.text_field :expires_at, class: 'form-control js-access-expiration-date js-member-update-control', placeholder: 'Expiration date', id: "member_expires_at_#{member.id}", disabled: !can_admin_member
+              = f.text_field :expires_at, class: 'form-control js-access-expiration-date js-member-update-control', placeholder: 'Expiration date', id: "member_expires_at_#{member.id}", disabled: !can_admin_member, data: { el_id: dom_id(member) }
               %i.clear-icon.js-clear-input
         - else
           %span.member-access-text= member.human_access
diff --git a/app/views/shared/members/_sort_dropdown.html.haml b/app/views/shared/members/_sort_dropdown.html.haml
new file mode 100644
index 00000000000..bad0891f9f2
--- /dev/null
+++ b/app/views/shared/members/_sort_dropdown.html.haml
@@ -0,0 +1,9 @@
+.dropdown.inline.member-sort-dropdown
+  = dropdown_toggle(member_sort_options_hash[@sort], { toggle: 'dropdown' })
+  %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-selectable
+    %li.dropdown-header
+      Sort by
+    - member_sort_options_hash.each do |value, title|
+      %li
+        = link_to filter_group_project_member_path(sort: value), class: ("is-active" if @sort == value) do
+          = title
diff --git a/app/views/shared/milestones/_form_dates.html.haml b/app/views/shared/milestones/_form_dates.html.haml
new file mode 100644
index 00000000000..ed94773ef89
--- /dev/null
+++ b/app/views/shared/milestones/_form_dates.html.haml
@@ -0,0 +1,12 @@
+.col-md-6
+  .form-group
+    = f.label :start_date, "Start Date", class: "control-label"
+    .col-sm-10
+      = f.text_field :start_date, class: "datepicker form-control", placeholder: "Select start date"
+      %a.inline.prepend-top-5.js-clear-start-date{ href: "#" } Clear start date
+.col-md-6
+  .form-group
+    = f.label :due_date, "Due Date", class: "control-label"
+    .col-sm-10
+      = f.text_field :due_date, class: "datepicker form-control", placeholder: "Select due date"
+      %a.inline.prepend-top-5.js-clear-due-date{ href: "#" } Clear due date
diff --git a/app/views/shared/milestones/_issuable.html.haml b/app/views/shared/milestones/_issuable.html.haml
index 9e1b0379428..4c7d69d40d5 100644
--- a/app/views/shared/milestones/_issuable.html.haml
+++ b/app/views/shared/milestones/_issuable.html.haml
@@ -5,7 +5,7 @@
 - base_url_args = [project.namespace.becomes(Namespace), project, issuable_type]
 - can_update = can?(current_user, :"update_#{issuable.to_ability_name}", issuable)
 
-%li{ id: dom_id(issuable, 'sortable'),  class: "issuable-row #{'ui-sort-disabled' unless can_update}", 'data-iid' => issuable.iid, 'data-url' => polymorphic_path(issuable) }
+%li{ id: dom_id(issuable, 'sortable'),  class: "issuable-row #{'is-disabled' unless can_update}", 'data-iid' => issuable.iid, 'data-id' => issuable.id, 'data-url' => polymorphic_path(issuable) }
   %span
     - if show_project_name
       %strong #{project.name} &middot;
@@ -14,15 +14,15 @@
     - if issuable.is_a?(Issue)
       = confidential_icon(issuable)
     = link_to_gfm issuable.title, [project.namespace.becomes(Namespace), project, issuable], title: issuable.title
-  %div{class: 'issuable-detail'}
+  .issuable-detail
     = link_to [project.namespace.becomes(Namespace), project, issuable] do
-      %span{ class: 'issuable-number' }>= issuable.to_reference
+      %span.issuable-number= issuable.to_reference
 
     - issuable.labels.each do |label|
       = link_to polymorphic_path(base_url_args, { milestone_title: @milestone.title, label_name: label.title, state: 'all' }) do
         - render_colored_label(label)
 
-    %span{ class: "assignee-icon" }
+    %span.assignee-icon
       - if assignee
         = link_to polymorphic_path(base_url_args, { milestone_title: @milestone.title, assignee_id: issuable.assignee_id, state: 'all' }),
                   class: 'has-tooltip', title: "Assigned to #{assignee.name}", data: { container: 'body' } do
diff --git a/app/views/shared/milestones/_issuables.html.haml b/app/views/shared/milestones/_issuables.html.haml
index 8619939dde7..8af3bd597c5 100644
--- a/app/views/shared/milestones/_issuables.html.haml
+++ b/app/views/shared/milestones/_issuables.html.haml
@@ -4,13 +4,15 @@
 
 .panel{ class: panel_class }
   .panel-heading
-    = title
+    .title
+      = title
     - if show_counter
-      .pull-right= issuables.size
+      .counter
+        = number_with_delimiter(issuables.size)
 
   - class_prefix = dom_class(issuables).pluralize
   %ul{ class: "well-list #{class_prefix}-sortable-list", id: "#{class_prefix}-list-#{id}", "data-state" => id }
     = render partial: 'shared/milestones/issuable',
-             collection: issuables.sort_by(&:position),
+             collection: issuables.order_position_asc,
              as: :issuable,
              locals: { show_project_name: show_project_name, show_full_project_name: show_full_project_name }
diff --git a/app/views/shared/milestones/_milestone.html.haml b/app/views/shared/milestones/_milestone.html.haml
index 3dccfb147bf..9e6a76e1ddb 100644
--- a/app/views/shared/milestones/_milestone.html.haml
+++ b/app/views/shared/milestones/_milestone.html.haml
@@ -1,7 +1,7 @@
 - dashboard = local_assigns[:dashboard]
 - custom_dom_id = dom_id(@project ? milestone : milestone.milestones.first)
 
-%li{class: "milestone milestone-#{milestone.closed? ? 'closed' : 'open'}", id: custom_dom_id }
+%li{ class: "milestone milestone-#{milestone.closed? ? 'closed' : 'open'}", id: custom_dom_id }
   .row
     .col-sm-6
       %strong= link_to_gfm truncate(milestone.title, length: 100), milestone_path
@@ -9,7 +9,7 @@
       .pull-right.light #{milestone.percent_complete(current_user)}% complete
   .row
     .col-sm-6
-      = link_to pluralize(milestone.issues_visible_to_user(current_user).size, 'Issue'), issues_path
+      = link_to pluralize(milestone.total_issues_count(current_user), 'Issue'), issues_path
       &middot;
       = link_to pluralize(milestone.merge_requests.size, 'Merge Request'), merge_requests_path
     .col-sm-6= milestone_progress_bar(milestone)
diff --git a/app/views/shared/milestones/_sidebar.html.haml b/app/views/shared/milestones/_sidebar.html.haml
new file mode 100644
index 00000000000..2810f1377b2
--- /dev/null
+++ b/app/views/shared/milestones/_sidebar.html.haml
@@ -0,0 +1,131 @@
+- affix_offset = local_assigns.fetch(:affix_offset, "102")
+- project = local_assigns[:project]
+
+%aside.right-sidebar.js-right-sidebar{ data: { "offset-top" => affix_offset, "spy" => "affix" }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' }
+  .issuable-sidebar.milestone-sidebar
+    .block.milestone-progress.issuable-sidebar-header
+      %a.gutter-toggle.pull-right.js-sidebar-toggle{ role: "button", href: "#", "aria-label" => "Toggle sidebar" }
+        = sidebar_gutter_toggle_icon
+
+      .sidebar-collapsed-icon
+        %span== #{milestone.percent_complete(current_user)}%
+        = milestone_progress_bar(milestone)
+      .title.hide-collapsed
+        %strong.bold== #{milestone.percent_complete(current_user)}%
+        %span.hide-collapsed
+          complete
+      .value.hide-collapsed
+        = milestone_progress_bar(milestone)
+
+    .block.start_date.hide-collapsed
+      .title
+        Start date
+        - if @project && can?(current_user, :admin_milestone, @project)
+          = link_to 'Edit', edit_namespace_project_milestone_path(@project.namespace, @project, @milestone), class: 'edit-link pull-right'
+      .value
+        %span.value-content
+          - if milestone.start_date
+            %span.bold= milestone.start_date.to_s(:medium)
+          - else
+            %span.no-value No start date
+
+    .block.due_date
+      .sidebar-collapsed-icon
+        = icon('calendar', 'aria-hidden': 'true')
+        %span.collapsed-milestone-date
+          - if milestone.start_date && milestone.due_date
+            - if milestone.start_date.year == milestone.due_date.year
+              .milestone-date= milestone.start_date.strftime('%b %-d')
+            - else
+              .milestone-date= milestone.start_date.strftime('%b %-d %Y')
+            .date-separator -
+            .due_date= milestone.due_date.strftime('%b %-d %Y')
+          - elsif milestone.start_date
+            From
+            .milestone-date= milestone.start_date.strftime('%b %-d %Y')
+          - elsif milestone.due_date
+            Until
+            .milestone-date= milestone.due_date.strftime('%b %-d %Y')
+          - else
+            None
+      .title.hide-collapsed
+        Due date
+        - if @project && can?(current_user, :admin_milestone, @project)
+          = link_to 'Edit', edit_namespace_project_milestone_path(@project.namespace, @project, @milestone), class: 'edit-link pull-right'
+      .value.hide-collapsed
+        %span.value-content
+          - if milestone.due_date
+            %span.bold= milestone.due_date.to_s(:medium)
+          - else
+            %span.no-value No due date
+        - remaining_days = milestone_remaining_days(milestone)
+        - if remaining_days.present?
+          = surround '(', ')' do
+            %span.remaining-days= remaining_days
+
+    - if !project || can?(current_user, :read_issue, project)
+      .block
+        .sidebar-collapsed-icon
+          %strong
+            = icon('hashtag', 'aria-hidden': 'true')
+          %span= milestone.issues_visible_to_user(current_user).count
+        .title.hide-collapsed
+          Issues
+          %span.badge= milestone.issues_visible_to_user(current_user).count
+          - if project && can?(current_user, :create_issue, project)
+            = link_to new_namespace_project_issue_path(project.namespace, project, issue: { milestone_id: milestone.id }), class: "pull-right", title: "New Issue" do
+              New issue
+        .value.hide-collapsed.bold
+          %span.milestone-stat
+            = link_to milestones_browse_issuables_path(milestone, type: :issues) do
+              Open:
+              = milestone.issues_visible_to_user(current_user).opened.count
+          %span.milestone-stat
+            = link_to milestones_browse_issuables_path(milestone, type: :issues, state: 'closed') do
+              Closed:
+              = milestone.issues_visible_to_user(current_user).closed.count
+
+    .block
+      .sidebar-collapsed-icon
+        %strong
+          = icon('exclamation', 'aria-hidden': 'true')
+        %span= milestone.issues_visible_to_user(current_user).count
+      .title.hide-collapsed
+        Merge requests
+        %span.badge= milestone.merge_requests.count
+      .value.hide-collapsed.bold
+        - if !project || can?(current_user, :read_merge_request, project)
+          %span.milestone-stat
+            = link_to milestones_browse_issuables_path(milestone, type: :merge_requests) do
+              Open:
+              = milestone.merge_requests.opened.count
+          %span.milestone-stat
+            = link_to milestones_browse_issuables_path(milestone, type: :merge_requests, state: 'closed') do
+              Closed:
+              = milestone.merge_requests.closed.count
+          %span.milestone-stat
+            = link_to milestones_browse_issuables_path(milestone, type: :merge_requests, state: 'merged') do
+              Merged:
+              = milestone.merge_requests.merged.count
+        - else
+          %span.milestone-stat
+            Open:
+            = milestone.merge_requests.opened.count
+          %span.milestone-stat
+            Closed:
+            = milestone.merge_requests.closed.count
+          %span.milestone-stat
+            Merged:
+            = milestone.merge_requests.merged.count
+
+    - milestone_ref = milestone.try(:to_reference, full: true)
+    - if milestone_ref.present?
+      .block.reference
+        .sidebar-collapsed-icon.dont-change-state
+          = clipboard_button(clipboard_text: milestone_ref, title: "Copy reference to clipboard", placement: "left")
+        .cross-project-reference.hide-collapsed
+          %span
+            Reference:
+            %cite{ title: milestone_ref }
+              = milestone_ref
+          = clipboard_button(clipboard_text: milestone_ref, title: "Copy reference to clipboard", placement: "left")
diff --git a/app/views/shared/milestones/_summary.html.haml b/app/views/shared/milestones/_summary.html.haml
deleted file mode 100644
index dee2472fa79..00000000000
--- a/app/views/shared/milestones/_summary.html.haml
+++ /dev/null
@@ -1,34 +0,0 @@
-- project = local_assigns[:project]
-
-.context.prepend-top-default
-  .milestone-summary
-    %h4 Progress
-    %strong= milestone.issues_visible_to_user(current_user).size
-    issues:
-    %span.milestone-stat
-      %strong= milestone.issues_visible_to_user(current_user).opened.size
-      open and
-      %strong= milestone.issues_visible_to_user(current_user).closed.size
-      closed
-    %strong= milestone.merge_requests.size
-    merge requests:
-    %span.milestone-stat
-      %strong= milestone.merge_requests.opened.size
-      open and
-      %strong= milestone.merge_requests.merged.size
-      merged
-    %span.milestone-stat
-      %strong== #{milestone.percent_complete(current_user)}%
-      complete
-
-    %span.milestone-stat
-      %span.remaining-days= milestone_remaining_days(milestone)
-    %span.pull-right.tab-issues-buttons
-      - if project && can?(current_user, :create_issue, project)
-        = link_to new_namespace_project_issue_path(project.namespace, project, issue: { milestone_id: milestone.id }), class: "btn  btn-grouped", title: "New Issue" do
-          New Issue
-      = link_to 'Browse Issues', milestones_browse_issuables_path(milestone, type: :issues), class: "btn btn-grouped"
-    %span.pull-right.tab-merge-requests-buttons.hidden
-      = link_to 'Browse Merge Requests', milestones_browse_issuables_path(milestone, type: :merge_requests), class: "btn btn-grouped"
-
-  = milestone_progress_bar(milestone)
diff --git a/app/views/shared/milestones/_tabs.html.haml b/app/views/shared/milestones/_tabs.html.haml
index 2b6ce2d7e7a..9a4502873ef 100644
--- a/app/views/shared/milestones/_tabs.html.haml
+++ b/app/views/shared/milestones/_tabs.html.haml
@@ -1,29 +1,42 @@
-%ul.nav-links.no-top.no-bottom
-  %li.active
-    = link_to '#tab-issues', 'data-toggle' => 'tab', 'data-show' => '.tab-issues-buttons' do
-      Issues
-      %span.badge= milestone.issues_visible_to_user(current_user).size
-  %li
-    = link_to '#tab-merge-requests', 'data-toggle' => 'tab', 'data-show' => '.tab-merge-requests-buttons' do
-      Merge Requests
-      %span.badge= milestone.merge_requests.size
-  %li
-    = link_to '#tab-participants', 'data-toggle' => 'tab' do
-      Participants
-      %span.badge= milestone.participants.count
-  %li
-    = link_to '#tab-labels', 'data-toggle' => 'tab' do
-      Labels
-      %span.badge= milestone.labels.count
+.scrolling-tabs-container.inner-page-scroll-tabs.is-smaller
+  .fade-left= icon('angle-left')
+  .fade-right= icon('angle-right')
+  %ul.nav-links.scrolling-tabs
+    - if milestone.is_a?(GlobalMilestone) || can?(current_user, :read_issue, @project)
+      %li.active
+        = link_to '#tab-issues', 'data-toggle' => 'tab', 'data-show' => '.tab-issues-buttons' do
+          Issues
+          %span.badge= milestone.issues_visible_to_user(current_user).size
+      %li
+        = link_to '#tab-merge-requests', 'data-toggle' => 'tab', 'data-show' => '.tab-merge-requests-buttons' do
+          Merge Requests
+          %span.badge= milestone.merge_requests.size
+    - else
+      %li.active
+        = link_to '#tab-merge-requests', 'data-toggle' => 'tab', 'data-show' => '.tab-merge-requests-buttons' do
+          Merge Requests
+          %span.badge= milestone.merge_requests.size
+    %li
+      = link_to '#tab-participants', 'data-toggle' => 'tab' do
+        Participants
+        %span.badge= milestone.participants.count
+    %li
+      = link_to '#tab-labels', 'data-toggle' => 'tab' do
+        Labels
+        %span.badge= milestone.labels.count
 
 - show_project_name = local_assigns.fetch(:show_project_name, false)
 - show_full_project_name = local_assigns.fetch(:show_full_project_name, false)
 
 .tab-content.milestone-content
-  .tab-pane.active#tab-issues
-    = render 'shared/milestones/issues_tab', issues: milestone.issues_visible_to_user(current_user), show_project_name: show_project_name, show_full_project_name: show_full_project_name
-  .tab-pane#tab-merge-requests
-    = render 'shared/milestones/merge_requests_tab', merge_requests: milestone.merge_requests, show_project_name: show_project_name, show_full_project_name: show_full_project_name
+  - if milestone.is_a?(GlobalMilestone) || can?(current_user, :read_issue, @project)
+    .tab-pane.active#tab-issues
+      = render 'shared/milestones/issues_tab', issues: milestone.issues_visible_to_user(current_user).include_associations, show_project_name: show_project_name, show_full_project_name: show_full_project_name
+    .tab-pane#tab-merge-requests
+      = render 'shared/milestones/merge_requests_tab', merge_requests: milestone.merge_requests, show_project_name: show_project_name, show_full_project_name: show_full_project_name
+  - else
+    .tab-pane.active#tab-merge-requests
+      = render 'shared/milestones/merge_requests_tab', merge_requests: milestone.merge_requests, show_project_name: show_project_name, show_full_project_name: show_full_project_name
   .tab-pane#tab-participants
     = render 'shared/milestones/participants_tab', users: milestone.participants
   .tab-pane#tab-labels
diff --git a/app/views/shared/milestones/_top.html.haml b/app/views/shared/milestones/_top.html.haml
index 548215243db..2562f085338 100644
--- a/app/views/shared/milestones/_top.html.haml
+++ b/app/views/shared/milestones/_top.html.haml
@@ -3,6 +3,9 @@
 - group = local_assigns[:group]
 
 .detail-page-header
+  %a.btn.btn-default.btn-grouped.pull-right.visible-xs-block.js-sidebar-toggle{ href: "#" }
+    = icon('angle-double-left')
+
   .status-box{ class: "status-box-#{milestone.closed? ? 'closed' : 'open'}" }
     - if milestone.closed?
       Closed
@@ -12,10 +15,10 @@
       Open
   %span.identifier
     Milestone #{milestone.title}
-  - if milestone.expires_at
+  - if milestone.due_date || milestone.start_date
     %span.creator
       &middot;
-      = milestone.expires_at
+      = milestone_date_range(milestone)
   - if group
     .pull-right
       - if can?(current_user, :admin_milestones, group)
diff --git a/app/views/shared/notifications/_button.html.haml b/app/views/shared/notifications/_button.html.haml
index feaa5570c21..1d072c16b32 100644
--- a/app/views/shared/notifications/_button.html.haml
+++ b/app/views/shared/notifications/_button.html.haml
@@ -1,6 +1,5 @@
-- left_align = local_assigns[:left_align]
 - if notification_setting
-  .dropdown.notification-dropdown.pull-right
+  .js-notification-dropdown.notification-dropdown.project-action-button.dropdown.inline
     = form_for notification_setting, remote: true, html: { class: "inline notification-form" } do |f|
       = hidden_setting_source_input(notification_setting)
       = f.hidden_field :level, class: "notification_setting_level"
@@ -19,7 +18,7 @@
               = notification_title(notification_setting.level)
               = icon("caret-down")
 
-          = render "shared/notifications/notification_dropdown", notification_setting: notification_setting, left_align: left_align
+          = render "shared/notifications/notification_dropdown", notification_setting: notification_setting
 
           = content_for :scripts_body do
             = render "shared/notifications/custom_notifications", notification_setting: notification_setting
diff --git a/app/views/shared/notifications/_custom_notifications.html.haml b/app/views/shared/notifications/_custom_notifications.html.haml
index b704981e3db..a736bfd91e2 100644
--- a/app/views/shared/notifications/_custom_notifications.html.haml
+++ b/app/views/shared/notifications/_custom_notifications.html.haml
@@ -18,7 +18,7 @@
                 %p
                   Custom notification levels are the same as participating levels. With custom notification levels you will also receive notifications for select events. To find out more, check out
                   = succeed "." do
-                    %a{ href: "http://docs.gitlab.com/ce/workflow/notifications.html", target: "_blank"} notification emails
+                    %a{ href: help_page_path('workflow/notifications'), target: "_blank" } notification emails
               .col-lg-8
                 - NotificationSetting::EMAIL_EVENTS.each_with_index do |event, index|
                   - field_id = "#{notifications_menu_identifier("modal", notification_setting)}_notification_setting[#{event}]"
@@ -27,5 +27,5 @@
                       %label{ for: field_id }
                         = check_box("notification_setting", event, id: field_id, class: "js-custom-notification-event", checked: notification_setting.events[event])
                         %strong
-                          = event.to_s.humanize
+                          = notification_event_name(event)
                           = icon("spinner spin", class: "custom-notification-event-loading")
diff --git a/app/views/shared/notifications/_notification_dropdown.html.haml b/app/views/shared/notifications/_notification_dropdown.html.haml
index d3258ee64cb..85ad74f9a39 100644
--- a/app/views/shared/notifications/_notification_dropdown.html.haml
+++ b/app/views/shared/notifications/_notification_dropdown.html.haml
@@ -1,5 +1,4 @@
-- left_align = local_assigns[:left_align]
-%ul.dropdown-menu.dropdown-menu-no-wrap.dropdown-menu-selectable.dropdown-menu-large{ role: "menu", class: [notifications_menu_identifier("dropdown", notification_setting), ("dropdown-menu-align-right" unless left_align)] }
+%ul.dropdown-menu.dropdown-menu-no-wrap.dropdown-menu-selectable.dropdown-menu-large{ role: "menu", class: [notifications_menu_identifier("dropdown", notification_setting)] }
   - NotificationSetting.levels.each_key do |level|
     - next if level == "custom"
     - next if level == "global" && notification_setting.source.nil?
diff --git a/app/views/shared/projects/_dropdown.html.haml b/app/views/shared/projects/_dropdown.html.haml
index b7f8551153b..2d25b8aad62 100644
--- a/app/views/shared/projects/_dropdown.html.haml
+++ b/app/views/shared/projects/_dropdown.html.haml
@@ -1,8 +1,5 @@
 - @sort ||= sort_value_recently_updated
-- personal = params[:personal]
-- archived = params[:archived]
-- namespace_id = params[:namespace_id]
-.dropdown.inline
+.dropdown
   - toggle_text = projects_sort_options_hash[@sort]
   = dropdown_toggle(toggle_text, { toggle: 'dropdown' }, { id: 'sort-projects-dropdown' })
   %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-selectable
@@ -10,21 +7,32 @@
       Sort by
     - projects_sort_options_hash.each do |value, title|
       %li
-        = link_to filter_projects_path(namespace_id: namespace_id, sort: value, archived: archived, personal: personal), class: ("is-active" if @sort == value) do
+        = link_to filter_projects_path(sort: value), class: ("is-active" if @sort == value) do
           = title
 
     %li.divider
     %li
-      = link_to filter_projects_path(namespace_id: namespace_id, sort: @sort, archived: nil), class: ("is-active" unless params[:archived].present?) do
+      = link_to filter_projects_path(archived: nil), class: ("is-active" unless params[:archived].present?) do
         Hide archived projects
     %li
-      = link_to filter_projects_path(namespace_id: namespace_id, sort: @sort, archived: true), class: ("is-active" if params[:archived].present?) do
+      = link_to filter_projects_path(archived: true), class: ("is-active" if params[:archived].present?) do
         Show archived projects
     - if current_user
       %li.divider
       %li
-        = link_to filter_projects_path(namespace_id: namespace_id, sort: @sort, personal: nil), class: ("is-active" unless personal.present?) do
+        = link_to filter_projects_path(personal: nil), class: ("is-active" unless params[:personal].present?) do
           Owned by anyone
       %li
-        = link_to filter_projects_path(namespace_id: namespace_id, sort: @sort, personal: true), class: ("is-active" if personal.present?) do
+        = link_to filter_projects_path(personal: true), class: ("is-active" if params[:personal].present?) do
           Owned by me
+      - if @group && @group.shared_projects.present?
+        %li.divider
+        %li
+          = link_to filter_projects_path(shared: nil), class: ("is-active" unless params[:shared].present?) do
+            All projects
+        %li
+          = link_to filter_projects_path(shared: 0), class: ("is-active" if params[:shared] == '0') do
+            Hide shared projects
+        %li
+          = link_to filter_projects_path(shared: 1), class: ("is-active" if params[:shared] == '1') do
+            Hide group projects
diff --git a/app/views/shared/projects/_list.html.haml b/app/views/shared/projects/_list.html.haml
index 3a9dd37dc7d..c0699b13719 100644
--- a/app/views/shared/projects/_list.html.haml
+++ b/app/views/shared/projects/_list.html.haml
@@ -8,9 +8,9 @@
 - show_last_commit_as_description = false unless local_assigns[:show_last_commit_as_description] == true
 - remote = false unless local_assigns[:remote] == true
 
-.projects-list-holder
+.js-projects-list-holder
   - if projects.any?
-    %ul.projects-list.content-list
+    %ul.projects-list
       - projects.each_with_index do |project, i|
         - css_class = (i >= projects_limit) ? 'hide' : nil
         = render "shared/projects/project", project: project, skip_namespace: skip_namespace,
@@ -25,6 +25,3 @@
     = paginate(projects, remote: remote, theme: "gitlab") if projects.respond_to? :total_pages
   - else
     .nothing-here-block No projects found
-
-:javascript
-  ProjectsList.init();
diff --git a/app/views/shared/projects/_project.html.haml b/app/views/shared/projects/_project.html.haml
index 264391fe84f..761f0b606b5 100644
--- a/app/views/shared/projects/_project.html.haml
+++ b/app/views/shared/projects/_project.html.haml
@@ -6,49 +6,48 @@
 - css_class = '' unless local_assigns[:css_class]
 - show_last_commit_as_description = false unless local_assigns[:show_last_commit_as_description] == true && project.commit
 - css_class += " no-description" if project.description.blank? && !show_last_commit_as_description
-- cache_key = [project.namespace, project, controller.controller_name, controller.action_name, current_application_settings, 'v2.3']
-- cache_key.push(project.commit.status) if project.commit.try(:status)
+- cache_key = project_list_cache_key(project)
 
 %li.project-row{ class: css_class }
   = cache(cache_key) do
+    - if avatar
+      .avatar-container.s40
+        - if use_creator_avatar
+          = image_tag avatar_icon(project.creator.email, 40), class: "avatar s40", alt:''
+        - else
+          = project_icon(project, alt: '', class: 'avatar project-avatar s40')
+    .project-details
+      %h3.prepend-top-0.append-bottom-0
+        = link_to project_path(project), class: dom_class(project) do
+          %span.project-full-name
+            %span.namespace-name
+              - if project.namespace && !skip_namespace
+                = project.namespace.human_name
+                \/
+            %span.project-name
+              = project.name
+
+      - if show_last_commit_as_description
+        .description.prepend-top-5
+          = link_to_gfm project.commit.title, namespace_project_commit_path(project.namespace, project, project.commit),
+            class: "commit-row-message"
+      - elsif project.description.present?
+        .description.prepend-top-5
+          = markdown_field(project, :description)
+
     .controls
       - if project.archived
-        %span.label.label-warning archived
-      - if project.commit.try(:status)
-        %span
-          = render_commit_status(project.commit)
+        %span.prepend-left-10.label.label-warning archived
+      - if project.pipeline_status.has_status?
+        %span.prepend-left-10
+          = render_project_pipeline_status(project.pipeline_status)
       - if forks
-        %span
+        %span.prepend-left-10
           = icon('code-fork')
           = number_with_delimiter(project.forks_count)
       - if stars
-        %span
+        %span.prepend-left-10
           = icon('star')
           = number_with_delimiter(project.star_count)
-      %span.visibility-icon.has-tooltip{data: { container: 'body', placement: 'left' }, title: visibility_icon_description(project)}
+      %span.prepend-left-10.visibility-icon.has-tooltip{ data: { container: 'body', placement: 'left' }, title: visibility_icon_description(project) }
         = visibility_level_icon(project.visibility_level, fw: true)
-
-    .title
-      = link_to project_path(project), class: dom_class(project) do
-        - if avatar
-          .dash-project-avatar
-            .avatar-container.s40
-              - if use_creator_avatar
-                = image_tag avatar_icon(project.creator.email, 40), class: "avatar s40", alt:''
-              - else
-                = project_icon(project, alt: '', class: 'avatar project-avatar s40')
-        %span.project-full-name
-          %span.namespace-name
-            - if project.namespace && !skip_namespace
-              = project.namespace.human_name
-              \/
-          %span.project-name.filter-title
-            = project.name
-
-    - if show_last_commit_as_description
-      .description
-        = link_to_gfm project.commit.title, namespace_project_commit_path(project.namespace, project, project.commit),
-          class: "commit-row-message"
-    - elsif project.description.present?
-      .description
-        = markdown_field(project, :description)
diff --git a/app/views/shared/projects/_search_form.html.haml b/app/views/shared/projects/_search_form.html.haml
new file mode 100644
index 00000000000..b89194bcc67
--- /dev/null
+++ b/app/views/shared/projects/_search_form.html.haml
@@ -0,0 +1,23 @@
+= form_tag filter_projects_path, method: :get, class: 'project-filter-form', id: 'project-filter-form' do |f|
+  = search_field_tag :name, params[:name],
+    placeholder: 'Filter by name...',
+    class: 'project-filter-form-field form-control input-short js-projects-list-filter',
+    spellcheck: false,
+    id: 'project-filter-form-field',
+    tabindex: "2",
+    autofocus: local_assigns[:autofocus]
+
+  - if local_assigns[:icon]
+    = icon("search", class: "search-icon")
+
+  - if params[:sort].present?
+    = hidden_field_tag :sort, params[:sort]
+
+  - if params[:personal].present?
+    = hidden_field_tag :personal, params[:personal]
+
+  - if params[:archived].present?
+    = hidden_field_tag :archived, params[:archived]
+
+  - if params[:visibility_level].present?
+    = hidden_field_tag :visibility_level, params[:visibility_level]
diff --git a/app/views/shared/projects/blob/_branch_page_create.html.haml b/app/views/shared/projects/blob/_branch_page_create.html.haml
new file mode 100644
index 00000000000..c279a0d8846
--- /dev/null
+++ b/app/views/shared/projects/blob/_branch_page_create.html.haml
@@ -0,0 +1,8 @@
+.dropdown-page-two.dropdown-new-branch
+  = dropdown_title('Create new branch', back: true)
+  = dropdown_content do
+    %input#new_branch_name.default-dropdown-input.append-bottom-10{ type: "text", placeholder: "Name new branch" }
+      %button.btn.btn-primary.pull-left.js-new-branch-btn{ type: "button" }
+        Create
+      %button.btn.btn-default.pull-right.js-cancel-branch-btn{ type: "button" }
+        Cancel
diff --git a/app/views/shared/projects/blob/_branch_page_default.html.haml b/app/views/shared/projects/blob/_branch_page_default.html.haml
new file mode 100644
index 00000000000..9bf78d10878
--- /dev/null
+++ b/app/views/shared/projects/blob/_branch_page_default.html.haml
@@ -0,0 +1,10 @@
+.dropdown-page-one
+  = dropdown_title "Select branch"
+  = dropdown_filter "Search branches"
+  = dropdown_content
+  = dropdown_loading
+  = dropdown_footer do
+    %ul.dropdown-footer-list
+      %li
+        %a.create-new-branch.dropdown-toggle-page{ href: "#" }
+          Create new branch
diff --git a/app/views/shared/snippets/_blob.html.haml b/app/views/shared/snippets/_blob.html.haml
index dcdba01aee9..74f71e6cbd1 100644
--- a/app/views/shared/snippets/_blob.html.haml
+++ b/app/views/shared/snippets/_blob.html.haml
@@ -1,7 +1,25 @@
-- unless @snippet.content.empty?
+.js-file-title.file-title-flex-parent
+  .file-header-content
+    = blob_icon @snippet.mode, @snippet.path
+
+    %strong.file-title-name
+      = @snippet.path
+
+    = copy_file_path_button(@snippet.path)
+
+  .file-actions.hidden-xs
+    .btn-group{ role: "group" }<
+      = copy_blob_content_button(@snippet)
+      = open_raw_file_button(raw_path)
+
+      - if defined?(download_path) && download_path
+        = link_to icon('download'), download_path, class: "btn btn-sm has-tooltip", title: 'Download', data: { container: 'body' }
+
+- if @snippet.content.empty?
+  .file-content.code
+    .nothing-here-block Empty file
+- else
   - if markup?(@snippet.file_name)
-    %textarea.markdown-snippet-copy.blob-content{data: {blob_id: @snippet.id}}
-      = @snippet.content
     .file-content.wiki
       - if gitlab_markdown?(@snippet.file_name)
         = preserve(markdown_field(@snippet, :content))
@@ -9,6 +27,3 @@
         = render_markup(@snippet.file_name, @snippet.content)
   - else
     = render 'shared/file_highlight', blob: @snippet
-- else
-  .file-content.code
-    .nothing-here-block Empty file
diff --git a/app/views/shared/snippets/_form.html.haml b/app/views/shared/snippets/_form.html.haml
index 0c788032020..0296597b294 100644
--- a/app/views/shared/snippets/_form.html.haml
+++ b/app/views/shared/snippets/_form.html.haml
@@ -1,9 +1,9 @@
 - content_for :page_specific_javascripts do
   = page_specific_javascript_tag('lib/ace.js')
-  = page_specific_javascript_tag('snippet/snippet_bundle.js')
+  = page_specific_javascript_bundle_tag('snippet')
 
 .snippet-form-holder
-  = form_for @snippet, url: url, html: { class: "form-horizontal snippet-form js-requires-input" } do |f|
+  = form_for @snippet, url: url, html: { class: "form-horizontal snippet-form js-requires-input js-quick-submit" } do |f|
     = form_errors(@snippet)
 
     .form-group
@@ -11,14 +11,14 @@
       .col-sm-10
         = f.text_field :title, class: 'form-control', required: true, autofocus: true
 
-    = render 'shared/visibility_level', f: f, visibility_level: visibility_level, can_change_visibility_level: true, form_model: @snippet
+    = render 'shared/visibility_level', f: f, visibility_level: @snippet.visibility_level, can_change_visibility_level: true, form_model: @snippet
 
     .file-editor
       .form-group
         = f.label :file_name, "File", class: 'control-label'
         .col-sm-10
           .file-holder.snippet
-            .file-title
+            .js-file-title.file-title
               = f.text_field :file_name, placeholder: "Optionally name this file to add code highlighting, e.g. example.rb for Ruby.", class: 'form-control snippet-file-name'
             .file-content.code
               %pre#editor= @snippet.content
@@ -34,4 +34,3 @@
         = link_to "Cancel", namespace_project_snippets_path(@project.namespace, @project), class: "btn btn-cancel"
       - else
         = link_to "Cancel", snippets_path(@project), class: "btn btn-cancel"
-
diff --git a/app/views/shared/snippets/_header.html.haml b/app/views/shared/snippets/_header.html.haml
index d7506e07ff6..d084f5e9684 100644
--- a/app/views/shared/snippets/_header.html.haml
+++ b/app/views/shared/snippets/_header.html.haml
@@ -8,10 +8,6 @@
   %span.creator
     authored
     = time_ago_with_tooltip(@snippet.created_at, placement: 'bottom', html_class: 'snippet_updated_ago')
-    - if @snippet.updated_at != @snippet.created_at
-      %span
-        = icon('edit', title: 'edited')
-        = time_ago_with_tooltip(@snippet.updated_at, placement: 'bottom', html_class: 'snippet_edited_ago')
     by #{link_to_member(@project, @snippet.author, size: 24, author_class: "author item-title", avatar_class: "hidden-xs")}
 
   .snippet-actions
@@ -20,5 +16,9 @@
     - else
       = render "snippets/actions"
 
-%h2.snippet-title.prepend-top-0.append-bottom-0
-  = markdown_field(@snippet, :title)
+.snippet-header
+  %h2.snippet-title.prepend-top-0.append-bottom-0
+    = markdown_field(@snippet, :title)
+
+  - if @snippet.updated_at != @snippet.created_at
+    = edited_time_ago_with_tooltip(@snippet, placement: 'bottom', html_class: 'snippet-edited-ago')
diff --git a/app/views/shared/snippets/_snippet.html.haml b/app/views/shared/snippets/_snippet.html.haml
index ea17bec8677..5d2d2317f22 100644
--- a/app/views/shared/snippets/_snippet.html.haml
+++ b/app/views/shared/snippets/_snippet.html.haml
@@ -1,17 +1,16 @@
+- link_project = local_assigns.fetch(:link_project, false)
+
 %li.snippet-row
   = image_tag avatar_icon(snippet.author_email), class: "avatar s40 hidden-xs", alt: ''
 
   .title
     = link_to reliable_snippet_path(snippet) do
       = snippet.title
-      - if snippet.private?
-        %span.label.label-gray.hidden-xs
-          = icon('lock')
-          private
-    %span.monospace.pull-right.hidden-xs
-      = snippet.file_name
+    - if snippet.file_name
+      %span.snippet-filename.monospace.hidden-xs
+        = snippet.file_name
 
-    %ul.controls.visible-xs
+    %ul.controls
       %li
         - note_count = snippet.notes.user.count
         = link_to reliable_snippet_path(snippet, anchor: 'notes'), class: ('no-comments' if note_count.zero?) do
@@ -22,11 +21,17 @@
           = visibility_level_label(snippet.visibility_level)
         = visibility_level_icon(snippet.visibility_level, fw: false)
 
-  %small.pull-right.cgray.hidden-xs
-    - if snippet.project_id?
-      = link_to snippet.project.name_with_namespace, namespace_project_path(snippet.project.namespace, snippet.project)
-
-  .snippet-info.hidden-xs
+  .snippet-info
+    #{snippet.to_reference} &middot;
+    authored #{time_ago_with_tooltip(snippet.created_at, placement: 'bottom', html_class: 'snippet-created-ago')}
+    by
     = link_to user_snippets_path(snippet.author) do
       = snippet.author_name
-    authored #{time_ago_with_tooltip(snippet.created_at)}
+    - if link_project && snippet.project_id?
+      %span.hidden-xs
+        in
+        = link_to namespace_project_path(snippet.project.namespace, snippet.project) do
+          = snippet.project.name_with_namespace
+
+    .pull-right.snippet-updated-at
+      %span updated #{time_ago_with_tooltip(snippet.updated_at, placement: 'bottom')}
diff --git a/app/views/shared/tokens/_scopes_form.html.haml b/app/views/shared/tokens/_scopes_form.html.haml
new file mode 100644
index 00000000000..8bbaf431536
--- /dev/null
+++ b/app/views/shared/tokens/_scopes_form.html.haml
@@ -0,0 +1,9 @@
+- scopes = local_assigns.fetch(:scopes)
+- prefix = local_assigns.fetch(:prefix)
+- token = local_assigns.fetch(:token)
+
+- scopes.each do |scope|
+  %fieldset
+    = check_box_tag "#{prefix}[scopes][]", scope, token.scopes.include?(scope), id: "#{prefix}_scopes_#{scope}"
+    = label_tag ("#{prefix}_scopes_#{scope}"), scope
+    %span= t(scope, scope: [:doorkeeper, :scopes])
diff --git a/app/views/shared/tokens/_scopes_list.html.haml b/app/views/shared/tokens/_scopes_list.html.haml
new file mode 100644
index 00000000000..f99e905e95c
--- /dev/null
+++ b/app/views/shared/tokens/_scopes_list.html.haml
@@ -0,0 +1,13 @@
+- token = local_assigns.fetch(:token)
+
+- return unless token.scopes.present?
+
+%tr
+  %td
+    Scopes
+  %td
+    %ul.scopes-list.append-bottom-0
+      - token.scopes.each do |scope|
+        %li
+          %span.scope-name= scope
+          = "(#{t(scope, scope: [:doorkeeper, :scopes])})"
diff --git a/app/views/shared/web_hooks/_form.html.haml b/app/views/shared/web_hooks/_form.html.haml
index 5d659eb83a9..37e2a377a69 100644
--- a/app/views/shared/web_hooks/_form.html.haml
+++ b/app/views/shared/web_hooks/_form.html.haml
@@ -1,12 +1,9 @@
-- page_title "Webhooks"
-- context_title = @project ? 'project' : 'group'
-
 .row.prepend-top-default
   .col-lg-3
     %h4.prepend-top-0
       = page_title
     %p
-      #{link_to "Webhooks", help_page_path("web_hooks/web_hooks")} can be
+      #{link_to "Webhooks", help_page_path("user/project/integrations/webhooks")} can be
       used for binding events when something is happening within the project.
   .col-lg-9.append-bottom-default
     = form_for hook, as: :hook, url: polymorphic_path(url_components + [:hooks]) do |f|
@@ -69,9 +66,9 @@
             = f.check_box :build_events, class: 'pull-left'
             .prepend-left-20
               = f.label :build_events, class: 'list-label' do
-                %strong Build events
+                %strong Jobs events
               %p.light
-                This URL will be triggered when the build status changes
+                This URL will be triggered when the job status changes
           %li
             = f.check_box :pipeline_events, class: 'pull-left'
             .prepend-left-20
diff --git a/app/views/sherlock/file_samples/show.html.haml b/app/views/sherlock/file_samples/show.html.haml
index 94d4dd4fa7d..1a6e2542dc1 100644
--- a/app/views/sherlock/file_samples/show.html.haml
+++ b/app/views/sherlock/file_samples/show.html.haml
@@ -26,7 +26,7 @@
       = @file_sample.events
 
 %article.file-holder
-  .file-title
+  .js-file-title.file-title
     %i.fa.fa-file-text-o.fa-fw
     %strong
       = @file_sample.file
@@ -41,7 +41,7 @@
             %th= t('sherlock.percent')
         %tbody
           - @file_sample.line_samples.each_with_index do |sample, index|
-            %tr{class: sample.majority_of?(@file_sample.duration) ? 'slow' : ''}
+            %tr{ class: sample.majority_of?(@file_sample.duration) ? 'slow' : '' }
               %td= index + 1
               %td= sample.events
               %td
diff --git a/app/views/sherlock/queries/_general.html.haml b/app/views/sherlock/queries/_general.html.haml
index 7073c0f4d90..5a447f791dc 100644
--- a/app/views/sherlock/queries/_general.html.haml
+++ b/app/views/sherlock/queries/_general.html.haml
@@ -26,7 +26,7 @@
   .panel.panel-default
     .panel-heading
       .pull-right
-        %button.js-clipboard-trigger.btn.btn-xs{title: t('sherlock.copy_to_clipboard'), type: :button}
+        %button.js-clipboard-trigger.btn.btn-xs{ title: t('sherlock.copy_to_clipboard'), type: :button }
           %i.fa.fa-clipboard
         %pre.hidden
           = @query.formatted_query
@@ -41,7 +41,7 @@
   .panel.panel-default
     .panel-heading
       .pull-right
-        %button.js-clipboard-trigger.btn.btn-xs{title: t('sherlock.copy_to_clipboard'), type: :button}
+        %button.js-clipboard-trigger.btn.btn-xs{ title: t('sherlock.copy_to_clipboard'), type: :button }
           %i.fa.fa-clipboard
         %pre.hidden
           = @query.explain
diff --git a/app/views/sherlock/queries/show.html.haml b/app/views/sherlock/queries/show.html.haml
index fc2863dca8e..c45da6ee9a4 100644
--- a/app/views/sherlock/queries/show.html.haml
+++ b/app/views/sherlock/queries/show.html.haml
@@ -3,10 +3,10 @@
 
 %ul.nav-links
   %li.active
-    %a(href="#tab-general" data-toggle="tab")
+    %a{ href: "#tab-general", data: { toggle: "tab" } }
       = t('sherlock.general')
   %li
-    %a(href="#tab-backtrace" data-toggle="tab")
+    %a{ href: "#tab-backtrace", data: { toggle: "tab" } }
       = t('sherlock.backtrace')
 
 .row-content-block
diff --git a/app/views/sherlock/transactions/index.html.haml b/app/views/sherlock/transactions/index.html.haml
index da969c02765..bc05659dfa8 100644
--- a/app/views/sherlock/transactions/index.html.haml
+++ b/app/views/sherlock/transactions/index.html.haml
@@ -28,7 +28,7 @@
           %tr
             %td= trans.type
             %td
-              %span{title: trans.path}
+              %span{ title: trans.path }
                 = truncate(trans.path, length: 70)
             %td
               = trans.duration.round(2)
diff --git a/app/views/sherlock/transactions/show.html.haml b/app/views/sherlock/transactions/show.html.haml
index 8aa6b437d95..eab91e8fbe4 100644
--- a/app/views/sherlock/transactions/show.html.haml
+++ b/app/views/sherlock/transactions/show.html.haml
@@ -3,15 +3,15 @@
 
 %ul.nav-links
   %li.active
-    %a(href="#tab-general" data-toggle="tab")
+    %a{ href: "#tab-general", data: { toggle: "tab" } }
       = t('sherlock.general')
   %li
-    %a(href="#tab-queries" data-toggle="tab")
+    %a{ href: "#tab-queries", data: { toggle: "tab" } }
       = t('sherlock.queries')
       %span.badge
         #{@transaction.queries.length}
   %li
-    %a(href="#tab-file-samples" data-toggle="tab")
+    %a{ href: "#tab-file-samples", data: { toggle: "tab" } }
       = t('sherlock.file_samples')
       %span.badge
         #{@transaction.file_samples.length}
diff --git a/app/views/snippets/_actions.html.haml b/app/views/snippets/_actions.html.haml
index 1d0e549ed3d..a7f118d3f7d 100644
--- a/app/views/snippets/_actions.html.haml
+++ b/app/views/snippets/_actions.html.haml
@@ -1,28 +1,33 @@
+- return unless current_user
+
 .hidden-xs
-  - if current_user
-    = link_to new_snippet_path, class: "btn btn-grouped btn-create new-snippet-link", title: "New snippet" do
-      New snippet
-  - if can?(current_user, :admin_personal_snippet, @snippet)
-    = link_to snippet_path(@snippet), method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-grouped btn-danger", title: 'Delete Snippet' do
-      Delete
   - if can?(current_user, :update_personal_snippet, @snippet)
-    = link_to edit_snippet_path(@snippet), class: "btn btn-grouped snippable-edit" do
+    = link_to edit_snippet_path(@snippet), class: "btn btn-grouped" do
       Edit
-- if current_user
-  .visible-xs-block.dropdown
-    %button.btn.btn-default.btn-block.append-bottom-0.prepend-top-5{ data: { toggle: "dropdown" } }
-      Options
-      = icon('caret-down')
-    .dropdown-menu.dropdown-menu-full-width
-      %ul
+  - if can?(current_user, :admin_personal_snippet, @snippet)
+    = link_to snippet_path(@snippet), method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-grouped btn-inverted btn-remove", title: 'Delete Snippet' do
+      Delete
+  = link_to new_snippet_path, class: "btn btn-grouped btn-inverted btn-create", title: "New snippet" do
+    New snippet
+  - if @snippet.submittable_as_spam_by?(current_user)
+    = link_to 'Submit as spam', mark_as_spam_snippet_path(@snippet), method: :post, class: 'btn btn-grouped btn-spam', title: 'Submit as spam'
+.visible-xs-block.dropdown
+  %button.btn.btn-default.btn-block.append-bottom-0.prepend-top-5{ data: { toggle: "dropdown" } }
+    Options
+    = icon('caret-down')
+  .dropdown-menu.dropdown-menu-full-width
+    %ul
+      %li
+        = link_to new_snippet_path, title: "New snippet" do
+          New snippet
+      - if can?(current_user, :admin_personal_snippet, @snippet)
+        %li
+          = link_to snippet_path(@snippet), method: :delete, data: { confirm: "Are you sure?" }, title: 'Delete Snippet' do
+            Delete
+      - if can?(current_user, :update_personal_snippet, @snippet)
+        %li
+          = link_to edit_snippet_path(@snippet) do
+            Edit
+      - if @snippet.submittable_as_spam_by?(current_user)
         %li
-          = link_to new_snippet_path, title: "New snippet" do
-            New snippet
-        - if can?(current_user, :admin_personal_snippet, @snippet)
-          %li
-            = link_to snippet_path(@snippet), method: :delete, data: { confirm: "Are you sure?" }, title: 'Delete Snippet' do
-              Delete
-        - if can?(current_user, :update_personal_snippet, @snippet)
-          %li
-            = link_to edit_snippet_path(@snippet) do
-              Edit
+          = link_to 'Submit as spam', mark_as_spam_snippet_path(@snippet), method: :post
diff --git a/app/views/snippets/_snippets.html.haml b/app/views/snippets/_snippets.html.haml
index 77b66ca74b6..ac3701233ad 100644
--- a/app/views/snippets/_snippets.html.haml
+++ b/app/views/snippets/_snippets.html.haml
@@ -1,8 +1,9 @@
 - remote = local_assigns.fetch(:remote, false)
+- link_project = local_assigns.fetch(:link_project, false)
 
 .snippets-list-holder
   %ul.content-list
-    = render partial: 'shared/snippets/snippet', collection: @snippets
+    = render partial: 'shared/snippets/snippet', collection: @snippets, locals: { link_project: link_project }
     - if @snippets.empty?
       %li
         .nothing-here-block Nothing here.
diff --git a/app/views/snippets/_snippets_scope_menu.html.haml b/app/views/snippets/_snippets_scope_menu.html.haml
new file mode 100644
index 00000000000..8b6a98a054a
--- /dev/null
+++ b/app/views/snippets/_snippets_scope_menu.html.haml
@@ -0,0 +1,31 @@
+- subject = local_assigns.fetch(:subject, current_user)
+- include_private = local_assigns.fetch(:include_private, false)
+
+.nav-links.snippet-scope-menu
+  %li{ class: active_when(params[:scope].nil?) }
+    = link_to subject_snippets_path(subject) do
+      All
+      %span.badge
+        - if include_private
+          = subject.snippets.count
+        - else
+          = subject.snippets.public_and_internal.count
+
+  - if include_private
+    %li{ class: active_when(params[:scope] == "are_private") }
+      = link_to subject_snippets_path(subject, scope: 'are_private') do
+        Private
+        %span.badge
+          = subject.snippets.are_private.count
+
+  %li{ class: active_when(params[:scope] == "are_internal") }
+    = link_to subject_snippets_path(subject, scope: 'are_internal') do
+      Internal
+      %span.badge
+        = subject.snippets.are_internal.count
+
+  %li{ class: active_when(params[:scope] == "are_public") }
+    = link_to subject_snippets_path(subject, scope: 'are_public') do
+      Public
+      %span.badge
+        = subject.snippets.are_public.count
diff --git a/app/views/snippets/edit.html.haml b/app/views/snippets/edit.html.haml
index 82f44a9a5c3..915bf98eb3e 100644
--- a/app/views/snippets/edit.html.haml
+++ b/app/views/snippets/edit.html.haml
@@ -2,4 +2,4 @@
 %h3.page-title
   Edit Snippet
 %hr
-= render 'shared/snippets/form', url: snippet_path(@snippet), visibility_level: @snippet.visibility_level
+= render 'shared/snippets/form', url: snippet_path(@snippet)
diff --git a/app/views/snippets/new.html.haml b/app/views/snippets/new.html.haml
index 79e2392490d..ca8afb4bb6a 100644
--- a/app/views/snippets/new.html.haml
+++ b/app/views/snippets/new.html.haml
@@ -2,4 +2,4 @@
 %h3.page-title
   New Snippet
 %hr
-= render "shared/snippets/form", url: snippets_path(@snippet), visibility_level: default_snippet_visibility
+= render "shared/snippets/form", url: snippets_path(@snippet)
diff --git a/app/views/snippets/show.html.haml b/app/views/snippets/show.html.haml
index 27d7a6c5bb6..da9fb755a36 100644
--- a/app/views/snippets/show.html.haml
+++ b/app/views/snippets/show.html.haml
@@ -3,13 +3,7 @@
 = render 'shared/snippets/header'
 
 %article.file-holder.snippet-file-content
-  .file-title
-    = blob_icon 0, @snippet.file_name
-    = @snippet.file_name
-    .file-actions
-      = clipboard_button(clipboard_target: ".blob-content[data-blob-id='#{@snippet.id}']")
-      = link_to 'Raw', raw_snippet_path(@snippet), class: "btn btn-sm", target: "_blank"
-      = link_to 'Download', download_snippet_path(@snippet), class: "btn btn-sm"
-  = render 'shared/snippets/blob'
+  = render 'shared/snippets/blob', raw_path: raw_snippet_path(@snippet), download_path: download_snippet_path(@snippet)
 
-= render 'award_emoji/awards_block', awardable: @snippet, inline: true
\ No newline at end of file
+.row-content-block.top-block.content-component-block
+  = render 'award_emoji/awards_block', awardable: @snippet, inline: true
diff --git a/app/views/snippets/verify.html.haml b/app/views/snippets/verify.html.haml
new file mode 100644
index 00000000000..cb623ccab57
--- /dev/null
+++ b/app/views/snippets/verify.html.haml
@@ -0,0 +1,4 @@
+- form = [@snippet.becomes(Snippet)]
+
+= render 'layouts/recaptcha_verification', spammable: @snippet, form: form
+
diff --git a/app/views/u2f/_authenticate.html.haml b/app/views/u2f/_authenticate.html.haml
index 232ca26c1af..f878bece2fa 100644
--- a/app/views/u2f/_authenticate.html.haml
+++ b/app/views/u2f/_authenticate.html.haml
@@ -1,30 +1,21 @@
 #js-authenticate-u2f
+%a.btn.btn-block.btn-info#js-login-2fa-device{ href: '#' } Sign in via 2FA code
 
 %script#js-authenticate-u2f-not-supported{ type: "text/template" }
   %p Your browser doesn't support U2F. Please use Google Chrome desktop (version 41 or newer).
 
-%script#js-authenticate-u2f-setup{ type: "text/template" }
-  %div
-    %p Insert your security key (if you haven't already), and press the button below.
-    %a.btn.btn-info#js-login-u2f-device{ href: 'javascript:void(0)' } Sign in via U2F device
-
 %script#js-authenticate-u2f-in-progress{ type: "text/template" }
   %p Trying to communicate with your device. Plug it in (if you haven't already) and press the button on the device now.
 
 %script#js-authenticate-u2f-error{ type: "text/template" }
   %div
-    %p <%= error_message %>
-    %a.btn.btn-warning#js-u2f-try-again Try again?
+    %p <%= error_message %> (error code: <%= error_code %>)
+    %a.btn.btn-block.btn-warning#js-u2f-try-again Try again?
 
 %script#js-authenticate-u2f-authenticated{ type: "text/template" }
   %div
-    %p We heard back from your U2F device. Click this button to authenticate with the GitLab server.
-    = form_tag(new_user_session_path, method: :post) do |f|
+    %p We heard back from your U2F device. You have been authenticated.
+    = form_tag(new_user_session_path, method: :post, id: 'js-login-u2f-form') do |f|
       - resource_params = params[resource_name].presence || params
       = hidden_field_tag 'user[remember_me]', resource_params.fetch(:remember_me, 0)
       = hidden_field_tag 'user[device_response]', nil, class: 'form-control', required: true, id: "js-device-response"
-      = submit_tag "Authenticate via U2F Device", class: "btn btn-success"
-
-:javascript
-  var u2fAuthenticate = new U2FAuthenticate($("#js-authenticate-u2f"), gon.u2f);
-  u2fAuthenticate.start();
diff --git a/app/views/u2f/_register.html.haml b/app/views/u2f/_register.html.haml
index 8f7b42eb351..adc07bcba73 100644
--- a/app/views/u2f/_register.html.haml
+++ b/app/views/u2f/_register.html.haml
@@ -23,11 +23,11 @@
 %script#js-register-u2f-error{ type: "text/template" }
   %div
     %p
-      %span <%= error_message %>
+      %span <%= error_message %> (error code: <%= error_code %>)
     %a.btn.btn-warning#js-u2f-try-again Try again?
 
 %script#js-register-u2f-registered{ type: "text/template" }
-  %div.row.append-bottom-10
+  .row.append-bottom-10
     .col-md-12
       %p Your device was successfully set up! Give it a name and register it with the GitLab server.
       = form_tag(create_u2f_profile_two_factor_auth_path, method: :post) do
diff --git a/app/views/users/calendar.html.haml b/app/views/users/calendar.html.haml
index 09ff8a76d27..57b8845c55d 100644
--- a/app/views/users/calendar.html.haml
+++ b/app/views/users/calendar.html.haml
@@ -1,9 +1,9 @@
 .clearfix.calendar
   .js-contrib-calendar
   .calendar-hint
-    Summary of issues, merge requests, and push events
+    Summary of issues, merge requests, push events, and comments
 :javascript
   new Calendar(
     #{@activity_dates.to_json},
     '#{user_calendar_activities_path}'
-  );
\ No newline at end of file
+  );
diff --git a/app/views/users/calendar_activities.html.haml b/app/views/users/calendar_activities.html.haml
index f51599212db..d1e88274878 100644
--- a/app/views/users/calendar_activities.html.haml
+++ b/app/views/users/calendar_activities.html.haml
@@ -1,6 +1,6 @@
 %h4.prepend-top-20
   Contributions for
-  %strong #{@calendar_date.to_s(:short)}
+  %strong= @calendar_date.to_s(:short)
 
 - if @events.any?
   %ul.bordered-list
@@ -10,11 +10,17 @@
           %i.fa.fa-clock-o
           = event.created_at.to_s(:time)
         - if event.push?
-          #{event.action_name} #{event.ref_type} #{event.ref_name}
+          #{event.action_name} #{event.ref_type}
+          %strong
+            - commits_path = namespace_project_commits_path(event.project.namespace, event.project, event.ref_name)
+            = link_to_if event.project.repository.branch_exists?(event.ref_name), event.ref_name, commits_path
         - else
           = event_action_name(event)
-          - if event.target
-            %strong= link_to "#{event.target.to_reference}", [event.project.namespace.becomes(Namespace), event.project, event.target]
+          %strong
+            - if event.note?
+              = link_to event.note_target.to_reference, event_note_target_path(event), class: 'has-tooltip', title: event.target_title
+            - elsif event.target
+              = link_to event.target.to_reference, [event.project.namespace.becomes(Namespace), event.project, event.target], class: 'has-tooltip', title: event.target_title
 
         at
         %strong
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index 1e0752bd3c3..969ea7ab9e6 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -1,8 +1,8 @@
 - page_title       @user.name
 - page_description @user.bio
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_tag('lib/d3.js')
-  = page_specific_javascript_tag('users/users_bundle.js')
+  = page_specific_javascript_bundle_tag('common_d3')
+  = page_specific_javascript_bundle_tag('users')
 - header_title     @user.name, user_path(@user)
 - @no_container = true
 
@@ -13,28 +13,27 @@
   .cover-block.user-cover-block
     .cover-controls
       - if @user == current_user
-        = link_to profile_path, class: 'btn btn-gray' do
+        = link_to profile_path, class: 'btn btn-gray has-tooltip', title: 'Edit profile', 'aria-label': 'Edit profile' do
           = icon('pencil')
       - elsif current_user
         - if @user.abuse_report
           %button.btn.btn-danger{ title: 'Already reported for abuse',
-            data: { toggle: 'tooltip', placement: 'bottom', container: 'body' }}
+            data: { toggle: 'tooltip', placement: 'bottom', container: 'body' } }
             = icon('exclamation-circle')
         - else
           = link_to new_abuse_report_path(user_id: @user.id, ref_url: request.referrer), class: 'btn btn-gray',
-            title: 'Report abuse', data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
+            title: 'Report abuse', data: { toggle: 'tooltip', placement: 'bottom', container: 'body' } do
             = icon('exclamation-circle')
-      - if current_user
-        = link_to user_path(@user, :atom, { private_token: current_user.private_token }), class: 'btn btn-gray' do
-          = icon('rss')
-        - if current_user.admin?
-          = link_to [:admin, @user], class: 'btn btn-gray', title: 'View user in admin area',
-            data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
-            = icon('users')
+      = link_to user_path(@user, rss_url_options), class: 'btn btn-gray has-tooltip', title: 'Subscribe', 'aria-label': 'Subscribe' do
+        = icon('rss')
+      - if current_user && current_user.admin?
+        = link_to [:admin, @user], class: 'btn btn-gray', title: 'View user in admin area',
+          data: {toggle: 'tooltip', placement: 'bottom', container: 'body'} do
+          = icon('users')
 
     .profile-header
       .avatar-holder
-        = link_to avatar_icon(@user, 400), target: '_blank' do
+        = link_to avatar_icon(@user, 400), target: '_blank', rel: 'noopener noreferrer' do
           = image_tag avatar_icon(@user, 90), class: "avatar s90", alt: ''
 
       .user-info
@@ -45,7 +44,7 @@
           %span.middle-dot-divider
             @#{@user.username}
           %span.middle-dot-divider
-            Member since #{@user.created_at.to_s(:medium)}
+            Member since #{@user.created_at.to_date.to_s(:long)}
 
         .cover-desc
           - unless @user.public_email.blank?
@@ -80,46 +79,53 @@
         %p.profile-user-bio
           = @user.bio
 
-    %ul.nav-links.center.user-profile-nav
-      %li.js-activity-tab
-        = link_to user_path, data: {target: 'div#activity', action: 'activity', toggle: 'tab'} do
-          Activity
-      %li.js-groups-tab
-        = link_to user_groups_path, data: {target: 'div#groups', action: 'groups', toggle: 'tab'} do
-          Groups
-      %li.js-contributed-tab
-        = link_to user_contributed_projects_path, data: {target: 'div#contributed', action: 'contributed', toggle: 'tab'} do
-          Contributed projects
-      %li.js-projects-tab
-        = link_to user_projects_path, data: {target: 'div#projects', action: 'projects', toggle: 'tab'} do
-          Personal projects
-      %li.js-snippets-tab
-        = link_to user_snippets_path, data: {target: 'div#snippets', action: 'snippets', toggle: 'tab'} do
-          Snippets
+    .scrolling-tabs-container
+      .fade-left= icon('angle-left')
+      .fade-right= icon('angle-right')
+      %ul.nav-links.center.user-profile-nav.scrolling-tabs
+        %li.js-activity-tab
+          = link_to user_path, data: {target: 'div#activity', action: 'activity', toggle: 'tab'} do
+            Activity
+        %li.js-groups-tab
+          = link_to user_groups_path, data: {target: 'div#groups', action: 'groups', toggle: 'tab'} do
+            Groups
+        %li.js-contributed-tab
+          = link_to user_contributed_projects_path, data: {target: 'div#contributed', action: 'contributed', toggle: 'tab'} do
+            Contributed projects
+        %li.js-projects-tab
+          = link_to user_projects_path, data: {target: 'div#projects', action: 'projects', toggle: 'tab'} do
+            Personal projects
+        %li.js-snippets-tab
+          = link_to user_snippets_path, data: {target: 'div#snippets', action: 'snippets', toggle: 'tab'} do
+            Snippets
 
   %div{ class: container_class }
+    - if @user == current_user && !show_user_callout?
+      = render 'shared/user_callout'
     .tab-content
       #activity.tab-pane
         .row-content-block.calender-block.white.second-block.hidden-xs
-          .user-calendar{data: {href: user_calendar_path}}
+          .user-calendar{ data: { href: user_calendar_path } }
             %h4.center.light
               %i.fa.fa-spinner.fa-spin
           .user-calendar-activities
 
-        .content_list{ data: {href: user_path} }
+        %h4.prepend-top-20
+          Most Recent Activity
+        .content_list{ data: { href: user_path } }
         = spinner
 
       #groups.tab-pane
-        - # This tab is always loaded via AJAX
+        -# This tab is always loaded via AJAX
 
       #contributed.tab-pane
-        - # This tab is always loaded via AJAX
+        -# This tab is always loaded via AJAX
 
       #projects.tab-pane
-        - # This tab is always loaded via AJAX
+        -# This tab is always loaded via AJAX
 
       #snippets.tab-pane
-        - # This tab is always loaded via AJAX
+        -# This tab is always loaded via AJAX
 
     .loading-status
       = spinner
diff --git a/app/workers/authorized_projects_worker.rb b/app/workers/authorized_projects_worker.rb
new file mode 100644
index 00000000000..13207a8bc71
--- /dev/null
+++ b/app/workers/authorized_projects_worker.rb
@@ -0,0 +1,21 @@
+class AuthorizedProjectsWorker
+  include Sidekiq::Worker
+  include DedicatedSidekiqQueue
+
+  # Schedules multiple jobs and waits for them to be completed.
+  def self.bulk_perform_and_wait(args_list)
+    job_ids = bulk_perform_async(args_list)
+
+    Gitlab::JobWaiter.new(job_ids).wait
+  end
+
+  def self.bulk_perform_async(args_list)
+    Sidekiq::Client.push_bulk('class' => self, 'queue' => sidekiq_options['queue'], 'args' => args_list)
+  end
+
+  def perform(user_id)
+    user = User.find_by(id: user_id)
+
+    user&.refresh_authorized_projects
+  end
+end
diff --git a/app/workers/build_email_worker.rb b/app/workers/build_email_worker.rb
deleted file mode 100644
index 5fdb1f2baa0..00000000000
--- a/app/workers/build_email_worker.rb
+++ /dev/null
@@ -1,20 +0,0 @@
-class BuildEmailWorker
-  include Sidekiq::Worker
-  include BuildQueue
-
-  def perform(build_id, recipients, push_data)
-    recipients.each do |recipient|
-      begin
-        case push_data['build_status']
-        when 'success'
-          Notify.build_success_email(build_id, recipient).deliver_now
-        when 'failed'
-          Notify.build_fail_email(build_id, recipient).deliver_now
-        end
-      # These are input errors and won't be corrected even if Sidekiq retries
-      rescue Net::SMTPFatalError, Net::SMTPSyntaxError => e
-        logger.info("Failed to send e-mail for project '#{push_data['project_name']}' to #{recipient}: #{e}")
-      end
-    end
-  end
-end
diff --git a/app/workers/build_queue_worker.rb b/app/workers/build_queue_worker.rb
new file mode 100644
index 00000000000..fa9e097e40a
--- /dev/null
+++ b/app/workers/build_queue_worker.rb
@@ -0,0 +1,10 @@
+class BuildQueueWorker
+  include Sidekiq::Worker
+  include BuildQueue
+
+  def perform(build_id)
+    Ci::Build.find_by(id: build_id).try do |build|
+      Ci::UpdateBuildQueueService.new.execute(build)
+    end
+  end
+end
diff --git a/app/workers/build_success_worker.rb b/app/workers/build_success_worker.rb
index e0ad5268664..e17add7421f 100644
--- a/app/workers/build_success_worker.rb
+++ b/app/workers/build_success_worker.rb
@@ -4,15 +4,13 @@ class BuildSuccessWorker
 
   def perform(build_id)
     Ci::Build.find_by(id: build_id).try do |build|
-      create_deployment(build)
+      create_deployment(build) if build.has_environment?
     end
   end
 
   private
 
   def create_deployment(build)
-    return if build.environment.blank?
-
     service = CreateDeploymentService.new(
       build.project, build.user,
       environment: build.environment,
diff --git a/app/workers/delete_merged_branches_worker.rb b/app/workers/delete_merged_branches_worker.rb
new file mode 100644
index 00000000000..f870da4ecfd
--- /dev/null
+++ b/app/workers/delete_merged_branches_worker.rb
@@ -0,0 +1,20 @@
+class DeleteMergedBranchesWorker
+  include Sidekiq::Worker
+  include DedicatedSidekiqQueue
+
+  def perform(project_id, user_id)
+    begin
+      project = Project.find(project_id)
+    rescue ActiveRecord::RecordNotFound
+      return
+    end
+
+    user = User.find(user_id)
+
+    begin
+      DeleteMergedBranchesService.new(project, user).execute
+    rescue Gitlab::Access::AccessDeniedError
+      return
+    end
+  end
+end
diff --git a/app/workers/delete_user_worker.rb b/app/workers/delete_user_worker.rb
index 3194c389b3d..3340a7be4fe 100644
--- a/app/workers/delete_user_worker.rb
+++ b/app/workers/delete_user_worker.rb
@@ -6,6 +6,8 @@ class DeleteUserWorker
     delete_user  = User.find(delete_user_id)
     current_user = User.find(current_user_id)
 
-    DeleteUserService.new(current_user).execute(delete_user, options.symbolize_keys)
+    Users::DestroyService.new(current_user).execute(delete_user, options.symbolize_keys)
+  rescue Gitlab::Access::AccessDeniedError => e
+    Rails.logger.warn("User could not be destroyed: #{e}")
   end
 end
diff --git a/app/workers/emails_on_push_worker.rb b/app/workers/emails_on_push_worker.rb
index b9cd49985dc..f5ccc84c160 100644
--- a/app/workers/emails_on_push_worker.rb
+++ b/app/workers/emails_on_push_worker.rb
@@ -33,13 +33,15 @@ class EmailsOnPushWorker
     reverse_compare = false
 
     if action == :push
-      compare = CompareService.new.execute(project, after_sha, project, before_sha)
+      compare = CompareService.new(project, after_sha)
+        .execute(project, before_sha)
       diff_refs = compare.diff_refs
 
       return false if compare.same
 
       if compare.commits.empty?
-        compare = CompareService.new.execute(project, before_sha, project, after_sha)
+        compare = CompareService.new(project, before_sha)
+          .execute(project, after_sha)
         diff_refs = compare.diff_refs
 
         reverse_compare = true
diff --git a/app/workers/git_garbage_collect_worker.rb b/app/workers/git_garbage_collect_worker.rb
index 65f8093b5b0..d369b639ae9 100644
--- a/app/workers/git_garbage_collect_worker.rb
+++ b/app/workers/git_garbage_collect_worker.rb
@@ -1,17 +1,58 @@
 class GitGarbageCollectWorker
   include Sidekiq::Worker
-  include Gitlab::ShellAdapter
   include DedicatedSidekiqQueue
+  include Gitlab::CurrentSettings
 
   sidekiq_options retry: false
 
-  def perform(project_id)
+  def perform(project_id, task = :gc, lease_key = nil, lease_uuid = nil)
     project = Project.find(project_id)
+    task = task.to_sym
+
+    cmd = command(task)
+    repo_path = project.repository.path_to_repo
+    description = "'#{cmd.join(' ')}' in #{repo_path}"
+
+    Gitlab::GitLogger.info(description)
+
+    output, status = Gitlab::Popen.popen(cmd, repo_path)
+    Gitlab::GitLogger.error("#{description} failed:\n#{output}") unless status.zero?
 
-    gitlab_shell.gc(project.repository_storage_path, project.path_with_namespace)
     # Refresh the branch cache in case garbage collection caused a ref lookup to fail
+    flush_ref_caches(project) if task == :gc
+  ensure
+    Gitlab::ExclusiveLease.cancel(lease_key, lease_uuid) if lease_key.present? && lease_uuid.present?
+  end
+
+  private
+
+  def command(task)
+    case task
+    when :gc
+      git(write_bitmaps: bitmaps_enabled?) + %w[gc]
+    when :full_repack
+      git(write_bitmaps: bitmaps_enabled?) + %w[repack -A -d --pack-kept-objects]
+    when :incremental_repack
+      # Normal git repack fails when bitmaps are enabled. It is impossible to
+      # create a bitmap here anyway.
+      git(write_bitmaps: false) + %w[repack -d]
+    else
+      raise "Invalid gc task: #{task.inspect}"
+    end
+  end
+
+  def flush_ref_caches(project)
     project.repository.after_create_branch
     project.repository.branch_names
     project.repository.has_visible_content?
   end
+
+  def bitmaps_enabled?
+    current_application_settings.housekeeping_bitmaps_enabled
+  end
+
+  def git(write_bitmaps:)
+    config_value = write_bitmaps ? 'true' : 'false'
+    %W[git -c repack.writeBitmaps=#{config_value}]
+  end
 end
diff --git a/app/workers/group_destroy_worker.rb b/app/workers/group_destroy_worker.rb
index a49a5fd0855..07e82767b06 100644
--- a/app/workers/group_destroy_worker.rb
+++ b/app/workers/group_destroy_worker.rb
@@ -11,6 +11,6 @@ class GroupDestroyWorker
 
     user = User.find(user_id)
 
-    DestroyGroupService.new(group, user).execute
+    Groups::DestroyService.new(group, user).execute
   end
 end
diff --git a/app/workers/irker_worker.rb b/app/workers/irker_worker.rb
index 7e44b241743..c9658b3fe17 100644
--- a/app/workers/irker_worker.rb
+++ b/app/workers/irker_worker.rb
@@ -120,8 +120,8 @@ class IrkerWorker
   end
 
   def compare_url(data, repo_path)
-    sha1 = Commit::truncate_sha(data['before'])
-    sha2 = Commit::truncate_sha(data['after'])
+    sha1 = Commit.truncate_sha(data['before'])
+    sha2 = Commit.truncate_sha(data['after'])
     compare_url = "#{Gitlab.config.gitlab.url}/#{repo_path}/compare"
     compare_url += "/#{sha1}...#{sha2}"
     colorize_url compare_url
@@ -129,7 +129,7 @@ class IrkerWorker
 
   def send_one_commit(project, hook_attrs, repo_name, branch)
     commit = commit_from_id project, hook_attrs['id']
-    sha = colorize_sha Commit::truncate_sha(hook_attrs['id'])
+    sha = colorize_sha Commit.truncate_sha(hook_attrs['id'])
     author = hook_attrs['author']['name']
     files = colorize_nb_files(files_count commit)
     title = commit.title
diff --git a/app/workers/new_note_worker.rb b/app/workers/new_note_worker.rb
index c3e62bb88c0..926162b8c53 100644
--- a/app/workers/new_note_worker.rb
+++ b/app/workers/new_note_worker.rb
@@ -2,10 +2,14 @@ class NewNoteWorker
   include Sidekiq::Worker
   include DedicatedSidekiqQueue
 
-  def perform(note_id, note_params)
-    note = Note.find(note_id)
-
-    NotificationService.new.new_note(note)
-    Notes::PostProcessService.new(note).execute
+  # Keep extra parameter to preserve backwards compatibility with
+  # old `NewNoteWorker` jobs (can remove later)
+  def perform(note_id, _params = {})
+    if note = Note.find_by(id: note_id)
+      NotificationService.new.new_note(note)
+      Notes::PostProcessService.new(note).execute
+    else
+      Rails.logger.error("NewNoteWorker: couldn't find note with ID=#{note_id}, skipping job")
+    end
   end
 end
diff --git a/app/workers/pages_worker.rb b/app/workers/pages_worker.rb
new file mode 100644
index 00000000000..4eeb9666bb0
--- /dev/null
+++ b/app/workers/pages_worker.rb
@@ -0,0 +1,23 @@
+class PagesWorker
+  include Sidekiq::Worker
+
+  sidekiq_options queue: :pages, retry: false
+
+  def perform(action, *arg)
+    send(action, *arg)
+  end
+
+  def deploy(build_id)
+    build = Ci::Build.find_by(id: build_id)
+    result = Projects::UpdatePagesService.new(build.project, build).execute
+    if result[:status] == :success
+      result = Projects::UpdatePagesConfigurationService.new(build.project).execute
+    end
+    result
+  end
+
+  def remove(namespace_path, project_path)
+    full_path = File.join(Settings.pages.path, namespace_path, project_path)
+    FileUtils.rm_r(full_path, force: true)
+  end
+end
diff --git a/app/workers/pipeline_metrics_worker.rb b/app/workers/pipeline_metrics_worker.rb
index 34f6ef161fb..070943f1ecc 100644
--- a/app/workers/pipeline_metrics_worker.rb
+++ b/app/workers/pipeline_metrics_worker.rb
@@ -12,11 +12,11 @@ class PipelineMetricsWorker
   private
 
   def update_metrics_for_active_pipeline(pipeline)
-    metrics(pipeline).update_all(latest_build_started_at: pipeline.started_at, latest_build_finished_at: nil)
+    metrics(pipeline).update_all(latest_build_started_at: pipeline.started_at, latest_build_finished_at: nil, pipeline_id: pipeline.id)
   end
 
   def update_metrics_for_succeeded_pipeline(pipeline)
-    metrics(pipeline).update_all(latest_build_started_at: pipeline.started_at, latest_build_finished_at: pipeline.finished_at)
+    metrics(pipeline).update_all(latest_build_started_at: pipeline.started_at, latest_build_finished_at: pipeline.finished_at, pipeline_id: pipeline.id)
   end
 
   def metrics(pipeline)
diff --git a/app/workers/pipeline_notification_worker.rb b/app/workers/pipeline_notification_worker.rb
new file mode 100644
index 00000000000..cdb860b6675
--- /dev/null
+++ b/app/workers/pipeline_notification_worker.rb
@@ -0,0 +1,12 @@
+class PipelineNotificationWorker
+  include Sidekiq::Worker
+  include PipelineQueue
+
+  def perform(pipeline_id, recipients = nil)
+    pipeline = Ci::Pipeline.find_by(id: pipeline_id)
+
+    return unless pipeline
+
+    NotificationService.new.pipeline_finished(pipeline, recipients)
+  end
+end
diff --git a/app/workers/pipeline_success_worker.rb b/app/workers/pipeline_success_worker.rb
index 2aa6fff24da..cc0eb708cf9 100644
--- a/app/workers/pipeline_success_worker.rb
+++ b/app/workers/pipeline_success_worker.rb
@@ -4,7 +4,7 @@ class PipelineSuccessWorker
 
   def perform(pipeline_id)
     Ci::Pipeline.find_by(id: pipeline_id).try do |pipeline|
-      MergeRequests::MergeWhenBuildSucceedsService
+      MergeRequests::MergeWhenPipelineSucceedsService
         .new(pipeline.project, nil)
         .trigger(pipeline)
     end
diff --git a/app/workers/post_receive.rb b/app/workers/post_receive.rb
index 2fff6b0105d..015a41b6e82 100644
--- a/app/workers/post_receive.rb
+++ b/app/workers/post_receive.rb
@@ -3,20 +3,16 @@ class PostReceive
   include DedicatedSidekiqQueue
 
   def perform(repo_path, identifier, changes)
-    if path = Gitlab.config.repositories.storages.find { |p| repo_path.start_with?(p[1].to_s) }
-      repo_path.gsub!(path[1].to_s, "")
-    else
-      log("Check gitlab.yml config for correct repositories.storages values. No repository storage path matches \"#{repo_path}\"")
-    end
+    repo_relative_path = Gitlab::RepoPath.strip_storage_path(repo_path)
 
     changes = Base64.decode64(changes) unless changes.include?(' ')
     # Use Sidekiq.logger so arguments can be correlated with execution
     # time and thread ID's.
     Sidekiq.logger.info "changes: #{changes.inspect}" if ENV['SIDEKIQ_LOG_ARGUMENTS']
-    post_received = Gitlab::GitPostReceive.new(repo_path, identifier, changes)
+    post_received = Gitlab::GitPostReceive.new(repo_relative_path, identifier, changes)
 
     if post_received.project.nil?
-      log("Triggered hook for non-existing project with full path \"#{repo_path}\"")
+      log("Triggered hook for non-existing project with full path \"#{repo_relative_path}\"")
       return false
     end
 
@@ -25,7 +21,7 @@ class PostReceive
     elsif post_received.regular_project?
       process_project_changes(post_received)
     else
-      log("Triggered hook for unidentifiable repository type with full path \"#{repo_path}\"")
+      log("Triggered hook for unidentifiable repository type with full path \"#{repo_relative_path}\"")
       false
     end
   end
diff --git a/app/workers/process_commit_worker.rb b/app/workers/process_commit_worker.rb
new file mode 100644
index 00000000000..e9a5bd7f24e
--- /dev/null
+++ b/app/workers/process_commit_worker.rb
@@ -0,0 +1,74 @@
+# Worker for processing individiual commit messages pushed to a repository.
+#
+# Jobs for this worker are scheduled for every commit that is being pushed. As a
+# result of this the workload of this worker should be kept to a bare minimum.
+# Consider using an extra worker if you need to add any extra (and potentially
+# slow) processing of commits.
+class ProcessCommitWorker
+  include Sidekiq::Worker
+  include DedicatedSidekiqQueue
+
+  # project_id - The ID of the project this commit belongs to.
+  # user_id - The ID of the user that pushed the commit.
+  # commit_hash - Hash containing commit details to use for constructing a
+  #               Commit object without having to use the Git repository.
+  # default - The data was pushed to the default branch.
+  def perform(project_id, user_id, commit_hash, default = false)
+    project = Project.find_by(id: project_id)
+
+    return unless project
+
+    user = User.find_by(id: user_id)
+
+    return unless user
+
+    commit = build_commit(project, commit_hash)
+    author = commit.author || user
+
+    process_commit_message(project, commit, user, author, default)
+
+    update_issue_metrics(commit, author)
+  end
+
+  def process_commit_message(project, commit, user, author, default = false)
+    closed_issues = default ? commit.closes_issues(user) : []
+
+    unless closed_issues.empty?
+      close_issues(project, user, author, commit, closed_issues)
+    end
+
+    commit.create_cross_references!(author, closed_issues)
+  end
+
+  def close_issues(project, user, author, commit, issues)
+    # We don't want to run permission related queries for every single issue,
+    # therefor we use IssueCollection here and skip the authorization check in
+    # Issues::CloseService#execute.
+    IssueCollection.new(issues).updatable_by_user(user).each do |issue|
+      Issues::CloseService.new(project, author).
+        close_issue(issue, commit: commit)
+    end
+  end
+
+  def update_issue_metrics(commit, author)
+    mentioned_issues = commit.all_references(author).issues
+
+    Issue::Metrics.where(issue_id: mentioned_issues.map(&:id), first_mentioned_in_commit_at: nil).
+      update_all(first_mentioned_in_commit_at: commit.committed_date)
+  end
+
+  def build_commit(project, hash)
+    date_suffix = '_date'
+
+    # When processing Sidekiq payloads various timestamps are stored as Strings.
+    # Commit in turn expects Time-like instances upon input, so we have to
+    # manually parse these values.
+    hash.each do |key, value|
+      if key.to_s.end_with?(date_suffix) && value.is_a?(String)
+        hash[key] = Time.parse(value)
+      end
+    end
+
+    Commit.from_hash(hash, project)
+  end
+end
diff --git a/app/workers/project_cache_worker.rb b/app/workers/project_cache_worker.rb
index 4dfa745fb50..8ff9d07860f 100644
--- a/app/workers/project_cache_worker.rb
+++ b/app/workers/project_cache_worker.rb
@@ -1,54 +1,39 @@
 # Worker for updating any project specific caches.
-#
-# This worker runs at most once every 15 minutes per project. This is to ensure
-# that multiple instances of jobs for this worker don't hammer the underlying
-# storage engine as much.
 class ProjectCacheWorker
   include Sidekiq::Worker
   include DedicatedSidekiqQueue
 
   LEASE_TIMEOUT = 15.minutes.to_i
 
-  def self.lease_for(project_id)
-    Gitlab::ExclusiveLease.
-      new("project_cache_worker:#{project_id}", timeout: LEASE_TIMEOUT)
-  end
-
-  # Overwrite Sidekiq's implementation so we only schedule when actually needed.
-  def self.perform_async(project_id)
-    # If a lease for this project is still being held there's no point in
-    # scheduling a new job.
-    super unless lease_for(project_id).exists?
-  end
+  # project_id - The ID of the project for which to flush the cache.
+  # files - An Array containing extra types of files to refresh such as
+  #         `:readme` to flush the README and `:changelog` to flush the
+  #         CHANGELOG.
+  # statistics - An Array containing columns from ProjectStatistics to
+  #              refresh, if empty all columns will be refreshed
+  def perform(project_id, files = [], statistics = [])
+    project = Project.find_by(id: project_id)
 
-  def perform(project_id)
-    if try_obtain_lease_for(project_id)
-      Rails.logger.
-        info("Obtained ProjectCacheWorker lease for project #{project_id}")
-    else
-      Rails.logger.
-        info("Could not obtain ProjectCacheWorker lease for project #{project_id}")
+    return unless project && project.repository.exists?
 
-      return
-    end
+    update_statistics(project, statistics.map(&:to_sym))
 
-    update_caches(project_id)
+    project.repository.refresh_method_caches(files.map(&:to_sym))
   end
 
-  def update_caches(project_id)
-    project = Project.find(project_id)
+  def update_statistics(project, statistics = [])
+    return unless try_obtain_lease_for(project.id, :update_statistics)
 
-    return unless project.repository.exists?
+    Rails.logger.info("Updating statistics for project #{project.id}")
 
-    project.update_repository_size
-    project.update_commit_count
-
-    if project.repository.root_ref
-      project.repository.build_cache
-    end
+    project.statistics.refresh!(only: statistics)
   end
 
-  def try_obtain_lease_for(project_id)
-    self.class.lease_for(project_id).try_obtain
+  private
+
+  def try_obtain_lease_for(project_id, section)
+    Gitlab::ExclusiveLease.
+      new("project_cache_worker:#{project_id}:#{section}", timeout: LEASE_TIMEOUT).
+      try_obtain
   end
 end
diff --git a/app/workers/reactive_caching_worker.rb b/app/workers/reactive_caching_worker.rb
new file mode 100644
index 00000000000..18b8daf4e1e
--- /dev/null
+++ b/app/workers/reactive_caching_worker.rb
@@ -0,0 +1,15 @@
+class ReactiveCachingWorker
+  include Sidekiq::Worker
+  include DedicatedSidekiqQueue
+
+  def perform(class_name, id, *args)
+    klass = begin
+      Kernel.const_get(class_name)
+    rescue NameError
+      nil
+    end
+    return unless klass
+
+    klass.find_by(id: id).try(:exclusively_update_reactive_cache!, *args)
+  end
+end
diff --git a/app/workers/stuck_ci_builds_worker.rb b/app/workers/stuck_ci_builds_worker.rb
deleted file mode 100644
index b70df5a1afa..00000000000
--- a/app/workers/stuck_ci_builds_worker.rb
+++ /dev/null
@@ -1,19 +0,0 @@
-class StuckCiBuildsWorker
-  include Sidekiq::Worker
-  include CronjobQueue
-
-  BUILD_STUCK_TIMEOUT = 1.day
-
-  def perform
-    Rails.logger.info 'Cleaning stuck builds'
-
-    builds = Ci::Build.joins(:project).running_or_pending.where('ci_builds.updated_at < ?', BUILD_STUCK_TIMEOUT.ago)
-    builds.find_each(batch_size: 50).each do |build|
-      Rails.logger.debug "Dropping stuck #{build.status} build #{build.id} for runner #{build.runner_id}"
-      build.drop
-    end
-
-    # Update builds that failed to drop
-    builds.update_all(status: 'failed')
-  end
-end
diff --git a/app/workers/stuck_ci_jobs_worker.rb b/app/workers/stuck_ci_jobs_worker.rb
new file mode 100644
index 00000000000..ae8c980c9e4
--- /dev/null
+++ b/app/workers/stuck_ci_jobs_worker.rb
@@ -0,0 +1,59 @@
+class StuckCiJobsWorker
+  include Sidekiq::Worker
+  include CronjobQueue
+
+  EXCLUSIVE_LEASE_KEY = 'stuck_ci_builds_worker_lease'.freeze
+
+  BUILD_RUNNING_OUTDATED_TIMEOUT = 1.hour
+  BUILD_PENDING_OUTDATED_TIMEOUT = 1.day
+  BUILD_PENDING_STUCK_TIMEOUT = 1.hour
+
+  def perform
+    return unless try_obtain_lease
+
+    Rails.logger.info "#{self.class}: Cleaning stuck builds"
+
+    drop :running, BUILD_RUNNING_OUTDATED_TIMEOUT
+    drop :pending, BUILD_PENDING_OUTDATED_TIMEOUT
+    drop_stuck :pending, BUILD_PENDING_STUCK_TIMEOUT
+
+    remove_lease
+  end
+
+  private
+
+  def try_obtain_lease
+    @uuid = Gitlab::ExclusiveLease.new(EXCLUSIVE_LEASE_KEY, timeout: 30.minutes).try_obtain
+  end
+
+  def remove_lease
+    Gitlab::ExclusiveLease.cancel(EXCLUSIVE_LEASE_KEY, @uuid)
+  end
+
+  def drop(status, timeout)
+    search(status, timeout) do |build|
+      drop_build :outdated, build, status, timeout
+    end
+  end
+
+  def drop_stuck(status, timeout)
+    search(status, timeout) do |build|
+      return unless build.stuck?
+      drop_build :stuck, build, status, timeout
+    end
+  end
+
+  def search(status, timeout)
+    builds = Ci::Build.where(status: status).where('ci_builds.updated_at < ?', timeout.ago)
+    builds.joins(:project).includes(:tags, :runner, project: :namespace).find_each(batch_size: 50).each do |build|
+      yield(build)
+    end
+  end
+
+  def drop_build(type, build, status, timeout)
+    Rails.logger.info "#{self.class}: Dropping #{type} build #{build.id} for runner #{build.runner_id} (status: #{status}, timeout: #{timeout})"
+    Gitlab::OptimisticLocking.retry_lock(build, 3) do |b|
+      b.drop
+    end
+  end
+end
diff --git a/app/workers/system_hook_push_worker.rb b/app/workers/system_hook_push_worker.rb
new file mode 100644
index 00000000000..e43bbe35de9
--- /dev/null
+++ b/app/workers/system_hook_push_worker.rb
@@ -0,0 +1,8 @@
+class SystemHookPushWorker
+  include Sidekiq::Worker
+  include DedicatedSidekiqQueue
+
+  def perform(push_data, hook_id)
+    SystemHooksService.new.execute_hooks(push_data, hook_id)
+  end
+end
diff --git a/app/workers/update_merge_requests_worker.rb b/app/workers/update_merge_requests_worker.rb
index acc4d858136..89ae17cef37 100644
--- a/app/workers/update_merge_requests_worker.rb
+++ b/app/workers/update_merge_requests_worker.rb
@@ -10,8 +10,5 @@ class UpdateMergeRequestsWorker
     return unless user
 
     MergeRequests::RefreshService.new(project, user).execute(oldrev, newrev, ref)
-
-    push_data = Gitlab::DataBuilder::Push.build(project, user, oldrev, newrev, ref, [])
-    SystemHooksService.new.execute_hooks(push_data, :push_hooks)
   end
 end
diff --git a/app/workers/upload_checksum_worker.rb b/app/workers/upload_checksum_worker.rb
new file mode 100644
index 00000000000..78931f1258f
--- /dev/null
+++ b/app/workers/upload_checksum_worker.rb
@@ -0,0 +1,12 @@
+class UploadChecksumWorker
+  include Sidekiq::Worker
+  include DedicatedSidekiqQueue
+
+  def perform(upload_id)
+    upload = Upload.find(upload_id)
+    upload.calculate_checksum
+    upload.save!
+  rescue ActiveRecord::RecordNotFound
+    Rails.logger.error("UploadChecksumWorker: couldn't find upload #{upload_id}, skipping")
+  end
+end
diff --git a/app/workers/use_key_worker.rb b/app/workers/use_key_worker.rb
new file mode 100644
index 00000000000..c9d382cc5d6
--- /dev/null
+++ b/app/workers/use_key_worker.rb
@@ -0,0 +1,13 @@
+class UseKeyWorker
+  include Sidekiq::Worker
+  include DedicatedSidekiqQueue
+
+  def perform(key_id)
+    key = Key.find(key_id)
+    key.touch(:last_used_at)
+  rescue ActiveRecord::RecordNotFound
+    Rails.logger.error("UseKeyWorker: couldn't find key with ID=#{key_id}, skipping job")
+
+    false
+  end
+end