1 files changed, 61 insertions, 4 deletions

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 bed264341a5..bff90254c04 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
@@ -1,14 +1,23 @@
 <script>
 /* eslint-disable vue/no-v-html */
-import { GlToast, GlModal, GlTooltipDirective, GlIcon, GlFormCheckbox } from '@gitlab/ui';
+import {
+  GlToast,
+  GlModal,
+  GlTooltipDirective,
+  GlIcon,
+  GlFormCheckbox,
+  GlDropdown,
+  GlDropdownItem,
+} from '@gitlab/ui';
 import $ from 'jquery';
 import Vue from 'vue';
 import GfmAutoComplete from 'ee_else_ce/gfm_auto_complete';
 import * as Emoji from '~/emoji';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { BV_SHOW_MODAL, BV_HIDE_MODAL } from '~/lib/utils/constants';
-import { __, s__ } from '~/locale';
+import { __, s__, sprintf } from '~/locale';
 import { updateUserStatus } from '~/rest_api';
+import { timeRanges } from '~/vue_shared/constants';
 import EmojiMenuInModal from './emoji_menu_in_modal';
 import { isUserBusy } from './utils';
 
@@ -20,11 +29,21 @@ export const AVAILABILITY_STATUS = {
 
 Vue.use(GlToast);
 
+const statusTimeRanges = [
+  {
+    label: __('Never'),
+    name: 'never',
+  },
+  ...timeRanges,
+];
+
 export default {
   components: {
     GlIcon,
     GlModal,
     GlFormCheckbox,
+    GlDropdown,
+    GlDropdownItem,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -53,6 +72,11 @@ export default {
       required: false,
       default: false,
     },
+    currentClearStatusAfter: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {
@@ -65,6 +89,10 @@ export default {
       modalId: 'set-user-status-modal',
       noEmoji: true,
       availability: isUserBusy(this.currentAvailability),
+      clearStatusAfter: statusTimeRanges[0].label,
+      clearStatusAfterMessage: sprintf(s__('SetStatusModal|Your status resets on %{date}.'), {
+        date: this.currentClearStatusAfter,
+      }),
     };
   },
   computed: {
@@ -161,12 +189,16 @@ export default {
       this.setStatus();
     },
     setStatus() {
-      const { emoji, message, availability } = this;
+      const { emoji, message, availability, clearStatusAfter } = this;
 
       updateUserStatus({
         emoji,
         message,
         availability: availability ? AVAILABILITY_STATUS.BUSY : AVAILABILITY_STATUS.NOT_SET,
+        clearStatusAfter:
+          clearStatusAfter === statusTimeRanges[0].label
+            ? null
+            : clearStatusAfter.replace(' ', '_'),
       })
         .then(this.onUpdateSuccess)
         .catch(this.onUpdateFail);
@@ -183,7 +215,11 @@ export default {
 
       this.closeModal();
     },
+    setClearStatusAfter(after) {
+      this.clearStatusAfter = after;
+    },
   },
+  statusTimeRanges,
 };
 </script>
 
@@ -268,10 +304,31 @@ export default {
           </div>
           <div class="gl-display-flex">
             <span class="gl-text-gray-600 gl-ml-5">
-              {{ s__('SetStatusModal|"Busy" will be shown next to your name') }}
+              {{ s__('SetStatusModal|A busy indicator is shown next to your name and avatar.') }}
             </span>
           </div>
         </div>
+        <div class="form-group">
+          <div class="gl-display-flex gl-align-items-baseline">
+            <span class="gl-mr-3">{{ s__('SetStatusModal|Clear status after') }}</span>
+            <gl-dropdown :text="clearStatusAfter" data-testid="clear-status-at-dropdown">
+              <gl-dropdown-item
+                v-for="after in $options.statusTimeRanges"
+                :key="after.name"
+                :data-testid="after.name"
+                @click="setClearStatusAfter(after.label)"
+                >{{ after.label }}</gl-dropdown-item
+              >
+            </gl-dropdown>
+          </div>
+          <div
+            v-if="currentClearStatusAfter.length"
+            class="gl-mt-3 gl-text-gray-400 gl-font-sm"
+            data-testid="clear-status-at-message"
+          >
+            {{ clearStatusAfterMessage }}
+          </div>
+        </div>
       </div>
     </div>
   </gl-modal>