Move save visbility settings button into vue

Moves the save visibility settings submit button
from haml to the settings

app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue

 <script>
-import { GlIcon, GlSprintf, GlLink, GlFormCheckbox, GlToggle } from '@gitlab/ui';
-
+import { GlButton, GlIcon, GlSprintf, GlLink, GlFormCheckbox, GlToggle } from '@gitlab/ui';
+import ConfirmDanger from '~/vue_shared/components/confirm_danger/confirm_danger.vue';
 import settingsMixin from 'ee_else_ce/pages/projects/shared/permissions/mixins/settings_pannel_mixin';
 import { __, s__ } from '~/locale';
 import {
@@ -41,16 +41,19 @@ export default {
     pucWarningHelpText: s__(
       'ProjectSettings|Highlight the usage of hidden unicode characters. These have innocent uses for right-to-left languages, but can also be used in potential exploits.',
     ),
+    confirmButtonText: __('Save changes'),
   },
 
   components: {
     projectFeatureSetting,
     projectSettingRow,
+    GlButton,
     GlIcon,
     GlSprintf,
     GlLink,
     GlFormCheckbox,
     GlToggle,
+    ConfirmDanger,
   },
   mixins: [settingsMixin],
 
@@ -163,6 +166,10 @@ export default {
       required: false,
       default: '',
     },
+    confirmationPhrase: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     const defaults = {
@@ -274,6 +281,9 @@ export default {
     cveIdRequestIsDisabled() {
       return this.visibilityLevel !== visibilityOptions.PUBLIC;
     },
+    isVisibilityReduced() {
+      return this.visibilityLevel < this.currentSettings.visibilityLevel;
+    },
   },
 
   watch: {
@@ -774,5 +784,25 @@ export default {
         <template #help>{{ $options.i18n.pucWarningHelpText }}</template>
       </gl-form-checkbox>
     </project-setting-row>
+    <confirm-danger
+      v-if="isVisibilityReduced"
+      button-class="qa-visibility-features-permissions-save-button"
+      button-variant="confirm"
+      :disabled="false"
+      :phrase="confirmationPhrase"
+      :confirm-danger-message="confirmDangerMessage"
+      :additional-information="additionalInformation"
+      :button-text="$options.i18n.confirmButtonText"
+      @confirm="$emit('confirm')"
+    />
+    <!-- confirmDangerMessage -->
+    <gl-button
+      v-else
+      type="submit"
+      variant="confirm"
+      button-class="qa-visibility-features-permissions-save-button"
+    >
+      {{ $options.i18n.confirmButtonText }}
+    </gl-button>
   </div>
 </template>

app/assets/javascripts/pages/projects/shared/permissions/index.js

@@ -6,8 +6,28 @@ export default function initProjectPermissionsSettings() {
   const componentPropsEl = document.querySelector('.js-project-permissions-form-data');
   const componentProps = JSON.parse(componentPropsEl.innerHTML);
 
+  const {
+    additionalInformation,
+    confirmDangerMessage,
+    confirmButtonText,
+    phrase: confirmationPhrase,
+  } = mountPoint.dataset;
+  console.log('mountPoint', mountPoint.dataset);
+
   return new Vue({
     el: mountPoint,
-    render: (createElement) => createElement(settingsPanel, { props: { ...componentProps } }),
+    provide: {
+      htmlConfirmationMessage: true,
+      additionalInformation,
+      confirmDangerMessage,
+      confirmButtonText,
+    },
+    render: (createElement) =>
+      createElement(settingsPanel, {
+        props: {
+          ...componentProps,
+          confirmationPhrase,
+        },
+      }),
   });
 }

app/views/projects/_visibility_modal.html.haml

 - strong_start = "<strong>".html_safe
 - strong_end = "</strong>".html_safe
 
+-# TODO: we should remove this
 .modal.js-confirm-project-visiblity{ tabindex: -1 }
   .modal-dialog
     .modal-content

app/views/projects/edit.html.haml

@@ -21,8 +21,7 @@
     = 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
-      = 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)
+      .js-project-permissions-form{ 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