feat(web): Tag filtering for generic lists #15196
Conversation
WalkthroughThe updates introduce a comprehensive filtering system across multiple components, allowing users to filter lists using tags. Major additions include new state management in Changes
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #15196 +/- ##
==========================================
- Coverage 37.17% 37.15% -0.03%
==========================================
Files 6474 6474
Lines 131745 131820 +75
Branches 37643 37686 +43
==========================================
- Hits 48974 48973 -1
- Misses 82771 82847 +76
Flags with carried forward coverage won't be shown. Click here to find out more.
Continue to review full report in Codecov by Sentry.
|
Datadog ReportAll test runs ✅ 12 Total Test Services: 0 Failed, 11 Passed Test ServicesThis report shows up to 10 services
🔻 Code Coverage Decreases vs Default Branch (4) |
RunarVestmann
force-pushed
the
feature/web-generic-list-tag-filtering
branch
from
b20e9f7
to
a1524f0
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Outside diff range and nitpick comments (2)
libs/cms/src/lib/cms.resolver.ts (2)
Line range hint
133-133: Incorrect use of decorators on method parameters.Decorators in TypeScript are not valid on method parameters unless explicitly enabled in the TypeScript configuration. This is a common source of errors and can lead to unexpected behavior. Here's a suggested fix:
- @CacheControl(defaultCache) + // Decorator removed due to invalid usage on method parameters.Please verify if the decorator is necessary and if so, consider enabling parameter decorators in your TypeScript configuration or use decorators correctly on class methods or properties.
Line range hint
145-145: Multiple instances of incorrect decorator usage on method parameters.Decorators are consistently misused across various methods in this file, applied incorrectly on method parameters. This misuse can lead to compile-time errors or unexpected behavior at runtime. Here's a general suggestion for all occurrences:
- @CacheControl(defaultCache) + // Decorator removed due to invalid usage on method parameters.Please review all instances where decorators are applied to method parameters, and either adjust the TypeScript configuration to allow this pattern or correct the decorator placement.
Also applies to: 153-153, 161-161, 169-169, 177-177, 185-185, 196-196, 204-204, 212-212, 220-220, 232-232, 243-243, 254-254, 265-265, 276-276, 288-288, 295-295, 303-303, 311-311
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (13)
- apps/web/components/GenericList/GenericList.tsx (9 hunks)
- apps/web/components/Organization/Slice/SliceMachine.tsx (1 hunks)
- apps/web/screens/queries/GenericList.ts (2 hunks)
- apps/web/screens/queries/fragments.ts (1 hunks)
- apps/web/utils/richText.tsx (1 hunks)
- libs/cms/src/lib/cms.elasticsearch.service.ts (2 hunks)
- libs/cms/src/lib/cms.module.ts (2 hunks)
- libs/cms/src/lib/cms.resolver.ts (1 hunks)
- libs/cms/src/lib/dto/getGenericListItems.input.ts (2 hunks)
- libs/cms/src/lib/generated/contentfulTypes.d.ts (2 hunks)
- libs/cms/src/lib/models/genericList.model.ts (3 hunks)
- libs/cms/src/lib/models/genericListItem.model.ts (3 hunks)
- libs/cms/src/lib/search/importers/genericListItem.service.ts (1 hunks)
Files not reviewed due to errors (1)
- apps/web/screens/queries/fragments.ts (no review received)
Additional context used
Path-based instructions (13)
apps/web/screens/queries/GenericList.ts (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
libs/cms/src/lib/dto/getGenericListItems.input.ts (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/cms/src/lib/models/genericList.model.ts (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/cms/src/lib/models/genericListItem.model.ts (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/cms/src/lib/search/importers/genericListItem.service.ts (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/cms/src/lib/cms.module.ts (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
apps/web/components/Organization/Slice/SliceMachine.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/web/utils/richText.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/web/screens/queries/fragments.ts (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/web/components/GenericList/GenericList.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
libs/cms/src/lib/cms.elasticsearch.service.ts (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/cms/src/lib/cms.resolver.ts (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/cms/src/lib/generated/contentfulTypes.d.ts (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
Biome
apps/web/components/GenericList/GenericList.tsx
[error] 446-460: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or resetlibs/cms/src/lib/cms.elasticsearch.service.ts
[error] 302-304: This else clause can be omitted because previous branches break early. (lint/style/noUselessElse)
Unsafe fix: Omit the else clause.
libs/cms/src/lib/cms.resolver.ts
[error] 133-133: Decorators are not valid here. (parse)
Decorators are only valid on class declarations, class expressions, and class methods.
You can enable parameter decorators by setting theunsafeParameterDecoratorsEnabledoption totruein your configuration file.
[error] 145-145: Decorators are not valid here. (parse)
Decorators are only valid on class declarations, class expressions, and class methods.
You can enable parameter decorators by setting theunsafeParameterDecoratorsEnabledoption totruein your configuration file.
[error] 153-153: Decorators are not valid here. (parse)
Decorators are only valid on class declarations, class expressions, and class methods.
You can enable parameter decorators by setting theunsafeParameterDecoratorsEnabledoption totruein your configuration file.
[error] 161-161: Decorators are not valid here. (parse)
Decorators are only valid on class declarations, class expressions, and class methods.
You can enable parameter decorators by setting theunsafeParameterDecoratorsEnabledoption totruein your configuration file.
[error] 169-169: Decorators are not valid here. (parse)
Decorators are only valid on class declarations, class expressions, and class methods.
You can enable parameter decorators by setting theunsafeParameterDecoratorsEnabledoption totruein your configuration file.
[error] 177-177: Decorators are not valid here. (parse)
Decorators are only valid on class declarations, class expressions, and class methods.
You can enable parameter decorators by setting theunsafeParameterDecoratorsEnabledoption totruein your configuration file.
[error] 185-185: Decorators are not valid here. (parse)
Decorators are only valid on class declarations, class expressions, and class methods.
You can enable parameter decorators by setting theunsafeParameterDecoratorsEnabledoption totruein your configuration file.
[error] 196-196: Decorators are not valid here. (parse)
Decorators are only valid on class declarations, class expressions, and class methods.
You can enable parameter decorators by setting theunsafeParameterDecoratorsEnabledoption totruein your configuration file.
[error] 204-204: Decorators are not valid here. (parse)
Decorators are only valid on class declarations, class expressions, and class methods.
You can enable parameter decorators by setting theunsafeParameterDecoratorsEnabledoption totruein your configuration file.
[error] 212-212: Decorators are not valid here. (parse)
Decorators are only valid on class declarations, class expressions, and class methods.
You can enable parameter decorators by setting theunsafeParameterDecoratorsEnabledoption totruein your configuration file.
[error] 220-220: Decorators are not valid here. (parse)
Decorators are only valid on class declarations, class expressions, and class methods.
You can enable parameter decorators by setting theunsafeParameterDecoratorsEnabledoption totruein your configuration file.
[error] 232-232: Decorators are not valid here. (parse)
Decorators are only valid on class declarations, class expressions, and class methods.
You can enable parameter decorators by setting theunsafeParameterDecoratorsEnabledoption totruein your configuration file.
[error] 243-243: Decorators are not valid here. (parse)
Decorators are only valid on class declarations, class expressions, and class methods.
You can enable parameter decorators by setting theunsafeParameterDecoratorsEnabledoption totruein your configuration file.
[error] 254-254: Decorators are not valid here. (parse)
Decorators are only valid on class declarations, class expressions, and class methods.
You can enable parameter decorators by setting theunsafeParameterDecoratorsEnabledoption totruein your configuration file.
[error] 265-265: Decorators are not valid here. (parse)
Decorators are only valid on class declarations, class expressions, and class methods.
You can enable parameter decorators by setting theunsafeParameterDecoratorsEnabledoption totruein your configuration file.
[error] 276-276: Decorators are not valid here. (parse)
Decorators are only valid on class declarations, class expressions, and class methods.
You can enable parameter decorators by setting theunsafeParameterDecoratorsEnabledoption totruein your configuration file.
[error] 288-288: Decorators are not valid here. (parse)
Decorators are only valid on class declarations, class expressions, and class methods.
You can enable parameter decorators by setting theunsafeParameterDecoratorsEnabledoption totruein your configuration file.
[error] 295-295: Decorators are not valid here. (parse)
Decorators are only valid on class declarations, class expressions, and class methods.
You can enable parameter decorators by setting theunsafeParameterDecoratorsEnabledoption totruein your configuration file.
[error] 303-303: Decorators are not valid here. (parse)
Decorators are only valid on class declarations, class expressions, and class methods.
You can enable parameter decorators by setting theunsafeParameterDecoratorsEnabledoption totruein your configuration file.
[error] 311-311: Decorators are not valid here. (parse)
Decorators are only valid on class declarations, class expressions, and class methods.
You can enable parameter decorators by setting theunsafeParameterDecoratorsEnabledoption totruein your configuration file.
Additional comments not posted (18)
apps/web/screens/queries/GenericList.ts (2)
11-11: Addedtagsto the input object for the GraphQL query.This addition aligns with the PR's objective to enable tag-based filtering for generic lists.
20-24: AddedfilterTagsblock to the items object in the GraphQL query.This will allow the front-end to display tags associated with each item, enhancing the filtering capabilities. Make sure the backend appropriately handles these new fields.
libs/cms/src/lib/dto/getGenericListItems.input.ts (2)
3-4: ImportedGraphQLJSONand related utilities.This is necessary for handling complex JSON types in GraphQL, such as the new
tagGroupsfield.
32-36: Added fieldstagsandtagGroupsto the DTO.These additions support the new functionality of tag-based filtering and grouping. Ensure that these fields are properly validated and sanitized in the backend to prevent security issues.
libs/cms/src/lib/models/genericList.model.ts (3)
5-5: ImportedGenericTagand related mapping function.This is essential for handling the new
filterTagsfield in theGenericListmodel.
27-28: AddedfilterTagsfield to theGenericListmodel.This field will store tags related to each list, which is crucial for the new filtering feature. Consider adding null checks or default values to handle cases where
filterTagsmight be undefined.
44-44: UpdatedmapGenericListfunction to handlefilterTags.Properly maps
filterTagsusing the imported mapping function, ensuring data consistency and structure.libs/cms/src/lib/models/genericListItem.model.ts (3)
6-6: ImportedGenericTagand related mapping function.This ensures that the
GenericListItemmodel can handle the newfilterTagsfield effectively.
31-32: AddedfilterTagsfield to theGenericListItemmodel.This addition is crucial for linking tags directly to individual list items, enhancing the granularity of the tagging system.
52-52: UpdatedmapGenericListItemfunction to handlefilterTags.This ensures that
filterTagsare correctly mapped and integrated into theGenericListItemmodel, maintaining data integrity and structure.libs/cms/src/lib/cms.module.ts (1)
Line range hint
1-1: Ensure that all necessary providers and services are correctly registered in the CmsModule.Verification successful
The verification script has successfully identified the usage of all the providers and services mentioned in the CmsModule. The relevant imports and usage are confirmed within the codebase.
CmsResolver,ArticleResolver,ElasticService,CmsContentfulService,CmsElasticsearchService,ContentfulRepository, andCmsHealthIndicatorare all correctly imported and utilized in various parts of the project.This confirms that the CmsModule is correctly configured with the necessary providers and services.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that all providers and services used in the CmsModule are correctly imported and utilized. # Test: Search for the usage of the providers and services within the project. rg --type typescript $'CmsResolver|ArticleResolver|ElasticService|CmsContentfulService|CmsElasticsearchService|ContentfulRepository|CmsHealthIndicator'Length of output: 187
Script:
#!/bin/bash # Description: Verify that all providers and services used in the CmsModule are correctly imported and utilized. # Test: Search for the usage of the providers and services within the project. rg --type ts $'CmsResolver|ArticleResolver|ElasticService|CmsContentfulService|CmsElasticsearchService|ContentfulRepository|CmsHealthIndicator'Length of output: 14898
apps/web/components/Organization/Slice/SliceMachine.tsx (1)
192-192: Ensure thefilterTagsprop is correctly utilized within theGenericListcomponent.apps/web/utils/richText.tsx (1)
196-196: Confirm that thefilterTagsprop is properly integrated and handled within theGenericListcomponent.apps/web/components/GenericList/GenericList.tsx (1)
1-6: The imports and utility functions are well-organized and relevant to the functionality of theGenericListcomponent. Good use of hooks and utilities fromnext-usequerystateand@apollo/clientfor state management and data fetching.Also applies to: 12-14, 22-22, 29-29, 36-40, 44-44
libs/cms/src/lib/cms.elasticsearch.service.ts (1)
Line range hint
457-524: The modifications to the Elasticsearch query logic ingetGenericListItemsto support filtering by tags and tag groups are correctly implemented. Ensure that the corresponding Elasticsearch mappings and settings are configured to support these queries, especially for thenestedandsimple_query_stringqueries used here.libs/cms/src/lib/generated/contentfulTypes.d.ts (3)
1552-1553: AddedfilterTagsfield toIGenericListFieldsinterface.This addition aligns with the PR's focus on enhancing tag-based filtering capabilities for lists. It looks well-implemented and should facilitate the new feature's requirements effectively.
1591-1593: Addedslugfield toIGenericListItemFieldsinterface.The addition of a
slugfield is a good practice for item identification and URL generation, which can enhance SEO and user navigation. This change is appropriate and well-defined.
1597-1598: AddedfilterTagsfield toIGenericListItemFieldsinterface.This addition supports the new functionality of tag-based filtering at the item level within generic lists. It's a necessary update to accommodate the feature described in the PR.
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range and nitpick comments (2)
apps/web/components/GenericList/GenericList.tsx (2)
Line range hint
159-240: The main component functionGenericListis well-structured and makes good use of React hooks for state and effect management. However, consider simplifying the complex state logic related tofilterCategoriesandparametersto improve maintainability.
Line range hint
470-484: Provide an explicit type prop for the button element to avoid unintended form submissions.- <button onClick={() => { + <button type="button" onClick={() => {This change prevents the button from submitting a form unintentionally, which is the default behavior when the type attribute is not specified.
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (1)
- apps/web/components/GenericList/GenericList.tsx (9 hunks)
Additional context used
Path-based instructions (1)
apps/web/components/GenericList/GenericList.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
Biome
apps/web/components/GenericList/GenericList.tsx
[error] 470-484: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
Additional comments not posted (2)
apps/web/components/GenericList/GenericList.tsx (2)
1-6: Ensure proper use of imports and check for any unused imports to keep the code clean and efficient.
152-152: ThefilterTagsprop is appropriately typed to accept an array ofGenericTagornull, which aligns well with TypeScript's strict type safety features.
Tag filtering for generic lists
What
Screenshots / Gifs
Screen.Recording.2024-06-18.at.16.00.51.mov
Checklist:
Summary by CodeRabbit
New Features
GenericListcomponent, including tag selection and search parameters.Bug Fixes
Refactor
GenericListcomponent.