feat: remove "delete" button from props asset (#5004)

In image and link components we allow to delete added asset. Though with
tooltip and "reset/delete" we no longer need additional controls.

<img width="287" alt="Screenshot 2025-03-15 at 13 36 02"
src="https://github.com/user-attachments/assets/d9923253-2ef6-4628-be2f-699278a63ddc"
/>
<img width="246" alt="Screenshot 2025-03-15 at 13 37 28"
src="https://github.com/user-attachments/assets/b2808dcb-69d9-4a17-ba0a-3dbae76f2cd6"
/>

Author: TrySound

apps/builder/app/builder/features/settings-panel/controls/file.tsx

@@ -48,7 +48,6 @@ export const FileControl = ({
   propName,
   computedValue,
   onChange,
-  onDelete,
 }: ControlProps<"file">) => {
   const id = useId();
 
@@ -61,8 +60,6 @@ export const FileControl = ({
     (value) => {
       if (value === undefined) {
         return;
-      } else if (value === "") {
-        onDelete();
       } else if (prop?.type === "expression") {
         updateExpressionValue(prop.value, value);
       } else {
@@ -110,7 +107,6 @@ export const FileControl = ({
           prop={prop?.type === "asset" ? prop : undefined}
           accept={meta.accept}
           onChange={onChange}
-          onDelete={onDelete}
         />
       </Flex>
     </VerticalLayout>

apps/builder/app/builder/features/settings-panel/controls/select-asset.tsx

@@ -1,14 +1,7 @@
 import { useMemo } from "react";
 import { computed } from "nanostores";
 import { useStore } from "@nanostores/react";
-import {
-  Button,
-  Flex,
-  SmallIconButton,
-  Text,
-  FloatingPanel,
-} from "@webstudio-is/design-system";
-import { TrashIcon } from "@webstudio-is/icons";
+import { Button, Flex, Text, FloatingPanel } from "@webstudio-is/design-system";
 import type { Prop } from "@webstudio-is/sdk";
 import { $assets } from "~/shared/nano-states";
 import { ImageManager } from "~/builder/shared/image-manager";
@@ -30,10 +23,9 @@ type Props = {
   accept?: string;
   prop?: Extract<Prop, { type: "asset" }>;
   onChange: AssetControlProps["onChange"];
-  onDelete: AssetControlProps["onDelete"];
 };
 
-export const SelectAsset = ({ prop, onChange, onDelete, accept }: Props) => {
+export const SelectAsset = ({ prop, onChange, accept }: Props) => {
   const $asset = useMemo(
     () =>
       computed($assets, (assets) =>
@@ -63,13 +55,6 @@ export const SelectAsset = ({ prop, onChange, onDelete, accept }: Props) => {
           {asset?.name ?? "Choose source"}
         </Button>
       </FloatingPanel>
-      {prop ? (
-        <SmallIconButton
-          icon={<TrashIcon />}
-          onClick={onDelete}
-          variant="destructive"
-        />
-      ) : null}
     </Flex>
   );
 };

apps/builder/app/builder/features/settings-panel/controls/url.tsx

@@ -53,7 +53,6 @@ type BaseControlProps = {
   prop: UrlControlProps["prop"];
   value: string;
   onChange: UrlControlProps["onChange"];
-  onDelete: UrlControlProps["onDelete"];
 };
 
 const Row = ({ children }: { children: ReactNode }) => (
@@ -405,12 +404,11 @@ const BasePage = ({ prop, onChange }: BaseControlProps) => {
   );
 };
 
-const BaseAttachment = ({ prop, onChange, onDelete }: BaseControlProps) => (
+const BaseAttachment = ({ prop, onChange }: BaseControlProps) => (
   <Row>
     <SelectAsset
       prop={prop?.type === "asset" ? prop : undefined}
       onChange={onChange}
-      onDelete={onDelete}
     />
   </Row>
 );
@@ -463,7 +461,6 @@ export const UrlControl = ({
   propName,
   computedValue,
   onChange,
-  onDelete,
 }: UrlControlProps) => {
   const value = String(computedValue ?? "");
   const { value: mode, set: setMode } = useLocalValue<Mode>(
@@ -520,7 +517,6 @@ export const UrlControl = ({
           prop={prop}
           value={value}
           onChange={onChange}
-          onDelete={onDelete}
         />
         <BindingPopover
           scope={scope}

apps/builder/app/builder/features/settings-panel/props-section/props-section.stories.tsx

@@ -370,10 +370,6 @@ const startingProps: Prop[] = [
 export const Story = () => {
   const [props, setProps] = useState(startingProps);
 
-  const handleDelete = (id: Prop["id"]) => {
-    setProps((current) => current.filter((prop) => prop.id !== id));
-  };
-
   const handleUpdate = (prop: Prop) => {
     setProps((current) => {
       const exists = current.find((item) => item.id === prop.id) !== undefined;
@@ -387,7 +383,6 @@ export const Story = () => {
     instance,
     props,
     updateProp: handleUpdate,
-    deleteProp: handleDelete,
   });
 
   return (

apps/builder/app/builder/features/settings-panel/props-section/props-section.tsx

@@ -58,8 +58,7 @@ const matchOrSuggestToCreate = (
 
 const renderProperty = (
   { propsLogic: logic, propValues, component, instanceId }: PropsSectionProps,
-  { prop, propName, meta }: PropAndMeta,
-  { deletable }: { deletable?: boolean } = {}
+  { prop, propName, meta }: PropAndMeta
 ) =>
   renderControl({
     key: propName,
@@ -68,20 +67,6 @@ const renderProperty = (
     prop,
     computedValue: propValues.get(propName) ?? meta.defaultValue,
     propName,
-    deletable:
-      deletable ??
-      ((meta.defaultValue === undefined || meta.defaultValue !== prop?.value) &&
-        meta.required === false &&
-        prop !== undefined),
-    onDelete: () => {
-      if (prop) {
-        logic.handleDelete(prop);
-        if (component === "Image" && propName === "src") {
-          logic.handleDeleteByPropName("width");
-          logic.handleDeleteByPropName("height");
-        }
-      }
-    },
     onChange: (propValue) => {
       logic.handleChange({ prop, propName }, propValue);
 
@@ -221,9 +206,7 @@ export const PropsSection = (props: PropsSectionProps) => {
                 }}
               />
             )}
-            {logic.addedProps.map((item) =>
-              renderProperty(props, item, { deletable: true })
-            )}
+            {logic.addedProps.map((item) => renderProperty(props, item))}
             {logic.initialProps.map((item) => renderProperty(props, item))}
           </Flex>
         </CollapsibleSectionWithAddButton>
@@ -265,12 +248,6 @@ export const PropsSectionContainer = ({
         props.set(update.id, update);
       });
     },
-
-    deleteProp: (propId) => {
-      serverSyncStore.createTransaction([$props], (props) => {
-        props.delete(propId);
-      });
-    },
   });
 
   const hasMetaProps = Object.keys(logic.meta.props).length !== 0;

apps/builder/app/builder/features/settings-panel/props-section/use-props-logic.ts

@@ -124,7 +124,6 @@ type UsePropsLogicInput = {
   instance: Instance;
   props: Prop[];
   updateProp: (update: Prop) => void;
-  deleteProp: (id: Prop["id"]) => void;
 };
 
 const getAndDelete = <Value>(map: Map<string, Value>, key: string) => {
@@ -138,7 +137,6 @@ export const usePropsLogic = ({
   instance,
   props,
   updateProp,
-  deleteProp,
 }: UsePropsLogicInput) => {
   const isContentMode = useStore($isContentMode);
 
@@ -301,24 +299,10 @@ export const usePropsLogic = ({
     );
   };
 
-  const handleDeleteByPropName = (propName: string) => {
-    const prop = props.find((prop) => prop.name === propName);
-
-    if (prop) {
-      deleteProp(prop.id);
-    }
-  };
-
-  const handleDelete = (prop: Prop) => {
-    deleteProp(prop.id);
-  };
-
   return {
     handleAdd,
     handleChange,
-    handleDelete,
     handleChangeByPropName,
-    handleDeleteByPropName,
     meta,
     /** Similar to Initial, but displayed as a separate group in UI etc.
      * Currentrly used only for the ID prop. */

apps/builder/app/builder/features/settings-panel/shared.tsx

@@ -78,9 +78,7 @@ export type ControlProps<Control> = {
   prop: Prop | undefined;
   propName: string;
   computedValue: unknown;
-  deletable: boolean;
   onChange: (value: PropValue) => void;
-  onDelete: () => void;
 };
 
 const SimpleLabel = ({