[DOP-20892] add russian language

src/app/config/antd/constants.ts

@@ -0,0 +1,6 @@
+import { Language } from '@shared/config';
+
+export const ANTD_LOCALES = {
+  [Language.EN]: () => import('antd/es/locale/en_US'),
+  [Language.RU]: () => import('antd/es/locale/ru_RU'),
+};

src/app/config/antd/index.tsx

@@ -1,11 +1,27 @@
 import { ConfigProvider } from 'antd';
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Locale } from 'antd/lib/locale-provider';
+import { Language } from '@shared/config';
 
 import { getValidateMessages } from './utils';
+import { ANTD_LOCALES } from './constants';
 
 export const AntdConfigProvider = ({ children }: PropsWithChildren) => {
-  const { t } = useTranslation('error');
+  const { t, i18n } = useTranslation('error');
+  const [locale, setLocale] = useState<Locale>();
 
-  return <ConfigProvider form={{ validateMessages: getValidateMessages(t) }}>{children}</ConfigProvider>;
+  useEffect(() => {
+    const loadLocale = async () => {
+      const localeModule = await ANTD_LOCALES[i18n.language as Language]();
+      setLocale(localeModule.default);
+    };
+    loadLocale();
+  }, [i18n.language]);
+
+  return (
+    <ConfigProvider locale={locale} form={{ validateMessages: getValidateMessages(t) }}>
+      {children}
+    </ConfigProvider>
+  );
 };

src/app/styles/antd.less

@@ -54,3 +54,8 @@
     margin-left: 8px;
   }
 }
+
+.ant-picker-ranges {
+  display: flex;
+  justify-content: space-between;
+}

src/app/styles/variables.less

@@ -22,5 +22,4 @@
 @picker-bg: #f1f3f5;
 @tooltip-bg: #000000;
 
-// custom constants
-@select-transformation-type-width: 180px;
+@line-height-base: 1.5;

src/entities/auth/hooks/useLogout/index.ts

