Skip to content

Commit

Permalink
Switch flavor/cluster panel (LinkCard) to PatternFly (#918)
Browse files Browse the repository at this point in the history
  • Loading branch information
gavin-stackrox authored Jul 25, 2023
1 parent 99b483a commit 108a943
Show file tree
Hide file tree
Showing 4 changed files with 86 additions and 33 deletions.
24 changes: 17 additions & 7 deletions ui/src/components/LinkCard.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
import React, { ReactElement, ReactNode } from 'react';
import { Link } from 'react-router-dom';
import {
Panel,
PanelMain,
PanelMainBody,
PanelHeader,
Divider,
PanelFooter,
} from '@patternfly/react-core';

type Props = {
to: string;
Expand All @@ -17,13 +25,15 @@ export default function LinkCard({
className = '',
}: Props): ReactElement {
return (
<Link
className={`flex flex-col items-start h-32 w-64 p-2 border-2 border-base-400 shadow rounded font-600 bg-base-100 hover:bg-base-200 text-base-600 hover:text-base-700 ${className}`}
to={to}
>
<h2 className="w-full pb-1 text-2xl border-b-2 border-base-500 mb-4">{header}</h2>
{children}
{!!footer && <div className="mt-auto">{footer}</div>}
<Link className={className} to={to}>
<Panel isScrollable variant="raised">
<PanelHeader>{header}</PanelHeader>
<Divider />
<PanelMain>
<PanelMainBody>{children}</PanelMainBody>
</PanelMain>
{!!footer && <PanelFooter>{footer}</PanelFooter>}
</Panel>
</Link>
);
}
35 changes: 24 additions & 11 deletions ui/src/containers/HomePage/LaunchPageSection.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
/* eslint-disable jsx-a11y/label-has-associated-control */
import React, { useState, ReactElement } from 'react';
import { AxiosPromise } from 'axios';
import { Gallery, GalleryItem } from '@patternfly/react-core';

import { V1FlavorListResponse, FlavorServiceApi } from 'generated/client';
import useApiQuery from 'client/useApiQuery';
Expand Down Expand Up @@ -34,15 +35,16 @@ function FlavorCards({ showAllFlavors = false }: FlavorCardsProps): ReactElement
const cards = data.Flavors.map((flavor) => {
assertDefined(flavor.ID); // swagger definitions are too permitting
return (
<LinkCard
key={flavor.ID}
to={`launch/${flavor.ID}`}
header={flavor.Name || 'Unnamed'}
footer={<span className="capitalize">{flavor.Availability || 'Alpha'}</span>}
className="m-2"
>
<p className="text-lg">{flavor.Description}</p>
</LinkCard>
<GalleryItem>
<LinkCard
key={flavor.ID}
to={`launch/${flavor.ID}`}
header={flavor.Name || 'Unnamed'}
footer={<span className="capitalize">{flavor.Availability || 'Alpha'}</span>}
>
<p>{flavor.Description}</p>
</LinkCard>
</GalleryItem>
);
});
return <>{cards}</>;
Expand Down Expand Up @@ -79,9 +81,20 @@ export default function LaunchPageSection(): ReactElement {
);
return (
<PageSection header={header}>
<div className="flex flex-wrap -m-2">
<Gallery
hasGutter
minWidths={{
default: '100%',
md: '100px',
xl: '300px',
}}
maxWidths={{
md: '200px',
xl: '1fr',
}}
>
<FlavorCards showAllFlavors={showAllFlavors} />
</div>
</Gallery>
</PageSection>
);
}
Expand Down
42 changes: 27 additions & 15 deletions ui/src/containers/HomePage/MyClustersPageSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
import React, { useState, ReactElement } from 'react';
import { AxiosPromise } from 'axios';
import moment from 'moment';
import { Gallery, GalleryItem } from '@patternfly/react-core';

import { V1ClusterListResponse, ClusterServiceApi } from 'generated/client';
import useApiQuery from 'client/useApiQuery';
Expand Down Expand Up @@ -67,19 +68,19 @@ function ClusterCards({ showAllClusters = false }: ClusterCardsProps): ReactElem

const extraCardClass = showAllClusters && cluster.Owner === user?.Email ? 'bg-base-200' : '';
return (
<LinkCard
key={cluster.ID}
to={`cluster/${cluster.ID}`}
header={cluster.ID || 'No ID'}
footer={cluster.Status && <Lifespan cluster={cluster} />}
className={`m-2 h-43 ${extraCardClass}`}
>
{cluster.Description && (
<span className="mb-2 text-lg">Description: {cluster.Description}</span>
)}
<span className="text-lg">Status: {cluster.Status || 'FAILED'}</span>
<span className="text-lg">Flavor: {cluster.Flavor || 'Unknown'}</span>
</LinkCard>
<GalleryItem>
<LinkCard
key={cluster.ID}
to={`cluster/${cluster.ID}`}
header={cluster.ID || 'No ID'}
footer={cluster.Status && <Lifespan cluster={cluster} />}
className={extraCardClass}
>
{cluster.Description && <p>Description: {cluster.Description}</p>}
<p>Status: {cluster.Status || 'FAILED'}</p>
<p>Flavor: {cluster.Flavor || 'Unknown'}</p>
</LinkCard>
</GalleryItem>
);
});
return <>{cards}</>;
Expand Down Expand Up @@ -116,9 +117,20 @@ export default function LaunchPageSection(): ReactElement {
);
return (
<PageSection header={header}>
<div className="flex flex-wrap -m-2">
<Gallery
hasGutter
minWidths={{
default: '100%',
md: '100px',
xl: '300px',
}}
maxWidths={{
md: '200px',
xl: '1fr',
}}
>
<ClusterCards showAllClusters={showAllClusters} />
</div>
</Gallery>
</PageSection>
);
}
Expand Down
18 changes: 18 additions & 0 deletions ui/src/infra.css
Original file line number Diff line number Diff line change
Expand Up @@ -36,3 +36,21 @@
.rhacs-logo-text {
fill: #ffffff;
}

/* LinkCard */

/* appear to be clickable */
a:hover > .pf-c-panel {
background-color: var(--pf-global--BackgroundColor--200);
}

/* reset to regular font for LinkCard content */
a > .pf-c-panel {
font-weight: var(--pf-global--FontWeight--normal);
}

/* LinkCard title */
a > .pf-c-panel > .pf-c-panel__header {
font-weight: var(--pf-global--FontWeight--bold);
font-size: var(--pf-global--FontSize--lg);
}

0 comments on commit 108a943

Please sign in to comment.