PreviewBadge: allow ReactNode content, rename prop to popoverContent (

#2560)

Motivation: In OCM we have use case for showing dynamic badge content
(https://issues.redhat.com/browse/OCMUI-1145) where we don't get separate
"Learn More" URL but might render links in the text itself.

The existing `PreviewBadge` component supports this fine at run time,
only the `popoverText: string` type was too restrictive at compile time.
=> Relaxing the type + renames `popoverText` -> `popoverContent`.

libs/ui-lib/lib/common/components/ui/DeveloperPreview.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { PreviewBadge, PreviewBadgeProps } from './PreviewBadge';
 
-export type DeveloperPreviewProps = Omit<PreviewBadgeProps, 'text' | 'popoverText'>;
+export type DeveloperPreviewProps = Omit<PreviewBadgeProps, 'text' | 'popoverContent'>;
 
 export const DeveloperPreview: React.FC<DeveloperPreviewProps> = (props) => {
   const { t } = useTranslation();
   return (
     <PreviewBadge
       text={t('ai:Developer Preview')}
-      popoverText={t(
+      popoverContent={t(
         'ai:Developer preview features are not intended to be used in production environments. The clusters deployed with the developer preview features are considered to be development clusters and are not supported through the Red Hat Customer Portal case management system.',
       )}
       {...props}

libs/ui-lib/lib/common/components/ui/PreviewBadge.tsx

@@ -16,14 +16,14 @@ export type PreviewBadgeProps = {
   className?: string;
   text: string;
   externalLink?: string;
-  popoverText: string;
+  popoverContent: React.ReactNode;
 } & WithTestID;
 
 export const PreviewBadge: React.FC<PreviewBadgeProps> = ({
   position = PreviewBadgePosition.inline,
   className = 'pf-v5-u-ml-md',
   text,
-  popoverText,
+  popoverContent,
   externalLink,
   testId,
 }) => {
@@ -39,7 +39,7 @@ export const PreviewBadge: React.FC<PreviewBadgeProps> = ({
   }
   const bodyContent = (
     <>
-      <div style={{ marginBottom: 'var(--pf-v5-global--spacer--sm)' }}>{popoverText}</div>
+      <div style={{ marginBottom: 'var(--pf-v5-global--spacer--sm)' }}>{popoverContent}</div>
       {externalLink && (
         <>
           <ExternalLink href={externalLink}>{t('ai:Learn more')}</ExternalLink>

libs/ui-lib/lib/common/components/ui/TechnologyPreview.tsx

@@ -5,7 +5,7 @@ import { PreviewBadge, PreviewBadgeProps } from './PreviewBadge';
 
 export type TechnologyPreviewProps = Omit<
   PreviewBadgeProps,
-  'text' | 'popoverText' | 'externalLink'
+  'text' | 'popoverContent' | 'externalLink'
 >;
 
 export const TechnologyPreview: React.FC<TechnologyPreviewProps> = (props) => {
@@ -14,7 +14,7 @@ export const TechnologyPreview: React.FC<TechnologyPreviewProps> = (props) => {
   return (
     <PreviewBadge
       text={t('ai:Technology Preview')}
-      popoverText={t(
+      popoverContent={t(
         'ai:Technology preview features provide early access to upcoming product innovations, enabling you to test functionality and provide feedback during the development process.',
       )}
       externalLink={TECH_SUPPORT_LEVEL_LINK}