Style user callout and empty state.

app/assets/stylesheets/application.scss

@@ -43,3 +43,8 @@
  * Styles for JS behaviors.
  */
 @import "behaviors";
+
+/*
+* EE-only stylesheets
+*/
+@import "../../../ee/app/assets/stylesheets/**/*";
\ No newline at end of file

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

+<svg xmlns="http://www.w3.org/2000/svg" width="78" height="82" viewBox="0 0 78 82"><g fill="none" fill-rule="evenodd"><path fill="#F9F9F9" d="M2.12 42c-.08.99-.12 1.99-.12 3 0 20.435 16.565 37 37 37s37-16.565 37-37c0-1.01-.04-2.01-.12-3C74.353 61.032 58.425 76 39 76 19.575 76 3.647 61.032 2.12 42z"/><path fill="#EEE" fill-rule="nonzero" d="M39 78C17.46 78 0 60.54 0 39S17.46 0 39 0s39 17.46 39 39-17.46 39-39 39zm0-4c19.33 0 35-15.67 35-35S58.33 4 39 4 4 19.67 4 39s15.67 35 35 35z"/><rect width="7" height="1" x="59" y="38" fill="#E1DBF2" rx=".5"/><path fill="#6B4FBB" d="M60.5 42a3.5 3.5 0 0 0 0-7v7z"/><rect width="7" height="1" x="12" y="38" fill="#E1DBF2" transform="matrix(-1 0 0 1 31 0)" rx=".5"/><path fill="#6B4FBB" d="M17.5 42a3.5 3.5 0 0 1 0-7v7z"/><path fill="#E1DBF1" fill-rule="nonzero" d="M39 58c10.493 0 19-8.507 19-19s-8.507-19-19-19-19 8.507-19 19 8.507 19 19 19zm0 4c-12.703 0-23-10.297-23-23s10.297-23 23-23 23 10.297 23 23-10.297 23-23 23z"/><path fill="#6B4FBB" d="M35 56a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm4 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/><path fill="#E1DBF1" fill-rule="nonzero" d="M26.5 40c0 4.143 3.355 7.5 7.494 7.5h10.012A7.497 7.497 0 0 0 51.5 40c0-4.143-3.355-7.5-7.494-7.5H33.994A7.497 7.497 0 0 0 26.5 40zm-3 0c0-5.799 4.698-10.5 10.494-10.5h10.012C49.802 29.5 54.5 34.2 54.5 40c0 5.799-4.698 10.5-10.494 10.5H33.994C28.198 50.5 23.5 45.8 23.5 40z"/><path fill="#6B4FBB" fill-rule="nonzero" d="M35.255 42.406a1 1 0 1 1 1.872-.703 2.001 2.001 0 0 0 3.76-.038 1 1 0 1 1 1.886.665 4 4 0 0 1-7.518.076zM31.5 40a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm15 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/><path fill="#6B4FBB" d="M38 22h2a1 1 0 0 1 0 2h-2a1 1 0 0 1 0-2zm0 3h2a1 1 0 0 1 0 2h-2a1 1 0 0 1 0-2z" style="mix-blend-mode:multiply"/></g></svg>
\ No newline at end of file

ee/app/assets/stylesheets/pages/service_desk.scss

+.service-desk-issues {
+  .empty-state {
+    max-width: 550px;
+    text-align: center;
+
+    .service-desk-graphic {
+
+    }
+  }
+
+  .non-empty-state {
+    text-align: left;
+
+    .service-desk-graphic {
+      margin-top: 20px;
+    }
+
+    .media-body {
+      margin-top: 10px;
+      margin-left: 20px;
+    }
+  }
+}

ee/app/views/projects/issues/_service_desk_empty_state.html.haml

-.row.empty-state
-  .col-xs-12
-    .svg-content
-      = render 'shared/empty_states/icons/service_desk_empty_state.svg'
-  .col-xs-12.text-center
-    .text-content
-      = render 'service_desk_info_content'

ee/app/views/projects/issues/_service_desk_info_callout.html.haml

-.user-callout
-  = render 'service_desk_empty_state_content'
-// include the button?

ee/app/views/projects/issues/_service_desk_info_content.html.haml

-.text-center
-  %h4 Use Service desk to connect with your users (e.g. to offer customer support) through email right inside GitLab.
+- is_empty_state = @issues.blank?
+- service_desk_enabled = @project.service_desk_enabled?
+
+- callout_selector = is_empty_state ? 'empty-state' : 'non-empty-state media'
+- svg_path = !is_empty_state ? 'shared/empty_states/icons/service_desk_callout.svg' : 'shared/empty_states/icons/service_desk_empty_state.svg'
+
+%div{ class: "#{callout_selector}" }
+	.service-desk-graphic
+		= render svg_path
+
+	.media-body
+		%h4 Use Service Desk to connect with your users (e.g. to offer customer support) through email right inside GitLab.
+
+		- if service_desk_enabled
 			%p
 				Have your users email
 				%code= @project.service_desk_address
 				Those emails automatically become issues (with the comments becoming the email conversation) listed here.
-  %a{ href: '#' } Read more
-
+				= link_to 'Read more', help_page_path('user/project/service_desk')
+				%div.configure-btn-container
+					= link_to "Configure Service Desk", edit_project_path(@project), class: 'btn'

ee/app/views/projects/issues/service_desk.html.haml

@@ -15,16 +15,17 @@
     = render "projects/issues/nav_btns", show_export_button: false, show_rss_button: false
 
   - support_bot_attrs = User.support_bot.to_json(only: [:id, :name, :username, :avatar_url])
+  - is_empty_state = !@issues.present?
 
-  %div{ class: (container_class), data: { support_bot: support_bot_attrs }}
+  %div{ class: "#{container_class} service-desk-issues", data: { support_bot: support_bot_attrs }}
     .top-area
       = render 'shared/issuable/nav', type: :issues
       .nav-controls{ class: ("visible-xs" if show_new_nav?) }
         = render "projects/issues/nav_btns", show_export_button: false, show_rss_button: false
     = render 'shared/issuable/search_bar', type: :issues
 
-    - if @issues.present?
+    - if !is_empty_state
       = render 'service_desk_info_content'
 
     .issues-holder
-      = render 'projects/issues/issues', empty_state_path: 'service_desk_empty_state'
+      = render 'projects/issues/issues', empty_state_path: 'service_desk_info_content'