Skip to content

Conversation

@markocikos
Copy link
Collaborator

References

What is the goal of this PR?

With this PR, FDS manages search and filters though global state. This enables JS code from any other parts of the page to interact with it. In PR, we are adding fragment samples that showcase this wiring.

See technical notes inline.

What does it look like?

vokoscreenNG-2025-12-03_12-42-09.mp4
screen

@liferay-continuous-integration
Copy link
Collaborator

CI is automatically triggering the following test suites:

  •     ci:test:sf

@liferay-continuous-integration
Copy link
Collaborator

Test suite sf has been triggered on http://test-1-37

@gemini-code-assist
Copy link

Summary of Changes

Hello @markocikos, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the Frontend Data Set (FDS) component by integrating a global state mechanism for managing its search and filter functionalities. This change enables seamless interaction between the FDS and other parts of the page, such as custom fragments, allowing for more dynamic and interconnected user interfaces. The inclusion of sample fragments provides clear examples of how to leverage this new capability, while underlying utility functions and dependencies have been updated to support the new architecture.

Highlights

  • Global State Management for FDS: Implemented global state management for Frontend Data Set (FDS) search and filters, allowing external JavaScript code to interact with and modify FDS criteria.
  • FDS Fragment Samples: Introduced new fragment samples ('Filters FDS Sample' and 'Search FDS Sample') to demonstrate how to wire and interact with the FDS global state.
  • Refactored isReducedMotion Utility: The isReducedMotion utility has been moved from frontend-js-web to accessibility-settings-state-web for better modularity and dependency management.
  • New deepClone Utility: A new deepClone utility function has been added to frontend-js-web to facilitate deep copying of objects, including function members by reference.
  • Playwright Test Updates: Extensive updates to Playwright tests for FDS, including new tests for global state integration with fragments and improved handling of page navigation and state synchronization.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request successfully implements search and filter management through a global state, which is a great improvement for modularity and interactivity. The addition of fragment samples effectively demonstrates the new capability. The refactoring of isReducedMotion and the introduction of deepClone are also valuable changes. I've found a few areas for improvement, mainly related to state management patterns and a potential bug in the deepClone utility. My comments provide suggestions to enhance robustness and simplify the code.

Record<KEYS, AccessibilityMenuSetting>
>('accessibility-menu', {} as any);

export {isReducedMotion} from './isReducedMotion';
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moving isReducedMotion to be able to place deepClone in frontend-js-web. Without the move, there would be a circular dependency between frontend-js-web and frontend-js-state-web, as frontend-js-state-web needs to use deepClone.

@liferay-continuous-integration
Copy link
Collaborator

✔️ ci:test:sf - 1 out of 1 jobs passed in 5 minutes

Ran com.liferay.source.formatter at released version 1.0.1554.
*The latest version has not been released.

Click here for more details.

Base Branch:

Branch Name: master
Branch GIT ID: 3902d652e9ece189f70ee97f785e6bbe1d3108f9

Sender Branch:

Branch Name: LPD-70790-2
Branch GIT ID: aec2b1827a2d49925405066a7fd8192a415cfcbb

1 out of 1 jobs PASSED
1 Successful Jobs:
For more details click here.

@liferay-continuous-integration
Copy link
Collaborator

