@eclipse-papyrus/papyrus-web-parent 2026.2.0

package/papyrus-web-components/src/widgets/containmentReference/ContainmentReferenceSection.tsx

@@ -0,0 +1,508 @@
+/*****************************************************************************
+ * Copyright (c) 2023, 2025 CEA LIST, Obeo.
+ *
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License 2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *  Obeo - Initial API and implementation
+ ***************************************************************************/
+
+import { gql, useLazyQuery, useMutation } from '@apollo/client';
+import { IconOverlay, getCSSColor, useMultiToast, useSelection } from '@eclipse-sirius/sirius-components-core';
+import {
+  PropertySectionComponentProps,
+  PropertySectionLabel,
+  getTextDecorationLineValue,
+  useClickHandler,
+} from '@eclipse-sirius/sirius-components-forms';
+import {
+  GQLErrorPayload,
+  GQLReferenceWidgetStyle,
+  GQLSuccessPayload,
+} from '@eclipse-sirius/sirius-components-widget-reference';
+import AddIcon from '@mui/icons-material/Add';
+import { Typography } from '@mui/material';
+import Chip from '@mui/material/Chip';
+import IconButton from '@mui/material/IconButton';
+import { useEffect, useState } from 'react';
+import { makeStyles } from 'tss-react/mui';
+import ReorderItemsDialog from '../dialogs/ReorderItemsDialog';
+import {
+  ContainmentReferenceDialogKind,
+  GQLClickContainmentReferenceItemMutationData,
+  GQLClickContainmentReferenceItemMutationVariables,
+  GQLClickContainmentReferenceItemPayload,
+  GQLContainmentReferenceItem,
+  GQLContainmentReferenceWidget,
+  GQLCreateElementInReferenceMutationData,
+  GQLCreateElementInReferenceMutationVariables,
+  GQLGetChildCreationDescriptionsQueryData,
+  GQLGetChildCreationDescriptionsQueryVariables,
+  GQLMoveContainmentReferenceItemMutationData,
+  GQLMoveContainmentReferenceItemMutationVariables,
+  GQLRemoveContainmentReferenceItemMutationData,
+  GQLRemoveContainmentReferenceItemMutationVariables,
+  GQLRemoveContainmentReferenceItemPayload,
+} from './ContainmentReferenceFragment.types';
+import ReorderIcon from './ReorderIcon';
+import CreateNewChildDialog from './dialogs/CreateNewChildDialog';
+import { ChildCreationDescription } from './dialogs/CreateNewChildDialog.types';
+
+const useStyles = makeStyles<GQLReferenceWidgetStyle>()(
+  (theme, { color, fontSize, italic, bold, underline, strikeThrough }) => ({
+    labelItemStyle: {
+      color: color ? getCSSColor(color, theme) : undefined,
+      fontSize: fontSize ?? undefined,
+      fontStyle: italic ? 'italic' : undefined,
+      fontWeight: bold ? 'bold' : undefined,
+      textDecorationLine: getTextDecorationLineValue(underline, strikeThrough),
+    },
+    chip: {
+      margin: '3px',
+    },
+    toolbar: {
+      marginLeft: 'auto',
+      display: 'flex',
+      alignItems: 'center',
+    },
+    empty: {
+      color: '#B3BFC5',
+    },
+  })
+);
+
+export const clickContainmentReferenceItemMutation = gql`
+  mutation clickContainmentReferenceItem($input: ClickContainmentReferenceItemInput!) {
+    clickContainmentReferenceItem(input: $input) {
+      __typename
+      ... on ErrorPayload {
+        messages {
+          body
+          level
+        }
+      }
+      ... on SuccessPayload {
+        messages {
+          body
+          level
+        }
+      }
+    }
+  }
+`;
+
+export const removeContainmentReferenceItemMutation = gql`
+  mutation removeContainmentReferenceItem($input: RemoveContainmentReferenceItemInput!) {
+    removeContainmentReferenceItem(input: $input) {
+      __typename
+      ... on ErrorPayload {
+        messages {
+          body
+          level
+        }
+      }
+      ... on SuccessPayload {
+        messages {
+          body
+          level
+        }
+      }
+    }
+  }
+`;
+
+export const moveContainmentReferenceItemMutation = gql`
+  mutation moveContainmentReferenceItem($input: MoveContainmentReferenceItemInput!) {
+    moveContainmentReferenceItem(input: $input) {
+      __typename
+      ... on ErrorPayload {
+        messages {
+          body
+          level
+        }
+      }
+      ... on SuccessPayload {
+        messages {
+          body
+          level
+        }
+      }
+    }
+  }
+`;
+
+const getChildCreationDescriptionsQuery = gql`
+  query getChildCreationDescriptions(
+    $editingContextId: ID!
+    $containerId: ID!
+    $referenceKind: String
+    $descriptionId: String!
+  ) {
+    viewer {
+      editingContext(editingContextId: $editingContextId) {
+        referenceWidgetChildCreationDescriptions(
+          containerId: $containerId
+          referenceKind: $referenceKind
+          descriptionId: $descriptionId
+        ) {
+          id
+          label
+          iconURL
+        }
+      }
+    }
+  }
+`;
+
+const createElementInReferenceMutation = gql`
+  mutation createElementInReference($input: CreateElementInReferenceInput!) {
+    createElementInReference(input: $input) {
+      __typename
+      ... on CreateElementInReferenceSuccessPayload {
+        object {
+          id
+          label
+          kind
+        }
+        messages {
+          body
+          level
+        }
+      }
+      ... on ErrorPayload {
+        messages {
+          body
+          level
+        }
+      }
+    }
+  }
+`;
+
+const isErrorPayload = (
+  payload: GQLClickContainmentReferenceItemPayload | GQLRemoveContainmentReferenceItemPayload
+): payload is GQLErrorPayload => payload.__typename === 'ErrorPayload';
+const isSuccessPayload = (
+  payload: GQLClickContainmentReferenceItemPayload | GQLRemoveContainmentReferenceItemPayload
+): payload is GQLSuccessPayload => payload.__typename === 'SuccessPayload';
+
+const ContainmentReferenceSection = ({
+  editingContextId,
+  formId,
+  widget,
+  readOnly,
+}: PropertySectionComponentProps<GQLContainmentReferenceWidget>) => {
+  const styleProps: GQLReferenceWidgetStyle = {
+    color: widget.style?.color ?? null,
+    fontSize: widget.style?.fontSize ?? null,
+    italic: widget.style?.italic ?? null,
+    bold: widget.style?.bold ?? null,
+    underline: widget.style?.underline ?? null,
+    strikeThrough: widget.style?.strikeThrough ?? null,
+  };
+  const { classes } = useStyles(styleProps);
+
+  const [openDialog, setOpenDialog] = useState<ContainmentReferenceDialogKind | null>(null);
+  const [childTypes, setChildTypes] = useState<ChildCreationDescription[]>([]);
+
+  const { setSelection } = useSelection();
+
+  const { addErrorMessage, addMessages } = useMultiToast();
+
+  const [clickReferenceValue, { loading: clickLoading, error: clickError, data: clickData }] = useMutation<
+    GQLClickContainmentReferenceItemMutationData,
+    GQLClickContainmentReferenceItemMutationVariables
+  >(clickContainmentReferenceItemMutation);
+  const [removeContainmentReferenceItem, { loading: removeLoading, error: removeError, data: removeData }] =
+    useMutation<GQLRemoveContainmentReferenceItemMutationData, GQLRemoveContainmentReferenceItemMutationVariables>(
+      removeContainmentReferenceItemMutation
+    );
+  const [moveReferenceValue, { loading: moveLoading, error: moveError, data: moveData }] = useMutation<
+    GQLMoveContainmentReferenceItemMutationData,
+    GQLMoveContainmentReferenceItemMutationVariables
+  >(moveContainmentReferenceItemMutation);
+  const [
+    getChildCreationDescription,
+    {
+      loading: childCreationDescriptionsLoading,
+      data: childCreationDescriptionsData,
+      error: childCreationDescriptionsError,
+    },
+  ] = useLazyQuery<GQLGetChildCreationDescriptionsQueryData, GQLGetChildCreationDescriptionsQueryVariables>(
+    getChildCreationDescriptionsQuery
+  );
+  const [
+    createElementInReference,
+    { loading: createElementLoading, error: createElementError, data: createElementData },
+  ] = useMutation<GQLCreateElementInReferenceMutationData, GQLCreateElementInReferenceMutationVariables>(
+    createElementInReferenceMutation
+  );
+
+  useEffect(() => {
+    if (!clickLoading) {
+      if (clickError) {
+        addErrorMessage('An unexpected error has occurred, please refresh the page');
+      }
+      if (clickData) {
+        const { clickContainmentReferenceItem } = clickData;
+        if (isErrorPayload(clickContainmentReferenceItem) || isSuccessPayload(clickContainmentReferenceItem)) {
+          addMessages(clickContainmentReferenceItem.messages);
+        }
+      }
+    }
+  }, [clickLoading, clickError, clickData]);
+  useEffect(() => {
+    if (!removeLoading) {
+      if (removeError) {
+        addErrorMessage('An unexpected error has occurred, please refresh the page');
+      }
+      if (removeData) {
+        const { removeContainmentReferenceItem } = removeData;
+        if (isErrorPayload(removeContainmentReferenceItem) || isSuccessPayload(removeContainmentReferenceItem)) {
+          addMessages(removeContainmentReferenceItem.messages);
+        }
+      }
+    }
+  }, [removeLoading, removeError, removeData]);
+  useEffect(() => {
+    if (!moveLoading) {
+      if (moveError) {
+        addErrorMessage('An unexpected error has occurred, please refresh the page');
+      }
+      if (moveData) {
+        const { moveContainmentReferenceItem } = moveData;
+        if (isErrorPayload(moveContainmentReferenceItem) || isSuccessPayload(moveContainmentReferenceItem)) {
+          addMessages(moveContainmentReferenceItem.messages);
+        }
+      }
+    }
+  }, [moveLoading, moveError, moveData]);
+  useEffect(() => {
+    if (!childCreationDescriptionsLoading) {
+      if (childCreationDescriptionsError) {
+        addErrorMessage('An unexpected error has occurred, please refresh the page');
+      }
+      if (childCreationDescriptionsData) {
+        const { referenceWidgetChildCreationDescriptions } = childCreationDescriptionsData.viewer.editingContext;
+        if (referenceWidgetChildCreationDescriptions.length > 1) {
+          setChildTypes(referenceWidgetChildCreationDescriptions);
+          setOpenDialog('NEW_INSTANCE');
+        } else if (referenceWidgetChildCreationDescriptions.length === 1) {
+          callCreateElementInReference(referenceWidgetChildCreationDescriptions[0].id);
+        }
+      }
+    }
+  }, [childCreationDescriptionsLoading, childCreationDescriptionsData, childCreationDescriptionsError]);
+  useEffect(() => {
+    if (!createElementLoading) {
+      if (createElementError) {
+        addErrorMessage('An unexpected error has occurred, please refresh the page');
+      }
+      if (createElementData) {
+        const { createElementInReference } = createElementData;
+        if (isErrorPayload(createElementInReference) || isSuccessPayload(createElementInReference)) {
+          const { messages } = createElementInReference;
+          addMessages(messages);
+        }
+      }
+    }
+  }, [createElementLoading, createElementData, createElementError]);
+
+  const callMoveContainmentReferenceItem = (valueId: string, fromIndex: number, toIndex: number) => {
+    if (valueId && fromIndex !== -1 && toIndex !== -1) {
+      const variables: GQLMoveContainmentReferenceItemMutationVariables = {
+        input: {
+          id: crypto.randomUUID(),
+          editingContextId,
+          representationId: formId,
+          referenceWidgetId: widget.id,
+          referenceItemId: valueId,
+          fromIndex,
+          toIndex,
+        },
+      };
+      moveReferenceValue({ variables });
+    }
+  };
+
+  const handleReferenceItemSimpleClick = (item: GQLContainmentReferenceItem) => {
+    const { id } = item;
+    setSelection({ entries: [{ id }] });
+    if (item.hasClickAction) {
+      const variables: GQLClickContainmentReferenceItemMutationVariables = {
+        input: {
+          id: crypto.randomUUID(),
+          editingContextId,
+          representationId: formId,
+          referenceWidgetId: widget.id,
+          referenceItemId: item.id,
+          clickEventKind: 'SINGLE_CLICK',
+        },
+      };
+      clickReferenceValue({ variables });
+    }
+  };
+  const handleReferenceItemDoubleClick = (item: GQLContainmentReferenceItem) => {
+    const { id } = item;
+    setSelection({ entries: [{ id }] });
+    if (item.hasClickAction) {
+      const variables: GQLClickContainmentReferenceItemMutationVariables = {
+        input: {
+          id: crypto.randomUUID(),
+          editingContextId,
+          representationId: formId,
+          referenceWidgetId: widget.id,
+          referenceItemId: item.id,
+          clickEventKind: 'DOUBLE_CLICK',
+        },
+      };
+      clickReferenceValue({ variables });
+    }
+  };
+
+  const callCreateElementInReference = (newChildDescriptionId: string) => {
+    if (newChildDescriptionId !== null) {
+      const input = {
+        id: crypto.randomUUID(),
+        editingContextId,
+        representationId: formId,
+        referenceWidgetId: widget.id,
+        containerId: widget.ownerId,
+        domainId: null,
+        creationDescriptionId: newChildDescriptionId,
+        descriptionId: widget.descriptionId,
+      };
+      createElementInReference({ variables: { input } });
+    }
+  };
+
+  const handleCloseCreateNewChildDialog = (newChildDescriptionId: string | null) => {
+    setChildTypes([]);
+    setOpenDialog(null);
+    if (newChildDescriptionId) {
+      callCreateElementInReference(newChildDescriptionId);
+    }
+  };
+
+  const clickHandler = useClickHandler<GQLContainmentReferenceItem>(
+    handleReferenceItemSimpleClick,
+    handleReferenceItemDoubleClick
+  );
+
+  const handleDeleteItem = (item: GQLContainmentReferenceItem) => {
+    if (item?.id) {
+      if (widget.referenceValues && widget.referenceValues.find((value) => value.id === item.id)) {
+        const variables: GQLRemoveContainmentReferenceItemMutationVariables = {
+          input: {
+            id: crypto.randomUUID(),
+            editingContextId,
+            representationId: formId,
+            referenceWidgetId: widget.id,
+            referenceItemId: item.id,
+          },
+        };
+        removeContainmentReferenceItem({ variables });
+      }
+    }
+  };
+
+  const handleOpenCreateNewChildDialog = () => {
+    getChildCreationDescription({
+      variables: {
+        editingContextId,
+        containerId: widget.ownerId,
+        referenceKind: widget.containmentReference.referenceKind,
+        descriptionId: widget.descriptionId,
+      },
+    });
+  };
+
+  const getDialog = (): JSX.Element | null => {
+    if (!openDialog) return null;
+    if (openDialog === 'REORDER') {
+      return (
+        <ReorderItemsDialog
+          items={widget.referenceValues?.map(({ label, id, iconURL }) => ({ label, id, iconURL })) ?? []}
+          moveElement={callMoveContainmentReferenceItem}
+          onClose={() => setOpenDialog(null)}
+        />
+      );
+    } else if (openDialog === 'NEW_INSTANCE') {
+      return <CreateNewChildDialog childTypes={childTypes} onClose={handleCloseCreateNewChildDialog} />;
+    }
+    return null;
+  };
+
+  const dialog: JSX.Element | null = getDialog();
+
+  const canReorder =
+    !readOnly &&
+    !widget.readOnly &&
+    widget.containmentReference.isMany &&
+    widget.referenceValues &&
+    widget.referenceValues.length > 1;
+
+  const isDisabled =
+    readOnly || widget.readOnly || (!widget.containmentReference.isMany && (widget.referenceValues?.length ?? 0) > 0);
+
+  return (
+    <>
+      <div data-testid={`containment-reference-${widget.label}`}>
+        <div style={{ display: 'flex' }}>
+          <PropertySectionLabel
+            editingContextId={editingContextId}
+            formId={formId}
+            widget={widget}
+            data-testid={widget.label}
+          />
+          <div className={classes.toolbar} data-testid="containment-reference-toolbar">
+            <IconButton
+              data-testid="containment-reference-create-child"
+              onClick={handleOpenCreateNewChildDialog}
+              disabled={isDisabled}
+              size="small">
+              <AddIcon />
+            </IconButton>
+            {widget.containmentReference.canMove && (
+              <IconButton
+                data-testid="containment-reference-reorder-children"
+                onClick={() => setOpenDialog('REORDER')}
+                disabled={!canReorder}
+                size="small">
+                <ReorderIcon fill={`${canReorder ? '#00000077' : '#B3BFC5'}`} />
+              </IconButton>
+            )}
+          </div>
+        </div>
+        {widget.referenceValues && widget.referenceValues.length > 0 ? (
+          widget.referenceValues.map((item, index) => (
+            <Chip
+              key={index}
+              classes={{ label: classes.labelItemStyle, root: classes.chip }}
+              label={item.label}
+              data-testid={`${item.label}`}
+              icon={
+                <div>
+                  <IconOverlay iconURLs={item.iconURL} alt={item.label} />
+                </div>
+              }
+              clickable={!readOnly && !widget.readOnly}
+              onClick={() => clickHandler(item)}
+              onDelete={() => handleDeleteItem(item)}
+            />
+          ))
+        ) : (
+          <Typography className={classes.empty}>None</Typography>
+        )}
+      </div>
+      {dialog}
+    </>
+  );
+};
+
+export default ContainmentReferenceSection;

