chore: Handle visual mode only via URL query parameters

pages/app/app-context.tsx

@@ -14,26 +14,25 @@ interface AppUrlParams {
   visualRefresh: boolean;
   motionDisabled: boolean;
   appLayoutWidget: boolean;
-  mode?: Mode;
+  mode: Mode;
 }
 
 export interface AppContextType<T = unknown> {
-  mode: Mode;
   pageId?: string;
   urlParams: AppUrlParams & T;
   setUrlParams: (newParams: Partial<AppUrlParams & T>) => void;
   setMode: (newMode: Mode) => void;
 }
 
 const appContextDefaults: AppContextType = {
-  mode: Mode.Light,
   pageId: undefined,
   urlParams: {
     density: Density.Comfortable,
     direction: 'ltr',
     visualRefresh: THEME === 'default',
     motionDisabled: false,
     appLayoutWidget: false,
+    mode: Mode.Light,
   },
   setMode: () => {},
   setUrlParams: () => {},
@@ -74,34 +73,21 @@ function formatQuery(params: AppUrlParams) {
 export function AppContextProvider({ children }: { children: React.ReactNode }) {
   const history = useHistory();
   const location = useLocation();
-  const matchWithVisualMode = useRouteMatch<{ mode: Mode; pageId: string }>('/:mode(light|dark)/:pageId*');
-  const matchWithoutVisualMode = useRouteMatch<{ pageId: string }>('/:pageId*');
-  const pageId = (matchWithVisualMode ?? matchWithoutVisualMode)?.params.pageId ?? undefined;
+  const pageId = useRouteMatch<{ pageId: string }>('/:pageId*')?.params.pageId ?? undefined;
   const urlParams = parseQuery(location.search) as AppUrlParams;
-  const mode = matchWithVisualMode?.params.mode ?? urlParams.mode ?? Mode.Light;
 
   function setUrlParams(newParams: Partial<AppUrlParams>) {
     const formattedQuery = formatQuery({ ...urlParams, ...newParams });
-    if (matchWithVisualMode) {
-      const pathname = [matchWithVisualMode.params.mode, pageId].filter(segment => !!segment).join('/') + '/';
-      history.replace(`/${pathname}${formatQuery({ ...urlParams, ...newParams })}`);
-    } else {
-      const newUrl = pageId ? `/${pageId}${formattedQuery}` : formattedQuery;
-      history.replace(newUrl);
-    }
+    const newUrl = pageId ? `/${pageId}${formattedQuery}` : formattedQuery;
+    history.replace(newUrl);
   }
 
   function updateMode(newMode: Mode) {
-    if (matchWithVisualMode) {
-      const pathname = [newMode, pageId].filter(segment => !!segment).join('/') + '/';
-      history.replace('/' + pathname + location.search + location.hash);
-    } else {
-      setUrlParams({ mode: newMode });
-    }
+    setUrlParams({ mode: newMode });
   }
 
   return (
-    <AppContext.Provider value={{ mode, pageId, urlParams, setUrlParams: setUrlParams, setMode: updateMode }}>
+    <AppContext.Provider value={{ pageId, urlParams, setUrlParams: setUrlParams, setMode: updateMode }}>
       {children}
     </AppContext.Provider>
   );

pages/app/components/header.tsx

@@ -10,7 +10,7 @@ import ThemeSwitcher from './theme-switcher';
 import styles from './header.scss';
 
 export default function Header({ sticky }: { sticky?: boolean }) {
-  const { mode } = useContext(AppContext);
+  const { urlParams: mode } = useContext(AppContext);
   return (
     <>
       {/* #h selector for compatibility with global navigation */}

pages/app/components/theme-switcher.tsx

@@ -10,7 +10,7 @@ import SpaceBetween from '~components/space-between';
 import AppContext from '../app-context';
 
 export default function ThemeSwitcher() {
-  const { mode, urlParams, setUrlParams, setMode } = useContext(AppContext);
+  const { urlParams, setUrlParams, setMode } = useContext(AppContext);
 
   const vrSwitchProps: React.InputHTMLAttributes<HTMLInputElement> = {
     id: 'visual-refresh-toggle',
@@ -38,7 +38,7 @@ export default function ThemeSwitcher() {
         <input
           id="mode-toggle"
           type="checkbox"
-          checked={mode === 'dark'}
+          checked={urlParams.mode === 'dark'}
           onChange={event => setMode(event.target.checked ? Mode.Dark : Mode.Light)}
         />
         Dark mode

pages/app/index.tsx

@@ -57,9 +57,8 @@ function isAppLayoutPage(pageId?: string) {
 
 function App() {
   const {
-    mode,
     pageId,
-    urlParams: { density, motionDisabled },
+    urlParams: { density, mode, motionDisabled },
   } = useContext(AppContext);
 
   // AppLayout already contains <main>

src/__a11y__/a11y-app-layout-toolbar.test.ts

@@ -16,7 +16,7 @@ describe('A11y checks for app layout toolbar', () => {
   findAllPages()
     .filter(page => page.startsWith('app-layout') && !EXCLUDED_PAGES.includes(page))
     .forEach(inputUrl => {
-      const url = `#/light/${inputUrl}?${getUrlParams('refresh-toolbar')}`;
+      const url = `#/${inputUrl}?${getUrlParams('refresh-toolbar')}`;
       test(
         `${url}`,
         useBrowser(async browser => {

src/__integ__/screenshot-area.test.ts

@@ -21,7 +21,7 @@ test(
   'shows warning message when the page height exceeds the limit and hides when it does not',
   useBrowser(async browser => {
     const page = new ScreenshotAreaPage(browser);
-    await browser.url('#light/utils/screenshot-area-warning');
+    await browser.url('#utils/screenshot-area-warning');
     await page.waitForVisible('.screenshot-area');
     await expect(page.isWarningDisplayed()).resolves.toBe(false);
     await page.clickAddItems();

src/__integ__/themes.test.ts

@@ -37,17 +37,17 @@ class CustomPropertyPageObject extends BasePageObject {
 
 describe('CSS Custom Properties', () => {
   test.each<[string, string, string?]>([
-    ['light', `#light/?visualRefresh=false`],
-    ['dark', '#dark/?visualRefresh=false'],
-    ['compact', '#light/?visualRefresh=false&density=compact'],
+    ['light', '#/?visualRefresh=false&mode=light'],
+    ['dark', '#/?visualRefresh=false&mode=dark'],
+    ['compact', '#/?visualRefresh=false&density=compact'],
     // use motionDisabled to force design tokens into expected values
-    ['reduced-motion', '#light/?visualRefresh=false&motionDisabled=true'],
-    ['visual-refresh', '#light/?visualRefresh=true'],
-    ['visual-refresh-dark', '#dark/?visualRefresh=true'],
-    ['visual-refresh-compact', '#light/?visualRefresh=true&density=compact'],
+    ['reduced-motion', '#/?visualRefresh=false&motionDisabled=true'],
+    ['visual-refresh', '#/?visualRefresh=true'],
+    ['visual-refresh-dark', '#/?visualRefresh=true&mode=dark'],
+    ['visual-refresh-compact', '#/?visualRefresh=true&density=compact'],
     [
       'visual-refresh-content-header',
-      '#/light/visual-contexts/content-header/?visualRefresh=true',
+      'visual-contexts/content-header/?visualRefresh=true&mode=light',
       '.awsui-context-content-header',
     ],
   ])('match previous snapshot for mode %p', (_, url, selector = 'body') =>

src/__integ__/toggles.test.ts

@@ -18,7 +18,7 @@ Object.keys(wrappers).forEach(componentName => {
     function setupTest(testFn: (page: BasePageObject) => Promise<void>) {
       return useBrowser(async browser => {
         const page = new BasePageObject(browser);
-        await browser.url(`#light/${componentName}/focus-test`);
+        await browser.url(`#${componentName}/focus-test`);
         await testFn(page);
       });
     }

src/alert/__integ__/persistence-integ.test.ts

@@ -31,7 +31,7 @@ const setupTest = (
     if (params.dismissedKeys !== undefined) {
       urlParams.set('dismissedKeys', params.dismissedKeys);
     }
-    const url = `#/light/alert/persistence${urlParams.toString() ? '?' + urlParams.toString() : ''}`;
+    const url = `#/alert/persistence${urlParams.toString() ? '?' + urlParams.toString() : ''}`;
     await browser.url(url);
     await page.waitForVisible(wrapper.findAlert().toSelector());
     await testFn(page);

src/alert/__integ__/runtime-content.test.ts

@@ -15,7 +15,7 @@ class RuntimeContentPage extends BasePageObject {
 function setupTest(testFn: (page: RuntimeContentPage) => Promise<void>) {
   return useBrowser(async browser => {
     const page = new RuntimeContentPage(browser);
-    await browser.url('#/light/alert/runtime-content/?autofocus=true');
+    await browser.url('#/alert/runtime-content/?autofocus=true');
     await page.waitForVisible('.screenshot-area');
     await testFn(page);
   });

src/anchor-navigation/__integ__/anchor-navigation.test.ts

@@ -19,7 +19,7 @@ describe('AnchorNavigation', () => {
   function setupTest(testFn: (page: AnchorNavigationPage) => Promise<void>) {
     return useBrowser(async browser => {
       const page = new AnchorNavigationPage(browser);
-      await browser.url('#/light/anchor-navigation/basic');
+      await browser.url('#/anchor-navigation/basic');
       await page.waitForVisible(wrapper.toSelector());
       await testFn(page);
     });

src/annotation-context/__integ__/annotation-scroll.test.ts

@@ -11,7 +11,7 @@ const annotationWrapper = wrapper.findAnnotation();
 function setupTest(testFn: (page: BasePageObject) => Promise<void>) {
   return useBrowser(async browser => {
     const page = new BasePageObject(browser);
-    await browser.url('#/light/annotation-context/annotation-scroll');
+    await browser.url('#/annotation-context/annotation-scroll');
     await testFn(page);
   });
 }

src/annotation-context/__integ__/switching-pages.test.ts

@@ -12,7 +12,7 @@ const annotationWrapper = wrapper.findAnnotation();
 test(
   'should open a next hotspot on a next page after loading',
   useBrowser(async browser => {
-    await browser.url('#/light/annotation-context/with-switching-pages');
+    await browser.url('#/annotation-context/with-switching-pages');
     const page = new BasePageObject(browser);
     await page.click(annotationWrapper.findNextButton().toSelector());
     await page.click('[data-testid="next-page"]');

src/app-layout-toolbar/__integ__/multi-app-layout-toolbar-navigation.test.ts

@@ -17,7 +17,7 @@ describe('Multi page layout navigation', () => {
   const setupTest = (testFn: (page: PageObject) => Promise<void>) =>
     useBrowser(async browser => {
       const page = new PageObject(browser);
-      await browser.url('#/light/app-layout-toolbar/multi-layout-with-hidden-instances');
+      await browser.url('#/app-layout-toolbar/multi-layout-with-hidden-instances');
       await testFn(page);
     });
 

src/app-layout/__integ__/ai-drawer.test.ts

@@ -31,7 +31,7 @@ describe('Visual refresh toolbar only', () => {
       const page = new PageObject(browser);
 
       await browser.url(
-        `#/light/app-layout/sidecar-demo?${getUrlParams('refresh-toolbar', {
+        `#/app-layout/sidecar-demo?${getUrlParams('refresh-toolbar', {
           hasDrawers: 'false',
           hasTools: 'true',
           splitPanelPosition: 'side',

src/app-layout/__integ__/app-layout-drawers.test.ts

@@ -109,7 +109,7 @@
       visualRefresh: `${theme !== 'classic'}`,
       appLayoutToolbar: `${theme === 'refresh-toolbar'}`,
     }).toString();
-    await browser.url(`#/light/app-layout/with-drawers?${params}`);
+    await browser.url(`#/app-layout/with-drawers?${params}`);
     await page.waitForVisible(wrapper.findContentRegion().toSelector());
     await testFn(page);
   });
@@ -224,7 +224,7 @@
           );
 
           await page.openThirdDrawer(theme === 'refresh-toolbar');
           //todo: resolve split panel positioning change on large drawer openeing
           const expectedSplitPanelSelector =
             theme === 'refresh-toolbar'
               ? wrapper.findSplitPanel().findOpenPanelSide().toSelector()

src/app-layout/__integ__/app-layout-focus-delegation.test.ts

@@ -35,7 +35,7 @@
         : {}
     );
     await page.setWindowSize(mobile ? viewports.mobile : viewports.desktop);
-    await browser.url(`#/light/app-layout/${pageName}?${params}`);
+    await browser.url(`#/app-layout/${pageName}?${params}`);
     await page.waitForVisible(wrapper.findContentRegion().toSelector());
     await testFn(page);
   });
@@ -189,7 +189,7 @@
         )
       );
 
       //todo - investigate why resize observer throwing error only on mobile in tests
       testIf(!mobile)(
         'does not focus split panel when opening programatically',
         setupTest(

src/app-layout/__integ__/app-layout-refresh-content-width.test.ts

@@ -43,7 +43,7 @@ describe.each(['refresh', 'refresh-toolbar'] as Theme[])('%s', theme => {
     return useBrowser(async browser => {
       const page = new AppLayoutRefreshNotoficationsPage(browser);
       await page.setWindowSize({ ...viewports.desktop, width: viewportWidth });
-      await browser.url(`#/light/app-layout/refresh-content-width/?${getUrlParams(theme)}`);
+      await browser.url(`#/app-layout/refresh-content-width/?${getUrlParams(theme)}`);
       await page.waitForVisible(wrapper.findContentRegion().toSelector());
       await testFn(page);
     });

src/app-layout/__integ__/app-layout-refresh-edge-controls.test.ts

@@ -21,7 +21,7 @@ describe.each(['refresh', 'refresh-toolbar'] as Theme[])('%s', theme => {
     return useBrowser(async browser => {
       const page = new AppLayoutRefreshEdgeControlsPage(browser);
       await page.setWindowSize(viewports.desktop);
-      await browser.url(`#/light/app-layout/disable-paddings-edge-controls/?${getUrlParams(theme)}`);
+      await browser.url(`#/app-layout/disable-paddings-edge-controls/?${getUrlParams(theme)}`);
       await page.waitForVisible(wrapper.findContentRegion().toSelector());
       await testFn(page);
     });

src/app-layout/__integ__/app-layout-refresh-notifications.test.ts

@@ -49,7 +49,7 @@ describe.each(['refresh', 'refresh-toolbar'] as Theme[])('%s', theme => {
       const page = new AppLayoutRefreshNotoficationsPage(browser);
       await page.setWindowSize(viewport);
       await browser.url(
-        `#/light/app-layout/notifications-refresh/?${getUrlParams(theme)}${removeNotifications ? `&removeNotifications` : ''}`
+        `#/app-layout/notifications-refresh/?${getUrlParams(theme)}${removeNotifications ? `&removeNotifications` : ''}`
       );
       await page.waitForVisible(wrapper.findContentRegion().toSelector());
       await testFn(page);

src/app-layout/__integ__/app-layout-split-panel-forced-position.test.ts

@@ -27,7 +27,7 @@ const setupTest = (
     const page = new AppLayoutSplitViewPage(browser);
     await page.setWindowSize({ ...viewports.desktop, width: initialViewportWidth });
 
-    const url = `#/light/app-layout/with-split-panel-and-body-scroll?${params.toString()}`;
+    const url = `#/app-layout/with-split-panel-and-body-scroll?${params.toString()}`;
 
     await browser.url(url);
     const content = createWrapper().findAppLayout().findContentRegion();

src/app-layout/__integ__/app-layout-split-panel.test.ts

@@ -15,10 +15,7 @@
 const wrapper = createWrapper().findAppLayout();
 
 describe.each(['classic', 'refresh', 'refresh-toolbar'] as const)('%s', theme => {
-  function setupTest(
-    testFn: (page: AppLayoutSplitViewPage) => Promise<void>,
-    url = '#/light/app-layout/with-split-panel'
-  ) {
+  function setupTest(testFn: (page: AppLayoutSplitViewPage) => Promise<void>, url = '#/app-layout/with-split-panel') {
     return useBrowser(async browser => {
       const page = new AppLayoutSplitViewPage(browser);
       await page.setWindowSize(viewports.desktop);
@@ -70,7 +67,7 @@
     setupTest(async page => {
       await page.click('button=Add widget');
       await expect(page.isFocused(wrapper.findSplitPanel().findSlider().toSelector())).resolves.toBe(true);
-    }, '#/light/app-layout/dashboard-content-type')
+    }, '#/app-layout/dashboard-content-type')
   );
 
   (theme === 'classic' ? test : test.skip).each([
@@ -101,7 +98,7 @@
     useBrowser(async browser => {
       const page = new AppLayoutSplitViewPage(browser);
       await page.setWindowSize(viewports.desktop);
-      await browser.url(`#/light/app-layout/with-split-panel?visualRefresh=false&splitPanelPosition=side`);
+      await browser.url(`#/app-layout/with-split-panel?visualRefresh=false&splitPanelPosition=side`);
       await page.waitForVisible(wrapper.findContentRegion().toSelector());
       await page.openPanel();
       await expect(page.getPanelPosition()).resolves.toEqual('side');
@@ -170,8 +167,8 @@
   );
 
   [
-    { url: '#/light/app-layout/disable-paddings-with-split-panel', name: 'paddings disabled' },
-    { url: '#/light/app-layout/with-split-panel', name: 'paddings enabled' },
+    { url: '#/app-layout/disable-paddings-with-split-panel', name: 'paddings disabled' },
+    { url: '#/app-layout/with-split-panel', name: 'paddings enabled' },
   ].forEach(({ url, name }) => {
     test(
       `should not allow resize split panel beyond min and max limits (side position) (${name})`,
@@ -222,7 +219,7 @@
       const { height: originalHeight } = await page.getSplitPanelSize();
       await page.setWindowSize({ ...viewports.desktop, height: windowHeight });
       const { height: newHeight } = await page.getSplitPanelSize();
       expect(newHeight).toBeLessThan(originalHeight);
       expect(newHeight).toBeLessThan(windowHeight);
     })
   );
@@ -292,7 +289,7 @@
         await expect(page.getContentOffsetBottom(theme)).resolves.toEqual(windowHeight / 2 + splitPanelPadding + 'px');
         await page.switchPosition('side');
         await expect(page.getContentOffsetBottom(theme)).resolves.toEqual(splitPanelPadding + 'px');
-      }, '#/light/app-layout/with-full-page-table-and-split-panel')
+      }, '#/app-layout/with-full-page-table-and-split-panel')
     );
 
     test(
@@ -303,7 +300,7 @@
         await page.switchPosition('side');
         await page.switchPosition('bottom');
         await expect(page.getContentOffsetBottom(theme)).resolves.toEqual(windowHeight / 2 + splitPanelPadding + 'px');
-      }, '#/light/app-layout/with-full-page-table-and-split-panel')
+      }, '#/app-layout/with-full-page-table-and-split-panel')
     );
 
     test(
@@ -317,7 +314,7 @@
           page.isDisplayedInViewport(wrapper.findSplitPanel().findOpenPanelBottom().toSelector())
         ).resolves.toBe(true);
         await expect(page.isClickable(scrollbarSelector)).resolves.toBe(true);
-      }, '#/light/app-layout/with-sticky-table-and-split-panel')
+      }, '#/app-layout/with-sticky-table-and-split-panel')
     );
   });
 });