1146 sidebar state mismatch on layout switch by maxelkins · Pull Request #1323 · RaspberryPiFoundation/editor-ui

maxelkins · 2026-02-12T10:49:25Z

Summary

Adds selected sidebar option (tab) to Redux state to persist he selected sidebar tab ensuring that the user's sidebar selection is maintained across renders and can be programmatically controlled.

Adds selected option to Redux
Refactors sidebar behavior to utilise the new state
Adds related test

Detail

Added selectedSidebarTab to the Redux state in EditorSlice, along with new actions setSelectedSidebarTab and clearSelectedSidebarTab to manage the selected tab.
Updated Sidebar.jsx to use the Redux selectedSidebarTab as the source of truth for the currently selected sidebar option, falling back to default logic if not set, and dispatching Redux actions when the selection changes.
Modified SidebarBar.jsx to use the Redux selectedSidebarTab when collapsing/expanding the sidebar manually, ensuring previous option is shown when re-expanded.

Sidebar behavior improvements:

Ensured that sidebar selection is correctly initialized based on plugins with autoOpen, instructions, or defaulting to "file", and that Redux is updated accordingly.
Adjusted sidebar toggle logic to update Redux state on user interaction, and to prevent toggling on mobile for the same option.

Mobile sidebar integration:

Updated MobileProject.jsx so that opening the sidebar on first load sets the selectedSidebarTab in Redux to the first available option, improving consistency with desktop behavior.

Testing and validation:

Added tests in Sidebar.test.js to verify Redux state persistence, correct dispatching of actions, and priority of plugin autoOpen over stored state.
Updated mobile sidebar tests to expect both setSelectedSidebarTab and showSidebar actions when the sidebar is opened.

The open/closed state was relying on the selected option being set (open) or null (closed). This also avoids needing to keep component state in sync.

Copilot

Pull request overview

Adds Redux-backed persistence for the currently selected sidebar tab to prevent mismatches when switching layouts (e.g., mobile/desktop) and when reopening the sidebar.

Changes:

Introduces selectedSidebarTab in EditorSlice with actions to set/clear it.
Updates Sidebar / SidebarBar / MobileProject to read and write the selected tab via Redux.
Expands test coverage to assert the new sidebar tab persistence behavior.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/redux/EditorSlice.js	Adds `selectedSidebarTab` to editor state and exports related actions.
src/components/Mobile/MobileProject/MobileProject.jsx	Sets a default sidebar tab in Redux when opening the sidebar on mobile.
src/components/Mobile/MobileProject/MobileProject.test.js	Updates expectations to include the new `setSelectedSidebarTab` dispatch.
src/components/Menus/Sidebar/Sidebar.jsx	Resolves initial sidebar option from Redux and dispatches tab updates on toggle.
src/components/Menus/Sidebar/SidebarBar.jsx	Uses Redux-selected tab to decide what to expand when the sidebar is collapsed.
src/components/Menus/Sidebar/Sidebar.test.js	Adds tests for persistence behavior and plugin auto-open interaction.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-12T18:30:33Z

src/components/Menus/Sidebar/Sidebar.jsx

+  // Use stored option if it exists and is valid, otherwise use default logic
+  const resolveSelectedOption = () => {
+    if (
+      selectedSidebarTab &&
+      menuOptions.find((opt) => opt.name === selectedSidebarTab)
+    ) {
+      return selectedSidebarTab;
+    }
+    // Calculate default
+    const defaultOption = autoOpenPlugin
      ? autoOpenPlugin.name
      : instructionsEditable || instructionsSteps
      ? "instructions"
-      : "file",
-  );
+      : "file";
+    dispatch(setSelectedSidebarTab(defaultOption));
+    return defaultOption;
+  };
+
+  const [option, setOption] = useState(() => {
+    const selectedTab = resolveSelectedOption();
+    return selectedTab; // Start with sidebar open by default
+  });


resolveSelectedOption() dispatches setSelectedSidebarTab while computing the initial state for useState. Dispatching Redux actions during render/initialization is a side effect and can cause double-dispatches in React StrictMode or inconsistent state updates. Consider computing the initial option without dispatch, then syncing selectedSidebarTab in a useEffect after mount (and when dependencies like menuOptions/autoOpenPlugin change).

src/components/Menus/Sidebar/Sidebar.jsx

Copilot · 2026-02-12T18:30:34Z

src/components/Menus/Sidebar/SidebarBar.jsx

+    // Use stored option if available, otherwise fall back to default logic
+    const optionToExpand =
+      selectedSidebarTab || (instructions.length > 0 ? "instructions" : "file");


expandPopOut uses selectedSidebarTab without verifying it’s currently available in menuOptions. If available sidebar options change (e.g., images removed when image_list becomes empty), this can toggle to a non-existent panel and render an empty sidebar. Consider validating selectedSidebarTab against menuOptions (or falling back to the same default resolution logic as Sidebar) before calling toggleOption.

Suggested change

// Use stored option if available, otherwise fall back to default logic

const optionToExpand =

selectedSidebarTab || (instructions.length > 0 ? "instructions" : "file");

// Use stored option if available and valid, otherwise fall back to default logic

const validMenuOptionNames = menuOptions.map((menuOption) => menuOption.name);

const isStoredTabValid =

selectedSidebarTab && validMenuOptionNames.includes(selectedSidebarTab);

const optionToExpand = isStoredTabValid

? selectedSidebarTab

: instructions.length > 0

? "instructions"

: "file";

