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. 😊