p13n: set up routing for Sea Pen Freeform

Set up new Sea Pen path for freeform and route to the path when
selecting the Sea Pen freeform tile in Wallpaper subpage.
Freeform page is currently showing both recent images and images elements. This will be split by adding tab selection in followed
up CL.

Bug: b/347323749
Test: browser_tests --gtest_filter="*SeaPen*"
Change-Id: I665b1aefe8bdadf0ab828b6f9513cc15989982bb
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5649112
Reviewed-by: Jason Thai <jasontt@chromium.org>
Commit-Queue: Thuong Phan <thuongphan@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1321061}

ash/webui/common/resources/sea_pen/sea_pen_router_element.html

@@ -95,7 +95,7 @@
 </style>
 <div id="topContainer">
   <slot></slot>
-  <template is="dom-if" if="[[shouldShowTextInputQuery_(relativePath_, queryParams_.seaPenTemplateId)]]" restamp>
+  <template is="dom-if" if="[[shouldShowSeaPenFreeform_(relativePath_)]]" restamp>
     <sea-pen-input-query></sea-pen-input-query>
   </template>
   <template is="dom-if" if="[[shouldShowTemplateQuery_(relativePath_, queryParams_.seaPenTemplateId)]]" restamp>
@@ -111,16 +111,22 @@
   <!-- Prevent left margin from collapsing on narrow window in RTL -->
   <div class="leftspacerbottom"></div>
   <div id="bottomInnerContainer">
-    <template is="dom-if" if="[[shouldShowSeaPenRoot_(relativePath_)]]" restamp>
+    <template is="dom-if" if="[[shouldShowSeaPenTemplates_(relativePath_)]]" restamp>
       <sea-pen-templates></sea-pen-templates>
       <sea-pen-recent-wallpapers
           on-sea-pen-recent-image-delete="onRecentImageDelete_">
       </sea-pen-recent-wallpapers>
     </template>
-    <template is="dom-if" if="[[shouldShowSeaPenImages_(relativePath_)]]" restamp>
+    <template is="dom-if" if="[[shouldShowSeaPenTemplateImages_(relativePath_)]]" restamp>
       <sea-pen-images template-id="[[getTemplateIdFromQueryParams_(queryParams_.seaPenTemplateId)]]">
       </sea-pen-images>
     </template>
+    <template is="dom-if" if="[[shouldShowSeaPenFreeform_(relativePath_)]]" restamp>
+      <sea-pen-recent-wallpapers
+          on-sea-pen-recent-image-delete="onRecentFreeformImageDelete_">
+      </sea-pen-recent-wallpapers>
+      <sea-pen-images template-id="Query"></sea-pen-images>
+    </template>
   </div>
   <template is="dom-if" if="[[showSeaPenIntroductionDialog_]]" restamp>
     <sea-pen-introduction-dialog

ash/webui/common/resources/sea_pen/sea_pen_router_element.ts