package/papyrus-web-components/src/widgets/containmentReference/ReorderIcon.tsx

@@ -0,0 +1,31 @@
+/*****************************************************************************
+ * Copyright (c) 2023, 2025 CEA LIST, Obeo.
+ *
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License 2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *  Obeo - Initial API and implementation
+ ***************************************************************************/
+
+const ReorderIcon = ({ ...props }) => {
+  return (
+    <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g strokeWidth="0"></g>
+      <g strokeLinecap="round" strokeLinejoin="round"></g>
+      <g>
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M7 5C7.55228 5 8 5.44772 8 6V15.5858L10.2929 13.2929C10.6834 12.9024 11.3166 12.9024 11.7071 13.2929C12.0976 13.6834 12.0976 14.3166 11.7071 14.7071L7.70711 18.7071C7.31658 19.0976 6.68342 19.0976 6.29289 18.7071L2.29289 14.7071C1.90237 14.3166 1.90237 13.6834 2.29289 13.2929C2.68342 12.9024 3.31658 12.9024 3.70711 13.2929L6 15.5858V6C6 5.44772 6.44772 5 7 5ZM16.2929 5.29289C16.6834 4.90237 17.3166 4.90237 17.7071 5.29289L21.7071 9.29289C22.0976 9.68342 22.0976 10.3166 21.7071 10.7071C21.3166 11.0976 20.6834 11.0976 20.2929 10.7071L18 8.41421V18C18 18.5523 17.5523 19 17 19C16.4477 19 16 18.5523 16 18V8.41421L13.7071 10.7071C13.3166 11.0976 12.6834 11.0976 12.2929 10.7071C11.9024 10.3166 11.9024 9.68342 12.2929 9.29289L16.2929 5.29289Z"
+          {...props}></path>
+      </g>
+    </svg>
+  );
+};
+
+export default ReorderIcon;

