Resizing the window during the tutorial leaves its demonstration session active as a real session

オープン 初心者向け
  • 何か問題がありますか？
#1,765 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 2 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
85/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
react, typescript
領域
frontend

調査の方向性

apps/web/src/providers/WalkthroughProvider.tsxと、apps/web/src/providers/__tests__/WalkthroughProvider.test.tsxにある既存のウォークスルーテストから始め、デモセッションの開始方法と、サイズ変更またはアンマウントによってウォークスルーが閉じる仕組みをたどってください。説明されている2つのテストを実行し、どちらの方法でウォークスルーを終了しても、チュートリアルセッションがアクティブなまま残らないことを確認してください。Issueでは、新しいエンドツーエンドのspecとしてtesting/src/specs/walkthrough.spec.tsも挙げられています。

索引モデルが issue の本文から書いたものです。

説明

Area: Web Bug Difficulty: Low Good First Issue Priority: Low

If the tutorial is dismissed by resizing the window, its demonstration session (subject 123, session 123) stays in the store as a real session in progress. At the "Session in Progress" step the walkthrough calls startSession(SESSION_DATA) to have something to point at, and only its close() handler calls endSession() to undo that. Resizing the window closes the walkthrough through a different path: a resize listener that only sets isWalkthroughOpen to false. Shrinking below the desktop breakpoint does the same, because WalkthroughProvider stops rendering the walkthrough. In both cases close() never runs. A first-time user who maximizes or snaps the browser window part-way through the tutorial is left with a "session in progress" for a subject that does not exist. "Start Session" is disabled, and "Accessible Instruments" opens instruments against session id 123, which the API cannot accept when the record is saved.

Where

apps/web/src/providers/WalkthroughProvider.tsx:68:

useEventListener('resize', () => setIsWalkthroughOpen(false), undefined, { once: true });

apps/web/src/providers/WalkthroughProvider.tsx:286-288 (the fake session) and :416-421 (the only cleanup):

onBeforeQuery() {
  startSession(SESSION_DATA);
},
// ...
const close = () => {
  endSession();
  removeSpotlight();
  setIndex(0);
  setIsWalkthroughOpen(false);
};

Reproduce

  1. Sign in with a browser window that is not maximized, accept the disclaimer, and let the tutorial open (or open it from the user menu → Tutorial).
  2. Click Next until the "Session in Progress" step.
  3. Resize or maximize the window.

Actual: the tutorial disappears, but the sidebar still shows a current session for subject 123. Start Session is disabled until the user ends that session by hand.
Expected: dismissing the tutorial by any route removes its demonstration session, as the close button does.

Tests

  • apps/web/src/providers/__tests__/WalkthroughProvider.test.tsx: it('should end the demonstration session when a resize closes the walkthrough'), plus it('should end the demonstration session when the walkthrough unmounts below the desktop breakpoint').
  • testing/src/specs/walkthrough.spec.ts (new): open the tutorial from the user menu, advance past "Session in Progress", resize the viewport, and assert no current session card is shown.

Suggested fix

Do the cleanup on unmount rather than only in close(): e.g. a useEffect(() => () => endSession(), []) in Walkthrough, guarded so it only ends the session when the current session is the tutorial's SESSION_DATA. Alternatively, have the resize listener call close().

主要言語
TypeScript
スター
119
フォーク
19
平均マージ
5日 10時間
マージ済み PR（30日）
36

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

DouglasNeuroInformatics/OpenDataCapture のほかの issue

DouglasNeuroInformatics/OpenDataCapture の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。