CONSOLE-4937: Claude code command: Console Assist Convert

[krishagarwal278]

Summary

/console-assist convert <filepath> is an interactive Claude Code command that automates .jsx to TypeScript
.tsx conversions with intelligent error fixing. Think of it as having a teammate who can convert legacy
components, run builds and tests, automatically fix TypeScript errors, and commit everything - all while
keeping you in the loop.

What It Does

The command handles the complete JSX to TSX conversion workflow:

• Renames .jsx to .tsx and adds TypeScript type annotations (props, state, hooks, events)
• Runs yarn build and automatically fixes TypeScript/compilation errors
• Updates test files with proper types and fixes test failures
• Iterates up to 3 times, re-running build and tests after each fix
• Runs yarn lint and auto-fixes formatting issues
• Updates all import references across the codebase
• Creates a git commit with a descriptive message

Interactive & Intelligent

The command asks for your help when needed:

• Before converting: "Are there existing type definitions?" / "Should I update test files?"
• When stuck: Provides diagnostics and asks for guidance after 3 iteration cycles
• Searches for similar converted components to reuse type patterns
• Follows existing TypeScript patterns and OpenShift Console conventions

Perfect For

• Converting legacy .jsx components to TypeScript
• Large-scale TypeScript migration projects
• Any JSX file where you want automated type annotation and error fixing

Example Workflow

User: /console-assist convert frontend/packages/dev-console/src/components/MyComponent.jsx

---

[openshift-ci-robot]

@krishagarwal278: This pull request references CONSOLE-4937 which is a valid jira issue.

Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the story to target the "4.21.0" version, but no target version was set.

In response to this:

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[openshift-ci]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: krishagarwal278
Once this PR has been reviewed and has the lgtm label, please assign therealjon for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[coderabbitai]

Walkthrough

Adds a comprehensive documentation file describing the Console Assist JSX-to-TSX conversion workflow, including step-by-step phases, type-guidance rules, interactive prompts, execution lifecycle, and success criteria.

Changes

Cohort / File(s)	Summary
Console Assist Documentation \.claude/commands/console-assist-convert\.md	New documentation file for JSX-to-TSX conversion workflow, detailing analysis & preparation, conversion, build & fix, test & validate, lint & format phases, with type conversion rules, common patterns, command usage, and multi-phase execution guidance

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Review documentation clarity, completeness, and accuracy of described workflow phases
• Verify type-conversion rules and patterns align with project standards
• Confirm command descriptions and success criteria are actionable

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

.claude/commands/console-assist-convert.md (1)

128-128: Clarify workspace/build directory guidance.

The workspace context (line 128) mentions "build from frontend directory" but could be more explicit about when/why this applies and the typical directory structure. Consider expanding to help developers understand the package layout, or adding a reference to documentation that explains the workspace structure.

This is optional refinement but would improve clarity for developers less familiar with the project layout.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Cache: Disabled due to data retention organization setting

Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting

📥 Commits

Reviewing files that changed from the base of the PR and between 8e655e0 and d4b4da8.

📒 Files selected for processing (1)

• .claude/commands/console-assist-convert.md (1 hunks)

🔇 Additional comments (3)

.claude/commands/console-assist-convert.md (3)

159-159: Fix escaped character in example output.

The escaped exclamation mark should be rendered as a regular exclamation mark in the example output.

-Assistant: Perfect\! I found:
+Assistant: Perfect! I found:

---

92-92: Remove reference to "TodoWrite" as it is not a Claude Code tool.

Line 92 references "TodoWrite" for tracking workflow phases, but this tool does not exist in Claude Code. Either remove this reference or replace it with a concrete approach (e.g., using comments in the code, maintaining a checklist in a separate document, or manually tracking state with console output). Clarify how workflow phases should actually be tracked in the command implementation.

Likely an incorrect or invalid review comment.

---

77-89: Verify that all referenced file paths and package imports exist in the project.

The guidelines reference several documentation files and internal packages that should be confirmed:

• Documentation files: .ai/context.md, .ai/README.md, README.md, STYLEGUIDE.md, CONTRIBUTING.md
• Package imports: @console/shared, @console/internal, @console/internal/module/k8s

Ensure these files are present in the repository root (or .ai/ subdirectory as appropriate) and that the package imports are declared in package.json before this command is used in practice. If any paths are incorrect or packages unavailable, update the guidelines accordingly.

[openshift-ci-robot]

@krishagarwal278: This pull request references CONSOLE-4937 which is a valid jira issue.

Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the story to target the "4.21.0" version, but no target version was set.

In response to this:

Summary

/console-assist convert <filepath> is an interactive Claude Code command that automates .jsx to TypeScript
.tsx conversions with intelligent error fixing. Think of it as having a teammate who can convert legacy
components, run builds and tests, automatically fix TypeScript errors, and commit everything - all while
keeping you in the loop.

What It Does

The command handles the complete JSX to TSX conversion workflow:

• Renames .jsx to .tsx and adds TypeScript type annotations (props, state, hooks, events)
• Runs yarn build and automatically fixes TypeScript/compilation errors
• Updates test files with proper types and fixes test failures
• Iterates up to 3 times, re-running build and tests after each fix
• Runs yarn lint and auto-fixes formatting issues
• Updates all import references across the codebase
• Creates a git commit with a descriptive message

Interactive & Intelligent

The command asks for your help when needed:

• Before converting: "Are there existing type definitions?" / "Should I update test files?"
• When stuck: Provides diagnostics and asks for guidance after 3 iteration cycles
• Searches for similar converted components to reuse type patterns
• Follows existing TypeScript patterns and OpenShift Console conventions

Perfect For

• Converting legacy .jsx components to TypeScript
• Large-scale TypeScript migration projects
• Any JSX file where you want automated type annotation and error fixing

Example Workflow

User: /console-assist convert frontend/packages/dev-console/src/components/MyComponent.jsx

---

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[openshift-ci]

@krishagarwal278: all tests passed!

Full PR test history. Your PR dashboard.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here.