[1281] Add support for Link widget in Form Description editor.

Bug: #1281
Signed-off-by: Florian Barbin <florian.barbin@obeo.fr>

packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/FormDescriptionEditorRepresentation.tsx

@@ -23,6 +23,7 @@ import ArrowDropDownCircleIcon from '@material-ui/icons/ArrowDropDownCircle';
 import BarChartIcon from '@material-ui/icons/BarChart';
 import CheckBoxIcon from '@material-ui/icons/CheckBox';
 import LabelOutlinedIcon from '@material-ui/icons/LabelOutlined';
+import LinkIcon from '@material-ui/icons/Link';
 import CloseIcon from '@material-ui/icons/Close';
 import PieChartIcon from '@material-ui/icons/PieChart';
 import RadioButtonCheckedIcon from '@material-ui/icons/RadioButtonChecked';
@@ -394,6 +395,18 @@ export const FormDescriptionEditorRepresentation = ({
               Button
             </Typography>
           </div>
+          <div
+            id="Link"
+            data-testid="FormDescriptionEditor-Link"
+            draggable="true"
+            className={classes.widgetKind}
+            onDragStart={handleDragStart}
+          >
+            <LinkIcon />
+            <Typography variant="caption" gutterBottom>
+              Link
+            </Typography>
+          </div>
           <div
             id="BarChart"
             data-testid="FormDescriptionEditor-BarChart"

packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/FormDescriptionEditorRepresentation.types.ts

@@ -19,6 +19,7 @@ export type Kind =
   | 'MultiSelect'
   | 'Button'
   | 'Label'
+  | 'Link'
   | 'BarChart'
   | 'PieChart'
   | 'FlexboxContainer';

packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/LinkWidget.tsx

@@ -0,0 +1,60 @@
+/*******************************************************************************
+ * Copyright (c) 2022 Obeo.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.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 Link from '@material-ui/core/Link';
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import { useEffect, useRef, useState } from 'react';
+import { WidgetProps } from './WidgetEntry.types';
+
+const useStyles = makeStyles((theme) => ({
+  selected: {
+    color: theme.palette.primary.main,
+  },
+}));
+
+export const LinkWidget = ({ widget, selection }: WidgetProps) => {
+  const classes = useStyles();
+
+  const [selected, setSelected] = useState<boolean>(false);
+
+  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]);
+
+  return (
+    <div>
+      <Typography variant="subtitle2" className={selected ? classes.selected : ''}>
+        {widget.label}
+      </Typography>
+      <Link
+        ref={ref}
+        style={{ color: 'inherit' }}
+        onFocus={() => setSelected(true)}
+        onBlur={() => setSelected(false)}
+        tabIndex={0}
+        href="#"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        noopener noreferrer
+      </Link>
+    </div>
+  );
+};

packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/WidgetEntry.tsx

@@ -49,6 +49,7 @@ import { WidgetEntryProps, WidgetEntryState, WidgetEntryStyleProps } from './Wid
 import { isKind } from './WidgetOperations';
 import { ButtonWidget } from './ButtonWidget';
 import { LabelWidget } from './LabelWidget';
+import { LinkWidget } from './LinkWidget';
 
 const useWidgetEntryStyles = makeStyles<Theme, WidgetEntryStyleProps>(() => ({
   widget: {
@@ -326,6 +327,16 @@ export const WidgetEntry = ({
         onDropBefore={onDropBefore}
       />
     );
+  } else if (widget.kind === 'Link') {
+    widgetElement = (
+      <LinkWidget
+        data-testid={widget.id}
+        widget={widget}
+        selection={selection}
+        setSelection={setSelection}
+        onDropBefore={onDropBefore}
+      />
+    );
   } else if (widget.kind === 'BarChart') {
     widgetElement = (
       <BarChartWidget

packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/WidgetOperations.tsx

@@ -22,6 +22,7 @@ export const isKind = (value: string): value is Kind => {
     value === 'MultiSelect' ||
     value === 'Button' ||
     value === 'Label' ||
+    value === 'Link' ||
     value === 'BarChart' ||
     value === 'PieChart' ||
     value === 'FlexboxContainer'