fix(ui): Allow beta tag in panel header (#18439)

Author: maheskett

src/sentry/static/sentry/app/components/betaTag.tsx

@@ -7,13 +7,13 @@ import space from 'app/styles/space';
 import {t} from 'app/locale';
 
 type Props = {
-  title?: string;
+  title?: string | null;
 };
 
 const BetaTag = ({
   title = t('This feature is in beta and may change in the future.'),
 }: Props) => (
-  <Tooltip title={title} position="right">
+  <Tooltip title={title} disabled={!title} position="right">
     <StyledTag priority="beta" size="small">
       {t('beta')}
     </StyledTag>

src/sentry/static/sentry/app/views/settings/components/forms/formPanel.tsx

@@ -11,7 +11,7 @@ type Props = {
   /**
    * Panel title
    */
-  title?: string;
+  title?: React.ReactNode;
 
   /**
    * List of fields to render
@@ -59,7 +59,7 @@ export default class FormPanel extends React.Component<Props> {
     } = this.props;
 
     return (
-      <Panel key={title} id={sanitizeQuerySelector(title ?? '')}>
+      <Panel id={typeof title === 'string' ? sanitizeQuerySelector(title) : undefined}>
         {title && <PanelHeader>{title}</PanelHeader>}
         <PanelBody>
           {typeof renderHeader === 'function' && renderHeader({title, fields})}

src/sentry/static/sentry/app/views/settings/components/forms/jsonForm.tsx

@@ -157,9 +157,9 @@ class JsonForm extends React.Component<Props, State> {
     return (
       <Box {...otherProps}>
         {typeof forms !== 'undefined' &&
-          forms.map(formGroup => (
+          forms.map((formGroup, i) => (
             <FormPanel
-              key={formGroup.title}
+              key={i}
               title={formGroup.title}
               fields={formGroup.fields}
               {...formPanelProps}

src/sentry/static/sentry/app/views/settings/components/forms/type.tsx

@@ -140,6 +140,6 @@ export type Field = (
 export type FieldObject = Field | Function;
 
 export type JsonFormObject = {
-  title?: string;
+  title?: React.ReactNode;
   fields: FieldObject[];
 };