console: migrate to TypeScript

[beerose]

As we merged #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 @harishm72 console: migrate AlertBox component to typescript #4721

• Tabs component @sensiblefolk converted Tabs & AceEDitor components to typescript and added typings #4536

• Tooltip component @ngprnk Migrate tooltip to ts #4524

• AceEditor @sensiblefolk converted Tabs & AceEDitor components to typescript and added typings #4536

• Headers component and utils @harishm72

• Routes utils @ngprnk

• Error boundary component @marekdano
  Migrate to ts: ErrorBoundary #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) @marekdano console: migrate telemetry to typescript #4737

• Server.js @Windrushfarer

• Routes.js @marekdano

• Globals.js @marekdano Migrate Globals to ts #4587

• QueryBuilderJson @marekdano Migrate QueryBuilderJson to TS. #4803

• Login Actions

• Login @ryands17 console: convert About and Login components to typescript #4794

• Main actions @marekdano Migrate Main Actions to TS. #4876

• Main state @marekdano console: migrate main state to typescript  #4804

• About service @ryands17 console: convert About and Login components to typescript #4794

• Settings Actions @gokulchandra

• Sidebar @marekdano console: migrate sidebar to typescript #4690

• Settings utils @poul-kg console: convert settings/utils to typescript #4684

• CollapsibleToggle component @kshitijk83 console: migrate CollapsibleToggle to typescript #4697

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

• Typography component @kawamataryo chore: migrate checkbox, icon and radio button to TypeScript. #4373

• SwitchButton component @kawamataryo Migrate switch button and spinner to TypeScript #4504

• Spinner component @kawamataryo Migrate switch button and spinner to TypeScript #4504

• VoyagerView @marekdano Migrate VoyagerView to TS #4734

• Button component @kawamataryo console: migrate button to TypeScript #4570

• Settings container @ryands17 Convert Container.js to TypeScript #4724

• Cypress setup and tests @rajanand02 console: migrate cypress to TypeScript #4550

• Theme @alioguzhan chore: convert theme files to typescript #4325

• Checkbox component @kawamataryo chore: migrate checkbox, icon and radio button to TypeScript. #4373

• Icon component @kawamataryo chore: migrate checkbox, icon and radio button to TypeScript. #4373

• RadioButton component @kawamataryo chore: migrate checkbox, icon and radio button to TypeScript. #4373

• GraphQL utils @mubaidr migrate to TypeScript: sqlUtil.js, graphqlUtils.js,Main utils.js (#4314) #4519

• SQL utils @mubaidr migrate to TypeScript: sqlUtil.js, graphqlUtils.js,Main utils.js (#4314) #4519

• Main utils @mubaidr migrate to TypeScript: sqlUtil.js, graphqlUtils.js,Main utils.js (#4314) #4519

• Modal component @irshadjsr21 Migrated Common/Modal to Typescript #4532

• GqlCompatibilityWarning component @fkhadra migrate GqlCompabilityWarning to typescript #4314 #4544

• Telemetry filter @marekdano Migrate TelemetryFilter file to TS. #4579

• Common/WarningSymbol and Common/TextInput @fkhadra console: migrate WarningSymbol and TextInput to TypeScript #4314 #4562

• HTML helpers @ryands17 console: migrate HTML helpers, route hooks helpers and version utils to TypeScript #4641

• Route hooks helpers @ryands17 console: migrate HTML helpers, route hooks helpers and version utils to TypeScript #4641

• Version utils @ryands17 console: migrate HTML helpers, route hooks helpers and version utils to TypeScript #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. DefinitelyTyped/DefinitelyTyped#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.

[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?

#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

[k-herm]

Hi @beerose ! Updated 3 common components: EditableHeading, CustomInputAutoSuggest, KnowMoreLink #6818

[NoriSte]

The Console currently breaks for unpredictable behaviours (we are internally working to fix it), that's why I generically discourage working on the Console, even for the smaller TS upgrades (we are working on them too). I close this PR.