Create Cluster Details Card

[rawagner]

Create Cluster Details Card
Add loading state to Details item

[rawagner]

@lizsurette @andybraren

if any item in details card is too long, we want to set text-overflow to ellipsis and show a popup tooltip with full value, right ?

[atiratree]

The loading component still has blank-slate-pf style inside. I would suggest to make two component <Loading> and <InlineLoading>

[coveralls]

Pull Request Test Coverage Report for Build 1050

• 30 of 32 (93.75%) changed or added relevant lines in 3 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage decreased (-0.1%) to 86.769%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
src/components/ClusterOverview/Details/ClusterDetails.js	20	21	95.24%
src/components/Loading/Loading.js	3	4	75.0%

Totals
Change from base Build 1046:	-0.1%
Covered Lines:	2788
Relevant Lines:	3069

---

💛 - Coveralls

[rawagner]

@suomiy @mareklibra I have issues with cosmos fixtures as it seems Provider for some reason does not work correctly, it does not pass props and always returns undefined. Any ideas ? It also does not work on master, every component just renders loading which is due to defaultProps. https://kubevirt.io/web-ui-components/?component=p&fixture=ClusterOverview

[atiratree]

@suomiy @mareklibra I have issues with cosmos fixtures as it seems Provider for some reason does not work correctly, it does not pass props and always returns undefined. Any ideas ?

You have to wrap the fixture props in value:

const ClusterOverview = props => (
  <ClusterOverviewContext.Provider value={props}>
    <ClusterOverviewComponent />
  </ClusterOverviewContext.Provider>
);

[atiratree]

we probably do not want h3 text inside the InlineLoading. I do not think the text is necessary at all.

also, not sure if it would make sense to have a span instead of a div.

[atiratree]

or 2nd option: having the text inline

[rawagner]

text is now removed and I also made spinner size configurable

[rawagner]

@suomiy @mareklibra I have issues with cosmos fixtures as it seems Provider for some reason does not work correctly, it does not pass props and always returns undefined. Any ideas ?

You have to wrap the fixture props in value:

const ClusterOverview = props => (
  <ClusterOverviewContext.Provider value={props}>
    <ClusterOverviewComponent />
  </ClusterOverviewContext.Provider>
);

Thanks! I was expecting that it will be something small and fishy :)

[atiratree]

not sure if it is not published yet, but please use the InlineLoading component here

[mareklibra]

can we use more obvious syntax here, please?
Sort of

item = result[0]

[mareklibra]

const item = Array.isArray(result) ? result[0] : result

[rawagner]

@mareklibra updated