MM-62550- trim value and create batch updates (#29895)

* trim value and create batch updates

* update test

* update for review comments

---------

Co-authored-by: Caleb Roseland <caleb@calebroseland.com>

webapp/channels/src/components/user_settings/general/user_settings_general.test.tsx

@@ -246,7 +246,7 @@ describe('components/user_settings/general/UserSettingsGeneral', () => {
     });
 
     test('submitAttribute() should have called saveCustomProfileAttribute', async () => {
-        const saveCustomProfileAttribute = jest.fn().mockResolvedValue({data: true});
+        const saveCustomProfileAttribute = jest.fn().mockResolvedValue({1: 'Updated Value'});
         const props = {
             ...requiredProps,
             enableCustomProfileAttributes: true,

webapp/channels/src/components/user_settings/general/user_settings_general.tsx

@@ -119,7 +119,7 @@ export type Props = {
         sendVerificationEmail: (email: string) => Promise<ActionResult>;
         setDefaultProfileImage: (id: string) => void;
         uploadProfileImage: (id: string, file: File) => Promise<ActionResult>;
-        saveCustomProfileAttribute: (userID: string, attributeID: string, attributeValue: string) => Promise<ActionResult>;
+        saveCustomProfileAttribute: (userID: string, attributeID: string, attributeValue: string) => Promise<ActionResult<Record<string, string>>>;
         getCustomProfileAttributeFields: () => Promise<ActionResult>;
     };
     requireEmailVerification?: boolean;
@@ -429,6 +429,7 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
             then(({data, error: err}) => {
                 if (data) {
                     this.updateSection('');
+                    this.setState({customAttributeValues: {...this.state.customAttributeValues, ...data}});
                 } else if (err) {
                     const serverError = err;
                     this.setState({serverError, emailError: '', clientError: '', sectionIsSaving: false});

webapp/channels/src/packages/mattermost-redux/src/actions/users.test.ts

@@ -1712,7 +1712,7 @@ describe('Actions.Users', () => {
 
         const response = await store.dispatch(Actions.saveCustomProfileAttribute(currentUser.id, '123', '  NewValue  '));
         const data = response.data!;
-        expect(data).toBeTruthy();
+        expect(data).toEqual({123: 'NewValue'});
     });
 
     describe('checkForModifiedUsers', () => {

webapp/channels/src/packages/mattermost-redux/src/actions/users.ts

@@ -970,15 +970,16 @@ export function updateMe(user: Partial<UserProfile>): ActionFuncAsync<UserProfil
     };
 }
 
-export function saveCustomProfileAttribute(userID: string, attributeID: string, attributeValue: string): ActionFuncAsync {
+export function saveCustomProfileAttribute(userID: string, attributeID: string, attributeValue: string): ActionFuncAsync<Record<string, string>> {
     return async (dispatch) => {
         try {
-            await Client4.updateCustomProfileAttributeValues(attributeID, attributeValue);
+            const values = {[attributeID]: attributeValue.trim()};
+            const data = await Client4.updateCustomProfileAttributeValues(values);
+            return {data};
         } catch (error) {
             dispatch(logError(error));
             return {error};
         }
-        return {data: true};
     };
 }
 

webapp/platform/client/src/client4.ts

@@ -2103,13 +2103,10 @@ export default class Client4 {
         );
     };
 
-    updateCustomProfileAttributeValues = (attributeID: string, attributeValue: string) => {
+    updateCustomProfileAttributeValues = (attributeValues: Record<string, string>) => {
-        const obj: { [key: string]: string } = {};
-        obj[attributeID] = attributeValue;
-
         return this.doFetch<Record<string, string>>(
             `${this.getCustomProfileAttributeValuesRoute()}`,
-            {method: 'PATCH', body: JSON.stringify(obj)},
+            {method: 'PATCH', body: JSON.stringify(attributeValues)},
         );
     };