Merge branch 'members-ee-code' into 'master'

Moved EE code out of CE members JS file

Closes #10019

See merge request gitlab-org/gitlab-ee!9743

app/assets/javascripts/members.js

 import $ from 'jquery';
-import Flash from './flash';
-import { __ } from './locale';
-import axios from './lib/utils/axios_utils';
 
 export default class Members {
   constructor() {
@@ -10,15 +7,6 @@ export default class Members {
   }
 
   addListeners() {
-    $('.js-ldap-permissions')
-      .off('click')
-      .on('click', this.showLDAPPermissionsWarning.bind(this));
-    $('.js-ldap-override')
-      .off('click')
-      .on('click', this.toggleMemberAccessToggle.bind(this));
-    $('.project_member, .group_member')
-      .off('ajax:success')
-      .on('ajax:success', this.removeRow);
     $('.js-member-update-control')
       .off('change')
       .on('change', this.formSubmit.bind(this));
@@ -28,47 +16,33 @@ export default class Members {
     gl.utils.disableButtonIfEmptyField('#user_ids', 'input[name=commit]', 'change');
   }
 
+  dropdownClicked(options) {
+    this.formSubmit(null, options.$el);
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  dropdownToggleLabel(selected, $el) {
+    return $el.text();
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  dropdownIsSelectable(selected, $el) {
+    return !$el.hasClass('is-active');
+  }
+
   initGLDropdown() {
     $('.js-member-permissions-dropdown').each((i, btn) => {
       const $btn = $(btn);
 
       $btn.glDropdown({
         selectable: true,
-        isSelectable(selected, $el) {
-          if ($el.data('revert')) {
-            return false;
-          }
-
-          return !$el.hasClass('is-active');
-        },
+        isSelectable: (selected, $el) => this.dropdownIsSelectable(selected, $el),
         fieldName: $btn.data('fieldName'),
         id(selected, $el) {
           return $el.data('id');
         },
-        toggleLabel(selected, $el) {
-          if ($el.data('revert')) {
-            return $btn.text();
-          }
-
-          return $el.text();
-        },
-        clicked: options => {
-          const $link = options.$el;
-
-          if (!$link.data('revert')) {
-            this.formSubmit(null, $link);
-          } else {
-            const { $memberListItem, $toggle, $dateInput } = this.getMemberListItems($link);
-
-            $toggle.disable();
-            $dateInput.disable();
-
-            this.overrideLdap($memberListItem, $link.data('endpoint'), false).catch(() => {
-              $toggle.enable();
-              $dateInput.enable();
-            });
-          }
-        },
+        toggleLabel: (selected, $el) => this.dropdownToggleLabel(selected, $el, $btn),
+        clicked: options => this.dropdownClicked(options),
       });
     });
   }
@@ -90,14 +64,6 @@ export default class Members {
     $dateInput.enable();
   }
 
-  showLDAPPermissionsWarning(e) {
-    const $btn = $(e.currentTarget);
-    const { $memberListItem } = this.getMemberListItems($btn);
-    const $ldapPermissionsElement = $memberListItem.next();
-
-    $ldapPermissionsElement.toggle();
-  }
-
   // eslint-disable-next-line class-methods-use-this
   getMemberListItems($el) {
     const $memberListItem = $el.is('.member') ? $el : $(`#${$el.data('elId')}`);
@@ -108,44 +74,4 @@ export default class Members {
       $dateInput: $memberListItem.find('.js-access-expiration-date'),
     };
   }
-
-  toggleMemberAccessToggle(e) {
-    const $btn = $(e.currentTarget);
-    const { $memberListItem, $toggle, $dateInput } = this.getMemberListItems($btn);
-
-    $btn.disable();
-    this.overrideLdap($memberListItem, $btn.data('endpoint'), true)
-      .then(() => {
-        this.showLDAPPermissionsWarning(e);
-
-        $toggle.enable();
-        $dateInput.enable();
-      })
-      .catch(xhr => {
-        $btn.enable();
-
-        if (xhr.status === 403) {
-          Flash(
-            __(
-              'You do not have the correct permissions to override the settings from the LDAP group sync.',
-            ),
-          );
-        } else {
-          Flash(__('An error occurred while saving LDAP override status. Please try again.'));
-        }
-      });
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  overrideLdap($memberListitem, endpoint, override) {
-    return axios
-      .patch(endpoint, {
-        group_member: {
-          override,
-        },
-      })
-      .then(() => {
-        $memberListitem.toggleClass('is-overriden', override);
-      });
-  }
 }

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

 /* eslint-disable no-new */
 
 import memberExpirationDate from '~/member_expiration_date';
-import Members from '~/members';
+import Members from 'ee_else_ce/members';
 import UsersSelect from '~/users_select';
 
 document.addEventListener('DOMContentLoaded', () => {

app/assets/javascripts/pages/projects/project_members/index.js

+import Members from 'ee_else_ce/members';
 import memberExpirationDate from '../../../member_expiration_date';
 import UsersSelect from '../../../users_select';
 import groupsSelect from '../../../groups_select';
-import Members from '../../../members';
 
 document.addEventListener('DOMContentLoaded', () => {
   memberExpirationDate('.js-access-expiration-date-groups');

ee/app/assets/javascripts/members.js

+import $ from 'jquery';
+import createFlash from '~/flash';
+import { __ } from '~/locale';
+import axios from '~/lib/utils/axios_utils';
+import Members from '~/members';
+
+export default class MembersEE extends Members {
+  addListeners() {
+    super.addListeners();
+
+    $('.js-ldap-permissions')
+      .off('click')
+      .on('click', this.showLDAPPermissionsWarning.bind(this));
+    $('.js-ldap-override')
+      .off('click')
+      .on('click', this.toggleMemberAccessToggle.bind(this));
+  }
+
+  dropdownClicked(options) {
+    const $link = options.$el;
+
+    if (!$link.data('revert')) {
+      this.formSubmit(null, $link);
+    } else {
+      const { $memberListItem, $toggle, $dateInput } = this.getMemberListItems($link);
+
+      $toggle.disable();
+      $dateInput.disable();
+
+      MembersEE.overrideLdap($memberListItem, $link.data('endpoint'), false).catch(() => {
+        $toggle.enable();
+        $dateInput.enable();
+      });
+    }
+  }
+
+  dropdownToggleLabel(selected, $el, $btn) {
+    if ($el.data('revert')) {
+      return $btn.text();
+    }
+
+    return super.dropdownToggleLabel(selected, $el, $btn);
+  }
+
+  dropdownIsSelectable(selected, $el) {
+    if ($el.data('revert')) {
+      return false;
+    }
+
+    return super.dropdownIsSelectable(selected, $el);
+  }
+
+  showLDAPPermissionsWarning(e) {
+    const $btn = $(e.currentTarget);
+    const { $memberListItem } = this.getMemberListItems($btn);
+    const $ldapPermissionsElement = $memberListItem.next();
+
+    $ldapPermissionsElement.toggle();
+  }
+
+  toggleMemberAccessToggle(e) {
+    const $btn = $(e.currentTarget);
+    const { $memberListItem, $toggle, $dateInput } = this.getMemberListItems($btn);
+
+    $btn.disable();
+    MembersEE.overrideLdap($memberListItem, $btn.data('endpoint'), true)
+      .then(() => {
+        this.showLDAPPermissionsWarning(e);
+
+        $toggle.enable();
+        $dateInput.enable();
+      })
+      .catch(xhr => {
+        $btn.enable();
+
+        if (xhr.status === 403) {
+          createFlash(
+            __(
+              'You do not have the correct permissions to override the settings from the LDAP group sync.',
+            ),
+          );
+        } else {
+          createFlash(__('An error occurred while saving LDAP override status. Please try again.'));
+        }
+      });
+  }
+
+  static overrideLdap($memberListitem, endpoint, override) {
+    return axios
+      .patch(endpoint, {
+        group_member: {
+          override,
+        },
+      })
+      .then(() => {
+        $memberListitem.toggleClass('is-overriden', override);
+      });
+  }
+}