fixup! feat(validate_image): update form for validate image project & tutorial creation

Author: tnagorra

manager-dashboard/app/Base/styles.css

@@ -105,6 +105,7 @@ p {
     --height-mobile-preview-builarea-content: 30rem;
     --height-mobile-preview-footprint-content: 22rem;
     --height-mobile-preview-change-detection-content: 14rem;
+    --height-mobile-preview-validate-image-content: 22rem;
 
     --radius-popup-border: 0.25rem;
     --radius-scrollbar-border: 0.25rem;

manager-dashboard/app/views/NewProject/index.tsx

@@ -512,6 +512,13 @@ function NewProject(props: Props) {
                 }));
                 return;
             }
+            if (result.right.images.length > MAX_IMAGES) {
+                setError((err) => ({
+                    ...getErrorObject(err),
+                    [nonFieldError]: `Too many images ${result.right.images.length} uploaded. Please do not exceed ${MAX_IMAGES} images.`,
+                }));
+                return;
+            }
             setFieldValue(
                 () => result.right.images.map((image) => ({
                     sourceIdentifier: String(image.id),

manager-dashboard/app/views/NewProject/utils.ts

@@ -271,8 +271,7 @@ export const projectFormSchema: ProjectFormSchema = {
                 validations: [getNoMoreThanNCharacterCondition(XL_TEXT_MAX_LENGTH)],
             },
             tutorialId: {
-                // TODO(tnagorra): we need to make this required later
-                // required: true,
+                required: true,
             },
             projectImage: {
                 required: true,
@@ -342,31 +341,6 @@ export const projectFormSchema: ProjectFormSchema = {
             },
         );
 
-        baseSchema = addCondition(
-            baseSchema,
-            value,
-            ['projectType'],
-            ['tileServer'],
-            (v) => {
-                const projectType = v?.projectType;
-                if (
-                    projectType === PROJECT_TYPE_BUILD_AREA
-                    || projectType === PROJECT_TYPE_COMPLETENESS
-                    || projectType === PROJECT_TYPE_CHANGE_DETECTION
-                    || projectType === PROJECT_TYPE_FOOTPRINT
-                ) {
-                    return {
-                        tileServer: {
-                            fields: tileServerFieldsSchema,
-                        },
-                    };
-                }
-                return {
-                    tileServer: { forceValue: nullValue },
-                };
-            },
-        );
-
         baseSchema = addCondition(
             baseSchema,
             value,
@@ -476,6 +450,31 @@ export const projectFormSchema: ProjectFormSchema = {
             },
         );
 
+        baseSchema = addCondition(
+            baseSchema,
+            value,
+            ['projectType'],
+            ['tileServer'],
+            (v) => {
+                const projectType = v?.projectType;
+                if (
+                    projectType === PROJECT_TYPE_BUILD_AREA
+                    || projectType === PROJECT_TYPE_COMPLETENESS
+                    || projectType === PROJECT_TYPE_CHANGE_DETECTION
+                    || projectType === PROJECT_TYPE_FOOTPRINT
+                ) {
+                    return {
+                        tileServer: {
+                            fields: tileServerFieldsSchema,
+                        },
+                    };
+                }
+                return {
+                    tileServer: { forceValue: nullValue },
+                };
+            },
+        );
+
         // Validate
 
         baseSchema = addCondition(

manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ValidateImagePreview/index.tsx

@@ -36,7 +36,7 @@ export default function ValidateImagePreview(props: Props) {
 
     return (
         <MobilePreview
-            className={_cs(styles.footprintGeoJsonPreview, className)}
+            className={_cs(styles.validateImagePreview, className)}
             contentClassName={styles.content}
             heading={lookFor || '{look for}'}
             headingLabel="You are looking for:"
@@ -45,7 +45,7 @@ export default function ValidateImagePreview(props: Props) {
             popupDescription={previewPopUp?.description || '{description}'}
         >
             <img
-                className={styles.mapPreview}
+                className={styles.imagePreview}
                 src={image?.url}
                 alt="Preview"
             />

manager-dashboard/app/views/NewTutorial/ScenarioPageInput/ValidateImagePreview/styles.css

@@ -1,14 +1,14 @@
-.footprint-geo-json-preview {
+.validate-image-preview {
     .content {
         display: flex;
         flex-direction: column;
         gap: var(--spacing-large);
 
-        .map-preview {
+        .image-preview {
             position: relative;
             border: 1px solid red;
             width: 100%;
-            height: var(--height-mobile-preview-footprint-content);
+            height: var(--height-mobile-preview-validate-image-content);
         }
 
         .options {

manager-dashboard/app/views/NewTutorial/index.tsx

@@ -99,6 +99,7 @@ import {
     BuildAreaProperties,
     ChangeDetectionProperties,
     ImageType,
+    MAX_IMAGES,
 } from './utils';
 
 import CustomOptionPreview from './CustomOptionInput/CustomOptionPreview';
@@ -694,6 +695,13 @@ function NewTutorial(props: Props) {
                 }));
                 return;
             }
+            if (result.right.images.length > MAX_IMAGES) {
+                setError((err) => ({
+                    ...getErrorObject(err),
+                    [nonFieldError]: `Too many images ${result.right.images.length} uploaded. Please do not exceed ${MAX_IMAGES} images.`,
+                }));
+                return;
+            }
 
             const newImages = result.right.images.map((image, index) => ({
                 sourceIdentifier: String(image.id),

manager-dashboard/app/views/NewTutorial/utils.ts

@@ -612,6 +612,8 @@ export const tutorialFormSchema: TutorialFormSchema = {
             },
         };
 
+        // common
+
         baseSchema = addCondition(
             baseSchema,
             value,
@@ -914,6 +916,8 @@ export const tutorialFormSchema: TutorialFormSchema = {
             },
         );
 
+        // validate image
+
         baseSchema = addCondition(
             baseSchema,
             value,