Fix UI on Project Audit Events when the feature not available

Co-Authored-By: Stan Hu <stanhu@gmail.com>
Signed-off-by: Takuya Noguchi <takninnovationresearch@gmail.com>

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

@@ -116,16 +116,6 @@
   }
 }
 
-.promotion-backdrop {
-  background-color: $white-transparent;
-  position: absolute;
-  padding-top: 72px;
-
-  .user-callout-copy {
-    max-width: 700px;
-  }
-}
-
 .promotion-issue-sidebar {
   .promotion-issue-sidebar-message {
     padding: $gl-padding-top;

ee/app/views/projects/audit_events/index.html.haml

 - page_title "Audit Events"
 - feature_available = @project.feature_available?(:audit_events)
 
-- if !feature_available && show_promotions?
-  = render 'shared/promotions/promote_audit_events'
-
-%h3.page-title Project Audit Events
-%p.light Events in #{@project.full_path}
-
 - if feature_available
+  %h3.page-title
+    = _('Project Audit Events')
+  %p.light
+    = _('Events in %{project_path}') % { project_path: @project.full_path }
+
   = render 'shared/audit_events/event_filter', path: project_audit_events_path(@project)
   = render 'shared/audit_events/event_sort'
   = render 'shared/audit_events/event_table', events: @events
+- elsif show_promotions?
+  = render 'shared/promotions/promote_audit_events'

ee/app/views/shared/promotions/_promote_audit_events.html.haml

-.center.promotion-backdrop.append-top-72
+.center.user-callout.promotion-callout
   .svg-container
     = custom_icon('icon_audit_events_purple')
   .user-callout-copy

ee/app/views/shared/promotions/_promotion_link_project.html.haml

@@ -3,7 +3,7 @@
 - if Gitlab::CurrentSettings.should_check_namespace_plan?
   - namespace = @project&.namespace || @group
   - if can?(current_user, :admin_namespace, namespace)
-    = link_to _('Upgrade your plan'), upgrade_plan_url, class: 'btn btn-primary btn-block', target: target_blank ? '_blank' : '_self'
+    = link_to _('Upgrade your plan'), upgrade_plan_url, class: 'btn btn-primary', target: target_blank ? '_blank' : '_self'
   - elsif namespace.is_a?(Group)
     %p= _('Contact an owner of group %{namespace_name} to upgrade the plan.') % { namespace_name: namespace.name }
   - else
@@ -12,8 +12,8 @@
     %p= _('Contact owner %{link_start}%{owner_name}%{link_end} to upgrade the plan.').html_safe % { owner_name: owner.name, link_start: link_start, link_end: '</a>'.html_safe }
 - elsif current_user&.admin?
   - if License.current&.expired?
-    = link_to (!short_form ? _('Buy GitLab Enterprise Edition') : _('Buy EE')), ::EE::SUBSCRIPTIONS_PLANS_URL, class: 'btn btn-primary btn-block'
+    = link_to (!short_form ? _('Buy GitLab Enterprise Edition') : _('Buy EE')), ::EE::SUBSCRIPTIONS_PLANS_URL, class: 'btn btn-primary'
   - else
-    = link_to _('Start GitLab Ultimate trial'), new_trial_url, class: 'btn btn-primary btn-block'
+    = link_to _('Start GitLab Ultimate trial'), new_trial_url, class: 'btn btn-primary'
 - else
   %p= _('Contact your Administrator to upgrade your license.')

ee/changelogs/unreleased/14686-broken-ui-on-project-audit-events-when-it-is-not-available.yml

+---
+title: Fix UI on Project Audit Events when the feature not available
+merge_request: 16032
+author: Takuya Noguchi
+type: fixed

ee/spec/features/projects/audit_events_spec.rb

@@ -53,6 +53,12 @@ describe 'Projects > Audit Events', :js do
 
       expect(page).to have_link('Audit Events')
     end
+
+    it 'does not have Project Audit Events in the header' do
+      visit project_audit_events_path(project)
+
+      expect(page).not_to have_content('Project Audit Events')
+    end
   end
 
   it 'has Audit Events button in head nav bar' do
@@ -61,6 +67,12 @@ describe 'Projects > Audit Events', :js do
     expect(page).to have_link('Audit Events')
   end
 
+  it 'has Project Audit Events in the header' do
+    visit project_audit_events_path(project)
+
+    expect(page).to have_content('Project Audit Events')
+  end
+
   describe 'adding an SSH key' do
     it "appears in the project's audit events" do
       stub_licensed_features(audit_events: true)

locale/gitlab.pot

@@ -7767,6 +7767,9 @@ msgstr ""
 msgid "Events"
 msgstr ""
 
+msgid "Events in %{project_path}"
+msgstr ""
+
 msgid "Every %{action} attempt has failed: %{job_error_message}. Please try again."
 msgstr ""
 
@@ -14575,6 +14578,9 @@ msgstr ""
 msgid "Project '%{project_name}' will be deleted on %{date}"
 msgstr ""
 
+msgid "Project Audit Events"
+msgstr ""
+
 msgid "Project Badges"
 msgstr ""