feat: migrate bug report form from Ant Design to MUI

package.json

@@ -17,6 +17,7 @@
     "@mui/x-tree-view": "^9.0.1",
     "@rolldown/plugin-babel": "^0.2.3",
     "@tanstack/query-async-storage-persister": "^5.96.2",
+    "@tanstack/react-form": "^1.33.1",
     "@tanstack/react-query": "^5.101.2",
     "@tanstack/react-query-persist-client": "^5.101.2",
     "antd": "^6.3.3",

src/api/issues/createIssue.ts

@@ -0,0 +1,6 @@
+import { CreateIssuePostRequest } from '@hasadna/open-bus-api-client'
+import { ISSUES_API } from 'src/api/apiConfig'
+
+export function createIssue(createIssuePostRequest: CreateIssuePostRequest) {
+  return ISSUES_API.issuesCreatePost({ createIssuePostRequest })
+}

src/api/issues/index.ts

@@ -0,0 +1 @@
+export * from './createIssue'

src/layout/header/HeaderLinks/HeaderLinks.tsx

@@ -1,10 +1,19 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useNavigate } from 'react-router'
-import { HEADER_LINKS } from 'src/routes'
+import { useLocation, useNavigate } from 'react-router'
+import { HEADER_LINKS, PAGES } from 'src/routes'
 import './HeaderLinks.scss'
 
 type LinkType = Omit<(typeof HEADER_LINKS)[number], 'element'>
