Chore: Removes gf-form from profile/user (#79552)
* Chore: Removes gf-form from profile/user * message * better
This commit is contained in:
Khushi Jain
@@ -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"]
|
||||
],
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user