Skip to content

fix: card templates panel not re-opening#8895

Merged
jianwei1 merged 10 commits intomainfrom
jianweichong/nes-1320-select-card-template-panel-fails-to-reopen-for-new-cards
Mar 31, 2026
Merged

fix: card templates panel not re-opening#8895
jianwei1 merged 10 commits intomainfrom
jianweichong/nes-1320-select-card-template-panel-fails-to-reopen-for-new-cards

Conversation

@jianwei1
Copy link
Copy Markdown
Contributor

@jianwei1 jianwei1 commented Mar 23, 2026

Summary by CodeRabbit

  • Bug Fixes

    • Card Templates panel reliably reopens on mobile, opens immediately when selecting “Select Card Template,” and resets visibility when switching steps so it won’t remain stuck closed.
  • Tests

    • Expanded tests to assert Card Templates visibility and open/close behavior across navigation and mobile flows.
  • Documentation

    • Added a plan describing the fix, reset rules, and acceptance criteria for Card Templates panel behavior.

@jianwei1 jianwei1 requested a review from Ur-imazing March 23, 2026 04:55
@jianwei1 jianwei1 self-assigned this Mar 23, 2026
@linear
Copy link
Copy Markdown

linear Bot commented Mar 23, 2026

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Mar 23, 2026

Walkthrough

Moves Card Templates visibility from local component state into editor-global showCardTemplates in EditorProvider, updates reducer/actions to manage and reset it on step changes, updates components to dispatch/read the new action/state, and adjusts tests and test utilities to assert the new behavior.

Changes

Cohort / File(s) Summary
CardWrapper Mobile Handler
apps/journeys-admin/src/components/Editor/Slider/Content/Canvas/CardWrapper/CardWrapper.tsx, apps/journeys-admin/src/components/Editor/Slider/Content/Canvas/CardWrapper/CardWrapper.spec.tsx
Mobile "Select Card Template" now dispatches SetShowCardTemplatesAction(true) before SetSelectedBlockAction/SetActiveSlideAction; test updated to assert showCardTemplates: true appears in rendered test output.
Properties Component
apps/journeys-admin/src/components/Editor/Slider/Settings/CanvasDetails/Properties/Properties.tsx, apps/journeys-admin/src/components/Editor/Slider/Settings/CanvasDetails/Properties/Properties.spec.tsx
Removed local useState for card template visibility; component reads state.showCardTemplates and dispatches SetShowCardTemplatesAction(false) when closing; tests added/updated to assert rendering based on global state and showCardTemplates: false output.
EditorProvider State & Reducer
libs/journeys/ui/src/libs/EditorProvider/EditorProvider.tsx, libs/journeys/ui/src/libs/EditorProvider/EditorProvider.spec.tsx
Added showCardTemplates?: boolean to EditorState (default true), introduced SetShowCardTemplatesAction and reducer branch, updated step-selection reducer branches to reset showCardTemplates to true on new step selection, and updated reducer/context tests to include the new field and behaviors.
Test Utilities
apps/journeys-admin/src/libs/TestEditorState/TestEditorState.tsx
Added debug output rendering of state.showCardTemplates to support assertions in component tests.
Docs / Plan
docs/plans/2026-03-23-001-fix-card-template-panel-reopen-plan.md
Added plan describing migration of showCardTemplates to global state, reducer semantics and reset rules, dispatch ordering requirements, and test acceptance criteria.

Sequence Diagram(s)

sequenceDiagram
  participant User as User
  participant CardWrapper as CardWrapper (mobile)
  participant Editor as EditorProvider
  participant Drawer as Drawer / ActiveSlide

  User->>CardWrapper: Click "Select Card Template"
  CardWrapper->>Editor: dispatch SetShowCardTemplates(true)
  CardWrapper->>Editor: dispatch SetSelectedBlock(...)
  CardWrapper->>Editor: dispatch SetActiveSlide(Drawer)
  Editor-->>Drawer: state.showCardTemplates = true
  Drawer-->>User: Render Card Templates panel
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 20.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title directly and clearly summarizes the main change: fixing the card templates panel's inability to reopen after dismissal.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch jianweichong/nes-1320-select-card-template-panel-fails-to-reopen-for-new-cards

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.

@nx-cloud
Copy link
Copy Markdown

nx-cloud Bot commented Mar 23, 2026

View your CI Pipeline Execution ↗ for commit 6d55404