@@ -28,8 +28,9 @@ import {getTemplateIdFromString} from './sea_pen_utils.js';
 import {maybeDoPageTransition} from './transition.js';
 
 export enum SeaPenPaths {
-  ROOT = '',
+  TEMPLATES = '',
   RESULTS = '/results',
+  FREEFORM = '/freeform',
 }
 
 export interface SeaPenQueryParams {
@@ -103,6 +104,12 @@ export class SeaPenRouterElement extends WithSeaPenStore {
     // switching template; otherwise, states from the last query search will
     // remain in sea-pen-images element.
     cleanUpSwitchingTemplate(this.getStore());
+    // TODO(b/347323691): remove the QUERY case when Freeform is removed from
+    // template list.
+    if (templateId === QUERY) {
+      this.goToRoute(SeaPenPaths.FREEFORM);
+      return;
+    }
     this.goToRoute(
         SeaPenPaths.RESULTS, {seaPenTemplateId: templateId.toString()});
   }
@@ -152,36 +159,34 @@ export class SeaPenRouterElement extends WithSeaPenStore {
     if (!Object.values(SeaPenPaths).includes(relativePath as SeaPenPaths)) {
       // If arriving at an unknown path, go back to the root path.
       console.warn('SeaPenRouter unknown path', relativePath);
-      this.goToRoute(SeaPenPaths.ROOT);
+      this.goToRoute(SeaPenPaths.TEMPLATES);
     }
   }
 
-  private shouldShowTextInputQuery_(
-      relativePath: string|null, templateId: string|null): boolean {
-    return isSeaPenTextInputEnabled() && relativePath === SeaPenPaths.RESULTS &&
-        templateId === QUERY;
-  }
-
   private shouldShowTemplateQuery_(
       relativePath: string|null, templateId: string|null): boolean {
     return relativePath === SeaPenPaths.RESULTS &&
         (!!templateId && templateId !== 'Query');
   }
 
-  private shouldShowSeaPenRoot_(relativePath: string|null): boolean {
+  private shouldShowSeaPenTemplates_(relativePath: string|null): boolean {
     if (typeof relativePath !== 'string') {
       return false;
     }
-    return relativePath === SeaPenPaths.ROOT;
+    return relativePath === SeaPenPaths.TEMPLATES;
   }
 
-  private shouldShowSeaPenImages_(relativePath: string|null): boolean {
+  private shouldShowSeaPenTemplateImages_(relativePath: string|null): boolean {
     if (typeof relativePath !== 'string') {
       return false;
     }
     return relativePath === SeaPenPaths.RESULTS;
   }
 
+  private shouldShowSeaPenFreeform_(relativePath: string|null): boolean {
+    return isSeaPenTextInputEnabled() && relativePath === SeaPenPaths.FREEFORM;
+  }
+
   private onBottomContainerClicked_(): void {
     // close the chip option selection if it is open (or selected chip state is
     // set).
@@ -211,6 +216,10 @@ export class SeaPenRouterElement extends WithSeaPenStore {
     this.focusOnFirstTemplate_();
   }
 
+  private onRecentFreeformImageDelete_() {
+    // TODO(b/347328001): add the function implementation.
+  }
+
   private focusOnFirstTemplate_() {
     const seaPenTemplates =
         this.shadowRoot!.querySelector<HTMLElement>('sea-pen-templates');

ash/webui/personalization_app/resources/js/personalization_metrics_logger.ts

@@ -23,8 +23,9 @@ const enum MetricsPath {
   USER = 7,
   WALLPAPER_SEA_PEN_COLLECTION = 8,
   WALLPAPER_SEA_PEN_RESULTS = 9,
+  WALLPAPER_SEA_PEN_FREEFORM = 10,
 
-  MAX_VALUE = WALLPAPER_SEA_PEN_RESULTS,
+  MAX_VALUE = WALLPAPER_SEA_PEN_FREEFORM,
 }
 
 const enum HistogramName {
@@ -66,6 +67,8 @@ function toMetricsEnum(path: Paths) {
       return MetricsPath.WALLPAPER_SEA_PEN_COLLECTION;
     case Paths.SEA_PEN_RESULTS:
       return MetricsPath.WALLPAPER_SEA_PEN_RESULTS;
+    case Paths.SEA_PEN_FREEFORM:
+      return MetricsPath.WALLPAPER_SEA_PEN_FREEFORM;
   }
 }
 

ash/webui/personalization_app/resources/js/personalization_router_element.html

@@ -80,7 +80,7 @@
   </template>
   <template is="dom-if" if="[[shouldShowSeaPen_(path_)]]" restamp>
     <sea-pen-router base-path="[[seaPenBasePath_]]" class="always-show-top">
-      <template is="dom-if" if="[[shouldShowWallpaperSelected_(queryParams_.seaPenTemplateId)]]" restamp>
+      <template is="dom-if" if="[[shouldShowWallpaperSelected_(path_)]]" restamp>
         <wallpaper-selected id="wallpaperSelected"></wallpaper-selected>
       </template>
     </sea-pen-router>

ash/webui/personalization_app/resources/js/personalization_router_element.ts

@@ -34,6 +34,7 @@ export enum Paths {
   ROOT = '/',
   SEA_PEN_COLLECTION = '/wallpaper/sea-pen',
   SEA_PEN_RESULTS = '/wallpaper/sea-pen/results',
+  SEA_PEN_FREEFORM = '/wallpaper/sea-pen/freeform',
   USER = '/user',
 }
 
@@ -204,8 +205,8 @@ export class PersonalizationRouterElement extends PolymerElement {
     return isSeaPenAllowed() && isSeaPenPath(path);
   }
 
-  private shouldShowWallpaperSelected_(templateId: string|null): boolean {
-    return !templateId;
+  private shouldShowWallpaperSelected_(path: string|null): boolean {
+    return path === Paths.SEA_PEN_COLLECTION;
   }
 
   private shouldShowBreadcrumb_(path: string|null): boolean {

ash/webui/personalization_app/resources/js/wallpaper/wallpaper_collections_element.ts

@@ -745,7 +745,8 @@ export class WallpaperCollectionsElement extends WithPersonalizationStore {
             Paths.SEA_PEN_COLLECTION);
         return;
       case kSeaPenPromptingId:
-        // TODO(b/347323749): add the correct routing path.
+        PersonalizationRouterElement.instance().goToRoute(
+            Paths.SEA_PEN_FREEFORM);
         return;
       default:
         assert(

chrome/test/data/webui/chromeos/personalization_app/personalization_app_test.ts

@@ -753,7 +753,7 @@ suite('sea pen', () => {
               .trim();
 
       // Goes back to sea pen root page.
-      seaPenRouter.goToRoute(SeaPenPaths.ROOT);
+      seaPenRouter.goToRoute(SeaPenPaths.TEMPLATES);
 
       {
         // Verifies the image is set properly.

chrome/test/data/webui/chromeos/personalization_app/personalization_router_element_test.ts

@@ -228,12 +228,13 @@ suite('PersonalizationRouterElementTest', function() {
   });
 
   test('hides wallpaper selected on non root path sea pen', async () => {
-    loadTimeData.overrideValues({isSeaPenEnabled: true});
+    loadTimeData.overrideValues(
+        {isSeaPenEnabled: true, isSeaPenTextInputEnabled: true});
 
     const routerElement = initElement(PersonalizationRouterElement);
     await waitAfterNextRender(routerElement);
 
-    routerElement.goToRoute(Paths.SEA_PEN_COLLECTION, {
+    routerElement.goToRoute(Paths.SEA_PEN_RESULTS, {
       seaPenTemplateId: SeaPenTemplateId.kFlower.toString(),
     });
     await waitAfterNextRender(routerElement);
@@ -245,10 +246,17 @@ suite('PersonalizationRouterElementTest', function() {
         getComputedStyle(seaPenRouterElement).display, 'none',
         'sea-pen-router is shown');
 
-    const wallpaperSelected =
-        routerElement.shadowRoot!.getElementById('wallpaperSelected');
+    // No wallpaper-selected in Template results page.
     assertFalse(
-        !!wallpaperSelected, 'wallpaper-selected should not be displayed');
+        !!routerElement.shadowRoot!.getElementById('wallpaperSelected'),
+        'wallpaper-selected should not be displayed in template results page');
+
+    // No wallpaper-selected in Freeform subpage.
+    routerElement.goToRoute(Paths.SEA_PEN_FREEFORM);
+    await waitAfterNextRender(routerElement);
+    assertFalse(
+        !!routerElement.shadowRoot!.getElementById('wallpaperSelected'),
+        'wallpaper-selected should not be displayed in freeform page');
   });
 
   test('supports transition animation', async () => {

chrome/test/data/webui/chromeos/personalization_app/sea_pen_router_element_test.ts

@@ -49,7 +49,7 @@ suite('SeaPenRouterElementTest', function() {
 
   test('shows templates and recent elements', async () => {
     routerElement = initElement(SeaPenRouterElement, {basePath: '/base'});
-    routerElement.goToRoute(SeaPenPaths.ROOT);
+    routerElement.goToRoute(SeaPenPaths.TEMPLATES);
     await waitAfterNextRender(routerElement);
 
     assertTrue(
@@ -78,14 +78,13 @@ suite('SeaPenRouterElementTest', function() {
   });
 
   test(
-      'shows input query element if text input enabled and free form template is selected',
+      'shows freeform page with input query, recent images and images elements',
       async () => {
         loadTimeData.overrideValues({isSeaPenTextInputEnabled: true});
         routerElement = initElement(SeaPenRouterElement, {
           basePath: '/base',
         });
-        routerElement.goToRoute(
-            SeaPenPaths.RESULTS, {seaPenTemplateId: 'Query'});
+        routerElement.goToRoute(SeaPenPaths.FREEFORM);
         await waitAfterNextRender(routerElement);
 
         assertTrue(
@@ -93,15 +92,14 @@ suite('SeaPenRouterElementTest', function() {
                 SeaPenInputQueryElement.is),
             'input query element shown on root');
 
-        const seaPenImagesElement =
-            routerElement.shadowRoot!.querySelector(SeaPenImagesElement.is);
         assertTrue(
-            !!seaPenImagesElement, 'sea-pen-images shown on result page');
+            !!routerElement.shadowRoot!.querySelector(
+                SeaPenRecentWallpapersElement.is),
+            'sea-pen-recent-wallpapers shown on freeform page');
 
         assertTrue(
-            !!seaPenImagesElement.shadowRoot!.querySelector(
-                SeaPenZeroStateSvgElement.is),
-            'zero state svg is shown after selecting free form template from root');
+            !!routerElement.shadowRoot!.querySelector(SeaPenImagesElement.is),
+            'sea-pen-images shown on freeform page');
       });
 
   test(
@@ -110,7 +108,7 @@ suite('SeaPenRouterElementTest', function() {
         routerElement = initElement(SeaPenRouterElement, {
           basePath: '/base',
         });
-        routerElement.goToRoute(SeaPenPaths.ROOT);
+        routerElement.goToRoute(SeaPenPaths.TEMPLATES);
         await waitAfterNextRender(routerElement);
 
         const seaPenTemplatesElement =

chrome/test/data/webui/chromeos/vc_background_ui/vc_background_ui_test.ts

@@ -123,7 +123,7 @@ suite('VcBackgroundUITest', () => {
 
   test('verifies breadcrumbs when create button clicked', async () => {
     const seaPenRouter = getSeaPenRouter();
-    seaPenRouter.goToRoute(SeaPenPaths.ROOT);
+    seaPenRouter.goToRoute(SeaPenPaths.TEMPLATES);
     await waitAfterNextRender(seaPenRouter);
 
     const seaPenTemplateElements = getSeaPenTemplateElements();