Support removing array items

e2e-tests/src/components/Banner.tsx

@@ -9,9 +9,11 @@ export interface BannerProps {
   obj?: {
     nestedString?: string;
     nestedBool?: boolean;
+    nestedLitArr?: boolean[];
     nestedObj?: {
       nestedNum?: number;
       nestedColor?: HexColor;
+      nestedExpArr?: string[];
     };
   };
 }
@@ -21,6 +23,9 @@ export const initialProps: BannerProps = {
   num: 5,
   bool: true,
   title: "initial title",
+  obj: {
+    nestedLitArr: [true, false],
+  },
 };
 
 export default function Banner(props: BannerProps) {

e2e-tests/tests/nested-props.spec.ts

@@ -2,6 +2,7 @@ import { expect } from "@playwright/test";
 import { studioTest } from "./infra/studioTest.js";
 
 studioTest("renders nested props", async ({ page, studioPage }) => {
+  await studioPage.addElement("Banner", "Components");
   await studioPage.setActiveComponent("Banner");
   await expect(page.getByTestId("EditorSidebar")).toHaveScreenshot({
     maxDiffPixelRatio: 0.015,

packages/studio/src/components/ArrayPropEditor.tsx

@@ -15,6 +15,7 @@ import { renderPropEditor } from "./PropEditors";
 import { ReactComponent as Plus } from "../icons/plus.svg";
 import PropValueHelpers from "../utils/PropValueHelpers";
 import classNames from "classnames";
+import RemovableElement from "./RemovableElement";
 
 interface ArrayPropEditorProps {
   propName: string;
@@ -131,19 +132,42 @@ function LiteralEditor({
     [itemType, value, updateItems]
   );
 
+  const generateRemoveItem = useCallback(
+    (index: number) => () => {
+      const updatedItems = [...value];
+      updatedItems.splice(index, 1);
+      updateItems(updatedItems);
+    },
+    [value, updateItems]
+  );
+
+  const buttonClasses = classNames("ml-3", {
+    "self-start mt-2": itemType.type === PropValueType.Object,
+    "mb-2": itemType.type !== PropValueType.Object,
+  });
+
   return (
     <>
       {value.length > 0 && (
         <div className="pt-2 ml-2 border-l-2">
-          {Object.entries(propValues).map(([name, propVal]) => {
+          {Object.entries(propValues).map(([name, propVal], index) => {
             const editor = renderPropEditor(
               name,
               { ...itemType, required: false },
               propVal,
               updateItem,
               true
             );
-            return <div key={name}>{editor}</div>;
+            return (
+              <RemovableElement
+                key={name}
+                onRemove={generateRemoveItem(index)}
+                buttonClasses={buttonClasses}
+                ariaLabel={`Remove ${name}`}
+              >
+                {editor}
+              </RemovableElement>
+            );
           })}
         </div>
       )}

packages/studio/src/components/RemovableElement.tsx

@@ -0,0 +1,27 @@
+import { PropsWithChildren } from "react";
+import { ReactComponent as X } from "../icons/x.svg";
+
+export interface RemovableElementProps {
+  onRemove: () => void;
+  buttonClasses?: string;
+  ariaLabel?: string;
+}
+
+export default function RemovableElement(
+  props: PropsWithChildren<RemovableElementProps>
+) {
+  const { children, onRemove, buttonClasses, ariaLabel } = props;
+
+  return (
+    <div className="flex w-full">
+      {children}
+      <button
+        onClick={onRemove}
+        className={buttonClasses}
+        aria-label={ariaLabel}
+      >
+        <X />
+      </button>
+    </div>
+  );
+}

packages/studio/tests/components/ActiveComponentPropEditors.test.tsx

@@ -381,6 +381,17 @@ describe("Array prop", () => {
     value: "document.strings",
     valueType: PropValueType.Array,
   };
+  const literalPropVal: PropVal = {
+    kind: PropValueKind.Literal,
+    valueType: PropValueType.Array,
+    value: [
+      {
+        kind: PropValueKind.Expression,
+        valueType: PropValueType.string,
+        value: "document.name",
+      },
+    ],
+  };
   const propShape: PropShape = {
     arr: {
       type: PropValueType.Array,
@@ -456,31 +467,20 @@ describe("Array prop", () => {
   });
 
   it("correctly adds item to existing literal value", async () => {
-    const propVal: PropVal = {
-      kind: PropValueKind.Literal,
-      valueType: PropValueType.Array,
-      value: [
-        {
-          kind: PropValueKind.Expression,
-          valueType: PropValueType.string,
-          value: "document.name",
-        },
-      ],
-    };
     mockStoreActiveComponent({
       activeComponent: {
         ...activeComponentState,
-        props: { arr: propVal },
+        props: { arr: literalPropVal },
       },
     });
     render(<ActiveComponentPropEditorsWrapper />);
 
     await userEvent.click(screen.getByRole("button", { name: "Add Item" }));
     expect(getComponentProps()).toEqual({
       arr: {
-        ...propVal,
+        ...literalPropVal,
         value: [
-          ...propVal.value,
+          ...literalPropVal.value,
           {
             kind: PropValueKind.Literal,
             valueType: PropValueType.string,
@@ -494,4 +494,64 @@ describe("Array prop", () => {
     );
     expect(screen.getByRole("textbox", { name: "Item 2" })).toHaveValue("");
   });
+
+  it("correctly removes item when there are multiple", async () => {
+    const propVal: PropVal = {
+      ...literalPropVal,
+      value: [
+        {
+          kind: PropValueKind.Expression,
+          valueType: PropValueType.string,
+          value: "document.title",
+        },
+        ...literalPropVal.value,
+      ],
+    };
+    mockStoreActiveComponent({
+      activeComponent: {
+        ...activeComponentState,
+        props: { arr: propVal },
+      },
+    });
+    render(<ActiveComponentPropEditorsWrapper />);
+
+    await userEvent.click(
+      screen.getByRole("button", { name: "Remove Item 1" })
+    );
+    expect(getComponentProps()).toEqual({ arr: literalPropVal });
+    expect(screen.getByRole("textbox", { name: "Item 1" })).toHaveValue(
+      "[[name]]"
+    );
+    expect(screen.queryByRole("textbox", { name: "Item 2" })).toBeNull();
+    const expressionInput = screen.getByRole("textbox", {
+      name: (text) => text.startsWith("arr"),
+    });
+    expect(expressionInput).toHaveValue("");
+    expect(expressionInput).toBeDisabled();
+  });
+
+  it("correctly removes item when there is only one", async () => {
+    mockStoreActiveComponent({
+      activeComponent: {
+        ...activeComponentState,
+        props: { arr: literalPropVal },
+      },
+    });
+    render(<ActiveComponentPropEditorsWrapper />);
+
+    await userEvent.click(
+      screen.getByRole("button", { name: "Remove Item 1" })
+    );
+    expect(getComponentProps()).toEqual({
+      arr: {
+        ...literalPropVal,
+        value: [],
+      },
+    });
+    expect(screen.queryByRole("textbox", { name: "Item 1" })).toBeNull();
+    const expressionInput = screen.getByRole("textbox");
+    expect(expressionInput).toHaveValue("");
+    expect(expressionInput).toBeEnabled();
+    expect(screen.queryByRole("tooltip")).toBeNull();
+  });
 });