Merge branch 'master' into 31050-registry-image-lists

* master: (62 commits)
  Fix a dash being rendered in the note's access role
  Remove dead `Gitlab::Markdown::Pipeline` class
  Add CHANGELOG entry
  Fix locked shared runners problem
  Document manual cleanup after background migration stealing
  Removes cycle analytics service and store from global namespace
  Fix PG::UniqueViolation external_email migration
  Migrate Gitlab::Git::Repository#log to Gitaly
  Check for exec permissions also in app/
  Add check for exec permissions and refactor lint doc script
  Update tests to reflect `user_avatar_without_link` helper changes
  Change mode to 644 for all md and png files
  Add instructions for upgrading from CE to EE using GitLab Omnibus chart - docs
  Add `data-src` when image is to be lazy loaded, use `tag` helper instead of `image_tag` helper
  Remove unnecessary use of `gsub`
  Fixed few gitlab:check tasks that were failing with exception
  Update CHANGELOG.md for 10.0.1
  Remove Grit settings from default settings
  Fix duplicate key errors in PostDeployMigrateUserExternalMailData migration
  Improve list of sorting options
  ...

.eslintignore

@@ -7,4 +7,5 @@
 /vendor/
 karma.config.js
 webpack.config.js
+svg.config.js
 /app/assets/javascripts/locale/**/*.js

GITALY_SERVER_VERSION

-0.38.0
+0.40.0

GITLAB_SHELL_VERSION

-5.9.0
+5.9.2

app/assets/images/icons.json

+{"iconCount":134,"icons":["abuse","account","admin","angle-double-left","angle-down","angle-left","angle-right","angle-up","appearance","applications","approval","arrow-right","assignee","bold","book","branch","calendar","cancel","chevron-down","chevron-left","chevron-right","chevron-up","clock","code","comment-dots","comment-next","comment","comments","commit","credit-card","disk","doc_code","doc_image","doc_text","download","duplicate","earth","eye-slash","eye","file-additions","file-deletion","file-modified","filter","folder","fork","geo-nodes","git-merge","group","history","home","hook","issue-block","issue-child","issue-close","issue-duplicate","issue-new","issue-open-m","issue-open","issue-parent","issues","key-2","key","label","labels","leave","level-up","license","link","list-bulleted","list-numbered","location-dot","location","lock-open","lock","log","mail","merge-request-close-m","merge-request-close","messages","mobile-issue-close","monitor","more","notifications-off","notifications","overview","pencil","pipeline","play","plus-square-o","plus-square","plus","preferences","profile","project","push-rules","question-o","question","quote","redo","remove","repeat","retry","scale","screen-full","screen-normal","search","settings","shield","slight-frown","slight-smile","smile","smiley","snippet","spam","star-o","star","stop","talic","task-done","template","thump-down","thump-up","timer","todo-add","todo-done","token","unapproval","unassignee","unlink","user","users","volume-up","warning","work"]}
\ No newline at end of file

app/assets/images/illustrations/pipelines_empty.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 150"><g fill="none" fill-rule="evenodd"><g fill="#e5e5e5" transform="translate(0 102)"><rect width="74" 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-4A1.994 1.994 0 0 1 152 23m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4A1.994 1.994 0 0 1 166 23m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4A1.994 1.994 0 0 1 180 23m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4A1.994 1.994 0 0 1 194 23m14 0c0-1.105.887-2 1.998-2h4c1.104 0 1.998.888 1.998 2 0 1.105-.887 2-1.998 2h-4A1.994 1.994 0 0 1 208 23"/></g><g fill="#31af64"><path fill-rule="nonzero" d="M19 144c-10.493 0-19-8.507-19-19s8.507-19 19-19 19 8.507 19 19-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 d="M17.07 127.02l-2.829-2.829a1.995 1.995 0 0 0-2.828 0 1.995 1.995 0 0 0 0 2.828l4.243 4.243a1.995 1.995 0 0 0 2.822.006l7.79-7.79a1.997 1.997 0 0 0-.006-2.823 1.992 1.992 0 0 0-2.823-.006l-6.37 6.37"/></g><g fill="#e52c5a"><path fill-rule="nonzero" d="M126 149.5c-12.979 0-23.5-10.521-23.5-23.5s10.521-23.5 23.5-23.5 23.5 10.521 23.5 23.5-10.521 23.5-23.5 23.5m0-5c10.217 0 18.5-8.283 18.5-18.5s-8.283-18.5-18.5-18.5-18.5 8.283-18.5 18.5 8.283 18.5 18.5 18.5"/><path d="M130.24 126l2.833-2.833a3 3 0 0 0-4.243-4.243l-2.833 2.833-2.833-2.833a3 3 0 0 0-4.243 4.243l2.833 2.833-2.833 2.833a3 3 0 0 0 4.243 4.243l2.833-2.833 2.833 2.833a3 3 0 0 0 4.243-4.243L130.24 126"/></g><path fill="#e5e5e5" fill-rule="nonzero" d="M236 139c-7.732 0-14-6.268-14-14s6.268-14 14-14 14 6.268 14 14-6.268 14-14 14m0-4c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10"/><g transform="translate(73 4)"><path stroke="#e5e5e5" stroke-width="4" d="M64.82 76H98c4.419 0 8-3.579 8-7.99V7.99C106 3.577 102.417 0 98 0H8.009c-4.419 0-8 3.579-8 7.99v60.02c0 4.413 3.583 7.99 8 7.99h31.935l9.263 9.855a4.357 4.357 0 0 0 6.354 0L64.824 76"/><rect width="18" height="6" x="11" y="19" fill="#fc8a51" rx="3"/><rect width="18" height="6" x="35" y="35" fill="#e52c5a" rx="3"/><rect width="18" height="6" x="29" y="51" fill="#e5e5e5" rx="3"/><rect width="12" height="6" x="35" y="19" fill="#fde5d8" rx="3"/><rect width="12" height="6" x="53" y="51" fill="#e52c5a" rx="3"/><rect width="12" height="6" x="11" y="51" fill="#b5a7dd" rx="3"/><rect width="18" height="6" x="77" y="19" fill="#fc8a51" rx="3"/><rect width="18" height="6" x="11" y="35" fill="#fde5d8" rx="3"/><rect width="6" height="6" x="53" y="19" fill="#e52c5a" rx="3"/><g fill="#fde5d8"><rect width="6" height="6" x="65" y="19" rx="3"/><rect width="6" height="6" x="71" y="35" rx="3"/></g><rect width="6" height="6" x="59" y="35" fill="#e52c5a" rx="3"/></g><path fill="#6b4fbb" fill-rule="nonzero" d="M151.869 77.403c-13.26 9.264-31.649 7.977-43.484-3.858-13.279-13.279-13.279-34.806 0-48.084 13.278-13.278 34.805-13.278 48.083 0 11.836 11.836 13.118 30.23 3.858 43.485.133.111.262.229.387.354l15.556 15.555a6.004 6.004 0 0 1 0 8.486 5.997 5.997 0 0 1-8.486 0l-15.555-15.556a6.051 6.051 0 0 1-.355-.387m-1.06-9.512c10.154-10.154 10.154-26.617 0-36.77-10.153-10.154-26.616-10.154-36.77 0-10.153 10.153-10.153 26.616 0 36.77 10.154 10.153 26.617 10.153 36.77 0"/></g></svg>
\ No newline at end of file

app/assets/images/illustrations/pipelines_failed.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 446 249" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" 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.12a36.87 36.87 0 0 0-15.32 3.311c-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.088C145.95 45.083 134 59.645 134 76.996c0 20.435 16.565 37 37 37 .324 0 .646-.004.968-.012"/><ellipse id="b" cx="41" cy="41" rx="41" ry="41"/><mask id="c" width="186" height="112" x="0" y="0" fill="#fff"><use xlink:href="#a"/></mask><mask id="d" width="82" height="82" x="0" y="0" fill="#fff"><use xlink:href="#b"/></mask></defs><g fill="none" fill-rule="evenodd"><path stroke="#b5a7dd" stroke-width="4" d="M228.415 137.792c8.443 17.156 21.89 32.082 39.688 42.358"/><path fill="#fb722e" d="M284.464 183.822a2.006 2.006 0 0 1 2.74-.727l6.914 3.992a2.001 2.001 0 0 1 .741 2.737 2.006 2.006 0 0 1-2.74.727l-6.914-3.992a2.001 2.001 0 0 1-.74-2.737m-5 8.66a2.006 2.006 0 0 1 2.74-.726l6.913 3.991a2.001 2.001 0 0 1 .741 2.737 2.006 2.006 0 0 1-2.74.727l-6.914-3.991a2.001 2.001 0 0 1-.74-2.737"/><path fill="#fde5d8" fill-rule="nonzero" d="M267.072 189.947l5.196 3a5.998 5.998 0 0 0 8.195-2.194l3.005-5.205a5.995 5.995 0 0 0-2.198-8.193l-5.196-3-9 15.588m6.032-18.447a3.005 3.005 0 0 1 4.098-1.11l6.07 3.505c4.784 2.761 6.426 8.871 3.662 13.658l-3.005 5.204c-2.76 4.782-8.875 6.42-13.659 3.658l-6.07-3.505a2.999 2.999 0 0 1-1.088-4.104l9.992-17.306"/><g fill-rule="nonzero"><path fill="#e5e5e5" d="M260.597 18.747C266.208 9.657 276.116 4 287 4c17.12 0 31 13.879 31 31 0 7.02-2.34 13.685-6.58 19.1l3.149 2.466A34.855 34.855 0 0 0 322 35.001c0-19.33-15.67-35-35-35-12.286 0-23.476 6.384-29.808 16.647l3.404 2.1"/><path fill="#b5a7dd" d="M281.982 23.991l-2.526 1.154-2.992-2.993a.4.4 0 0 0-.564.009l-1.738 1.738a.392.392 0 0 0-.009.564l2.987 2.987-1.147 2.524a12.26 12.26 0 0 0-1.04 3.883l-.269 2.76-4.08 1.093a.399.399 0 0 0-.275.492l.636 2.375c.06.223.273.346.485.29l4.087-1.096 1.611 2.262a12.017 12.017 0 0 0 2.827 2.828l2.26 1.612-1.094 4.08a.399.399 0 0 0 .29.485l2.374.636a.393.393 0 0 0 .493-.275l1.093-4.08 2.763-.267a12.14 12.14 0 0 0 3.862-1.035l2.526-1.154 2.992 2.992a.4.4 0 0 0 .564-.008l1.738-1.738a.392.392 0 0 0 .009-.564l-2.987-2.987 1.147-2.524a12.26 12.26 0 0 0 1.04-3.883l.27-2.76 4.08-1.093a.399.399 0 0 0 .274-.493l-.636-2.374a.393.393 0 0 0-.485-.29l-4.087 1.096-1.611-2.262a12.017 12.017 0 0 0-2.826-2.828l-2.26-1.612 1.093-4.08a.399.399 0 0 0-.29-.485l-2.373-.636a.393.393 0 0 0-.493.274l-1.094 4.081-2.763.266c-1.336.129-2.64.48-3.862 1.036m3.48-5.02l.375-1.4a4.393 4.393 0 0 1 5.392-3.103l2.375.636a4.399 4.399 0 0 1 3.117 5.383l-.375 1.401a16.077 16.077 0 0 1 3.761 3.767l1.405-.376a4.397 4.397 0 0 1 5.386 3.118l.636 2.375a4.398 4.398 0 0 1-3.103 5.39l-1.402.376a16.217 16.217 0 0 1-1.378 5.143l1.027 1.026a4.392 4.392 0 0 1-.008 6.22l-1.739 1.738a4.4 4.4 0 0 1-6.224.008l-1.028-1.028a16.09 16.09 0 0 1-5.14 1.381l-.376 1.4a4.393 4.393 0 0 1-5.392 3.104l-2.374-.636a4.399 4.399 0 0 1-3.118-5.383l.376-1.401a16.077 16.077 0 0 1-3.762-3.767l-1.404.376a4.397 4.397 0 0 1-5.386-3.118l-.637-2.374a4.398 4.398 0 0 1 3.103-5.391l1.402-.376a16.217 16.217 0 0 1 1.378-5.143l-1.026-1.026a4.392 4.392 0 0 1 .008-6.22l1.738-1.738a4.4 4.4 0 0 1 6.224-.008l1.028 1.028a16.09 16.09 0 0 1 5.141-1.381"/><path fill="#6b4fbb" d="M286.367 37.355a2.439 2.439 0 1 0 1.262-4.711 2.439 2.439 0 0 0-1.262 4.711m-1.035 3.864a6.44 6.44 0 1 1 3.333-12.44 6.44 6.44 0 0 1-3.333 12.44"/></g><use fill="#fff" stroke="#e5e5e5" stroke-width="8" mask="url(#c)" stroke-linejoin="round" xlink:href="#a"/><g transform="translate(175 58)"><use fill="#fff" stroke="#e5e5e5" stroke-width="8" mask="url(#d)" xlink:href="#b"/><g fill-rule="nonzero"><path fill="#e5e5e5" d="M41 78c20.435 0 37-16.565 37-37S61.435 4 41 4 4 20.565 4 41s16.565 37 37 37m0 4C18.356 82 0 63.644 0 41S18.356 0 41 0s41 18.356 41 41-18.356 41-41 41"/><path fill="#b5a7dd" d="M34.363 26.44l-2.527 1.154-3.211-3.211a1.495 1.495 0 0 0-2.117-.005l-2.131 2.13a1.504 1.504 0 0 0 .005 2.117l3.206 3.206-1.147 2.524a16.09 16.09 0 0 0-.897 2.503 16.08 16.08 0 0 0-.475 2.616l-.269 2.76-4.379 1.174a1.495 1.495 0 0 0-1.063 1.83l.78 2.911a1.504 1.504 0 0 0 1.836 1.054l4.387-1.176 1.612 2.263a15.954 15.954 0 0 0 3.737 3.742l2.26 1.612-1.173 4.38a1.495 1.495 0 0 0 1.053 1.835l2.908.78a1.504 1.504 0 0 0 1.83-1.063l1.174-4.38 2.763-.266a15.977 15.977 0 0 0 5.108-1.372l2.527-1.154 3.211 3.212a1.495 1.495 0 0 0 2.117.005l2.131-2.131a1.504 1.504 0 0 0-.005-2.117l-3.206-3.206 1.147-2.524a16.09 16.09 0 0 0 .897-2.503 16.1 16.1 0 0 0 .475-2.616l.269-2.76 4.379-1.173a1.495 1.495 0 0 0 1.063-1.83l-.78-2.912a1.504 1.504 0 0 0-1.836-1.054l-4.387 1.176-1.612-2.262a15.954 15.954 0 0 0-3.737-3.743l-2.26-1.612 1.173-4.38a1.495 1.495 0 0 0-1.053-1.835l-2.908-.779a1.504 1.504 0 0 0-1.83 1.063l-1.174 4.38-2.763.265c-1.767.17-3.493.636-5.108 1.373m4.726-5.355l.455-1.699a5.504 5.504 0 0 1 6.73-3.89l2.907.778a5.495 5.495 0 0 1 3.882 6.735l-.455 1.699a19.95 19.95 0 0 1 4.673 4.68l1.704-.457a5.503 5.503 0 0 1 6.734 3.886l.78 2.91a5.493 5.493 0 0 1-3.894 6.73l-1.701.455a20.134 20.134 0 0 1-.593 3.265 20.134 20.134 0 0 1-1.119 3.124l1.245 1.246a5.507 5.507 0 0 1 .008 7.774l-2.13 2.13a5.5 5.5 0 0 1-7.775-.001l-1.248-1.248c-2 .914-4.157 1.502-6.387 1.717l-.455 1.699a5.504 5.504 0 0 1-6.73 3.89l-2.907-.778a5.495 5.495 0 0 1-3.882-6.735l.455-1.699a19.95 19.95 0 0 1-4.673-4.68l-1.704.457a5.503 5.503 0 0 1-6.734-3.886l-.78-2.91a5.493 5.493 0 0 1 3.894-6.73l1.701-.455a20.258 20.258 0 0 1 1.712-6.389l-1.245-1.246a5.507 5.507 0 0 1-.008-7.774l2.13-2.13a5.5 5.5 0 0 1 7.775.001l1.248 1.248c2-.914 4.157-1.502 6.387-1.717"/><path fill="#6b4fbb" d="M39.965 44.863a4 4 0 1 0 2.07-7.727 4 4 0 0 0-2.07 7.727m-1.036 3.864a8 8 0 1 1 4.142-15.455 8 8 0 0 1-4.142 15.455"/></g></g><path fill="#e5e5e5" fill-rule="nonzero" d="M144 169.541v30.01a4.002 4.002 0 0 0 4 3.995h20c2.209 0 4-1.789 4-3.995v-30.01a4.002 4.002 0 0 0-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" transform="translate(140 161)"><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><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.364a2 2 0 1 0 2.3 3.272c15.756-11.07 109.46-19.636 219.88-19.636 110.34 0 203.99 8.55 219.85 19.617a2.001 2.001 0 0 0 2.29-3.28"/></g></svg>
\ No newline at end of file

