Skip to content

feat: fix playground tab duplication#2291

Merged
wilsonrivera merged 3 commits intomainfrom
wilson/eng-7663-duplicated-tabs-on-refresh-within-the-playground
Oct 22, 2025
Merged

feat: fix playground tab duplication#2291
wilsonrivera merged 3 commits intomainfrom
wilson/eng-7663-duplicated-tabs-on-refresh-within-the-playground

Conversation

@wilsonrivera
Copy link
Copy Markdown
Contributor

@wilsonrivera wilsonrivera commented Oct 21, 2025

Summary by CodeRabbit

  • Bug Fixes

    • Fixed namespace initialization so data is processed when present and status is successful.
    • Reduced unnecessary effect re-runs by depending on specific response fields instead of the whole data object.
  • Changes

    • Updated playground header handling to prefer a static default template and only send live headers when different.

Checklist

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Oct 21, 2025

Walkthrough

Reverses gating logic in the workspace provider's initial data loading effect to execute namespace processing only when data is present, response code is OK, and namespaces exist. Tightens useEffect dependencies to data?.response?.code and data?.namespaces. Separately, changes Playground GraphiQL to supply defaultHeaders and omit headers when equal to the default template.

Changes

Cohort / File(s) Summary
Workspace Provider Data Loading Logic
studio/src/components/dashboard/workspace-provider.tsx
Reversed the initial data-loading effect gating: the effect now returns early only when the response code is not OK or namespaces are empty, so subsequent namespace processing runs only when data is present, status is OK, and namespaces exist. Tightened useEffect dependencies from the whole data object to data?.response?.code and data?.namespaces.
Playground Header Handling
studio/src/pages/[organizationSlug]/[namespace]/graph/[slug]/playground.tsx
Adjusted GraphiQL props to pass defaultHeaders={PLAYGROUND_DEFAULT_HEADERS_TEMPLATE} and set headers to undefined when headers === PLAYGROUND_DEFAULT_HEADERS_TEMPLATE, ensuring the default template is used and live headers are only passed when different from the template.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check ✅ Passed The title "feat: fix playground tab duplication" is clearly related to the changeset and accurately describes the purpose of the PR. The PR objectives confirm that the goal is to fix duplicated tabs in the playground, and the changes modify two key files in the studio/playground area: workspace-provider.tsx (adjusting data loading effect logic) and playground.tsx (modifying header handling in GraphiQL). While the title does not explicitly convey the technical details of the implementation (effect dependency optimization and conditional header passing), it effectively communicates the primary outcome being achieved. This represents a real and important aspect of the changeset, making it a partially related but valid title that a teammate scanning history would understand.
Docstring Coverage ✅ Passed No functions found in the changes. Docstring coverage check skipped.
✨ Finishing touches
  • 📝 Generate docstrings

📜 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 cbb5f00 and dab94e6.

📒 Files selected for processing (1)
  • studio/src/pages/[organizationSlug]/[namespace]/graph/[slug]/playground.tsx (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • studio/src/pages/[organizationSlug]/[namespace]/graph/[slug]/playground.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
  • GitHub Check: build_push_image
  • GitHub Check: build_test
  • GitHub Check: Analyze (go)
  • GitHub Check: Analyze (javascript-typescript)

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

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a15eb23 and cbb5f00.

📒 Files selected for processing (2)
  • studio/src/components/dashboard/workspace-provider.tsx (2 hunks)
  • studio/src/pages/[organizationSlug]/[namespace]/graph/[slug]/playground.tsx (1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
studio/src/pages/[organizationSlug]/[namespace]/graph/[slug]/playground.tsx (1)
studio/src/lib/constants.ts (1)
  • PLAYGROUND_DEFAULT_HEADERS_TEMPLATE (211-213)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
  • GitHub Check: build_test
  • GitHub Check: build_push_image
  • GitHub Check: Analyze (javascript-typescript)
  • GitHub Check: Analyze (go)
🔇 Additional comments (2)
studio/src/pages/[organizationSlug]/[namespace]/graph/[slug]/playground.tsx (1)

1292-1292: Good fix: prevents unnecessary GraphiQL re-renders.

Switching from the controlled headers prop to defaultHeaders prevents GraphiQL from re-rendering when the headers state changes during initialization. Since shouldPersistHeaders is enabled (Line 1286), GraphiQL manages its own internal headers state and will call onEditHeaders when changes occur. This change directly addresses the tab duplication issue by stabilizing the initial render.

studio/src/components/dashboard/workspace-provider.tsx (1)

36-38: Critical fix: corrects reversed logic bug.

The old condition would return early when data?.response?.code === EnumStatusCode.OK, which is backwards—it should only proceed when the response is OK. The corrected logic data?.response?.code !== EnumStatusCode.OK properly gates the effect to run only when the response is successful and namespaces exist. This bug likely caused improper namespace initialization and unexpected route parameter updates, contributing to the tab duplication issue.

Comment thread studio/src/components/dashboard/workspace-provider.tsx
@wilsonrivera wilsonrivera merged commit 943cf41 into main Oct 22, 2025
9 checks passed
@wilsonrivera wilsonrivera deleted the wilson/eng-7663-duplicated-tabs-on-refresh-within-the-playground branch October 22, 2025 18:20
asoorm pushed a commit that referenced this pull request Oct 25, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants