LPD-40036 Using clay:navigation-bar instead of clay:tabs for better p…

…erformance
rotty3000 · Dec 17, 2024 · b61612d · b61612d
1 parent fa6dc4c
commit b61612d
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 65 deletions.
diff --git a/...ray/frontend/taglib/sample/web/internal/display/context/FrontendSampleDisplayContext.java b/...ray/frontend/taglib/sample/web/internal/display/context/FrontendSampleDisplayContext.java
@@ -5,37 +5,54 @@
 
 package com.liferay.frontend.taglib.sample.web.internal.display.context;
 
-import com.liferay.frontend.taglib.clay.servlet.taglib.util.TabsItem;
-import com.liferay.frontend.taglib.clay.servlet.taglib.util.TabsItemListBuilder;
+import com.liferay.frontend.taglib.clay.servlet.taglib.util.NavigationItem;
+import com.liferay.frontend.taglib.clay.servlet.taglib.util.NavigationItemBuilder;
+import com.liferay.frontend.taglib.clay.servlet.taglib.util.NavigationItemList;
+import com.liferay.portal.kernel.util.ParamUtil;
+import com.liferay.portal.kernel.util.PortalUtil;
 
 import java.util.List;
 
+import javax.portlet.RenderRequest;
+import javax.portlet.RenderResponse;
+
 /**
  * @author Antonio Ortega
  */
 public class FrontendSampleDisplayContext {
 
-	public List<TabsItem> getTabsItems() {
-		if (_tabsItems != null) {
-			return _tabsItems;
-		}
-
-		_tabsItems = TabsItemListBuilder.add(
-			tabsItem -> {
-				tabsItem.setActive(true);
-				tabsItem.setLabel("Search Iterator");
-				tabsItem.setPanelId("search_iterator");
-			}
-		).add(
-			tabsItem -> {
-				tabsItem.setLabel("Search Paginator");
-				tabsItem.setPanelId("search_paginator");
-			}
-		).build();
-
-		return _tabsItems;
+	public FrontendSampleDisplayContext(
+		RenderRequest renderRequest, RenderResponse renderResponse) {
+
+		_renderRequest = renderRequest;
+		_renderResponse = renderResponse;
+	}
+
+	public List<NavigationItem> getNavigationItems() {
+		String navigation = ParamUtil.getString(
+			PortalUtil.getHttpServletRequest(_renderRequest), "navigation",
+			"search-iterator");
+
+		return NavigationItemList.of(
+			NavigationItemBuilder.setActive(
+				navigation.equals("search-iterator")
+			).setHref(
+				_renderResponse.createRenderURL(), "navigation",
+				"search-iterator"
+			).setLabel(
+				"Search Iterator"
+			).build(),
+			NavigationItemBuilder.setActive(
+				navigation.equals("search-paginator")
+			).setHref(
+				_renderResponse.createRenderURL(), "navigation",
+				"search-paginator"
+			).setLabel(
+				"Search Paginator"
+			).build());
 	}
 
-	private List<TabsItem> _tabsItems;
+	private final RenderRequest _renderRequest;
+	private final RenderResponse _renderResponse;
 
 }
diff --git a/...ain/java/com/liferay/frontend/taglib/sample/web/internal/portlet/TaglibSamplePortlet.java b/...ain/java/com/liferay/frontend/taglib/sample/web/internal/portlet/TaglibSamplePortlet.java
@@ -60,7 +60,7 @@ public void doDispatch(
 
 		renderRequest.setAttribute(
 			TaglibSamplePortletKeys.FRONTEND_SAMPLE_DISPLAY_CONTEXT,
-			new FrontendSampleDisplayContext());
+			new FrontendSampleDisplayContext(renderRequest, renderResponse));
 
 		renderRequest.setAttribute(
 			TaglibSamplePortletKeys.SEARCH_ITERATOR_DISPLAY_CONTEXT,

diff --git a/...frontend-taglib/frontend-taglib-sample-web/src/main/resources/META-INF/resources/init.jsp b/...frontend-taglib/frontend-taglib-sample-web/src/main/resources/META-INF/resources/init.jsp
@@ -5,19 +5,19 @@
  */
 --%>
 
+<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
+
 <%@ taglib uri="http://liferay.com/tld/clay" prefix="clay" %><%@
 taglib uri="http://liferay.com/tld/frontend" prefix="liferay-frontend" %><%@
 taglib uri="http://liferay.com/tld/theme" prefix="liferay-theme" %><%@
 taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %><%@
 taglib uri="http://liferay.com/tld/util" prefix="liferay-util" %>
 
-<%@ page import="com.liferay.frontend.taglib.clay.servlet.taglib.util.TabsItem" %><%@
-page import="com.liferay.frontend.taglib.sample.web.internal.constants.TaglibSamplePortletKeys" %><%@
+<%@ page import="com.liferay.frontend.taglib.sample.web.internal.constants.TaglibSamplePortletKeys" %><%@
 page import="com.liferay.frontend.taglib.sample.web.internal.display.context.FrontendSampleDisplayContext" %><%@
 page import="com.liferay.frontend.taglib.sample.web.internal.display.context.SearchIteratorDisplayContext" %><%@
-page import="com.liferay.frontend.taglib.sample.web.internal.display.context.SearchPaginatorDisplayContext" %>
-
-<%@ page import="java.util.List" %>
+page import="com.liferay.frontend.taglib.sample.web.internal.display.context.SearchPaginatorDisplayContext" %><%@
+page import="com.liferay.portal.kernel.util.ParamUtil" %>
 
 <%
 FrontendSampleDisplayContext frontendSampleDisplayContext = (FrontendSampleDisplayContext)request.getAttribute(TaglibSamplePortletKeys.FRONTEND_SAMPLE_DISPLAY_CONTEXT);

diff --git a/...frontend-taglib/frontend-taglib-sample-web/src/main/resources/META-INF/resources/view.jsp b/...frontend-taglib/frontend-taglib-sample-web/src/main/resources/META-INF/resources/view.jsp
@@ -8,23 +8,18 @@
 <%@ include file="/init.jsp" %>
 
 <%
-List<TabsItem> tabsItems = frontendSampleDisplayContext.getTabsItems();
+final String navigation = ParamUtil.getString(request, "navigation", "search-iterator");
 %>
 
-<clay:tabs
-	tabsItems="<%= tabsItems %>"
->
+<clay:navigation-bar
+	navigationItems="<%= frontendSampleDisplayContext.getNavigationItems() %>"
+/>
 
-	<%
-	for (TabsItem tabsItem : tabsItems) {
-	%>
-
-		<clay:tabs-panel>
-			<liferay-util:include page='<%= "/partials/" + tabsItem.get("panelId") + ".jsp" %>' servletContext="<%= application %>" />
-		</clay:tabs-panel>
-
-	<%
-	}
-	%>
-
-</clay:tabs>
+<c:choose>
+	<c:when test='<%= navigation.equals("search-iterator") %>'>
+		<liferay-util:include page="/partials/search_iterator.jsp" servletContext="<%= application %>" />
+	</c:when>
+	<c:otherwise>
+		<liferay-util:include page="/partials/search_paginator.jsp" servletContext="<%= application %>" />
+	</c:otherwise>
+</c:choose>
diff --git a/modules/test/playwright/tests/frontend-taglib/pages/TaglibSamplePage.ts b/modules/test/playwright/tests/frontend-taglib/pages/TaglibSamplePage.ts
@@ -14,19 +14,20 @@ import getWidgetDefinition from '../../layout-content-page-editor-web/utils/getW
 export class TaglibSamplePage {
 	readonly apiHelpers: ApiHelpers;
 	readonly page: Page;
-	readonly tablist: Locator;
+	readonly linkList: Locator;
 
 	constructor(page: Page) {
+		this.apiHelpers = new ApiHelpers(page);
 		this.page = page;
-		this.tablist = page.getByRole('tablist');
+		this.linkList = page.getByRole('link');
 	}
 
-	async selectTab(tabName: string) {
-		const tabHeading = this.tablist.getByText(tabName);
+	async selectLink(tabName: string) {
+		const linkHeading = this.linkList.getByText(tabName);
 
-		await expect(tabHeading).toBeInViewport();
+		await expect(linkHeading).toBeInViewport();
 
-		await tabHeading.click();
+		await linkHeading.click();
 	}
 
 	async setupTaglibSampleWidget({site}) {

diff --git a/modules/test/playwright/tests/frontend-taglib/searchIterator.spec.ts b/modules/test/playwright/tests/frontend-taglib/searchIterator.spec.ts
@@ -28,7 +28,7 @@ test(
 	'Search Iterator overlaps fixed header on scrolling',
 	{tag: '@LPD-40036'},
 	async ({apiHelpers, page, site, widgetPagePage}) => {
-		await test.step('Select Panel tab', async () => {
+		await test.step('Create a content site, add taglib sample widget and open permissions configuration', async () => {
 			const layout = await apiHelpers.jsonWebServicesLayout.addLayout({
 				groupId: site.id,
 				title: getRandomString(),

diff --git a/modules/test/playwright/tests/frontend-taglib/searchPaginator.spec.ts b/modules/test/playwright/tests/frontend-taglib/searchPaginator.spec.ts
@@ -5,14 +5,12 @@
 
 import {Locator, expect, mergeTests} from '@playwright/test';
 
-import {apiHelpersTest} from '../../fixtures/apiHelpersTest';
 import {featureFlagsTest} from '../../fixtures/featureFlagsTest';
 import {isolatedSiteTest} from '../../fixtures/isolatedSiteTest';
 import {loginTest} from '../../fixtures/loginTest';
 import {taglibSamplePageTest} from './fixtures/taglibSamplePageTest';
 
 export const test = mergeTests(
-	apiHelpersTest,
 	featureFlagsTest({
 		'LPS-178052': true,
 	}),
@@ -21,12 +19,12 @@ export const test = mergeTests(
 	taglibSamplePageTest
 );
 
-const tabName = 'Search Paginator';
+const linkName = 'Search Paginator';
 
 test(
 	'Search Paginator dropdown generates page links on scrolling',
 	{tag: '@LPD-37458'},
-	async ({apiHelpers, page, site, taglibSamplePage}) => {
+	async ({page, site, taglibSamplePage}) => {
 		let dropdownMenuHandler: Locator;
 
 		await test.step('Create a content site and the taglib sample widget', async () => {
@@ -35,24 +33,22 @@ test(
 			});
 		});
 
-		await test.step('Select Panel tab', async () => {
-			await taglibSamplePage.selectTab(tabName);
+		await test.step('Select Panel link', async () => {
+			await taglibSamplePage.selectLink(linkName);
 		});
 
 		await test.step('Open navigator dropdown', async () => {
-			const searchPaginator = page.getByLabel(tabName);
-
-			await searchPaginator
+			await page
 				.getByRole('button', {
 					name: 'Intermediate Pages Use TAB to',
 				})
 				.click();
 
 			await expect(
-				searchPaginator.getByRole('link', {exact: true, name: 'Page 4'})
+				page.getByRole('link', {exact: true, name: 'Page 4'})
 			).toBeVisible();
 
-			dropdownMenuHandler = await searchPaginator.getByText(
+			dropdownMenuHandler = await page.getByText(
 				'Page 4 Page 5 Page 6 Page 7'
 			);
 		});
@@ -62,7 +58,6 @@ test(
 				element.scrollTop = 600;
 			});
 			await page
-				.getByLabel('Search Paginator')
 				.getByRole('link', {exact: true, name: 'Page 20'})
 				.waitFor();
 
@@ -94,7 +89,6 @@ test(
 				element.scrollTop = 600;
 			});
 			await page
-				.getByLabel('Search Paginator')
 				.getByRole('link', {exact: true, name: 'Page 20'})
 				.waitFor();