Upgrade design/copy for issue weights lock feature

The upgrade point to unlock the issue weight was pointing to the help
doc in the same window. This MR improves it with better design and copy

app/assets/stylesheets/utilities.scss

@@ -27,3 +27,4 @@
 .border-style-solid { border-style: solid; }
 .border-color-blue-300 { border-color: $blue-300; }
 .border-color-default { border-color: $border-color; }
+.box-shadow-default { box-shadow: 0 2px 4px 0 $black-transparent; }

changelogs/unreleased/32419-growth-conversion-experiment-test-new-admin-upgrade-design-copy-for.yml

+---
+title: Upgrade design/copy for issue weights locked feature
+merge_request: 17352
+author:
+type: changed

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

@@ -8,23 +8,26 @@
         %span No
     .title.hide-collapsed
       = _('Weight')
-    .dropdown
-      .dropdown-menu.promotion-issue-sidebar-message
-        .dropdown-title
-          %span
-            = _('Change Weight')
-          %button.dropdown-title-button.dropdown-menu-close{ "aria-label" => _('Close'), :type => "button" }
-            %i.fa.fa-times.dropdown-menu-close-icon{ "aria-hidden" => "true", "data-hidden" => "true" }
+    .hide-collapsed.js-toggle-container.promotion-issue-weight-sidebar-message
+      = s_('Promotions|This feature is locked.')
+      %a.btn-link.js-toggle-button.js-weight-sidebar-callout{ href: '#' }
+        = s_('Promotions|Learn more')
+        = icon('chevron-down')
+      .js-toggle-content{ style:'display: none' }
         %div
+          %h4
+            = s_('Promotions|Weighting your issue')
+          %p
+            = image_tag('promotions/img-paid-feature-weight-sidebar.png', class: 'w-100 box-shadow-default')
+          %p
+            = s_('Promotions|When you have a lot of issues, it can be hard to get an overview. By adding a weight to your issues, you can get a better idea of the effort, cost, required time, or value of each, and so better manage them.')
           %p
             - if Gitlab::CurrentSettings.should_check_namespace_plan?
-              = _('Upgrade your plan to activate Issue weight.')
+              - subscription_link_url = "#{EE::SUBSCRIPTIONS_URL}/plans"
+              - subscription_link_start = '<a href="%{url}" target="_blank" class="btn-link>"'.html_safe % { url: subscription_link_url }
+              = s_("Promotions|See the other features in the %{subscription_link_start}bronze plan%{subscriptions_link_end}").html_safe % { subscription_link_start: subscription_link_start, subscription_link_end: '</a>'.html_safe }
             - else
               = _('Improve issues management with Issue weight and GitLab Enterprise Edition.')
-            = link_to _('Read more'), help_page_path('workflow/issue_weight.html'), class: 'btn-link', target: '_blank'
           %div
-            = render 'shared/promotions/promotion_link_project', short_form: true
+            = render 'shared/promotions/promotion_link_project', short_form: true, target_blank: true
             = link_to s_("Promotions|Don't show me this again"), '#', class: ['btn', 'js-close', 'js-close-callout']
-    .hide-collapsed
-      = s_('Promotions|This feature is locked.')
-      = link_to s_('Promotions|Upgrade plan') , '#', class: 'btn-link', data: { toggle: "dropdown", target: ".js-weight-sidebar-callout", display: 'static' }

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

 - short_form = local_assigns.fetch :short_form, false
+- target_blank = local_assigns.fetch :target_blank, false
 - 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'
+    = link_to _('Upgrade your plan'), upgrade_plan_url, class: 'btn btn-primary btn-block', 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

ee/spec/features/promotion_spec.rb

@@ -319,16 +319,16 @@ describe 'Promotions', :js do
       visit project_issue_path(project, issue)
       wait_for_requests
 
-      find('.js-weight-sidebar-callout .btn-link').click
+      find('.btn-link.js-toggle-button.js-weight-sidebar-callout').click
 
-      expect(find('.promotion-issue-sidebar-message')).to have_content 'Improve issues management with Issue weight and GitLab Enterprise Edition'
+      expect(find('.promotion-issue-weight-sidebar-message')).to have_content 'Improve issues management with Issue weight and GitLab Enterprise Edition'
     end
 
     it 'is removed after dismissal' do
       visit project_issue_path(project, issue)
       wait_for_requests
 
-      find('.js-weight-sidebar-callout .btn-link').click
+      find('.btn-link.js-toggle-button.js-weight-sidebar-callout').click
       find('.js-weight-sidebar-callout .js-close-callout').click
 
       expect(page).not_to have_selector('.js-weight-sidebar-callout')
@@ -338,7 +338,7 @@ describe 'Promotions', :js do
       visit project_issue_path(project, issue)
       wait_for_requests
 
-      find('.js-weight-sidebar-callout .btn-link').click
+      find('.btn-link.js-toggle-button.js-weight-sidebar-callout').click
       find('.js-weight-sidebar-callout .js-close-callout').click
       visit project_issue_path(project, issue)
 
@@ -349,8 +349,8 @@ describe 'Promotions', :js do
       visit project_issue_path(project, issue)
       wait_for_requests
 
-      find('.js-weight-sidebar-callout .btn-link').click
-      find('.js-weight-sidebar-callout .dropdown-menu-close').click
+      find('.btn-link.js-toggle-button.js-weight-sidebar-callout').click
+      find('.btn-link.js-toggle-button.js-weight-sidebar-callout').click
 
       expect(page).to have_selector('.js-weight-sidebar-callout')
       expect(page).to have_selector('.promotion-issue-sidebar-message', visible: false)

locale/gitlab.pot

@@ -2900,9 +2900,6 @@ msgstr ""
 msgid "Certificate (PEM)"
 msgstr ""
 
-msgid "Change Weight"
-msgstr ""
-
 msgid "Change assignee"
 msgstr ""
 
@@ -13421,12 +13418,24 @@ msgstr ""
 msgid "Promotions|Epics let you manage your portfolio of projects more efficiently and with less effort by tracking groups of issues that share a theme, across projects and milestones."
 msgstr ""
 
+msgid "Promotions|Learn more"
+msgstr ""
+
+msgid "Promotions|See the other features in the %{subscription_link_start}bronze plan%{subscriptions_link_end}"
+msgstr ""
+
 msgid "Promotions|This feature is locked."
 msgstr ""
 
 msgid "Promotions|Upgrade plan"
 msgstr ""
 
+msgid "Promotions|Weighting your issue"
+msgstr ""
+
+msgid "Promotions|When you have a lot of issues, it can be hard to get an overview. By adding a weight to your issues, you can get a better idea of the effort, cost, required time, or value of each, and so better manage them."
+msgstr ""
+
 msgid "Prompt users to upload SSH keys"
 msgstr ""
 
@@ -18111,9 +18120,6 @@ msgstr ""
 msgid "Upgrade your plan to activate Group Webhooks."
 msgstr ""
 
-msgid "Upgrade your plan to activate Issue weight."
-msgstr ""
-
 msgid "Upgrade your plan to improve Issue boards."
 msgstr ""