I18n: Migrate to I18next (#55845)

* Switch from lingui from i18next

* Change lingui messages to i18next messages

* Change lingui messages to i18next messages (grafana-ui)

* Init i18n for tests

public/app/features/profile/UserOrganizations.tsx

@@ -1,8 +1,8 @@
-import { Trans } from '@lingui/macro';
 import React, { PureComponent } from 'react';
 
 import { selectors } from '@grafana/e2e-selectors';
 import { Button, LoadingPlaceholder } from '@grafana/ui';
+import { Trans } from 'app/core/internationalization';
 import { UserDTO, UserOrg } from 'app/types';
 
 export interface Props {
@@ -27,7 +27,7 @@ export class UserOrganizations extends PureComponent<Props> {
     return (
       <div>
         <h3 className="page-sub-heading">
-          <Trans id="user-orgs.title">Organizations</Trans>
+          <Trans i18nKey="user-orgs.title">Organizations</Trans>
         </h3>
 
         <div className="gf-form-group">
@@ -35,10 +35,10 @@ export class UserOrganizations extends PureComponent<Props> {
             <thead>
               <tr>
                 <th>
-                  <Trans id="user-orgs.name-column">Name</Trans>
+                  <Trans i18nKey="user-orgs.name-column">Name</Trans>
                 </th>
                 <th>
-                  <Trans id="user-orgs.role-column">Role</Trans>
+                  <Trans i18nKey="user-orgs.role-column">Role</Trans>
                 </th>
                 <th />
               </tr>
@@ -52,7 +52,7 @@ export class UserOrganizations extends PureComponent<Props> {
                     <td className="text-right">
                       {org.orgId === user?.orgId ? (
                         <Button variant="secondary" size="sm" disabled>
-                          <Trans id="user-orgs.current-org-button">Current</Trans>
+                          <Trans i18nKey="user-orgs.current-org-button">Current</Trans>
                         </Button>
                       ) : (
                         <Button
@@ -62,7 +62,7 @@ export class UserOrganizations extends PureComponent<Props> {
                             this.props.setUserOrg(org);
                           }}
                         >
-                          <Trans id="user-orgs.select-org-button">Select organisation</Trans>
+                          <Trans i18nKey="user-orgs.select-org-button">Select organisation</Trans>
                         </Button>
                       )}
                     </td>

public/app/features/profile/UserProfileEditForm.tsx

@@ -1,9 +1,9 @@
-import { Trans, t } from '@lingui/macro';
 import React, { FC } from 'react';
 
 import { selectors } from '@grafana/e2e-selectors';
 import { Button, Field, FieldSet, Form, Icon, Input, Tooltip } from '@grafana/ui';
 import config from 'app/core/config';
+import { t, Trans } from 'app/core/internationalization';
 import { UserDTO } from 'app/types';
 
 import { ProfileUpdateFields } from './types';
@@ -31,46 +31,43 @@ export const UserProfileEditForm: FC<Props> = ({ user, isSavingUser, updateProfi
     <Form onSubmit={onSubmitProfileUpdate} validateOn="onBlur">
       {({ register, errors }) => {
         return (
-          <FieldSet label={<Trans id="user-profile.title">Edit profile</Trans>}>
+          <FieldSet label={<Trans i18nKey="user-profile.title">Edit profile</Trans>}>
             <Field
-              label={t({ id: 'user-profile.fields.name-label', message: 'Name' }) + lockMessage}
+              label={t('user-profile.fields.name-label', 'Name') + lockMessage}
               invalid={!!errors.name}
-              error={<Trans id="user-profile.fields.name-error">Name is required</Trans>}
+              error={<Trans i18nKey="user-profile.fields.name-error">Name is required</Trans>}
               disabled={disabledEdit}
             >
               <Input
                 {...register('name', { required: true })}
                 id="edit-user-profile-name"
-                placeholder={t({ id: 'user-profile.fields.name-label', message: 'Name' })}
+                placeholder={t('user-profile.fields.name-label', 'Name')}
                 defaultValue={user?.name ?? ''}
                 suffix={<InputSuffix />}
               />
             </Field>
 
             <Field
-              label={t({ id: 'user-profile.fields.email-label', message: 'Email' }) + lockMessage}
+              label={t('user-profile.fields.email-label', 'Email') + lockMessage}
               invalid={!!errors.email}
-              error={<Trans id="user-profile.fields.email-error">Email is required</Trans>}
+              error={<Trans i18nKey="user-profile.fields.email-error">Email is required</Trans>}
               disabled={disabledEdit}
             >
               <Input
                 {...register('email', { required: true })}
                 id="edit-user-profile-email"
-                placeholder={t({ id: 'user-profile.fields.email-label', message: 'Email' })}
+                placeholder={t('user-profile.fields.email-label', 'Email')}
                 defaultValue={user?.email ?? ''}
                 suffix={<InputSuffix />}
               />
             </Field>
 
-            <Field
-              label={t({ id: 'user-profile.fields.username-label', message: 'Username' }) + lockMessage}
-              disabled={disabledEdit}
-            >
+            <Field label={t('user-profile.fields.username-label', 'Username') + lockMessage} disabled={disabledEdit}>
               <Input
                 {...register('login')}
                 id="edit-user-profile-username"
                 defaultValue={user?.login ?? ''}
-                placeholder={t({ id: 'user-profile.fields.username-label', message: 'Username' }) + lockMessage}
+                placeholder={t('user-profile.fields.username-label', 'Username') + lockMessage}
                 suffix={<InputSuffix />}
               />
             </Field>
@@ -82,7 +79,7 @@ export const UserProfileEditForm: FC<Props> = ({ user, isSavingUser, updateProfi
                 data-testid={selectors.components.UserProfile.profileSaveButton}
                 type="submit"
               >
-                <Trans id="common.save">Save</Trans>
+                <Trans i18nKey="common.save">Save</Trans>
               </Button>
             </div>
           </FieldSet>

public/app/features/profile/UserSessions.tsx

@@ -1,12 +1,12 @@
-import { t, Trans } from '@lingui/macro';
-import { withI18n, withI18nProps } from '@lingui/react';
+import { t } from 'i18next';
 import React, { PureComponent } from 'react';
 
 import { selectors } from '@grafana/e2e-selectors';
 import { Button, Icon, LoadingPlaceholder } from '@grafana/ui';
+import { i18nDate, Trans } from 'app/core/internationalization';
 import { UserSession } from 'app/types';
 
-interface Props extends withI18nProps {
+interface Props {
   sessions: UserSession[];
   isLoading: boolean;
   revokeUserSession: (tokenId: number) => void;
@@ -14,10 +14,10 @@ interface Props extends withI18nProps {
 
 class UserSessions extends PureComponent<Props> {
   render() {
-    const { isLoading, sessions, revokeUserSession, i18n } = this.props;
+    const { isLoading, sessions, revokeUserSession } = this.props;
 
     if (isLoading) {
-      return <LoadingPlaceholder text={<Trans id="user-sessions.loading">Loading sessions...</Trans>} />;
+      return <LoadingPlaceholder text={<Trans i18nKey="user-sessions.loading">Loading sessions...</Trans>} />;
     }
 
     return (
@@ -30,25 +30,26 @@ class UserSessions extends PureComponent<Props> {
                 <thead>
                   <tr>
                     <th>
-                      <Trans id="user-session.seen-at-column">Last seen</Trans>
+                      <Trans i18nKey="user-session.seen-at-column">Last seen</Trans>
                     </th>
                     <th>
-                      <Trans id="user-session.created-at-column">Logged on</Trans>
+                      <Trans i18nKey="user-session.created-at-column">Logged on</Trans>
                     </th>
                     <th>
-                      <Trans id="user-session.ip-column">IP address</Trans>
+                      <Trans i18nKey="user-session.ip-column">IP address</Trans>
                     </th>
                     <th>
-                      <Trans id="user-session.browser-column">Browser &amp; OS</Trans>
+                      <Trans i18nKey="user-session.browser-column">Browser &amp; 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>{i18n.date(session.createdAt, { dateStyle: 'long' })}</td>
+                      <td>{i18nDate(session.createdAt, { dateStyle: 'long' })}</td>
                       <td>{session.clientIp}</td>
                       <td>
                         {session.browser} on {session.os} {session.osVersion}
@@ -58,7 +59,7 @@ class UserSessions extends PureComponent<Props> {
                           size="sm"
                           variant="destructive"
                           onClick={() => revokeUserSession(session.id)}
-                          aria-label={t({ id: 'user-session.revoke', message: 'Revoke user session' })}
+                          aria-label={t('user-session.revoke', 'Revoke user session')}
                         >
                           <Icon name="power" />
                         </Button>
@@ -75,4 +76,4 @@ class UserSessions extends PureComponent<Props> {
   }
 }
 
-export default withI18n()(UserSessions);
+export default UserSessions;