@@ -1,3 +1,4 @@
+import { Language, LANGUAGE_LOCAL_STORAGE_KEY } from '@shared/config';
 import { useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 
@@ -6,7 +7,9 @@ export const useLogout = () => {
   const queryClient = useQueryClient();
 
   const logout = () => {
+    const language = localStorage.getItem(LANGUAGE_LOCAL_STORAGE_KEY) || Language.EN;
     localStorage.clear();
+    localStorage.setItem(LANGUAGE_LOCAL_STORAGE_KEY, language);
     queryClient.clear();
     navigate('/login');
   };

src/entities/connection/api/types.ts

@@ -200,6 +200,7 @@ export type CreateConnectionRequest = {
 
 export type UpdateConnectionRequest = {
   id: number;
+  group_id: number;
   name: string;
   description: string;
 } & ConnectionData;

src/entities/group/api/hooks/useDeleteGroupUser/index.ts

@@ -17,7 +17,7 @@ export const useDeleteGroupUser = (data: DeleteGroupUserRequest): UseMutationRes
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: [GroupQueryKey.GET_GROUP_USERS, data.groupId] });
       notification.success({
-        message: t('deleteGroupSuccess', { ns: 'group' }),
+        message: t('deleteUserFromGroupSuccess', { ns: 'group' }),
       });
     },
     onError: (error) => {

src/entities/group/ui/GroupWarningAlert/styles.module.less

@@ -1,3 +1,8 @@
 .alert {
-  width: 500px;
+  width: fit-content;
+  padding: 20px 32px 20px 24px !important;
+
+  :global(.ant-alert-message) {
+    font-weight: 700;
+  }
 }

src/entities/run/ui/RunStatusBadge/index.tsx

@@ -1,11 +1,14 @@
 import React, { memo } from 'react';
 import { Badge } from 'antd';
 import { RUN_STATUS_DISPLAY } from '@entities/run';
+import { useTranslation } from 'react-i18next';
 
 import { RunStatusBadgeProps } from './types';
 import { getRunStatusColor } from './utils';
 
 export const RunStatusBadge = memo(({ status }: RunStatusBadgeProps) => {
-  const statusText = RUN_STATUS_DISPLAY[status];
+  const { t } = useTranslation('run');
+  const statusText = t(RUN_STATUS_DISPLAY[status]);
+
   return <Badge count={statusText} status={getRunStatusColor(status)} />;
 });

src/entities/transfer/api/types.ts

@@ -83,7 +83,7 @@ export interface GetTransferRequest {
 
 export interface CreateTransferRequest extends Omit<Transfer, 'id'> {}
 
-export interface UpdateTransferRequest extends Omit<Transfer, 'group_id'> {}
+export interface UpdateTransferRequest extends Transfer {}
 
 export interface DeleteTransferRequest {
   id: number;

src/entities/transformation/ui/TransformationForm/TransformationForm.tsx

@@ -12,7 +12,7 @@ const TransformationFormComponent = <T extends TransformationType>({
   transformationType,
   ...props
 }: TransformationFormProps<T>) => {
-  const { t } = useTranslation('transformation');
+  const { t } = useTranslation();
   const { isDisplayed } = useShowButtons();
 
   const formInstance = Form.useFormInstance();
@@ -44,7 +44,7 @@ const TransformationFormComponent = <T extends TransformationType>({
             />
           ))}
           <Button className="nodrag" size="large" type="primary" onClick={() => add()} hidden={!isDisplayed}>
-            {t('addItem')}
+            {t('add')}
           </Button>
         </div>
       )}

src/entities/transformation/ui/TransformationForm/components/FilterColumnsValue/index.tsx

@@ -4,6 +4,7 @@ import { TransformationFilterColumnsType } from '@entities/transformation';
 import { useTranslation } from 'react-i18next';
 
 import { FilterColumnsValueProps } from './types';
+import classes from './styles.module.less';
 
 export const FilterColumnsValue = ({ name, type }: FilterColumnsValueProps) => {
   const { t } = useTranslation('transformation');
@@ -14,13 +15,13 @@ export const FilterColumnsValue = ({ name, type }: FilterColumnsValueProps) => {
       return null;
     case TransformationFilterColumnsType.RENAME:
       return (
-        <Form.Item label={t('value')} name={[name, 'to']} rules={[{ required: true }]}>
+        <Form.Item className={classes.control} label={t('value')} name={[name, 'to']} rules={[{ required: true }]}>
           <Input className="nodrag" size="large" />
         </Form.Item>
       );
     case TransformationFilterColumnsType.CAST:
       return (
-        <Form.Item label={t('value')} name={[name, 'as_type']} rules={[{ required: true }]}>
+        <Form.Item className={classes.control} label={t('value')} name={[name, 'as_type']} rules={[{ required: true }]}>
           <Input className="nodrag" size="large" />
         </Form.Item>
       );

src/entities/transformation/ui/TransformationForm/components/FilterColumnsValue/styles.module.less

@@ -0,0 +1,3 @@
+.control {
+  width: 250px;
+}

src/entities/transformation/ui/TransformationForm/components/FilterFileValue/components/FilterFileRegexpValue/styles.module.less

@@ -1,4 +1,3 @@
 .control {
-  width: calc(100% - @select-transformation-type-width);
-  flex-grow: 1;
+  width: 250px;
 }

src/entities/transformation/ui/TransformationForm/components/FilterFileValue/components/FilterFileSizeValue/index.tsx

@@ -13,15 +13,10 @@ export const FilterFileSizeValue = memo(({ name }: FilterFileSizeValueProps) =>
 
   return (
     <>
-      <Form.Item label={t('value')} name={[name, 'extra_value']} rules={[{ required: true }]}>
+      <Form.Item className={classes.value} label={t('value')} name={[name, 'extra_value']} rules={[{ required: true }]}>
         <InputNumber className="nodrag" size="large" min={0} />
       </Form.Item>
-      <Form.Item
-        className={classes.select}
-        label={t('fileSizeUnit')}
-        name={[name, 'unit']}
-        rules={[{ required: true }]}
-      >
+      <Form.Item className={classes.unit} label={t('fileSizeUnit')} name={[name, 'unit']} rules={[{ required: true }]}>
         <Select size="large" className="nodrag" options={fileSizeUnitSelectOptions} placeholder={t('selectUnit')} />
       </Form.Item>
     </>

src/entities/transformation/ui/TransformationForm/components/FilterFileValue/components/FilterFileSizeValue/styles.module.less

@@ -1,3 +1,7 @@
-.select {
-  width: 120px;
+.unit {
+  width: 175px;
+}
+
+.value {
+  width: 250px;
 }

src/entities/transformation/ui/TransformationForm/components/FilterRowsValue/index.tsx

@@ -4,6 +4,7 @@ import { TransformationFilterRowsType } from '@entities/transformation';
 import { useTranslation } from 'react-i18next';
 
 import { FilterRowsValueProps } from './types';
+import classes from './styles.module.less';
 
 export const FilterRowsValue = ({ name, type }: FilterRowsValueProps) => {
   const { t } = useTranslation('transformation');
@@ -15,7 +16,7 @@ export const FilterRowsValue = ({ name, type }: FilterRowsValueProps) => {
       return null;
     default:
       return (
-        <Form.Item label={t('value')} name={[name, 'value']} rules={[{ required: true }]}>
+        <Form.Item className={classes.control} label={t('value')} name={[name, 'value']} rules={[{ required: true }]}>
           <Input className="nodrag" size="large" />
         </Form.Item>
       );

src/entities/transformation/ui/TransformationForm/components/FilterRowsValue/styles.module.less

@@ -0,0 +1,3 @@
+.control {
+  width: 250px;
+}

src/entities/transformation/ui/TransformationForm/components/TransformationFormItem/TransformationFormItem.tsx

@@ -3,6 +3,7 @@ import React, { useMemo, useState } from 'react';
 import { DeleteOutlined } from '@ant-design/icons';
 import { Select } from '@shared/ui';
 import { useTranslation } from 'react-i18next';
+import clsx from 'clsx';
 
 import { TransformationsFormNestedType, TransformationType } from '../../../../types';
 import { FilterComponent } from '../FilterComponent';
@@ -53,12 +54,18 @@ export const TransformationFormItem = <T extends TransformationType>({
           size="large"
           options={nestedTypesSelectOptions}
           onChange={setType}
-          placeholder={t('selectType')}
+          placeholder={t('selectOption')}
         />
       </Form.Item>
       <FilterComponent name={name} nestedType={type} transformationType={transformationType} />
       {onRemove && (
-        <Button className="nodrag" type="primary" danger onClick={handleRemove}>
+        <Button
+          className={clsx('nodrag', [classes.deleteButton])}
+          type="primary"
+          size="large"
+          danger
+          onClick={handleRemove}
+        >
           <DeleteOutlined />
         </Button>
       )}

src/entities/transformation/ui/TransformationForm/components/TransformationFormItem/styles.module.less

@@ -1,18 +1,22 @@
 .root {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 12px;
 
   &:first-of-type {
     align-items: flex-start;
   }
 
   .column {
-    min-width: 300px;
+    width: 250px;
   }
 
   .type {
-    min-width: @select-transformation-type-width;
+    min-width: 180px;
     flex-grow: 1;
   }
+
+  .deleteButton {
+    margin-top: calc(1rem * @line-height-base);
+  }
 }

src/features/auth/Login/index.tsx

@@ -18,7 +18,7 @@ export const Login = () => {
 
   return (
     <div className={classes.wrapper}>
-      <Title>{t('signIn')}</Title>
+      <Title>{t('auth')}</Title>
       <ManagedForm mutationFunction={authService.login} onSuccess={onSuccess}>
         <Form.Item label={t('username')} name="username" rules={[{ required: true }]}>
           <Input size="large" />
@@ -28,7 +28,7 @@ export const Login = () => {
           <Input.Password size="large" />
         </Form.Item>
 
-        <ControlButtons isCancelButtonHidden />
+        <ControlButtons isCancelButtonHidden submitButtonText={t('signIn')} />
       </ManagedForm>
     </div>
   );

src/features/auth/Login/styles.module.less

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   gap: 32px;
-  width: 360px;
+  width: 420px;
   padding: 32px;
   background-color: @white;
   border-radius: 16px;

src/features/connection/ConnectionList/utils/getConnectionListColumns/index.tsx

@@ -10,7 +10,7 @@ export const getConnectionListColumns = (t: TFunction<'shared'>) => {
     {
       title: t('id'),
       dataIndex: 'id',
-      width: 150,
+      width: 160,
     },
     {
       title: t('name'),

src/features/connection/UpdateConnection/index.tsx

@@ -13,7 +13,7 @@ export const UpdateConnection = ({ connection, group }: UpdateConnectionProps) =
   const navigate = useNavigate();
 
   const handleUpdateConnection = (values: UpdateConnectionForm) => {
-    return connectionService.updateConnection(Object.assign({ id: connectionId, ...values }));
+    return connectionService.updateConnection(Object.assign({ id: connectionId, group_id, ...values }));
   };
 
   const onSuccess = (response: Connection) => {

src/features/connection/UpdateConnection/types.ts

@@ -1,7 +1,7 @@
 import { Connection, UpdateConnectionRequest } from '@entities/connection';
 import { GroupData } from '@entities/group';
 
-export type UpdateConnectionForm = Omit<UpdateConnectionRequest, 'id'>;
+export type UpdateConnectionForm = Omit<UpdateConnectionRequest, 'id' | 'group_id'>;
 
 export interface UpdateConnectionProps {
   connection: Connection;

src/features/group/GroupList/utils/getGroupListColumns/index.tsx

@@ -11,7 +11,7 @@ export const getGroupListColumns = (t: TFunction) => {
       title: t('id'),
       dataIndex: 'id',
       render: (name, record) => record.data.id,
-      width: 150,
+      width: 160,
     },
     {
       title: t('name'),

src/features/group/GroupUserList/utils/getGroupUserListColumns/index.ts

@@ -1,4 +1,5 @@
 import { GroupUser } from '@entities/group';
+import { USER_ROLE_DISPLAY } from '@shared/constants';
 import { PaginationResponse } from '@shared/types';
 import { TableColumns } from '@shared/ui';
 import { TFunction } from 'i18next';
@@ -8,15 +9,17 @@ export const getGroupUserListColumns = (t: TFunction) => {
     {
       title: t('id'),
       dataIndex: 'id',
-      width: 150,
+      width: 160,
     },
     {
       title: t('username', { ns: 'auth' }),
       dataIndex: 'username',
+      width: 400,
     },
     {
       title: t('role', { ns: 'group' }),
       dataIndex: 'role',
+      render: (name, record) => t(USER_ROLE_DISPLAY[record.role], { ns: 'auth' }),
       width: 200,
     },
   ];

src/features/queue/QueueList/utils/getQueueListColumns/index.tsx

@@ -10,7 +10,7 @@ export const getQueueListColumns = (t: TFunction) => {
     {
       title: t('id'),
       dataIndex: 'id',
-      width: 150,
+      width: 160,
     },
     {
       title: t('name'),

src/features/run/RunList/utils/getRunListColumns/index.tsx

@@ -15,7 +15,7 @@ export const getRunListColumns = (t: TFunction<'run'>) => {
       title: t('id', { ns: 'shared' }),
       dataIndex: 'id',
       render: (id, record) => <Link to={`/transfers/runs/${record.id}`}>{id}</Link>,
-      width: 80,
+      width: 160,
     },
     {
       title: t('status'),