+const LANG_PREFIXES = new Set(['he', 'en', 'ru', 'ar'])
+
+function normalizeRoutePath(pathname: string) {
+  const segments = pathname.split('/').filter(Boolean)
+  if (LANG_PREFIXES.has(segments[0])) {
+    segments.shift()
+  }
+  return segments.length ? `/${segments.join('/')}` : '/'
+}
 
 type HeaderLinksProps = {
   children?: React.ReactNode
@@ -43,14 +52,26 @@ const ExternalLink = ({ label, path, icon }: LinkType) => {
 
 const InternalLink = ({ label, path, icon }: LinkType) => {
   const navigate = useNavigate()
+  const location = useLocation()
   const { t } = useTranslation()
+  const currentRoute = PAGES.find((page) => page.path === normalizeRoutePath(location.pathname))
+
   return (
     <div
       aria-label={t(label)}
       title={t(label)}
       className="header-link"
       onClick={() => {
-        navigate(path)
+        navigate(path, {
+          state: currentRoute
+            ? {
+                from: {
+                  path: `${location.pathname}${location.search}`,
+                  title: t(currentRoute.label),
+                },
+              }
+            : undefined,
+        })
       }}>
       {icon}
     </div>

src/locale/ar.json

@@ -369,8 +369,16 @@
   "reportBug": {
     "description": "هذا النموذج معدّ حتّى نقدر نستقبل فيدباك ونحسّن التطبيق. لمعلوماتك - النموذج بينبعث لـGitHub، والمعلومات اللي رح تذكرها فيه رح تكون عامّة.",
     "error": "حدث خطأ أثناء إرسال التقرير. يُرجى المحاولة مرّة أخرى لاحقاً.",
+    "successTitle": "تمّ إرسال التقرير",
     "success": "شكراً على التقرير!",
-    "viewIssue": "لمشاهدة التقرير (GitHub)"
+    "viewIssue": "لمشاهدة التقرير",
+    "backToPreviousPage": "العودة إلى الصفحة السابقة",
+    "validation": {
+      "required": "{{field}} حقل إلزامي",
+      "min": "{{field}} لازم يحتوي على الأقل {{count}} أحرف",
+      "max": "{{field}} ممكن يحتوي حتى {{count}} أحرف",
+      "email": "يُرجى إدخال بريد إلكتروني صحيح"
+    }
   },
   "plannedRoute": "المسار المخطّط",
   "actualRoute": "المسار الفعلي",

src/locale/en.json

@@ -396,8 +396,16 @@
   "reportBug": {
     "description": "This form is designed so that we can receive feedback and improve the application. Please be aware that the submitted information will be available to the public.",
     "error": "An error occurred while sending the report. Please try again later.",
+    "successTitle": "Report sent",
     "success": "The report was sent successfully. Thank you for your help!",
-    "viewIssue": "View issue (GitHub)"
+    "viewIssue": "View report",
+    "backToPreviousPage": "Back to the previous page",
+    "validation": {
+      "required": "{{field}} is required",
+      "min": "{{field}} must contain at least {{count}} characters",
+      "max": "{{field}} can contain up to {{count}} characters",
+      "email": "Enter a valid email address"
+    }
   },
   "plannedRoute": "Planned Route",
   "actualRoute": "Actual Route",

src/locale/he.json

@@ -396,8 +396,16 @@
   "reportBug": {
     "description": "טופס זה נועד על מנת שנוכל לקבל פידבק ולשפר את האפליקציה. לתשומת לבך - הטופס נשלח לGitHub, והמידע שיצויין בו יהיה ציבורי.",
     "error": "אירעה שגיאה בעת שליחת הדיווח. אנא נסה שוב מאוחר יותר.",
+    "successTitle": "הדיווח נשלח",
     "success": "תודה על הדיווח!",
-    "viewIssue": "לצפייה בדיווח (GitHub)"
+    "viewIssue": "לצפייה בדיווח",
+    "backToPreviousPage": "חזרה לעמוד הקודם",
+    "validation": {
+      "required": "{{field}} הוא שדה חובה",
+      "min": "{{field}} חייב להכיל לפחות {{count}} תווים",
+      "max": "{{field}} יכול להכיל עד {{count}} תווים",
+      "email": "נא להזין כתובת אימייל תקינה"
+    }
   },
   "plannedRoute": "מסלול מתוכנן",
   "actualRoute": "מסלול בפועל",

src/locale/ru.json

@@ -369,8 +369,16 @@
   "reportBug": {
     "description": "Эта форма предназначена для того, чтобы мы могли получать обратную связь и улучшать приложение. Пожалуйста, имейте в виду, что отправленная информация будет доступна общественности.",
     "error": "Произошла ошибка при отправке отчета. Пожалуйста, попробуйте позже.",
+    "successTitle": "Отчет отправлен",
     "success": "Отчет был отправлен успешно. Спасибо за вашу помощь!",
-    "viewIssue": "Просмотреть проблему (GitHub)"
+    "viewIssue": "Просмотреть отчет",
+    "backToPreviousPage": "Вернуться на предыдущую страницу",
+    "validation": {
+      "required": "{{field}} обязательно",
+      "min": "{{field}} должно содержать не менее {{count}} символов",
+      "max": "{{field}} может содержать до {{count}} символов",
+      "email": "Введите корректный email"
+    }
   },
   "plannedRoute": "Запланированный маршрут",
   "actualRoute": "Фактический маршрут",

src/pages/bugReport/BugReportForm.scss

@@ -1,18 +1,6 @@
-main:has(> div > .bug-report-form-container) {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 0 !important;
-  padding: 24px;
-
-  > div {
-    display: contents;
-  }
-}
-
 .bug-report-form-container {
-  max-width: 800px;
-  width: 100%;
+  width: min(100%, 800px);
+  margin-inline: auto;
   padding: 24px;
   max-height: 100%;
   display: flex;
@@ -22,31 +10,21 @@ main:has(> div > .bug-report-form-container) {
     display: contents;
   }
 
-  form {
-    overflow-y: auto !important;
-  }
-
-  .ant-form-item-label > label {
-    display: block !important;
-    font-weight: bold;
-    text-align: start;
-    text-wrap: pretty;
-    min-height: fit-content;
+  .bug-report-form {
+    overflow-y: auto;
+    padding-block-start: 24px;
   }
 
   @media (width <= 600px) {
-    padding: 15px;
+    padding: 12px;
+    border-radius: 0;
 
     .logo {
       font-size: 24px;
       margin: 10px auto;
       border-top: 4px solid gray;
       border-bottom: 6px solid gray;
     }
-
-    .ant-btn-primary {
-      width: 100%;
-    }
   }
 
   .logo {
@@ -62,42 +40,14 @@ main:has(> div > .bug-report-form-container) {
     display: flex;
   }
 
-  .ant-form-item {
-    margin-bottom: 20px;
-    width: 100%;
-
-    &:last-child {
-      margin-bottom: 0;
-      text-align: end;
-
-      & > div > div {
-        max-width: 100%;
-      }
-    }
-  }
-
-  .ant-input,
-  .ant-input-textarea {
-    width: 100%;
-  }
-
-  .ant-upload {
-    width: 100%;
+  .bug-report-form-actions {
+    display: flex;
+    justify-content: flex-end;
   }
+}
 
-  .ant-btn-primary {
-    background-color: #1890ff;
-    border-color: #1890ff;
-    display: inline-block;
-    font-weight: 500;
-
-    &:hover {
-      background-color: #40a9ff;
-      border-color: #40a9ff;
-    }
-
-    &:focus {
-      box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
-    }
+.bug-report-page {
+  @media (width <= 600px) {
+    margin-inline: -24px;
   }
 }