app/views/shared/empty_states/icons/_priority_labels.svg → app/assets/images/illustrations/priority_labels.svg

-<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>
+<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.2zm5-34C10.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>
\ No newline at end of file

app/assets/images/illustrations/todos_all_done.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 293 216"><g fill="none" fill-rule="evenodd"><g transform="rotate(-5 211.388 -693.89)"><rect width="163.6" height="200" x=".2" fill="#FFF" stroke="#EEE" stroke-width="3" stroke-linecap="round" stroke-dasharray="6 9" rx="6"/><g transform="translate(24 38)"><path fill="#FC6D26" d="M18.2 14l-4-3.8c-.4-.6-1.4-.6-2 0-.6.6-.6 1.5 0 2l5 5c.3.4.6.5 1 .5s.8 0 1-.4L28 8.8c.6-.6.6-1.5 0-2-.6-.7-1.6-.7-2 0L18 14z"/><path stroke="#6B4FBB" stroke-width="3" d="M27 23.3V27c0 2.3-1.7 4-4 4H4c-2.3 0-4-1.7-4-4V8c0-2.3 1.7-4 4-4h3.8" stroke-linecap="round"/><rect width="76" height="3" x="40" y="11" fill="#6B4FBB" opacity=".5" rx="1.5"/><rect width="43" height="3" x="40" y="21" fill="#6B4FBB" opacity=".5" rx="1.5"/></g><g transform="translate(24 83)"><path fill="#FC6D26" d="M18.2 14l-4-3.8c-.4-.6-1.4-.6-2 0-.6.6-.6 1.5 0 2l5 5c.3.4.6.5 1 .5s.8 0 1-.4L28 8.8c.6-.6.6-1.5 0-2-.6-.7-1.6-.7-2 0L18 14z"/><path stroke="#6B4FBB" stroke-width="3" d="M27 23.3V27c0 2.3-1.7 4-4 4H4c-2.3 0-4-1.7-4-4V8c0-2.3 1.7-4 4-4h3.8" stroke-linecap="round"/><rect width="76" height="3" x="40" y="11" fill="#B5A7DD" rx="1.5"/><rect width="43" height="3" x="40" y="21" fill="#B5A7DD" rx="1.5"/></g><g transform="translate(24 130)"><path fill="#FC6D26" d="M18.2 14l-4-3.8c-.4-.6-1.4-.6-2 0-.6.6-.6 1.5 0 2l5 5c.3.4.6.5 1 .5s.8 0 1-.4L28 8.8c.6-.6.6-1.5 0-2-.6-.7-1.6-.7-2 0L18 14z"/><path stroke="#6B4FBB" stroke-width="3" d="M27 23.3V27c0 2.3-1.7 4-4 4H4c-2.3 0-4-1.7-4-4V8c0-2.3 1.7-4 4-4h3.8" stroke-linecap="round"/><rect width="76" height="3" x="40" y="11" fill="#B5A7DD" rx="1.5"/><rect width="43" height="3" x="40" y="21" fill="#B5A7DD" rx="1.5"/></g></g><path fill="#FFCE29" d="M30 11l-1.8 4-2-4-4-1.8 4-2 2-4 2 4 4 2M286 60l-2.7 6.3-3-6-6-3 6-3 3-6 2.8 6.2 6.6 2.8M263 97l-2 4-2-4-4-2 4-2 2-4 2 4 4 2M12 85l-2.7 6.3-3-6-6-3 6-3 3-6 2.8 6.2 6.6 2.8"/></g></svg>
\ No newline at end of file

app/assets/images/illustrations/todos_empty.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 284 337" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><rect id="a" width="180" height="220" x="66.2" y="74.4" rx="6"/><mask id="l" width="180" height="220" x="0" y="0" fill="#fff"><use xlink:href="#a"/></mask><rect id="b" width="180" height="220" rx="6"/><mask id="m" width="180" height="220" x="0" y="0" fill="#fff"><use xlink:href="#b"/></mask><rect id="c" width="28" height="28" rx="4"/><mask id="n" width="28" height="28" x="0" y="0" fill="#fff"><use xlink:href="#c"/></mask><rect id="d" width="28" height="28" rx="4"/><mask id="o" width="28" height="28" x="0" y="0" fill="#fff"><use xlink:href="#d"/></mask><circle id="e" cx="21.5" cy="21.5" r="21.5"/><mask id="p" width="43" height="43" x="0" y="0" fill="#fff"><use xlink:href="#e"/></mask><circle id="f" cx="26.5" cy="26.5" r="26.5"/><mask id="q" width="53" height="53" x="0" y="0" fill="#fff"><use xlink:href="#f"/></mask><circle id="g" cx="9.5" cy="4.5" r="4.5"/><mask id="r" width="13" height="13" x="-2" y="-2"><path fill="#fff" d="M3-2h13v13H3z"/><use xlink:href="#g"/></mask><circle id="h" cx="26.5" cy="26.5" r="26.5"/><mask id="s" width="53" height="53" x="0" y="0" fill="#fff"><use xlink:href="#h"/></mask><circle id="i" cx="21.5" cy="21.5" r="21.5"/><mask id="t" width="43" height="43" x="0" y="0" fill="#fff"><use xlink:href="#i"/></mask><path id="j" d="M18 38h15c10.5 0 19-8.5 19-19S43.5 0 33 0H19C8.5 0 0 8.5 0 19c0 6.3 3 12 7.8 15.3l5.2 9c.6 1 1.4 1 2 0l3-5.3z"/><mask id="u" width="52" height="44" x="0" y="0" fill="#fff"><use xlink:href="#j"/></mask><circle id="k" cx="18.5" cy="18.5" r="18.5"/><mask id="v" width="37" height="37" x="0" y="0" fill="#fff"><use xlink:href="#k"/></mask></defs><g fill="none" fill-rule="evenodd" transform="translate(-6 -4)"><use stroke="#EEE" stroke-width="6" mask="url(#l)" transform="rotate(-5 156.245 184.425)" xlink:href="#a"/><g transform="rotate(5 -707.333 618.042)"><use fill="#FFF" stroke="#EEE" stroke-width="6" mask="url(#m)" xlink:href="#b"/><g transform="translate(29 24)"><path fill="#FC6D26" d="M18.2 14l-4-3.8c-.4-.6-1.4-.6-2 0-.6.6-.6 1.5 0 2l5 5c.3.4.6.5 1 .5s.8 0 1-.4L28 8.8c.6-.6.6-1.5 0-2-.6-.7-1.6-.7-2 0L18 14z"/><path stroke="#6B4FBB" stroke-width="3" d="M27 23.3V27c0 2.3-1.7 4-4 4H4c-2.3 0-4-1.7-4-4V8c0-2.3 1.7-4 4-4h3.8" stroke-linecap="round"/><rect width="86" height="3" x="40" y="11" fill="#6B4FBB" opacity=".5" rx="1.5"/><rect width="43" height="3" x="40" y="21" fill="#6B4FBB" opacity=".5" rx="1.5"/></g><g transform="translate(29 69)"><path fill="#FC6D26" d="M18.2 14l-4-3.8c-.4-.6-1.4-.6-2 0-.6.6-.6 1.5 0 2l5 5c.3.4.6.5 1 .5s.8 0 1-.4L28 8.8c.6-.6.6-1.5 0-2-.6-.7-1.6-.7-2 0L18 14z"/><path stroke="#6B4FBB" stroke-width="3" d="M27 23.3V27c0 2.3-1.7 4-4 4H4c-2.3 0-4-1.7-4-4V8c0-2.3 1.7-4 4-4h3.8" stroke-linecap="round"/><rect width="86" height="3" x="40" y="11" fill="#B5A7DD" rx="1.5"/><rect width="43" height="3" x="40" y="21" fill="#B5A7DD" rx="1.5"/></g><g transform="translate(28 160)"><use stroke="#E5E5E5" stroke-width="6" mask="url(#n)" opacity=".7" xlink:href="#c"/><rect width="26" height="3" x="41" y="7" fill="#ECECEC" rx="1.5"/><rect width="43" height="3" x="41" y="17" fill="#ECECEC" rx="1.5"/></g><g transform="translate(28 116)"><use stroke="#E5E5E5" stroke-width="6" mask="url(#o)" xlink:href="#d"/><rect width="86" height="3" x="41" y="7" fill="#E5E5E5" rx="1.5"/><rect width="43" height="3" x="41" y="17" fill="#E5E5E5" rx="1.5"/></g></g><g transform="rotate(-15 601.917 -782.362)"><use fill="#FFF" stroke="#B5A7DD" stroke-width="6" mask="url(#p)" xlink:href="#e"/><text fill="#6B4FBB" font-family="SourceSansPro-Black, Source Sans Pro" font-size="20" font-weight="700" letter-spacing="-.1"><tspan x="12" y="27">@</tspan></text></g><g transform="rotate(15 -686.59 1035.907)"><use fill="#FFF" stroke="#FDE5D8" stroke-width="6" mask="url(#q)" xlink:href="#f"/><path fill="#FC6D26" d="M26.5 38.2c3.3 0 9.5-2.5 9.5-9.6 0-7-2.4-6.6-9.5-6.6-7 0-9.5-.4-9.5 6.6s6.2 9.6 9.5 9.6z"/><g transform="translate(17 14)"><use fill="#FC6D26" xlink:href="#g"/><use stroke="#FFF" stroke-width="4" mask="url(#r)" xlink:href="#g"/></g></g><g transform="rotate(15 -85.125 65.185)"><use fill="#FFF" stroke="#B5A7DD" stroke-width="6" mask="url(#s)" xlink:href="#h"/><path fill="#6B4FBB" d="M24 18.5c0-1.4 1-2.5 2.5-2.5 1.4 0 2.5 1 2.5 2.5v9c0 1.4-1 2.5-2.5 2.5-1.4 0-2.5-1-2.5-2.5v-9zM26.5 37c1.4 0 2.5-1 2.5-2.5 0-1.4-1-2.5-2.5-2.5-1.4 0-2.5 1-2.5 2.5 0 1.4 1 2.5 2.5 2.5z"/></g><g transform="rotate(-15 716.492 78.873)"><use fill="#FFF" stroke="#FDE5D8" stroke-width="6" mask="url(#t)" xlink:href="#i"/><path fill="#FC6D26" d="M20 23v-3h3v3h-3zm0 3v1.5c0 .8-.7 1.5-1.5 1.5s-1.5-.7-1.5-1.5V26h-2.5c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5H17v-3h-1.5c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5H17v-2.5c0-.8.7-1.5 1.5-1.5s1.5.7 1.5 1.5V17h3v-1.5c0-.8.7-1.5 1.5-1.5s1.5.7 1.5 1.5V17h2.5c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5H26v3h1.5c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5H26v2.5c0 .8-.7 1.5-1.5 1.5s-1.5-.7-1.5-1.5V26h-3z"/></g><g transform="rotate(-15 129.114 -585.74)"><use stroke="#FDE5D8" stroke-width="6" mask="url(#u)" xlink:href="#j"/><circle cx="16" cy="20" r="2" fill="#FC6D26"/><circle cx="27" cy="20" r="2" fill="#FC6D26"/><circle cx="38" cy="20" r="2" fill="#FC6D26"/></g><g transform="rotate(-15 1254.8 -458.986)"><use stroke="#FDE5D8" stroke-width="6" mask="url(#v)" xlink:href="#k"/><path fill="#FC6D26" d="M10.6 19l2-2c.5-.5.5-1 0-1.5-.3-.4-1-.4-1.3 0l-2.8 2.8c-.2.2-.3.4-.3.7 0 .3 0 .5.3.7l2.8 2.8c.4.4 1 .4 1.4 0 .4-.4.4-1 0-1.4l-2-2zm14.8 0l-2-2c-.5-.5-.5-1 0-1.5.3-.4 1-.4 1.3 0l2.8 2.8c.2.2.3.4.3.7 0 .3 0 .5-.3.7l-2.8 2.8c-.4.4-1 .4-1.4 0-.4-.4-.4-1 0-1.4l2-2z"/><rect width="2" height="7" x="17" y="15.1" fill="#FC6D26" opacity=".5" transform="rotate(15 18.002 18.64)" rx="1"/></g></g></svg>
\ No newline at end of file

