Move group level visibilty to common area

- for reuse.

app/assets/javascripts/groups/visibility_level.js

+import Vue from 'vue';
+import VisibilityLevelDropdown from './components/visibility_level_dropdown.vue';
+
+export default () => {
+  const el = document.querySelector('.js-visibility-level-dropdown');
+
+  if (!el) {
+    return null;
+  }
+
+  const { visibilityLevelOptions, defaultLevel } = el.dataset;
+
+  return new Vue({
+    el,
+    render(createElement) {
+      return createElement(VisibilityLevelDropdown, {
+        props: {
+          visibilityLevelOptions: JSON.parse(visibilityLevelOptions),
+          defaultLevel: Number(defaultLevel),
+        },
+      });
+    },
+  });
+};

app/helpers/visibility_level_helper.rb

@@ -157,6 +157,16 @@ module VisibilityLevelHelper
     end
   end
 
+  def visibility_level_options(form_model)
+    available_visibility_levels(form_model).map do |level|
+      {
+        level: level,
+        label: visibility_level_label(level),
+        description: visibility_level_description(level, form_model)
+      }
+    end
+  end
+
   def snippets_selected_visibility_level(visibility_levels, selected)
     visibility_levels.find { |level| level == selected } || visibility_levels.min
   end

app/views/shared/groups/_visibility_level.html.haml

+= f.label :visibility_level, class: 'label-bold' do
+  = _('Visibility level')
+.js-visibility-level-dropdown{ data: { visibility_level_options: visibility_level_options(@group).to_json, default_level: f.object.visibility_level } }

ee/app/assets/javascripts/registrations/groups/new/index.js

 import Vue from 'vue';
 import mountInviteMembers from 'ee/groups/invite';
+import mountVisibilityLevelDropdown from '~/groups/visibility_level';
 import { STEPS, ONBOARDING_ISSUES_EXPERIMENT_FLOW_STEPS } from '../../constants';
 import ProgressBar from '../../components/progress_bar.vue';
-import VisibilityLevelDropdown from '../../components/visibility_level_dropdown.vue';
 
 function mountProgressBar() {
   const el = document.getElementById('progress-bar');
@@ -19,24 +19,6 @@ function mountProgressBar() {
   });
 }
 
-function mountVisibilityLevelDropdown() {
-  const el = document.querySelector('.js-visibility-level-dropdown');
-
-  if (!el) return null;
-
-  return new Vue({
-    el,
-    render(createElement) {
-      return createElement(VisibilityLevelDropdown, {
-        props: {
-          visibilityLevelOptions: JSON.parse(el.dataset.visibilityLevelOptions),
-          defaultLevel: Number(el.dataset.defaultLevel),
-        },
-      });
-    },
-  });
-}
-
 export default () => {
   mountProgressBar();
   mountVisibilityLevelDropdown();

ee/app/helpers/ee/registrations_helper.rb

@@ -4,16 +4,6 @@ module EE
   module RegistrationsHelper
     include ::Gitlab::Utils::StrongMemoize
 
-    def visibility_level_options
-      available_visibility_levels(@group).map do |level|
-        {
-          level: level,
-          label: visibility_level_label(level),
-          description: visibility_level_description(level, @group)
-        }
-      end
-    end
-
     private
 
     def redirect_path

ee/app/views/registrations/groups/new.html.haml

@@ -39,9 +39,7 @@
             %p.validation-pending.gl-field-error-ignore.field-validation.hide= _('Checking group path availability...')
         .row
           .form-group.col-sm-12
-            = f.label :visibility_level, class: 'label-bold' do
-              = _('Visibility level')
-            .js-visibility-level-dropdown{ data: { visibility_level_options: visibility_level_options.to_json, default_level: f.object.visibility_level } }
+            = render partial: 'shared/groups/visibility_level', locals: { f: f }
         = render partial: 'shared/groups/invite_members'
         .row
           .form-group.col-sm-12.mb-0

ee/spec/helpers/ee/registrations_helper_spec.rb

-# frozen_string_literal: true
-
-require 'spec_helper'
-
-RSpec.describe EE::RegistrationsHelper do
-  using RSpec::Parameterized::TableSyntax
-
-  describe '#visibility_level_options' do
-    let(:user) { build(:user) }
-
-    before do
-      allow(helper).to receive(:current_user).and_return(user)
-      assign(:group, Group.new)
-    end
-
-    it 'returns the desired mapping' do
-      expect(helper.visibility_level_options).to eq [
-        { level: 0, label: 'Private', description: 'The group and its projects can only be viewed by members.' },
-        { level: 10, label: 'Internal', description: 'The group and any internal projects can be viewed by any logged in user except external users.' },
-        { level: 20, label: 'Public', description: 'The group and any public projects can be viewed without any authentication.' }
-      ]
-    end
-  end
-end

ee/spec/frontend/registrations/components/visibility_level_dropdown_spec.js → spec/frontend/groups/components/visibility_level_dropdown_spec.js

 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import Component from 'ee/registrations/components/visibility_level_dropdown.vue';
+import Component from '~/groups/components/visibility_level_dropdown.vue';
 
 describe('Visibility Level Dropdown', () => {
   let wrapper;

spec/helpers/visibility_level_helper_spec.rb

@@ -284,4 +284,34 @@ RSpec.describe VisibilityLevelHelper do
       it { is_expected.to eq(expected) }
     end
   end
+
+  describe '#visibility_level_options' do
+    let(:user) { build(:user) }
+
+    before do
+      allow(helper).to receive(:current_user).and_return(user)
+    end
+
+    it 'returns the desired mapping' do
+      expected_options = [
+        {
+          level: 0,
+          label: 'Private',
+          description: 'The group and its projects can only be viewed by members.'
+        },
+        {
+          level: 10,
+          label: 'Internal',
+          description: 'The group and any internal projects can be viewed by any logged in user except external users.'
+        },
+        {
+          level: 20,
+          label: 'Public',
+          description: 'The group and any public projects can be viewed without any authentication.'
+        }
+      ]
+
+      expect(helper.visibility_level_options(group)).to eq expected_options
+    end
+  end
 end