Merge branch 'expiration-date-on-memberships' into 'master'

Expiration date on memberships

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/17495

See merge request !5876

4 files changed, 61 insertions, 3 deletions

diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 32e3aa62358..ba64d2bcf0b 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -129,10 +129,12 @@
           new NotificationsDropdown();
           break;
         case 'groups:group_members:index':
+          new gl.MemberExpirationDate();
           new GroupMembers();
           new UsersSelect();
           break;
         case 'projects:project_members:index':
+          new gl.MemberExpirationDate();
           new ProjectMembers();
           new UsersSelect();
           break;
@@ -174,6 +176,7 @@
           new BuildArtifacts();
           break;
         case 'projects:group_links:index':
+          new gl.MemberExpirationDate();
           new GroupsSelect();
           break;
         case 'search:show':
diff --git a/app/assets/javascripts/member_expiration_date.js b/app/assets/javascripts/member_expiration_date.js
new file mode 100644
index 00000000000..1935af491f7
--- /dev/null
+++ b/app/assets/javascripts/member_expiration_date.js
@@ -0,0 +1,32 @@
+(function() {
+  // Add datepickers to all `js-access-expiration-date` elements. If those elements are
+  // children of an element with the `clearable-input` class, and have a sibling
+  // `js-clear-input` element, then show that element when there is a value in the
+  // datepicker, and make clicking on that element clear the field.
+  //
+  gl.MemberExpirationDate = function() {
+    function toggleClearInput() {
+      $(this).closest('.clearable-input').toggleClass('has-value', $(this).val() !== '');
+    }
+
+    var inputs = $('.js-access-expiration-date');
+
+    inputs.datepicker({
+      dateFormat: 'yy-mm-dd',
+      minDate: 1,
+      onSelect: toggleClearInput
+    });
+
+    inputs.next('.js-clear-input').on('click', function(event) {
+      event.preventDefault();
+
+      var input = $(this).closest('.clearable-input').find('.js-access-expiration-date');
+      input.datepicker('setDate', null);
+      toggleClearInput.call(input);
+    });
+
+    inputs.on('blur', toggleClearInput);
+
+    inputs.each(toggleClearInput);
+  };
+}).call(this);
diff --git a/app/assets/javascripts/project_members.js b/app/assets/javascripts/project_members.js
index f6a796b325a..78f7b48bc7d 100644
--- a/app/assets/javascripts/project_members.js
+++ b/app/assets/javascripts/project_members.js
@@ -5,9 +5,6 @@
         return $(this).fadeOut();
       });
     }
-
     return ProjectMembers;
-
   })();
-
 }).call(this);
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 27dc2b2a1fa..eaf2d3270b3 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -719,3 +719,29 @@ pre.light-well {
     width: 300px;
   }
 }
+
+.clearable-input {
+  position: relative;
+
+  .clear-icon {
+    @extend .fa-times;
+    display: none;
+    position: absolute;
+    right: 7px;
+    top: 7px;
+    color: $location-icon-color;
+
+    &:before {
+      font-family: FontAwesome;
+      font-weight: normal;
+      font-style: normal;
+    }
+  }
+
+  &.has-value {
+    .clear-icon {
+      cursor: pointer;
+      display: block;
+    }
+  }
+}