From baa2529ebf968cdefa33700b43a577108f943095 Mon Sep 17 00:00:00 2001 From: Karel Hala Date: Fri, 16 Feb 2024 15:39:46 +0100 Subject: [PATCH 1/6] Allow sending action which is rendered next to tile title --- packages/module/src/catalog/QuickStartTile.tsx | 3 +++ packages/module/src/catalog/QuickStartTileHeader.scss | 5 +++++ packages/module/src/catalog/QuickStartTileHeader.tsx | 11 ++++++++--- 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/packages/module/src/catalog/QuickStartTile.tsx b/packages/module/src/catalog/QuickStartTile.tsx index 4af8c42f..89405efc 100644 --- a/packages/module/src/catalog/QuickStartTile.tsx +++ b/packages/module/src/catalog/QuickStartTile.tsx @@ -17,6 +17,7 @@ interface QuickStartTileProps { status: QuickStartStatus; isActive: boolean; onClick?: () => void; + action?: React.ReactNode; } const QuickStartTile: React.FC = ({ @@ -24,6 +25,7 @@ const QuickStartTile: React.FC = ({ status, isActive, onClick = () => {}, + action }) => { const { metadata: { name: id }, @@ -92,6 +94,7 @@ const QuickStartTile: React.FC = ({ 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 index fb790d69..9f62e4e8 100644 --- 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 index 3e4db458..33cc925a 100644 --- 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 = ({ name, type, quickStartId, + action }) => { const { getResource } = React.useContext(QuickStartContext); @@ -38,9 +40,12 @@ const QuickStartTileHeader: React.FC = ({ return (
- - <QuickStartMarkdownView content={name} /> - +
+ + <QuickStartMarkdownView content={name} /> + + {action} +
{type && (