refactor(gitops): migrate git form to react [EE-4849] (#8268)

app/react/components/Tip/TextTip/TextTip.tsx

@@ -1,5 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { AlertCircle } from 'lucide-react';
+import clsx from 'clsx';
 
 import { Icon, IconMode } from '@@/Icon';
 
@@ -8,17 +9,18 @@ type Color = 'orange' | 'blue';
 export interface Props {
   icon?: React.ReactNode;
   color?: Color;
+  className?: string;
 }
 
 export function TextTip({
   color = 'orange',
   icon = AlertCircle,
+  className,
   children,
 }: PropsWithChildren<Props>) {
   return (
-    <p className="small inline-flex items-center gap-1">
-      <Icon icon={icon} mode={getMode(color)} className="shrink-0" />
-
+    <p className={clsx('small inline-flex items-center gap-1', className)}>
+      <Icon icon={icon} mode={getMode(color)} />
       <span className="text-muted">{children}</span>
     </p>
   );

app/react/components/Tip/Tooltip/Tooltip.tsx

@@ -1,12 +1,12 @@
 import { HelpCircle } from 'lucide-react';
-import { useMemo } from 'react';
+import { ReactNode, useMemo } from 'react';
 import sanitize from 'sanitize-html';
 
 import { TooltipWithChildren, Position } from '../TooltipWithChildren';
 
 export interface Props {
   position?: Position;
-  message: string;
+  message: ReactNode;
   className?: string;
   setHtmlMessage?: boolean;
 }
@@ -19,7 +19,7 @@ export function Tooltip({
 }: Props) {
   // allow angular views to set html messages for the tooltip
   const htmlMessage = useMemo(() => {
-    if (setHtmlMessage) {
+    if (setHtmlMessage && typeof message === 'string') {
       // eslint-disable-next-line react/no-danger
       return <div dangerouslySetInnerHTML={{ __html: sanitize(message) }} />;
     }