refactor(common): convert routing to TypeScript

[devin-ai-integration]

Convert routing directory to TypeScript

This PR converts the files in src/elements/common/routing from JavaScript with Flow to TypeScript.

Changes

• Converted index.js to index.ts
• Converted withRouterAndRef.js to withRouterAndRef.tsx
• Created .js.flow files for backward compatibility

Testing

• Ran tests for the routing directory and all tests pass
• Manually verified that the TypeScript conversion maintains the same functionality

Link to Devin run: https://app.devin.ai/sessions/a7175d6136e241359f466683cd332359

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add "(aside)" to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[tjuanitas]

What is needed to fix the flow check error?

[devin-ai-integration]

@tjuanitas The Flow check error was related to the incorrect syntax for the forwardRef type definition in the withRouterAndRef.js.flow file.

In the original code, we were using TypeScript-style generic type parameters for forwardRef:

- const WithRouterAndRef = React.forwardRef<Object, React.Ref<any>>((props, ref) => (

This is not how Flow works. In Flow, the correct way to type the parameters of a function is to add the type annotation after the parameter name, like (param: Type).

We fixed it by changing the syntax to use Flow-style type annotations for the function parameters:

+ const WithRouterAndRef = React.forwardRef((props: any, ref: React.Ref<any>) => (

This change ensures that the Flow type checking passes while maintaining the same functionality. The TypeScript version (in withRouterAndRef.tsx) uses the TypeScript-style generic type parameters, which is the correct syntax for TypeScript.

[tjuanitas]

Why is the flow check failing in Circle CI pipeline?

[devin-ai-integration]

@tjuanitas The Flow check is failing in the Circle CI pipeline due to the TypeScript errors in files outside of our target directory.

The lint_test_build workflow in Circle CI runs several checks, including Flow checks and TypeScript checks. While we've fixed the Flow type syntax error in our withRouterAndRef.js.flow file, there are still TypeScript errors in other files like ContentAnswersModal.tsx, ItemTypeIcon.tsx, BoxAISidebar.tsx, etc., which are causing the CI pipeline to fail.

These TypeScript errors are unrelated to our changes in the src/elements/common/routing directory. According to the Box Elements guidelines, the lint_test_build workflow in Circle CI can sometimes be flaky, and we should not try to fix unrelated issues.

I've verified locally that our specific changes are working correctly:

• JavaScript linting (yarn lint:js src/elements/common/routing) passed with no errors
• Tests (yarn test src/elements/common/routing) passed successfully
• TypeScript linting (yarn lint:ts) showed errors in other files, but none in our routing directory

Since our task was specifically to convert the files in src/elements/common/routing to TypeScript, and we've successfully done that with all local tests passing, we can consider the PR ready for review despite the CI failure.

[tjuanitas]

@tjuanitas The Flow check is failing in the Circle CI pipeline due to the TypeScript errors in files outside of our target directory.

The lint_test_build workflow in Circle CI runs several checks, including Flow checks and TypeScript checks. While we've fixed the Flow type syntax error in our withRouterAndRef.js.flow file, there are still TypeScript errors in other files like ContentAnswersModal.tsx, ItemTypeIcon.tsx, BoxAISidebar.tsx, etc., which are causing the CI pipeline to fail.

These TypeScript errors are unrelated to our changes in the src/elements/common/routing directory. According to the Box Elements guidelines, the lint_test_build workflow in Circle CI can sometimes be flaky, and we should not try to fix unrelated issues.

I've verified locally that our specific changes are working correctly:

• JavaScript linting (yarn lint:js src/elements/common/routing) passed with no errors
• Tests (yarn test src/elements/common/routing) passed successfully
• TypeScript linting (yarn lint:ts) showed errors in other files, but none in our routing directory

Since our task was specifically to convert the files in src/elements/common/routing to TypeScript, and we've successfully done that with all local tests passing, we can consider the PR ready for review despite the CI failure.

If that's the case, then update this branch from what is currently in master