[1439] Add support for FormDescriptionEditor toolbar actions on frontend

Bug: #1439 Signed-off-by: Axel RICHARD <axel.richard@obeo.fr>
eclipse-sirius · Nov 8, 2022 · 7c5ea60 · 7c5ea60
1 parent 899ef1b
commit 7c5ea60
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 1 deletion.
diff --git a/...ontend/sirius-components-formdescriptioneditors/src/FormDescriptionEditorEventFragment.ts b/...ontend/sirius-components-formdescriptioneditors/src/FormDescriptionEditorEventFragment.ts
@@ -37,6 +37,11 @@ export const formDescriptionEditorEventSubscription = gql`
               id
             }
           }
+          toolbarActions {
+            id
+            label
+            kind
+          }
           widgets {
             id
             label

diff --git a/.../sirius-components-formdescriptioneditors/src/FormDescriptionEditorEventFragment.types.ts b/.../sirius-components-formdescriptioneditors/src/FormDescriptionEditorEventFragment.types.ts
@@ -71,6 +71,7 @@ export interface GQLRepresentationDescription {
 export interface GQLFormDescriptionEditor extends GQLRepresentation {
   id: string;
   metadata: GQLRepresentationMetadata;
+  toolbarActions: GQLFormDescriptionEditorToolbarAction[];
   widgets: GQLAbstractFormDescriptionEditorWidget[];
 }
 
@@ -89,6 +90,8 @@ export interface GQLFormDescriptionEditorFlexboxContainer extends GQLAbstractFor
   children: GQLAbstractFormDescriptionEditorWidget[];
 }
 
+export interface GQLFormDescriptionEditorToolbarAction extends GQLAbstractFormDescriptionEditorWidget {}
+
 export interface GQLAddWidgetInput {
   id: string;
   editingContextId: string;

diff --git a/...tend/sirius-components-formdescriptioneditors/src/FormDescriptionEditorRepresentation.tsx b/...tend/sirius-components-formdescriptioneditors/src/FormDescriptionEditorRepresentation.tsx
@@ -104,6 +104,16 @@ const useFormDescriptionEditorStyles = makeStyles((theme) => ({
     overflowX: 'auto',
     overflowY: 'scroll',
   },
+  labelAndToolbar: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignContent: 'space-between',
+  },
+  toolbar: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
   body: {
     display: 'flex',
     flexDirection: 'column',
@@ -445,7 +455,14 @@ export const FormDescriptionEditorRepresentation = ({
           </div>
         </div>
         <div className={classes.preview}>
-          <Typography>Preview</Typography>
+          <div className={classes.labelAndToolbar}>
+            <Typography>Preview</Typography>
+            <div className={classes.toolbar}>
+              {formDescriptionEditor.toolbarActions.map((toolbarAction) => (
+                <Button key={toolbarAction.id}>{toolbarAction.label}</Button>
+              ))}
+            </div>
+          </div>
           <div className={classes.body}>
             {formDescriptionEditor.widgets.map((widget) => (
               <WidgetEntry