refactor(web): UI code pruning and clean up round #3

[dgdavid]

Apart from a bit of clean up, this PR is intended for start writing better core components that has been on hold for a few months already.

It's the case of core/Page component, which has been rewritten almost for scratch and now makes the weird core/CardField transitioning component obsolete.

Please, note that this set of changes continues with the migration to TypeScript for touched files and also introduce a PatternFly/Flex wrapper in order to ease the work with its responsive props. It's a bit complex because the (ab)use of advanced types but it does the job without introducing props unknown by PF/Flex. As said in the file comments, ideally

would be better to add these responsive props shortcuts direclty in PF/Flex to allow the consumer to just set the default value when not needed to change it depending on the breakpoint. But at this moment we're a bit short of time for creating and testing such an elaborated PR against upstream.

Reviewers: Look at it (core/Flex.tsx) as a PoC to see if we are willing to introduce it and similar ones for the other PatternFly components using responsive props.

---

Related to #1441 and #1494

[dgdavid]

Just in case of doubt, what this advanced type is doing is something like:

• Asking for all FlexProps and capturing these that somehow looks like a responsive one. I.e., capturing only the ones that are objects with a default optional prop. As said in the comment, don't know why "download" and "inlist" are captured although they does not look like mentioned object. So, just ignore them.
• If the prop was captured, uses an union of its own type and the type of the default key.
• If the prop was not captured, just ignore it in the new type by using never.

[dgdavid]

don't know why "download" and "inlist" are captured although they does not look like mentioned object.

The problem is that they are typed as any, see https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L2923-L3001 (interface FlexProps extends React.HTMLProps, https://github.com/patternfly/patternfly-react/blob/7b64b054146bfffde5bcddda317f2381a6ef540e/packages/react-core/src/layouts/Flex/Flex.tsx#L8)

Sadly (and kind of expected) any matches the above extends constraint. So, would be nice to have a way to ignore the properties of type any but for now it's ok ignoring these two by using the <Omit> helper instead of investing so much time on it. The wrapper works as expected and we could improve it later if finally get merged.

[imobachgs]

I like the new Page component :-)

[dgdavid]

I like the new Page component :-)

Thanks a lot! I think it's looking better than before, even though there is a lot of work to do yet. But yes, I'm happy with this new Page version, much simpler than before. Also, having the "section" thingy as part of it instead of the "CardField" component helps to write Agama pages IMHO.