[1275] Add support for Label widget in Form Description Editor

Bug: #1275 Signed-off-by: Florian Barbin <florian.barbin@obeo.fr>
eclipse-sirius · Jun 22, 2022 · 47679f7 · 47679f7
1 parent 4664337
commit 47679f7
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 2 deletions.
diff --git a/frontend/src/formdescriptioneditor/FormDescriptionEditorWebSocketContainer.tsx b/frontend/src/formdescriptioneditor/FormDescriptionEditorWebSocketContainer.tsx
@@ -21,6 +21,7 @@ import ArrowDropDownCircleIcon from '@material-ui/icons/ArrowDropDownCircle';
 import BarChartIcon from '@material-ui/icons/BarChart';
 import CheckBoxIcon from '@material-ui/icons/CheckBox';
 import CloseIcon from '@material-ui/icons/Close';
+import LabelOutlinedIcon from '@material-ui/icons/LabelOutlined';
 import PieChartIcon from '@material-ui/icons/PieChart';
 import RadioButtonCheckedIcon from '@material-ui/icons/RadioButtonChecked';
 import TextFieldsIcon from '@material-ui/icons/TextFields';
@@ -140,6 +141,7 @@ const isKind = (value: string): value is Kind => {
     value === 'Radio' ||
     value === 'Select' ||
     value === 'MultiSelect' ||
+    value === 'Label' ||
     value === 'BarChart' ||
     value === 'PieChart'
   );
@@ -268,7 +270,6 @@ export const FormDescriptionEditorWebSocketContainer = ({
   const handleDrop: React.DragEventHandler<HTMLDivElement> = (event) => {
     event.preventDefault();
     event.currentTarget.classList.remove(classes.dragOver);
-
     const id: string = event.dataTransfer.getData('text/plain');
 
     if (isKind(id)) {
@@ -377,6 +378,18 @@ export const FormDescriptionEditorWebSocketContainer = ({
               MultiSelect
             </Typography>
           </div>
+          <div
+            id="Label"
+            data-testid="FormDescriptionEditor-Label"
+            draggable="true"
+            className={classes.widgetKind}
+            onDragStart={handleDragStart}
+          >
+            <LabelOutlinedIcon />
+            <Typography variant="caption" gutterBottom>
+              Label
+            </Typography>
+          </div>
           <div
             id="BarChart"
             data-testid="FormDescriptionEditor-BarChart"

diff --git a/frontend/src/formdescriptioneditor/FormDescriptionEditorWebSocketContainer.types.ts b/frontend/src/formdescriptioneditor/FormDescriptionEditorWebSocketContainer.types.ts
@@ -10,4 +10,4 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-export type Kind = 'Textfield' | 'TextArea' | 'Checkbox' | 'Radio' | 'Select' | 'MultiSelect';
+export type Kind = 'Textfield' | 'TextArea' | 'Checkbox' | 'Radio' | 'Select' | 'MultiSelect' | 'Label';
diff --git a/frontend/src/formdescriptioneditor/LabelWidget.tsx b/frontend/src/formdescriptioneditor/LabelWidget.tsx
@@ -0,0 +1,50 @@
+/*******************************************************************************
+ * 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 { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import { WidgetProps } from 'formdescriptioneditor/WidgetEntry.types';
+import React, { useEffect, useRef, useState } from 'react';
+
+const useStyles = makeStyles((theme) => ({
+  selected: {
+    color: theme.palette.primary.main,
+  },
+}));
+
+export const LabelWidget = ({ 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>
+      <Typography ref={ref} onFocus={() => setSelected(true)} onBlur={() => setSelected(false)} tabIndex={0}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit
+      </Typography>
+    </div>
+  );
+};
diff --git a/frontend/src/formdescriptioneditor/WidgetEntry.tsx b/frontend/src/formdescriptioneditor/WidgetEntry.tsx
@@ -38,6 +38,7 @@ import {
   GQLMoveWidgetPayload,
 } from './FormDescriptionEditorEventFragment.types';
 import { Kind } from './FormDescriptionEditorWebSocketContainer.types';
+import { LabelWidget } from './LabelWidget';
 import { MultiSelectWidget } from './MultiSelectWidget';
 import { PieChartWidget } from './PieChartWidget';
 import { RadioWidget } from './RadioWidget';
@@ -72,6 +73,7 @@ const isKind = (value: string): value is Kind => {
     value === 'Radio' ||
     value === 'Select' ||
     value === 'MultiSelect' ||
+    value === 'Label' ||
     value === 'BarChart' ||
     value === 'PieChart'
   );
@@ -316,6 +318,16 @@ export const WidgetEntry = ({
         onDropBefore={onDropBefore}
       />
     );
+  } else if (widget.kind === 'Label') {
+    widgetElement = (
+      <LabelWidget
+        data-testid={widget.id}
+        widget={widget}
+        selection={selection}
+        setSelection={setSelection}
+        onDropBefore={onDropBefore}
+      />
+    );
   } else if (widget.kind === 'BarChart') {
     widgetElement = (
       <BarChartWidget