fix:Draft icon indicator on Workspace Environment tab

[adwait-bruno]

Description

JIRA:https://usebruno.atlassian.net/browse/BRU-3033

Fixed the draft indicator not showing on the workspace environment tab. The tab shares the same Redux draft state as global-environment-settings but was missing from the type check, never received the hasDraft prop, and SpecialTab had no way to render the dot without a close button.

Contribution Checklist:

• I've used AI significantly to create this pull request
• The pull request only addresses one issue or adds one feature.
• The pull request does not introduce any breaking changes
• I have added screenshots or gifs to help explain the change if applicable.
• I have read the contribution guidelines.
• Create an issue and link to the pull request.

Note: Keeping the PR small and focused helps make it easier to review and merge. If you have multiple changes you want to make, please consider submitting them as separate pull requests.

Publishing to New Package Managers

Please see here for more information.

Summary by CodeRabbit

Release Notes

New Features

• Workspace environments tab now displays a draft indicator for unsaved changes, aligned with global environment settings.

UI Changes

• Updated special tab controls to better reflect whether a close action is available: the interface now switches between draft and close states accordingly, including improved hover/visibility behavior.

Keyboard Shortcuts

• The tab “save” shortcut now follows the same draft-aware save flow used for global environment settings across both relevant tab types.

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

Walkthrough

RequestTab now treats workspaceEnvironments as draft-aware, and GradientCloseButton renders and styles a non-closeable draft state when no close handler is available.

Changes

Draft-aware close button flow

Layer / File(s)	Summary
RequestTab draft wiring packages/bruno-app/src/components/RequestTabs/RequestTab/index.js, packages/bruno-app/src/components/RequestTabs/RequestTab/SpecialTab.js	hasGlobalEnvironmentDraft now includes workspaceEnvironments, the save shortcut uses the same global-environment draft flow for both tab types, and SpecialTab always renders GradientCloseButton with hasChanges from hasDraft and onClick passed through directly.
GradientCloseButton closeable mode packages/bruno-app/src/components/RequestTabs/RequestTab/GradientCloseButton/index.js, packages/bruno-app/src/components/RequestTabs/RequestTab/GradientCloseButton/StyledWrapper.js	GradientCloseButton derives closeability from onClick, adds the no-close class and draft test id for non-closeable tabs, and updates wrapper styles for hover, background, and icon visibility in the non-closeable state.

Estimated code review effort: 2 (Simple) | ~5 minutes

Possibly related PRs

• usebruno/bruno#6243: Modifies the same RequestTab GradientCloseButton rendering and styling path that this change extends with closeable/non-closeable behavior.

Suggested reviewers: helloanoop, lohit-bruno, bijin-bruno

Poem

A draft now glows without a click,
The close button learns a quieter trick.
One tab, one save, one steady flow,
And hover states now come and go.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the main change: fixing the draft indicator on the Workspace Environment tab.
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.

