[ENGG-4607] Enable autoFocus for Environment Creation #3786

ajinkya-browserstack · 2025-10-31T09:39:37Z

Closes issue:

📜 Summary of changes:

🎥 Demo Video:

Video/Demo:

✅ Checklist:

Make sure linting and unit tests pass.
No install/build warnings introduced.
Verified UI in browser.
For UI changes, added/updated analytics events (if applicable).
For changes in extension's code, manually tested in Chrome and Firefox.
Added/updated unit tests for this change.
Raised pull request to update corresponding documentation (if already exists).
Added demo video showing the changes in action (if applicable).

🧪 Test instructions:

🔗 Other references:

Summary by CodeRabbit

Improvements
- Better tracking of newly created tabs for more consistent behavior across the app.
- Autofocus for new collection and environment name inputs now relies on the tab "new" state.
- New interactions reset the "new" state on blur, avoiding repeated autofocus after naming.

…re instead of tabSource, add setIsNew() to useGenericState(), remove isNewRecord prop from CollectionView, trigger setIsNew(false) on collection rename

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Co-authored-by: Nafees Nehar <[email protected]>

coderabbitai · 2025-10-31T09:39:53Z

Walkthrough

This PR adds an isNewTab flag to the tab system and wires it through stores, hooks, tab source types, and consumer components. TabState now includes isNewTab and setIsNewTab; createTabStore gains an isNewTab parameter; GenericState/useGenericState exposes setIsNew and getIsNew now reads from store.isNewTab; tab source metadata types replace/remove the previous focusBreadcrumb property; components (CollectionView, VariablesListHeader, etc.) use getIsNew()/setIsNew(false) for autofocus and blur handling. A new public method setIsNew(...) is provided by the GenericStateContext provider.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

app/src/componentsV2/Tabs/store/tabStore.ts — verify initialization of isNewTab and setIsNewTab implementation, ensure versioning/incrementVersion behavior remains correct
app/src/componentsV2/Tabs/components/TabItem.tsx — confirm getIsNew now reads top-level flag and new setIsNew updates store and triggers incrementVersion
app/src/features/apiClient/hooks/useNewApiClientContext.ts & apiClient.tsx — ensure metadata property rename (focusBreadcrumb → isNewTab) is consistently used where sources are created
app/src/hooks/useGenericState.ts and all call sites (CollectionView.tsx, VariablesListHeader.tsx, etc.) — confirm API shape changes (setIsNew added) are propagated and onBlur/autofocus flows behave as expected

Suggested reviewers

iostreamer-X

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description Check	⚠️ Warning	The PR description is essentially the template with all placeholder sections unfilled. There is no GitHub issue link provided (only the template comment), no actual summary of changes (just the "Summarize your changes" placeholder), no demo video, no test instructions, and no additional references or checklist completion. The description fails to provide any substantive information about the changes, their scope, or how to validate them. While the template structure is technically present, none of the required content has been populated, making this a largely incomplete submission that does not meet the repository's documentation requirements.	Please fill in the PR description with the required information: (1) link the GitHub issue (ENGG-4607 or the corresponding issue), (2) provide a clear summary of changes explaining that `isNewTab` replaces `focusBreadcrumb` and enables auto-focus for environment and collection creation, (3) provide a demo video or explain why one is not applicable, (4) add test instructions for verifying the auto-focus behavior, and (5) check off the applicable checklist items to confirm linting, tests, UI verification, and other validations have been completed.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title "[ENGG-4607] Enable autoFocus for Environment Creation" is directly related to the changeset, which involves implementing auto-focus functionality for environment and collection creation by introducing an `isNewTab` state mechanism. The title is specific and clear, capturing the user-facing outcome of enabling auto-focus for environment creation, which is a primary objective of these changes. While the PR also involves broader refactoring (replacing `focusBreadcrumb` with `isNewTab` state management), the title accurately conveys a key aspect of what the PR accomplishes.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch ENGG-4607-environment-autofocus-breadcrumb

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0f8fcb7 and e5760b7.

