Add latest changes from gitlab-org/gitlab@master

1 files changed, 26 insertions, 2 deletions

diff --git a/app/assets/javascripts/members.js b/app/assets/javascripts/members.js
index 68fca706ce5..252706b3647 100644
--- a/app/assets/javascripts/members.js
+++ b/app/assets/javascripts/members.js
@@ -2,6 +2,7 @@ import $ from 'jquery';
 import { Rails } from '~/lib/utils/rails_ujs';
 import { disableButtonIfEmptyField } from '~/lib/utils/common_utils';
 import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
+import { __, sprintf } from '~/locale';
 
 export default class Members {
   constructor() {
@@ -64,7 +65,28 @@ export default class Members {
   }
 
   formSuccess(e) {
-    const { $toggle, $dateInput } = this.getMemberListItems($(e.currentTarget).closest('.member'));
+    const { $toggle, $dateInput, $expiresIn, $expiresInText } = this.getMemberListItems(
+      $(e.currentTarget).closest('.js-member'),
+    );
+
+    const [data] = e.detail;
+    const expiresIn = data?.expires_in;
+
+    if (expiresIn) {
+      $expiresIn.removeClass('gl-display-none');
+
+      $expiresInText.text(sprintf(__('Expires in %{expires_at}'), { expires_at: expiresIn }));
+
+      const { expires_soon: expiresSoon } = data;
+
+      if (expiresSoon) {
+        $expiresInText.addClass('text-warning');
+      } else {
+        $expiresInText.removeClass('text-warning');
+      }
+    } else {
+      $expiresIn.addClass('gl-display-none');
+    }
 
     $toggle.enable();
     $dateInput.enable();
@@ -72,10 +94,12 @@ export default class Members {
 
   // eslint-disable-next-line class-methods-use-this
   getMemberListItems($el) {
-    const $memberListItem = $el.is('.member') ? $el : $(`#${$el.data('elId')}`);
+    const $memberListItem = $el.is('.js-member') ? $el : $(`#${$el.data('elId')}`);
 
     return {
       $memberListItem,
+      $expiresIn: $memberListItem.find('.js-expires-in'),
+      $expiresInText: $memberListItem.find('.js-expires-in-text'),
       $toggle: $memberListItem.find('.dropdown-menu-toggle'),
       $dateInput: $memberListItem.find('.js-access-expiration-date'),
     };