Graphql-engine: console: migrate to TypeScript

[beerose]

As we merged https://github.com/hasura/graphql-engine/pull/3902 recently we plan to gradually migrate frontend code to TypeScript.

Console codebase is pretty large, so we would love your help! 💪

How to contribute?

1. Convert file from .js to .ts or .tsx.
2. Add types, fix all type errors.
3. Submit a PR! 🎉

Here you can find a guide on how to contribute to Hasura console.

We recommend you to take a look at the codebase and find something that is still in JS and seems interesting for you to migrate. If you find something, just let us know in the comment and go ahead! 😎

Click to see the list of easy and small modules that are a good fit for the start

• [ ] [AlertBox component](https://github.com/hasura/graphql-engine/tree/master/console/src/components/UIKit/atoms/AlertBox) @harishm72 https://github.com/hasura/graphql-engine/pull/4721

• [ ] [Tabs component](https://github.com/hasura/graphql-engine/tree/master/console/src/components/UIKit/atoms/Tabs) @sensiblefolk https://github.com/hasura/graphql-engine/pull/4536

• [ ] [Tooltip component](https://github.com/hasura/graphql-engine/tree/master/console/src/components/UIKit/atoms/Tooltip) @ngprnk https://github.com/hasura/graphql-engine/pull/4524

• [ ] [AceEditor](https://github.com/hasura/graphql-engine/tree/master/console/src/components/Common/AceEditor) @sensiblefolk https://github.com/hasura/graphql-engine/pull/4536

• [ ] [Headers component and utils](https://github.com/hasura/graphql-engine/blob/master/console/src/components/Common/Headers) @harishm72

• [ ] [Routes utils](https://github.com/hasura/graphql-engine/blob/master/console/src/components/Common/utils/routesUtils.j) @ngprnk

• [ ] [Error boundary component](https://github.com/hasura/graphql-engine/blob/master/console/src/components/Error/ErrorBoundary.js) @marekdano
  https://github.com/hasura/graphql-engine/pull/4542

• [ ] ~SDL utils~ @mubaidr (can't be merged until cli-ext supports TS)
• [ ] ~Wrapping type utils~ @Windrushfarer (can't be merged until cli-ext supports TS)
• [ ] ~GraphQL Schema utils~ @Windrushfarer (can't be merged until cli-ext supports TS)

• [ ] ~Hasura custom types utils~ @mubaidr (can't be merged until cli-ext supports TS)

• [ ] [Telemetry (Redux actions)](https://github.com/hasura/graphql-engine/tree/master/console/src/telemetry) @marekdano https://github.com/hasura/graphql-engine/pull/4737

• [ ] [Server.js](https://github.com/hasura/graphql-engine/blob/master/console/src/server.js) @Windrushfarer

• [ ] [Routes.js](https://github.com/hasura/graphql-engine/blob/master/console/src/routes.js) @marekdano
• [ ] [Globals.js](https://github.com/hasura/graphql-engine/blob/master/console/src/Globals.js) @marekdano https://github.com/hasura/graphql-engine/pull/4587
• [ ] [QueryBuilderJson](https://github.com/hasura/graphql-engine/blob/master/console/src/components/Common/QueryBuilderJson/QueryBuilderJson.js) @marekdano https://github.com/hasura/graphql-engine/pull/4803
• [ ] [Login Actions](https://github.com/hasura/graphql-engine/blob/master/console/src/components/Login/Actions.js)
• [ ] [Login](https://github.com/hasura/graphql-engine/blob/master/console/src/components/Login/Login.js) @ryands17 https://github.com/hasura/graphql-engine/pull/4794
• [ ] [Main actions](https://github.com/hasura/graphql-engine/blob/master/console/src/components/Main/Actions.js) @marekdano https://github.com/hasura/graphql-engine/pull/4876
• [ ] [Main state](https://github.com/fkhadra/graphql-engine/blob/master/console/src/components/Main/State.js) @marekdano https://github.com/hasura/graphql-engine/pull/4804
• [ ] [About service](https://github.com/hasura/graphql-engine/blob/master/console/src/components/Services/About/About.js) @ryands17 https://github.com/hasura/graphql-engine/pull/4794
• [ ] [Settings Actions](https://github.com/hasura/graphql-engine/blob/master/console/src/components/Services/Settings/Actions.js) @gokulchandra
• [ ] [Sidebar](https://github.com/hasura/graphql-engine/blob/master/console/src/components/Services/Settings/Sidebar.js) @marekdano https://github.com/hasura/graphql-engine/pull/4690
• [ ] [Settings utils](https://github.com/hasura/graphql-engine/blob/master/console/src/components/Services/Settings/utils.js) @poul-kg https://github.com/hasura/graphql-engine/pull/4684
• [ ] CollapsibleToggle component @kshitijk83 https://github.com/hasura/graphql-engine/pull/4697
  

Click to see the list of modules already migrated by the community 🙌

• [x] [Typography component](https://github.com/hasura/graphql-engine/tree/master/console/src/components/UIKit/atoms/Typography) @kawamataryo https://github.com/hasura/graphql-engine/pull/4373

• [x] [SwitchButton component](https://github.com/hasura/graphql-engine/tree/master/console/src/components/UIKit/atoms/SwitchButton) @kawamataryo https://github.com/hasura/graphql-engine/pull/4504

• [x] [Spinner component](https://github.com/hasura/graphql-engine/tree/master/console/src/components/UIKit/atoms/Spinner) @kawamataryo https://github.com/hasura/graphql-engine/pull/4504

• [x] [VoyagerView](https://github.com/hasura/graphql-engine/blob/master/console/src/components/Services/VoyagerView/VoyagerView.js) @marekdano https://github.com/hasura/graphql-engine/pull/4734

• [x] Button component @kawamataryo https://github.com/hasura/graphql-engine/pull/4570

• [x] [Settings container](https://github.com/hasura/graphql-engine/blob/master/console/src/components/Services/Settings/Container.js) @ryands17 https://github.com/hasura/graphql-engine/pull/4724

• [x] Cypress setup and tests @rajanand02 https://github.com/hasura/graphql-engine/pull/4550

• [x] [Theme](https://github.com/hasura/graphql-engine/blob/master/console/src/components/UIKit/theme/index.js) @alioguzhan https://github.com/hasura/graphql-engine/pull/4325

• [x] Checkbox component @kawamataryo https://github.com/hasura/graphql-engine/pull/4373

• [x] [Icon component](https://github.com/hasura/graphql-engine/tree/master/console/src/components/UIKit/atoms/Icon) @kawamataryo https://github.com/hasura/graphql-engine/pull/4373

• [x] [RadioButton component](https://github.com/hasura/graphql-engine/tree/master/console/src/components/UIKit/atoms/RadioButton) @kawamataryo https://github.com/hasura/graphql-engine/pull/4373
• [x] [GraphQL utils](https://github.com/hasura/graphql-engine/blob/master/console/src/components/Common/utils/graphqlUtils.js) @mubaidr https://github.com/hasura/graphql-engine/pull/4519
• [x] [SQL utils](https://github.com/beerose/graphql-engine/blob/master/console/src/components/Common/utils/sqlUtils.js) @mubaidr https://github.com/hasura/graphql-engine/pull/4519

• [x] [Main utils](https://github.com/hasura/graphql-engine/blob/master/console/src/components/Main/utils.js) @mubaidr https://github.com/hasura/graphql-engine/pull/4519

• [x] [Modal component](https://github.com/hasura/graphql-engine/blob/master/console/src/components/Common/Modal/Modal.js) @irshadjsr21 https://github.com/hasura/graphql-engine/pull/4532

• [x] [GqlCompatibilityWarning component](https://github.com/hasura/graphql-engine/blob/master/console/src/components/Common/GqlCompatibilityWarning/GqlCompatibilityWarning.js) @fkhadra https://github.com/hasura/graphql-engine/pull/4544

• [x] [Telemetry filter](https://github.com/hasura/graphql-engine/blob/master/console/src/telemetryFilter.js) @marekdano https://github.com/hasura/graphql-engine/pull/4579
• [x] Common/WarningSymbol and Common/TextInput @fkhadra https://github.com/hasura/graphql-engine/pull/4562
• [x] HTML helpers @ryands17 https://github.com/hasura/graphql-engine/pull/4641
• [x] Route hooks helpers @ryands17 https://github.com/hasura/graphql-engine/pull/4641
• [x] Version utils @ryands17 https://github.com/hasura/graphql-engine/pull/4641
  

Reach out to us!

Feel free to reach if you have questions or need help getting started. You can leave comments here or you can tag me in your PR if you need any help or you're not sure about something!

You can also get in touch on our Discord #contrib channel.

---

To avoid duplicate work please comment on which part you want to work on (as long as nobody else is working on it) so we can mark it as taken.

[alioguzhan]

Hey,

I want to work on Theme and AlertBox. You can assign those to me.

PS: I will also convert the Typography components.

[kawamataryo]

Hi,
I'd like to work on Button component.

---

P.S 2020/04/12

There was a point in the button migration that I didn't understand, so I'll do this first.

• Checkbox component
• Icon component
• RadioButton component

[kawamataryo]

I'd like to work on Spinner and SwitchButton component.

[ngprnk]

I'd like to work on tooltip and Routes utils.

[mubaidr]

I would like to work on sql utils, graphql utils and main utils, please.

[irshadjsr21]

I'd like to work on the Modal component, please assign it to me.

[sensiblefolk]

I would like to work on the alert box component

[beerose]

Hi, @sensiblefolk, AlertBox is already taken. I hope you can find something else. 😊

[sensiblefolk]

I can work on button, tabs or ace components

[beerose]

@sensiblefolk Let's leave button for @kawamataryo (he mentioned he'd like to work on it) and I'll assign you to tabs and ace components. Is it okay?

[sensiblefolk]

Let's leave button for @kawamataryo (he mentioned he'd like to work on it) and I'll assign you to tabs for now and ace components. Is it okay?

Yes it is okay

[alioguzhan]

Hey @beerose, I am afraid I don't have enough time for AlertBox next a few days. I don't want to interrupt the conversion process. So we can assign AlertBox to @sensiblefolk if he still wants it.

What do you think?

[harishm72]

Hi @beerose can I work on AlertBox and Headers Component and utils

[beerose]

Thanks for the information @alioguzhan!

Since @sensiblefolk already has a lot, I will assign @harishm72 to AlertBox and Headers Component and utils.

And... looks like I need to add more modules to the list! 🎉

[irshadjsr21]

Is anyone working on configuring react-bootstrap with typescript? I tried but got an error while compiling the code. I also found an issue related to the problem. https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20021. Maybe any of you can solve it.

[beerose]

Hi @irshadjsr21!

I just tried downgrading @types/react-bootstrap and found out that with @types/react-bootstrap version "0.32.21" lib directory is properly included in node_modules.

So you can try to install the typings in this particular version and pin it in package.json 😉

[marekdano]

Hi @beerose,
I can see that there are two components left now. I think I can take the Error boundary one. Is it ok?

[beerose]

Sure @marekdano! Assigning you to ErrorBoundary.

[fkhadra]

Hey @beerose, as GqlCompatibilityWarning component is the only one left. I would be happy to work on it.

[Windrushfarer]

Hi, @beerose I would like to help you with migrating GraphQL Schema utils and Wrapping type utils :) please could you assign me, so I'll start my work now

[beerose]

@Windrushfarer GqlCompatibilityWarning and ErrorBoundary are already taken, but I assigned you to GraphQL Schema utils and Wrapping type utils. 😉

[mubaidr]

Give me SDL utils and Hasura custom types utils, please. 😃

[poul-kg]

I'd be glad to help with Typescript somewhere, assign something to me if you have.

[fkhadra]

Hey @beerose, I can work Common/WarningSymbol and Common/TextInput. TextInput use prop-types should we keep them or it can be removed?

[beerose]

Hi @fkhadra!
They can be removed. There's no _much value_ in keeping them in TS code, and they are easily getting out of sync.

[fkhadra]

@beerose adding @types/[email protected] doesn't make the build crash but we will get an error message in the console. Should we just omit it? WDYT ?

ERROR in graphql-engine/console/node_modules/@types/react-bootstrap/index.d.ts(20,55):
[0] TS2344: Type 'keyof T' does not satisfy the constraint 'string'.
[0]   Type 'string | number | symbol' is not assignable to type 'string'.
[0]     Type 'number' is not assignable to type 'string'.
[0] Version: typescript 3.8.3

[ryands17]

Hi @beerose is there anything unassigned that I could take on?

[beerose]

@fkhadra I took a look at configs and typings in DefinietelyTyped, but I haven't found the fix for missing /lib folder. I created an issue for it: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/44220.

In the meantime, please skip these declarations. You can create folder types and mirror typings for particular modules from here: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-bootstrap/lib.

[beerose]

Hi @ryands17! I just added new items to the list! 🎉

[ryands17]

Hi @ryands17! I just added new items to the list!

I can take HTML helpers, Route hooks helpers and Version utils :)

[marekdano]

Hi @beerose! I can take Telemetry filter and Globals.
I also wanted to ask if components of RuntimeError and PageNotFound have to be converted to TS too.

[beerose]

Hi @marekdano,
I assigned you to Telemetry filter and Globals!

Yes, RuntimeError and PageNotFound can also be converted to TS. (Just didn't add them to the list yet) 😉

[Windrushfarer]

@beerose can I take Server.js file? I think my current work with utils will be stopped for now, due to response of your developers in #4557 :)

[beerose]

Yes @Windrushfarer, as we don't have TypeScript support in cli-ext, we can't convert shared/utils. So there are two options:

1. You can wait, and it will be merged later (after we add TS support).
2. You can add JSDocs instead of converting these files to TS, if you want this PR to be merged soon.

In the meantime, I'll assign you to Server.js. 😉

@mubaidr The same goes for SDL utils and Hasura custom types utils, so if you haven't started working on them yet, please wait until we have TS support in cli-ext or add JSDocs instead of converting them to TS. 😉

[mubaidr]

@beerose I did already some work on SDL utils, most of the file is converted but I am not sure about some of the types, have to run tests to make sure if conversion is good.

Also please identify/assign any more module for conversion.

[ryands17]

Hey @beerose :wave:
I have created a PR and it includes some update to the typing of react-router and react-router-redux which is on par with the lib versions being used.

Also is there anything unassigned I could take on?

[beerose]

Hi @poul-kg, @mubaidr, @ryands17! I just added new items to the list. Hope you can find something interesting for you. Otherwise, you can suggest something you'd like to work on 😉

[poul-kg]

@beerose I would start with Settings utils and see how it goes

[marekdano]

@beerose free to take Sidebar now.

[ryands17]

Hi @beerose ,
I can take Settings Container and will update the previous one with suggested changes :)

[marekdano]

@beerose free to take Telemetry (Redux actions) and VoyagerView if it's OK.

[kshitijk83]

@beerose, i would like to work on CollapsibleToggle component

[marekdano]

@beerose I can take QueryBuilderJson and About component now.

[ryands17]

@beerose I can take About Service and Login.

Also it would be great if the changes that I made regarding types for react-router and react-router-redux are merged as that causes the console build to fail.

[sensiblefolk]

I can take LoginActions & Login

[beerose]

Hi @sensiblefolk,
What about Tabs component and AceEditor that were assigned to you? 😊

@ryands17 I'll assign you to About Service and Login, and the changes you made in https://github.com/hasura/graphql-engine/pull/4641 ~will be soon~ were just merged!

[sensiblefolk]

Hi @sensiblefolk,
What about Tabs component and AceEditor that were assigned to you? 😊

@ryands17 I'll assign you to About Service and Login, and the changes you made in https://github.com/hasura/graphql-engine/pull/4641 ~will be soon~ were just merged!

I thought this was merged already with my pull request, let me go review if there is something I missed.

[beerose]

@sensiblefolk, as it's under review, I'll assign you to LoginActions & Login 😉

[sensiblefolk]

@sensiblefolk, as it's under review, I'll assign you to LoginActions & Login 😉

Good

[marekdano]

@beerose feel free to assign me QueryBuilderJson, Main Actions, Main State, or some of these if someone has already taken one of them.

[beerose]

I assigned you to all these three modules @marekdano! 😉

[harishm72]

@beerose I have added a PR #4721 , i see that except 'changelog / check (pull_request)' all checks are successful, can you please help me out here to fix it.

[beerose]

@harishm72 You don't need to worry about changelog check 😉 I just added no-changelog-required label, so it will be successful in a moment. I'll do a code review for this PR over the next few days.

[marekdano]

@beerose please free to assign Routes.js to me

[gokulchandra]

@beerose I can pickup the work for Settings Actions.

[ryands17]

Hi @beerose :)
Are there any other React components that require conversion?

[beerose]

Hi @ryands17!
There are probably many, but not yet on the list. I can update this list in some time, but if you want you could also take a look at the console code and find something that seems cool to you! If you do, let me know, I'll add it to the list 😉

[ryands17]

@beerose I can take on all the remaining .js files in the utils folder and apart from that the InputChecker component :)

[marekdano]

Hi, @beerose! Are there any components or JS files that should be converted to TS?

[beerose]

Hi @marekdano! I guess most the _easy and small ones_ were migrated, so now we can take care of the rest. It would be cool if you just go through the codebase and check if there's something that seems interesting for you to convert. 😉

[lautapercuspain]

Hi @beerose!

Is it ok if I start working on migrating src/components/Login/Actions.js to src/components/Login/Actions.ts?

[beerose]

Sure @lautapercuspain! 🙂

[gokulchandra]

@beerose Just wondering if this PR for migrating settings actions to typescript can be reviewed?

https://github.com/hasura/graphql-engine/pull/5028

[beerose]

I just reviewed it @gokulchandra. Sorry for the delay.

[harishm72]

@beerose #4721 too

[lautapercuspain]

HI @beerose Just wondering if this one is ready to go? #5499