From b61612d15537f4be0b68a60c48865a09c51283bc Mon Sep 17 00:00:00 2001 From: Antonio Ortega <60252917@liferay.com> Date: Wed, 13 Nov 2024 10:39:40 +0100 Subject: [PATCH] LPD-40036 Using clay:navigation-bar instead of clay:tabs for better performance --- .../context/FrontendSampleDisplayContext.java | 61 ++++++++++++------- .../internal/portlet/TaglibSamplePortlet.java | 2 +- .../resources/META-INF/resources/init.jsp | 10 +-- .../resources/META-INF/resources/view.jsp | 29 ++++----- .../frontend-taglib/pages/TaglibSamplePage.ts | 13 ++-- .../frontend-taglib/searchIterator.spec.ts | 2 +- .../frontend-taglib/searchPaginator.spec.ts | 20 +++--- 7 files changed, 72 insertions(+), 65 deletions(-) diff --git a/modules/apps/frontend-taglib/frontend-taglib-sample-web/src/main/java/com/liferay/frontend/taglib/sample/web/internal/display/context/FrontendSampleDisplayContext.java b/modules/apps/frontend-taglib/frontend-taglib-sample-web/src/main/java/com/liferay/frontend/taglib/sample/web/internal/display/context/FrontendSampleDisplayContext.java index d53cd29967dc78..2299b92eba3a46 100644 --- a/modules/apps/frontend-taglib/frontend-taglib-sample-web/src/main/java/com/liferay/frontend/taglib/sample/web/internal/display/context/FrontendSampleDisplayContext.java +++ b/modules/apps/frontend-taglib/frontend-taglib-sample-web/src/main/java/com/liferay/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 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 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 _tabsItems; + private final RenderRequest _renderRequest; + private final RenderResponse _renderResponse; } \ No newline at end of file diff --git a/modules/apps/frontend-taglib/frontend-taglib-sample-web/src/main/java/com/liferay/frontend/taglib/sample/web/internal/portlet/TaglibSamplePortlet.java b/modules/apps/frontend-taglib/frontend-taglib-sample-web/src/main/java/com/liferay/frontend/taglib/sample/web/internal/portlet/TaglibSamplePortlet.java index f2406f3bbb8df4..fd35a74c9379c8 100644 --- a/modules/apps/frontend-taglib/frontend-taglib-sample-web/src/main/java/com/liferay/frontend/taglib/sample/web/internal/portlet/TaglibSamplePortlet.java +++ b/modules/apps/frontend-taglib/frontend-taglib-sample-web/src/main/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/modules/apps/frontend-taglib/frontend-taglib-sample-web/src/main/resources/META-INF/resources/init.jsp b/modules/apps/frontend-taglib/frontend-taglib-sample-web/src/main/resources/META-INF/resources/init.jsp index d5d00f3e9aee69..9803d0bf568e17 100644 --- a/modules/apps/frontend-taglib/frontend-taglib-sample-web/src/main/resources/META-INF/resources/init.jsp +++ b/modules/apps/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/modules/apps/frontend-taglib/frontend-taglib-sample-web/src/main/resources/META-INF/resources/view.jsp b/modules/apps/frontend-taglib/frontend-taglib-sample-web/src/main/resources/META-INF/resources/view.jsp index 68bfa64b821aed..64d98eac880f31 100644 --- a/modules/apps/frontend-taglib/frontend-taglib-sample-web/src/main/resources/META-INF/resources/view.jsp +++ b/modules/apps/frontend-taglib/frontend-taglib-sample-web/src/main/resources/META-INF/resources/view.jsp @@ -8,23 +8,18 @@ <%@ include file="/init.jsp" %> <% -List tabsItems = frontendSampleDisplayContext.getTabsItems(); +final String navigation = ParamUtil.getString(request, "navigation", "search-iterator"); %> - + - <% - for (TabsItem tabsItem : tabsItems) { - %> - - - - - - <% - } - %> - - + + + + + + + + diff --git a/modules/test/playwright/tests/frontend-taglib/pages/TaglibSamplePage.ts b/modules/test/playwright/tests/frontend-taglib/pages/TaglibSamplePage.ts index ed5a874640aa97..66265ff44be582 100644 --- 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 index 57dde74f45054a..3eec213c2445c5 100644 --- 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 index 7e10ff8fcdd688..9aefb43d9b7155 100644 --- 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();