Add latest changes from gitlab-org/gitlab@master

3 files changed, 101 insertions, 5 deletions

diff --git a/app/assets/javascripts/profile/edit/components/profile_edit_app.vue b/app/assets/javascripts/profile/edit/components/profile_edit_app.vue
index df7f9a5be81..6b39f137880 100644
--- a/app/assets/javascripts/profile/edit/components/profile_edit_app.vue
+++ b/app/assets/javascripts/profile/edit/components/profile_edit_app.vue
@@ -4,8 +4,12 @@ import { GlForm, GlButton } from '@gitlab/ui';
 import { VARIANT_DANGER, VARIANT_INFO, createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { readFileAsDataURL } from '~/lib/utils/file_utility';
+import SetStatusForm from '~/set_status_modal/set_status_form.vue';
+import SettingsBlock from '~/packages_and_registries/shared/components/settings_block.vue';
+import { isUserBusy, computedClearStatusAfterValue } from '~/set_status_modal/utils';
+import { AVAILABILITY_STATUS } from '~/set_status_modal/constants';
 
-import { i18n } from '../constants';
+import { i18n, statusI18n } from '../constants';
 import UserAvatar from './user_avatar.vue';
 
 export default {
@@ -13,7 +17,16 @@ export default {
     UserAvatar,
     GlForm,
     GlButton,
+    SettingsBlock,
+    SetStatusForm,
   },
+  inject: [
+    'currentEmoji',
+    'currentMessage',
+    'currentAvailability',
+    'defaultEmoji',
+    'currentClearStatusAfter',
+  ],
   props: {
     profilePath: {
       type: String,
@@ -28,14 +41,44 @@ export default {
     return {
       uploadingProfile: false,
       avatarBlob: null,
+      status: {
+        emoji: this.currentEmoji,
+        message: this.currentMessage,
+        availability: isUserBusy(this.currentAvailability),
+        clearStatusAfter: null,
+      },
     };
   },
+  computed: {
+    shouldIncludeClearStatusAfterInApiRequest() {
+      return this.status.clearStatusAfter !== null;
+    },
+    clearStatusAfterApiRequestValue() {
+      return computedClearStatusAfterValue(this.status.clearStatusAfter);
+    },
+  },
   methods: {
     async onSubmit() {
       // TODO: Do validation before organizing data.
       this.uploadingProfile = true;
       const formData = new FormData();
 
+      // Setting up status data
+      const statusFieldNameBase = 'user[status]';
+      formData.append(`${statusFieldNameBase}[emoji]`, this.status.emoji);
+      formData.append(`${statusFieldNameBase}[message]`, this.status.message);
+      formData.append(
+        `${statusFieldNameBase}[availability]`,
+        this.status.availability ? AVAILABILITY_STATUS.BUSY : AVAILABILITY_STATUS.NOT_SET,
+      );
+
+      if (this.shouldIncludeClearStatusAfterInApiRequest) {
+        formData.append(
+          `${statusFieldNameBase}[clear_status_after]`,
+          this.clearStatusAfterApiRequestValue,
+        );
+      }
+
       if (this.avatarBlob) {
         formData.append('user[avatar]', this.avatarBlob, 'avatar.png');
       }
@@ -46,7 +89,6 @@ export default {
         if (this.avatarBlob) {
           this.syncHeaderAvatars();
         }
-
         createAlert({
           message: data.message,
           variant: data.status === 'error' ? VARIANT_DANGER : VARIANT_INFO,
@@ -79,14 +121,47 @@ export default {
     onBlobChange(blob) {
       this.avatarBlob = blob;
     },
+    onMessageInput(value) {
+      this.status.message = value;
+    },
+    onEmojiClick(emoji) {
+      this.status.emoji = emoji;
+    },
+    onClearStatusAfterClick(after) {
+      this.status.clearStatusAfter = after;
+    },
+    onAvailabilityInput(value) {
+      this.status.availability = value;
+    },
+  },
+  i18n: {
+    ...i18n,
+    ...statusI18n,
   },
-  i18n,
 };
 </script>
 
 <template>
-  <gl-form @submit.prevent="onSubmit">
+  <gl-form class="edit-user" @submit.prevent="onSubmit">
     <user-avatar @blob-change="onBlobChange" />
+    <settings-block class="js-search-settings-section">
+      <template #title>{{ $options.i18n.setStatusTitle }}</template>
+      <template #description>{{ $options.i18n.setStatusDescription }}</template>
+      <div class="gl-max-w-80">
+        <set-status-form
+          :default-emoji="defaultEmoji"
+          :emoji="status.emoji"
+          :message="status.message"
+          :availability="status.availability"
+          :clear-status-after="status.clearStatusAfter"
+          :current-clear-status-after="currentClearStatusAfter"
+          @message-input="onMessageInput"
+          @emoji-click="onEmojiClick"
+          @clear-status-after-click="onClearStatusAfterClick"
+          @availability-input="onAvailabilityInput"
+        />
+      </div>
+    </settings-block>
     <!-- TODO: to implement profile editing form fields -->
     <!-- It will be implemented in the upcoming MRs -->
     <!-- Related issue: https://gitlab.com/gitlab-org/gitlab/-/issues/389918 -->
diff --git a/app/assets/javascripts/profile/edit/constants.js b/app/assets/javascripts/profile/edit/constants.js
index ecd6274e39b..e07615273f7 100644
--- a/app/assets/javascripts/profile/edit/constants.js
+++ b/app/assets/javascripts/profile/edit/constants.js
@@ -21,6 +21,13 @@ export const avatarI18n = {
   cropAvatarSetAsNewAvatar: s__('Profiles|Set new profile picture'),
 };
 
+export const statusI18n = {
+  setStatusTitle: s__('Profiles|Current status'),
+  setStatusDescription: s__(
+    'Profiles|This emoji and message will appear on your profile and throughout the interface.',
+  ),
+};
+
 export const i18n = {
   updateProfileSettings: s__('Profiles|Update profile settings'),
   cancel: __('Cancel'),
diff --git a/app/assets/javascripts/profile/edit/index.js b/app/assets/javascripts/profile/edit/index.js
index 1466eede864..27b410c3a12 100644
--- a/app/assets/javascripts/profile/edit/index.js
+++ b/app/assets/javascripts/profile/edit/index.js
@@ -7,13 +7,27 @@ export const initProfileEdit = () => {
 
   if (!mountEl) return false;
 
-  const { profilePath, userPath, ...provides } = mountEl.dataset;
+  const {
+    profilePath,
+    userPath,
+    currentEmoji,
+    currentMessage,
+    currentAvailability,
+    defaultEmoji,
+    currentClearStatusAfter,
+    ...provides
+  } = mountEl.dataset;
 
   return new Vue({
     el: mountEl,
     name: 'ProfileEditRoot',
     provide: {
       ...provides,
+      currentEmoji,
+      currentMessage,
+      currentAvailability,
+      defaultEmoji,
+      currentClearStatusAfter,
       hasAvatar: parseBoolean(provides.hasAvatar),
       gravatarEnabled: parseBoolean(provides.gravatarEnabled),
       gravatarLink: JSON.parse(provides.gravatarLink),