From 50d914698e6ff7372ef4017f370e1d6d42dd57c7 Mon Sep 17 00:00:00 2001
From: Axel RICHARD <axel.richard@obeo.fr>
Date: Thu, 23 Jun 2022 11:23:01 +0200
Subject: [PATCH] [1284] Remove tab when Form representation contains only one
 page

Bug: https://github.com/eclipse-sirius/sirius-components/issues/1284
Signed-off-by: Axel RICHARD <axel.richard@obeo.fr>
---
 CHANGELOG.adoc                               |  1 +
 frontend/src/form/FormWebSocketContainer.tsx | 38 +++++++++++++++-----
 2 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
index 4d23fd350f..03843b57fc 100644
--- a/CHANGELOG.adoc
+++ b/CHANGELOG.adoc
@@ -26,6 +26,7 @@
 === Improvements
 
 - https://github.com/eclipse-sirius/sirius-components/issues/1242[#1242] [view] Provide icons for View DSL Widgets and FormDescription
+- https://github.com/eclipse-sirius/sirius-components/issues/1284[#1284] [form] Remove tab when Form representation contains only one page
 
 === New features
 
diff --git a/frontend/src/form/FormWebSocketContainer.tsx b/frontend/src/form/FormWebSocketContainer.tsx
index 5ccfd052f1..faaef0ca87 100644
--- a/frontend/src/form/FormWebSocketContainer.tsx
+++ b/frontend/src/form/FormWebSocketContainer.tsx
@@ -35,6 +35,7 @@ import {
   SwitchFormEvent,
 } from 'form/FormWebSocketContainerMachine';
 import gql from 'graphql-tag';
+import { Page } from 'properties/Page';
 import { Properties } from 'properties/Properties';
 import React, { useEffect } from 'react';
 import { RepresentationComponentProps } from 'workbench/Workbench.types';
@@ -60,6 +61,10 @@ const formEventSubscription = gql`
 `;
 
 const useFormWebSocketContainerStyles = makeStyles((theme) => ({
+  page: {
+    paddingLeft: theme.spacing(1),
+    paddingRight: theme.spacing(1),
+  },
   complete: {
     display: 'flex',
     alignItems: 'center',
@@ -130,15 +135,30 @@ export const FormWebSocketContainer = ({
 
   let content = null;
   if (formWebSocketContainer === 'ready') {
-    content = (
-      <Properties
-        editingContextId={editingContextId}
-        form={form}
-        widgetSubscriptions={widgetSubscriptions}
-        setSelection={setSelection}
-        readOnly={readOnly}
-      />
-    );
+    if (form.pages.length > 1) {
+      content = (
+        <Properties
+          editingContextId={editingContextId}
+          form={form}
+          widgetSubscriptions={widgetSubscriptions}
+          setSelection={setSelection}
+          readOnly={readOnly}
+        />
+      );
+    } else {
+      content = (
+        <div data-testid="page" className={classes.page}>
+          <Page
+            editingContextId={editingContextId}
+            formId={id}
+            page={form.pages[0]}
+            widgetSubscriptions={widgetSubscriptions}
+            setSelection={setSelection}
+            readOnly={readOnly}
+          />
+        </div>
+      );
+    }
   } else if (formWebSocketContainer === 'complete') {
     content = (
       <div className={classes.complete}>