Merge pull request #410 from contentstack/VE-5643-multiple-file-replace-button

fix(VE-5643): Replace button is visible for parent wrapper for Multiple file field

Author: hiteshshetty-dev

src/__test__/data/fields.ts

@@ -35,3 +35,18 @@ export const mockMultipleLinkFieldSchema: ISchemaFieldMap = {
     non_localizable: false,
     unique: false,
 };
+
+export const mockMultipleFileFieldSchema: ISchemaFieldMap = {
+    data_type: "file",
+    display_name: "File",
+    uid: "file",
+    extensions: [],
+    field_metadata: {
+        description: "",
+        rich_text_type: "standard"
+    },
+    mandatory: false,
+    multiple: true,
+    non_localizable: false,
+    unique: false,
+};

src/visualBuilder/components/FieldToolbar.tsx

@@ -144,7 +144,6 @@ function FieldToolbarComponent(
 
         fieldType = getFieldType(fieldSchema);
         isModalEditable = ALLOWED_MODAL_EDITABLE_FIELD.includes(fieldType);
-        isReplaceAllowed = ALLOWED_REPLACE_FIELDS.includes(fieldType);
 
         Icon = fieldIcons[fieldType];
 
@@ -166,6 +165,7 @@ function FieldToolbarComponent(
                 fieldMetadata.instance.fieldPathWithIndex ||
                 fieldMetadata.multipleFieldMetadata?.index === -1);
 
+        isReplaceAllowed = ALLOWED_REPLACE_FIELDS.includes(fieldType) && !isWholeMultipleField;
         // if (
         //     DEFAULT_MULTIPLE_FIELDS.includes(fieldType) &&
         //     isWholeMultipleField &&

src/visualBuilder/components/__test__/fieldToolbar.test.tsx

@@ -7,7 +7,7 @@ import {
 } from "../../utils/instanceHandlers";
 import { ISchemaFieldMap } from "../../utils/types/index.types";
 import FieldToolbarComponent from "../FieldToolbar";
-import { mockMultipleLinkFieldSchema, singleLineFieldSchema } from "../../../__test__/data/fields";
+import { mockMultipleLinkFieldSchema, mockMultipleFileFieldSchema } from "../../../__test__/data/fields";
 import { asyncRender } from "../../../__test__/utils";
 import { VisualBuilderCslpEventDetails } from "../../types/visualBuilder.types";
 
@@ -180,4 +180,60 @@ describe("MultipleFieldToolbarComponent", () => {
         );
         expect(variantIcon).toBeInTheDocument();
     });
+
+    describe("'Replace button' visibility for multiple file fields", () => {
+        beforeEach(() => {
+            vi.spyOn(FieldSchemaMap, "getFieldSchema").mockResolvedValue(
+                mockMultipleFileFieldSchema
+            );
+        });
+
+        test("'replace button' is hidden for parent wrapper of multiple file field", async () => {
+            const parentWrapperMetadata: CslpData = {
+                ...mockMultipleFieldMetadata,
+                fieldPathWithIndex: "files",
+                instance: {
+                    fieldPathWithIndex: "files"
+                },
+            };
+
+            const parentWrapperEventDetails = {
+                ...mockEventDetails,
+                fieldMetadata: parentWrapperMetadata
+            };
+
+            const { container } = await asyncRender(
+                <FieldToolbarComponent
+                    eventDetails={parentWrapperEventDetails}
+                />
+            );
+
+            const replaceButton = container.querySelector('[data-testid="visual-builder-replace-file"]');
+            expect(replaceButton).not.toBeInTheDocument();
+        });
+
+        test("'replace button' is visible for individual field in multiple file field", async () => {
+            const individualFieldMetadata: CslpData = {
+                ...mockMultipleFieldMetadata,
+                fieldPathWithIndex: "files",
+                instance: {
+                    fieldPathWithIndex: "files.0"
+                },
+            };
+
+            const individualFieldEventDetails = {
+                ...mockEventDetails,
+                fieldMetadata: individualFieldMetadata
+            };
+
+            const { container } = await asyncRender(
+                <FieldToolbarComponent
+                    eventDetails={individualFieldEventDetails}
+                />
+            );
+
+            const replaceButton = container.querySelector('[data-testid="visual-builder-replace-file"]');
+            expect(replaceButton).toBeInTheDocument();
+        });
+    });
 });