fix: remarks field and error handling

src/common/services/ExtractableService.ts

@@ -16,6 +16,7 @@ export const extractableCreateAPI = async (
   username: string,
   password: string,
   authorizedBy: string,
+  remarks: string,
   data: Record<string, unknown>,
   setLoading: loadingUpdater
 ): Promise<ExtractableRecord | undefined> => {
@@ -29,6 +30,7 @@ export const extractableCreateAPI = async (
           username,
           password,
           authorizedBy,
+          remarks,
           data,
         },
       }
@@ -47,6 +49,7 @@ export const extractableDeleteAPI = async (
   username: string,
   password: string,
   authorizedBy: string,
+  remarks: string,
   data: Record<string, unknown>,
   setLoading: loadingUpdater
 ): Promise<string | undefined> => {
@@ -60,6 +63,7 @@ export const extractableDeleteAPI = async (
           username,
           password,
           authorizedBy,
+          remarks,
           data,
         },
       }

src/common/services/HistoryService.ts

@@ -9,6 +9,7 @@ export interface HistoryRecord {
   authorizedBy: string;
   action: string;
   authorizedAt: string;
+  remarks: string;
 }
 
 export const historyAPI = async (

src/components/Wizard/MetadataConfirm/MetadataConfirm.tsx

@@ -44,7 +44,8 @@ export const MetadataConfirm: React.FC<WizardStepProps> = ({
         user.username,
         formData.password,
         selectedItem.approver as string,
-        { additionalInfo: selectedItem.additionalInfo },
+        selectedItem.remarks as string,
+        {},
         setIsLoading
       );
       if (response && isMounted) {
@@ -107,8 +108,8 @@ export const MetadataConfirm: React.FC<WizardStepProps> = ({
               { value: selectedItem?.approver as string }
             ),
             intl.formatMessage(
-              { id: 'form.message.confirm.additionalInfo' },
-              { value: selectedItem?.additionalInfo as string }
+              { id: 'form.message.confirm.remarks' },
+              { value: selectedItem?.remarks as string }
             ),
           ].map((line, index) => (
             <Typography tag="div" key={index} className="line">

src/components/Wizard/MetadataForm/MetadataForm.tsx

@@ -14,10 +14,9 @@ export const MetadataForm: React.FC<WizardStepProps> = ({
 }) => {
   const intl = useIntl();
 
-  const [formData, setFormData] = useState<{ approver: string; additionalInfo: string }>({
+  const [formData, setFormData] = useState<{ approver: string; remarks: string }>({
     approver: typeof selectedItem?.approver === 'string' ? selectedItem.approver : '',
-    additionalInfo:
-      typeof selectedItem?.additionalInfo === 'string' ? selectedItem.additionalInfo : '',
+    remarks: typeof selectedItem?.remarks === 'string' ? selectedItem.remarks : '',
   });
 
   useEffect(() => {
@@ -76,17 +75,17 @@ export const MetadataForm: React.FC<WizardStepProps> = ({
             />
           </Box>
           <Box className="formGroup">
-            <label htmlFor="additionalInfo">
-              <FormattedMessage id="form.additionalInfo.label" />
+            <label htmlFor="remarks">
+              <FormattedMessage id="form.remarks.label" />
             </label>
             <TextField
-              id="additionalInfo"
-              name="additionalInfo"
-              value={formData.additionalInfo}
+              id="remarks"
+              name="remarks"
+              value={formData.remarks}
               onChange={handleChange}
               textarea={true}
               rows={4}
-              placeholder={intl.formatMessage({ id: 'form.additionalInfo.placeholder' })}
+              placeholder={intl.formatMessage({ id: 'form.remarks.placeholder' })}
             />
           </Box>
         </form>

src/components/Wizard/MetadataHistory/MetadataHistory.css

@@ -49,7 +49,6 @@
 }
 
 .historyContainer .cardContent {
-  font-size: var(--mdc-theme-gc-title-font-size);
   margin: 6px 0;
 }
 

src/components/Wizard/MetadataHistory/MetadataHistory.tsx

@@ -55,22 +55,25 @@ export const MetadataHistory: React.FC<WizardStepProps> = ({
           historyItems.map((item, index) => (
             <Box key={item.id} className={`historyCard ${index === 0 ? 'active' : ''}`}>
               <Box className="cardHeader">
-                <Typography tag="span" className="cardTitle">
+                <Box className="cardTitle">
                   <AutoDirectionBox>{formatDate(item.authorizedAt, locale, true)}</AutoDirectionBox>
-                </Typography>
-                <Typography tag="span" className="cardSecondary">
-                  {item.username}
-                </Typography>
+                  <Typography
+                    tag="span"
+                    className={`${item.action.toLowerCase() === 'create' ? 'green' : 'orange'}`}
+                  >
+                    <FormattedMessage id={`history.action.${item.action.toLowerCase()}`} />
+                  </Typography>
+                  <Typography tag="span">
+                    <FormattedMessage
+                      id={`history.action.authorizedBy`}
+                      values={{ value: item.authorizedBy }}
+                    />
+                  </Typography>
+                </Box>
+                <Box className="cardSecondary">{item.username}</Box>
               </Box>
-              <Box
-                className={`cardContent ${
-                  item.action.toLowerCase() === 'create' ? 'green' : 'orange'
-                }`}
-              >
-                <FormattedMessage
-                  id={`history.action.${item.action.toLowerCase()}`}
-                  values={{ value: item.authorizedBy }}
-                />
+              <Box className="cardContent">
+                <FormattedMessage id={`history.action.remarks`} values={{ value: item.remarks }} />
               </Box>
             </Box>
           ))}

src/i18n/locales/en.json

@@ -2,6 +2,7 @@
   "app.title": "Coordinate Extract Approval",
 
   "err.code.INVALID_CREDENTIALS": "Invalid username or password",
+  "err.code.INVALID_RECORD_NAME": "Model not found",
 
   "auth.login.btn": "Login",
   "auth.logout.btn": "Logout",
@@ -87,22 +88,24 @@
   "details.field.productSource": "Product Source",
   "details.field.productStatus": "Product Status",
 
-  "history.action.create": " · Approved · by {value}",
-  "history.action.delete": " · Rejected · by {value}",
+  "history.action.create": " Approved ",
+  "history.action.delete": " Rejected ",
+  "history.action.authorizedBy": " by {value} ",
+  "history.action.remarks": "Comments: {value}",
 
   "form.message.approve": "Approval of the model will expose it to operational factors for coordinates extraction",
   "form.message.reject": "Rejecting the approval will remove the model from exposure to operational factors",
   "form.message.confirm.title": "Summary of the action:",
   "form.message.confirm.model": "Model: {value}",
   "form.message.confirm.action": "Action: {value}",
   "form.message.confirm.approver": "Approver: {value}",
-  "form.message.confirm.additionalInfo": "Comments: {value}",
+  "form.message.confirm.remarks": "Comments: {value}",
   "form.message.confirm.approve": "Approve for coordinates extraction",
   "form.message.confirm.reject": "Reject approval",
   "form.approver.label": "Approver full name *",
   "form.approver.placeholder": "Enter your full name",
-  "form.additionalInfo.label": "Comments (optional)",
-  "form.additionalInfo.placeholder": "Add comments here...",
+  "form.remarks.label": "Comments (optional)",
+  "form.remarks.placeholder": "Add comments here...",
   "form.password.label": "Password *",
   "form.password.placeholder": "Re-enter password for confirmation to proceed with the action"
 }

src/i18n/locales/he.json

@@ -2,6 +2,7 @@
   "app.title": "אישור מודל לחילוץ נ.צ.",
 
   "err.code.INVALID_CREDENTIALS": "שם משתמש או סיסמה לא חוקיים",
+  "err.code.INVALID_RECORD_NAME": "מודל לא קיים",
 
   "auth.login.btn": "התחבר",
   "auth.logout.btn": "התנתק",
@@ -90,22 +91,24 @@
   "details.field.productSource": "מקור",
   "details.field.productStatus": "סטטוס",
 
-  "history.action.create": " · אושר · על-ידי {value}",
-  "history.action.delete": " · הוסר · על-ידי {value}",
+  "history.action.create": " אושר ",
+  "history.action.delete": " הוסר ",
+  "history.action.authorizedBy": " על-ידי {value}",
+  "history.action.remarks": "הערות: {value}",
 
   "form.message.approve": "אישור המודל יחשוף אותו לגורמים מבצעיים לחילוץ קואורדינטות",
   "form.message.reject": "ביטול האישור יסיר את המודל מחשיפה לגורמים מבצעיים",
   "form.message.confirm.title": "סיכום הפעולה:",
   "form.message.confirm.model": "מודל: {value}",
   "form.message.confirm.action": "פעולה: {value}",
   "form.message.confirm.approver": "מבצע הפעולה: {value}",
-  "form.message.confirm.additionalInfo": "הערות: {value}",
+  "form.message.confirm.remarks": "הערות: {value}",
   "form.message.confirm.approve": "אישור לחילוץ נ.צ.",
   "form.message.confirm.reject": "ביטול אישור",
   "form.approver.label": "שם מלא של מבצע הפעולה *",
   "form.approver.placeholder": "הזן את שמך המלא",
-  "form.additionalInfo.label": "הערות (אופציונלי)",
-  "form.additionalInfo.placeholder": "הוסף הערות לתיעוד...",
+  "form.remarks.label": "הערות (אופציונלי)",
+  "form.remarks.placeholder": "הוסף הערות לתיעוד...",
   "form.password.label": "סיסמה *",
   "form.password.placeholder": "הזן סיסמה שנית לאימות וביצוע הפעולה"
 }

src/utils/requestHandler.ts

@@ -2,6 +2,7 @@ import axios, { AxiosRequestConfig, AxiosResponse, Method } from 'axios';
 import { SnackbarManager } from '../components/common/Snackbar/SnackbarManager';
 import appConfig from './Config';
 import { getSnackbarErrorMessage } from './snackbarError';
+import { get } from 'lodash';
 
 interface IResource {
   url: string;
@@ -97,7 +98,12 @@ export const execute = async (
     return response?.status === 204 ? 'OK' : response?.data;
   } catch (error) {
     if (submitErrorToSnackbarQueue) {
-      SnackbarManager.notify(getSnackbarErrorMessage((error as any).message as string));
+      const respData = get(error, 'response.data');
+      let errText = (error as any).message;
+      if (respData) {
+        errText = `err.code.${respData.code}`;
+      }
+      SnackbarManager.notify(getSnackbarErrorMessage(errText, respData ? true : false));
     }
     throw error;
   }

src/utils/snackbarError.tsx

@@ -1,14 +1,14 @@
 import { FormattedMessage } from 'react-intl';
 import { ExclamationSVGIcon } from '../common/icons/ExclamationSVGIcon';
 
-export const getSnackbarErrorMessage = (body: string) => {
+export const getSnackbarErrorMessage = (body: string, isTranslate: boolean) => {
   return {
     title: (
       <b>
         <FormattedMessage id="general.error" />
       </b>
     ),
-    body: body,
+    body: !isTranslate ? body : <FormattedMessage id={body} />,
     dismissesOnAction: true,
     icon: <ExclamationSVGIcon color="var(--mdc-theme-gc-error)" />,
     leading: false,