Add resource filter for the main page by VoigtS · Pull Request #225 · sapcc/LimesUI

VoigtS · 2026-04-09T18:48:40Z

As time went on, the amount of available resources and categories increased which made the UI navigation more difficult.
This PR adds a search that the user can utilize to filter for a specific resources.

github-actions · 2026-04-09T18:49:20Z

PR Preview Action v1.8.1
🚀 View preview at https://sapcc.github.io/LimesUI/pr-preview/pr-225/
Built to branch `gh-pages` at 2026-05-07 20:02 UTC. Preview will be ready when the GitHub Pages deployment is complete.

changeset-bot · 2026-04-09T18:51:07Z

🦋 Changeset detected

Latest commit: cd00075

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@sapcc/limes-ui	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

VoigtS · 2026-04-13T09:40:07Z

I'm moving this to a draft for now. The current implementation has a small issue that searching for translated category or resource names that contain empty spaces themselfes causes a searchTerm split.

This can be fixed by splitting for a different charackter like a "+" smybol. However, this leads to specialised syntax where the user needs to be informed about the valid syntax and I don't want to introduce more explanations to the UI.

Therefore I would like to rethink the implementation. I currently lean towards a greenhouse UI pill based filtering.
This might introduce presentational issues in combination with the tabnavigation but it might be worth it.

SuperSandro2000 · 2026-04-29T13:00:23Z

The labels can only be dismissed by clicking the X unlike Juno where the entire label can be clicked.

When switching between tabs like from Compute to PAYG, the filter is reset.

Filters that are already selected, can be selected in the dropdown again, than flicker the UI and are not greyed out or marked as already selected.

I just selected category compute and afterwards the dropdown is no longer working, unless I switch tabs or click somewhere else.

Filter should be written in the URL to allow reloading or linking.

VoigtS · 2026-04-29T13:05:51Z

The labels can only be dismissed by clicking the X unlike Juno where the entire label can be clicked.
-> I checked the Juno UI's (f.e. Doop). Pills can only be removed by clicking on the "X" as well.

When switching between tabs like from Compute to PAYG, the filter is reset.
-> This is by design. Each tab contains different filter settings (Categories and Resources) and should not bleed into another Area.

Filters that are already selected, can be selected in the dropdown again, than flicker the UI and are not greyed out or marked as already selected.
-> The same flickering happens in the greenhouse UI's. That's because the Box text has to be cleared when you select a filter.

I just selected category compute and afterwards the dropdown is no longer working, unless I switch tabs or click somewhere else.
-> That's a Juno combobox issue. I can't fix that.

Filter should be written in the URL to allow reloading or linking.
-> They are written into the URL.

wagnerd3 · 2026-05-04T13:29:02Z

+  // Filter categories based of search parameters
+  const [searchParams] = useSearchParams();
+  const searchTerm = searchParams.get(SEARCH_TERM) || "";
+  const categoryFilters = new Set(searchParams.get(FILTER_TYPES.category.key)?.split(",").filter(Boolean) || []);


When you have Sets which are created on every render, will the useMemo remember them? I guess the references won't be the same, so this won't work, right?

That's correct, I wrapped both filter sets into a memo

wagnerd3 · 2026-05-04T13:31:41Z

