MM-56881 Validate and ensure valid CustomStatus is stored (#26287)

* don't allow invalid CustomStatus

* allow empty emoji in custom status

* lint fix

* add english translation

* update for review comments.

* fix bad fix

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/status_dropdown/status_dropdown.tsx

@@ -342,7 +342,7 @@ export class StatusDropdown extends React.PureComponent<Props, State> {
                     time={customStatus.expires_at}
                     timezone={this.props.timezone}
                     className={classNames('custom_status__expiry', {
-                        padded: customStatus?.text.length > 0,
+                        padded: customStatus?.text?.length > 0,
                     })}
                     withinBrackets={true}
                 />
@@ -355,7 +355,7 @@ export class StatusDropdown extends React.PureComponent<Props, State> {
                     modalId={ModalIdentifiers.CUSTOM_STATUS}
                     dialogType={CustomStatusModal}
                     className={classNames('MenuItem__primary-text custom_status__row', {
-                        flex: customStatus?.text.length === 0,
+                        flex: customStatus?.text?.length === 0,
                     })}
                     id={'status-menu-custom-status'}
                 >
@@ -385,7 +385,7 @@ export class StatusDropdown extends React.PureComponent<Props, State> {
         const {intl} = this.props;
         const needsConfirm = this.isUserOutOfOffice() && this.props.autoResetPref === '';
         const {status, customStatus, isCustomStatusExpired, currentUser} = this.props;
-        const isStatusSet = customStatus && (customStatus.text.length > 0 || customStatus.emoji.length > 0) && !isCustomStatusExpired;
+        const isStatusSet = customStatus && !isCustomStatusExpired && (customStatus.text?.length > 0 || customStatus.emoji?.length > 0);
 
         const setOnline = needsConfirm ? () => this.showStatusChangeConfirmation('online') : this.setOnline;
         const setDnd = needsConfirm ? () => this.showStatusChangeConfirmation('dnd') : this.setDnd;

webapp/channels/src/selectors/views/custom_status.test.ts

@@ -40,6 +40,15 @@ describe('getCustomStatus', () => {
         expect(getCustomStatus(store.getState(), user.id)).toBeUndefined();
     });
 
+    it('should return undefined when user with invalid json for custom status set', async () => {
+        const store = await configureStore();
+        const newUser = {...user};
+        newUser.props.customStatus = 'not a JSON string';
+
+        (UserSelectors.getUser as jest.Mock).mockReturnValue(user);
+        expect(getCustomStatus(store.getState(), user.id)).toBeUndefined();
+    });
+
     it('should return customStatus object when there is custom status set', async () => {
         const store = await configureStore();
         const newUser = {...user};

webapp/channels/src/selectors/views/custom_status.ts

@@ -26,7 +26,15 @@ export function makeGetCustomStatus(): (state: GlobalState, userID?: string) =>
         (state: GlobalState, userID?: string) => (userID ? getUser(state, userID) : getCurrentUser(state)),
         (user) => {
             const userProps = user?.props || {};
-            return userProps.customStatus ? JSON.parse(userProps.customStatus) : undefined;
+            let customStatus;
+            if (userProps.customStatus) {
+                try {
+                    customStatus = JSON.parse(userProps.customStatus);
+                } catch (error) {
+                    // do nothing if invalid, return undefined custom status.
+                }
+            }
+            return customStatus;
         },
     );
 }