[1284] Remove tab when Form representation contains only one page

Bug: #1284 Signed-off-by: Axel RICHARD <axel.richard@obeo.fr>
eclipse-sirius · Jun 23, 2022 · 50d9146 · 50d9146
1 parent fa2c584
commit 50d9146
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 9 deletions.
diff --git 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
@@ -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}>