src/components/Menus/Sidebar/Sidebar.test.js

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

…//github.com/RaspberryPiFoundation/editor-ui into 1146-sidebar-state-mismatch-on-layout-switch

Copilot

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 5 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-12T22:52:32Z

src/components/Menus/Sidebar/Sidebar.test.js

+            payload: "images",
+          }),
+        ]),
+      );


These tests were changed to only assert that a setSelectedSidebarTab action was dispatched, but they no longer verify that the corresponding panel actually renders. This weakens coverage and could allow UI regressions to slip through; keep (or reintroduce) assertions that the expected panel content is present after the click.

Suggested change

);

);

// Verify that the images panel content is rendered after clicking the images icon

expect(screen.queryByText("image1.jpg")).toBeInTheDocument();

Copilot · 2026-02-12T22:52:32Z

src/components/Menus/Sidebar/Sidebar.test.js

+    test("Clicking instructions button a second time dispatches toggle action", () => {
      const collapseButton = screen.getByTitle("sidebar.collapse");
      fireEvent.click(collapseButton);
      const fileButton = screen.getByTitle("sidebar.file");
      fireEvent.click(fileButton);
      fireEvent.click(fileButton);
-      expect(
-        screen.queryByText("instructionsPanel.projectSteps"),
-      ).not.toBeInTheDocument();
+
+      const actions = store.getActions();
+      expect(actions.length).toBeGreaterThan(0); // Verify actions were dispatched


This assertion (actions.length > 0) doesn't validate the intended behavior (closing/toggling the pane) or even that the correct action(s) were dispatched. Strengthen the test to assert the expected UI state change and/or the specific action types/payloads triggered by the second click.

src/redux/EditorSlice.js

src/components/Menus/Sidebar/Sidebar.jsx

src/components/Mobile/MobileProject/MobileProject.jsx

maxelkins added 3 commits February 11, 2026 18:14

feat: store sidebar selected option in state

bceffc5

test: add tests for selected sidebar option state

c15b270

fix: ensure selected tab is preserved when sidebar is collpased/expanded

87b154b

maxelkins temporarily deployed to previews/1323/merge February 12, 2026 10:49 — with GitHub Actions Inactive

maxelkins added 2 commits February 12, 2026 18:26

refactor: seperate open and selected option concerns

741b8e2

The open/closed state was relying on the selected option being set (open) or null (closed). This also avoids needing to keep component state in sync.

Merge branch 'main' into 1146-sidebar-state-mismatch-on-layout-switch

ac8a45e

maxelkins temporarily deployed to previews/1323/merge February 12, 2026 18:26 — with GitHub Actions Inactive

maxelkins marked this pull request as ready for review February 12, 2026 18:26

Copilot AI review requested due to automatic review settings February 12, 2026 18:26

Copilot started reviewing on behalf of maxelkins February 12, 2026 18:27 View session

Copilot AI reviewed Feb 12, 2026

View reviewed changes

fix: incorrect state name in test

b95869f

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

maxelkins temporarily deployed to previews/1323/merge February 12, 2026 21:56 — with GitHub Actions Inactive

Merge branch '1146-sidebar-state-mismatch-on-layout-switch' of https:…

8fe394d

…//github.com/RaspberryPiFoundation/editor-ui into 1146-sidebar-state-mismatch-on-layout-switch

maxelkins temporarily deployed to previews/1323/merge February 12, 2026 21:56 — with GitHub Actions Inactive

maxelkins added 2 commits February 12, 2026 22:40

test: split sidebar tests to avoid issues with mock redux state

191d64b

fix: validate stored sidebar tab before expanding

e2cbd85

maxelkins temporarily deployed to previews/1323/merge February 12, 2026 22:49 — with GitHub Actions Inactive

maxelkins requested a review from Copilot February 12, 2026 22:49

Copilot started reviewing on behalf of maxelkins February 12, 2026 22:50 View session

Copilot AI reviewed Feb 12, 2026

View reviewed changes

refactor: remove clearSelectedSidebarTab action from EditorSlice

57e35b9

maxelkins deployed to previews/1323/merge February 12, 2026 23:00 — with GitHub Actions View deployment

maxelkins closed this Feb 12, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

1146 sidebar state mismatch on layout switch#1323

1146 sidebar state mismatch on layout switch#1323
maxelkins wants to merge 10 commits intomainfrom
1146-sidebar-state-mismatch-on-layout-switch

maxelkins commented Feb 12, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 12, 2026

Uh oh!

Uh oh!

Copilot AI Feb 12, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 12, 2026

Uh oh!

Copilot AI Feb 12, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

-    // Use stored option if available, otherwise fall back to default logic
-    const optionToExpand =
-      selectedSidebarTab || (instructions.length > 0 ? "instructions" : "file");
+    // Use stored option if available and valid, otherwise fall back to default logic
+    const validMenuOptionNames = menuOptions.map((menuOption) => menuOption.name);
+    const isStoredTabValid =
+      selectedSidebarTab && validMenuOptionNames.includes(selectedSidebarTab);
+    const optionToExpand = isStoredTabValid
+      ? selectedSidebarTab
+      : instructions.length > 0
+        ? "instructions"
+        : "file";

-      );
+      );
+      // Verify that the images panel content is rendered after clicking the images icon
+      expect(screen.queryByText("image1.jpg")).toBeInTheDocument();

Conversation

maxelkins commented Feb 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Detail

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 12, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Feb 12, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Feb 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 12, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

maxelkins commented Feb 12, 2026 •

edited

Loading