feat(localization): enhance task drawer translations and UI consistency

- Updated translations for task drawer components in Albanian, German, Spanish, Portuguese, Chinese, and English to improve clarity and consistency. - Added new keys for task progress, activity log, and time log forms to support enhanced user interactions. - Improved placeholder texts, error messages, and button labels for better user experience across multiple languages. - Refactored activity log component to utilize translation keys for dynamic content rendering.
2025-07-08 15:51:47 +05:30
parent f06851fa37
commit 8fb33e311d
10 changed files with 394 additions and 171 deletions
--- a/worklenz-frontend/src/components/task-drawer/shared/activity-log/task-drawer-activity-log.tsx
+++ b/worklenz-frontend/src/components/task-drawer/shared/activity-log/task-drawer-activity-log.tsx
@@ -20,7 +20,7 @@ const TaskDrawerActivityLog = () => {
  const [loading, setLoading] = useState<boolean>(false);
  const { selectedTaskId, taskFormViewModel } = useAppSelector(state => state.taskDrawerReducer);
  const { mode: themeMode } = useAppSelector(state => state.themeReducer);
-  const { t } = useTranslation();
+  const { t } = useTranslation('task-drawer/task-drawer');

  useEffect(() => {
    fetchActivityLogs();
@@ -73,7 +73,7 @@ const TaskDrawerActivityLog = () => {
            </Tag>
            <ArrowRightOutlined />
            &nbsp;
-            <Tag color={'default'}>{activity.log_type === 'create' ? 'ADD' : 'REMOVE'}</Tag>
+            <Tag color={'default'}>{activity.log_type === 'create' ? t('taskActivityLogTab.add') : t('taskActivityLogTab.remove')}</Tag>
          </Flex>
        );

@@ -87,7 +87,7 @@ const TaskDrawerActivityLog = () => {
                  : activity.previous_status?.color_code
              }
            >
-              {truncateText(activity.previous_status?.name) || 'None'}
+              {truncateText(activity.previous_status?.name) || t('taskActivityLogTab.none')}
            </Tag>
            <ArrowRightOutlined />
            &nbsp;
@@ -98,7 +98,7 @@ const TaskDrawerActivityLog = () => {
                  : activity.next_status?.color_code
              }
            >
-              {truncateText(activity.next_status?.name) || 'None'}
+              {truncateText(activity.next_status?.name) || t('taskActivityLogTab.none')}
            </Tag>
          </Flex>
        );
@@ -113,7 +113,7 @@ const TaskDrawerActivityLog = () => {
                  : activity.previous_priority?.color_code
              }
            >
-              {truncateText(activity.previous_priority?.name) || 'None'}
+              {truncateText(activity.previous_priority?.name) || t('taskActivityLogTab.none')}
            </Tag>
            <ArrowRightOutlined />
            &nbsp;
@@ -124,7 +124,7 @@ const TaskDrawerActivityLog = () => {
                  : activity.next_priority?.color_code
              }
            >
-              {truncateText(activity.next_priority?.name) || 'None'}
+              {truncateText(activity.next_priority?.name) || t('taskActivityLogTab.none')}
            </Tag>
          </Flex>
        );
@@ -133,12 +133,12 @@ const TaskDrawerActivityLog = () => {
        return (
          <Flex gap={4} align="center">
            <Tag color={activity.previous_phase?.color_code}>
-              {truncateText(activity.previous_phase?.name) || 'None'}
+              {truncateText(activity.previous_phase?.name) || t('taskActivityLogTab.none')}
            </Tag>
            <ArrowRightOutlined />
            &nbsp;
            <Tag color={activity.next_phase?.color_code}>
-              {truncateText(activity.next_phase?.name) || 'None'}
+              {truncateText(activity.next_phase?.name) || t('taskActivityLogTab.none')}
            </Tag>
          </Flex>
        );
@@ -156,20 +156,20 @@ const TaskDrawerActivityLog = () => {
      case IActivityLogAttributeTypes.WEIGHT:
        return (
          <Flex gap={4} align="center">
-            <Tag color="purple">Weight: {activity.previous || '100'}</Tag>
+            <Tag color="purple">{t('taskActivityLogTab.weight')}: {activity.previous || '100'}</Tag>
            <ArrowRightOutlined />
            &nbsp;
-            <Tag color="purple">Weight: {activity.current || '100'}</Tag>
+            <Tag color="purple">{t('taskActivityLogTab.weight')}: {activity.current || '100'}</Tag>
          </Flex>
        );

      default:
        return (
          <Flex gap={4} align="center">
-            <Tag color={'default'}>{truncateText(activity.previous) || 'None'}</Tag>
+            <Tag color={'default'}>{truncateText(activity.previous) || t('taskActivityLogTab.none')}</Tag>
            <ArrowRightOutlined />
            &nbsp;
-            <Tag color={'default'}>{truncateText(activity.current) || 'None'}</Tag>
+            <Tag color={'default'}>{truncateText(activity.current) || t('taskActivityLogTab.none')}</Tag>
          </Flex>
        );
    }
@@ -222,7 +222,7 @@ const TaskDrawerActivityLog = () => {
              <Flex vertical gap={4}>
                <Flex gap={4} align="center">
                  <Typography.Text strong>{activityLogs.name}</Typography.Text>
-                  <Typography.Text>created the task.</Typography.Text>
+                  <Typography.Text>{t('taskActivityLogTab.createdTask')}</Typography.Text>
                  <Tooltip
                    title={
                      activityLogs.created_at
--- a/worklenz-frontend/src/components/task-drawer/shared/info-tab/info-tab-footer.tsx
+++ b/worklenz-frontend/src/components/task-drawer/shared/info-tab/info-tab-footer.tsx
@@ -1,18 +1,14 @@
 import { Button, Flex, Form, Mentions, Space, Tooltip, Typography, message } from 'antd';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { PaperClipOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
-import { updateTaskCounts } from '@/features/task-management/task-management.slice';
 import { colors } from '@/styles/colors';
 import { themeWiseColor } from '@/utils/themeWiseColor';
-import { formatDateTimeWithLocale } from '@/utils/format-date-time-with-locale';
-import { calculateTimeDifference } from '@/utils/calculate-time-difference';
 import {
  IMentionMemberSelectOption,
-  IMentionMemberViewModel,
 } from '@/types/project/projectComments.types';
-import { projectCommentsApiService } from '@/api/projects/comments/project-comments.api.service';
 import { ITaskCommentsCreateRequest } from '@/types/tasks/task-comments.types';
 import { ITaskAttachment } from '@/types/tasks/task-attachment-view-model';
 import logger from '@/utils/errorLogger';
@@ -40,6 +36,7 @@ const formatFileSize = (bytes: number): string => {
 };

 const InfoTabFooter = () => {
+  const { t } = useTranslation('task-drawer/task-drawer');
  const MAXIMUM_FILE_COUNT = 5;

  const [characterLength, setCharacterLength] = useState<number>(0);
@@ -136,7 +133,7 @@ const InfoTabFooter = () => {
    if (!selectedTaskId || !projectId) return;

    if (!isCommentValid()) {
-      message.error('Please add a comment or attach files');
+      message.error(t('taskInfoTab.comments.addCommentError'));
      return;
    }

@@ -188,7 +185,7 @@ const InfoTabFooter = () => {
    const files = Array.from(event.target.files);

    if (selectedFiles.length + files.length > MAXIMUM_FILE_COUNT) {
-      message.error(`You can only upload a maximum of ${MAXIMUM_FILE_COUNT} files`);
+      message.error(t('taskInfoTab.comments.maxFilesError', { count: MAXIMUM_FILE_COUNT }));
      return;
    }

@@ -219,7 +216,7 @@ const InfoTabFooter = () => {
      }
    } catch (error) {
      console.error('Failed to process files:', error);
-      message.error('Failed to process files');
+      message.error(t('taskInfoTab.comments.processFilesError'));
    } finally {
      setUploading(false);

@@ -279,7 +276,7 @@ const InfoTabFooter = () => {
          }}
        >
          <Mentions
-            placeholder={'Add a comment...'}
+            placeholder={t('taskInfoTab.comments.addCommentPlaceholder')}
            options={mentionsOptions}
            autoSize
            maxLength={5000}
@@ -312,7 +309,7 @@ const InfoTabFooter = () => {
          {selectedFiles.length > 0 && (
            <Flex vertical gap={8} style={{ marginTop: 12 }}>
              <Typography.Title level={5} style={{ margin: 0 }}>
-                Selected Files (Up to 25MB, Maximum of {MAXIMUM_FILE_COUNT})
+{t('taskInfoTab.comments.selectedFiles', { count: MAXIMUM_FILE_COUNT })}
              </Typography.Title>
              <Flex
                vertical
@@ -368,7 +365,7 @@ const InfoTabFooter = () => {
                    icon={<PlusOutlined />}
                    disabled={selectedFiles.length >= MAXIMUM_FILE_COUNT || uploading}
                  >
-                    Add more files
+                    {t('taskInfoTab.comments.addMoreFiles')}
                  </Button>
                </Flex>
              </Flex>
@@ -378,7 +375,7 @@ const InfoTabFooter = () => {
          <Form.Item name={'comment'} style={{ marginBlock: 12 }}>
            <div>
              <Mentions
-                placeholder={'Add a comment...'}
+                placeholder={t('taskInfoTab.comments.addCommentPlaceholder')}
                options={mentionsOptions}
                autoSize
                autoFocus
@@ -427,8 +424,8 @@ const InfoTabFooter = () => {
              <Tooltip
                title={
                  selectedFiles.length >= MAXIMUM_FILE_COUNT
-                    ? `Maximum ${MAXIMUM_FILE_COUNT} files allowed`
-                    : 'Attach files'
+                    ? t('taskInfoTab.comments.maxFilesError', { count: MAXIMUM_FILE_COUNT })
+                    : t('taskInfoTab.comments.attachFiles')
                }
              >
                <Button
@@ -439,14 +436,14 @@ const InfoTabFooter = () => {
              </Tooltip>

              <Space>
-                <Button onClick={handleCancel}>Cancel</Button>
+                <Button onClick={handleCancel}>{t('taskInfoTab.comments.cancel')}</Button>
                <Button
                  type="primary"
                  disabled={!isCommentValid()}
                  onClick={handleSubmit}
                  loading={uploading}
                >
-                  Comment
+                  {t('taskInfoTab.comments.commentButton')}
                </Button>
              </Space>
            </Flex>
@@ -463,9 +460,10 @@ const InfoTabFooter = () => {
          }
        >
          <Typography.Text type="secondary" style={{ fontSize: 12 }}>
-            Created{' '}
-            {taskFormViewModel?.task?.created_from_now || 'N/A'}{' '}
-            by {taskFormViewModel?.task?.reporter}
+{t('taskInfoTab.comments.createdBy', { 
+              time: taskFormViewModel?.task?.created_from_now || 'N/A',
+              user: taskFormViewModel?.task?.reporter || ''
+            })}
          </Typography.Text>
        </Tooltip>
        <Tooltip
@@ -476,8 +474,9 @@ const InfoTabFooter = () => {
          }
        >
          <Typography.Text type="secondary" style={{ fontSize: 12 }}>
-            Updated{' '}
-            {taskFormViewModel?.task?.updated_from_now || 'N/A'}
+{t('taskInfoTab.comments.updatedTime', { 
+              time: taskFormViewModel?.task?.updated_from_now || 'N/A'
+            })}
          </Typography.Text>
        </Tooltip>
      </Flex>
--- a/worklenz-frontend/src/components/task-drawer/shared/time-log/time-log-form.tsx
+++ b/worklenz-frontend/src/components/task-drawer/shared/time-log/time-log-form.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Button, DatePicker, Form, Input, TimePicker, Flex } from 'antd';
 import { ClockCircleOutlined } from '@ant-design/icons';
+import { useTranslation } from 'react-i18next';
 import dayjs from 'dayjs';

 import { useAppSelector } from '@/hooks/useAppSelector';
@@ -25,6 +26,7 @@ const TimeLogForm = ({
  initialValues,
  mode = 'create',
 }: TimeLogFormProps) => {
+  const { t } = useTranslation('task-drawer/task-drawer');
  const currentSession = useAuthService().getCurrentSession();
  const { socket, connected } = useSocket();
  const [form] = Form.useForm();
@@ -140,7 +142,7 @@ const TimeLogForm = ({
      form.setFields([
        {
          name: 'endTime',
-          errors: ['End time must be after start time'],
+          errors: [t('taskTimeLogTab.timeLogForm.endTimeAfterStartError')],
        },
      ]);
      return;
@@ -219,44 +221,44 @@ const TimeLogForm = ({
          <Flex gap={8} wrap="wrap" style={{ width: '100%' }}>
            <Form.Item
              name="date"
-              label="Date"
-              rules={[{ required: true, message: 'Please select a date' }]}
+                                label={t('taskTimeLogTab.timeLogForm.date')}
+                  rules={[{ required: true, message: t('taskTimeLogTab.timeLogForm.selectDateError') }]}
            >
              <DatePicker disabledDate={current => current && current.toDate() > new Date()} />
            </Form.Item>

            <Form.Item
              name="startTime"
-              label="Start Time"
-              rules={[{ required: true, message: 'Please select start time' }]}
+                                label={t('taskTimeLogTab.timeLogForm.startTime')}
+                  rules={[{ required: true, message: t('taskTimeLogTab.timeLogForm.selectStartTimeError') }]}
            >
              <TimePicker format="HH:mm" />
            </Form.Item>

            <Form.Item
              name="endTime"
-              label="End Time"
-              rules={[{ required: true, message: 'Please select end time' }]}
+                                label={t('taskTimeLogTab.timeLogForm.endTime')}
+                  rules={[{ required: true, message: t('taskTimeLogTab.timeLogForm.selectEndTimeError') }]}
            >
              <TimePicker format="HH:mm" />
            </Form.Item>
          </Flex>
        </Form.Item>

-        <Form.Item name="description" label="Work Description" style={{ marginBlockEnd: 12 }}>
-          <Input.TextArea placeholder="Add a description" />
+                    <Form.Item name="description" label={t('taskTimeLogTab.timeLogForm.workDescription')} style={{ marginBlockEnd: 12 }}>
+              <Input.TextArea placeholder={t('taskTimeLogTab.timeLogForm.descriptionPlaceholder')} />
        </Form.Item>

        <Form.Item style={{ marginBlockEnd: 0 }}>
          <Flex gap={8}>
-            <Button onClick={onCancel}>Cancel</Button>
+            <Button onClick={onCancel}>{t('taskTimeLogTab.timeLogForm.cancel')}</Button>
            <Button
              type="primary"
              icon={<ClockCircleOutlined />}
              disabled={!isFormValid()}
              htmlType="submit"
            >
-              {mode === 'edit' ? 'Update time' : 'Log time'}
+              {mode === 'edit' ? t('taskTimeLogTab.timeLogForm.updateTime') : t('taskTimeLogTab.timeLogForm.logTime')}
            </Button>
          </Flex>
        </Form.Item>
--- a/worklenz-frontend/src/pages/settings/profile/profile-settings.tsx
+++ b/worklenz-frontend/src/pages/settings/profile/profile-settings.tsx
@@ -4,11 +4,9 @@ import {
  Card,
  Flex,
  Form,
-  GetProp,
  Input,
  Tooltip,
  Typography,
-  UploadProps,
  Spin,
  Skeleton,
 } from 'antd';
@@ -20,7 +18,6 @@ import { useDocumentTitle } from '@/hooks/useDoumentTItle';
 import { useMixpanelTracking } from '@/hooks/useMixpanelTracking';
 import {
  evt_settings_profile_visit,
-  evt_settings_profile_avatar_upload,
  evt_settings_profile_name_change,
  evt_settings_profile_picture_update,
 } from '@/shared/worklenz-analytics-events';