Allow sending action which is rendered next to tile title

patternfly · Feb 16, 2024 · baa2529 · baa2529
1 parent 96d9f8c
commit baa2529
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/packages/module/src/catalog/QuickStartTile.tsx b/packages/module/src/catalog/QuickStartTile.tsx
@@ -17,13 +17,15 @@ interface QuickStartTileProps {
   status: QuickStartStatus;
   isActive: boolean;
   onClick?: () => void;
+  action?: React.ReactNode;
 }
 
 const QuickStartTile: React.FC<QuickStartTileProps> = ({
   quickStart,
   status,
   isActive,
   onClick = () => {},
+  action
 }) => {
   const {
     metadata: { name: id },
@@ -92,6 +94,7 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
             duration={durationMinutes}
             type={type}
             quickStartId={id}
+            action={action}
           />
         }
         onClick={handleClick}

diff --git a/packages/module/src/catalog/QuickStartTileHeader.scss b/packages/module/src/catalog/QuickStartTileHeader.scss
@@ -9,4 +9,9 @@
   & .pf-v5-c-badge:not(:last-of-type) {
     margin-right: var(--pf-v5-global--spacer--sm);
   }
+
+  .pfext-quick-start-title-header__display-name {
+    display: flex;
+    justify-content: center;
+  }
 }
diff --git a/packages/module/src/catalog/QuickStartTileHeader.tsx b/packages/module/src/catalog/QuickStartTileHeader.tsx
@@ -13,6 +13,7 @@ interface QuickStartTileHeaderProps {
   name: string;
   type?: QuickStartType;
   quickStartId?: string;
+  action?: React.ReactNode;
 }
 
 const statusColorMap = {
@@ -27,6 +28,7 @@ const QuickStartTileHeader: React.FC<QuickStartTileHeaderProps> = ({
   name,
   type,
   quickStartId,
+  action
 }) => {
   const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
 
@@ -38,9 +40,12 @@ const QuickStartTileHeader: React.FC<QuickStartTileHeaderProps> = ({
 
   return (
     <div className="pfext-quick-start-tile-header">
-      <Title headingLevel="h3" data-test="title" id={quickStartId}>
-        <QuickStartMarkdownView content={name} />
-      </Title>
+      <div className="pfext-quick-start-title-header__display-name">
+        <Title headingLevel="h3" data-test="title" id={quickStartId}>
+          <QuickStartMarkdownView content={name} />
+        </Title>
+        {action}
+      </div>
       <div className="pfext-quick-start-tile-header__status">
         {type && (
           <Label className="pfext-quick-start-tile-header--margin" color={type.color}>