From 00c93fff8c0d0ad5c500983f9279c89a58dfcad7 Mon Sep 17 00:00:00 2001
From: Joao Silva <100691367+JoaoSilvaGrafana@users.noreply.github.com>
Date: Tue, 15 Mar 2022 17:50:29 +0000
Subject: [PATCH] Grafana-UI: Fix use of Fragments as children of InlineField
 (#46326)

---
 .../DataSourceSettings/CertificationKey.tsx   | 25 +++++++++++--------
 .../components/SubMenu/AnnotationPicker.tsx   | 16 ++++++------
 .../panel/geomap/editor/StyleRuleEditor.tsx   |  9 +++++--
 3 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/packages/grafana-ui/src/components/DataSourceSettings/CertificationKey.tsx b/packages/grafana-ui/src/components/DataSourceSettings/CertificationKey.tsx
index 1b8406ca8ff..56e238464a8 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/CertificationKey.tsx
+++ b/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}>
-      {hasCert ? (
-        <>
-          <Input type="text" disabled value="configured" width={24} />
-          <Button variant="secondary" onClick={onClick} style={{ marginLeft: 4 }}>
-            Reset
-          </Button>
-        </>
-      ) : (
-        <TextArea rows={7} onChange={onChange} placeholder={placeholder} required />
+    <InlineFieldRow>
+      <InlineField label={label} labelWidth={14} disabled={hasCert}>
+        {hasCert ? (
+          <Input type="text" value="configured" width={24} />
+        ) : (
+          <TextArea rows={7} onChange={onChange} placeholder={placeholder} required />
+        )}
+      </InlineField>
+      {hasCert && (
+        <Button variant="secondary" onClick={onClick} style={{ marginLeft: 4 }}>
+          Reset
+        </Button>
       )}
-    </InlineField>
+    </InlineFieldRow>
   );
 };
diff --git a/public/app/features/dashboard/components/SubMenu/AnnotationPicker.tsx b/public/app/features/dashboard/components/SubMenu/AnnotationPicker.tsx
index ae2d8efb270..1fd2f8e14d1 100644
--- a/public/app/features/dashboard/components/SubMenu/AnnotationPicker.tsx
+++ b/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}>
-            <LoadingIndicator loading={loading} onCancel={onCancel} />
-          </div>
-        </>
-      </InlineField>
+        </InlineField>
+        <div className={styles.indicator}>
+          <LoadingIndicator loading={true} onCancel={onCancel} />
+        </div>
+      </InlineFieldRow>
     </div>
   );
 };
diff --git a/public/app/plugins/panel/geomap/editor/StyleRuleEditor.tsx b/public/app/plugins/panel/geomap/editor/StyleRuleEditor.tsx
index a63c15f69db..34681cc9330 100644
--- a/public/app/plugins/panel/geomap/editor/StyleRuleEditor.tsx
+++ b/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;
+  `,
 });