Editor: Add a search filters summary component #1037

tkohr · 2024-11-13T11:58:16Z

Description

This PR introduces components to display currently selected search filter values in a zone below the search filters.

To-dos:

format date
format user
finish UI
tests

Screenshots

Quality Assurance Checklist

Commit history is devoid of any merge commits and readable to facilitate reviews
If new logic ⚙️ is introduced: unit tests were added
If new user stories 🤏 are introduced: E2E tests were added
If new UI components 🕹️ are introduced: corresponding stories in Storybook were created
If breaking changes 🪚 are introduced: add the breaking change label
If bugs 🐞 are fixed: add the backport <release branch> label
The documentation website 📚 has received the love it deserves

github-actions · 2024-11-13T11:59:40Z

Affected libs: api-repository, feature-catalog, feature-record, feature-router, feature-search, feature-map, feature-editor, feature-auth, common-domain, api-metadata-converter, ui-search, feature-dataviz, common-fixtures, util-shared, ui-elements, feature-notifications, ui-catalog, ui-widgets, ui-inputs, ui-layout, ui-map, ui-dataviz,
Affected apps: metadata-editor, datahub, demo, webcomponents, map-viewer, search, datafeeder, metadata-converter, data-platform,

🚀 Build and deploy storybook and demo on GitHub Pages
📦 Build and push affected docker images

github-actions · 2024-11-13T12:06:17Z

📷 Screenshots are here!

jahow

Thanks! I did put some comments on what's already there, I'm not 100% sure what is the best way, let me know if you have better ideas!

...tor/src/app/dashboard/search-filters-summary-item/search-filters-summary-item.component.html

...ditor/src/app/dashboard/search-filters-summary-item/search-filters-summary-item.component.ts

...tadata-editor/src/app/dashboard/search-filters-summary/search-filters-summary.component.html

...metadata-editor/src/app/dashboard/search-filters-summary/search-filters-summary.component.ts

libs/feature/search/src/lib/utils/service/fields.service.ts

tkohr · 2024-11-14T15:42:07Z

Thanks for the suggestions @jahow, I'll have a look how to refactor things this way.

jahow

Thank you, this looks really good! Just a few final comments but it works well in the app and I think the implementation makes a lot of sense now.

.../feature/search/src/lib/search-filters-summary-item/search-filters-summary-item.component.ts

libs/feature/search/src/lib/utils/service/fields.ts

jahow · 2024-11-22T11:26:56Z

libs/ui/inputs/src/lib/badge/badge.component.html

    "
  >
-    <mat-icon class="material-symbols-outlined leading-[1.1]">close</mat-icon>
+    <mat-icon class="material-symbols-outlined">close</mat-icon>


hmm, we should't have mat-icons anymore :)

Angi-Kinas

Thank you @tkohr, this will improve the usability of the filters quite a lot!

The code looks good to me.
While testing I had some behaviors that we might need to have a look at:

If we use user= as a query param, we get an empty badge
If we do the same with changeDate, we see an empty search filters summary component with the "reset" button

And as mentioned to you before, the filters are only working as expected on "Metadata records" but not on "My Records". I think this is more important than the issues mentioned above. When this is fixed, you can merge from my side 🚀

Angi-Kinas · 2024-12-03T14:37:41Z

libs/feature/router/src/lib/default/state/query-params.utils.ts

