Skip to content

Asks which layout is preferred on first entry to the Commit Graph view#5505

Open
sergeibbb wants to merge 1 commit into
mainfrom
feature/5412-graph-layout-entry-question
Open

Asks which layout is preferred on first entry to the Commit Graph view#5505
sergeibbb wants to merge 1 commit into
mainfrom
feature/5412-graph-layout-entry-question

Conversation

@sergeibbb

@sergeibbb sergeibbb commented Jul 15, 2026

Copy link
Copy Markdown
Member

Description

Closes #5412 — asks the user on first entry to the Commit Graph view which layout they prefer, with an abstract illustrated preview of each option ("Sidebar › ask on entry" item of #5391).

Screenshot

Image Image Image

What it does

A one-time modal (gl-graph-layout-prompt, hosted in the Graph webview) explaining that the Graph now takes the place of the Home view, and offering two illustrated choices:

  • Side Bar — vertical, alongside the editor
  • Bottom Panel — horizontal, below the editor

Choosing moves the view via vscode.moveViews + <container>.resetViewContainerLocation (both guarded, mirroring Reset Views Layout) to the GitLens side bar container or the bottom gitlensPanel container and re-reveals it. The container reset matters: dragging a container's only view relocates the whole container, so e.g. a Graph sitting in the secondary side bar means gitlensPanel is the secondary side bar — without the reset, "Bottom Panel" would be a no-op. VS Code persists placement itself, so there's no new setting.

The ✕ button, the "Keep my current layout" link, Esc, and backdrop-click all keep the current layout. Any outcome dismisses the prompt for good (new graph:layoutPrompt onboarding key, so gitlens.advanced.skipOnboarding and GitLens: Reset → Onboarding work as expected).

⚠️ Dark-shipped — users will NOT see this yet

The prompt only arms when the Graph's default container is the GitLens side bar:

viewIdsByDefaultContainerId.get('workbench.view.extension.gitlens')?.includes('graph')

Today the Graph's default container is the bottom panel, so this is inert for everyone. When the #5391 consolidation makes the Graph the panel's main view, that PR must update this same mapping anyway (otherwise Reset Views Layout would send the Graph back to the bottom panel) — so the prompt arms automatically, with zero coordination. Deliberately no experimental setting.

Deferred to that future PR (noted in code comments): re-adding the CHANGELOG entry (removed here — no announcing an invisible feature), bumping the onboarding schema stamp if the merge slips past 18.4.0, and an E2E spec.

Dev/pre-release preview

  • GitLens: Simulate Graph as Main View (Debugging) — new command, palette-visible only with gitlens:debugging || gitlens:prerelease. Toggles graph between the panel/side-bar entries of viewIdsByDefaultContainerId in-memory (window reload restores) and refreshes the view. While on, Reset Views Layout coherently treats the side bar as the Graph's home.
  • Re-run the flow anytime: GitLens: Reset…Onboarding… → refresh the Graph view.

