@eclipse-papyrus/papyrus-web-parent 2026.2.0

package/papyrus-web-components/src/widgets/dialogs/ReorderItemsDialog.tsx

@@ -0,0 +1,145 @@
+/*****************************************************************************
+ * 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 { Dialog, DialogContent, DialogContentText, DialogTitle } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import Button from '@mui/material/Button';
+import DialogActions from '@mui/material/DialogActions';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import DragHandleIcon from '@mui/icons-material/DragHandle';
+import { useState } from 'react';
+import { ReorderItemsDialogProps, ReorderItemsDialogState } from './ReorderItemsDialog.types';
+import { IconOverlay } from '@eclipse-sirius/sirius-components-core';
+
+const useStyles = makeStyles()((theme) => ({
+  dialogContent: {
+    overflowX: 'hidden',
+  },
+  root: {
+    margin: 'auto',
+  },
+  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),
+  },
+  dragIcon: {
+    minWidth: '0px;',
+    marginRight: '10px',
+  },
+}));
+
+const ReorderItemsDialog = ({ items, onClose, moveElement }: ReorderItemsDialogProps) => {
+  const { classes } = useStyles();
+  const [state, setState] = useState<ReorderItemsDialogState>({
+    draggingItemId: undefined,
+    draggingStartIndex: -1,
+    draggingIndex: -1,
+  });
+
+  const handleDragStartOrder = (id: string, index: number) => {
+    setState((prevState) => {
+      return {
+        ...prevState,
+        draggingItemId: id,
+        draggingStartIndex: index,
+      };
+    });
+  };
+
+  const handleDragOverOrder = (event: React.DragEvent, index: number) => {
+    event.preventDefault();
+    if (state.draggingItemId) {
+      setState((prevState) => {
+        return {
+          ...prevState,
+          draggingIndex: index,
+        };
+      });
+    }
+  };
+
+  const handleDragEndOrder = () => {
+    if (state.draggingItemId) {
+      moveElement(state.draggingItemId, state.draggingStartIndex, state.draggingIndex);
+    }
+    setState((prevState) => {
+      return {
+        ...prevState,
+        draggingItemId: undefined,
+      };
+    });
+  };
+
+  return (
+    <Dialog
+      open={true}
+      onClose={() => onClose()}
+      aria-labelledby="dialog-title"
+      maxWidth={false}
+      data-testid="containment-reference-reorder-items-dialog">
+      <DialogTitle id="dialog-title">Sort elements</DialogTitle>
+      <DialogContent className={classes.dialogContent}>
+        <DialogContentText>Drag and drop elements to reorder them.</DialogContentText>
+        <div className={classes.paper}>
+          <List dense component="div" role="list" data-testid="containment-reference-items-list">
+            {items.map(({ label, id, iconURL }, index) => (
+              <ListItem
+                style={{ cursor: 'grab' }}
+                key={id}
+                role="listitem"
+                data-testid={label}
+                draggable
+                onDragStart={() => handleDragStartOrder(id, index)}
+                onDragOver={(event) => handleDragOverOrder(event, index)}
+                onDragEnd={handleDragEndOrder}>
+                <ListItemIcon className={classes.dragIcon}>
+                  <DragHandleIcon />
+                </ListItemIcon>
+                <ListItemIcon className={classes.dragIcon}>
+                  <IconOverlay iconURLs={iconURL} alt={label} />
+                </ListItemIcon>
+                <ListItemText id={`containment-reference-reorder-item-${id}-label`} primary={label} />
+              </ListItem>
+            ))}
+          </List>
+        </div>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant="contained"
+          color="primary"
+          type="button"
+          data-testid="close-containment-reference-reorder-items-dialog"
+          onClick={() => onClose()}>
+          close
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default ReorderItemsDialog;

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

@@ -0,0 +1,30 @@
+/*****************************************************************************
+ * 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 ReorderItemsDialogProps {
+  items: ReorderingItem[];
+  onClose: () => void;
+  moveElement: (itemId: string, fromIndex: number, toIndex: number) => void;
+}
+export interface ReorderItemsDialogState {
+  draggingItemId: string | undefined;
+  draggingStartIndex: number;
+  draggingIndex: number;
+}
+
+export interface ReorderingItem {
+  label: string;
+  id: string;
+  iconURL: string[];
+}

package/papyrus-web-components/src/widgets/languageExpression/LanguageExpressionFragment.types.ts

@@ -0,0 +1,117 @@
+/*****************************************************************************
+ * 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 { GQLWidget } from '@eclipse-sirius/sirius-components-forms';
+import { GQLMessage } from '@eclipse-sirius/sirius-components-core';
+
+export interface GQLLanguageExpression extends GQLWidget {
+  languages: Array<GQLLanguageElement> | null;
+  predefinedLanguages: Array<string>;
+}
+
+export interface GQLLanguageElement {
+  id: string;
+  label: string;
+  body: string;
+}
+
+export interface GQLAddLanguageData {
+  addLanguage: GQLAddLanguagePayload;
+}
+
+export interface GQLAddLanguageVariables {
+  input: GQLAddLanguageInput;
+}
+
+export interface GQLAddLanguageInput {
+  id: string;
+  editingContextId: string;
+  representationId: string;
+  languageExpressionId: string;
+  language: string;
+}
+
+export interface GQLAddLanguagePayload {
+  __typename: string;
+}
+
+export interface GQLSuccessPayload extends GQLAddLanguagePayload {
+  messages: GQLMessage[];
+}
+
+export interface GQLErrorPayload extends GQLAddLanguagePayload {
+  messages: GQLMessage[];
+}
+
+export interface GQLDeleteLanguageVariables {
+  input: GQLDeleteLanguageInput;
+}
+
+export interface GQLDeleteLanguageInput {
+  id: string;
+  editingContextId: string;
+  representationId: string;
+  languageExpressionId: string;
+  language: string;
+}
+
+export interface GQLDeleteLanguageData {
+  deleteLanguage: GQLDeleteLanguagePayload;
+}
+
+export interface GQLDeleteLanguagePayload {
+  __typename: string;
+}
+
+export interface GQLEditLanguageBodyVariables {
+  input: GQLEditLanguageBodyInput;
+}
+
+export interface GQLEditLanguageBodyInput {
+  id: string;
+  editingContextId: string;
+  representationId: string;
+  languageExpressionId: string;
+  language: string;
+  newBody: string;
+}
+
+export interface GQLEditLanguageBodyData {
+  editLanguageBody: GQLEditLanguageBodyPayload;
+}
+
+export interface GQLEditLanguageBodyPayload {
+  __typename: string;
+}
+
+export interface GQLMoveLanguageVariables {
+  input: GQLMoveLanguageInput;
+}
+
+export interface GQLMoveLanguageInput {
+  id: string;
+  editingContextId: string;
+  representationId: string;
+  languageExpressionId: string;
+  language: string;
+  direction: 'BACKWARD' | 'FORWARD';
+}
+
+export interface GQLMoveLanguageData {
+  moveLanguage: GQLMoveLanguagePayload;
+}
+
+export interface GQLMoveLanguagePayload {
+  __typename: string;
+}

package/papyrus-web-components/src/widgets/languageExpression/LanguageExpressionIcon.tsx

@@ -0,0 +1,36 @@
+/*****************************************************************************
+ * 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 SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+export const LanguageExpressionIcon = (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>
+        <title>language Expression icon</title>
+        <path d="m3,3.01l0.01,12.96l6.98,-0.01l-0.01,-2.47l-4.49,0l0.01,-10.49l-2.51,0.01z" fill="#333333" />
+        <path
+          d="m13.02,21.49l7.97,0l0,-2.48l-4.99,0l-0.02,-3l3.55,0l0,-2.48l-3.55,-0.01l0.03,-2.52l4.98,0l0,-2.5l-8,0l0.03,12.99z"
+          fill="#333333"
+        />
+      </g>
+    </SvgIcon>
+  );
+};

package/papyrus-web-components/src/widgets/languageExpression/LanguageExpressionPreview.tsx

@@ -0,0 +1,163 @@
+/*****************************************************************************
+ * 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 { useSelection } from '@eclipse-sirius/sirius-components-core';
+import MuiAccordion from '@mui/material/Accordion';
+import MuiAccordionDetails from '@mui/material/AccordionDetails';
+import MuiAccordionSummary from '@mui/material/AccordionSummary';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import { makeStyles, withStyles } from 'tss-react/mui';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+import HelpOutlineOutlined from '@mui/icons-material/HelpOutlineOutlined';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { useEffect, useRef, useState } from 'react';
+import { GQLLanguageExpression } from './LanguageExpressionFragment.types';
+import { WidgetProps } from '@eclipse-sirius/sirius-components-formdescriptioneditors';
+
+const Accordion = withStyles(MuiAccordion, (theme) => ({
+  root: {
+    border: `1px solid ${theme.palette.divider}`,
+    boxShadow: 'none',
+    '&:not(:last-child)': {
+      borderBottom: 0,
+    },
+    '&:before': {
+      display: 'none',
+    },
+    '&$expanded': {
+      margin: 'auto',
+    },
+  },
+  expanded: {},
+}));
+
+const AccordionSummary = withStyles(MuiAccordionSummary, (_theme) => ({
+  root: {
+    backgroundColor: 'rgba(0, 0, 0, .03)',
+    borderBottom: '1px solid rgba(0, 0, 0, .125)',
+    marginBottom: -1,
+    minHeight: 56,
+    paddingLeft: 8,
+    flexDirection: 'row-reverse',
+    '& .MuiAccordionSummary-expandIcon.Mui-expanded': {
+      transform: 'rotate(90deg)',
+    },
+    '& .MuiIconButton-edgeEnd': {
+      marginRight: 0,
+    },
+    '&$expanded': {
+      minHeight: 56,
+    },
+  },
+  content: {
+    alignItems: 'center',
+    '&$expanded': {
+      margin: '12px 0',
+    },
+  },
+  expanded: {},
+}));
+
+const AccordionDetails = withStyles(MuiAccordionDetails, (theme) => ({
+  root: {
+    padding: theme.spacing(1),
+    borderTop: '1px solid rgba(0, 0, 0, .125)',
+  },
+}));
+
+const useStyles = makeStyles()((theme) => ({
+  style: {
+    color: theme.palette.secondary.main,
+  },
+  selected: {
+    color: theme.palette.selected,
+  },
+  propertySectionLabel: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+}));
+
+type PropertySectionComponentProps = WidgetProps<GQLLanguageExpression>;
+
+export const LanguageExpressionPreview = ({ widget }: PropertySectionComponentProps) => {
+  const { classes } = useStyles();
+  const [selected, setSelected] = useState<boolean>(false);
+  const [expanded, setExpanded] = useState<boolean>(false);
+
+  const { selection } = useSelection();
+
+  const ref = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    if (ref.current && selection.entries.find((entry) => entry.id === widget.id)) {
+      ref.current.focus();
+      setSelected(true);
+    } else {
+      setSelected(false);
+    }
+  }, [selection, widget]);
+
+  const handlePanelExpansion = () => (_event: React.SyntheticEvent, expanded: boolean) => {
+    setExpanded(expanded);
+  };
+
+  return (
+    <div>
+      <div className={classes.propertySectionLabel}>
+        <Typography variant="subtitle2" className={selected ? classes.selected : ''}>
+          {widget.label}
+        </Typography>
+        {widget.hasHelpText && <HelpOutlineOutlined color="secondary" style={{ marginLeft: 8, fontSize: 16 }} />}
+      </div>
+      <Accordion square elevation={0} ref={ref} onChange={handlePanelExpansion()} expanded={expanded}>
+        <AccordionSummary
+          aria-controls="panel1d-content"
+          expandIcon={<ArrowForwardIosSharpIcon style={{ fontSize: '0.9rem' }} />}
+          id="panel1d-header">
+          <Typography>Language</Typography>
+          <Box sx={{ marginLeft: 'auto' }}>
+            <IconButton size="small" disabled>
+              <ArrowUpwardIcon />
+            </IconButton>
+            <IconButton size="small" disabled>
+              <ArrowDownwardIcon />
+            </IconButton>
+            <IconButton size="small" disabled>
+              <DeleteIcon />
+            </IconButton>
+          </Box>
+        </AccordionSummary>
+        <AccordionDetails>
+          <TextField
+            fullWidth
+            id="outlined-multiline-flexible"
+            value={
+              'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Qui fugit saepe tenetur molestiae officia cupiditate rem voluptas repellendus, consequatur cumque!'
+            }
+            multiline
+            variant="outlined"
+            minRows={5}
+            maxRows={8}
+          />
+        </AccordionDetails>
+      </Accordion>
+    </div>
+  );
+};