1 files changed, 26 insertions, 13 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 dd27a12cbee..c96189c7cae 100644
--- a/app/assets/javascripts/set_status_modal/set_status_form.vue
+++ b/app/assets/javascripts/set_status_modal/set_status_form.vue
@@ -8,7 +8,6 @@ import {
   GlFormInputGroup,
   GlDropdown,
   GlDropdownItem,
-  GlSprintf,
   GlFormGroup,
 } from '@gitlab/ui';
 import $ from 'jquery';
@@ -16,7 +15,8 @@ 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 { TIME_RANGES_WITH_NEVER, AVAILABILITY_STATUS } from './constants';
+import { formatDate, newDate, nSecondsAfter, isToday } from '~/lib/utils/datetime_utility';
+import { TIME_RANGES_WITH_NEVER, AVAILABILITY_STATUS, NEVER_TIME_RANGE } from './constants';
 
 export default {
   components: {
@@ -27,7 +27,6 @@ export default {
     GlFormInputGroup,
     GlDropdown,
     GlDropdownItem,
-    GlSprintf,
     GlFormGroup,
     EmojiPicker: () => import('~/emoji/components/picker.vue'),
   },
@@ -56,7 +55,7 @@ export default {
     clearStatusAfter: {
       type: Object,
       required: false,
-      default: () => ({}),
+      default: null,
     },
     currentClearStatusAfter: {
       type: String,
@@ -80,6 +79,21 @@ 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();
@@ -124,6 +138,13 @@ 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,
@@ -202,7 +223,7 @@ export default {
     <gl-form-group :label="$options.i18n.clearStatusAfterDropdownLabel" class="gl-mb-0">
       <gl-dropdown
         block
-        :text="clearStatusAfter.label"
+        :text="clearStatusAfterDropdownText"
         data-testid="clear-status-at-dropdown"
         toggle-class="gl-mb-0 gl-form-input-md"
       >
@@ -214,14 +235,6 @@ 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>