feat(coral) - View environments: Add tables rendering list of environments

[mathieu-anderson]

About this change - What it does

Add table and search field for each environment tab

Screen.Recording.2023-09-13.at.15.28.01.mov

Notes

• There is a double call to getPaginatedEnvironmentsForTopicAndAcl on first load of the page, because we call it in EnvironmentsTabs to get the amount of env as badges. However, the call in EnvironmentsTabs has refetchOnMount: false, which will prevent another call until a full page reload. I am not sure how to avoid this.
• The search field takes the full width of the table, which is a little disgraceful. Maybe a subsequent change to TableLayout could address this issue (setting a max width to the filters?)

Follow up

The Status values do not currently have the timestamp value, as this PR #1747 has not been merged yet. I started working on a follow up PR.

Resolves: #1707

[programmiri]

There is a double call to getPaginatedEnvironmentsForTopicAndAcl on first load of the page, because we call it in EnvironmentsTabs to get the amount of env as badges. However, the call in EnvironmentsTabs has refetchOnMount: false, which will prevent another call until a full page reload. I am not sure how to avoid this.

Ah, that's tricky 🤔

the query in e.g. KafkaEnvironment (["getPaginatedEnvironmentsForTopicAndAcl", currentPage, search]) is a different query as in EnvironmentTabs (["getPaginatedEnvironmentsForTopicAndAcl", 1]) which is why when KafkaEnvironment it will not use the getPaginatedEnvironmentsForTopicAndAcl from the cache.

I... I think this could now be the case where we should think about using a custom hook for this? So it's always the same query (with currentPage and search etc) and we can make use of the cache properly.

[mathieu-anderson]

I think a query hook would be great for this use case. I'm going to try it out ^^

[mathieu-anderson]

@programmiri I pushed the changes we talked about:

• refreshing environment status
• abstracting data fetching in a query hook so that there will not be a double call when fetching the badge numbers and the table data

Screen.Recording.2023-09-14.at.12.09.46.mov

[programmiri]

🎉 for the custom hook, solved the problem nicely!