Command Status Duration Result
nx run journeys-admin-e2e:e2e ✅ Succeeded 25s View ↗
nx run resources-e2e:e2e ✅ Succeeded 20s View ↗
nx run watch-e2e:e2e ✅ Succeeded 20s View ↗
nx run journeys-e2e:e2e ✅ Succeeded 24s View ↗
nx run videos-admin-e2e:e2e ✅ Succeeded 5s View ↗
nx run-many --target=vercel-alias --projects=jo... ✅ Succeeded 2s View ↗
nx run-many --target=upload-sourcemaps --projec... ✅ Succeeded 9s View ↗
nx run-many --target=vercel-alias --projects=watch ✅ Succeeded 2s View ↗
Additional runs (12) ✅ Succeeded ... View ↗

☁️ Nx Cloud last updated this comment at 2026-03-31 20:42:23 UTC

@nx-cloud
Copy link
Copy Markdown

nx-cloud Bot commented Mar 23, 2026

View your CI Pipeline Execution ↗ for commit 8dc17d6


☁️ Nx Cloud last updated this comment at 2026-03-23 04:59:17 UTC

@github-actions github-actions Bot requested a deployment to Preview - resources March 23, 2026 04:57 Pending
@github-actions github-actions Bot temporarily deployed to Preview - journeys March 23, 2026 04:57 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - videos-admin March 23, 2026 04:57 Inactive
@github-actions github-actions Bot requested a deployment to Preview - journeys-admin March 23, 2026 04:57 Pending
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 23, 2026

The latest updates on your projects.

Name Status Preview Updated (UTC)
journeys ✅ Ready journeys preview Wed Apr 1 09:37:52 NZDT 2026

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 23, 2026

The latest updates on your projects.

Name Status Preview Updated (UTC)
videos-admin ✅ Ready videos-admin preview Wed Apr 1 09:38:15 NZDT 2026

@github-actions github-actions Bot temporarily deployed to Preview - videos-admin March 23, 2026 05:02 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - journeys March 23, 2026 05:02 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - resources March 23, 2026 05:02 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - journeys-admin March 23, 2026 05:02 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - watch March 23, 2026 05:02 Inactive
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 23, 2026

The latest updates on your projects.

Name Status Preview Updated (UTC)
resources ✅ Ready resources preview Wed Apr 1 09:38:09 NZDT 2026

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 23, 2026

The latest updates on your projects.

Name Status Preview Updated (UTC)
watch ✅ Ready watch preview Wed Apr 1 09:38:24 NZDT 2026

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Mar 23, 2026

The latest updates on your projects.

Name Status Preview Updated (UTC)
journeys-admin ✅ Ready journeys-admin preview Wed Apr 1 09:38:36 NZDT 2026

@blacksmith-sh

This comment has been minimized.

@github-actions github-actions Bot temporarily deployed to Preview - journeys-admin March 23, 2026 20:08 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - journeys March 23, 2026 20:08 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - resources March 23, 2026 20:08 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - watch March 23, 2026 20:08 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - journeys-admin March 30, 2026 22:56 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - journeys March 30, 2026 22:56 Inactive
@jianwei1 jianwei1 requested a review from csiyang March 30, 2026 22:58
csiyang
csiyang previously approved these changes Mar 31, 2026
@github-actions github-actions Bot temporarily deployed to Preview - journeys-admin March 31, 2026 01:42 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - videos-admin March 31, 2026 01:42 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - watch March 31, 2026 01:43 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - resources March 31, 2026 01:43 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - journeys March 31, 2026 01:43 Inactive
…1320)

Prevent card templates panel from reopening when card properties are
changed on an empty card. The reducer now only resets showCardTemplates
to true when navigating to a different step, not when mutation handlers
re-select the current step via SetEditorFocusAction.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@github-actions github-actions Bot temporarily deployed to Preview - journeys March 31, 2026 20:18 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - videos-admin March 31, 2026 20:18 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - journeys-admin March 31, 2026 20:18 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - resources March 31, 2026 20:18 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - watch March 31, 2026 20:18 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - watch March 31, 2026 20:36 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - resources March 31, 2026 20:36 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - journeys March 31, 2026 20:36 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - videos-admin March 31, 2026 20:36 Inactive
@github-actions github-actions Bot temporarily deployed to Preview - journeys-admin March 31, 2026 20:36 Inactive
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.

Caution

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

