fix(gitoptions): git app edit ui tweaks [EE-4584] (#8159)

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

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

app/react/components/Tip/TooltipWithChildren/TooltipWithChildren.tsx

@@ -15,7 +15,7 @@ export type Position = 'top' | 'right' | 'bottom' | 'left';
 
 export interface Props {
   position?: Position;
-  message: string;
+  message: React.ReactNode;
   className?: string;
   children: React.ReactElement;
   heading?: string;

app/react/components/form-components/Slider/Slider.module.css

@@ -53,4 +53,6 @@
   box-shadow: 0 2px 4px 0 rgb(34 36 38 / 12%), 0 2px 10px 0 rgb(34 36 38 / 15%);
   padding: 8px 12px;
   text-align: center;
+  user-select: none;
+  cursor: pointer;
 }

app/react/components/form-components/SwitchField/SwitchField.tsx

@@ -20,6 +20,7 @@ export interface Props {
   dataCy?: string;
   disabled?: boolean;
   featureId?: FeatureId;
+  setTooltipHtmlMessage?: boolean;
 }
 
 export function SwitchField({
@@ -34,6 +35,7 @@ export function SwitchField({
   onChange,
   featureId,
   switchClass,
+  setTooltipHtmlMessage,
 }: Props) {
   const toggleName = name ? `toggle_${name}` : '';
 
@@ -47,7 +49,9 @@ export function SwitchField({
         )}
       >
         {label}
-        {tooltip && <Tooltip message={tooltip} />}
+        {tooltip && (
+          <Tooltip message={tooltip} setHtmlMessage={setTooltipHtmlMessage} />
+        )}
       </span>
       <Switch
         className={clsx('space-right', switchClass)}