Chore: Removes gf-form from admin/user_ (#79502)

* userProfile

* userpermis

* usersession

* useradmin

.betterer.results

@@ -1302,8 +1302,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Styles should be written using objects.", "13"],
       [0, 0, 0, "Styles should be written using objects.", "14"],
       [0, 0, 0, "Styles should be written using objects.", "15"],
-      [0, 0, 0, "Styles should be written using objects.", "16"],
-      [0, 0, 0, "Styles should be written using objects.", "17"]
+      [0, 0, 0, "Styles should be written using objects.", "16"]
     ],
     "public/app/features/admin/UserPermissions.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"]
@@ -1311,11 +1310,7 @@ exports[`better eslint`] = {
     "public/app/features/admin/UserProfile.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"],
       [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"],
-      [0, 0, 0, "Styles should be written using objects.", "3"]
-    ],
-    "public/app/features/admin/UserSessions.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
+      [0, 0, 0, "Styles should be written using objects.", "2"]
     ],
     "public/app/features/alerting/AlertTab.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],

public/app/features/admin/UserAdminPage.tsx

@@ -3,6 +3,7 @@ import { connect, ConnectedProps } from 'react-redux';
 
 import { NavModelItem } from '@grafana/data';
 import { featureEnabled } from '@grafana/runtime';
