Switch flavor/cluster panel (LinkCard) to PatternFly (#918)

stackrox · Jul 25, 2023 · 108a943 · 108a943
1 parent 99b483a
commit 108a943
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 33 deletions.
diff --git a/ui/src/components/LinkCard.tsx b/ui/src/components/LinkCard.tsx
@@ -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;
@@ -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>
  );
 }
diff --git a/ui/src/containers/HomePage/LaunchPageSection.tsx b/ui/src/containers/HomePage/LaunchPageSection.tsx
@@ -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';
@@ -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}</>;
@@ -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>
  );
 }

diff --git a/ui/src/containers/HomePage/MyClustersPageSection.tsx b/ui/src/containers/HomePage/MyClustersPageSection.tsx
@@ -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';
@@ -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}</>;
@@ -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>
  );
 }

diff --git a/ui/src/infra.css b/ui/src/infra.css
@@ -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);
+}