From 9a334e3378dcd7aa60e8e080b71ad9fe2f1a59e1 Mon Sep 17 00:00:00 2001
From: Florian Barbin <florian.barbin@obeo.fr>
Date: Thu, 23 Jun 2022 15:36:34 +0200
Subject: [PATCH] [1281] Add support for Link widget in Form Description
 editor.

Bug: https://github.com/eclipse-sirius/sirius-components/issues/1281
Signed-off-by: Florian Barbin <florian.barbin@obeo.fr>
---
 .../FormDescriptionEditorRepresentation.tsx   | 13 ++++
 ...rmDescriptionEditorRepresentation.types.ts |  1 +
 .../src/LinkWidget.tsx                        | 60 +++++++++++++++++++
 .../src/WidgetEntry.tsx                       | 11 ++++
 .../src/WidgetOperations.tsx                  |  1 +
 5 files changed, 86 insertions(+)
 create mode 100644 packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/LinkWidget.tsx

diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/FormDescriptionEditorRepresentation.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/FormDescriptionEditorRepresentation.tsx
index dd472ebbbe..981fa9777d 100644
--- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/FormDescriptionEditorRepresentation.tsx
+++ b/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"
diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/FormDescriptionEditorRepresentation.types.ts b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/FormDescriptionEditorRepresentation.types.ts
index 9a3bdf139f..b9cae196f0 100644
--- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/FormDescriptionEditorRepresentation.types.ts
+++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/FormDescriptionEditorRepresentation.types.ts
@@ -19,6 +19,7 @@ export type Kind =
   | 'MultiSelect'
   | 'Button'
   | 'Label'
+  | 'Link'
   | 'BarChart'
   | 'PieChart'
   | 'FlexboxContainer';
diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/LinkWidget.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/LinkWidget.tsx
new file mode 100644
index 0000000000..5547545570
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/WidgetEntry.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/WidgetEntry.tsx
index 22591c841d..9ae1a6f5bd 100644
--- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/WidgetEntry.tsx
+++ b/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
diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/WidgetOperations.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/WidgetOperations.tsx
index 2196e36b80..db70f2a450 100644
--- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/WidgetOperations.tsx
+++ b/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'