app/assets/javascripts/awards_handler.js

@@ -24,6 +24,9 @@ const categoryLabelMap = {
   flags: 'Flags',
 };
 
+const IS_VISIBLE = 'is-visible';
+const IS_RENDERED = 'is-rendered';
+
 class AwardsHandler {
   constructor(emoji) {
     this.emoji = emoji;
@@ -51,7 +54,7 @@ class AwardsHandler {
       if (!$target.closest('.emoji-menu').length) {
         if ($('.emoji-menu').is(':visible')) {
           $('.js-add-award.is-active').removeClass('is-active');
-          $('.emoji-menu').removeClass('is-visible');
+          this.hideMenuElement($('.emoji-menu'));
         }
       }
     });
@@ -88,12 +91,12 @@ class AwardsHandler {
     if ($menu.length) {
       if ($menu.is('.is-visible')) {
         $addBtn.removeClass('is-active');
-        $menu.removeClass('is-visible');
+        this.hideMenuElement($menu);
         $('.js-emoji-menu-search').blur();
       } else {
         $addBtn.addClass('is-active');
         this.positionMenu($menu, $addBtn);
-        $menu.addClass('is-visible');
+        this.showMenuElement($menu);
         $('.js-emoji-menu-search').focus();
       }
     } else {
@@ -103,7 +106,7 @@ class AwardsHandler {
         $addBtn.removeClass('is-loading');
         this.positionMenu($createdMenu, $addBtn);
         return setTimeout(() => {
-          $createdMenu.addClass('is-visible');
+          this.showMenuElement($createdMenu);
           $('.js-emoji-menu-search').focus();
         }, 200);
       });
@@ -241,7 +244,8 @@ class AwardsHandler {
     if (isInIssuePage() && !isMainAwardsBlock) {
       const id = votesBlock.attr('id').replace('note_', '');
 
-      $('.emoji-menu').removeClass('is-visible');
+      this.hideMenuElement($('.emoji-menu'));
+
       $('.js-add-award.is-active').removeClass('is-active');
       const toggleAwardEvent = new CustomEvent('toggleAward', {
         detail: {
@@ -261,7 +265,8 @@ class AwardsHandler {
       return typeof callback === 'function' ? callback() : undefined;
     });
 
-    $('.emoji-menu').removeClass('is-visible');
+    this.hideMenuElement($('.emoji-menu'));
+
     return $('.js-add-award.is-active').removeClass('is-active');
   }
 
@@ -529,6 +534,33 @@ class AwardsHandler {
     return $matchingElements.closest('li').clone();
   }
 
+  /* showMenuElement and hideMenuElement are performance optimizations. We use
+   * opacity to show/hide the emoji menu, because we can animate it. But opacity
+   * leaves hidden elements in the render tree, which is unacceptable given the number
+   * of emoji elements in the emoji menu (5k+). To get the best of both worlds, we separately
+   * apply IS_RENDERED to add/remove the menu from the render tree and IS_VISIBLE to animate
+   * the menu being opened and closed. */
+
+  showMenuElement($emojiMenu) {
+    $emojiMenu.addClass(IS_RENDERED);
+
+    // enqueues animation as a microtask, so it begins ASAP once IS_RENDERED added
+    return Promise.resolve()
+      .then(() => $emojiMenu.addClass(IS_VISIBLE));
+  }
+
+  hideMenuElement($emojiMenu) {
+    $emojiMenu.on(transitionEndEventString, (e) => {
+      if (e.currentTarget === e.target) {
+        $emojiMenu
+          .removeClass(IS_RENDERED)
+          .off(transitionEndEventString);
+      }
+    });
+
+    $emojiMenu.removeClass(IS_VISIBLE);
+  }
+
   destroy() {
     this.eventListeners.forEach((entry) => {
       entry.element.off.call(entry.element, ...entry.args);

app/assets/javascripts/boards/components/modal/empty_state.js

@@ -8,11 +8,11 @@ gl.issueBoards.ModalEmptyState = Vue.extend({
     return ModalStore.store;
   },
   props: {
-    image: {
+    newIssuePath: {
       type: String,
       required: true,
     },
-    newIssuePath: {
+    emptyStateSvg: {
       type: String,
       required: true,
     },
@@ -42,7 +42,7 @@ gl.issueBoards.ModalEmptyState = Vue.extend({
     <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>
+          <aside class="svg-content"><img :src="emptyStateSvg"/></aside>
         </div>
         <div class="col-xs-12 col-sm-6 col-sm-pull-6">
           <div class="text-content">

app/assets/javascripts/boards/components/modal/index.js

@@ -12,11 +12,11 @@ const ModalStore = gl.issueBoards.ModalStore;
 
 gl.issueBoards.IssuesModal = Vue.extend({
   props: {
-    blankStateImage: {
+    newIssuePath: {
       type: String,
       required: true,
     },
-    newIssuePath: {
+    emptyStateSvg: {
       type: String,
       required: true,
     },
@@ -150,14 +150,14 @@ gl.issueBoards.IssuesModal = Vue.extend({
           :label-path="labelPath">
         </modal-header>
         <modal-list
-          :image="blankStateImage"
           :issue-link-base="issueLinkBase"
           :root-path="rootPath"
+          :empty-state-svg="emptyStateSvg"
           v-if="!loading && showList && !filterLoading"></modal-list>
         <empty-state
           v-if="showEmptyState"
-          :image="blankStateImage"
-          :new-issue-path="newIssuePath"></empty-state>
+          :new-issue-path="newIssuePath"
+          :empty-state-svg="emptyStateSvg"></empty-state>
         <section
           class="add-issues-list text-center"
           v-if="loading || filterLoading">

app/assets/javascripts/boards/components/modal/list.js

@@ -15,7 +15,7 @@ gl.issueBoards.ModalList = Vue.extend({
       type: String,
       required: true,
     },
-    image: {
+    emptyStateSvg: {
       type: String,
       required: true,
     },
@@ -119,8 +119,8 @@ gl.issueBoards.ModalList = Vue.extend({
         class="empty-state add-issues-empty-state-filter text-center"
         v-if="issuesCount > 0 && issues.length === 0">
         <div
-          class="svg-content"
-          v-html="image">
+          class="svg-content">
+          <img :src="emptyStateSvg"/>
         </div>
         <div class="text-content">
           <h4>

app/assets/javascripts/commit/pipelines/pipelines_bundle.js

@@ -35,6 +35,8 @@ document.addEventListener('DOMContentLoaded', () => {
         propsData: {
           endpoint: pipelineTableViewEl.dataset.endpoint,
           helpPagePath: pipelineTableViewEl.dataset.helpPagePath,
+          emptyStateSvgPath: pipelineTableViewEl.dataset.emptyStateSvgPath,
+          errorStateSvgPath: pipelineTableViewEl.dataset.errorStateSvgPath,
           autoDevopsHelpPath: pipelineTableViewEl.dataset.helpAutoDevopsPath,
         },
       }).$mount();

app/assets/javascripts/commit/pipelines/pipelines_table.vue

@@ -17,6 +17,14 @@
         type: String,
         required: true,
       },
+      emptyStateSvgPath: {
+        type: String,
+        required: true,
+      },
+      errorStateSvgPath: {
+        type: String,
+        required: true,
+      },
     },
     mixins: [
       pipelinesMixin,
@@ -87,10 +95,12 @@
     <empty-state
       v-if="shouldRenderEmptyState"
       :help-page-path="helpPagePath"
+      :empty-state-svg-path="emptyStateSvgPath"
       />
 
     <error-state
       v-if="shouldRenderErrorState"
+      :error-state-svg-path="errorStateSvgPath"
       />
 
     <div

app/assets/javascripts/cycle_analytics/cycle_analytics_bundle.js

@@ -12,34 +12,38 @@ import './components/stage_review_component';
 import './components/stage_staging_component';
 import './components/stage_test_component';
 import './components/total_time_component';
-import './cycle_analytics_service';
-import './cycle_analytics_store';
+import CycleAnalyticsService from './cycle_analytics_service';
+import CycleAnalyticsStore from './cycle_analytics_store';
 
 Vue.use(Translate);
 
 $(() => {
   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),
+    data() {
+      const cycleAnalyticsEl = document.querySelector('#cycle-analytics');
+      const cycleAnalyticsService = new CycleAnalyticsService({
+        requestPath: cycleAnalyticsEl.dataset.requestPath,
+      });
+
+      return {
+        store: CycleAnalyticsStore,
+        state: CycleAnalyticsStore.state,
+        isLoading: false,
+        isLoadingStage: false,
+        isEmptyStage: false,
+        hasError: false,
+        startDate: 30,
+        isOverviewDialogDismissed: Cookies.get(OVERVIEW_DIALOG_COOKIE),
+        service: cycleAnalyticsService,
+      };
     },
     computed: {
       currentStage() {
-        return cycleAnalyticsStore.currentActiveStage();
+        return this.store.currentActiveStage();
       },
     },
     components: {
@@ -56,7 +60,7 @@ $(() => {
     },
     methods: {
       handleError() {
-        cycleAnalyticsStore.setErrorState(true);
+        this.store.setErrorState(true);
         return new Flash('There was an error while fetching cycle analytics data.');
       },
       initDropdown() {
@@ -77,17 +81,17 @@ $(() => {
 
         this.isLoading = true;
 
-        cycleAnalyticsService
+        this.service
           .fetchCycleAnalyticsData(fetchOptions)
-          .done((response) => {
-            cycleAnalyticsStore.setCycleAnalyticsData(response);
+          .then(resp => resp.json())
+          .then((response) => {
+            this.store.setCycleAnalyticsData(response);
             this.selectDefaultStage();
             this.initDropdown();
+            this.isLoading = false;
           })
-          .error(() => {
+          .catch(() => {
             this.handleError();
-          })
-          .always(() => {
             this.isLoading = false;
           });
       },
@@ -100,27 +104,27 @@ $(() => {
         if (this.currentStage === stage) return;
 
         if (!stage.isUserAllowed) {
-          cycleAnalyticsStore.setActiveStage(stage);
+          this.store.setActiveStage(stage);
           return;
         }
 
         this.isLoadingStage = true;
-        cycleAnalyticsStore.setStageEvents([], stage);
-        cycleAnalyticsStore.setActiveStage(stage);
+        this.store.setStageEvents([], stage);
+        this.store.setActiveStage(stage);
 
-        cycleAnalyticsService
+        this.service
           .fetchStageData({
             stage,
             startDate: this.startDate,
           })
-          .done((response) => {
+          .then(resp => resp.json())
+          .then((response) => {
             this.isEmptyStage = !response.events.length;
-            cycleAnalyticsStore.setStageEvents(response.events, stage);
+            this.store.setStageEvents(response.events, stage);
+            this.isLoadingStage = false;
           })
-          .error(() => {
+          .catch(() => {
             this.isEmptyStage = true;
-          })
-          .always(() => {
             this.isLoadingStage = false;
           });
       },

app/assets/javascripts/cycle_analytics/cycle_analytics_service.js

-/* eslint-disable no-param-reassign */
+import Vue from 'vue';
+import VueResource from 'vue-resource';
 
-const global = window.gl || (window.gl = {});
-global.cycleAnalytics = global.cycleAnalytics || {};
+Vue.use(VueResource);
 
-class CycleAnalyticsService {
+export default class CycleAnalyticsService {
   constructor(options) {
     this.requestPath = options.requestPath;
+    this.cycleAnalytics = Vue.resource(this.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,
-        },
-      },
-    });
+  fetchCycleAnalyticsData(options = { startDate: 30 }) {
+    return this.cycleAnalytics.get({ cycle_analytics: { start_date: options.startDate } });
   }
 
   fetchStageData(options) {
@@ -30,12 +19,12 @@ class CycleAnalyticsService {
       startDate,
     } = options;
 
-    return $.get(`${this.requestPath}/events/${stage.name}.json`, {
-      cycle_analytics: {
-        start_date: startDate,
+    return Vue.http.get(`${this.requestPath}/events/${stage.name}.json`, {
+      params: {
+        cycle_analytics: {
+          start_date: startDate,
+        },
       },
     });
   }
 }
-
-global.cycleAnalytics.CycleAnalyticsService = CycleAnalyticsService;

app/assets/javascripts/cycle_analytics/cycle_analytics_store.js

@@ -4,9 +4,6 @@ import { __ } from '../locale';
 import '../lib/utils/text_utility';
 import DEFAULT_EVENT_OBJECTS from './default_event_objects';
 
-const global = window.gl || (window.gl = {});
-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.'),
@@ -17,7 +14,7 @@ const EMPTY_STAGE_TEXTS = {
   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 = {
+export default {
   state: {
     summary: '',
     stats: '',

app/assets/javascripts/fly_out_nav.js

@@ -34,7 +34,7 @@ export const canShowActiveSubItems = (el) => {
 export const canShowSubItems = () => bp.getBreakpointSize() === 'sm' || bp.getBreakpointSize() === 'md' || bp.getBreakpointSize() === 'lg';
 
 export const getHideSubItemsInterval = () => {
-  if (!currentOpenMenu) return 0;
+  if (!currentOpenMenu || !mousePos.length) return 0;
 
   const currentMousePos = mousePos[mousePos.length - 1];
   const prevMousePos = mousePos[0];

app/assets/javascripts/help/help.js

+// We will render the icons list here
+if ($('#user-content-gitlab-icons').length > 0) {
+  const $iconsHeader = $('#user-content-gitlab-icons');
+  const $iconsList = $('<div id="iconsList">ICONS</div>');
+  $($iconsList).insertAfter($iconsHeader.parent());
+}

app/assets/javascripts/lib/utils/common_utils.js

@@ -408,6 +408,10 @@ export const setCiStatusFavicon = (pageUrl) => {
   });
 };
 
+export const spriteIcon = icon => `<svg><use xlink:href="${gon.sprite_icons}#${icon}" /></svg>`;
+
+export const imagePath = imgUrl => `${gon.asset_host || ''}${gon.relative_url_root || ''}/assets/${imgUrl}`;
+
 window.gl = window.gl || {};
 window.gl.utils = {
   ...(window.gl.utils || {}),
@@ -434,4 +438,6 @@ window.gl.utils = {
   getSelectedFragment,
   insertText,
   nodeMatchesSelector,
+  spriteIcon,
+  imagePath,
 };

app/assets/javascripts/main.js

@@ -8,6 +8,7 @@ import _ from 'underscore';
 import Cookies from 'js-cookie';
 import Dropzone from 'dropzone';
 import Sortable from 'vendor/Sortable';
+import svg4everybody from 'svg4everybody';
 
 // libraries with import side-effects
 import 'mousetrap';
@@ -151,6 +152,8 @@ if (process.env.NODE_ENV !== 'production') require('./test_utils/');
 
 Dropzone.autoDiscover = false;
 
+svg4everybody();
+
 document.addEventListener('beforeunload', function () {
   // Unbind scroll events
   $(document).off('scroll');

app/assets/javascripts/merge_request_tabs.js

@@ -248,6 +248,8 @@ import {
         propsData: {
           endpoint: pipelineTableViewEl.dataset.endpoint,
           helpPagePath: pipelineTableViewEl.dataset.helpPagePath,
+          emptyStateSvgPath: pipelineTableViewEl.dataset.emptyStateSvgPath,
+          errorStateSvgPath: pipelineTableViewEl.dataset.errorStateSvgPath,
           autoDevopsHelpPath: pipelineTableViewEl.dataset.helpAutoDevopsPath,
         },
       }).$mount();

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

@@ -23,6 +23,9 @@
         settingsPath: metricsData.settingsPath,
         metricsEndpoint: metricsData.additionalMetrics,
         deploymentEndpoint: metricsData.deploymentEndpoint,
+        emptyGettingStartedSvgPath: metricsData.emptyGettingStartedSvgPath,
+        emptyLoadingSvgPath: metricsData.emptyLoadingSvgPath,
+        emptyUnableToConnectSvgPath: metricsData.emptyUnableToConnectSvgPath,
         showEmptyState: true,
         updateAspectRatio: false,
         updatedAspectRatios: 0,
@@ -109,5 +112,8 @@
     :selected-state="state"
     :documentation-path="documentationPath"
     :settings-path="settingsPath"
+    :empty-getting-started-svg-path="emptyGettingStartedSvgPath"
+    :empty-loading-svg-path="emptyLoadingSvgPath"
+    :empty-unable-to-connect-svg-path="emptyUnableToConnectSvgPath"
   />
 </template>

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

 <script>
-  import gettingStartedSvg from 'empty_states/monitoring/_getting_started.svg';
-  import loadingSvg from 'empty_states/monitoring/_loading.svg';
-  import unableToConnectSvg from 'empty_states/monitoring/_unable_to_connect.svg';
-
   export default {
     props: {
       documentationPath: {
@@ -18,24 +14,36 @@
         type: String,
         required: true,
       },
+      emptyGettingStartedSvgPath: {
+        type: String,
+        required: true,
+      },
+      emptyLoadingSvgPath: {
+        type: String,
+        required: true,
+      },
+      emptyUnableToConnectSvgPath: {
+        type: String,
+        required: true,
+      },
     },
     data() {
       return {
         states: {
           gettingStarted: {
-            svg: gettingStartedSvg,
+            svgUrl: this.emptyGettingStartedSvgPath,
             title: 'Get started with performance monitoring',
             description: 'Stay updated about the performance and health of your environment by configuring Prometheus to monitor your deployments.',
             buttonText: 'Configure Prometheus',
           },
           loading: {
-            svg: loadingSvg,
+            svgUrl: this.emptyLoadingSvgPath,
             title: 'Waiting for performance data',
             description: 'Creating graphs uses the data from the Prometheus server. If this takes a long time, ensure that data is available.',
             buttonText: 'View documentation',
           },
           unableToConnect: {
-            svg: unableToConnectSvg,
+            svgUrl: this.emptyUnableToConnectSvgPath,
             title: 'Unable to connect to Prometheus server',
             description: 'Ensure connectivity is available from the GitLab server to the ',
             buttonText: 'View documentation',
@@ -66,7 +74,9 @@
 <template>
   <div class="prometheus-state">
     <div class="row">
-      <div class="col-md-4 col-md-offset-4 state-svg" v-html="currentState.svg"></div>
+      <div class="col-md-4 col-md-offset-4 state-svg svg-content">
+        <img :src="currentState.svgUrl"/>
+      </div>
     </div>
     <div class="row">
       <div class="col-md-6 col-md-offset-3">

app/assets/javascripts/notes/components/issue_note_icons.js

-import iconArrowCircle from 'icons/_icon_arrow_circle_o_right.svg';
-import iconCheck from 'icons/_icon_check_square_o.svg';
-import iconClock from 'icons/_icon_clock_o.svg';
-import iconCodeFork from 'icons/_icon_code_fork.svg';
-import iconComment from 'icons/_icon_comment_o.svg';
-import iconCommit from 'icons/_icon_commit.svg';
-import iconEdit from 'icons/_icon_edit.svg';
-import iconEye from 'icons/_icon_eye.svg';
-import iconEyeSlash from 'icons/_icon_eye_slash.svg';
-import iconMerge from 'icons/_icon_merge.svg';
-import iconMerged from 'icons/_icon_merged.svg';
-import iconRandom from 'icons/_icon_random.svg';
-import iconClosed from 'icons/_icon_status_closed.svg';
-import iconStatusOpen from 'icons/_icon_status_open.svg';
-import iconStopwatch from 'icons/_icon_stopwatch.svg';
-import iconTags from 'icons/_icon_tags.svg';
-import iconUser from 'icons/_icon_user.svg';
-
-export default {
-  icon_arrow_circle_o_right: iconArrowCircle,
-  icon_check_square_o: iconCheck,
-  icon_clock_o: iconClock,
-  icon_code_fork: iconCodeFork,
-  icon_comment_o: iconComment,
-  icon_commit: iconCommit,
-  icon_edit: iconEdit,
-  icon_eye: iconEye,
-  icon_eye_slash: iconEyeSlash,
-  icon_merge: iconMerge,
-  icon_merged: iconMerged,
-  icon_random: iconRandom,
-  icon_status_closed: iconClosed,
-  icon_status_open: iconStatusOpen,
-  icon_stopwatch: iconStopwatch,
-  icon_tags: iconTags,
-  icon_user: iconUser,
-};

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

 <script>
   import { mapGetters } from 'vuex';
-  import iconsMap from './issue_note_icons';
   import issueNoteHeader from './issue_note_header.vue';
 
   export default {
@@ -24,9 +23,9 @@
       isTargetNote() {
         return this.targetNoteHash === this.noteAnchorId;
       },
-    },
-    created() {
-      this.svg = iconsMap[this.note.system_note_icon_name];
+      iconHtml() {
+        return gl.utils.spriteIcon(this.note.system_note_icon_name);
+      },
     },
   };
 </script>
@@ -39,7 +38,7 @@
     <div class="timeline-entry-inner">
       <div
         class="timeline-icon"
-        v-html="svg">
+        v-html="iconHtml">
       </div>
       <div class="timeline-content">
         <div class="note-header">

app/assets/javascripts/pipelines/components/empty_state.vue

 <script>
-import pipelinesEmptyStateSVG from 'empty_states/icons/_pipelines_empty.svg';
-
 export default {
   props: {
     helpPagePath: {
       type: String,
       required: true,
     },
+    emptyStateSvgPath: {
+      type: String,
+      required: true,
+    },
   },
-  data: () => ({ pipelinesEmptyStateSVG }),
 };
 </script>
 
 <template>
   <div class="row empty-state js-empty-state">
     <div class="col-xs-12">
-      <div class="svg-content" v-html="pipelinesEmptyStateSVG" />
+      <div class="svg-content">
+        <img :src="emptyStateSvgPath"/>
+      </div>
     </div>
 
     <div class="col-xs-12 text-center">

app/assets/javascripts/pipelines/components/error_state.vue

 <script>
-import pipelinesErrorStateSVG from 'empty_states/icons/_pipelines_failed.svg';
-
 export default {
-  data: () => ({ pipelinesErrorStateSVG }),
+  props: {
+    errorStateSvgPath: {
+      type: String,
+      required: true,
+    },
+  },
 };
 </script>
 
 <template>
   <div class="row empty-state js-pipelines-error-state">
     <div class="col-xs-12">
-      <div class="svg-content" v-html="pipelinesErrorStateSVG" />
+      <div class="svg-content">
+        <img :src="errorStateSvgPath"/>
+      </div>
     </div>
 
     <div class="col-xs-12 text-center">

app/assets/javascripts/pipelines/components/pipelines.vue

@@ -27,6 +27,8 @@
       return {
         endpoint: pipelinesData.endpoint,
         helpPagePath: pipelinesData.helpPagePath,
+        emptyStateSvgPath: pipelinesData.emptyStateSvgPath,
+        errorStateSvgPath: pipelinesData.errorStateSvgPath,
         autoDevopsPath: pipelinesData.helpAutoDevopsPath,
         newPipelinePath: pipelinesData.newPipelinePath,
         canCreatePipeline: pipelinesData.canCreatePipeline,
@@ -182,9 +184,13 @@
       <empty-state
         v-if="shouldRenderEmptyState"
         :help-page-path="helpPagePath"
+        :empty-state-svg-path="emptyStateSvgPath"
         />
 
-      <error-state v-if="shouldRenderErrorState" />
+      <error-state 
+        v-if="shouldRenderErrorState"
+        :error-state-svg-path="errorStateSvgPath"
+        />
 
       <div
         class="blank-state blank-state-no-icon"

app/assets/javascripts/pipelines/components/pipelines_actions.vue

@@ -69,8 +69,7 @@
           @click="onClickAction(action.path)"
           :class="{ disabled: isActionDisabled(action) }"
           :disabled="isActionDisabled(action)">
-          <span v-html="playIconSvg"></span>
-          <span>{{action.name}}</span>
+          {{action.name}}
         </button>
       </li>
     </ul>

app/assets/javascripts/pipelines/components/pipelines_artifacts.vue

@@ -39,11 +39,7 @@
           rel="nofollow"
           download
           :href="artifact.path">
-          <i
-            class="fa fa-download"
-            aria-hidden="true">
-          </i>
-          <span>Download {{artifact.name}} artifacts</span>
+          Download {{artifact.name}} artifacts
         </a>
       </li>
     </ul>

app/assets/javascripts/repo/helpers/repo_helper.js

@@ -178,8 +178,8 @@ const RepoHelper = {
 
   setFile(data, file) {
     const newFile = data;
+    newFile.url = file.url || Service.url; // Grab the URL from service, happens on page refresh.
 
-    newFile.url = file.url;
     if (newFile.render_error === 'too_large' || newFile.render_error === 'collapsed') {
       newFile.tooLarge = true;
     }

app/assets/javascripts/vue_shared/components/table_pagination.vue

 <script>
+import { s__ } from '../../locale';
+
 const PAGINATION_UI_BUTTON_LIMIT = 4;
 const UI_LIMIT = 6;
 const SPREAD = '...';
-const PREV = 'Prev';
-const NEXT = 'Next';
-const FIRST = '« First';
-const LAST = 'Last »';
+const PREV = s__('Pagination|Prev');
+const NEXT = s__('Pagination|Next');
+const FIRST = s__('Pagination|« First');
+const LAST = s__('Pagination|Last »');
 
 export default {
   props: {

app/assets/stylesheets/framework/awards.scss

@@ -9,6 +9,7 @@
 }
 
 .emoji-menu {
+  display: none;
   position: absolute;
   top: 0;
   margin-top: 3px;
@@ -27,6 +28,10 @@
   transition: .3s cubic-bezier(.67, .06, .19, 1.44);
   transition-property: transform, opacity;
 
+  &.is-rendered {
+    display: block;
+  }
+
   &.is-aligned-right {
     transform-origin: 100% -45px;
   }

app/assets/stylesheets/framework/blocks.scss

@@ -260,7 +260,7 @@
   position: relative;
   border: 1px solid $blue-300;
   border-radius: $border-radius-default;
-  background-color: $blue-25;
+  background-color: $blue-50;
   justify-content: center;
 
   .dismiss-button {
@@ -319,16 +319,6 @@
     padding: $gl-padding;
   }
 
-  .svg-content {
-    text-align: center;
-
-    svg {
-      max-width: 425px;
-      width: 100%;
-      padding: $gl-padding;
-    }
-  }
-
   .emoji-icon {
     display: inline-block;
   }

app/assets/stylesheets/framework/dropdowns.scss

@@ -779,6 +779,14 @@
         white-space: normal;
         width: 100%;
 
+        &.dropdown-menu-user-link {
+          white-space: nowrap;
+
+          .dropdown-menu-user-username {
+            display: block;
+          }
+        }
+
         // make sure the text color is not overriden
         &.text-danger {
           color: $brand-danger;

app/assets/stylesheets/framework/gitlab-theme.scss

@@ -6,7 +6,7 @@
   // Header
 
   header.navbar-gitlab-new {
-    background: linear-gradient(to right, $color-900, $color-800);
+    background-color: $color-900;
 
     .navbar-collapse {
       color: $color-200;
@@ -201,7 +201,7 @@ body {
     @include gitlab-theme($theme-gray-900, $theme-gray-700, $theme-gray-800, $theme-gray-700, $theme-gray-700, $theme-gray-100, $theme-gray-700);
 
     header.navbar-gitlab-new {
-      background: $theme-gray-100;
+      background-color: $theme-gray-100;
       box-shadow: 0 2px 0 0 $border-color;
 
       .logo-text svg {
@@ -242,10 +242,10 @@ body {
 
         &:hover {
           background-color: $white-light;
-          box-shadow: inset 0 0 0 1px $blue-100;
+          box-shadow: inset 0 0 0 1px $blue-200;
 
           .location-badge {
-            box-shadow: inset 0 0 0 1px $blue-100;
+            box-shadow: inset 0 0 0 1px $blue-200;
           }
         }
       }

app/assets/stylesheets/framework/images.scss

@@ -9,3 +9,27 @@
   padding: 10px;
   margin-bottom: 10px;
 }
+
+.svg-content {
+  text-align: center;
+  padding: $gl-padding;
+
+  svg,
+  img {
+    max-width: 425px;
+    width: 100%;
+  }
+}
+
+@mixin svg-size($size) {
+  width: $size;
+  height: $size;
+}
+
+svg {
+  &.s16 { @include svg-size(16px); }
+  &.s24 { @include svg-size(24px); }
+  &.s32 { @include svg-size(32px); }
+  &.s48 { @include svg-size(48px); }
+  &.s72 { @include svg-size(72px); }
+}

app/assets/stylesheets/framework/mixins.scss

@@ -142,5 +142,5 @@
 }
 
 @mixin green-status-color {
-  @include status-color($green-50, $green-500, $green-700);
+  @include status-color($green-100, $green-500, $green-700);
 }

app/assets/stylesheets/framework/tw_bootstrap_variables.scss

@@ -137,7 +137,7 @@ $well-border: #eee;
 //##
 
 $code-color: $red-600;
-$code-bg: lighten($red-50, 2%);
+$code-bg: lighten($red-100, 2%);
 
 $kbd-color: $white-light;
 $kbd-bg: #333;

app/assets/stylesheets/framework/variables.scss

@@ -27,46 +27,45 @@ $gray-dark: darken($gray-light, $darken-dark-factor);
 $gray-darker: #eee;
 $gray-darkest: #c4c4c4;
 
-$green-25: #f6fcf8;
-$green-50: #e4f5eb;
-$green-100: #bae6cc;
-$green-200: #8dd5aa;
-$green-300: #5fc488;
-$green-400: #3cb76f;
+$green-50: #f1fdf6;
+$green-100: #dcf5e7;
+$green-200: #b3e6c8;
+$green-300: #75d09b;
+$green-400: #37b96d;
 $green-500: #1aaa55;
 $green-600: #168f48;
 $green-700: #12753a;
 $green-800: #0e5a2d;
 $green-900: #0a4020;
+$green-950: #072b15;
 
-$blue-25: #f6fafd;
-$blue-50: #e4eff9;
-$blue-100: #bcd7f1;
-$blue-200: #8fbce8;
-$blue-300: #62a1df;
-$blue-400: #418cd8;
+$blue-50: #f6fafe;
+$blue-100: #e4f0fb;
+$blue-200: #b8d6f4;
+$blue-300: #73afea;
+$blue-400: #2e87e0;
 $blue-500: #1f78d1;
 $blue-600: #1b69b6;
 $blue-700: #17599c;
 $blue-800: #134a81;
 $blue-900: #0f3b66;
+$blue-950: #0a2744;
 
-$orange-25: #fffcf8;
-$orange-50: #fff2e1;
-$orange-100: #fedfb3;
-$orange-200: #feca81;
-$orange-300: #fdb44f;
-$orange-400: #fca429;
+$orange-50: #fffaf4;
+$orange-100: #fff1de;
+$orange-200: #fed69f;
+$orange-300: #fdbc60;
+$orange-400: #fca121;
 $orange-500: #fc9403;
 $orange-600: #de7e00;
 $orange-700: #c26700;
-$orange-800: #a35100;
-$orange-900: #853b00;
+$orange-800: #a35200;
+$orange-900: #853c00;
+$orange-950: #592800;
 
-$red-25: #fef7f6;
-$red-50: #fbe7e4;
-$red-100: #f4c4bc;
-$red-200: #ed9d90;
+$red-50: #fef6f5;
+$red-100: #fbe5e1;
+$red-200: #f2b4a9;
 $red-300: #e67664;
 $red-400: #e05842;
 $red-500: #db3b21;
@@ -74,6 +73,7 @@ $red-600: #c0341d;
 $red-700: #a62d19;
 $red-800: #8b2615;
 $red-900: #711e11;
+$red-950: #4b140b;
 
 // GitLab themes
 
@@ -184,8 +184,8 @@ $list-text-disabled-color: $gl-text-color-tertiary;
 $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-bg: $orange-100;
+$list-warning-row-border: $orange-200;
 $list-warning-row-color: $orange-700;
 
 /*
@@ -214,8 +214,8 @@ $gl-sidebar-padding: 22px;
 /*
  * Misc
  */
-$row-hover: $blue-25;
-$row-hover-border: $blue-100;
+$row-hover: $blue-50;
+$row-hover-border: $blue-200;
 $progress-color: #c0392b;
 $header-height: 50px;
 $new-navbar-height: 40px;
@@ -265,8 +265,8 @@ $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-bg: $orange-100;
+$warning-message-border: $orange-200;
 $warning-message-color: $orange-700;
 $control-group-descr-color: #666;
 $table-permission-x-bg: #d9edf7;
@@ -451,17 +451,17 @@ $builds-trace-bg: #111;
 /*
 * Callout
 */
-$callout-danger-bg: $red-50;
-$callout-danger-border: $red-100;
+$callout-danger-bg: $red-100;
+$callout-danger-border: $red-200;
 $callout-danger-color: $red-700;
-$callout-warning-bg: $orange-50;
-$callout-warning-border: $orange-100;
+$callout-warning-bg: $orange-100;
+$callout-warning-border: $orange-200;
 $callout-warning-color: $orange-700;
-$callout-info-bg: $blue-50;
-$callout-info-border: $blue-100;
+$callout-info-bg: $blue-100;
+$callout-info-border: $blue-200;
 $callout-info-color: $blue-700;
-$callout-success-bg: $green-50;
-$callout-success-border: $green-100;
+$callout-success-bg: $green-100;
+$callout-success-border: $green-200;
 $callout-success-color: $green-700;
 
 /*

app/assets/stylesheets/pages/convdev_index.scss

@@ -83,7 +83,7 @@ $space-between-cards: 8px;
   border-top-color: $color-low-score;
 
   .card-score-big {
-    background-color: $red-25;
+    background-color: $red-50;
   }
 }
 
@@ -91,7 +91,7 @@ $space-between-cards: 8px;
   border-top-color: $color-average-score;
 
   .card-score-big {
-    background-color: $orange-25;
+    background-color: $orange-50;
   }
 }
 
@@ -99,7 +99,7 @@ $space-between-cards: 8px;
   border-top-color: $color-high-score;
 
   .card-score-big {
-    background-color: $green-25;
+    background-color: $green-50;
   }
 }
 

app/assets/stylesheets/pages/issuable.scss

@@ -7,7 +7,7 @@
 
 .is-confidential {
   color: $orange-600;
-  background-color: $orange-50;
+  background-color: $orange-100;
   border-radius: $border-radius-default;
   padding: 5px;
   margin: 0 3px 0 -4px;

app/assets/stylesheets/pages/merge_conflicts.scss

@@ -255,7 +255,7 @@ $colors: (
 
     &.saved {
       .editor {
-        border-top: solid 2px $green-200;
+        border-top: solid 2px $green-300;
       }
     }
 

app/assets/stylesheets/pages/note_form.scss

@@ -103,7 +103,7 @@
 
 .confidential-issue-warning {
   color: $orange-600;
-  background-color: $orange-50;
+  background-color: $orange-100;
   border-radius: $border-radius-default $border-radius-default 0 0;
   border: 1px solid $border-gray-normal;
   border-bottom: none;

app/assets/stylesheets/pages/pipelines.scss

@@ -644,20 +644,20 @@ button.mini-pipeline-graph-dropdown-toggle {
 
   // Dropdown button animation in mini pipeline graph
   &.ci-status-icon-success {
-    @include mini-pipeline-graph-color($green-50, $green-500, $green-600);
+    @include mini-pipeline-graph-color($green-100, $green-500, $green-600);
   }
 
   &.ci-status-icon-failed {
-    @include mini-pipeline-graph-color($red-50, $red-500, $red-600);
+    @include mini-pipeline-graph-color($red-100, $red-500, $red-600);
   }
 
   &.ci-status-icon-pending,
   &.ci-status-icon-success_with_warnings {
-    @include mini-pipeline-graph-color($orange-50, $orange-500, $orange-600);
+    @include mini-pipeline-graph-color($orange-100, $orange-500, $orange-600);
   }
 
   &.ci-status-icon-running {
-    @include mini-pipeline-graph-color($blue-50, $blue-400, $blue-600);
+    @include mini-pipeline-graph-color($blue-100, $blue-400, $blue-600);
   }
 
   &.ci-status-icon-canceled,

app/assets/stylesheets/pages/profile.scss

@@ -291,7 +291,7 @@ table.u2f-registrations {
   .bordered-box {
     border: 1px solid $blue-300;
     border-radius: $border-radius-default;
-    background-color: $blue-25;
+    background-color: $blue-50;
     position: relative;
     display: flex;
     justify-content: center;
@@ -379,7 +379,7 @@ table.u2f-registrations {
 
 .nav-wip {
   border: 1px solid $blue-500;
-  background: $blue-25;
+  background: $blue-50;
   padding: $gl-padding;
   margin-bottom: $gl-padding;
 

app/assets/stylesheets/pages/status.scss

@@ -18,7 +18,7 @@
   }
 
   &.ci-failed {
-    @include status-color($red-50, $red-500, $red-600);
+    @include status-color($red-100, $red-500, $red-600);
   }
 
   &.ci-success {
@@ -39,12 +39,12 @@
   &.ci-pending,
   &.ci-failed_with_warnings,
   &.ci-success_with_warnings {
-    @include status-color($orange-50, $orange-500, $orange-700);
+    @include status-color($orange-100, $orange-500, $orange-700);
   }
 
   &.ci-info,
   &.ci-running {
-    @include status-color($blue-50, $blue-500, $blue-600);
+    @include status-color($blue-100, $blue-500, $blue-600);
   }
 
   &.ci-created,

app/controllers/concerns/issuable_collections.rb

@@ -117,19 +117,32 @@ module IssuableCollections
     key = 'issuable_sort'
 
     cookies[key] = params[:sort] if params[:sort].present?
-
-    # id_desc and id_asc are old values for these two.
-    cookies[key] = sort_value_recently_created if cookies[key] == 'id_desc'
-    cookies[key] = sort_value_oldest_created if cookies[key] == 'id_asc'
-
+    cookies[key] = update_cookie_value(cookies[key])
     params[:sort] = cookies[key]
   end
 
   def default_sort_order
     case params[:state]
-    when 'opened', 'all' then sort_value_recently_created
+    when 'opened', 'all'    then sort_value_created_date
     when 'merged', 'closed' then sort_value_recently_updated
-    else sort_value_recently_created
+    else sort_value_created_date
+    end
+  end
+
+  # Update old values to the actual ones.
+  def update_cookie_value(value)
+    case value
+    when 'id_asc'             then sort_value_oldest_created
+    when 'id_desc'            then sort_value_recently_created
+    when 'created_asc'        then sort_value_created_date
+    when 'created_desc'       then sort_value_created_date
+    when 'due_date_asc'       then sort_value_due_date
+    when 'due_date_desc'      then sort_value_due_date
+    when 'milestone_due_asc'  then sort_value_milestone
+    when 'milestone_due_desc' then sort_value_milestone
+    when 'downvotes_asc'      then sort_value_popularity
+    when 'downvotes_desc'     then sort_value_popularity
+    else value
     end
   end
 end

app/controllers/projects/tree_controller.rb

@@ -35,7 +35,10 @@ class Projects::TreeController < Projects::ApplicationController
       end
 
       format.json do
-        render json: TreeSerializer.new(project: @project, repository: @repository, ref: @ref).represent(@tree)
+        # n+1: https://gitlab.com/gitlab-org/gitlab-ce/issues/38261
+        Gitlab::GitalyClient.allow_n_plus_1_calls do
+          render json: TreeSerializer.new(project: @project, repository: @repository, ref: @ref).represent(@tree)
+        end
       end
     end
   end

app/helpers/appearances_helper.rb

@@ -30,10 +30,4 @@ module AppearancesHelper
       render 'shared/logo.svg'
     end
   end
-
-  def custom_icon(icon_name, size: 16)
-    # We can't simply do the below, because there are some .erb SVGs.
-    #  File.read(Rails.root.join("app/views/shared/icons/_#{icon_name}.svg")).html_safe
-    render "shared/icons/#{icon_name}.svg", size: size
-  end
 end

app/helpers/avatars_helper.rb

@@ -13,22 +13,29 @@ module AvatarsHelper
     user_name = options[:user].try(:name) || options[:user_name]
     avatar_url = options[:url] || avatar_icon(options[:user] || options[:user_email], avatar_size)
     has_tooltip = options[:has_tooltip].nil? ? true : options[:has_tooltip]
-    data_attributes = {}
+    data_attributes = options[:data] || {}
     css_class = %W[avatar s#{avatar_size}].push(*options[:css_class])
 
     if has_tooltip
       css_class.push('has-tooltip')
-      data_attributes = { container: 'body' }
+      data_attributes[:container] = 'body'
     end
 
-    image_tag(
-      avatar_url,
+    if options[:lazy]
+      css_class << 'lazy'
+      data_attributes[:src] = avatar_url
+      avatar_url = LazyImageTagHelper.placeholder_image
+    end
+
+    image_options = {
+      alt:   "#{user_name}'s avatar",
+      src:   avatar_url,
+      data:  data_attributes,
       class: css_class,
-      alt: "#{user_name}'s avatar",
-      title: user_name,
-      data: data_attributes,
-      lazy: true
-    )
+      title: user_name
+    }
+
+    tag(:img, image_options)
   end
 
   def user_avatar(options = {})

app/helpers/groups_helper.rb

@@ -125,7 +125,7 @@ module GroupsHelper
   end
 
   def default_help
-    s_("GroupSettings|This setting will be applied to all subgroups unless overridden by a group owner.")
+    s_("GroupSettings|This setting will be applied to all subgroups unless overridden by a group owner. Groups that already have access to the project will continue to have access unless removed manually.")
   end
 
   def ancestor_locked_but_you_can_override(group)

app/helpers/icons_helper.rb

@@ -17,6 +17,18 @@ module IconsHelper
     options.include?(:base) ? fa_stacked_icon(names, options) : fa_icon(names, options)
   end
 
+  def custom_icon(icon_name, size: 16)
+    # We can't simply do the below, because there are some .erb SVGs.
+    #  File.read(Rails.root.join("app/views/shared/icons/_#{icon_name}.svg")).html_safe
+    render "shared/icons/#{icon_name}.svg", size: size
+  end
+
+  def sprite_icon(icon_name, size: nil, css_class: nil)
+    css_classes = size ? "s#{size}" : nil
+    css_classes << " #{css_class}" unless css_class.blank?
+    content_tag(:svg, content_tag(:use, "", { "xlink:href" => "#{image_path('icons.svg')}##{icon_name}" } ), class: css_classes)
+  end
+
   def audit_icon(names, options = {})
     case names
     when "standard"

app/helpers/projects_helper.rb

@@ -239,8 +239,8 @@ module ProjectsHelper
     end
   end
 
-  def has_projects_or_name?(projects, params)
-    !!(params[:name] || any_projects?(projects))
+  def show_projects?(projects, params)
+    !!(params[:personal] || params[:name] || any_projects?(projects))
   end
 
   private

app/helpers/system_note_helper.rb

 module SystemNoteHelper
   ICON_NAMES_BY_ACTION = {
-    'commit' => 'icon_commit',
-    'description' => 'icon_edit',
-    'merge' => 'icon_merge',
-    'merged' => 'icon_merged',
-    'opened' => 'icon_status_open',
-    'closed' => 'icon_status_closed',
-    'time_tracking' => 'icon_stopwatch',
-    'assignee' => 'icon_user',
-    'title' => 'icon_edit',
-    'task' => 'icon_check_square_o',
-    'label' => 'icon_tags',
-    'cross_reference' => 'icon_random',
-    'branch' => 'icon_code_fork',
-    'confidential' => 'icon_eye_slash',
-    'visible' => 'icon_eye',
-    'milestone' => 'icon_clock_o',
-    'discussion' => 'icon_comment_o',
-    'moved' => 'icon_arrow_circle_o_right',
-    'outdated' => 'icon_edit',
-    'duplicate' => 'icon_clone'
+    'commit' => 'commit',
+    'description' => 'pencil',
+    'merge' => 'git-merge',
+    'merged' => 'git-merge',
+    'opened' => 'issue-open',
+    'closed' => 'issue-close',
+    'time_tracking' => 'timer',
+    'assignee' => 'user',
+    'title' => 'pencil',
+    'task' => 'task-done',
+    'label' => 'label',
+    'cross_reference' => 'comment-dots',
+    'branch' => 'fork',
+    'confidential' => 'eye-slash',
+    'visible' => 'eye',
+    'milestone' => 'clock',
+    'discussion' => 'comment',
+    'moved' => 'arrow-right',
+    'outdated' => 'pencil',
+    'duplicate' => 'issue-duplicate'
   }.freeze
 
   def system_note_icon_name(note)
@@ -28,7 +28,7 @@ module SystemNoteHelper
 
   def icon_for_system_note(note)
     icon_name = system_note_icon_name(note)
-    custom_icon(icon_name) if icon_name
+    sprite_icon(icon_name) if icon_name
   end
 
   extend self

app/models/ci/runner.rb

@@ -174,7 +174,7 @@ module Ci
     end
 
     def assignable_for?(project)
-      !locked? || projects.exists?(id: project.id)
+      is_shared? || projects.exists?(id: project.id)
     end
 
     def accepting_tags?(build)

app/models/concerns/issuable.rb

@@ -143,16 +143,18 @@ module Issuable
     end
 
     def sort(method, excluded_labels: [])
-      sorted = case method.to_s
-               when 'milestone_due_asc' then order_milestone_due_asc
-               when 'milestone_due_desc' then order_milestone_due_desc
-               when 'downvotes_desc' then order_downvotes_desc
-               when 'upvotes_desc' then order_upvotes_desc
-               when 'label_priority' then order_labels_priority(excluded_labels: excluded_labels)
-               when 'priority' then order_due_date_and_labels_priority(excluded_labels: excluded_labels)
-               else
-                 order_by(method)
-               end
+      sorted =
+        case method.to_s
+        when 'downvotes_desc'     then order_downvotes_desc
+        when 'label_priority'     then order_labels_priority(excluded_labels: excluded_labels)
+        when 'milestone'          then order_milestone_due_asc
+        when 'milestone_due_asc'  then order_milestone_due_asc
+        when 'milestone_due_desc' then order_milestone_due_desc
+        when 'popularity'         then order_upvotes_desc
+        when 'priority'           then order_due_date_and_labels_priority(excluded_labels: excluded_labels)
+        when 'upvotes_desc'       then order_upvotes_desc
+        else order_by(method)
+        end
 
       # Break ties with the ID column for pagination
       sorted.order(id: :desc)
@@ -214,7 +216,7 @@ module Issuable
     def grouping_columns(sort)
       grouping_columns = [arel_table[:id]]
 
-      if %w(milestone_due_desc milestone_due_asc).include?(sort)
+      if %w(milestone_due_desc milestone_due_asc milestone).include?(sort)
         milestone_table = Milestone.arel_table
         grouping_columns << milestone_table[:id]
         grouping_columns << milestone_table[:due_date]

app/models/concerns/sortable.rb

@@ -19,14 +19,15 @@ module Sortable
   module ClassMethods
     def order_by(method)
       case method.to_s
-      when 'name_asc' then order_name_asc
-      when 'name_desc' then order_name_desc
-      when 'updated_asc' then order_updated_asc
-      when 'updated_desc' then order_updated_desc
-      when 'created_asc' then order_created_asc
+      when 'created_asc'  then order_created_asc
+      when 'created_date' then order_created_desc
       when 'created_desc' then order_created_desc
-      when 'id_desc' then order_id_desc
-      when 'id_asc' then order_id_asc
+      when 'id_asc'       then order_id_asc
+      when 'id_desc'      then order_id_desc
+      when 'name_asc'     then order_name_asc
+      when 'name_desc'    then order_name_desc
+      when 'updated_asc'  then order_updated_asc
+      when 'updated_desc' then order_updated_desc
       else
         all
       end

app/models/issue.rb

@@ -116,7 +116,8 @@ class Issue < ActiveRecord::Base
 
   def self.sort(method, excluded_labels: [])
     case method.to_s
-    when 'due_date_asc' then order_due_date_asc
+    when 'due_date'      then order_due_date_asc
+    when 'due_date_asc'  then order_due_date_asc
     when 'due_date_desc' then order_due_date_desc
     else
       super

app/models/repository.rb

@@ -8,6 +8,7 @@ class Repository
   RESERVED_REFS_NAMES = %W[
     heads
     tags
+    replace
     #{REF_ENVIRONMENTS}
     #{REF_KEEP_AROUND}
     #{REF_ENVIRONMENTS}

app/views/dashboard/projects/_nav.html.haml

+.top-area
+  %ul.nav-links
+    = nav_link(html_options: { class: ("active" unless params[:personal].present?) }) do
+      = link_to s_('DashboardProjects|All'), dashboard_projects_path
+    = nav_link(html_options: { class: ("active" if params[:personal].present?) }) do
+      = link_to s_('DashboardProjects|Personal'), filter_projects_path(personal: true)

app/views/dashboard/projects/index.html.haml

@@ -10,8 +10,9 @@
 = render "projects/last_push"
 
 %div{ class: container_class }
-  - if has_projects_or_name?(@projects, params)
+  - if show_projects?(@projects, params)
     = render 'dashboard/projects_head'
+    = render 'nav'
     = render 'projects'
   - else
     = render "zero_authorized_projects"

app/views/dashboard/todos/index.html.haml

@@ -77,13 +77,14 @@
           %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"
+    .js-nothing-here-container.todos-all-done.hidden.svg-content
+      = image_tag 'illustrations/todos_all_done.svg'
       %h4.text-center
         You're all done!
   - elsif current_user.todos.any?
     .todos-all-done
-      = render "shared/empty_states/icons/todos_all_done.svg"
+      .svg-content
+        = image_tag 'illustrations/todos_all_done.svg'
       - if todos_filter_empty?
         %h4.text-center
           = Gitlab.config.gitlab.no_todos_messages.sample
@@ -99,8 +100,8 @@
           There are no todos to show.
   - else
     .todos-empty
-      .todos-empty-hero
-        = render "shared/empty_states/icons/todos_empty.svg"
+      .todos-empty-hero.svg-content
+        = image_tag 'illustrations/todos_empty.svg'
       .todos-empty-content
         %h4
           Todos let you see what you should do next.

app/views/help/show.html.haml

+- content_for :page_specific_javascripts do
+  = webpack_bundle_tag 'help'
 - page_title @path.split("/").reverse.map(&:humanize)
 .documentation.wiki.prepend-top-default
   = markdown @markdown

app/views/layouts/nav/sidebar/_admin.html.haml

@@ -9,7 +9,7 @@
       = nav_link(controller: %w(dashboard admin projects users groups jobs runners cohorts conversational_development_index), html_options: {class: 'home'}) do
         = link_to admin_root_path, class: 'shortcuts-tree' do
           .nav-icon-container
-            = custom_icon('overview')
+            = sprite_icon('overview')
           %span.nav-item-name
             Overview
 
@@ -55,7 +55,7 @@
       = nav_link(controller: %w(system_info background_jobs logs health_check requests_profiles)) do
         = link_to admin_system_info_path do
           .nav-icon-container
-            = custom_icon('monitoring')
+            = sprite_icon('monitor')
           %span.nav-item-name
             Monitoring
 
@@ -89,7 +89,7 @@
       = nav_link(controller: :broadcast_messages) do
         = link_to admin_broadcast_messages_path do
           .nav-icon-container
-            = custom_icon('messages')
+            = sprite_icon('messages')
           %span.nav-item-name
             Messages
         %ul.sidebar-sub-level-items.is-fly-out-only
@@ -101,7 +101,7 @@
       = nav_link(controller: [:hooks, :hook_logs]) do
         = link_to admin_hooks_path do
           .nav-icon-container
-            = custom_icon('system_hooks')
+            = sprite_icon('hook')
           %span.nav-item-name
             System Hooks
         %ul.sidebar-sub-level-items.is-fly-out-only
@@ -113,7 +113,7 @@
       = nav_link(controller: :applications) do
         = link_to admin_applications_path do
           .nav-icon-container
-            = custom_icon('applications')
+            = sprite_icon('applications')
           %span.nav-item-name
             Applications
         %ul.sidebar-sub-level-items.is-fly-out-only
@@ -125,7 +125,7 @@
       = nav_link(controller: :abuse_reports) do
         = link_to admin_abuse_reports_path do
           .nav-icon-container
-            = custom_icon('abuse_reports')
+            = sprite_icon('slight-frown')
           %span.nav-item-name
             Abuse Reports
           %span.badge.count= number_with_delimiter(AbuseReport.count(:all))
@@ -140,7 +140,7 @@
         = nav_link(controller: :spam_logs) do
           = link_to admin_spam_logs_path do
             .nav-icon-container
-              = custom_icon('spam_logs')
+              = sprite_icon('spam')
             %span.nav-item-name
               Spam Logs
           %ul.sidebar-sub-level-items.is-fly-out-only
@@ -152,7 +152,7 @@
       = nav_link(controller: :deploy_keys) do
         = link_to admin_deploy_keys_path do
           .nav-icon-container
-            = custom_icon('key')
+            = sprite_icon('key')
           %span.nav-item-name
             Deploy Keys
         %ul.sidebar-sub-level-items.is-fly-out-only
@@ -164,7 +164,7 @@
       = nav_link(controller: :services) do
         = link_to admin_application_settings_services_path do
           .nav-icon-container
-            = custom_icon('service_templates')
+            = sprite_icon('template')
           %span.nav-item-name
             Service Templates
         %ul.sidebar-sub-level-items.is-fly-out-only
@@ -176,7 +176,7 @@
       = nav_link(controller: :labels) do
         = link_to admin_labels_path do
           .nav-icon-container
-            = custom_icon('labels')
+            = sprite_icon('labels')
           %span.nav-item-name
             Labels
         %ul.sidebar-sub-level-items.is-fly-out-only
@@ -188,7 +188,7 @@
       = nav_link(controller: :appearances) do
         = link_to admin_appearances_path do
           .nav-icon-container
-            = custom_icon('appearance')
+            = sprite_icon('appearance')
           %span.nav-item-name
             Appearance
         %ul.sidebar-sub-level-items.is-fly-out-only
@@ -200,7 +200,7 @@
       = nav_link(controller: :application_settings) do
         = link_to admin_application_settings_path do
           .nav-icon-container
-            = custom_icon('settings')
+            = sprite_icon('settings')
           %span.nav-item-name
             Settings
         %ul.sidebar-sub-level-items.is-fly-out-only

app/views/layouts/nav/sidebar/_group.html.haml

@@ -13,7 +13,7 @@
       = nav_link(path: ['groups#show', 'groups#activity', 'groups#subgroups'], html_options: { class: 'home' }) do
         = link_to group_path(@group) do
           .nav-icon-container
-            = custom_icon('project')
+            = sprite_icon('project')
           %span.nav-item-name
             Overview
 
@@ -36,7 +36,7 @@
       = nav_link(path: ['groups#issues', 'labels#index', 'milestones#index']) do
         = link_to issues_group_path(@group) do
           .nav-icon-container
-            = custom_icon('issues')
+            = sprite_icon('issues')
           %span.nav-item-name
             Issues
           %span.badge.count= number_with_delimiter(issues.count)
@@ -66,7 +66,7 @@
       = nav_link(path: 'groups#merge_requests') do
         = link_to merge_requests_group_path(@group) do
           .nav-icon-container
-            = custom_icon('mr_bold')
+            = sprite_icon('git-merge')
           %span.nav-item-name
             Merge Requests
           %span.badge.count= number_with_delimiter(merge_requests.count)
@@ -79,7 +79,7 @@
       = nav_link(path: 'group_members#index') do
         = link_to group_group_members_path(@group) do
           .nav-icon-container
-            = custom_icon('members')
+            = sprite_icon('users')
           %span.nav-item-name
             Members
         %ul.sidebar-sub-level-items.is-fly-out-only
@@ -91,7 +91,7 @@
         = nav_link(path: %w[groups#projects groups#edit ci_cd#show]) do
           = link_to edit_group_path(@group) do
             .nav-icon-container
-              = custom_icon('settings')
+              = sprite_icon('settings')
             %span.nav-item-name
               Settings
           %ul.sidebar-sub-level-items

app/views/layouts/nav/sidebar/_profile.html.haml

@@ -9,7 +9,7 @@
       = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do
         = link_to profile_path do
           .nav-icon-container
-            = custom_icon('profile')
+            = sprite_icon('profile')
           %span.nav-item-name
             Profile
         %ul.sidebar-sub-level-items.is-fly-out-only
@@ -20,7 +20,7 @@
       = nav_link(controller: [:accounts, :two_factor_auths]) do
         = link_to profile_account_path do
           .nav-icon-container
-            = custom_icon('account')
+            = sprite_icon('account')
           %span.nav-item-name
             Account
         %ul.sidebar-sub-level-items.is-fly-out-only
@@ -32,7 +32,7 @@
         = nav_link(controller: 'oauth/applications') do
           = link_to applications_profile_path do
             .nav-icon-container
-              = custom_icon('applications')
+              = sprite_icon('applications')
             %span.nav-item-name
               Applications
           %ul.sidebar-sub-level-items.is-fly-out-only
@@ -43,7 +43,7 @@
       = nav_link(controller: :chat_names) do
         = link_to profile_chat_names_path do
           .nav-icon-container
-            = custom_icon('chat')
+            = sprite_icon('comment')
           %span.nav-item-name
             Chat
         %ul.sidebar-sub-level-items.is-fly-out-only
@@ -54,7 +54,7 @@
       = nav_link(controller: :personal_access_tokens) do
         = link_to profile_personal_access_tokens_path do
           .nav-icon-container
-            = custom_icon('access_tokens')
+            = sprite_icon('token')
           %span.nav-item-name
             Access Tokens
         %ul.sidebar-sub-level-items.is-fly-out-only
@@ -65,7 +65,7 @@
       = nav_link(controller: :emails) do
         = link_to profile_emails_path do
           .nav-icon-container
-            = custom_icon('emails')
+            = sprite_icon('mail')
           %span.nav-item-name
             Emails
         %ul.sidebar-sub-level-items.is-fly-out-only
@@ -77,7 +77,7 @@
         = nav_link(controller: :passwords) do
           = link_to edit_profile_password_path do
             .nav-icon-container
-              = custom_icon('lock')
+              = sprite_icon('lock')
             %span.nav-item-name
               Password
           %ul.sidebar-sub-level-items.is-fly-out-only
@@ -88,7 +88,7 @@
       = nav_link(controller: :notifications) do
         = link_to profile_notifications_path do
           .nav-icon-container
-            = custom_icon('notifications')
+            = sprite_icon('notifications')
           %span.nav-item-name
             Notifications
         %ul.sidebar-sub-level-items.is-fly-out-only
@@ -99,7 +99,7 @@
       = nav_link(controller: :keys) do
         = link_to profile_keys_path do
           .nav-icon-container
-            = custom_icon('key')
+            = sprite_icon('key')
           %span.nav-item-name
             SSH Keys
         %ul.sidebar-sub-level-items.is-fly-out-only
@@ -110,7 +110,7 @@
       = nav_link(controller: :gpg_keys) do
         = link_to profile_gpg_keys_path do
           .nav-icon-container
-            = custom_icon('key_2')
+            = sprite_icon('key-2')
           %span.nav-item-name
             GPG Keys
         %ul.sidebar-sub-level-items.is-fly-out-only
@@ -121,7 +121,7 @@
       = nav_link(controller: :preferences) do
         = link_to profile_preferences_path do
           .nav-icon-container
-            = custom_icon('preferences')
+            = sprite_icon('preferences')
           %span.nav-item-name
             Preferences
         %ul.sidebar-sub-level-items.is-fly-out-only
@@ -132,7 +132,7 @@
       = nav_link(path: 'profiles#audit_log') do
         = link_to audit_log_profile_path do
           .nav-icon-container
-            = custom_icon('authentication_log')
+            = sprite_icon('log')
           %span.nav-item-name
             Authentication log
         %ul.sidebar-sub-level-items.is-fly-out-only

app/views/layouts/nav/sidebar/_project.html.haml

@@ -11,7 +11,7 @@
       = nav_link(path: ['projects#show', 'projects#activity', 'cycle_analytics#show'], html_options: { class: 'home' }) do
         = link_to project_path(@project), class: 'shortcuts-project' do
           .nav-icon-container
-            = custom_icon('project')
+            = sprite_icon('project')
           %span.nav-item-name
             Overview
 
@@ -38,7 +38,7 @@
         = nav_link(controller: %w(tree blob blame edit_tree new_tree find_file commit commits compare projects/repositories tags branches releases graphs network)) do
           = link_to project_tree_path(@project), class: 'shortcuts-tree' do
             .nav-icon-container
-              = custom_icon('doc_text')
+              = sprite_icon('doc_text')
             %span.nav-item-name
               Repository
 
@@ -84,7 +84,7 @@
         = nav_link(controller: %w[projects/registry/repositories]) do
           = link_to project_container_registry_index_path(@project), class: 'shortcuts-container-registry' do
             .nav-icon-container
-              = custom_icon('container_registry')
+              = sprite_icon('disk')
             %span.nav-item-name
               Registry
 
@@ -92,7 +92,7 @@
         = nav_link(controller: @project.issues_enabled? ? [:issues, :labels, :milestones, :boards] : :issues) do
           = link_to project_issues_path(@project), class: 'shortcuts-issues' do
             .nav-icon-container
-              = custom_icon('issues')
+              = sprite_icon('issues')
             %span.nav-item-name
               Issues
             - if @project.issues_enabled?
@@ -132,7 +132,7 @@
         = nav_link(controller: @project.issues_enabled? ? :merge_requests : [:merge_requests, :labels, :milestones]) do
           = link_to project_merge_requests_path(@project), class: 'shortcuts-merge_requests' do
             .nav-icon-container
-              = custom_icon('mr_bold')
+              = sprite_icon('git-merge')
             %span.nav-item-name
               Merge Requests
             %span.badge.count.merge_counter.js-merge-counter
@@ -149,7 +149,7 @@
         = nav_link(controller: [:pipelines, :builds, :jobs, :pipeline_schedules, :environments, :artifacts]) do
           = link_to project_pipelines_path(@project), class: 'shortcuts-pipelines' do
             .nav-icon-container
-              = custom_icon('pipeline')
+              = sprite_icon('pipeline')
             %span.nav-item-name
               CI / CD
 
@@ -193,7 +193,7 @@
         = nav_link(controller: :wikis) do
           = link_to get_project_wiki_path(@project), class: 'shortcuts-wiki' do
             .nav-icon-container
-              = custom_icon('wiki')
+              = sprite_icon('book')
             %span.nav-item-name
               Wiki
           %ul.sidebar-sub-level-items.is-fly-out-only
@@ -206,7 +206,7 @@
         = nav_link(controller: :snippets) do
           = link_to project_snippets_path(@project), class: 'shortcuts-snippets' do
             .nav-icon-container
-              = custom_icon('snippets')
+              = sprite_icon('snippet')
             %span.nav-item-name
               Snippets
           %ul.sidebar-sub-level-items.is-fly-out-only
@@ -219,7 +219,7 @@
         = nav_link(path: %w[projects#edit project_members#index integrations#show services#edit repository#show ci_cd#show pages#show]) do
           = link_to edit_project_path(@project), class: 'shortcuts-tree' do
             .nav-icon-container
-              = custom_icon('settings')
+              = sprite_icon('settings')
             %span.nav-item-name
               Settings
 
@@ -263,7 +263,7 @@
         = nav_link(path: %w[members#show]) do
           = link_to project_settings_members_path(@project), title: 'Members', class: 'shortcuts-tree' do
             .nav-icon-container
-              = custom_icon('members')
+              = sprite_icon('users')
             %span.nav-item-name
               Members
 

app/views/projects/branches/_branch.html.haml

@@ -13,20 +13,23 @@
     - 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}" }
-        merged
+      %span.label.label-info.has-tooltip{ title: s_('Branches|Merged into %{default_branch}') % { default_branch: @repository.root_ref } }
+        = s_('Branches|merged')
 
     - if protected_branch?(@project, branch)
       %span.label.label-success
-        protected
+        = s_('Branches|protected')
     .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
+          = _('Merge request')
 
       - if branch.name != @repository.root_ref
-        = link_to project_compare_index_path(@project, from: @repository.root_ref, to: branch.name), class: "btn btn-default #{'prepend-left-10' unless merge_project}", method: :post, title: "Compare" do
-          Compare
+        = link_to project_compare_index_path(@project, from: @repository.root_ref, to: branch.name),
+          class: "btn btn-default #{'prepend-left-10' unless merge_project}",
+          method: :post,
+          title: s_('Branches|Compare') do
+          = s_('Branches|Compare')
 
       = render 'projects/buttons/download', project: @project, ref: branch.name, pipeline: @refs_pipelines[branch.name]
 
@@ -34,12 +37,12 @@
         - if branch.name == @project.repository.root_ref
           %button{ class: "btn btn-remove remove-row js-ajax-loading-spinner has-tooltip disabled",
             disabled: true,
-            title: "The default branch cannot be deleted" }
+            title: s_('Branches|The default branch cannot be deleted') }
             = icon("trash-o")
         - elsif protected_branch?(@project, branch)
           - if can?(current_user, :delete_protected_branch, @project)
             %button{ class: "btn btn-remove remove-row js-ajax-loading-spinner has-tooltip",
-              title: "Delete protected branch",
+              title: s_('Branches|Delete protected branch'),
               data: { toggle: "modal",
                 target: "#modal-delete-branch",
                 delete_path: project_branch_path(@project, branch.name),
@@ -49,20 +52,22 @@
           - else
             %button{ class: "btn btn-remove remove-row js-ajax-loading-spinner has-tooltip disabled",
               disabled: true,
-              title: "Only a project master or owner can delete a protected branch" }
+              title: s_('Branches|Only a project master or owner can delete a protected branch') }
               = icon("trash-o")
         - else
           = link_to project_branch_path(@project, branch.name),
             class: "btn btn-remove remove-row js-ajax-loading-spinner has-tooltip",
-            title: "Delete branch",
+            title: s_('Branches|Delete branch'),
             method: :delete,
-            data: { confirm: "Deleting the '#{branch.name}' branch cannot be undone. Are you sure?" },
+            data: { confirm: s_("Branches|Deleting the '%{branch_name}' branch cannot be undone. Are you sure?") % { branch_name: branch.name } },
             remote: true,
-            "aria-label" => "Delete branch" do
+            'aria-label' => s_('Branches|Delete branch') do
             = icon("trash-o")
 
     - if branch.name != @repository.root_ref
-      .divergence-graph{ title: "#{number_commits_behind} commits behind #{@repository.root_ref}, #{number_commits_ahead} commits ahead" }
+      .divergence-graph{ title: s_('%{number_commits_behind} commits behind %{default_branch}, %{number_commits_ahead} commits ahead') % { number_commits_behind: number_commits_behind,
+        default_branch: @repository.root_ref,
+        number_commits_ahead: number_commits_ahead } }
         .graph-side
           .bar.bar-behind{ style: "width: #{number_commits_behind * bar_graph_width_factor}%" }
           %span.count.count-behind= number_commits_behind
@@ -76,4 +81,4 @@
     = render 'projects/branches/commit', commit: commit, project: @project
   - else
     %p
-      Cant find HEAD commit for this branch
+      = s_('Branches|Cant find HEAD commit for this branch')

app/views/projects/branches/_delete_protected_modal.html.haml

@@ -4,36 +4,38 @@
       .modal-header
         %button.close{ data: { dismiss: 'modal' } } ×
         %h3.page-title
-          Delete protected branch
-          = surround "'", "'?" do
+          - title_branch_name = capture do
             %span.js-branch-name.ref-name>[branch name]
+          = s_("Branches|Delete protected branch '%{branch_name}'?").html_safe % { branch_name: title_branch_name }
 
       .modal-body
         %p
-          You’re about to permanently delete the protected branch
-          = succeed '.' do
-            %strong.js-branch-name.ref-name [branch name]
+          - branch_name = capture do
+            %strong.js-branch-name.ref-name>[branch name]
+          = s_('Branches|You’re about to permanently delete the protected branch %{branch_name}.').html_safe % { branch_name: branch_name }
         %p.js-not-merged
           - default_branch = capture do
             %span.ref-name= @repository.root_ref
-          = s_("Branches|This branch hasn’t been merged into %{default_branch}.").html_safe % { default_branch: default_branch }
-          = s_("Branches|To avoid data loss, consider merging this branch before deleting it.")
+          = s_('Branches|This branch hasn’t been merged into %{default_branch}.').html_safe % { default_branch: default_branch }
+          = s_('Branches|To avoid data loss, consider merging this branch before deleting it.')
         %p
-          Once you confirm and press
-          = succeed ',' do
-            %strong Delete protected branch
-          it cannot be undone or recovered.
+          - delete_protected_branch = capture do
+            %strong
+              = s_('Branches|Delete protected branch')
+          = s_('Branches|Once you confirm and press %{delete_protected_branch}, it cannot be undone or recovered.').html_safe % { delete_protected_branch: delete_protected_branch }
         %p
-          %strong To confirm, type
-          %kbd.js-branch-name [branch name]
+          - branch_name_confirmation = capture do
+            %kbd.js-branch-name [branch name]
+          %strong
+            = s_('Branches|To confirm, type %{branch_name_confirmation}:').html_safe % { branch_name_confirmation: branch_name_confirmation }
 
         .form-group
         = text_field_tag 'delete_branch_input', '', class: 'form-control js-delete-branch-input'
 
       .modal-footer
         %button.btn{ data: { dismiss: 'modal' } } Cancel
-        = link_to 'Delete protected branch', '',
+        = link_to s_('Branches|Delete protected branch'), '',
           class: "btn btn-danger js-delete-branch",
-          title: 'Delete branch',
+          title: s_('Branches|Delete branch'),
           method: :delete,
-          "aria-label" => "Delete"
+          'aria-label' => s_('Branches|Delete branch')

app/views/projects/branches/index.html.haml

 - @no_container = true
-- page_title "Branches"
+- page_title _('Branches')
 = render "projects/commits/head"
 
 %div{ class: container_class }
   .top-area.adjust
     - if can?(current_user, :admin_project, @project)
       .nav-text
-        Protected branches can be managed in
-        = link_to 'project settings', project_protected_branches_path(@project)
+        - project_settings_link = link_to s_('Branches|project settings'), project_protected_branches_path(@project)
+        = s_('Branches|Protected branches can be managed in %{project_settings_link}').html_safe % { project_settings_link: project_settings_link }
 
     .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 }
+        = search_field_tag :search, params[:search], { placeholder: s_('Branches|Filter by branch name'), id: 'branch-search', class: 'form-control search-text-input input-short', spellcheck: false }
 
       .dropdown.inline>
         %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
@@ -20,16 +20,21 @@
           = icon('chevron-down')
         %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-selectable
           %li.dropdown-header
-            Sort by
+            = s_('Branches|Sort by')
           - branches_sort_options_hash.each do |value, title|
             %li
               = link_to title, filter_branches_path(sort: value), class: ("is-active" if @sort == value)
 
       - if can? current_user, :push_code, @project
-        = link_to project_merged_branches_path(@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 project_merged_branches_path(@project),
+          class: 'btn btn-inverted btn-remove has-tooltip',
+          title: s_("Branches|Delete all branches that are merged into '%{default_branch}'") % { default_branch: @project.repository.root_ref },
+          method: :delete,
+          data: { confirm: s_('Branches|Deleting the merged branches cannot be undone. Are you sure?'),
+            container: 'body' } do
+          = s_('Branches|Delete merged branches')
         = link_to new_project_branch_path(@project), class: 'btn btn-create' do
-          New branch
+          = s_('Branches|New branch')
 
   - if @branches.any?
     %ul.content-list.all-branches
@@ -37,6 +42,7 @@
         = render "projects/branches/branch", branch: branch
     = paginate @branches, theme: 'gitlab'
   - else
-    .nothing-here-block No branches to show
+    .nothing-here-block
+      = s_('Branches|No branches to show')
 
 = render 'projects/branches/delete_protected_modal'

app/views/projects/buttons/_download.html.haml

@@ -11,19 +11,15 @@
         #{ _('Source code') }
       %li
         = link_to archive_project_repository_path(project, ref: ref, format: 'zip'), rel: 'nofollow', download: '' do
-          %i.fa.fa-download
           %span=  _('Download zip')
       %li
         = link_to archive_project_repository_path(project, ref: ref, format: 'tar.gz'), rel: 'nofollow', download: '' do
-          %i.fa.fa-download
           %span= _('Download tar.gz')
       %li
         = link_to archive_project_repository_path(project, ref: ref, format: 'tar.bz2'), rel: 'nofollow', download: '' do
-          %i.fa.fa-download
           %span= _('Download tar.bz2')
       %li
         = link_to archive_project_repository_path(project, ref: ref, format: 'tar'), rel: 'nofollow', download: '' do
-          %i.fa.fa-download
           %span= _('Download tar')
 
       - if pipeline && pipeline.latest_builds_with_artifacts.any?
@@ -36,6 +32,5 @@
         - pipeline.latest_builds_with_artifacts.each do |job|
           %li
             = link_to latest_succeeded_project_artifacts_path(project, "#{ref}/download", job: job.name), rel: 'nofollow', download: '' do
-              %i.fa.fa-download
               %span
                 #{s_('DownloadArtifacts|Download')} '#{job.name}'

app/views/projects/buttons/_dropdown.html.haml

@@ -11,19 +11,16 @@
       - if can_create_issue
         %li
           = link_to new_project_issue_path(@project) do
-            = icon('exclamation-circle fw')
             #{ _('New issue') }
 
       - if merge_project
         %li
           = link_to project_new_merge_request_path(merge_project) do
-            = icon('tasks fw')
             #{ _('New merge request') }
 
       - if can_create_snippet
         %li
           = link_to new_project_snippet_path(@project) do
-            = icon('file-text-o fw')
             #{ _('New snippet') }
 
       - if can_create_issue || merge_project || can_create_snippet
@@ -32,20 +29,16 @@
       - if can?(current_user, :push_code, @project)
         %li
           = link_to project_new_blob_path(@project, @project.default_branch || 'master') do
-            = icon('file fw')
             #{ _('New file') }
         %li
           = link_to new_project_branch_path(@project) do
-            = icon('code-fork fw')
             #{ _('New branch') }
         %li
           = link_to new_project_tag_path(@project) do
-            = icon('tags fw')
             #{ _('New tag') }
       - elsif current_user && current_user.already_forked?(@project)
         %li
           = link_to project_new_blob_path(@project, @project.default_branch || 'master') do
-            = icon('file fw')
             #{ _('New file') }
       - elsif can?(current_user, :fork_project, @project)
         %li
@@ -55,5 +48,4 @@
           - fork_path = project_forks_path(@project, namespace_key:  current_user.namespace.id,
                                                                                   continue:       continue_params)
           = link_to fork_path, method: :post do
-            = icon('file fw')
             #{ _('New file') }

app/views/projects/commit/_pipelines_list.haml

@@ -3,6 +3,8 @@
   endpoint: endpoint,
   "help-page-path" => help_page_path('ci/quick_start/README'),
   "help-auto-devops-path" => help_page_path('topics/autodevops/index.md'),
+  "empty-state-svg-path" => image_path('illustrations/pipelines_empty.svg'),
+  "error-state-svg-path" => image_path('illustrations/pipelines_failed.svg'),
 } }
 
 - content_for :page_specific_javascripts do

app/views/projects/environments/metrics.html.haml

@@ -16,6 +16,9 @@
 
   #prometheus-graphs{ data: { "settings-path": edit_project_service_path(@project, 'prometheus'),
     "documentation-path": help_page_path('administration/monitoring/prometheus/index.md'),
+    "empty-getting-started-svg-path": image_path('illustrations/monitoring/getting_started'),
+    "empty-loading-svg-path": image_path('illustrations/monitoring/loading'),
+    "empty-unable-to-connect-svg-path": image_path('illustrations/monitoring/unable_to_connect'),
     "additional-metrics": additional_metrics_project_environment_path(@project, @environment, format: :json),
     "has-metrics": "#{@environment.has_metrics?}", deployment_endpoint: project_environment_deployments_path(@project, @environment, format: :json) } }
 

app/views/projects/notes/_actions.html.haml

+- access = note_max_access_for_user(note)
 - if note.has_special_role?(Note::SpecialRole::FIRST_TIME_CONTRIBUTOR)
   %span.note-role.note-role-special.has-tooltip{ title: _("This is the author's first Merge Request to this project. Handle with care.") }
     = issuable_first_contribution_icon
-- if access = note_max_access_for_user(note)
+- if access.nonzero?
   %span.note-role.note-role-access= Gitlab::Access.human_access(access)
 
 - if note.resolvable?

app/views/projects/pipelines/index.html.haml

@@ -5,10 +5,11 @@
 %div{ 'class' => container_class }
   - if show_auto_devops_callout?(@project)
     = render 'shared/auto_devops_callout'
-
   #pipelines-list-vue{ data: { endpoint: project_pipelines_path(@project, format: :json),
     "help-page-path" => help_page_path('ci/quick_start/README'),
     "help-auto-devops-path" => help_page_path('topics/autodevops/index.md'),
+    "empty-state-svg-path" => image_path('illustrations/pipelines_empty.svg'),
+    "error-state-svg-path" => image_path('illustrations/pipelines_failed.svg'),
     "new-pipeline-path" => new_project_pipeline_path(@project),
     "can-create-pipeline" => can?(current_user, :create_pipeline, @project).to_s,
     "all-path" =>  project_pipelines_path(@project),
@@ -17,7 +18,7 @@
     "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" => @project.has_ci?,
+    "has-ci" => @repository.gitlab_ci_yml,
     "ci-lint-path" => ci_lint_path } }
 
   = page_specific_javascript_bundle_tag('common_vue')

app/views/projects/pipelines_settings/_show.html.haml

@@ -26,7 +26,8 @@
                 %strong Disable Auto DevOps
                 %br
                 %span.descr
-                  An explicit <code>.gitlab-ci.yml</code> needs to be specified before you can begin using Continious Integration and Delivery.
+                  An explicit <code>.gitlab-ci.yml</code> needs to be specified before you can begin using Continuous Integration and Delivery.
+
             .radio
               = form.label :enabled_nil do
                 = form.radio_button :enabled, ''

app/views/projects/tree/_old_tree_header.html.haml

@@ -20,15 +20,12 @@
             - if can_edit_tree?
               %li
                 = link_to project_new_blob_path(@project, @id) do
-                  = icon('pencil fw')
                   #{ _('New file') }
               %li
                 = 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
-                  = icon('folder fw')
                   #{ _('New directory') }
             - elsif can?(current_user, :fork_project, @project)
               %li
@@ -38,7 +35,6 @@
                 - fork_path = project_forks_path(@project, namespace_key:  current_user.namespace.id,
                                                                                         continue:       continue_params)
                 = link_to fork_path, method: :post do
-                  = icon('pencil fw')
                   #{ _('New file') }
               %li
                 - continue_params = { to:         request.fullpath,
@@ -47,7 +43,6 @@
                 - fork_path = project_forks_path(@project, namespace_key:  current_user.namespace.id,
                                                                                         continue:       continue_params)
                 = link_to fork_path, method: :post do
-                  = icon('file fw')
                   #{ _('Upload file') }
               %li
                 - continue_params = { to:         request.fullpath,
@@ -56,15 +51,12 @@
                 - fork_path = project_forks_path(@project, namespace_key:  current_user.namespace.id,
                                                                                         continue:       continue_params)
                 = link_to fork_path, method: :post do
-                  = icon('folder fw')
                   #{ _('New directory') }
 
             %li.divider
             %li
               = link_to new_project_branch_path(@project) do
-                = icon('code-fork fw')
                 #{ _('New branch') }
             %li
               = link_to new_project_tag_path(@project) do
-                = icon('tags fw')
                 #{ _('New tag') }

app/views/shared/_sort_dropdown.html.haml

+- sorted_by = sort_options_hash[@sort]
 - viewing_issues = controller.controller_name == 'issues' || controller.action_name == 'issues'
 
 .dropdown.inline.prepend-left-10
-  %button.dropdown-toggle{ type: 'button', data: {toggle: 'dropdown' } }
-    - if @sort.present?
-      = sort_options_hash[@sort]
-    - else
-      = sort_title_recently_created
+  %button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown' } }
+    = sorted_by
     = icon('chevron-down')
-  %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-sort
+  %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-selectable.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
-        = sort_title_oldest_created
-      = link_to page_filter_path(sort: sort_value_recently_updated, label: true) do
-        = sort_title_recently_updated
-      = link_to page_filter_path(sort: sort_value_oldest_updated, label: true) do
-        = sort_title_oldest_updated
-      = link_to page_filter_path(sort: sort_value_milestone_soon, label: true) do
-        = sort_title_milestone_soon
-      = link_to page_filter_path(sort: sort_value_milestone_later, label: true) do
-        = sort_title_milestone_later
-      - if viewing_issues
-        = 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_upvotes, label: true) do
-        = sort_title_upvotes
-      = link_to page_filter_path(sort: sort_value_downvotes, label: true) do
-        = sort_title_downvotes
+      = sortable_item(sort_title_priority,         page_filter_path(sort: sort_value_priority,         label: true), sorted_by)
+      = sortable_item(sort_title_created_date,     page_filter_path(sort: sort_value_created_date,     label: true), sorted_by)
+      = sortable_item(sort_title_recently_updated, page_filter_path(sort: sort_value_recently_updated, label: true), sorted_by)
+      = sortable_item(sort_title_milestone,        page_filter_path(sort: sort_value_milestone,        label: true), sorted_by)
+      = sortable_item(sort_title_due_date,         page_filter_path(sort: sort_value_due_date,         label: true), sorted_by) if viewing_issues
+      = sortable_item(sort_title_popularity,       page_filter_path(sort: sort_value_popularity,       label: true), sorted_by)
+      = sortable_item(sort_title_label_priority,   page_filter_path(sort: sort_value_label_priority,   label: true), sorted_by)

app/views/shared/boards/_show.html.haml

@@ -31,10 +31,11 @@
       ":board-id" => "boardId",
       ":key" => "_uid" }
   = render "shared/boards/components/sidebar"
-  %board-add-issues-modal{ "blank-state-image" => render('shared/empty_states/icons/issues.svg'),
-    "new-issue-path" => new_project_issue_path(@project),
-    "milestone-path" => milestones_filter_dropdown_path,
-    "label-path" => labels_filter_path,
-    ":issue-link-base" => "issueLinkBase",
-    ":root-path" => "rootPath",
-    ":project-id" => @project.try(:id) }
+  - if @project
+    %board-add-issues-modal{ "new-issue-path" => new_project_issue_path(@project),
+      "milestone-path" => milestones_filter_dropdown_path,
+      "label-path" => labels_filter_path,
+      "empty-state-svg" => image_path('illustrations/issues.svg'),
+      ":issue-link-base" => "issueLinkBase",
+      ":root-path" => "rootPath",
+      ":project-id" => @project.id }

app/views/shared/empty_states/_issues.html.haml

@@ -5,7 +5,7 @@
 .row.empty-state
   .col-xs-12
     .svg-content
-      = render 'shared/empty_states/icons/issues.svg'
+      = image_tag 'illustrations/issues.svg'
   .col-xs-12.text-center
     .text-content
       - if has_button && current_user

app/views/shared/empty_states/_labels.html.haml

 .row.empty-state.labels
   .col-xs-12
     .svg-content
-      = render 'shared/empty_states/icons/labels.svg'
+      = image_tag 'illustrations/labels.svg'
   .col-xs-12.text-center
     .text-content
       %h4 Labels can be applied to issues and merge requests to categorize them.

app/views/shared/empty_states/_merge_requests.html.haml

@@ -5,7 +5,7 @@
 .row.empty-state.merge-requests
   .col-xs-12
     .svg-content
-      = render 'shared/empty_states/icons/merge_requests.svg'
+      = image_tag 'illustrations/merge_requests.svg'
   .col-xs-12.text-center
     .text-content
       - if has_button

app/views/shared/empty_states/_priority_labels.html.haml

 .text-center
-  = render 'shared/empty_states/icons/priority_labels.svg'
+  .svg-content
+    = image_tag 'illustrations/priority_labels.svg'
   %p Star labels to start sorting by priority

app/views/shared/empty_states/icons/_pipelines_empty.svg

-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 150"><g fill="none" fill-rule="evenodd"><g transform="translate(0 102)"><g fill="#e5e5e5"><rect width="74" 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 fill="#31af64" transform="translate(0 4)"><path 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 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(73 4)"><path stroke="#e5e5e5" stroke-width="4" d="m64.82 76h33.18c4.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.99v60.02c0 4.413 3.583 7.99 8 7.99h31.935l9.263 9.855c1.725 1.835 4.631 1.833 6.354 0l9.263-9.855"/><rect width="18" height="6" x="11" y="19" fill="#fc8a51" rx="3"/><rect width="18" height="6" x="35" y="35" fill="#e52c5a" rx="3"/><rect width="18" height="6" x="29" y="51" fill="#e5e5e5" rx="3"/><rect width="12" height="6" x="35" y="19" fill="#fde5d8" rx="3"/><rect width="12" height="6" x="53" y="51" fill="#e52c5a" rx="3"/><rect width="12" height="6" x="11" y="51" fill="#b5a7dd" rx="3"/><rect width="18" height="6" x="77" y="19" fill="#fc8a51" rx="3"/><rect width="18" height="6" x="11" y="35" fill="#fde5d8" rx="3"/><rect width="6" height="6" x="53" y="19" fill="#e52c5a" rx="3"/><g fill="#fde5d8"><rect width="6" height="6" x="65" y="19" rx="3"/><rect width="6" height="6" x="71" y="35" rx="3"/></g><rect width="6" height="6" x="59" y="35" fill="#e52c5a" rx="3"/></g><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" transform="matrix(.70711-.70711.70711.70711 84.34 49.5)"/></g></svg>