refactor(settings): replace modal with nested full-page route (#848)

* refactor(settings): replace modal with nested full-page route

Settings sections are now URL-addressable at /settings/:sectionId, rendered
nested inside EditorLayout alongside the stack sidebar. Browser back/forward
navigates between sections. Deep links (e.g. /settings/cloud-backup) load
the section directly on hard reload.

- Add react-router-dom v7; BrowserRouter wraps the full app tree
- New SettingsPage (scroll memory, Cmd+K palette), SettingsSidebar (NavLink
  active styling, back-arrow), SectionGate (visibility + tier lock card)
- Rename SectionId 'appstore' to 'app-store' so slug === SectionId
- Decouple SystemSection, DeveloperSection, AppStoreSection from modal-
  passed props; each fetches its own data on mount
- Replace onLabelsChanged prop chain with SENCHO_LABELS_CHANGED window event
- Drop onOpenSettings prop from UserProfileDropdown, HomeDashboard,
  ConfigurationStatus; each calls useNavigate directly
- Delete SettingsModal.tsx

* fix(settings): validate sectionId against registry before property write

Prevents prototype pollution (CodeQL js/remote-property-injection #243).
URL param sectionId is checked against SETTINGS_ITEMS before being used
as a property key on scrollPositionsRef.

* fix(settings): eliminate remote property injection via Map and registry-sourced key

Two-part fix for CodeQL js/remote-property-injection:

1. currentSection is now derived from SETTINGS_ITEMS.find().id (trusted
   registry data) instead of the raw sectionId URL param. The tainted
   string never flows into any property access.

2. scrollPositionsRef uses Map<SectionId, number> with .get()/.set()
   instead of a plain object. Map operations do not write to the prototype
   chain, removing the prototype pollution vector entirely.

* test(e2e): align settings selectors with full-page route

The settings refactor (4475afd) replaced the modal with a nested route.
The new sidebar renders sub-sections as NavLinks (role link, not button)
and adds a "Filter settings" button that collides with the loose
/settings/i regex used in mfa and nodes specs.

- Use exact 'Settings' match for the profile-dropdown menu row
- Switch the Nodes sub-section selector from button to link role
This commit is contained in:
Anso
2026-04-30 12:57:02 -04:00
committed by GitHub
parent 3c30c2befe
commit 9a1c043189
21 changed files with 834 additions and 624 deletions
@@ -2,12 +2,9 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Bell, Zap, Shield, HardDrive, ChevronRight } from 'lucide-react';
import { formatCount } from '@/lib/utils';
import { useConfigurationStatus } from './useConfigurationStatus';
import { useNavigate } from 'react-router-dom';
import type { SectionId } from '@/components/settings/types';
interface ConfigurationStatusProps {
onOpenSettings?: (section: SectionId) => void;
}
function StatusBadge({ value, locked, requiredTier }: {
value: string;
locked?: boolean;
@@ -94,10 +91,11 @@ function SkeletonRow() {
);
}
export function ConfigurationStatus({ onOpenSettings }: ConfigurationStatusProps) {
export function ConfigurationStatus() {
const navigate = useNavigate();
const { status, loading } = useConfigurationStatus();
const open = (section: SectionId) => () => onOpenSettings?.(section);
const open = (section: SectionId) => () => navigate(`/settings/${section}`);
if (loading) {
return (