Skip to content

NO-JIRA: Autofocus name field in create project/namespace modals - #16902

Open
fallmo wants to merge 1 commit into
openshift:mainfrom
fallmo:ux-improve-31
Open

NO-JIRA: Autofocus name field in create project/namespace modals#16902
fallmo wants to merge 1 commit into
openshift:mainfrom
fallmo:ux-improve-31

Conversation

@fallmo

@fallmo fallmo commented Aug 3, 2026

Copy link
Copy Markdown
Contributor

Analysis / Root cause:
The Name field in CreateProjectModal and CreateNamespaceModal wasn't autofocused, so on open, keyboard/screen-reader focus landed on the first tabbable element in the modal (the "Learn more about working with projects" link, or the field-level help icon) instead of the input. This appears to be an oversight from the PatternFly v6 modal migration rather than an intentional choice — sibling modals like TextInputModal already autofocus their primary field.

Solution description:
Added autoFocus to the Name TextInput in both CreateProjectModal.tsx and CreateNamespaceModal.tsx, matching the existing pattern used elsewhere in console-shared.

Test cases:

  • Open "Create Project" — Name field should be focused immediately.
  • Open "Create Namespace" — Name field should be focused immediately.

Summary by CodeRabbit

  • Usability Improvements
    • Namespace and project name fields now focus automatically when their creation dialogs open, enabling faster data entry.

Added `autoFocus` to the Name `TextInput` in both `CreateProjectModal.tsx` and `CreateNamespaceModal.tsx`
@openshift-merge-bot

Copy link
Copy Markdown
Contributor

Pipeline controller notification
This repo is configured to use the pipeline controller. Second-stage tests will be triggered either automatically or after lgtm label is added, depending on the repository configuration. The pipeline controller will automatically detect which contexts are required and will utilize /test Prow commands to trigger the second stage.

For optional jobs, comment /test ? to see a list of all defined jobs. To trigger manually all jobs from second stage use /pipeline required command.

This repository is configured in: LGTM mode

@openshift-ci-robot

Copy link
Copy Markdown
Contributor

@fallmo: This pull request explicitly references no jira issue.

Details

In response to this:

Analysis / Root cause:
The Name field in CreateProjectModal and CreateNamespaceModal wasn't autofocused, so on open, keyboard/screen-reader focus landed on the first tabbable element in the modal (the "Learn more about working with projects" link, or the field-level help icon) instead of the input. This appears to be an oversight from the PatternFly v6 modal migration rather than an intentional choice — sibling modals like TextInputModal already autofocus their primary field.

Solution description:
Added autoFocus to the Name TextInput in both CreateProjectModal.tsx and CreateNamespaceModal.tsx, matching the existing pattern used elsewhere in console-shared.

Test cases:

  • Open "Create Project" — Name field should be focused immediately.
  • Open "Create Namespace" — Name field should be focused immediately.

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-robot openshift-ci-robot added the jira/valid-reference Indicates that this PR references a valid Jira ticket of any type. label Aug 3, 2026
@coderabbitai

coderabbitai Bot commented Aug 3, 2026

Copy link
Copy Markdown
Contributor

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository: openshift/coderabbit/.coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 85e9fc84-63bd-4224-8727-2c2c126e21aa

📥 Commits

Reviewing files that changed from the base of the PR and between d934fc2 and 3a0f653.

📒 Files selected for processing (2)
  • frontend/packages/console-shared/src/components/modals/CreateNamespaceModal.tsx
  • frontend/packages/console-shared/src/components/modals/CreateProjectModal.tsx

Walkthrough

Changes

Modal input autofocus

Layer / File(s) Summary
Name input focus
frontend/packages/console-shared/src/components/modals/CreateNamespaceModal.tsx, frontend/packages/console-shared/src/components/modals/CreateProjectModal.tsx
The namespace and project name inputs now receive autoFocus when their modals open.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Suggested reviewers: logonoff, rhamilto

🚥 Pre-merge checks | ✅ 14 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Description check ⚠️ Warning The description explains the cause, solution, and test cases but omits required sections such as screenshots, test setup, browser conformance, and reviewers. Complete the missing template sections, including browser conformance, test setup, screenshots or recording, additional information, and reviewers or assignees.
✅ Passed checks (14 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and concisely describes the autofocus changes in the project and namespace creation modals.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Stable And Deterministic Test Names ✅ Passed The commit changes only two modal source files. It adds no tests or Ginkgo test titles, so no unstable test name exists in this pull request.
Test Structure And Quality ✅ Passed The PR changes only two TypeScript modal files by adding autoFocus; it adds no Ginkgo tests or cluster operations, so the check is not applicable.
Microshift Test Compatibility ✅ Passed The pull request only adds autoFocus to two React inputs; it adds no Ginkgo e2e tests or MicroShift-sensitive API and feature references.
Single Node Openshift (Sno) Test Compatibility ✅ Passed The diff changes only two TSX modal files to add autoFocus; it adds no Ginkgo e2e tests or multi-node assumptions.
Topology-Aware Scheduling Compatibility ✅ Passed The commit changes only two console React modal files, adding autoFocus to TextInput; it adds no deployment, operator, controller, or scheduling constraints.
Ote Binary Stdout Contract ✅ Passed The PR changes only two frontend TSX inputs; no OTE binary, suite setup, or process-level stdout write is introduced.
Ipv6 And Disconnected Network Test Compatibility ✅ Passed The patch changes only two TypeScript modal files by adding autoFocus; it adds no Ginkgo tests, IPv4 assumptions, or external connectivity.
No-Weak-Crypto ✅ Passed The commit adds only two autoFocus props; scans of all changed files found no weak algorithms, crypto APIs, custom crypto, or secret comparisons.
Container-Privileges ✅ Passed The PR changes only two TSX inputs by adding autoFocus; the patch adds no container or Kubernetes manifest privilege settings.
No-Sensitive-Data-In-Logs ✅ Passed The patch adds only autoFocus to two TextInput elements. It adds no logging or sensitive-data exposure; existing console.error calls are unchanged.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@openshift-ci openshift-ci Bot added the needs-ok-to-test Indicates a PR that requires an org member to verify it is safe to test. label Aug 3, 2026
@openshift-ci

openshift-ci Bot commented Aug 3, 2026

Copy link
Copy Markdown
Contributor

Hi @fallmo. Thanks for your PR.

I'm waiting for a openshift member to verify that this patch is reasonable to test. If it is, they should reply with /ok-to-test on its own line. Until that is done, I will not automatically test new commits in this PR, but the usual testing commands by org members will still work.

Regular contributors should join the org to skip this step.

Once the patch is verified, the new status will be reflected by the ok-to-test label.

I understand the commands that are listed here.

Details

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.

@openshift-ci
openshift-ci Bot requested review from fsgreco and sg00dwin August 3, 2026 12:31
@openshift-ci openshift-ci Bot added the component/shared Related to console-shared label Aug 3, 2026
@openshift-ci

openshift-ci Bot commented Aug 3, 2026

Copy link
Copy Markdown
Contributor

[APPROVALNOTIFIER] This PR is NOT APPROVED

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

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

Details Needs approval from an approver in each of these files:

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

component/shared Related to console-shared jira/valid-reference Indicates that this PR references a valid Jira ticket of any type. needs-ok-to-test Indicates a PR that requires an org member to verify it is safe to test.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants