Enhance search and add filtering

[F-X64]

What has changed?

• Added filters for provider, region and architecture.
• Increased tsconfig target from ES5 to ES6 (introduction of "Set")
  Screencast from 2023-08-02 10-48-22.webm

Open questions
@KKoukiou @lucasgarfield I'm not a fan of the constant resizing that is happening once filters are selected.
Can we somehow add a default size to the table so we won't have this screen shake?
What can be improved in this implementation?

closes #119 #66

[KKoukiou]

@FKolwa You can fix the width of the columns easily by setting the percentage based width property on the Th component https://www.patternfly.org/components/table#cell-width-breakpoint-modifiers

[F-X64]

General TS question: Jest won't let my tests pass if I won't specify the entire array of possible inputs for functions that are derived from "onSelect" which in this case is "string | number | undefined". Is there a better way to declare this on a function that only accepts strings anyways?

[epapbak]

I tried a few things, couldn't make it work without respecting the mentioned inputs

[F-X64]

Thanks for giving it a try!

[schogges]

@FKolwa The only shorter version I could come up with would be using the lookup type (or indexed access type) MenuProps['onSelect']. This would still mean that the itemId can be string | number | undefined, but you wouldn't have to write the types all over again. This could be also applied to the ImageTableFilter onFilterSelect prop.

Suggested change

	const onFilterSelect = (_: React.MouseEvent | undefined, itemId: string | number | undefined) => {
	// import { MenuProps } from '@patternfly/react-core'
	// ...
	const onFilterSelect: MenuProps['onSelect'] = (_, itemId) => {

[F-X64]

@FKolwa You can fix the width of the columns easily by setting the percentage based width property on the Th component https://www.patternfly.org/components/table#cell-width-breakpoint-modifiers

Thanks! I guess there is no way to do the same thing with a predefined height, or is there? (table height, not row height)

[KKoukiou]

@FKolwa You can fix the width of the columns easily by setting the percentage based width property on the Th component https://www.patternfly.org/components/table#cell-width-breakpoint-modifiers

Thanks! I guess there is no way to do the same thing with a predefined height, or is there? (table height, not row height)

@FKolwa if you want to fix the maximum height check maybe this https://www.patternfly.org/components/table#sticky-columns-and-header

[F-X64]

I've added a proper "empty" view to the table in case the search doesn't return any valid results which makes the fixed table height mostly irrelevant. Is there anything left you would change?
@KKoukiou @lucasgarfield @epapbak

[F-X64]

@schogges Would you like to give me a review as well? ;)
Would be glad for any opinion I can get.

[epapbak]

LGTM

[F-X64]

Thanks @epapbak for your review. Let's get this in as this is blocking our further development. If someone detects some severe mistakes, please comment on this issue so we can create follow ups.

[schogges]

@schogges Would you like to give me a review as well? ;) Would be glad for any opinion I can get.

@FKolwa Sorry, I saw it too late, but I'm glad @epapbak unblocked you 🙂