const filtersGroups = [
{filters: ['date', 'color'], label: 'Group 1'},
{filters: ['invalid', 'size'], label: 'Group 2'},
{filters: ['clientExtension', 'invalid', 'size'], label: 'Group 2'},
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a fix of unrelated bug in master, test failures introduced with #5199. CX was not included in advanced sample.

This unfortunately means that our full CI tests are unreliable 😞


await page.getByRole('button', {name: 'Show Results'}).click();

await waitForFDS({page});
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A bunch of flakiness fixes.

</div>

<ActiveFiltersBar
<ResultsBar
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bar contains not only actions, but also search results.

disabled={disabled}
displayType="unstyled"
onClick={resetFiltersValue}
onClick={onClearResultsBar}
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixing separation of concerns, like here, was necessary in several places.

| IDateFilterState
| ISelectionFilterState;

interface IFDSState {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All new interfaces have State keyword. The idea is to separate component interfaces and state value (prop) interfaces, by a convention. We often mix those in code, leading to code that is hard to read, and TS gymnastics.

* @param sourceObj The object to clone.
* @returns A deep clone of the object.
*/
export default function deepClone(object: any) {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If needed, we can expand this with prevention of circular references. I don't really see the case when it is needed.

Comment on lines +760 to +769
if (
globalFDSStateInitialized ||
!filterClientExtensionsLoaded ||
!cellClientExtensionsLoaded
) {
return;
}
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't push initial state updates until CXs are loaded.

@markocikos
Copy link
Collaborator Author

ci:test:relevant

@liferay-continuous-integration
Copy link
Collaborator

Test suite relevant has been triggered on http://test-1-38

@markocikos
Copy link
Collaborator Author

ci:test:frontend-data-set

@liferay-continuous-integration
Copy link
Collaborator

Test suite frontend-data-set has been triggered on http://test-1-35

@markocikos
Copy link
Collaborator Author

ci:test:sf

@liferay-continuous-integration
Copy link
Collaborator

Test suite sf has been triggered on http://test-1-33

… prevents future bugs and keeps TS clean. Original global state value is still key as dependency for `useEffect`s.
@liferay-continuous-integration
Copy link
Collaborator

❌ ci:test:stable - 6 out of 12 jobs passed

❌ ci:test:relevant - 10 out of 21 jobs passed in 1 hour 44 minutes

Click here for more details.

Base Branch:

Branch Name: master
Branch GIT ID: 10523f8459d048a14619b81344c75208b37d6815

Upstream Comparison:

Branch GIT ID: f107373318f0a3024a15a3849c857a4d53259545
Jenkins Build URL: EE Development Acceptance (master) - 277 - 2025-11-21[04:37:40]

ci:test:stable - 6 out of 12 jobs PASSED
6 Successful Jobs:
    ci:test:relevant - 10 out of 21 jobs PASSED

    11 Failed Jobs:

    10 Successful Jobs:
      For more details click here.

      Failures unique to this pull:

      1. functional-upgrade-tomcat101-postgresql163_stable/0/3
        [beanshell] Executing commands: git clean -dfx
        [beanshell] 
        [beanshell] commit 3bf0e6559b8a1ea85c1caf5b8a2bf97c221214b3
        [beanshell] Author: Lawrence Lee <[email protected]>
        [beanshell] Date:   Wed Jul 18 11:36:51 2018 -0500
        [beanshell] 
        [beanshell]     Fix portlet test to match className
        [beanshell] 
        [beanshell] Executing commands: git branch | grep \*
        [beanshell] Executing commands: git for-each-ref refs/heads --format="%(refname)"
        [beanshell] Executing commands: git branch | grep \*
        [beanshell] Executing commands: git clean -dfx
        [beanshell] Executing commands: git clean -dfx
        [beanshell] Executing commands: git log -n 1
        [beanshell] Executing commands: git for-each-ref refs/heads --format="%(refname)"
        [beanshell] 
        [beanshell] commit 34b86ec50cedba4082671f7b14652afca36b49f1
        [beanshell] Author: Liferay Continuous Integration <[email protected]>
        [beanshell] Date:   Thu Dec 4 02:41:26 2025 -0800
        [beanshell] 
        [beanshell]     Commit cache
        [beanshell] 
        [beanshell] Executing commands: git log -n 1
        [beanshell] 
        [beanshell] commit eef8f68f6d4cb9607a6c7047ec3eae8eaebc2363
        [beanshell] Author: Liferay Continuous Integration <[email protected]>
        [beanshell] Date:   Tue Dec 2 18:47:20 2025 -0800
        [beanshell] 
        [beanshell]     subrepo:ignore Update 'modules/dxp/apps/osb/osb-asah/.gitrepo'.
        [beanshell] 
        [beanshell] Executing commands: git branch | grep \*
        [beanshell] Executing commands: git branch | grep \*
        [beanshell] Executing commands: git for-each-ref refs/heads --format="%(refname)"
        [beanshell] Executing commands: git for-each-ref refs/heads --format="%(refname)"
        [beanshell] Executing commands: git log -n 1
        [beanshell] Executing commands: git log -n 1
        [beanshell] 
        [beanshell] commit 3274ff03d23ada9bded2d522bbdc6cfedad1358f
        [beanshell] Author: shuyangzhou <[email protected]>
        [beanshell] Date:   Tue Dec 2 11:54:54 2025 -0800
        [beanshell] 
        [beanshell]     LPD-73164 Apply index cache to DLFileEntryImpl
        [beanshell] 
        [beanshell] 
        [beanshell] commit 3274ff03d23ada9bded2d522bbdc6cfedad1358f
        [beanshell] Author: shuyangzhou <[email protected]>
        [beanshell] Date:   Tue Dec 2 11:54:54 2025 -0800
        [beanshell] 
        [beanshell]     LPD-73164 Apply index cache to DLFileEntryImpl
        [beanshell] 
        [beanshell] ParallelExecutor 1 - tearDown completed 15 tasks in 3 seconds averaging 2 seconds per task. 
        [stopwatch] [stop.current.job: 9.179 sec]
        

        BUILD SUCCESSFUL
        Total time: 12 seconds

        • echo 'Exit shell.'
          Exit shell.
          Finished: FAILURE
      2. modules-unit/0/0
        [beanshell]
        [beanshell] Executing commands: git branch | grep *
        [beanshell] Executing commands: git log -n 1
        [beanshell] Executing commands: git for-each-ref refs/heads --format="%(refname)"
        [beanshell] Executing commands: git branch | grep *
        [beanshell]
        [beanshell] commit 1e7091413da9107d559bb569ad2b5f8cbfd312d1
        [beanshell] Author: Brian Chan <[email protected]>
        [beanshell] Date: Tue Dec 2 18:11:06 2025 -0800
        [beanshell]
        [beanshell] LPD-73038 SF
        [beanshell]
        [beanshell] Executing commands: git clean -dfx
        [beanshell] Executing commands: git log -n 1
        [beanshell] Executing commands: git for-each-ref refs/heads --format="%(refname)"
        [beanshell] Executing commands: git clean -dfx
        [beanshell]
        [beanshell] commit 34b86ec50cedba4082671f7b14652afca36b49f1
        [beanshell] Author: Liferay Continuous Integration <[email protected]>
        [beanshell] Date: Thu Dec 4 02:41:26 2025 -0800
        [beanshell]
        [beanshell] Commit cache
        [beanshell]
        [beanshell] Executing commands: git log -n 1
        [beanshell]
        [beanshell] commit 6aa4f9d65d9552cc491ef8d0300ef8dd057c7713
        [beanshell] Author: Brian Chan <[email protected]>
        [beanshell] Date: Wed Dec 3 09:42:28 2025 -0800
        [beanshell]
        [beanshell] LPD-70122 prep next
        [beanshell]
        [beanshell] Executing commands: git branch | grep *
        [beanshell] Executing commands: git branch | grep *
        [beanshell] Executing commands: git for-each-ref refs/heads --format="%(refname)"
        [beanshell] Executing commands: git for-each-ref refs/heads --format="%(refname)"
        [beanshell] Executing commands: git log -n 1
        [beanshell] Executing commands: git log -n 1
        [beanshell]
        [beanshell] commit 5bfea19a9d027b49bbf3276990259e1e01629b36
        [beanshell] Author: Marcela Cunha <[email protected]>
        [beanshell] Date: Thu Dec 4 15:37:59 2025 -0300
        [beanshell]
        [beanshell] LPD-43541 There is no EnableLocalization after FF LPD-32050 removal
        [beanshell]
        [beanshell]
        [beanshell] commit 5bfea19a9d027b49bbf3276990259e1e01629b36
        [beanshell] Author: Marcela Cunha <[email protected]>
        [beanshell] Date: Thu Dec 4 15:37:59 2025 -0300
        [beanshell]
        [beanshell] LPD-43541 There is no EnableLocalization after FF LPD-32050 removal
        [beanshell]
        [beanshell] ParallelExecutor 1 - tearDown completed 15 tasks in 3 seconds averaging 2 seconds per task.
        [stopwatch] [stop.current.job: 7.562 sec]
      3. BUILD SUCCESSFUL
        Total time: 9 seconds

      For upstream results, click here.

      Test bundle downloads:

      @liferay-continuous-integration
      Copy link
      Collaborator

      @markocikos
      Copy link
      Collaborator Author

      ci:test:stable

      @liferay-continuous-integration
      Copy link
      Collaborator

      Test suite stable has been triggered on http://test-1-37

      @liferay-continuous-integration
      Copy link
      Collaborator

      ❌ ci:test:stable - 25 out of 33 jobs passed in 1 hour 11 minutes

      Click here for more details.

      Base Branch:

      Branch Name: master
      Branch GIT ID: ffb154d7f2fd1d9740ece84e9aac5863c9e50cee

      ci:test:stable - 25 out of 33 jobs PASSED

      8 Failed Jobs:

      25 Successful Jobs:
        For more details click here.

        Failures unique to this pull:

        1. ...

        For upstream results, click here.

        Test bundle downloads:

        @liferay-continuous-integration
        Copy link
        Collaborator

        @markocikos
        Copy link
        Collaborator Author

        ci:test:relevant

        @liferay-continuous-integration
        Copy link
        Collaborator

        Test suite relevant has been triggered on http://test-1-39

        @liferay-continuous-integration
        Copy link
        Collaborator

        ❌ ci:test:stable - 7 out of 12 jobs passed

        ❌ ci:test:relevant - 12 out of 22 jobs passed in 2 hours 4 minutes

        Click here for more details.

        Base Branch:

        Branch Name: master
        Branch GIT ID: 098e3f6b6ac8fe2118aea5b168764437f132a628

        Upstream Comparison:

        Branch GIT ID: feff86712bf0eeba59f68873f5bd0eb989a50337
        Jenkins Build URL: EE Development Acceptance (master) - 282 - 2025-11-24[12:39:40]

        ci:test:stable - 7 out of 12 jobs PASSED
        7 Successful Jobs:
          ci:test:relevant - 12 out of 22 jobs PASSED

          10 Failed Jobs:

          12 Successful Jobs:
            For more details click here.

            Failures unique to this pull:

            1. ...

            For upstream results, click here.

            Test bundle downloads:

            @liferay-continuous-integration
            Copy link
            Collaborator

            Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

            Projects

            None yet

            Development

            Successfully merging this pull request may close these issues.

            2 participants