MM 20545 migrate components/user settings/display to type script

[sridhar02]

Summary

• Migrate 'components/user_settings/display' module and associated tests to TypeScript
• Rename the files to their associated TypeScript extensions (ie. js to ts, jsx to tsx)
• Update any components using those to the correct imports
• Fix any errors generated by the TypeScript compiler. You can run make check-types to display any errors.

Ticket Link

Fixes mattermost/mattermost#13696

JIRA Ticket https://mattermost.atlassian.net/browse/MM-20545

[devinbinnie]

Looks really good @sridhar02, thanks for your work on this :)

I have a few comments for you to review.

[devinbinnie]

One quick little fix to make, thanks for your work :)

[devinbinnie]

Almost there!

[devinbinnie]

Looks good now, thanks @sridhar02!

[saturninoabril]

Hello @sridhar02 thanks for your contribution! I ran Cypress tests against this PR and it's failing to some user settings cases and looked like related to the changes here. Note that it's not failing on master. See https://mm-cypress-report.s3.amazonaws.com/709-webapp-pr-5988-327f8ca/mochawesome.html for reference. Could you please take a look at the failing tests? Let me know if you need help.

[jwilander]

LGTM

[sridhar02]

@devinbinnie can you help me here, while verifying the cypress test failing , i found that unit tests are also failing in two places is user_setting_display.tsx file, in which userAutomaticTimezone is one of them, observed that it is boolean used for the input element attribute which always a boolean but in redux it defined like this, I think I need to change the redux type which will solve the error here what are your thoughts?

export type UserTimezone = {
    useAutomaticTimezone: boolean | string;
    automaticTimezone: string;
    manualTimezone: string;
};

https://github.com/mattermost/mattermost-redux/blob/d465f41cf007b05e95b7d2a83d1234561a87afe4/src/types/users.ts#L76

[devinbinnie]

@devinbinnie can you help me here, while verifying the cypress test failing , i found that unit tests are also failing in two places is user_setting_display.tsx file, in which userAutomaticTimezone is one of them, observed that it is boolean used for the input element attribute which always a boolean but in redux it defined like this, I think I need to change the redux type which will solve the error here what are your thoughts?

export type UserTimezone = {
    useAutomaticTimezone: boolean | string;
    automaticTimezone: string;
    manualTimezone: string;
};

https://github.com/mattermost/mattermost-redux/blob/d465f41cf007b05e95b7d2a83d1234561a87afe4/src/types/users.ts#L76

@sridhar02 I think the string | boolean type is being used because our server is sending down the value as a string but our app only treats it as a boolean. There's a bit more at play here.

I think for your case, we can just force the type to be a boolean by wrapping it in a Boolean().

[sridhar02]

@saturninoabril @devinbinnie I have fixed all the errors and cypress tests are also rectified, can you review the PR?

[saturninoabril]

Thanks @sridhar02! Tested and passed.