Merge branch 'develop' of https://github.com/daita-technologies/interface into fix/group_drag_bound

Author: locpnh0409

package.json

@@ -1,6 +1,6 @@
 {
   "name": "daita-interface",
-  "version": "0.1.0",
+  "version": "1.1.0",
   "private": true,
   "description": "React-based user interface for the DAITA platform.",
   "author": "DAITA Technologies",

src/components/Annotation/Formart/daita/index.ts

@@ -215,7 +215,7 @@ export const exportAnnotation = (
   )}`;
   const link = document.createElement("a");
   link.href = jsonString;
-  link.download = `${imageName.replace(/\.[^.]+$/, "-Daita")}.json`;
+  link.download = `${imageName.replace(/\.[^.]+$/, "-DAITA")}.json`;
 
   link.click();
 };

src/components/CheckingApp/index.tsx

@@ -1,4 +1,4 @@
-import { Box, CircularProgress } from "@mui/material";
+import { Box, CircularProgress, Typography } from "@mui/material";
 import {
   CREDENTIAL_TOKEN_EXPIRE_NAME,
   LAST_USED_SYSTEM_STORAGE_KEY_NAME,
@@ -154,12 +154,14 @@ const CheckingApp = function ({ children }: TokenCheckingProps) {
     return (
       <Box
         display="flex"
+        flexDirection="column"
         alignItems="center"
         justifyContent="center"
         minHeight="100vh"
         minWidth="100vw"
       >
         <CircularProgress size={40} />
+        <Typography mt={1}>Checking application status...</Typography>
       </Box>
     );
   }

src/components/CloneProjectModal/index.tsx

@@ -23,6 +23,7 @@ import {
 } from "reduxes/annotationProject/selector";
 import { useEffect } from "react";
 import { selectorListProjects } from "reduxes/project/selector";
+import { MAX_PROJECT_DESCRIPTION_CHARACTER_LENGTH } from "constants/defaultValues";
 import { CloneProjectToAnnotationFields } from "./type";
 
 const CloneProjectModal = function () {
@@ -162,8 +163,8 @@ const CloneProjectModal = function () {
             {...register("annotationProjectDescription", {
               required: false,
               maxLength: {
-                value: 75,
-                message: `Your project description cannot exceed 75 characters.`,
+                value: MAX_PROJECT_DESCRIPTION_CHARACTER_LENGTH,
+                message: `Your project description cannot exceed ${MAX_PROJECT_DESCRIPTION_CHARACTER_LENGTH} characters.`,
               },
             })}
             error={!!errors.annotationProjectDescription}

src/components/CreateProjectModal/index.tsx

@@ -25,7 +25,9 @@ import {
   EMPTY_DATASET_CREATE_PROJECT_DATASET_TYPE_VALUE,
   EXISTING_DATASET_CREATE_PROJECT_DATASET_TYPE_VALUE,
   ID_TOKEN_NAME,
+  MAX_DATASET_IMAGES,
   MAX_DATASET_IMAGES_CREATE_PROJECT,
+  MAX_PROJECT_DESCRIPTION_CHARACTER_LENGTH,
   MIN_DATASET_IMAGES_CREATE_PROJECT,
   TOKEN_NAME,
   // MAX_ALLOW_UPLOAD_IMAGES,
@@ -122,7 +124,11 @@ const CreateProjectDatasetTypeControl = function (
                   if (selectedPrebuildDataset) {
                     setPrebuildDataset(selectedPrebuildDataset);
                     setNumberOfDatasetImages(
-                      selectedPrebuildDataset.totalImage
+                      selectedPrebuildDataset?.totalImage &&
+                        selectedPrebuildDataset.totalImage > MAX_DATASET_IMAGES
+                        ? MAX_DATASET_IMAGES
+                        : selectedPrebuildDataset?.totalImage ||
+                            MIN_DATASET_IMAGES_CREATE_PROJECT
                     );
                   }
                 }}
@@ -138,7 +144,7 @@ const CreateProjectDatasetTypeControl = function (
               />
             </Box>
             <Typography variant="body2" mt={2}>
-              Number of dataset images:
+              Number of images:
             </Typography>
             <Box display="flex" alignItems="center" columnGap={1} pl={1}>
               <Slider
@@ -149,8 +155,11 @@ const CreateProjectDatasetTypeControl = function (
                 onChange={onChangeNumberOfDatasetImagesSlider}
                 min={MIN_DATASET_IMAGES_CREATE_PROJECT}
                 max={
-                  prebuildDataset?.totalImage ||
-                  MIN_DATASET_IMAGES_CREATE_PROJECT
+                  prebuildDataset?.totalImage &&
+                  prebuildDataset.totalImage > MAX_DATASET_IMAGES
+                    ? MAX_DATASET_IMAGES
+                    : prebuildDataset?.totalImage ||
+                      MIN_DATASET_IMAGES_CREATE_PROJECT
                 }
                 disabled={isCreatingProject}
               />
@@ -162,8 +171,11 @@ const CreateProjectDatasetTypeControl = function (
                 inputProps={{
                   min: MIN_DATASET_IMAGES_CREATE_PROJECT,
                   max:
-                    prebuildDataset?.totalImage ||
-                    MIN_DATASET_IMAGES_CREATE_PROJECT,
+                    prebuildDataset?.totalImage &&
+                    prebuildDataset.totalImage > MAX_DATASET_IMAGES
+                      ? MAX_DATASET_IMAGES
+                      : prebuildDataset?.totalImage ||
+                        MIN_DATASET_IMAGES_CREATE_PROJECT,
                   type: "number",
                   "aria-labelledby": "input-number-of-dataset-images-slider",
                 }}
@@ -312,8 +324,8 @@ const CreateProjectModal = function (props: CreateProjectModalProps) {
             {...register("description", {
               required: false,
               maxLength: {
-                value: 75,
-                message: `Your project description cannot exceed 75 characters.`,
+                value: MAX_PROJECT_DESCRIPTION_CHARACTER_LENGTH,
+                message: `Your project description cannot exceed ${MAX_PROJECT_DESCRIPTION_CHARACTER_LENGTH} characters.`,
               },
             })}
             error={!!errors.description}

src/components/FeedbackComponent/FeedbackForm.tsx

@@ -207,7 +207,7 @@ export const FeedbackForm = function ({
             color="text.secondary"
             display="inline-block"
           >
-            File types supported: JPG, PNG, Max size: 5 MB
+            File types supported: JPG, PNG, Max size: 2 MB
           </Typography>
           <Box mt={1}>
             <UploadZoneWrapper
@@ -329,6 +329,8 @@ export const FeedbackFormSlack = function ({
             if (onSendFail) onSendFail();
             resolve({ action: FeedbackFormAction.NO_ACTION });
           });
+      } else {
+        resolve({ action: FeedbackFormAction.NO_ACTION });
       }
     });
 

src/components/InviteFriendModal/index.tsx

@@ -122,11 +122,20 @@ const InviteFriendModal = function () {
         {isFetchingInviteEmailTemplate ? (
           <Box
             display="flex"
+            flexDirection="column"
             alignItems="center"
             justifyContent="center"
             my={2}
           >
             <CircularProgress size={20} />
+            <Typography
+              mt={1}
+              color="text.secondary"
+              variant="body2"
+              fontStyle="italic"
+            >
+              Fetching email content...
+            </Typography>
           </Box>
         ) : (
           <Box

src/components/ReCaptchaInput/index.tsx

@@ -37,6 +37,7 @@ const ReCaptchaInput = function ({
             ref={recaptchaRef}
             sitekey={RECAPTCHA_SITE_KEY}
             size="invisible"
+            badge="inline"
           />
           {/* NOTE: We use invisible recaptcha is auto generate when submitted, therefore no need show required message */}
           {error && error.message !== REQUIRE_RECAPTCHA_ERROR_MESSAGE && (

src/components/UploadFile/index.tsx

@@ -460,7 +460,7 @@ const UploadFile = function (props: UploadFileProps) {
               border: "1px dashed",
               borderColor: isDragActive ? "primary.main" : "text.secondary",
               borderWidth: isDragActive ? 2 : 1,
-              cursor: "pointer",
+              cursor: isDisabledUpload ? "not-allowed" : "pointer",
               borderRadius: "6px",
             }}
             display="flex"

src/constants/defaultValues.tsx

@@ -164,6 +164,8 @@ export const CREATE_PROJECT_DATASET_TYPE_LIST: CreateProjectDatasetTypeControlTy
     },
   ];
 
+export const MAX_PROJECT_DESCRIPTION_CHARACTER_LENGTH = 300;
+
 export const MIN_DATASET_IMAGES_CREATE_PROJECT = 1;
 export const MAX_DATASET_IMAGES_CREATE_PROJECT = 1000;
 
@@ -234,3 +236,5 @@ export const MAX_SIZE_FEEDBACK_ATTACHED_FILE = 2000000;
 
 export const QUIT_FEEDBACK_ALERT_MESSAGE =
   "Your feedback content will be lost. Are you sure you want to quit?";
+
+export const MAX_DATASET_IMAGES = 800;