@eclipse-papyrus/papyrus-web-parent 2026.2.0

package/papyrus-web-components/src/widgets/customImage/CustomImageFragment.types.ts

@@ -0,0 +1,98 @@
+/*****************************************************************************
+ * Copyright (c) 2023, 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 { GQLMessage } from '@eclipse-sirius/sirius-components-core';
+import { GQLWidget } from '@eclipse-sirius/sirius-components-forms';
+import { GQLReferenceWidgetStyle } from '@eclipse-sirius/sirius-components-widget-reference';
+import { GQLImageMetadata, ProjectImagesSettingsModal } from '@eclipse-sirius/sirius-web-application';
+
+export type CustomImageWidgetModal = 'Select' | ProjectImagesSettingsModal;
+
+export interface CustomImageWidgetState {
+  modal: CustomImageWidgetModal | null;
+  url: string;
+  validImage: boolean;
+}
+
+export interface GQLCustomImageWidget extends GQLWidget {
+  label: string;
+  currentUuid: string;
+  style: GQLReferenceWidgetStyle | null;
+}
+
+export interface CustomImageWidgetStyleProps {
+  color: string | null;
+  fontSize: number | null;
+  italic: boolean | null;
+  bold: boolean | null;
+  underline: boolean | null;
+  strikeThrough: boolean | null;
+}
+
+export interface GQLNewUuidInput {
+  id: string;
+  editingContextId: string;
+  representationId: string;
+  customImageId: string;
+  newUuid: string;
+}
+
+export interface GQLRemoveUuidInput {
+  id: string;
+  editingContextId: string;
+  representationId: string;
+  customImageId: string;
+  removeUuid: string;
+}
+
+export interface GQLNewUuidData {
+  newUuid: GQLNewUuidPayload;
+}
+
+export interface GQLRemoveUuidData {
+  removeUuid: GQLRemoveUuidPayload;
+}
+
+export interface GQLNewUuidVariables {
+  input: GQLNewUuidInput;
+}
+
+export interface GQLRemoveUuidVariables {
+  input: GQLRemoveUuidInput;
+}
+
+export interface GQLNewUuidPayload {
+  __typename: string;
+}
+
+export interface GQLRemoveUuidPayload {
+  __typename: string;
+}
+
+export interface GQLSuccessPayload extends GQLNewUuidPayload, GQLRemoveUuidPayload {
+  messages: GQLMessage[];
+}
+
+export interface GQLErrorPayload extends GQLNewUuidPayload, GQLRemoveUuidPayload {
+  messages: GQLMessage[];
+}
+
+export interface SelectImageModalProps {
+  currentUuid: string;
+  images: GQLImageMetadata[];
+  onImageSelected: (newUuid: string) => void;
+  onClose: () => void;
+}
+
+export type CustomImageParams = 'projectId';

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

@@ -0,0 +1,34 @@
+/*****************************************************************************
+ * Copyright (c) 2023, 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 CustomImageIcon = (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 19 19 H 5 V 5 h 14 v 14 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 14 c 0 1.1 0.9 2 2 2 h 14 c 1.11 0 2 -0.9 2 -2 h -2 M 19 14 L 15 10 L 11 16 L 8 13 L 5 16 L 5 18 L 8 15 L 11 18 L 15 12 L 19 16 M 11 7 A 1 1 0 0 0 11 9 A 1 1 0 0 0 11 7z" />
+      </g>
+    </SvgIcon>
+  );
+};

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

@@ -0,0 +1,87 @@
+/*****************************************************************************
+ * Copyright (c) 2019, 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 { WidgetProps } from '@eclipse-sirius/sirius-components-formdescriptioneditors';
+import { getTextDecorationLineValue } from '@eclipse-sirius/sirius-components-forms';
+import { GQLReferenceWidgetStyle } from '@eclipse-sirius/sirius-components-widget-reference';
+import AddIcon from '@mui/icons-material/Add';
+import DeleteIcon from '@mui/icons-material/Delete';
+import HelpOutlineOutlinedIcon from '@mui/icons-material/HelpOutlineOutlined';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import { makeStyles } from 'tss-react/mui';
+import { GQLCustomImageWidget } from './CustomImageFragment.types';
+import { CustomImageIcon } from './CustomImageIcon';
+
+const useStyles = makeStyles<GQLReferenceWidgetStyle>()(
+  (_theme, { color, fontSize, italic, bold, underline, strikeThrough }) => ({
+    style: {
+      color: color ?? undefined,
+      fontSize: fontSize ?? undefined,
+      fontStyle: italic ? 'italic' : undefined,
+      fontWeight: bold ? 'bold' : undefined,
+      textDecorationLine: getTextDecorationLineValue(underline, strikeThrough),
+    },
+    toolbar: {
+      marginLeft: 'auto',
+      display: 'flex',
+      alignItems: 'center',
+    },
+    propertySectionLabel: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+  })
+);
+
+type PropertySectionComponentProps = WidgetProps<GQLCustomImageWidget>;
+
+export const CustomImagePreview = ({ widget }: PropertySectionComponentProps) => {
+  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);
+
+  return (
+    <>
+      <div className={classes.propertySectionLabel}>
+        <Typography variant="subtitle2">{widget.label}</Typography>
+        {widget.hasHelpText ? (
+          <HelpOutlineOutlinedIcon color="secondary" style={{ marginLeft: 8, fontSize: 16 }} />
+        ) : null}
+      </div>
+      <div data-testid={`custom-image-${widget.label}`} style={{ display: 'flex' }}>
+        <CustomImageIcon width="250%" />
+        <div className={classes.toolbar} data-testid="custom-image-toolbar">
+          <IconButton data-testid="custom-image-add" size="small" disabled>
+            <AddIcon />
+          </IconButton>
+          <IconButton data-testid="custom-image-select" size="small" disabled>
+            <MoreHorizIcon />
+          </IconButton>
+          <IconButton data-testid="custom-image-remove" size="small" disabled>
+            <DeleteIcon />
+          </IconButton>
+        </div>
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,348 @@
+/*****************************************************************************
+ * Copyright (c) 2023, 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 { gql, useMutation } from '@apollo/client';
+import { ServerContext, ServerContextValue, getCSSColor, useMultiToast } from '@eclipse-sirius/sirius-components-core';
+import {
+  PropertySectionComponentProps,
+  PropertySectionLabel,
+  getTextDecorationLineValue,
+} from '@eclipse-sirius/sirius-components-forms';
+import { UploadImageModal, useProjectImages } from '@eclipse-sirius/sirius-web-application';
+import DeleteIcon from '@mui/icons-material/Delete';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import IconButton from '@mui/material/IconButton';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import Typography from '@mui/material/Typography';
+import { useContext, useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { makeStyles } from 'tss-react/mui';
+import { AddImageIcon } from './AddImageIcon';
+import {
+  CustomImageParams,
+  CustomImageWidgetState,
+  CustomImageWidgetStyleProps,
+  GQLCustomImageWidget,
+  GQLErrorPayload,
+  GQLNewUuidData,
+  GQLNewUuidInput,
+  GQLNewUuidPayload,
+  GQLNewUuidVariables,
+  GQLRemoveUuidData,
+  GQLRemoveUuidInput,
+  GQLRemoveUuidPayload,
+  GQLRemoveUuidVariables,
+  GQLSuccessPayload,
+  SelectImageModalProps,
+} from './CustomImageFragment.types';
+
+export const newUuidMutation = gql`
+  mutation newUuid($input: NewUuidInput!) {
+    newUuid(input: $input) {
+      __typename
+      ... on ErrorPayload {
+        messages {
+          body
+          level
+        }
+      }
+      ... on SuccessPayload {
+        messages {
+          body
+          level
+        }
+      }
+    }
+  }
+`;
+
+export const removeUuidMutation = gql`
+  mutation removeUuid($input: RemoveUuidInput!) {
+    removeUuid(input: $input) {
+      __typename
+      ... on ErrorPayload {
+        messages {
+          body
+          level
+        }
+      }
+      ... on SuccessPayload {
+        messages {
+          body
+          level
+        }
+      }
+    }
+  }
+`;
+
+const defaultErrorMessage = 'An unexpected error has occurred, please refresh the page';
+
+const useStylesSection = makeStyles<CustomImageWidgetStyleProps>()(
+  (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),
+    },
+    toolbar: {
+      marginLeft: 'auto',
+      display: 'flex',
+      alignItems: 'center',
+    },
+  })
+);
+
+export const CustomImageSection = ({
+  widget,
+  editingContextId,
+  formId,
+}: PropertySectionComponentProps<GQLCustomImageWidget>) => {
+  const { addErrorMessage, addMessages } = useMultiToast();
+  const { projectId: projectIdParam } = useParams<CustomImageParams>();
+  const projectId = projectIdParam ?? '';
+
+  const { httpOrigin } = useContext<ServerContextValue>(ServerContext);
+  const [state, setState] = useState<CustomImageWidgetState>({
+    modal: null,
+    url: widget.currentUuid ? httpOrigin + widget.currentUuid : '',
+    validImage: widget.currentUuid !== undefined && widget.currentUuid !== '',
+  });
+  const { data, loading, refreshImages } = useProjectImages(projectId);
+  const [newUuidApi, { loading: newUuidLoading, data: newUuidData, error: newUuidError }] = useMutation<
+    GQLNewUuidData,
+    GQLNewUuidVariables
+  >(newUuidMutation);
+  const [removeUuidApi, { loading: removeUuidLoading, data: removeUuidData, error: removeUuidError }] = useMutation<
+    GQLRemoveUuidData,
+    GQLRemoveUuidVariables
+  >(removeUuidMutation);
+
+  const isErrorPayload = (payload: GQLNewUuidPayload | GQLRemoveUuidPayload): payload is GQLErrorPayload =>
+    payload.__typename === 'ErrorPayload';
+  const isSuccessPayload = (payload: GQLNewUuidPayload | GQLRemoveUuidPayload): payload is GQLSuccessPayload =>
+    payload.__typename === 'SuccessPayload';
+
+  const styleProps: CustomImageWidgetStyleProps = {
+    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 } = useStylesSection(styleProps);
+
+  const onErrorLoadingImage = () => {
+    setState((prevState) => ({ ...prevState, validImage: false }));
+    addErrorMessage(defaultErrorMessage);
+  };
+  const handleAddImageButton = () => setState((prevState) => ({ ...prevState, modal: 'Upload' }));
+  const handleSelectImageButton = () => setState((prevState) => ({ ...prevState, modal: 'Select' }));
+  const handleRemoveImageButton = () => {
+    const input: GQLRemoveUuidInput = {
+      id: crypto.randomUUID(),
+      editingContextId,
+      representationId: formId,
+      customImageId: widget.id,
+      removeUuid: '',
+    };
+    const variables: GQLRemoveUuidVariables = { input };
+    removeUuidApi({ variables });
+  };
+  const closeModal = () => setState((prevState) => ({ ...prevState, modal: null }));
+
+  const onImageSelected = (newUuid: string) => {
+    const input: GQLNewUuidInput = {
+      id: crypto.randomUUID(),
+      editingContextId,
+      representationId: formId,
+      customImageId: widget.id,
+      newUuid: newUuid,
+    };
+    const variables: GQLNewUuidVariables = { input };
+    newUuidApi({ variables });
+  };
+
+  useEffect(() => {
+    setState((prevState) => ({
+      ...prevState,
+      url: widget.currentUuid ? httpOrigin + widget.currentUuid : '',
+      validImage: widget.currentUuid !== undefined && widget.currentUuid !== '',
+    }));
+  }, [widget.currentUuid]);
+
+  useEffect(() => {
+    if (!newUuidLoading) {
+      if (newUuidError) {
+        addErrorMessage(defaultErrorMessage);
+      }
+      if (newUuidData) {
+        const { newUuid } = newUuidData;
+        if (isErrorPayload(newUuid) || isSuccessPayload(newUuid)) {
+          addMessages(newUuid.messages);
+        }
+      }
+    }
+  }, [newUuidLoading, newUuidError, newUuidData]);
+
+  useEffect(() => {
+    if (!removeUuidLoading) {
+      if (removeUuidError) {
+        addErrorMessage(defaultErrorMessage);
+      }
+      if (removeUuidData) {
+        const { removeUuid } = removeUuidData;
+        if (isErrorPayload(removeUuid) || isSuccessPayload(removeUuid)) {
+          addMessages(removeUuid.messages);
+        }
+      }
+    }
+  }, [removeUuidLoading, removeUuidError, removeUuidData]);
+
+  let modal: JSX.Element | null = null;
+  if (state.modal === 'Upload') {
+    modal = (
+      <UploadImageModal
+        projectId={projectId}
+        onImageUploaded={() => {
+          refreshImages();
+          closeModal();
+        }}
+        onClose={closeModal}
+      />
+    );
+  } else if (state.modal === 'Select') {
+    if (!loading && data) {
+      modal = (
+        <SelectImageModal
+          currentUuid={widget.currentUuid}
+          images={data?.viewer.project?.images ?? []}
+          onImageSelected={onImageSelected}
+          onClose={closeModal}
+        />
+      );
+    }
+  }
+
+  return (
+    <>
+      <PropertySectionLabel
+        editingContextId={editingContextId}
+        formId={formId}
+        widget={widget}
+        data-testid={widget.label}
+      />
+      <div data-testid={`custom-image-${widget.label}`} style={{ display: 'flex' }}>
+        {state.validImage ? (
+          <img id={widget.id} src={state.url} width="25%" onError={onErrorLoadingImage} />
+        ) : (
+          <Typography data-testid="custom-image-widget-no-image" variant="caption">
+            No image
+          </Typography>
+        )}
+        <div className={classes.toolbar} data-testid="custom-image-widget-toolbar">
+          {modal}
+          <IconButton data-testid="custom-image-widget-add" onClick={handleAddImageButton} size="small">
+            <AddImageIcon />
+          </IconButton>
+          <IconButton data-testid="custom-image-widget-select" onClick={handleSelectImageButton} size="small">
+            <MoreHorizIcon />
+          </IconButton>
+          <IconButton data-testid="custom-image-widget-remove" onClick={handleRemoveImageButton} size="small">
+            <DeleteIcon />
+          </IconButton>
+        </div>
+      </div>
+    </>
+  );
+};
+
+const useStylesModal = makeStyles()((theme) => ({
+  form: {
+    display: 'flex',
+    flexDirection: 'column',
+    paddingTop: theme.spacing(1),
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+    '& > *': {
+      marginBottom: theme.spacing(2),
+    },
+  },
+}));
+
+export const SelectImageModal = (props: SelectImageModalProps) => {
+  const { currentUuid, images, onImageSelected, onClose } = props;
+  const { classes } = useStylesModal();
+  const [symbol, setSymbol] = useState(currentUuid);
+  const { httpOrigin } = useContext<ServerContextValue>(ServerContext);
+
+  const handleChange = (event) => {
+    setSymbol(event.target.value);
+  };
+
+  return (
+    <>
+      <Dialog open={true} onClose={onClose} aria-labelledby="dialog-title" fullWidth>
+        <DialogTitle id="dialog-title">Select a Symbol</DialogTitle>
+        <DialogContent>
+          <form id="select-image-form-id" encType="multipart/form-data" className={classes.form}>
+            <InputLabel>Symbol</InputLabel>
+            <Select data-testid="select-image-select" value={symbol} onChange={handleChange} displayEmpty>
+              <MenuItem data-testid="select-image-select-None" value={''}>
+                None
+              </MenuItem>
+              {images.map((image, index) => {
+                return (
+                  <MenuItem data-testid={'select-image-select-' + image.label} key={index} value={image.url}>
+                    <img
+                      id={index.toString()}
+                      src={httpOrigin + image.url}
+                      width="5%"
+                      style={{ marginLeft: '0.5rem', marginRight: '0.5rem' }}
+                    />
+                    {image.label}
+                  </MenuItem>
+                );
+              })}
+            </Select>
+          </form>
+        </DialogContent>
+        <DialogActions>
+          <Button
+            variant="contained"
+            color="primary"
+            form="upload-form-id"
+            data-testid="select-image-confirm"
+            onClick={() => {
+              onImageSelected(symbol);
+              onClose();
+            }}>
+            Confirm
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+};