Merge branch 'confidential-issue-notice' into 'master'

Add confidential issue notice in comment box.

## What does this MR do?

Adds a warning about confidential issues to the comment field when the issue is confidential.

## Are there points in the code the reviewer needs to double check?

I don't think so.

## Why was this MR needed?

It wasn't clear to users that they were commenting on a confidential issue, this makes it more explicit.

## What are the relevant issue numbers?

Fixes #15288 

## Screenshots (if relevant)

This is what it looks like at various screen sizes:

![Screen_Shot_2016-06-03_at_2.56.54_PM](/uploads/eb7f318bc19101f8514d7a4f10a77d73/Screen_Shot_2016-06-03_at_2.56.54_PM.png)

![Screen_Shot_2016-06-03_at_2.58.51_PM](/uploads/13674c3f1227b0d566b1d2aafc6712ed/Screen_Shot_2016-06-03_at_2.58.51_PM.png)

![Screen_Shot_2016-06-03_at_2.58.37_PM](/uploads/14ad419ed3ed86b7fbc080152e4030fa/Screen_Shot_2016-06-03_at_2.58.37_PM.png)

cc: @jschatz1 @dzaporozhets 

See merge request !4473

CHANGELOG

@@ -38,6 +38,7 @@ v 8.9.0 (unreleased)
   - Improve error handling importing projects
   - Put project Files and Commits tabs under Code tab
   - Replace Colorize with Rainbow for coloring console output in Rake tasks.
+  - An indicator is now displayed at the top of the comment field for confidential issues.
 
 v 8.8.4 (unreleased)
   - Ensure branch cleanup regardless of whether the GitHub import process succeeds

app/assets/stylesheets/pages/note_form.scss

@@ -87,6 +87,39 @@
   }
 }
 
+.md-header .nav-links {
+  display: flex;
+  display: -webkit-flex;
+  flex-flow: row wrap;
+  -webkit-flex-flow: row wrap;
+  width: 100%;
+
+  .pull-right {
+    // Flexbox quirk to make sure right-aligned items stay right-aligned.
+    margin-left: auto;
+  }
+}
+
+.confidential-issue-warning {
+  background-color: $gray-normal;
+  border-radius: 3px;
+  padding: 3px 12px;
+  margin: auto;
+  margin-top: 0;
+  text-align: center;
+  font-size: 13px;
+
+  @media (max-width: $screen-md-min) {
+    // On smaller devices the warning becomes the fourth item in the list,
+    // rather than centering, and grows to span the full width of the
+    // comment area.
+    order: 4;
+    -webkit-order: 4;
+    margin: 6px auto;
+    width: 100%;
+  }
+}
+
 .discussion-form {
   padding: $gl-padding-top $gl-padding;
   background-color: $white-light;

app/views/projects/_md_preview.html.haml

@@ -7,6 +7,12 @@
       %li
         %a.js-md-preview-button{ href: "#md-preview-holder", tabindex: -1 }
           Preview
+
+      - if defined?(@issue) && @issue.confidential?
+        %li.confidential-issue-warning
+          = icon('warning')
+          %span This is a confidential issue. Your comment will not be visible to the public.
+          
       %li.pull-right
         %button.zen-control.zen-control-full.js-zen-enter{ type: 'button', tabindex: -1 }
           Go full screen