✨ 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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/bruno-app/src/components/RequestTabs/RequestTab/index.js`:
- Line 204: The draft-state indicator logic on line 204 has been expanded to
include both 'global-environment-settings' and 'workspaceEnvironments' tab types
in the hasGlobalEnvironmentDraft check, but the keyboard shortcut handlers for
closeTab and save (referenced at line 481 and elsewhere) still only check for
the 'global-environment-settings' tab type. Update all the conditional checks in
the closeTab and save keybinding branches that currently check tab.type ===
'global-environment-settings' to also include tab.type ===
'workspaceEnvironments' to ensure keyboard shortcuts and save behavior work
consistently for both tab types.

In `@packages/bruno-app/src/components/RequestTabs/RequestTab/SpecialTab.js`:
- Around line 125-127: The DraftTabIcon component rendered in the conditional
branch (when handleCloseClick is falsy and hasDraft is true) is missing a
data-testid attribute required for Playwright E2E testing. Add a data-testid
attribute to the DraftTabIcon element in the else branch to provide a stable
selector for test assertions, following the pattern used in the component
guidelines.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 45a669e1-fae1-4b2f-a5f2-99f02e819e2c

📥 Commits

Reviewing files that changed from the base of the PR and between 800ab6f and 7b23cfe.

📒 Files selected for processing (2)

• packages/bruno-app/src/components/RequestTabs/RequestTab/SpecialTab.js
• packages/bruno-app/src/components/RequestTabs/RequestTab/index.js

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/bruno-app/src/components/RequestTabs/RequestTab/GradientCloseButton/StyledWrapper.js (1)

43-67: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Non-closeable containers still show a pointer cursor.

.close-icon-container sets cursor: pointer unconditionally (Line 50), and the new .no-close override (Lines 62-67) only neutralizes the hover background, not the cursor. Since no-close containers have onClick={undefined} (per index.js), they aren't actually clickable, so the pointer cursor is a misleading affordance.

🖱️ Proposed fix

   &.no-close .close-icon-container {
+    cursor: default;
+
     &:hover {
       background-color: transparent;
     }
   }

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@packages/bruno-app/src/components/RequestTabs/RequestTab/GradientCloseButton/StyledWrapper.js`
around lines 43 - 67, The .close-icon-container in StyledWrapper.js always
applies cursor: pointer, which makes the no-close variant look clickable even
when it isn’t. Update the no-close styling under the &.no-close
.close-icon-container selector so it also overrides the cursor to a non-pointer
value, matching the behavior of the no-close prop and the undefined onClick in
the related RequestTab component.

🧹 Nitpick comments (1)

packages/bruno-app/src/components/RequestTabs/RequestTab/GradientCloseButton/index.js (1)

6-23: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Solid derivation of closeability; one naming nit on test IDs.

Logic checks out — canClose correctly gates the click handler, testid, and close icon rendering, and the draft icon (line 16) always stays mounted so no-close tabs can still show it. One small inconsistency: the outer container's testid alternates between request-tab-close-icon/request-tab-draft-icon (Line 14) while the inner span has a separate, always-present tab-draft-icon testid (Line 16). Two differently-named "draft" test IDs on nested elements could confuse whoever writes Playwright selectors later.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@packages/bruno-app/src/components/RequestTabs/RequestTab/GradientCloseButton/index.js`
around lines 6 - 23, The closeability logic in GradientCloseButton is fine, but
the nested test IDs are inconsistent: the outer close-icon-container switches
between request-tab-close-icon and request-tab-draft-icon while the
always-mounted draft span uses tab-draft-icon. Update the testid naming in
GradientCloseButton so the draft-related selectors follow one clear convention
and avoid overlapping names between the container and the DraftTabIcon wrapper.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In
`@packages/bruno-app/src/components/RequestTabs/RequestTab/GradientCloseButton/StyledWrapper.js`:
- Around line 43-67: The .close-icon-container in StyledWrapper.js always
applies cursor: pointer, which makes the no-close variant look clickable even
when it isn’t. Update the no-close styling under the &.no-close
.close-icon-container selector so it also overrides the cursor to a non-pointer
value, matching the behavior of the no-close prop and the undefined onClick in
the related RequestTab component.

---

Nitpick comments:
In
`@packages/bruno-app/src/components/RequestTabs/RequestTab/GradientCloseButton/index.js`:
- Around line 6-23: The closeability logic in GradientCloseButton is fine, but
the nested test IDs are inconsistent: the outer close-icon-container switches
between request-tab-close-icon and request-tab-draft-icon while the
always-mounted draft span uses tab-draft-icon. Update the testid naming in
GradientCloseButton so the draft-related selectors follow one clear convention
and avoid overlapping names between the container and the DraftTabIcon wrapper.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 409aaf8b-75b9-46c5-9061-0b3d5209f1b5

📥 Commits

Reviewing files that changed from the base of the PR and between 729bdce and 37fc876.

📒 Files selected for processing (3)

• packages/bruno-app/src/components/RequestTabs/RequestTab/GradientCloseButton/StyledWrapper.js
• packages/bruno-app/src/components/RequestTabs/RequestTab/GradientCloseButton/index.js
• packages/bruno-app/src/components/RequestTabs/RequestTab/SpecialTab.js