@@ -42,8 +44,8 @@ export function expandQueryParams(
      } else if (isDateUrl(value)) {
        const [start, end] = value.split('..')
        expanded[key] = {
-          ...(start && { start: new Date(start) }),
-          ...(end && { end: new Date(end) }),
+          ...(start && { start: new Date(`${start}T00:00:00`) }),


I guess T00:00:00 stands for the time... Is the time necessary here?

Yes, good point, the time is necessary here to prevent timezone issues. Actually, the URL does indeed not include the time as it is not needed, but as a Date in the app has a time it's set to midnight when it's read from the URL. Then, within the app, the date is handled in the local time of the browser and when it's written to the browser it's "cut" again. If we don't handle the time within the app, there are conflicts between the date chosen in the datepicker and the one encoded in the URL and sent to elasticsearch.

You can test it by switching the timezone of your browser. I discovered the issue since cypress is not running in the same timezone in the CI as my machine.

…s-summary-item

…s present

…omponent

…ar all

…method to simplify template and align badges

move one common formatUserInfo() to utils at the same time

…f no summary label defined

and use fieldname 'user' in component

treat dates in local timezone in app and without time in URL

…lters summary fix waiting for this.searchFacade.searchFilters$ via ngOnInit at the same time both is needed for use in myRecords.component

tkohr · 2024-12-05T13:42:00Z

Thank you @tkohr, this will improve the usability of the filters quite a lot!

The code looks good to me. While testing I had some behaviors that we might need to have a look at:

Thanks for the review and the testing @Angi-Kinas !

Good catches! I've added two commits to fix the errors you encountered. The first one (8302b76) allows to define filters that should be ignored by the summary component (like the active owner filter on the myRecords page, for example).

Both PRs are rebased again. Could you have a final look and approve the PRs if all is good for you?

CLAassistant · 2024-12-08T03:41:06Z

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

Angi-Kinas · 2024-12-09T12:24:33Z

@tkohr thank you for addressing my comments. The issue with the empty value for a filter seems to be fixed 👍

While testing the feature on the "My Records" tab, I encountered two other issues:

when filtering on the last updated date, no query param is added to the url
when resetting the filters, it also resets the owner filter of the "My Records" page

I think addressing these issues will take some more time and could be worked on in a separate ticket. It would take additional complexity out of this PR. What do you think?

tkohr · 2024-12-10T10:26:38Z

Thanks for your additional tests and pointing out the resetting bug @Angi-Kinas !

While testing the feature on the "My Records" tab, I encountered two other issues:
* when filtering on the last updated date, no query param is added to the url

This is actually expected, as the myRecords search state is not a router search state. Only one router search state is possible per app, which is bound to the allRecords within the editor.

* when resetting the filters, it also resets the `owner` filter of the "My Records" page

Good catch, I've added 01d9e22 to also ignore the filters from the FILTER_SUMMARY_IGNORE_LIST token when clearing filters.

Crossing fingers that everything works fine now 🤞

…LIST also when clearing filters

Angi-Kinas

Thanks @tkohr for the adaption and the hard work on this feature!
Now the filters work as expected :) 🚀

tkohr mentioned this pull request Nov 14, 2024

Editor: Add a date range search filter #1030

Merged

10 tasks

jahow added this to the 2.4.0 milestone Nov 14, 2024

jahow reviewed Nov 14, 2024

View reviewed changes

jahow reviewed Nov 22, 2024

View reviewed changes

tkohr force-pushed the me-date-filter branch from 2693db5 to f95e16d Compare November 26, 2024 08:28

tkohr force-pushed the me-search-filters-summary branch from 5ff9f51 to 2671c55 Compare November 26, 2024 09:23

tkohr marked this pull request as ready for review November 26, 2024 10:47

Angi-Kinas reviewed Dec 3, 2024

View reviewed changes

tkohr added 19 commits December 5, 2024 14:11

feat(search-filters): add search-filters-summary

b966143

refactor(search-filters): refactor summary component

57d9dea

refactor(search-filters-summary): rename component into search-filter…

33b2788

…s-summary-item

feat(search-filters): display summary and filter labels only if value…

a3757ea

…s present

feat(search-filters): introduce intermediate search-filters-summary.c…

e80aa11

…omponent

feat(search-filter-summary): allow to remove one filter value and cle…

b8a9090

…ar all

feat(search-filters-summary): adapt UI

4a4a20a

refactor(search-filters-summary-item): implement a getReadableValues …

527c253

…method to simplify template and align badges

refactor(search-filter-summary): move components for feature-search lib

4ee157c

fix(search-filters-summary): fix error when used in myRecords

a46f4e5

feat(search-filter-summary): format userInfo in summary badges

d3ef2ad

move one common formatUserInfo() to utils at the same time

feat(search-filter-summary): provide filter label as fallback label i…

11a2ed3

…f no summary label defined

refactor(fields): remove FieldType 'userInfo'

66f26a5

and use fieldname 'user' in component

test(search-filter-summary): add unit tests

85353ee

rebase(search-filters): clean after rebase

df492b9

test(search-filter-summary): add e2e tests

e3e2f71

fix(dateRange/e2e): handle different timezones

ebe1355

treat dates in local timezone in app and without time in URL

feat(search-filters-summary): allow providing filters to ignore in fi…

8302b76

…lters summary fix waiting for this.searchFacade.searchFilters$ via ngOnInit at the same time both is needed for use in myRecords.component

fix(fields): ignore empty values in getFiltersForValues

508983b

tkohr force-pushed the me-date-filter branch from f95e16d to e4db9ea Compare December 5, 2024 13:20

tkohr force-pushed the me-search-filters-summary branch from 2601dac to 508983b Compare December 5, 2024 13:21

chore(date-range-dropdown): replace left over mat-icon with ng-icon

5ee6f32

fix(search-filters-summary): ignore filters in FILTER_SUMMARY_IGNORE_…

75ca16b

…LIST also when clearing filters

tkohr force-pushed the me-search-filters-summary branch from 01d9e22 to 75ca16b Compare December 10, 2024 15:16

Angi-Kinas approved these changes Dec 11, 2024

View reviewed changes

tkohr merged commit 3d963c2 into me-date-filter Dec 11, 2024
13 checks passed

tkohr deleted the me-search-filters-summary branch December 11, 2024 08:46

tkohr mentioned this pull request Dec 13, 2024

Editor: Ignore search value in filter reset button #1065

Merged

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Editor: Add a search filters summary component #1037

Editor: Add a search filters summary component #1037

tkohr commented Nov 13, 2024 •

edited

Loading

github-actions bot commented Nov 13, 2024 •

edited

Loading

github-actions bot commented Nov 13, 2024 •

edited

Loading

jahow left a comment

tkohr commented Nov 14, 2024

jahow left a comment

jahow Nov 22, 2024

Angi-Kinas left a comment •

edited

Loading

Angi-Kinas Dec 3, 2024

tkohr Dec 5, 2024

tkohr commented Dec 5, 2024

CLAassistant commented Dec 8, 2024

Angi-Kinas commented Dec 9, 2024

tkohr commented Dec 10, 2024

Angi-Kinas left a comment

Editor: Add a search filters summary component #1037

Editor: Add a search filters summary component #1037

Conversation

tkohr commented Nov 13, 2024 • edited Loading

Description

Screenshots

Quality Assurance Checklist

github-actions bot commented Nov 13, 2024 • edited Loading

github-actions bot commented Nov 13, 2024 • edited Loading

jahow left a comment

Choose a reason for hiding this comment

tkohr commented Nov 14, 2024

jahow left a comment

Choose a reason for hiding this comment

jahow Nov 22, 2024

Choose a reason for hiding this comment

Angi-Kinas left a comment • edited Loading

Choose a reason for hiding this comment

Angi-Kinas Dec 3, 2024

Choose a reason for hiding this comment

tkohr Dec 5, 2024

Choose a reason for hiding this comment

tkohr commented Dec 5, 2024

CLAassistant commented Dec 8, 2024

Angi-Kinas commented Dec 9, 2024

tkohr commented Dec 10, 2024

Angi-Kinas left a comment

Choose a reason for hiding this comment

tkohr commented Nov 13, 2024 •

edited

Loading

github-actions bot commented Nov 13, 2024 •

edited

Loading

github-actions bot commented Nov 13, 2024 •

edited

Loading

Angi-Kinas left a comment •

edited

Loading