3 files changed, 32 insertions, 22 deletions

diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
index 7345afb8545..90830f344d5 100644
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -16,12 +16,9 @@ import UserAccessRoleBadge from '~/vue_shared/components/user_access_role_badge.
 import { AVATAR_SHAPE_OPTION_RECT } from '~/vue_shared/constants';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { __ } from '~/locale';
-import {
-  VISIBILITY_TYPE_ICON,
-  GROUP_VISIBILITY_TYPE,
-  ITEM_TYPE,
-  VISIBILITY_PRIVATE,
-} from '../constants';
+import { VISIBILITY_LEVELS_ENUM } from '~/visibility_level/constants';
+import { VISIBILITY_TYPE_ICON, GROUP_VISIBILITY_TYPE, ITEM_TYPE } from '../constants';
+
 import eventHub from '../event_hub';
 
 import itemActions from './item_actions.vue';
@@ -114,8 +111,8 @@ export default {
     shouldShowVisibilityWarning() {
       return (
         this.action === 'shared' &&
-        this.currentGroupVisibility === VISIBILITY_PRIVATE &&
-        this.group.visibility !== VISIBILITY_PRIVATE
+        VISIBILITY_LEVELS_ENUM[this.group.visibility] >
+          VISIBILITY_LEVELS_ENUM[this.currentGroupVisibility]
       );
     },
   },
@@ -142,7 +139,7 @@ export default {
   shareProjectsWithGroupsHelpPagePath: helpPagePath(
     'user/project/members/share_project_with_groups',
     {
-      anchor: 'share-a-public-project-with-private-group',
+      anchor: 'sharing-projects-with-groups-of-a-higher-restrictive-visibility-level',
     },
   ),
   safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] },
diff --git a/app/assets/javascripts/groups/constants.js b/app/assets/javascripts/groups/constants.js
index 29981d09155..0d09ad9442b 100644
--- a/app/assets/javascripts/groups/constants.js
+++ b/app/assets/javascripts/groups/constants.js
@@ -1,4 +1,9 @@
 import { __, s__ } from '~/locale';
+import {
+  VISIBILITY_LEVEL_PRIVATE,
+  VISIBILITY_LEVEL_INTERNAL,
+  VISIBILITY_LEVEL_PUBLIC,
+} from '~/visibility_level/constants';
 
 export const MAX_CHILDREN_COUNT = 20;
 
@@ -28,32 +33,30 @@ export const ITEM_TYPE = {
   GROUP: 'group',
 };
 
-export const VISIBILITY_PUBLIC = 'public';
-export const VISIBILITY_INTERNAL = 'internal';
-export const VISIBILITY_PRIVATE = 'private';
-
 export const GROUP_VISIBILITY_TYPE = {
-  [VISIBILITY_PUBLIC]: __(
+  [VISIBILITY_LEVEL_PUBLIC]: __(
     'Public - The group and any public projects can be viewed without any authentication.',
   ),
-  [VISIBILITY_INTERNAL]: __(
+  [VISIBILITY_LEVEL_INTERNAL]: __(
     'Internal - The group and any internal projects can be viewed by any logged in user except external users.',
   ),
-  [VISIBILITY_PRIVATE]: __('Private - The group and its projects can only be viewed by members.'),
+  [VISIBILITY_LEVEL_PRIVATE]: __(
+    'Private - The group and its projects can only be viewed by members.',
+  ),
 };
 
 export const PROJECT_VISIBILITY_TYPE = {
-  [VISIBILITY_PUBLIC]: __('Public - The project can be accessed without any authentication.'),
-  [VISIBILITY_INTERNAL]: __(
+  [VISIBILITY_LEVEL_PUBLIC]: __('Public - The project can be accessed without any authentication.'),
+  [VISIBILITY_LEVEL_INTERNAL]: __(
     'Internal - The project can be accessed by any logged in user except external users.',
   ),
-  [VISIBILITY_PRIVATE]: __(
+  [VISIBILITY_LEVEL_PRIVATE]: __(
     'Private - Project access must be granted explicitly to each user. If this project is part of a group, access will be granted to members of the group.',
   ),
 };
 
 export const VISIBILITY_TYPE_ICON = {
-  [VISIBILITY_PUBLIC]: 'earth',
-  [VISIBILITY_INTERNAL]: 'shield',
-  [VISIBILITY_PRIVATE]: 'lock',
+  [VISIBILITY_LEVEL_PUBLIC]: 'earth',
+  [VISIBILITY_LEVEL_INTERNAL]: 'shield',
+  [VISIBILITY_LEVEL_PRIVATE]: 'lock',
 };
diff --git a/app/assets/javascripts/visibility_level/constants.js b/app/assets/javascripts/visibility_level/constants.js
new file mode 100644
index 00000000000..65f0eceae55
--- /dev/null
+++ b/app/assets/javascripts/visibility_level/constants.js
@@ -0,0 +1,10 @@
+export const VISIBILITY_LEVEL_PRIVATE = 'private';
+export const VISIBILITY_LEVEL_INTERNAL = 'internal';
+export const VISIBILITY_LEVEL_PUBLIC = 'public';
+
+// Matches `lib/gitlab/visibility_level.rb`
+export const VISIBILITY_LEVELS_ENUM = {
+  [VISIBILITY_LEVEL_PRIVATE]: 0,
+  [VISIBILITY_LEVEL_INTERNAL]: 10,
+  [VISIBILITY_LEVEL_PUBLIC]: 20,
+};