+    };
+  }, [categories, currentArea, overview, advancedView]);
+
+  function handleFilterChange(filter) {


If I was to write ?category= (empty), then I can produce URLs of category=,[more params], which I think would be illegal?

The test does not test verify that the URL does not get polluted like this, we should add an expectation for that.

That's correct, I modified the handlers to handle this case properly. I also included a test case.

wagnerd3 · 2026-05-04T13:33:48Z

-  // navigate to the selected area
+  // navigate to the selected area while also resetting the resource filter
  function onTabChange(selectedArea) {
    navigate(`/${selectedArea}`);


I think we should to { replace: false } here for safety?

This is the standard behavior for navigate, but I included it to make it explicit.

wagnerd3 · 2026-05-04T13:35:39Z

+  const nameLower = name.toLowerCase();
+  const nameTranslated = t(name).toLowerCase();
+
+  if (term.endsWith("$")) {


Should we document this somehow? o.O This is a bit counter intuitive for people who know Regex - I'm not sure if we should just allow regexes instead? so that it's clear what you can do with ^$?

The searchTerm matching supports regular expressions now instead of relying on a specialized syntax

wagnerd3 · 2026-05-04T13:37:52Z

+  const searchTerm = searchParams.get(SEARCH_TERM) || "";
+  const categoryFilters = new Set(searchParams.get(FILTER_TYPES.category.key)?.split(",").filter(Boolean) || []);
+  const resourceFilters = new Set(searchParams.get(FILTER_TYPES.resource.key)?.split(",").filter(Boolean) || []);
+  const filteredCategories = React.useMemo(() => {


Technically, the filteredCategories are across all tabs - which we don't need. It won't be noticed, as we later filter them down again. But with the current amount of entries, this won't be a major hit for performance, it's only that we could already filter it here, too.

This point is true and led me to extract the whole filter read logic into its own hook. The Overview component just fetches the result. The hook now provides prefiltered categories for the currentArea and the result set of filtered categories.

The first value set is used for the OverviewFilter, this prevents the duplication of the serviceType to category resolution that we handle within the hook.
The latter value is used to display the correct categories and resources depending of the filters a user sets. This reduces complexity within the renderArea function

wagnerd3 · 2026-05-04T13:43:19Z

-const DebouncedSearchInput = ({ onChange, initialValue = "", delay = 300, styling = "" }) => {
-  const [inputValue, setInputValue] = useState(initialValue);
-  const isFirstRender = useRef(true);
+const DebouncedSearchInput = ({ onChange, initialValue = "", delay = 300, styling = "", opts = {} }) => {


Does this fire an unnecessary render cycle 300ms after the actual cycle when I switch tabs?
AI hinted me to this, but I am not knowledgeable enough in React to judge it. useEffect calls setInputValue, which triggers useEffect on inputValue. Which then fires this onChange with inputValue after the debounce, right?

You bring up an interesting point. But the issue is a different one than described.
Normally it shouldn't be the case, because on tab change the initialValue does not change.
The actual issue that I noticed during this is that the debouncedInput component itself renders twice on the first tab change. All subsequent tab changes are good.

It appears that on the first render, the useEffect runs and queues a state update for the inputValue. When the tab changes, the parent rerenders the input field and the pending state update triggers.
The meaning for the the indication that onChange is called after 300ms: It does not, because the first effect call is catched by the firstRender check. React then knows that the internal state is an unchanged empty string and does not trigger a callback to the event loop.

A proper mitigation here is to only trigger this state sync useEffect if the callers value does indeed change from the previous one. I included this change and added a comment.

rename CCloud to SAP Cloud Infrastructure for the AppShell when not in embedded mode

users can search for categories and resources. search terms can be chained. <category> <category> displays the selected categories <category> <resource>$ will display the matching resource of the category. if a non-exact match is entered, like <category> <resource> and a non-exact matching ersource is matched in another category, that category will be displayed

todo: only show categories / resources depending on the view mode (advanced view) optimize rerendering, the implemented useEffect causes a unnecessary rerender on start remove hardcoded param values and clean up the components

disallow empty filters (e.g. category= or resource=) disallow duplicates that are provided via URL entries

Co-authored-by: Daniel Wagner <154379032+wagnerd3@users.noreply.github.com>

overview: fix categoryFilters and resourceFilters memoization

1. prefilter categories for the current area and the user filter settings The logic is extracted into its own hook useOverviewFilters 2. matchName: use regex matching for searchTerm inputs 3. handle malformed URL settings for URLs with prefiltered emptystring

make url history {replace: false} explicit

regex name matching: implement a fallback when invalid regexes are caught debouncedSearchInput: fix initialValue sync when the caller demands it The issue was that the searchInput compontent rendered twice during the first tab change. That's because react queued the setInputValue() call from the useEffect during the first render. Subsequent tab changes were ok, because the effect did not run again. The fix is that the intialValue gets compared with the previous one and only triggers a state sync if it's really necessary

add searchTerm clear await

VoigtS requested a review from a team as a code owner April 9, 2026 18:48

wagnerd3 requested changes Apr 10, 2026

View reviewed changes

Comment thread src/components/mainView/Overview.js Outdated

Comment thread src/components/mainView/Overview.js Outdated

wagnerd3 previously approved these changes Apr 10, 2026

View reviewed changes

VoigtS marked this pull request as draft April 13, 2026 08:44

VoigtS dismissed wagnerd3’s stale review via 9c770cb April 15, 2026 17:50

VoigtS force-pushed the resource_search branch from 9c770cb to dca46af Compare April 15, 2026 17:51

VoigtS marked this pull request as ready for review April 15, 2026 17:52

VoigtS force-pushed the resource_search branch from 9954b75 to c304c4f Compare April 16, 2026 14:10

VoigtS requested a review from wagnerd3 April 29, 2026 12:53

wagnerd3 requested changes May 4, 2026

View reviewed changes

VoigtS force-pushed the resource_search branch from 80d036a to cf2ee6d Compare May 7, 2026 14:07

VoigtS and others added 14 commits May 7, 2026 16:38

add input

a7f32ad

add resource filter functionality

07ca6b7

rename CCloud to SAP Cloud Infrastructure for the AppShell when not in embedded mode

add changeset

a1d27d7

add filter layout and filtering mechanic

e0df7ce

todo: only show categories / resources depending on the view mode (advanced view) optimize rerendering, the implemented useEffect causes a unnecessary rerender on start remove hardcoded param values and clean up the components

implementation cleanup

7369fc5

add test cases; run format

ed55b96

improve filter comment context

90be329

filtering fixes

0070579

disallow empty filters (e.g. category= or resource=) disallow duplicates that are provided via URL entries

Update src/components/mainView/Overview.js

abc0acd

Co-authored-by: Daniel Wagner <154379032+wagnerd3@users.noreply.github.com>

review fixes

943da8c

overview: fix categoryFilters and resourceFilters memoization

review fixes:

48f1b4b

1. prefilter categories for the current area and the user filter settings The logic is extracted into its own hook useOverviewFilters 2. matchName: use regex matching for searchTerm inputs 3. handle malformed URL settings for URLs with prefiltered emptystring

add URL cleanup in test setup

33e5b7c

review fix:

bc3db82

make url history {replace: false} explicit

Oveview: fix test file

0498cd6

VoigtS force-pushed the resource_search branch from 003bcb2 to 0498cd6 Compare May 7, 2026 14:43

VoigtS requested a review from wagnerd3 May 7, 2026 19:47

fix test flakiness:

cd00075

add searchTerm clear await

Conversation

VoigtS commented Apr 9, 2026

Uh oh!

github-actions Bot commented Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Built to branch gh-pages at 2026-05-07 20:02 UTC. Preview will be ready when the GitHub Pages deployment is complete.

Uh oh!

changeset-bot Bot commented Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Uh oh!

Uh oh!

VoigtS commented Apr 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

SuperSandro2000 commented Apr 29, 2026

Uh oh!

VoigtS commented Apr 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

VoigtS May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

VoigtS May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions Bot commented Apr 9, 2026 •

edited

Loading

Built to branch `gh-pages` at 2026-05-07 20:02 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

changeset-bot Bot commented Apr 9, 2026 •

edited

Loading

VoigtS commented Apr 13, 2026 •

edited

Loading

VoigtS commented Apr 29, 2026 •

edited

Loading

VoigtS May 7, 2026 •

edited

Loading

VoigtS May 7, 2026 •

edited

Loading