📒 Files selected for processing (1)

app/src/features/apiClient/screens/environment/components/VariablesListHeader/VariablesListHeader.tsx (2 hunks)

🧰 Additional context used

🧠 Learnings (1)

📓 Common learnings

Learnt from: nafees87n
Repo: requestly/requestly PR: 3655
File: app/src/features/apiClient/screens/apiClient/components/views/components/Collection/components/CollectionRunnerView/components/RunResultView/RunResultContainer/RunResultContainer.tsx:426-426
Timestamp: 2025-10-10T11:08:23.369Z
Learning: In the file `app/src/features/apiClient/screens/apiClient/components/views/components/Collection/components/CollectionRunnerView/components/RunResultView/RunResultContainer/RunResultContainer.tsx`, the `destroyInactiveTabPane={true}` setting is intentional. The loss of state (expandedKeys, scroll position) when switching tabs is acceptable for now and will be addressed in future work.

🧬 Code graph analysis (1)

app/src/features/apiClient/screens/environment/components/VariablesListHeader/VariablesListHeader.tsx (1)

app/src/hooks/useGenericState.ts (1)

useGenericState (38-40)

🔇 Additional comments (2)

app/src/features/apiClient/screens/environment/components/VariablesListHeader/VariablesListHeader.tsx (2)
47-47: LGTM: Correctly extends the hook destructuring.

The addition of setIsNew from useGenericState() is properly used in the onBlur handler below to reset the "new" state after the user finishes editing the environment name.

70-73: Verify behavior when rename fails.

The onBlur handler calls setIsNew(false) immediately after invoking handleNewEnvironmentNameChange(newName) without awaiting it. Since handleNewEnvironmentNameChange is async and may fail (showing a toast on error), the environment will be marked as "not new" even if the rename operation fails.

This means:

If the rename fails, autoFocus won't trigger on the next visit

The environment remains with its current name (potentially still "New Environment")

Is this the intended UX? If autofocus should persist until a successful rename, consider awaiting the operation:
-onBlur={(newName) => {
-  handleNewEnvironmentNameChange(newName);
-  setIsNew(false);
-}}
+onBlur={async (newName) => {
+  await handleNewEnvironmentNameChange(newName);
+  setIsNew(false);
+}}
Alternatively, if the current behavior is intentional (one-time autofocus regardless of rename success), consider adding a comment to document this decision.

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 and usage tips.}

…onBlur

…7-environment-autofocus-breadcrumb

Copilot

Pull Request Overview

This PR refactors the handling of "new tab" state from being determined by the focusBreadcrumb metadata property to a more explicit isNewTab state managed within the tab store. This change improves clarity and enables runtime updates to the "new" status.

Renamed focusBreadcrumb to isNewTab in TabSourceMetadata and removed it from specific tab source interfaces
Added isNewTab state management to the tab store with setIsNewTab method
Updated components to use setIsNew(false) in onBlur handlers to clear the "new" state after user interaction

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
app/src/hooks/useGenericState.ts	Added `setIsNew` method to the GenericState interface
app/src/features/apiClient/screens/environment/components/environmentView/EnvironmentViewTabSource.tsx	Removed `focusBreadcrumb` property from interface, now using inherited `isNewTab`
app/src/features/apiClient/screens/environment/components/VariablesListHeader/VariablesListHeader.tsx	Added `setIsNew(false)` call in breadcrumb onBlur handler
app/src/features/apiClient/screens/apiClient/components/views/components/Collection/collectionViewTabSource.tsx	Removed `focusBreadcrumb` property from interface
app/src/features/apiClient/screens/apiClient/components/views/components/Collection/CollectionView.tsx	Added `setIsNew(false)` call in breadcrumb onBlur handler and replaced stored `isNewCollection` with direct `getIsNew()` call
app/src/features/apiClient/hooks/useNewApiClientContext.ts	Changed `focusBreadcrumb` to `isNewTab`
app/src/features/apiClient/contexts/apiClient.tsx	Changed `focusBreadcrumb` to `isNewTab` with updated boolean values
app/src/componentsV2/Tabs/store/tabStore.ts	Added `isNewTab` state property and `setIsNewTab` method to tab store
app/src/componentsV2/Tabs/store/tabServiceStore.ts	Passed `source.metadata.isNewTab` to `createTabStore`
app/src/componentsV2/Tabs/components/TabItem.tsx	Implemented `getIsNew` to read from store state and added `setIsNew` callback

