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);
+}