feat(KFLUXUI-125): allow sorting pipeline runs by status and type

[marcin-michal]

Fixes

https://issues.redhat.com/browse/KFLUXUI-125

Description

Before, in the application's activity tab, it was only possible to sort pipeline runs by status, and in the snapshot's pipeline runs by type. Now, it's possible to sort by both of these attributes in either of the page, making it more consistent.

Type of change

• Feature
• Bugfix
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

Screen shots / Gifs for design review

How to test or reproduce?

Go to the activity tab for any application and view the pipeline runs. To view the snapshots pipeline runs, click on any pipeline run from the previous page, click on the snapshot and select the pipeline runs tab.

Browser conformance:

• Chrome
• Firefox
• Safari
• Edge

[codecov]

Codecov Report

Attention: Patch coverage is 93.81443% with 12 lines in your changes missing coverage. Please review.

Project coverage is 80.67%. Comparing base (8e8743f) to head (ad2274c).

Files with missing lines	Patch %	Lines
.../SnapshotDetails/tabs/SnapshotPipelineRunsList.tsx	84.84%	5 Missing ⚠️
...mmits/CommitDetails/tabs/CommitsPipelineRunTab.tsx	94.73%	2 Missing ⚠️
...ponents/Filter/utils/PipelineRunsFilterContext.tsx	92.85%	2 Missing ⚠️
...neRun/PipelineRunListView/PipelineRunsListView.tsx	90.90%	2 Missing ⚠️
...mponents/Filter/utils/pipelineruns-filter-utils.ts	96.29%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main      #68      +/-   ##
==========================================
+ Coverage   80.56%   80.67%   +0.11%     
==========================================
  Files         551      555       +4     
  Lines       21544    21609      +65     
  Branches     5383     5124     -259     
==========================================
+ Hits        17356    17434      +78     
+ Misses       4162     4150      -12     
+ Partials       26       25       -1     

Flag	Coverage Δ
unittests	80.67% <93.81%> (+0.11%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
src/components/Activity/PipelineRunsTab.tsx	90.00% <100.00%> (+0.25%)	⬆️
...rc/components/Filter/PipelineRunsFilterToolbar.tsx	100.00% <100.00%> (ø)
src/components/Filter/generic/MultiSelect.tsx	100.00% <100.00%> (ø)
...s/SnapshotDetails/tabs/SnapshotPipelineRunsTab.tsx	90.62% <100.00%> (+0.14%)	⬆️
src/routes/page-routes/commit.tsx	0.00% <ø> (ø)
src/utils/pipelinerun-utils.ts	65.85% <100.00%> (+2.69%)	⬆️
...mponents/Filter/utils/pipelineruns-filter-utils.ts	96.29% <96.29%> (ø)
...mmits/CommitDetails/tabs/CommitsPipelineRunTab.tsx	88.50% <94.73%> (+3.21%)	⬆️
...ponents/Filter/utils/PipelineRunsFilterContext.tsx	93.33% <92.85%> (ø)
...neRun/PipelineRunListView/PipelineRunsListView.tsx	88.37% <90.90%> (+7.84%)	⬆️
... and 1 more

... and 1 file with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 8e8743f...ad2274c. Read the comment docs.

🚀 New features to boost your workflow:

• ❄ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[marcin-michal]

/retest

[CryptoRodeo]

Overall LGTM. I still need to take a closer look and test the functionality live before final review.
For some reason I cannot connect to the staging environment (browser or Konflux UI proxy).

[StanislavJochman]

LGTM

[StanislavJochman]

LGTM

[sahil143]

Component Details page and Commits details page also has pipeline runs list page. WE will need to update the same filters their also.

[marcin-michal]

Component Details page and Commits details page also has pipeline runs list page. WE will need to update the same filters their also.

@sahil143 Thanks, did not notice pipeline runs were in the Commit details page as well. By Component Details page, do you mean the ComponentActivityTab component or a different one? If so, the filters are already there.

[marcin-michal]

@sahil143 please check if decomposition like this is okay, so I can work on unit test

[StanislavJochman]

LGTM

[JoaoPedroPP]

LGTM

UI is working as expected. Just left two comments regarding missing comment and the reason of one approach.

[JoaoPedroPP]

Why do we need this if statement with you are always returning acc?

[marcin-michal]

We are always returing acc but the difference is whether the key counter goes up or not. By returning early when filtered, it will stay the same

[JoaoPedroPP]

But you only modify acc when there is key inside validKeys, if not you return acc anyway.

[marcin-michal]

It is possible that we don't want to count some items, even if key is inside validKeys. For example, validKeys might be ["build", "release", "test"], pipeline run is of type "build", but we want to ignore pipeline runs with name "testing-pipeline".

[JoaoPedroPP]

LGTM