+import { Stack } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import { contextSrv } from 'app/core/core';
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
@@ -117,50 +118,52 @@ export class UserAdminPage extends PureComponent<Props> {
     return (
       <Page navId="global-users" pageNav={pageNav}>
         <Page.Contents isLoading={isLoading}>
-          {user && (
-            <>
-              <UserProfile
+          <Stack gap={5} direction="column">
+            {user && (
+              <>
+                <UserProfile
+                  user={user}
+                  onUserUpdate={this.onUserUpdate}
+                  onUserDelete={this.onUserDelete}
+                  onUserDisable={this.onUserDisable}
+                  onUserEnable={this.onUserEnable}
+                  onPasswordChange={this.onPasswordChange}
+                />
+                {isLDAPUser &&
+                  user?.isExternallySynced &&
+                  featureEnabled('ldapsync') &&
+                  ldapSyncInfo &&
+                  canReadLDAPStatus && (
+                    <UserLdapSyncInfo ldapSyncInfo={ldapSyncInfo} user={user} onUserSync={this.onUserSync} />
+                  )}
+                <UserPermissions
+                  isGrafanaAdmin={user.isGrafanaAdmin}
+                  isExternalUser={user?.isGrafanaAdminExternallySynced}
+                  lockMessage={lockMessage}
+                  onGrafanaAdminChange={this.onGrafanaAdminChange}
+                />
+              </>
+            )}
+
+            {orgs && (
+              <UserOrgs
                 user={user}
-                onUserUpdate={this.onUserUpdate}
-                onUserDelete={this.onUserDelete}
-                onUserDisable={this.onUserDisable}
-                onUserEnable={this.onUserEnable}
-                onPasswordChange={this.onPasswordChange}
+                orgs={orgs}
+                isExternalUser={user?.isExternallySynced}
+                onOrgRemove={this.onOrgRemove}
+                onOrgRoleChange={this.onOrgRoleChange}
+                onOrgAdd={this.onOrgAdd}
               />
-              {isLDAPUser &&
-                user?.isExternallySynced &&
-                featureEnabled('ldapsync') &&
-                ldapSyncInfo &&
-                canReadLDAPStatus && (
-                  <UserLdapSyncInfo ldapSyncInfo={ldapSyncInfo} user={user} onUserSync={this.onUserSync} />
-                )}
-              <UserPermissions
-                isGrafanaAdmin={user.isGrafanaAdmin}
-                isExternalUser={user?.isGrafanaAdminExternallySynced}
-                lockMessage={lockMessage}
-                onGrafanaAdminChange={this.onGrafanaAdminChange}
+            )}
+
+            {sessions && canReadSessions && (
+              <UserSessions
+                sessions={sessions}
+                onSessionRevoke={this.onSessionRevoke}
+                onAllSessionsRevoke={this.onAllSessionsRevoke}
               />
-            </>
-          )}
-
-          {orgs && (
-            <UserOrgs
-              user={user}
-              orgs={orgs}
-              isExternalUser={user?.isExternallySynced}
-              onOrgRemove={this.onOrgRemove}
-              onOrgRoleChange={this.onOrgRoleChange}
-              onOrgAdd={this.onOrgAdd}
-            />
-          )}
-
-          {sessions && canReadSessions && (
-            <UserSessions
-              sessions={sessions}
-              onSessionRevoke={this.onSessionRevoke}
-              onAllSessionsRevoke={this.onAllSessionsRevoke}
-            />
-          )}
+            )}
+          </Stack>
         </Page.Contents>
       </Page>
     );

public/app/features/admin/UserOrgs.tsx

@@ -14,6 +14,7 @@ import {
   Tooltip,
   useStyles2,
   withTheme2,
+  Stack,
 } from '@grafana/ui';
 import { UserRolePicker } from 'app/core/components/RolePicker/UserRolePicker';
 import { fetchRoleOptions, updateUserRoles } from 'app/core/components/RolePicker/api';
@@ -56,32 +57,28 @@ export class UserOrgs extends PureComponent<Props, State> {
   render() {
     const { user, orgs, isExternalUser, onOrgRoleChange, onOrgRemove, onOrgAdd } = this.props;
     const { showAddOrgModal } = this.state;
-    const addToOrgContainerClass = css`
-      margin-top: 0.8rem;
-    `;
 
     const canAddToOrg = contextSrv.hasPermission(AccessControlAction.OrgUsersAdd) && !isExternalUser;
     return (
-      <>
+      <div>
         <h3 className="page-heading">Organizations</h3>
-        <div className="gf-form-group">
-          <div className="gf-form">
-            <table className="filter-table form-inline">
-              <tbody>
-                {orgs.map((org, index) => (
-                  <OrgRow
-                    key={`${org.orgId}-${index}`}
-                    isExternalUser={isExternalUser}
-                    user={user}
-                    org={org}
-                    onOrgRoleChange={onOrgRoleChange}
-                    onOrgRemove={onOrgRemove}
-                  />
-                ))}
-              </tbody>
-            </table>
-          </div>
-          <div className={addToOrgContainerClass}>
+        <Stack gap={1.5} direction="column">
+          <table className="filter-table form-inline">
+            <tbody>
+              {orgs.map((org, index) => (
+                <OrgRow
+                  key={`${org.orgId}-${index}`}
+                  isExternalUser={isExternalUser}
+                  user={user}
+                  org={org}
+                  onOrgRoleChange={onOrgRoleChange}
+                  onOrgRemove={onOrgRemove}
+                />
+              ))}
+            </tbody>
+          </table>
+
+          <div>
             {canAddToOrg && (
               <Button variant="secondary" onClick={this.showOrgAddModal} ref={this.addToOrgButtonRef}>
                 Add user to organization
@@ -95,8 +92,8 @@ export class UserOrgs extends PureComponent<Props, State> {
             onOrgAdd={onOrgAdd}
             onDismiss={this.dismissOrgAddModal}
           />
-        </div>
-      </>
+        </Stack>
+      </div>
     );
   }
 }

public/app/features/admin/UserPermissions.tsx

@@ -38,55 +38,53 @@ export function UserPermissions({ isGrafanaAdmin, isExternalUser, lockMessage, o
   const styles = useStyles2(getTooltipStyles);
 
   return (
-    <>
+    <div>
       <h3 className="page-heading">Permissions</h3>
-      <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>
-              )}
-              <td>
-                {canChangePermissions && (
-                  <ConfirmButton
-                    onClick={onChangeClick}
-                    onConfirm={handleGrafanaAdminChange}
-                    onCancel={onCancelClick}
-                    confirmText="Change"
-                  >
-                    Change
-                  </ConfirmButton>
-                )}
-                {isExternalUser && (
-                  <div className={styles.lockMessageClass}>
-                    <ExternalUserTooltip lockMessage={lockMessage} />
-                  </div>
+      <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>
   );
 }
 
@@ -97,7 +95,4 @@ const getTooltipStyles = (theme: GrafanaTheme2) => ({
     font-style: italic;
     margin-right: ${theme.spacing(0.6)};
   `,
-  container: css({
-    marginBottom: theme.spacing(5),
-  }),
 });

public/app/features/admin/UserProfile.tsx

@@ -1,7 +1,7 @@
 import { css, cx } from '@emotion/css';
 import React, { PureComponent, useRef, useState } from 'react';
 
-import { Button, ConfirmButton, ConfirmModal, Input, LegacyInputStatus } from '@grafana/ui';
+import { Button, ConfirmButton, ConfirmModal, Input, LegacyInputStatus, Stack } from '@grafana/ui';
 import { contextSrv } from 'app/core/core';
 import { AccessControlAction, UserDTO } from 'app/types';
 
@@ -80,10 +80,10 @@ export function UserProfile({
   const canEnable = contextSrv.hasPermissionInMetadata(AccessControlAction.UsersEnable, user);
 
   return (
-    <>
+    <div>
       <h3 className="page-heading">User information</h3>
-      <div className="gf-form-group">
-        <div className="gf-form">
+      <Stack direction="column" gap={1.5}>
+        <div>
           <table className="filter-table form-inline">
             <tbody>
               <UserProfileRow
@@ -118,7 +118,7 @@ export function UserProfile({
             </tbody>
           </table>
         </div>
-        <div className={styles.buttonRow}>
+        <Stack gap={2}>
           {canDelete && (
             <>
               <Button variant="destructive" onClick={showDeleteUserModal(true)} ref={deleteUserRef}>
@@ -154,21 +154,12 @@ export function UserProfile({
               />
             </>
           )}
-        </div>
-      </div>
-    </>
+        </Stack>
+      </Stack>
+    </div>
   );
 }
 
-const styles = {
-  buttonRow: css`
-    margin-top: 0.8rem;
-    > * {
-      margin-right: 16px;
-    }
-  `,
-};
-
 interface UserProfileRowProps {
   label: string;
   value?: string;

public/app/features/admin/UserSessions.tsx

@@ -1,7 +1,6 @@
-import { css } from '@emotion/css';
 import React, { PureComponent } from 'react';
 
-import { ConfirmButton, ConfirmModal, Button } from '@grafana/ui';
+import { ConfirmButton, ConfirmModal, Button, Stack } from '@grafana/ui';
 import { contextSrv } from 'app/core/core';
 import { i18nDate } from 'app/core/internationalization';
 import { AccessControlAction, UserSession } from 'app/types';
@@ -48,17 +47,13 @@ class BaseUserSessions extends PureComponent<Props, State> {
     const { sessions } = this.props;
     const { showLogoutModal } = this.state;
 
-    const logoutFromAllDevicesClass = css`
-      margin-top: 0.8rem;
-    `;
-
     const canLogout = contextSrv.hasPermission(AccessControlAction.UsersLogout);
 
     return (
-      <>
+      <div>
         <h3 className="page-heading">Sessions</h3>
-        <div className="gf-form-group">
-          <div className="gf-form">
+        <Stack direction="column" gap={1.5}>
+          <div>
             <table className="filter-table form-inline">
               <thead>
                 <tr>
@@ -95,7 +90,8 @@ class BaseUserSessions extends PureComponent<Props, State> {
               </tbody>
             </table>
           </div>
-          <div className={logoutFromAllDevicesClass}>
+
+          <div>
             {canLogout && sessions.length > 0 && (
               <Button variant="secondary" onClick={this.showLogoutConfirmationModal} ref={this.forceAllLogoutButton}>
                 Force logout from all devices
@@ -110,8 +106,8 @@ class BaseUserSessions extends PureComponent<Props, State> {
               onDismiss={this.dismissLogoutConfirmationModal}
             />
           </div>
-        </div>
-      </>
+        </Stack>
+      </div>
     );
   }
 }