feat: Prevent saving preferences and status when impersonating (#11164)

This PR will prevent saving user preferences and online status when impersonating. Previously, these settings could be updated during impersonation, causing the user to see a different view or UI settings.

Fixes https://linear.app/chatwoot/issue/CW-4163/impersonation-improvements

app/javascript/dashboard/components-next/sidebar/SidebarProfileMenuStatus.vue

@@ -4,6 +4,7 @@ import { useMapGetter, useStore } from 'dashboard/composables/store';
 import wootConstants from 'dashboard/constants/globals';
 import { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
+import { useImpersonation } from 'dashboard/composables/useImpersonation';
 
 import {
   DropdownContainer,
@@ -20,6 +21,8 @@ const currentUserAvailability = useMapGetter('getCurrentUserAvailability');
 const currentAccountId = useMapGetter('getCurrentAccountId');
 const currentUserAutoOffline = useMapGetter('getCurrentUserAutoOffline');
 
+const { isImpersonating } = useImpersonation();
+
 const { AVAILABILITY_STATUS_KEYS } = wootConstants;
 const statusList = computed(() => {
   return [
@@ -46,6 +49,10 @@ const activeStatus = computed(() => {
 });
 
 function changeAvailabilityStatus(availability) {
+  if (isImpersonating.value) {
+    useAlert(t('PROFILE_SETTINGS.FORM.AVAILABILITY.IMPERSONATING_ERROR'));
+    return;
+  }
   try {
     store.dispatch('updateAvailability', {
       availability,

app/javascript/dashboard/components/layout/AvailabilityStatus.vue

@@ -1,6 +1,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
+import { useImpersonation } from 'dashboard/composables/useImpersonation';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
 import WootDropdownHeader from 'shared/components/ui/dropdown/DropdownHeader.vue';
@@ -20,6 +21,10 @@ export default {
     AvailabilityStatusBadge,
     NextButton,
   },
+  setup() {
+    const { isImpersonating } = useImpersonation();
+    return { isImpersonating };
+  },
   data() {
     return {
       isStatusMenuOpened: false,
@@ -73,6 +78,13 @@ export default {
       });
     },
     changeAvailabilityStatus(availability) {
+      if (this.isImpersonating) {
+        useAlert(
+          this.$t('PROFILE_SETTINGS.FORM.AVAILABILITY.IMPERSONATING_ERROR')
+        );
+        return;
+      }
+
       if (this.isUpdating) {
         return;
       }

app/javascript/dashboard/composables/spec/useImpersonation.spec.js

@@ -0,0 +1,37 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { useImpersonation } from '../useImpersonation';
+
+vi.mock('shared/helpers/sessionStorage', () => ({
+  __esModule: true,
+  default: {
+    get: vi.fn(),
+    set: vi.fn(),
+  },
+}));
+
+import SessionStorage from 'shared/helpers/sessionStorage';
+import { SESSION_STORAGE_KEYS } from 'dashboard/constants/sessionStorage';
+
+describe('useImpersonation', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should return true if impersonation flag is set in session storage', () => {
+    SessionStorage.get.mockReturnValue(true);
+    const { isImpersonating } = useImpersonation();
+    expect(isImpersonating.value).toBe(true);
+    expect(SessionStorage.get).toHaveBeenCalledWith(
+      SESSION_STORAGE_KEYS.IMPERSONATION_USER
+    );
+  });
+
+  it('should return false if impersonation flag is not set in session storage', () => {
+    SessionStorage.get.mockReturnValue(false);
+    const { isImpersonating } = useImpersonation();
+    expect(isImpersonating.value).toBe(false);
+    expect(SessionStorage.get).toHaveBeenCalledWith(
+      SESSION_STORAGE_KEYS.IMPERSONATION_USER
+    );
+  });
+});

app/javascript/dashboard/composables/useImpersonation.js

@@ -0,0 +1,10 @@
+import { computed } from 'vue';
+import SessionStorage from 'shared/helpers/sessionStorage';
+import { SESSION_STORAGE_KEYS } from 'dashboard/constants/sessionStorage';
+
+export function useImpersonation() {
+  const isImpersonating = computed(() => {
+    return SessionStorage.get(SESSION_STORAGE_KEYS.IMPERSONATION_USER);
+  });
+  return { isImpersonating };
+}

app/javascript/dashboard/constants/sessionStorage.js

@@ -0,0 +1,3 @@
+export const SESSION_STORAGE_KEYS = {
+  IMPERSONATION_USER: 'impersonationUser',
+};

app/javascript/dashboard/i18n/locale/en/settings.json

@@ -185,7 +185,8 @@
           "OFFLINE": "Offline"
         },
         "SET_AVAILABILITY_SUCCESS": "Availability has been set successfully",
-        "SET_AVAILABILITY_ERROR": "Couldn't set availability, please try again"
+        "SET_AVAILABILITY_ERROR": "Couldn't set availability, please try again",
+        "IMPERSONATING_ERROR": "Cannot change availability while impersonating a user"
       },
       "EMAIL": {
         "LABEL": "Your email address",

app/javascript/dashboard/store/modules/auth.js

@@ -2,6 +2,8 @@ import types from '../mutation-types';
 import authAPI from '../../api/auth';
 
 import { setUser, clearCookiesOnLogout } from '../utils/api';
+import SessionStorage from 'shared/helpers/sessionStorage';
+import { SESSION_STORAGE_KEYS } from 'dashboard/constants/sessionStorage';
 
 const initialState = {
   currentUser: {
@@ -145,8 +147,15 @@ export const actions = {
   updateUISettings: async ({ commit }, params) => {
     try {
       commit(types.SET_CURRENT_USER_UI_SETTINGS, params);
-      const response = await authAPI.updateUISettings(params);
-      commit(types.SET_CURRENT_USER, response.data);
+
+      const isImpersonating = SessionStorage.get(
+        SESSION_STORAGE_KEYS.IMPERSONATION_USER
+      );
+
+      if (!isImpersonating) {
+        const response = await authAPI.updateUISettings(params);
+        commit(types.SET_CURRENT_USER, response.data);
+      }
     } catch (error) {
       // Ignore error
     }

app/javascript/dashboard/store/utils/api.js

@@ -2,7 +2,9 @@ import fromUnixTime from 'date-fns/fromUnixTime';
 import differenceInDays from 'date-fns/differenceInDays';
 import Cookies from 'js-cookie';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
+import { SESSION_STORAGE_KEYS } from 'dashboard/constants/sessionStorage';
 import { LocalStorage } from 'shared/helpers/localStorage';
+import SessionStorage from 'shared/helpers/sessionStorage';
 import { emitter } from 'shared/helpers/mitt';
 import {
   ANALYTICS_IDENTITY,
@@ -44,6 +46,10 @@ export const clearLocalStorageOnLogout = () => {
   LocalStorage.remove(LOCAL_STORAGE_KEYS.DRAFT_MESSAGES);
 };
 
+export const clearSessionStorageOnLogout = () => {
+  SessionStorage.remove(SESSION_STORAGE_KEYS.IMPERSONATION_USER);
+};
+
 export const deleteIndexedDBOnLogout = async () => {
   let dbs = [];
   try {
@@ -75,6 +81,7 @@ export const clearCookiesOnLogout = () => {
   emitter.emit(ANALYTICS_RESET);
   clearBrowserSessionCookies();
   clearLocalStorageOnLogout();
+  clearSessionStorageOnLogout();
   const globalConfig = window.globalConfig || {};
   const logoutRedirectLink = globalConfig.LOGOUT_REDIRECT_LINK || '/';
   window.location = logoutRedirectLink;