Comments suppressed due to low confidence (1)

app/src/features/apiClient/contexts/apiClient.tsx:207

The value should be false to maintain the original behavior. The original code had focusBreadcrumb: false, but this was changed to isNewTab: true. Based on the context at line 78 in useNewApiClientContext.ts where isNewTab: !doesRecordExist is used, when a record exists (which is the case here after creating it), isNewTab should be false.

                    isNewTab: true,

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

nafees87n

Looks good

Phum7895 · 2025-12-29T02:59:35Z

GitHub repository

ajinkya-browserstack and others added 8 commits October 30, 2025 14:49

fix: Enable breadcrumb autofocus on creation of a new Collection

b9ba801

refactor: rename CollectionView prop isNewItem to isNewRecord

5137c36

fix: Add isNew, setIsNew to tabStore, change getIsNew() to use tabSto…

6147822

…re instead of tabSource, add setIsNew() to useGenericState(), remove isNewRecord prop from CollectionView, trigger setIsNew(false) on collection rename

Apply suggestions from code review (coderabbitai)

ca40ec2

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Merge branch 'master' into ENGG-4606-autofocus-breadcrumb

3a6911f

Update app/src/componentsV2/Tabs/store/tabStore.ts, suggestion by Nafees

dba7497

Co-authored-by: Nafees Nehar <[email protected]>

fix: Move setIsNew(false) to onBlur

c2d2d33

fix: Enable autoFocus for Environment creation

0f8fcb7

fix: Add setIsNew(false) to environment (VariablesListHeader) header …

e5760b7

…onBlur

ajinkya-browserstack requested review from Copilot, nafees87n and rohanmathur91 and removed request for nafees87n and rohanmathur91 October 31, 2025 09:52

Merge branch 'master' of github.com:requestly/requestly into ENGG-460…

b73f030

…7-environment-autofocus-breadcrumb

Copilot AI reviewed Oct 31, 2025

View reviewed changes

nafees87n approved these changes Nov 3, 2025

View reviewed changes

ajinkya-browserstack merged commit 992d111 into master Nov 3, 2025
3 checks passed

This was referenced Nov 4, 2025

[ENGG-4608] fix: Enable autoFocus for HTTP & GraphQL requests in both Draft & Created modes #3792

Merged

[ENGG-4716]: feat: Show Popup for Environment Selector when No Environment Exists #3798

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[ENGG-4607] Enable autoFocus for Environment Creation #3786

[ENGG-4607] Enable autoFocus for Environment Creation #3786

Uh oh!

ajinkya-browserstack commented Oct 31, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Oct 31, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

nafees87n left a comment

Uh oh!

Uh oh!

Phum7895 commented Dec 29, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

[ENGG-4607] Enable autoFocus for Environment Creation #3786

[ENGG-4607] Enable autoFocus for Environment Creation #3786

Uh oh!

Conversation

ajinkya-browserstack commented Oct 31, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📜 Summary of changes:

🎥 Demo Video:

✅ Checklist:

🧪 Test instructions:

🔗 Other references:

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Oct 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Estimated code review effort

Suggested reviewers

Pre-merge checks and finishing touches

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

nafees87n left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Phum7895 commented Dec 29, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ajinkya-browserstack commented Oct 31, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Oct 31, 2025 •

edited

Loading