⚠️ Outside diff range comments (1)
libs/journeys/ui/src/libs/EditorProvider/EditorProvider.tsx (1)

257-289: ⚠️ Potential issue | 🟠 Major

Reset showCardTemplates anywhere the selected step can change.

These new branches only recalculate the flag for direct step-selection actions. SetStepsAction can also replace selectedStep/selectedStepId (fallback after a step delete, step-list refresh, initial hydration, etc.) and currently carries the old showCardTemplates value forward; because Properties.tsx treats showCardTemplates === false as “panel closed”, that stale false can recreate the same UX bug on the next step. Also, Line 258 keys “same step” off state.selectedStepId only, so EditorProvider will flip initialState.showCardTemplates: false back to true on mount when selectedStep is present but the id has not been hydrated yet. Please centralize the current-step comparison (state.selectedStepId ?? state.selectedStep?.id) and reuse it in SetSelectedStepAction, SetSelectedStepByIdAction, and SetStepsAction.

Suggested direction
 case 'SetSelectedStepAction': {
-  const isSameStep = action.selectedStep?.id === state.selectedStepId
+  const currentStepId = state.selectedStepId ?? state.selectedStep?.id
+  const isSameStep = action.selectedStep?.id === currentStepId
   return {
     ...state,
     selectedStepId: action.selectedStep?.id,
     selectedStep: action.selectedStep,
     selectedBlockId: action.selectedStep?.id,
     selectedBlock: action.selectedStep,
     activeCanvasDetailsDrawer: ActiveCanvasDetailsDrawer.Properties,
     activeContent: ActiveContent.Canvas,
     showCardTemplates: isSameStep ? state.showCardTemplates : true
   }
 }
// Reuse the same currentStepId comparison in SetSelectedStepByIdAction,
// and recompute showCardTemplates in SetStepsAction whenever selectedStep?.id changes.

Also applies to: 398-423

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@libs/journeys/ui/src/libs/EditorProvider/EditorProvider.tsx` around lines 257
- 289, Centralize the current-step comparison by computing a single
currentStepId = state.selectedStepId ?? state.selectedStep?.id at the top of the
reducer and use it in SetSelectedStepAction, SetSelectedStepByIdAction and
SetStepsAction to determine isSameStep; then recompute showCardTemplates based
on whether the new selected step id equals currentStepId (preserve
state.showCardTemplates only when it's the same step), and in SetStepsAction
ensure you recalc showCardTemplates when the selectedStep/selectedStepId might
be replaced (e.g., after delete/hydration) so stale false values aren't carried
forward; update references to selectedStepId/selectedStep in those cases
(SetSelectedStepAction, SetSelectedStepByIdAction, SetStepsAction) to use the
new comparison.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@libs/journeys/ui/src/libs/EditorProvider/EditorProvider.tsx`:
- Around line 257-289: Centralize the current-step comparison by computing a
single currentStepId = state.selectedStepId ?? state.selectedStep?.id at the top
of the reducer and use it in SetSelectedStepAction, SetSelectedStepByIdAction
and SetStepsAction to determine isSameStep; then recompute showCardTemplates
based on whether the new selected step id equals currentStepId (preserve
state.showCardTemplates only when it's the same step), and in SetStepsAction
ensure you recalc showCardTemplates when the selectedStep/selectedStepId might
be replaced (e.g., after delete/hydration) so stale false values aren't carried
forward; update references to selectedStepId/selectedStep in those cases
(SetSelectedStepAction, SetSelectedStepByIdAction, SetStepsAction) to use the
new comparison.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 42b30b0d-5422-49de-9c39-9f7ae36444ab

📥 Commits

Reviewing files that changed from the base of the PR and between 0724462 and 6d55404.

📒 Files selected for processing (2)
  • libs/journeys/ui/src/libs/EditorProvider/EditorProvider.spec.tsx
  • libs/journeys/ui/src/libs/EditorProvider/EditorProvider.tsx

@jianwei1 jianwei1 added this pull request to the merge queue Mar 31, 2026
Merged via the queue into main with commit ec44444 Mar 31, 2026
31 checks passed
@jianwei1 jianwei1 deleted the jianweichong/nes-1320-select-card-template-panel-fails-to-reopen-for-new-cards branch March 31, 2026 20:56
tanflem pushed a commit that referenced this pull request Apr 3, 2026
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Urim Chae <urim027@gmail.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
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.

3 participants