Grafana-UI: Fix use of Fragments as children of InlineField (#46326)

packages/grafana-ui/src/components/DataSourceSettings/CertificationKey.tsx

@@ -3,6 +3,7 @@ import { Input } from '../Input/Input';
 import { Button } from '../Button';
 import { TextArea } from '../TextArea/TextArea';
 import { InlineField } from '../Forms/InlineField';
+import { InlineFieldRow } from '../Forms/InlineFieldRow';
 
 interface Props {
   label: string;
@@ -15,17 +16,19 @@ interface Props {
 
 export const CertificationKey: FC<Props> = ({ hasCert, label, onChange, onClick, placeholder }) => {
   return (
-    <InlineField label={label} labelWidth={14}>
+    <InlineFieldRow>
-      {hasCert ? (
+      <InlineField label={label} labelWidth={14} disabled={hasCert}>
-        <>
+        {hasCert ? (
-          <Input type="text" disabled value="configured" width={24} />
+          <Input type="text" value="configured" width={24} />
-          <Button variant="secondary" onClick={onClick} style={{ marginLeft: 4 }}>
+        ) : (
-            Reset
+          <TextArea rows={7} onChange={onChange} placeholder={placeholder} required />
-          </Button>
+        )}
-        </>
+      </InlineField>
-      ) : (
+      {hasCert && (
-        <TextArea rows={7} onChange={onChange} placeholder={placeholder} required />
+        <Button variant="secondary" onClick={onClick} style={{ marginLeft: 4 }}>
+          Reset
+        </Button>
       )}
-    </InlineField>
+    </InlineFieldRow>
   );
 };

public/app/features/dashboard/components/SubMenu/AnnotationPicker.tsx

@@ -2,7 +2,7 @@ import { AnnotationQuery, EventBus, GrafanaTheme2 } from '@grafana/data';
 import React, { useEffect, useState } from 'react';
 import { getDashboardQueryRunner } from '../../../query/state/DashboardQueryRunner/DashboardQueryRunner';
 import { AnnotationQueryFinished, AnnotationQueryStarted } from '../../../../types/events';
-import { InlineField, InlineSwitch, useStyles2 } from '@grafana/ui';
+import { InlineField, InlineFieldRow, InlineSwitch, useStyles2 } from '@grafana/ui';
 import { LoadingIndicator } from '@grafana/ui/src/components/PanelChrome/LoadingIndicator';
 import { css } from '@emotion/css';
 
@@ -41,14 +41,14 @@ export const AnnotationPicker = ({ annotation, events, onEnabledChanged }: Annot
 
   return (
     <div key={annotation.name} className={styles.annotation}>
-      <InlineField label={annotation.name} disabled={loading}>
+      <InlineFieldRow>
-        <>
+        <InlineField label={annotation.name} disabled={loading}>
           <InlineSwitch value={annotation.enable} onChange={() => onEnabledChanged(annotation)} disabled={loading} />
-          <div className={styles.indicator}>
+        </InlineField>
-            <LoadingIndicator loading={loading} onCancel={onCancel} />
+        <div className={styles.indicator}>
-          </div>
+          <LoadingIndicator loading={true} onCancel={onCancel} />
-        </>
+        </div>
-      </InlineField>
+      </InlineFieldRow>
     </div>
   );
 };

public/app/plugins/panel/geomap/editor/StyleRuleEditor.tsx

@@ -156,7 +156,7 @@ export const StyleRuleEditor: FC<StandardEditorProps<FeatureStyleConfig, any, an
           />
         </InlineField>
         <InlineField className={styles.inline} grow={true}>
-          <>
+          <div className={styles.flexRow}>
             {(check.operation === ComparisonOperation.EQ || check.operation === ComparisonOperation.NEQ) && (
               <Select
                 menuShouldPortal
@@ -177,7 +177,7 @@ export const StyleRuleEditor: FC<StandardEditorProps<FeatureStyleConfig, any, an
                 onChange={onChangeNumericValue}
               />
             )}
-          </>
+          </div>
         </InlineField>
         <Button
           size="md"
@@ -222,4 +222,9 @@ const getStyles = (theme: GrafanaTheme2) => ({
   button: css`
     margin-left: 4px;
   `,
+  flexRow: css`
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+  `,
 });