Add latest changes from gitlab-org/gitlab@master

4 files changed, 60 insertions, 70 deletions

diff --git a/app/assets/javascripts/set_status_modal/set_status_form.vue b/app/assets/javascripts/set_status_modal/set_status_form.vue
index c96189c7cae..dd27a12cbee 100644
--- a/app/assets/javascripts/set_status_modal/set_status_form.vue
+++ b/app/assets/javascripts/set_status_modal/set_status_form.vue
@@ -8,6 +8,7 @@ import {
   GlFormInputGroup,
   GlDropdown,
   GlDropdownItem,
+  GlSprintf,
   GlFormGroup,
 } from '@gitlab/ui';
 import $ from 'jquery';
@@ -15,8 +16,7 @@ import SafeHtml from '~/vue_shared/directives/safe_html';
 import GfmAutoComplete from 'ee_else_ce/gfm_auto_complete';
 import * as Emoji from '~/emoji';
 import { s__ } from '~/locale';
-import { formatDate, newDate, nSecondsAfter, isToday } from '~/lib/utils/datetime_utility';
-import { TIME_RANGES_WITH_NEVER, AVAILABILITY_STATUS, NEVER_TIME_RANGE } from './constants';
+import { TIME_RANGES_WITH_NEVER, AVAILABILITY_STATUS } from './constants';
 
 export default {
   components: {
@@ -27,6 +27,7 @@ export default {
     GlFormInputGroup,
     GlDropdown,
     GlDropdownItem,
+    GlSprintf,
     GlFormGroup,
     EmojiPicker: () => import('~/emoji/components/picker.vue'),
   },
@@ -55,7 +56,7 @@ export default {
     clearStatusAfter: {
       type: Object,
       required: false,
-      default: null,
+      default: () => ({}),
     },
     currentClearStatusAfter: {
       type: String,
@@ -79,21 +80,6 @@ export default {
     noEmoji() {
       return this.emojiTag === '';
     },
-    clearStatusAfterDropdownText() {
-      if (this.clearStatusAfter === null && this.currentClearStatusAfter.length) {
-        return this.formatClearStatusAfterDate(new Date(this.currentClearStatusAfter));
-      }
-
-      if (this.clearStatusAfter?.duration?.seconds) {
-        const clearStatusAfterDate = nSecondsAfter(
-          newDate(),
-          this.clearStatusAfter.duration.seconds,
-        );
-        return this.formatClearStatusAfterDate(clearStatusAfterDate);
-      }
-
-      return NEVER_TIME_RANGE.label;
-    },
   },
   mounted() {
     this.setupEmojiListAndAutocomplete();
@@ -138,13 +124,6 @@ export default {
       this.$emit('message-input', '');
       this.clearEmoji();
     },
-    formatClearStatusAfterDate(date) {
-      if (isToday(date)) {
-        return formatDate(date, 'h:MMtt');
-      }
-
-      return formatDate(date, 'mmm d, yyyy h:MMtt');
-    },
   },
   TIME_RANGES_WITH_NEVER,
   AVAILABILITY_STATUS,
@@ -223,7 +202,7 @@ export default {
     <gl-form-group :label="$options.i18n.clearStatusAfterDropdownLabel" class="gl-mb-0">
       <gl-dropdown
         block
-        :text="clearStatusAfterDropdownText"
+        :text="clearStatusAfter.label"
         data-testid="clear-status-at-dropdown"
         toggle-class="gl-mb-0 gl-form-input-md"
       >
@@ -235,6 +214,14 @@ export default {
           >{{ after.label }}</gl-dropdown-item
         >
       </gl-dropdown>
+
+      <template v-if="currentClearStatusAfter.length" #description>
+        <span data-testid="clear-status-at-message">
+          <gl-sprintf :message="$options.i18n.clearStatusAfterMessage">
+            <template #date>{{ currentClearStatusAfter }}</template>
+          </gl-sprintf>
+        </span>
+      </template>
     </gl-form-group>
   </div>
 </template>
diff --git a/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue b/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue
index e7d028e8d23..5becc03646e 100644
--- a/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue
+++ b/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue
@@ -6,8 +6,8 @@ import { BV_SHOW_MODAL, BV_HIDE_MODAL } from '~/lib/utils/constants';
 import { s__ } from '~/locale';
 import { updateUserStatus } from '~/rest_api';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
-import { isUserBusy, computedClearStatusAfterValue } from './utils';
-import { AVAILABILITY_STATUS } from './constants';
+import { isUserBusy } from './utils';
+import { NEVER_TIME_RANGE, AVAILABILITY_STATUS } from './constants';
 import SetStatusForm from './set_status_form.vue';
 
 Vue.use(GlToast);
@@ -53,17 +53,9 @@ export default {
       message: this.currentMessage,
       modalId: 'set-user-status-modal',
       availability: isUserBusy(this.currentAvailability),
-      clearStatusAfter: null,
+      clearStatusAfter: NEVER_TIME_RANGE,
     };
   },
-  computed: {
-    shouldIncludeClearStatusAfterInApiRequest() {
-      return this.clearStatusAfter !== null;
-    },
-    clearStatusAfterApiRequestValue() {
-      return computedClearStatusAfterValue(this.clearStatusAfter);
-    },
-  },
   mounted() {
     this.$root.$emit(BV_SHOW_MODAL, this.modalId);
   },
@@ -78,21 +70,14 @@ export default {
       this.setStatus();
     },
     setStatus() {
-      const {
-        emoji,
-        message,
-        availability,
-        shouldIncludeClearStatusAfterInApiRequest,
-        clearStatusAfterApiRequestValue,
-      } = this;
+      const { emoji, message, availability, clearStatusAfter } = this;
 
       updateUserStatus({
         emoji,
         message,
         availability: availability ? AVAILABILITY_STATUS.BUSY : AVAILABILITY_STATUS.NOT_SET,
-        ...(shouldIncludeClearStatusAfterInApiRequest
-          ? { clearStatusAfter: clearStatusAfterApiRequestValue }
-          : {}),
+        clearStatusAfter:
+          clearStatusAfter.label === NEVER_TIME_RANGE.label ? null : clearStatusAfter.shortcut,
       })
         .then(this.onUpdateSuccess)
         .catch(this.onUpdateFail);
diff --git a/app/assets/javascripts/set_status_modal/user_profile_set_status_wrapper.vue b/app/assets/javascripts/set_status_modal/user_profile_set_status_wrapper.vue
index 48693485116..c709611e13d 100644
--- a/app/assets/javascripts/set_status_modal/user_profile_set_status_wrapper.vue
+++ b/app/assets/javascripts/set_status_modal/user_profile_set_status_wrapper.vue
@@ -1,7 +1,9 @@
 <script>
+import { secondsToMilliseconds } from '~/lib/utils/datetime_utility';
+import dateFormat from '~/lib/dateformat';
 import SetStatusForm from './set_status_form.vue';
-import { isUserBusy, computedClearStatusAfterValue } from './utils';
-import { AVAILABILITY_STATUS } from './constants';
+import { isUserBusy } from './utils';
+import { NEVER_TIME_RANGE, AVAILABILITY_STATUS } from './constants';
 
 export default {
   components: { SetStatusForm },
@@ -11,16 +13,15 @@ export default {
       emoji: this.fields.emoji.value,
       message: this.fields.message.value,
       availability: isUserBusy(this.fields.availability.value),
-      clearStatusAfter: null,
+      clearStatusAfter: NEVER_TIME_RANGE,
       currentClearStatusAfter: this.fields.clearStatusAfter.value,
     };
   },
   computed: {
-    showClearStatusAfterHiddenInput() {
-      return this.clearStatusAfter !== null;
-    },
-    clearStatusAfterHiddenInputValue() {
-      return computedClearStatusAfterValue(this.clearStatusAfter);
+    clearStatusAfterInputValue() {
+      return this.clearStatusAfter.label === NEVER_TIME_RANGE.label
+        ? null
+        : this.clearStatusAfter.shortcut;
     },
     availabilityInputValue() {
       return this.availability
@@ -28,6 +29,18 @@ export default {
         : this.$options.AVAILABILITY_STATUS.NOT_SET;
     },
   },
+  mounted() {
+    this.$options.formEl = document.querySelector('form.js-edit-user');
+
+    if (!this.$options.formEl) return;
+
+    this.$options.formEl.addEventListener('ajax:success', this.handleFormSuccess);
+  },
+  beforeDestroy() {
+    if (!this.$options.formEl) return;
+
+    this.$options.formEl.removeEventListener('ajax:success', this.handleFormSuccess);
+  },
   methods: {
     handleMessageInput(value) {
       this.message = value;
@@ -41,6 +54,24 @@ export default {
     handleAvailabilityInput(value) {
       this.availability = value;
     },
+    handleFormSuccess() {
+      if (!this.clearStatusAfter?.duration?.seconds) {
+        this.currentClearStatusAfter = '';
+
+        return;
+      }
+
+      const now = new Date();
+      const currentClearStatusAfterDate = new Date(
+        now.getTime() + secondsToMilliseconds(this.clearStatusAfter.duration.seconds),
+      );
+
+      this.currentClearStatusAfter = dateFormat(
+        currentClearStatusAfterDate,
+        "UTC:yyyy-mm-dd HH:MM:ss 'UTC'",
+      );
+      this.clearStatusAfter = NEVER_TIME_RANGE;
+    },
   },
   AVAILABILITY_STATUS,
   formEl: null,
@@ -52,12 +83,7 @@ export default {
     <input :value="emoji" type="hidden" :name="fields.emoji.name" />
     <input :value="message" type="hidden" :name="fields.message.name" />
     <input :value="availabilityInputValue" type="hidden" :name="fields.availability.name" />
-    <input
-      v-if="showClearStatusAfterHiddenInput"
-      :value="clearStatusAfterHiddenInputValue"
-      type="hidden"
-      :name="fields.clearStatusAfter.name"
-    />
+    <input :value="clearStatusAfterInputValue" type="hidden" :name="fields.clearStatusAfter.name" />
     <set-status-form
       default-emoji="speech_balloon"
       :emoji="emoji"
diff --git a/app/assets/javascripts/set_status_modal/utils.js b/app/assets/javascripts/set_status_modal/utils.js
index 11e47fdf956..950091195d2 100644
--- a/app/assets/javascripts/set_status_modal/utils.js
+++ b/app/assets/javascripts/set_status_modal/utils.js
@@ -1,12 +1,4 @@
-import { AVAILABILITY_STATUS, NEVER_TIME_RANGE } from './constants';
+import { AVAILABILITY_STATUS } from './constants';
 
 export const isUserBusy = (status = '') =>
   Boolean(status.length && status.toLowerCase().trim() === AVAILABILITY_STATUS.BUSY);
-
-export const computedClearStatusAfterValue = (value) => {
-  if (value === null || value.name === NEVER_TIME_RANGE.name) {
-    return null;
-  }
-
-  return value.shortcut;
-};