Migrate the visibility change confirmation to vue

Updates the confirmation modal dialog for the
project visibility settings.

Changelog: changed

app/assets/javascripts/init_confirm_danger.js

@@ -14,12 +14,16 @@ export default () => {
     buttonTestid = null,
     confirmDangerMessage,
     disabled = false,
+    additionalInformation,
+    htmlConfirmationMessage,
   } = el.dataset;
 
   return new Vue({
     el,
     provide: {
+      htmlConfirmationMessage,
       confirmDangerMessage,
+      additionalInformation,
     },
     render: (createElement) =>
       createElement(ConfirmDanger, {

app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.stories.js

@@ -11,7 +11,9 @@ const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   template: '<confirm-danger v-bind="$props" />',
   provide: {
-    confirmDangerMessage: 'You require more Vespene Gas',
+    additionalInformation: args.additionalInformation || null,
+    confirmDangerMessage: args.confirmDangerMessage || 'You require more Vespene Gas',
+    htmlConfirmationMessage: args.confirmDangerMessage || false,
   },
 });
 
@@ -26,3 +28,16 @@ Disabled.args = {
   ...Default.args,
   disabled: true,
 };
+
+export const AdditionalInformation = Template.bind({});
+AdditionalInformation.args = {
+  ...Default.args,
+  additionalInformation: 'This replaces the default warning information',
+};
+
+export const HtmlMessage = Template.bind({});
+HtmlMessage.args = {
+  ...Default.args,
+  confirmDangerMessage: 'You strongly require more <strong>Vespene Gas</strong>',
+  htmlConfirmationMessage: true,
+};

app/assets/javascripts/vue_shared/components/confirm_danger/confirm_danger_modal.vue

 <script>
-import { GlAlert, GlModal, GlFormGroup, GlFormInput, GlSprintf } from '@gitlab/ui';
+import {
+  GlAlert,
+  GlModal,
+  GlFormGroup,
+  GlFormInput,
+  GlSafeHtmlDirective as SafeHtml,
+  GlSprintf,
+} from '@gitlab/ui';
 import {
   CONFIRM_DANGER_MODAL_BUTTON,
   CONFIRM_DANGER_MODAL_TITLE,
@@ -17,13 +24,22 @@ export default {
     GlFormInput,
     GlSprintf,
   },
+  directives: {
+    SafeHtml,
+  },
   inject: {
+    htmlConfirmationMessage: {
+      default: false,
+    },
     confirmDangerMessage: {
       default: '',
     },
     confirmButtonText: {
       default: CONFIRM_DANGER_MODAL_BUTTON,
     },
+    additionalInformation: {
+      default: CONFIRM_DANGER_WARNING,
+    },
   },
   props: {
     modalId: {
@@ -81,9 +97,12 @@ export default {
       :dismissible="false"
       class="gl-mb-4"
     >
-      {{ confirmDangerMessage }}
+      <span v-if="htmlConfirmationMessage" v-safe-html="confirmDangerMessage"></span>
+      <span v-else>
+        {{ confirmDangerMessage }}
+      </span>
     </gl-alert>
-    <p data-testid="confirm-danger-warning">{{ $options.i18n.CONFIRM_DANGER_WARNING }}</p>
+    <p data-testid="confirm-danger-warning">{{ additionalInformation }}</p>
     <p data-testid="confirm-danger-phrase">
       <gl-sprintf :message="$options.i18n.CONFIRM_DANGER_PHRASE_TEXT">
         <template #phrase_code>

app/helpers/projects_helper.rb

@@ -660,6 +660,32 @@ module ProjectsHelper
     project.unlink_forks_upon_visibility_decrease_enabled? && project.visibility_level > Gitlab::VisibilityLevel::PRIVATE && project.forks_count > 0
   end
 
+  def confirm_reduce_visibility_message(project)
+    strong_start = "<strong>".html_safe
+    strong_end = "</strong>".html_safe
+    message = _("You're about to reduce the visibility of the project %{strong_start}%{project_name}%{strong_end}.")
+
+    if project.group
+      message = _("You're about to reduce the visibility of the project %{strong_start}%{project_name}%{strong_end} in %{strong_start}%{group_name}%{strong_end}.")
+    end
+
+    message.html_safe % { strong_start: strong_start, strong_end: strong_end, project_name: project.name, group_name: project.group ? project.group.name : nil }
+  end
+
+  def visibility_confirm_modal_data(project, remove_form_id = nil)
+    {
+      remove_form_id: remove_form_id,
+      qa_selector: 'visibility_features_permissions_save_button',
+      button_text: _('Save changes'),
+      confirm_button_text: _('Reduce project visibility'),
+      button_testid: 'reduce-project-visibility-button',
+      confirm_danger_message: confirm_reduce_visibility_message(project),
+      phrase: project.full_path,
+      additional_information: _('Note: current forks will keep their visibility level.'),
+      html_confirmation_message: true
+    }
+  end
+
   def build_project_breadcrumb_link(project)
     project_name = simple_sanitize(project.name)
 

app/views/projects/edit.html.haml

@@ -2,6 +2,7 @@
 - page_title _("General")
 - @content_class = "limit-container-width" unless fluid_layout
 - expanded = expanded_by_default?
+- remove_visibility_form_id = 'reduce-visibility-form'
 
 %section.settings.general-settings.no-animate.expanded#js-general-settings
   .settings-header
@@ -17,13 +18,11 @@
     %p= _('Choose visibility level, enable/disable project features and their permissions, disable email notifications, and show default award emoji.')
 
   .settings-content
-    = form_for @project, html: { multipart: true, class: "sharing-permissions-form" }, authenticity_token: true do |f|
+    = form_for @project, html: { multipart: true, class: "sharing-permissions-form", id: remove_visibility_form_id }, authenticity_token: true do |f|
       %input{ name: 'update_section', type: 'hidden', value: 'js-shared-permissions' }
       %template.js-project-permissions-form-data{ type: "application/json" }= project_permissions_panel_data(@project).to_json.html_safe
       .js-project-permissions-form
-      - if show_visibility_confirm_modal?(@project)
-        = render "visibility_modal"
-      = f.submit _('Save changes'), class: "btn gl-button btn-confirm #{('js-legacy-confirm-danger' if show_visibility_confirm_modal?(@project))}", data: { qa_selector: 'visibility_features_permissions_save_button', check_field_name: ("project[visibility_level]" if show_visibility_confirm_modal?(@project)), check_compare_value: @project.visibility_level }
+      = f.submit _('Save changes'), class: "btn gl-button btn-confirm #{('js-confirm-danger' if show_visibility_confirm_modal?(@project))}", data: visibility_confirm_modal_data(@project, remove_visibility_form_id)
 
 %section.rspec-merge-request-settings.settings.merge-requests-feature.no-animate#js-merge-request-settings{ class: [('expanded' if expanded), ('hidden' if @project.project_feature.send(:merge_requests_access_level) == 0)], data: { qa_selector: 'merge_request_settings_content' } }
   .settings-header

locale/gitlab.pot

@@ -24088,6 +24088,9 @@ msgstr ""
 msgid "Note: Consider asking your GitLab administrator to configure %{github_integration_link}, which will allow login via GitHub and allow importing repositories without generating a Personal Access Token."
 msgstr ""
 
+msgid "Note: current forks will keep their visibility level."
+msgstr ""
+
 msgid "NoteForm|Note"
 msgstr ""
 

spec/features/projects/user_changes_project_visibility_spec.rb

@@ -22,7 +22,9 @@ RSpec.describe 'User changes public project visibility', :js do
         click_button 'Save changes'
       end
 
-      find('.js-legacy-confirm-danger-input').send_keys(project.path_with_namespace)
+      # binding.pry
+
+      find('.js-confirm-danger-input').send_keys(project.path_with_namespace)
 
       page.within '.modal' do
         click_button 'Reduce project visibility'