Backport: Callout CSS, group edit selection JS

app/assets/javascripts/groups_select.js

@@ -10,13 +10,18 @@ export default function groupsSelect() {
     const $select = $(this);
     const allAvailable = $select.data('allAvailable');
     const skipGroups = $select.data('skipGroups') || [];
+    const parentGroupID = $select.data('parentId');
+    const groupsPath = parentGroupID
+      ? Api.subgroupsPath.replace(':id', parentGroupID)
+      : Api.groupsPath;
+
     $select.select2({
       placeholder: 'Search for a group',
       allowClear: $select.hasClass('allowClear'),
       multiple: $select.hasClass('multiselect'),
       minimumInputLength: 0,
       ajax: {
-        url: Api.buildUrl(Api.groupsPath),
+        url: Api.buildUrl(groupsPath),
         dataType: 'json',
         quietMillis: 250,
         transport(params) {

app/assets/javascripts/pages/groups/edit/index.js

@@ -5,6 +5,7 @@ import initSettingsPanels from '~/settings_panels';
 import dirtySubmitFactory from '~/dirty_submit/dirty_submit_factory';
 import mountBadgeSettings from '~/pages/shared/mount_badge_settings';
 import { GROUP_BADGE } from '~/badges/constants';
+import groupsSelect from '~/groups_select';
 import projectSelect from '~/project_select';
 
 document.addEventListener('DOMContentLoaded', () => {
@@ -17,5 +18,8 @@ document.addEventListener('DOMContentLoaded', () => {
   );
   mountBadgeSettings(GROUP_BADGE);
 
+  // Initialize Subgroups selector
+  groupsSelect();
+
   projectSelect();
 });

app/assets/stylesheets/framework/callout.scss

@@ -33,7 +33,11 @@
 .bs-callout-warning {
   background-color: $orange-100;
   border-color: $orange-200;
-  color: $orange-700;
+  color: $orange-900;
+
+  a {
+    color: $orange-900;
+  }
 }
 
 .bs-callout-info {