From ee82801843b3cd781eda8917917b78fcbaa67786 Mon Sep 17 00:00:00 2001
From: Khushi Jain <57278642+khushijain21@users.noreply.github.com>
Date: Thu, 14 Dec 2023 12:57:30 +0530
Subject: [PATCH] Chore: Remove gf-form in UserPermission & Annotation Query
 (#78785)

* Chore: Remove gf-form in UserPermission

* more changes

* Update public/app/features/admin/UserPermissions.tsx

Co-authored-by: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>

* more change

* Added annotationQueryEditor

* empty div

* Update public/app/plugins/datasource/elasticsearch/components/QueryEditor/AnnotationQueryEditor.tsx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* final

---------

Co-authored-by: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>
---
 public/app/features/admin/UserPermissions.tsx | 91 ++++++++++---------
 .../QueryEditor/AnnotationQueryEditor.tsx     | 13 ++-
 2 files changed, 54 insertions(+), 50 deletions(-)

diff --git a/public/app/features/admin/UserPermissions.tsx b/public/app/features/admin/UserPermissions.tsx
index 30cc4c798d5..f9be4537bfb 100644
--- a/public/app/features/admin/UserPermissions.tsx
+++ b/public/app/features/admin/UserPermissions.tsx
@@ -40,53 +40,51 @@ export function UserPermissions({ isGrafanaAdmin, isExternalUser, lockMessage, o
   return (
     <>
       <h3 className="page-heading">Permissions</h3>
-      <div className="gf-form-group">
-        <div className="gf-form">
-          <table className="filter-table form-inline">
-            <tbody>
-              <tr>
-                <td className="width-16">Grafana Admin</td>
-                {isEditing ? (
-                  <td colSpan={2}>
-                    <RadioButtonGroup
-                      options={adminOptions}
-                      value={currentAdminOption}
-                      onChange={setCurrentAdminOption}
-                      autoFocus
-                    />
-                  </td>
-                ) : (
-                  <td colSpan={2}>
-                    {isGrafanaAdmin ? (
-                      <>
-                        <Icon name="shield" /> Yes
-                      </>
-                    ) : (
-                      <>No</>
-                    )}
-                  </td>
-                )}
-                <td>
-                  {canChangePermissions && (
-                    <ConfirmButton
-                      onClick={onChangeClick}
-                      onConfirm={handleGrafanaAdminChange}
-                      onCancel={onCancelClick}
-                      confirmText="Change"
-                    >
-                      Change
-                    </ConfirmButton>
-                  )}
-                  {isExternalUser && (
-                    <div className={styles.lockMessageClass}>
-                      <ExternalUserTooltip lockMessage={lockMessage} />
-                    </div>
+      <div className={styles.container}>
+        <table className="filter-table form-inline">
+          <tbody>
+            <tr>
+              <td className="width-16">Grafana Admin</td>
+              {isEditing ? (
+                <td colSpan={2}>
+                  <RadioButtonGroup
+                    options={adminOptions}
+                    value={currentAdminOption}
+                    onChange={setCurrentAdminOption}
+                    autoFocus
+                  />
+                </td>
+              ) : (
+                <td colSpan={2}>
+                  {isGrafanaAdmin ? (
+                    <>
+                      <Icon name="shield" /> Yes
+                    </>
+                  ) : (
+                    <>No</>
                   )}
                 </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+              )}
+              <td>
+                {canChangePermissions && (
+                  <ConfirmButton
+                    onClick={onChangeClick}
+                    onConfirm={handleGrafanaAdminChange}
+                    onCancel={onCancelClick}
+                    confirmText="Change"
+                  >
+                    Change
+                  </ConfirmButton>
+                )}
+                {isExternalUser && (
+                  <div className={styles.lockMessageClass}>
+                    <ExternalUserTooltip lockMessage={lockMessage} />
+                  </div>
+                )}
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
     </>
   );
@@ -99,4 +97,7 @@ const getTooltipStyles = (theme: GrafanaTheme2) => ({
     font-style: italic;
     margin-right: ${theme.spacing(0.6)};
   `,
+  container: css({
+    marginBottom: theme.spacing(5),
+  }),
 });
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/AnnotationQueryEditor.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/AnnotationQueryEditor.tsx
index 413decf565e..3411b611647 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/AnnotationQueryEditor.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/AnnotationQueryEditor.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { AnnotationQuery } from '@grafana/data';
 import { EditorField, EditorRow } from '@grafana/experimental';
-import { Input } from '@grafana/ui';
+import { Input, Stack } from '@grafana/ui';
 
 import { ElasticsearchQuery } from '../../types';
 
@@ -18,8 +18,8 @@ export function ElasticsearchAnnotationsQueryEditor(props: Props) {
   const onAnnotationChange = props.onAnnotationChange!;
 
   return (
-    <>
-      <div className="gf-form-group">
+    <Stack direction="column" gap={5}>
+      <div>
         <ElasticSearchQueryField
           value={annotation.target?.query}
           onChange={(query) => {
@@ -37,7 +37,7 @@ export function ElasticsearchAnnotationsQueryEditor(props: Props) {
         />
       </div>
 
-      <div className="gf-form-group">
+      <div>
         <h6>Field mappings</h6>
         <EditorRow>
           <EditorField label="Time">
@@ -92,6 +92,9 @@ export function ElasticsearchAnnotationsQueryEditor(props: Props) {
           </EditorField>
         </EditorRow>
       </div>
-    </>
+
+      {/*Empty div to preserve the bottom margin */}
+      <div />
+    </Stack>
   );
 }