Update titles, changelog, and abstract out method

- the titles of the pages and sidebar are correct
- the changelog title is now more descriptive
- the unavailable data was abstracted out into a helper method
  to be used in multiple places

ee/app/assets/javascripts/security_dashboard/components/first_class_group_security_dashboard.vue

@@ -57,7 +57,7 @@ export default {
       <template #header>
         <header class="page-title-holder flex-fill d-flex align-items-center">
           <h2 class="page-title flex-grow">
-            {{ s__('SecurityReports|Group Security Dashboard') }}
+            {{ s__('SecurityReports|Vulnerability Report') }}
           </h2>
           <csv-export-button :vulnerabilities-export-endpoint="vulnerabilitiesExportEndpoint" />
         </header>

ee/app/assets/javascripts/security_dashboard/components/security_charts_layout.vue

@@ -10,7 +10,7 @@ export default {
 
 <template functional>
   <div>
-    <h1>{{ $options.i18n.title }}</h1>
+    <h2>{{ $options.i18n.title }}</h2>
     <div class="security-charts gl-display-flex gl-flex-wrap">
       <slot></slot>
     </div>

ee/app/helpers/security_helper.rb

@@ -14,4 +14,12 @@ module SecurityHelper
       vulnerabilities_export_endpoint: expose_path(api_v4_security_vulnerability_exports_path)
     }
   end
+
+  def security_dashboard_unavailable_view_data
+    {
+      empty_state_svg_path: image_path('illustrations/security-dashboard-empty-state.svg'),
+      dashboard_documentation: help_page_path('user/application_security/security_dashboard/index'),
+      is_unavailable: "true"
+    }
+  end
 end

ee/app/views/groups/security/dashboard/unavailable.html.haml

 - breadcrumb_title _("Security Dashboard")
 - page_title _("Security Dashboard")
 
-#js-group-security-dashboard{ data: { is_unavailable: "true",
-  empty_state_svg_path: image_path('illustrations/security-dashboard-empty-state.svg'),
-  dashboard_documentation: help_page_path('user/application_security/security_dashboard/index') } }
+#js-group-security-dashboard{ data: security_dashboard_unavailable_view_data }

ee/app/views/groups/security/vulnerabilities/unavailable.html.haml

 - breadcrumb_title _("Vulnerability Report")
 - page_title _("Vulnerability Report")
 
-#js-group-vulnerabilities{ data: { is_unavailable: "true",
-  empty_state_svg_path: image_path('illustrations/security-dashboard-empty-state.svg'),
-  dashboard_documentation: help_page_path('user/application_security/security_dashboard/index') } }
+#js-group-vulnerabilities{ data: security_dashboard_unavailable_view_data }

ee/app/views/layouts/nav/ee/_security_link.html.haml

@@ -9,8 +9,8 @@
     %ul.sidebar-sub-level-items{ data: { qa_selector: 'group_secure_submenu' } }
       - if group_level_security_dashboard_available?(@group)
         = nav_link(path: 'dashboard#show') do
-          = link_to group_security_dashboard_path(@group), title: _('Security'), data: { qa_selector: 'security_dashboard_link' } do
-            %span= _('Security')
+          = link_to group_security_dashboard_path(@group), title: _('Security Dashboard'), data: { qa_selector: 'security_dashboard_link' } do
+            %span= _('Security Dashboard')
 
       - if group_level_security_dashboard_available?(@group)
         = nav_link(path: 'vulnerabilities#index') do

ee/changelogs/unreleased/227878-add-new-security-charts-page.yml

 ---
-title: Add new security charts page
+title: Add new security charts page and unavailable view
 merge_request: 38088
 author:
 type: changed

ee/spec/features/groups/navbar_spec.rb

@@ -158,7 +158,7 @@ RSpec.describe 'Group navbar' do
         new_nav_item: {
           nav_item: _('Security & Compliance'),
           nav_sub_items: [
-            _('Security'),
+            _('Security Dashboard'),
             _('Vulnerability Report'),
             _('Compliance')
           ]