Chore: Mark up User Profile page for translation (#43874)

* Mark up User profile page for translation

* Extract new messages

* updated selectors

* update selectors

* wip TestProvider

* update tests

* fix field labels

* extract new messages

* don't store date objects in redux state

* don't store date objects in redux state
This commit is contained in:
Josh Hunt
2022-01-17 16:58:49 +00:00
committed by GitHub
parent 6d072ad84d
commit 36983d8d3b
17 changed files with 629 additions and 66 deletions

View File

@@ -3,8 +3,9 @@ import { css } from '@emotion/css';
import { ConfirmButton, ConfirmModal, Button } from '@grafana/ui';
import { AccessControlAction, UserSession } from 'app/types';
import { contextSrv } from 'app/core/core';
import { withI18n, withI18nProps } from '@lingui/react';
interface Props {
interface Props extends withI18nProps {
sessions: UserSession[];
onSessionRevoke: (id: number) => void;
@@ -15,7 +16,7 @@ interface State {
showLogoutModal: boolean;
}
export class UserSessions extends PureComponent<Props, State> {
class BaseUserSessions extends PureComponent<Props, State> {
forceAllLogoutButton = React.createRef<HTMLButtonElement>();
state: State = {
showLogoutModal: false,
@@ -43,7 +44,7 @@ export class UserSessions extends PureComponent<Props, State> {
};
render() {
const { sessions } = this.props;
const { sessions, i18n } = this.props;
const { showLogoutModal } = this.state;
const logoutFromAllDevicesClass = css`
@@ -71,7 +72,7 @@ export class UserSessions extends PureComponent<Props, State> {
sessions.map((session, index) => (
<tr key={`${session.id}-${index}`}>
<td>{session.isActive ? 'Now' : session.seenAt}</td>
<td>{session.createdAt}</td>
<td>{i18n.date(session.createdAt, { dateStyle: 'long' })}</td>
<td>{session.clientIp}</td>
<td>{`${session.browser} on ${session.os} ${session.osVersion}`}</td>
<td>
@@ -113,3 +114,5 @@ export class UserSessions extends PureComponent<Props, State> {
);
}
}
export const UserSessions = withI18n()(BaseUserSessions);

View File

@@ -1,5 +1,5 @@
import config from 'app/core/config';
import { dateTimeFormat, dateTimeFormatTimeAgo } from '@grafana/data';
import { dateTimeFormatTimeAgo } from '@grafana/data';
import { featureEnabled, getBackendSrv, locationService } from '@grafana/runtime';
import { ThunkResult, LdapUser, UserSession, UserDTO, AccessControlAction, UserFilter } from 'app/types';
@@ -144,12 +144,13 @@ export function loadUserSessions(userId: number): ThunkResult<void> {
const tokens = await getBackendSrv().get(`/api/admin/users/${userId}/auth-tokens`);
tokens.reverse();
const sessions = tokens.map((session: UserSession) => {
return {
id: session.id,
isActive: session.isActive,
seenAt: dateTimeFormatTimeAgo(session.seenAt),
createdAt: dateTimeFormat(session.createdAt, { format: 'MMMM DD, YYYY' }),
createdAt: session.createdAt,
clientIp: session.clientIp,
browser: session.browser,
browserVersion: session.browserVersion,
@@ -158,6 +159,7 @@ export function loadUserSessions(userId: number): ThunkResult<void> {
device: session.device,
};
});
dispatch(userSessionsLoadedAction(sessions));
};
}