[1439] Add support for FormDescriptionEditor toolbar actions on frontend

Bug: #1439 Signed-off-by: Axel RICHARD <axel.richard@obeo.fr>
eclipse-sirius · Nov 9, 2022 · 2cdb65f · 2cdb65f
1 parent 379d883
commit 2cdb65f
Show file tree

Hide file tree

Showing 6 changed files with 453 additions and 3 deletions.
diff --git a/...descriptioneditors/frontend/sirius-components-formdescriptioneditors/src/ButtonWidget.tsx b/...descriptioneditors/frontend/sirius-components-formdescriptioneditors/src/ButtonWidget.tsx
@@ -13,8 +13,8 @@
 import Button from '@material-ui/core/Button';
 import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
-import { WidgetProps } from './WidgetEntry.types';
 import { useEffect, useRef, useState } from 'react';
+import { WidgetProps } from './WidgetEntry.types';
 
 const useStyles = makeStyles((theme) => ({
   selected: {

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
@@ -119,3 +124,45 @@ export const moveWidgetMutation = gql`
     }
   }
 `;
+
+export const addToolbarActionMutation = gql`
+  mutation addToolbarAction($input: AddToolbarActionInput!) {
+    addToolbarAction(input: $input) {
+      __typename
+      ... on AddToolbarActionSuccessPayload {
+        id
+      }
+      ... on ErrorPayload {
+        message
+      }
+    }
+  }
+`;
+
+export const deleteToolbarActionMutation = gql`
+  mutation deleteToolbarAction($input: DeleteToolbarActionInput!) {
+    deleteToolbarAction(input: $input) {
+      __typename
+      ... on DeleteToolbarActionSuccessPayload {
+        id
+      }
+      ... on ErrorPayload {
+        message
+      }
+    }
+  }
+`;
+
+export const moveToolbarActionMutation = gql`
+  mutation moveToolbarAction($input: MoveToolbarActionInput!) {
+    moveToolbarAction(input: $input) {
+      __typename
+      ... on MoveToolbarActionSuccessPayload {
+        id
+      }
+      ... on ErrorPayload {
+        message
+      }
+    }
+  }
+`;
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;
@@ -162,6 +165,83 @@ export interface GQLMoveWidgetSuccessPayload extends GQLMoveWidgetPayload {
   id: string;
 }
 
-export interface GQLErrorPayload extends GQLAddWidgetPayload, GQLDeleteWidgetPayload, GQLMoveWidgetPayload {
+export interface GQLAddToolbarActionInput {
+  id: string;
+  editingContextId: string;
+  representationId: string;
+  containerId: string | null;
+}
+
+export interface GQLAddToolbarActionMutationVariables {
+  input: GQLAddToolbarActionInput;
+}
+
+export interface GQLAddToolbarActionMutationData {
+  addToolbarAction: GQLAddToolbarActionPayload;
+}
+
+export interface GQLAddToolbarActionPayload {
+  __typename: string;
+}
+
+export interface GQLAddToolbarActionSuccessPayload extends GQLAddToolbarActionPayload {
+  id: string;
+}
+
+export interface GQLDeleteToolbarActionInput {
+  id: string;
+  editingContextId: string;
+  representationId: string;
+  toolbarActionId: string;
+}
+
+export interface GQLDeleteToolbarActionMutationVariables {
+  input: GQLDeleteToolbarActionInput;
+}
+
+export interface GQLDeleteToolbarActionMutationData {
+  deleteToolbarAction: GQLDeleteToolbarActionPayload;
+}
+
+export interface GQLDeleteToolbarActionPayload {
+  __typename: string;
+}
+
+export interface GQLDeleteToolbarActionSuccessPayload extends GQLDeleteToolbarActionPayload {
+  id: string;
+}
+
+export interface GQLMoveToolbarActionInput {
+  id: string;
+  editingContextId: string;
+  representationId: string;
+  containerId: string | null;
+  toolbarActionId: string;
+  index: number;
+}
+
+export interface GQLMoveToolbarActionMutationVariables {
+  input: GQLMoveToolbarActionInput;
+}
+
+export interface GQLMoveToolbarActionMutationData {
+  moveToolbarAction: GQLMoveToolbarActionPayload;
+}
+
+export interface GQLMoveToolbarActionPayload {
+  __typename: string;
+}
+
+export interface GQLMoveToolbarActionSuccessPayload extends GQLMoveToolbarActionPayload {
+  id: string;
+}
+
+export interface GQLErrorPayload
+  extends GQLAddWidgetPayload,
+    GQLDeleteWidgetPayload,
+    GQLMoveWidgetPayload,
+    GQLAddToolbarActionPayload,
+    GQLDeleteToolbarActionPayload,
+    GQLMoveToolbarActionPayload {
   message: string;
 }
diff --git a/...tend/sirius-components-formdescriptioneditors/src/FormDescriptionEditorRepresentation.tsx b/...tend/sirius-components-formdescriptioneditors/src/FormDescriptionEditorRepresentation.tsx
@@ -18,6 +18,7 @@ import Snackbar from '@material-ui/core/Snackbar';
 import { makeStyles } from '@material-ui/core/styles';
 import Tooltip from '@material-ui/core/Tooltip';
 import Typography from '@material-ui/core/Typography';
+import AddIcon from '@material-ui/icons/Add';
 import ArrowDropDownCircleIcon from '@material-ui/icons/ArrowDropDownCircle';
 import BarChartIcon from '@material-ui/icons/BarChart';
 import CheckBoxIcon from '@material-ui/icons/CheckBox';
@@ -33,11 +34,15 @@ import { useMachine } from '@xstate/react';
 import React, { useEffect } from 'react';
 import { v4 as uuid } from 'uuid';
 import {
+  addToolbarActionMutation,
   addWidgetMutation,
   formDescriptionEditorEventSubscription,
   moveWidgetMutation,
 } from './FormDescriptionEditorEventFragment';
 import {
+  GQLAddToolbarActionInput,
+  GQLAddToolbarActionMutationData,
+  GQLAddToolbarActionMutationVariables,
   GQLAddWidgetInput,
   GQLAddWidgetMutationData,
   GQLAddWidgetMutationVariables,
@@ -62,6 +67,7 @@ import {
   ShowToastEvent,
 } from './FormDescriptionEditorRepresentationMachine';
 import { Button } from './icons/Button';
+import { ToolbarActionWidget } from './ToolbarActionWidget';
 import { WidgetEntry } from './WidgetEntry';
 import { isKind } from './WidgetOperations';
 const isErrorPayload = (payload: GQLAddWidgetPayload | GQLMoveWidgetPayload): payload is GQLErrorPayload =>
@@ -104,6 +110,20 @@ const useFormDescriptionEditorStyles = makeStyles((theme) => ({
     overflowX: 'auto',
     overflowY: 'scroll',
   },
+  labelAndToolbar: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  toolbar: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  },
+  toolbarAction: {
+    paddingRight: theme.spacing(1),
+    whiteSpace: 'nowrap',
+  },
   body: {
     display: 'flex',
     flexDirection: 'column',
@@ -225,6 +245,29 @@ export const FormDescriptionEditorRepresentation = ({
     }
   }, [moveWidgetLoading, moveWidgetData, moveWidgetError, dispatch]);
 
+  const [
+    addToolbarAction,
+    { loading: addToolbarActionLoading, data: addToolbarActionData, error: addToolbarActionError },
+  ] = useMutation<GQLAddToolbarActionMutationData, GQLAddToolbarActionMutationVariables>(addToolbarActionMutation);
+
+  useEffect(() => {
+    if (!addToolbarActionLoading) {
+      if (addToolbarActionError) {
+        const message: string = addToolbarActionError.message;
+        const showToastEvent: ShowToastEvent = { type: 'SHOW_TOAST', message };
+        dispatch(showToastEvent);
+      }
+      if (addToolbarActionData) {
+        const { addToolbarAction } = addToolbarActionData;
+        if (isErrorPayload(addToolbarAction)) {
+          const { message } = addToolbarAction;
+          const showToastEvent: ShowToastEvent = { type: 'SHOW_TOAST', message };
+          dispatch(showToastEvent);
+        }
+      }
+    }
+  }, [addToolbarActionLoading, addToolbarActionData, addToolbarActionError, dispatch]);
+
   useEffect(() => {
     if (error) {
       const message: string = 'An error has occurred while trying to retrieve the form description editor';
@@ -293,6 +336,17 @@ export const FormDescriptionEditorRepresentation = ({
     }
   };
 
+  const handleAddToolbarAction: React.MouseEventHandler<HTMLButtonElement> = () => {
+    const addToolbarActionInput: GQLAddToolbarActionInput = {
+      id: uuid(),
+      editingContextId,
+      representationId,
+      containerId: null,
+    };
+    const addToolbarActionVariables: GQLAddToolbarActionMutationVariables = { input: addToolbarActionInput };
+    addToolbarAction({ variables: addToolbarActionVariables });
+  };
+
   let content: JSX.Element | null = null;
 
   if (formDescriptionEditorRepresentation === 'ready' && formDescriptionEditor) {
@@ -445,7 +499,30 @@ 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) => (
+                <div className={classes.toolbarAction}>
+                  <ToolbarActionWidget
+                    key={toolbarAction.id}
+                    editingContextId={editingContextId}
+                    representationId={representationId}
+                    siblings={formDescriptionEditor.toolbarActions}
+                    toolbarAction={toolbarAction}
+                    selection={selection}
+                    setSelection={setSelection}
+                    onDropBefore={null}
+                  />
+                </div>
+              ))}
+              <Tooltip title={'Add new Toolbar Action'} arrow key={'FormDescriptionEditor-ToolbarAction-NewAction'}>
+                <IconButton size="small" aria-label="add" color="primary" onClick={handleAddToolbarAction}>
+                  <AddIcon />
+                </IconButton>
+              </Tooltip>
+            </div>
+          </div>
           <div className={classes.body}>
             {formDescriptionEditor.widgets.map((widget) => (
               <WidgetEntry