From dba690d65331d479131f2a62e58f56fe9038070c Mon Sep 17 00:00:00 2001
From: Khushi Jain <57278642+khushijain21@users.noreply.github.com>
Date: Sat, 16 Dec 2023 13:16:54 +0530
Subject: [PATCH] Chore: Removes gf-form from profile/user (#79552)

* Chore: Removes gf-form from profile/user

* message

* better
---
 .betterer.results                             |  9 --
 .../features/profile/UserOrganizations.tsx    | 82 +++++++++--------
 .../features/profile/UserProfileEditPage.tsx  | 10 ++-
 public/app/features/profile/UserSessions.tsx  | 89 +++++++++----------
 public/app/features/profile/UserTeams.tsx     | 50 +++++------
 5 files changed, 112 insertions(+), 128 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index 0d4444a9f74..c99a1a1c714 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -7224,15 +7224,6 @@ exports[`no gf-form usage`] = {
     "public/app/features/plugins/admin/components/PluginDashboards.tsx:5381": [
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
     ],
-    "public/app/features/profile/UserOrganizations.tsx:5381": [
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
-    ],
-    "public/app/features/profile/UserSessions.tsx:5381": [
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
-    ],
-    "public/app/features/profile/UserTeams.tsx:5381": [
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
-    ],
     "public/app/features/query/components/QueryEditorRow.tsx:5381": [
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
     ],
diff --git a/public/app/features/profile/UserOrganizations.tsx b/public/app/features/profile/UserOrganizations.tsx
index 88fae4864a2..6d39fc567e8 100644
--- a/public/app/features/profile/UserOrganizations.tsx
+++ b/public/app/features/profile/UserOrganizations.tsx
@@ -30,48 +30,46 @@ export class UserOrganizations extends PureComponent<Props> {
           <Trans i18nKey="user-orgs.title">Organizations</Trans>
         </h3>
 
-        <div className="gf-form-group">
-          <table className="filter-table form-inline" data-testid={selectors.components.UserProfile.orgsTable}>
-            <thead>
-              <tr>
-                <th>
-                  <Trans i18nKey="user-orgs.name-column">Name</Trans>
-                </th>
-                <th>
-                  <Trans i18nKey="user-orgs.role-column">Role</Trans>
-                </th>
-                <th />
-              </tr>
-            </thead>
-            <tbody>
-              {orgs.map((org: UserOrg, index) => {
-                return (
-                  <tr key={index}>
-                    <td>{org.name}</td>
-                    <td>{org.role}</td>
-                    <td className="text-right">
-                      {org.orgId === user?.orgId ? (
-                        <Button variant="secondary" size="sm" disabled>
-                          <Trans i18nKey="user-orgs.current-org-button">Current</Trans>
-                        </Button>
-                      ) : (
-                        <Button
-                          variant="secondary"
-                          size="sm"
-                          onClick={() => {
-                            this.props.setUserOrg(org);
-                          }}
-                        >
-                          <Trans i18nKey="user-orgs.select-org-button">Select organisation</Trans>
-                        </Button>
-                      )}
-                    </td>
-                  </tr>
-                );
-              })}
-            </tbody>
-          </table>
-        </div>
+        <table className="filter-table form-inline" data-testid={selectors.components.UserProfile.orgsTable}>
+          <thead>
+            <tr>
+              <th>
+                <Trans i18nKey="user-orgs.name-column">Name</Trans>
+              </th>
+              <th>
+                <Trans i18nKey="user-orgs.role-column">Role</Trans>
+              </th>
+              <th />
+            </tr>
+          </thead>
+          <tbody>
+            {orgs.map((org: UserOrg, index) => {
+              return (
+                <tr key={index}>
+                  <td>{org.name}</td>
+                  <td>{org.role}</td>
+                  <td className="text-right">
+                    {org.orgId === user?.orgId ? (
+                      <Button variant="secondary" size="sm" disabled>
+                        <Trans i18nKey="user-orgs.current-org-button">Current</Trans>
+                      </Button>
+                    ) : (
+                      <Button
+                        variant="secondary"
+                        size="sm"
+                        onClick={() => {
+                          this.props.setUserOrg(org);
+                        }}
+                      >
+                        <Trans i18nKey="user-orgs.select-org-button">Select organisation</Trans>
+                      </Button>
+                    )}
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
       </div>
     );
   }
diff --git a/public/app/features/profile/UserProfileEditPage.tsx b/public/app/features/profile/UserProfileEditPage.tsx
index 9b074206c89..0b9fbe7d75f 100644
--- a/public/app/features/profile/UserProfileEditPage.tsx
+++ b/public/app/features/profile/UserProfileEditPage.tsx
@@ -5,7 +5,7 @@ import { useMount } from 'react-use';
 import { PluginExtensionComponent, PluginExtensionPoints } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { getPluginComponentExtensions } from '@grafana/runtime';
-import { Tab, TabsBar, TabContent, VerticalGroup } from '@grafana/ui';
+import { Tab, TabsBar, TabContent, VerticalGroup, Stack } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import SharedPreferences from 'app/core/components/SharedPreferences/SharedPreferences';
 import { useQueryParams } from 'app/core/hooks/useQueryParams';
@@ -116,9 +116,11 @@ export function UserProfileEditPage({
     <VerticalGroup spacing="md">
       <UserProfileEditForm updateProfile={updateUserProfile} isSavingUser={isUpdating} user={user} />
       <SharedPreferences resourceUri="user" preferenceType="user" />
-      <UserTeams isLoading={teamsAreLoading} teams={teams} />
-      <UserOrganizations isLoading={orgsAreLoading} setUserOrg={changeUserOrg} orgs={orgs} user={user} />
-      <UserSessions isLoading={sessionsAreLoading} revokeUserSession={revokeUserSession} sessions={sessions} />
+      <Stack direction="column" gap={6}>
+        <UserTeams isLoading={teamsAreLoading} teams={teams} />
+        <UserOrganizations isLoading={orgsAreLoading} setUserOrg={changeUserOrg} orgs={orgs} user={user} />
+        <UserSessions isLoading={sessionsAreLoading} revokeUserSession={revokeUserSession} sessions={sessions} />
+      </Stack>
     </VerticalGroup>
   );
 
diff --git a/public/app/features/profile/UserSessions.tsx b/public/app/features/profile/UserSessions.tsx
index 107d3c636ed..ec9dbb034e7 100644
--- a/public/app/features/profile/UserSessions.tsx
+++ b/public/app/features/profile/UserSessions.tsx
@@ -1,4 +1,4 @@
-import { css, cx } from '@emotion/css';
+import { css } from '@emotion/css';
 import { t } from 'i18next';
 import React, { PureComponent } from 'react';
 
@@ -27,50 +27,48 @@ class UserSessions extends PureComponent<Props> {
         {sessions.length > 0 && (
           <>
             <h3 className="page-sub-heading">Sessions</h3>
-            <div className={cx('gf-form-group', styles.table)}>
-              <table className="filter-table form-inline" data-testid={selectors.components.UserProfile.sessionsTable}>
-                <thead>
-                  <tr>
-                    <th>
-                      <Trans i18nKey="user-session.seen-at-column">Last seen</Trans>
-                    </th>
-                    <th>
-                      <Trans i18nKey="user-session.created-at-column">Logged on</Trans>
-                    </th>
-                    <th>
-                      <Trans i18nKey="user-session.ip-column">IP address</Trans>
-                    </th>
-                    <th>
-                      <Trans i18nKey="user-session.browser-column">Browser & OS</Trans>
-                    </th>
-                    <th></th>
-                  </tr>
-                </thead>
+            <table className="filter-table form-inline" data-testid={selectors.components.UserProfile.sessionsTable}>
+              <thead>
+                <tr>
+                  <th>
+                    <Trans i18nKey="user-session.seen-at-column">Last seen</Trans>
+                  </th>
+                  <th>
+                    <Trans i18nKey="user-session.created-at-column">Logged on</Trans>
+                  </th>
+                  <th>
+                    <Trans i18nKey="user-session.ip-column">IP address</Trans>
+                  </th>
+                  <th>
+                    <Trans i18nKey="user-session.browser-column">Browser & OS</Trans>
+                  </th>
+                  <th></th>
+                </tr>
+              </thead>
 
-                <tbody>
-                  {sessions.map((session: UserSession, index) => (
-                    <tr key={index}>
-                      {session.isActive ? <td>Now</td> : <td>{session.seenAt}</td>}
-                      <td>{i18nDate(session.createdAt, { dateStyle: 'long' })}</td>
-                      <td>{session.clientIp}</td>
-                      <td>
-                        {session.browser} on {session.os} {session.osVersion}
-                      </td>
-                      <td>
-                        <Button
-                          size="sm"
-                          variant="destructive"
-                          onClick={() => revokeUserSession(session.id)}
-                          aria-label={t('user-session.revoke', 'Revoke user session')}
-                        >
-                          <Icon name="power" />
-                        </Button>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
+              <tbody>
+                {sessions.map((session: UserSession, index) => (
+                  <tr key={index}>
+                    {session.isActive ? <td>Now</td> : <td>{session.seenAt}</td>}
+                    <td>{i18nDate(session.createdAt, { dateStyle: 'long' })}</td>
+                    <td>{session.clientIp}</td>
+                    <td>
+                      {session.browser} on {session.os} {session.osVersion}
+                    </td>
+                    <td>
+                      <Button
+                        size="sm"
+                        variant="destructive"
+                        onClick={() => revokeUserSession(session.id)}
+                        aria-label={t('user-session.revoke', 'Revoke user session')}
+                      >
+                        <Icon name="power" />
+                      </Button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
           </>
         )}
       </div>
@@ -82,9 +80,6 @@ const getStyles = () => ({
   wrapper: css({
     maxWidth: '100%',
   }),
-  table: css({
-    overflow: 'auto',
-  }),
 });
 
 export default UserSessions;
diff --git a/public/app/features/profile/UserTeams.tsx b/public/app/features/profile/UserTeams.tsx
index a8af0342f8d..75239994c1c 100644
--- a/public/app/features/profile/UserTeams.tsx
+++ b/public/app/features/profile/UserTeams.tsx
@@ -23,32 +23,30 @@ export class UserTeams extends PureComponent<Props> {
     return (
       <div>
         <h3 className="page-sub-heading">Teams</h3>
-        <div className="gf-form-group">
-          <table className="filter-table form-inline" aria-label="User teams table">
-            <thead>
-              <tr>
-                <th />
-                <th>Name</th>
-                <th>Email</th>
-                <th>Members</th>
-              </tr>
-            </thead>
-            <tbody>
-              {teams.map((team: Team, index) => {
-                return (
-                  <tr key={index}>
-                    <td className="width-4 text-center">
-                      <img className="filter-table__avatar" src={team.avatarUrl} alt="" />
-                    </td>
-                    <td>{team.name}</td>
-                    <td>{team.email}</td>
-                    <td>{team.memberCount}</td>
-                  </tr>
-                );
-              })}
-            </tbody>
-          </table>
-        </div>
+        <table className="filter-table form-inline" aria-label="User teams table">
+          <thead>
+            <tr>
+              <th />
+              <th>Name</th>
+              <th>Email</th>
+              <th>Members</th>
+            </tr>
+          </thead>
+          <tbody>
+            {teams.map((team: Team, index) => {
+              return (
+                <tr key={index}>
+                  <td className="width-4 text-center">
+                    <img className="filter-table__avatar" src={team.avatarUrl} alt="" />
+                  </td>
+                  <td>{team.name}</td>
+                  <td>{team.email}</td>
+                  <td>{team.memberCount}</td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
       </div>
     );
   }