Mattermost-server: Migrate 'components/about_build_modal/about_build_modal.jsx' and associated tests to TypeScript

[mattermod]

We are starting to migrate the mattermost-webapp over to TypeScript to facilitate better code quality. This Help Wanted issue is to modify components/about*build_modal/ and associated test files.

Below is a checklist of items you should be doing to migrate:

• \< ] 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.

We are aiming to be as strict as possible for the time being, but if you run into any issues where the file cannot be successfully migrated without significant change in other libraries, or our tsconfig.json, please feel free to raise them as we are aiming to keep this process smooth and gradual, while enforcing as much as we can.

Some examples of already migrated files can be found here:

• [pr-mattermost-webapp-3790>(https://github.com/mattermost/mattermost-webapp/pull/3790))
• \(https://github.com/mattermost/mattermost-webapp/pull/3472))
  
  
  
  • https://github.com/mattermost/mattermost-webapp/pull/4230
  
  

---

If you're interested please comment here and come join our "Contributors" community channel on our daily build server, where you can discuss questions with community members and the Mattermost core team. For technical advice or questions, please join our "Developers" community channel.

New contributors please see our Developer's Guide.

JIRA: https://mattermost.atlassian.net/browse/MM-18943

[devinbinnie]

Needs the Redux conversion first, will update once that's been merged.

[haydenhw]

I can do this next!

[devinbinnie]

Sounds great! Thanks @haydenhw!

[haydenhw]

Shoot, I just got tied up with a time sensitive project. Would you mind taking me off of this one for now?

[devinbinnie]

No problem, let us know if would like to pick it up again :)

[cmygray]

I want to do

[devinbinnie]

Sounds good, thanks @cmygray!

[cmygray]

https://github.com/mattermost/mattermost-webapp/pull/5720

[vraravam]

Looks like this error occurs - and I don't know how to solve it:

components/about_build_modal/about_build_modal.tsx:155:26 - error TS2786: 'Nbsp' cannot be used as a JSX component.
  Its return type 'ReactNode' is not a valid JSX element.
    Type 'undefined' is not assignable to type 'Element | null'.

This error is repeated a few times.

[amyblais]

@devinbinnie ^

[vraravam]

I have a local WIP code (converting to ts) - but, due to the above error, I haven't raised a PR, nor have I pushed the changes to remote.

[devinbinnie]

@vraravam Seems as though there's an issue with React's type definition when it comes to string literals being returned as components. I was able to fix it by changing Nbsp to this:

const Nbsp: React.FC = () => '\u00A0' as unknown as React.ReactElement;

export default Nbsp;

[vraravam]

Thanks @devinbinnie - I have incorporated that change - and it has fixed some of the errors. Will raise a PR and try to get help with the other remaining make check-types issues.