Behavior details

  • View host only (gitlens.views.graph) — the editor-tab graph has no side-vs-bottom placement to choose.
  • Sequenced after the graph walkthrough popover — on a truly fresh profile both fire on first entry; the prompt holds until the walkthrough banner is dismissed, completed, or started ("See what's new" tracks started without dismissing the banner, and the header only force-opens the popover while not started — without the started case, CTA-clickers would never see the prompt).
  • Design: reuses the graph feature gate's brand-gradient border recipe (--gl-gradient-brand, --gl-radius-xl, forced-colors fallback) so the two first-run surfaces read as one family.
  • Keyboard & a11y: the dialog self-focuses on open (nothing pre-selected; new opt-in autofocus-self on gl-dialog, with an explicit focus fallback since Chromium ignores autofocus on a shadow-hosted dialog); Tab order is Side Bar → Bottom Panel → skip link → ✕ (the ✕ is last in the DOM, positioned top-right visually); the dialog closes before unmount so native focus restoration runs; gl-dialog also gained a label property → aria-label (slotted headings can't cross the shadow boundary).
  • Responsive: side-by-side cards normally (captions kept to one line); stacked row-cards under 480px width (side-bar host); compressed variant (captions dropped, smaller illustrations) under 420px height (short bottom panel). Includes a box-sizing fix for gl-dialog::part(base) so the dialog can't overflow a ~300px side-bar webview.
  • Telemetry: graph/layoutPrompt/shown (once per webview session, remount-safe) and graph/layoutPrompt/choice (sidebar/panel/dismissed).

Verification

Live-exercised against a real instance (fresh profiles): gate inert by default; simulate command arms/disarms at runtime without reload; both move destinations actually relocate the view; all four dismissal paths dismiss without moving; dismissal survives refresh/recreation; both responsive variants fit their real host dimensions; dialog self-focus verified via activeElement probing; pnpm run check clean. Later rounds (error-path guards, started cohort, focus restore) are verified by code-trace and types.

Checklist

  • I have followed the guidelines in the Contributing document
  • My changes follow the coding style of this project
  • My changes build without any errors or warnings
  • My changes have been formatted and linted
  • My changes include any required corresponding changes to the documentation (CHANGELOG entry intentionally deferred — see above)
  • My changes have been rebased and squashed to the minimal number (typically 1) of relevant commits
  • My changes have a descriptive commit message with a short title

🤖 Generated with Claude Code

@sergeibbb
sergeibbb force-pushed the feature/5412-graph-layout-entry-question branch 5 times, most recently from 00b3cb6 to 03a6ba3 Compare July 16, 2026 14:49
sergeibbb added a commit that referenced this pull request Jul 16, 2026
Presents a one-time prompt to users on their first entry to the Commit Graph view when it is the main GitLens view, asking them to choose their preferred layout: vertical in the side bar or horizontal in the bottom panel.

The prompt uses abstract illustrations to represent the layout options and dismisses permanently after any user interaction (choice or close). Choosing an option automatically moves the Graph view to the selected container.

Adds telemetry to track when the prompt is shown and the user's choice. Includes a debugging command (`gitlens.graph.simulate.mainView`) for pre-release testing of this feature. The prompt is designed to avoid conflicting with the graph walkthrough banner.

(#5412, #5391, #5505)
@sergeibbb
sergeibbb force-pushed the feature/5412-graph-layout-entry-question branch from 03a6ba3 to 49ffb39 Compare July 16, 2026 14:52
@sergeibbb
sergeibbb marked this pull request as ready for review July 16, 2026 15:05
@sergeibbb
sergeibbb requested a review from a team July 16, 2026 15:05
@augmentcode

augmentcode Bot commented Jul 16, 2026

Copy link
Copy Markdown
🤖 Augment PR Summary

Summary: Adds a one-time onboarding prompt on first entry to the Commit Graph view to ask users whether they prefer the Graph in the Side Bar or Bottom Panel.

Changes:

  • Introduces a new onboarding key (graph:layoutPrompt) and state/IPC wiring to show the prompt only once (and participate in onboarding reset flows)
  • Adds <gl-graph-layout-prompt> webview UI with illustrated layout choices and dismissal paths
  • Moves the Graph view to the chosen container via vscode.moveViews, resets the destination container location, and re-focuses the Graph view
  • Adds telemetry for prompt impressions and outcomes (graph/layoutPrompt/shown, graph/layoutPrompt/choice) and documents them
  • Enhances <gl-dialog> with an explicit accessible label and an opt-in “focus dialog itself” mode, plus synchronous native close to support focus restoration on unmount
  • Adds a dev/prerelease-only command to simulate the Graph becoming the main GitLens view (to preview the prompt behavior)

Technical Notes: The prompt is gated to arm only when the Graph’s default container becomes the GitLens side bar (so it remains inert until the related consolidation lands).

🤖 Was this summary useful? React with 👍 or 👎

@augmentcode augmentcode Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Review completed. 1 suggestion posted.

Fix All in Augment

Comment augment review to trigger a new review at any time.

Comment thread src/webviews/plus/graph/registration.ts Outdated
sergeibbb added a commit that referenced this pull request Jul 16, 2026
Presents a one-time prompt to users on their first entry to the Commit Graph view when it is the main GitLens view, asking them to choose their preferred layout: vertical in the side bar or horizontal in the bottom panel.

The prompt uses abstract illustrations to represent the layout options and dismisses permanently after any user interaction (choice or close). Choosing an option automatically moves the Graph view to the selected container.

Adds telemetry to track when the prompt is shown and the user's choice. Includes a debugging command (`gitlens.graph.simulate.mainView`) for pre-release testing of this feature. The prompt is designed to avoid conflicting with the graph walkthrough banner.

(#5412, #5391, #5505)
@sergeibbb
sergeibbb force-pushed the feature/5412-graph-layout-entry-question branch from 49ffb39 to dc550ce Compare July 16, 2026 15:17
@sergeibbb

Copy link
Copy Markdown
Member Author

augment review

@augmentcode augmentcode Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Review completed. 1 suggestion posted.

Fix All in Augment

Comment augment review to trigger a new review at any time.

Comment thread src/webviews/apps/plus/graph/components/gl-graph-layout-prompt.ts
@sergeibbb

Copy link
Copy Markdown
Member Author

augment review

sergeibbb added a commit that referenced this pull request Jul 16, 2026
Presents a one-time prompt to users on their first entry to the Commit Graph view when it is the main GitLens view, asking them to choose their preferred layout: vertical in the side bar or horizontal in the bottom panel.

The prompt uses abstract illustrations to represent the layout options and dismisses permanently after any user interaction (choice or close). Choosing an option automatically moves the Graph view to the selected container.

Adds telemetry to track when the prompt is shown and the user's choice. Includes a debugging command (`gitlens.graph.simulate.mainView`) for pre-release testing of this feature. The prompt is designed to avoid conflicting with the graph walkthrough banner.

(#5412, #5391, #5505)
@sergeibbb
sergeibbb force-pushed the feature/5412-graph-layout-entry-question branch from dc550ce to 50b9aab Compare July 16, 2026 15:28

@augmentcode augmentcode Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Review completed. No suggestions at this time.

Comment augment review to trigger a new review at any time.

@gitkraken-services

gitkraken-services Bot commented Jul 17, 2026

Copy link
Copy Markdown

🟢 Conflict resolved with 100% confidence

Apply conflict resolution in GitKraken

Comment gitkraken apply to apply this conflict resolution.


Resolution details

🟢 src/constants.onboarding.ts (merged, 100%)

Merged both onboarding definitions. 'ours' added the Graph Kanban callout (schema 18.2.0) and 'theirs' added the Graph Layout Prompt (schema 18.4.0). Both are independent onboarding items.

🟢 src/webviews/apps/plus/graph/graph-app.ts (merged, 100%)

Merged the new layout prompt logic from 'theirs' while respecting the removal of 'handleVisualizationsCalloutDismiss' from 'ours'.

🟢 src/webviews/apps/plus/graph/stateProvider.ts (merged, 100%)

The 'ours' side deleted 'visualizationsButtonCalloutDismissed' and its associated message handler, while 'theirs' added 'layoutPromptNeeded' and its handler. I merged these changes by removing the deleted code and keeping the newly added code from 'theirs'.

🟢 src/webviews/plus/graph/graphWebview.ts (merged, 100%)

The 'ours' branch removed the 'visualizations:buttonCallout' feature, while 'theirs' added the new 'layoutPrompt' feature. I merged these by keeping the 'layoutPrompt' additions from 'theirs' and respecting the removal of 'visualizations:buttonCallout' from 'ours'.

🟢 src/webviews/plus/graph/protocol.ts (merged, 100%)

Merged changes by keeping the new layout prompt properties and commands from 'theirs' while respecting the removal of 'visualizationsButtonCallout' related code from 'ours'.


Generated by GitKraken at 2026-07-21 05:53:48 UTC

sergeibbb added a commit that referenced this pull request Jul 20, 2026
Presents a one-time prompt to users on their first entry to the Commit Graph view when it is the main GitLens view, asking them to choose their preferred layout: vertical in the side bar or horizontal in the bottom panel.

The prompt uses abstract illustrations to represent the layout options and dismisses permanently after any user interaction (choice or close). Choosing an option automatically moves the Graph view to the selected container.

Adds telemetry to track when the prompt is shown and the user's choice. Includes a debugging command (`gitlens.graph.simulate.mainView`) for pre-release testing of this feature. The prompt is designed to avoid conflicting with the graph walkthrough banner.

(#5412, #5391, #5505)
@sergeibbb
sergeibbb force-pushed the feature/5412-graph-layout-entry-question branch from 50b9aab to 6bae93b Compare July 20, 2026 12:34
Presents a one-time prompt to users on their first entry to the Commit Graph view when it is the main GitLens view, asking them to choose their preferred layout: vertical in the side bar or horizontal in the bottom panel.

The prompt uses abstract illustrations to represent the layout options and dismisses permanently after any user interaction (choice or close). Choosing an option automatically moves the Graph view to the selected container.

Adds telemetry to track when the prompt is shown and the user's choice. Includes a debugging command (`gitlens.graph.simulate.mainView`) for pre-release testing of this feature. The prompt is designed to avoid conflicting with the graph walkthrough banner.

(#5412, #5391, #5505)
@sergeibbb
sergeibbb force-pushed the feature/5412-graph-layout-entry-question branch from 6bae93b to 570697e Compare July 20, 2026 13:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Ask users on entry to the Graph which layout they prefer

1 participant