package/papyrus-web-components/src/widgets/containmentReference/dialogs/CreateNewChildDialog.tsx

@@ -0,0 +1,104 @@
+/*****************************************************************************
+ * Copyright (c) 2023, 2025 CEA LIST, Obeo.
+ *
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License 2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *  Obeo - Initial API and implementation
+ ***************************************************************************/
+
+import { ServerContext, ServerContextValue } from '@eclipse-sirius/sirius-components-core';
+import { Dialog, DialogContent, DialogContentText, DialogTitle } from '@mui/material';
+import Button from '@mui/material/Button';
+import DialogActions from '@mui/material/DialogActions';
+import List from '@mui/material/List';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import { useContext, useState } from 'react';
+import { makeStyles } from 'tss-react/mui';
+import { CreateNewChildDialogProps } from './CreateNewChildDialog.types';
+
+const useStyles = makeStyles()((theme) => ({
+  dialogContent: {
+    overflowX: 'hidden',
+  },
+  paper: {
+    width: 400,
+    height: 370,
+    border: '1px solid',
+    borderColor: theme.palette.grey[500],
+    overflow: 'auto',
+  },
+  borderStyle: {
+    height: 300,
+    overflow: 'auto',
+  },
+  button: {
+    margin: theme.spacing(0.5, 0),
+  },
+  iconRoot: {
+    minWidth: theme.spacing(3),
+  },
+}));
+
+const CreateNewChildDialog = ({ childTypes, onClose }: CreateNewChildDialogProps) => {
+  const { classes } = useStyles();
+  const { httpOrigin } = useContext<ServerContextValue>(ServerContext);
+  const [selectedChildTypeId, setSelectedChildTypeId] = useState<string>(childTypes[0].id);
+
+  return (
+    <Dialog
+      open={true}
+      onClose={() => onClose(null)}
+      aria-labelledby="dialog-title"
+      maxWidth={false}
+      data-testid="containment-reference-new-child-dialog">
+      <DialogTitle id="dialog-title">New Element</DialogTitle>
+      <DialogContent className={classes.dialogContent}>
+        <DialogContentText>Select the new element type</DialogContentText>
+        <div className={classes.paper}>
+          <List data-testid="containment-reference-new-child-dialog-types-list">
+            {childTypes.map((creationDescription) => (
+              <ListItemButton
+                key={creationDescription.id}
+                data-testid={creationDescription.label}
+                selected={creationDescription.id === selectedChildTypeId}
+                onDoubleClick={() => onClose(creationDescription.id)}
+                onClick={() => setSelectedChildTypeId(creationDescription.id)}>
+                {creationDescription.iconURL && (
+                  <ListItemIcon className={classes.iconRoot}>
+                    <img
+                      height="16"
+                      width="16"
+                      alt={creationDescription.label}
+                      src={httpOrigin + creationDescription.iconURL}
+                    />
+                  </ListItemIcon>
+                )}
+                <ListItemText primary={creationDescription.label} />
+              </ListItemButton>
+            ))}
+          </List>
+        </div>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant="contained"
+          color="primary"
+          type="button"
+          data-testid="close-containment-reference-new-child-dialog"
+          onClick={() => onClose(selectedChildTypeId)}>
+          create
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default CreateNewChildDialog;

package/papyrus-web-components/src/widgets/containmentReference/dialogs/CreateNewChildDialog.types.ts

@@ -0,0 +1,24 @@
+/*****************************************************************************
+ * Copyright (c) 2023, 2025 CEA LIST, Obeo.
+ *
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License 2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *  Obeo - Initial API and implementation
+ ***************************************************************************/
+
+export interface CreateNewChildDialogProps {
+  childTypes: ChildCreationDescription[];
+  onClose: (selectedChildCreationId: string | null) => void;
+}
+
+export interface ChildCreationDescription {
+  id: string;
+  label: string;
+  iconURL: string;
+}

package/papyrus-web-components/src/widgets/customImage/AddImageIcon.tsx

@@ -0,0 +1,35 @@
+/*****************************************************************************
+ * Copyright (c) 2024, 2025 CEA LIST, Obeo, Artal Technologies.
+ *
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License 2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *  Obeo - Initial API and implementation
+ *  Titouan BOUETE-GIRAUD (Artal Technologies) - Issue 210
+ *****************************************************************************/
+
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+export const AddImageIcon = (props: SvgIconProps) => {
+  return (
+    <SvgIcon
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      aria-labelledby="title"
+      aria-describedby="desc"
+      role="img"
+      {...props}>
+      <g>
+        <rect fill="none" height="24" width="24" />
+      </g>
+      <g>
+        <path d="M 5 5 h 14 v 2 h 2 V 5 c 0 -1.1 -0.89 -2 -2 -2 H 5 C 3.9 3 3 3.9 3 5 v 2 h 2 v -2 M 11 19 h 2 v -9 L 15.59 12.59 L 17 11 L 12 6 L 7 11 L 8.59 12.59 L 11 10 z" />
+      </g>
+    </SvgIcon>
+  );
+};