[4495] Add an user indicator when executing form actions

Bug: #4495 Signed-off-by: Michaël Charfadi <[email protected]>
eclipse-sirius · Jan 31, 2025 · 58bfed2 · 58bfed2
1 parent e148c95
commit 58bfed2
Show file tree

Hide file tree

Showing 12 changed files with 244 additions and 136 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -109,6 +109,7 @@ Because this new extension point offers complete control of this part of the UI,
 See `PapayaExtensionRegistry.tsx` for how the same result as before can be achieved with the new extension point.
 - https://github.com/eclipse-sirius/sirius-web/issues/4403[#4403] [table] Add support of actions in table rows context menu
 - https://github.com/eclipse-sirius/sirius-web/issues/4326[#4326] [diagram] Add quickAccessTools to diagram's palette in view dsl
+- https://github.com/eclipse-sirius/sirius-web/issues/4495[#4495] [form] Add an user indicator when executing form actions
 
 
 === Improvements

diff --git a/...ges/forms/frontend/sirius-components-forms/src/propertysections/ButtonPropertySection.tsx b/...ges/forms/frontend/sirius-components-forms/src/propertysections/ButtonPropertySection.tsx
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2022, 2024 Obeo.
+ * Copyright (c) 2022, 2025 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
@@ -12,9 +12,11 @@
  *******************************************************************************/
 import { useMutation } from '@apollo/client';
 import { ServerContext, ServerContextValue, getCSSColor, useMultiToast } from '@eclipse-sirius/sirius-components-core';
+import Backdrop from '@mui/material/Backdrop';
 import Button from '@mui/material/Button';
+import CircularProgress from '@mui/material/CircularProgress';
 import gql from 'graphql-tag';
-import { useContext, useEffect } from 'react';
+import { useContext } from 'react';
 import { makeStyles } from 'tss-react/mui';
 import { PropertySectionComponent, PropertySectionComponentProps } from '../form/Form.types';
 import { GQLButton } from '../form/FormEventFragments.types';
@@ -58,6 +60,10 @@ const useStyle = makeStyles<ButtonStyleProps>()(
       flexDirection: 'row',
       gap: theme.spacing(2),
     },
+    loading: {
+      boxShadow: 'none',
+      zIndex: theme.zIndex.drawer + 1,
+    },
   })
 );
 
@@ -117,19 +123,16 @@ export const ButtonPropertySection: PropertySectionComponent<GQLButton> = ({
 
   const { addErrorMessage, addMessages } = useMultiToast();
 
-  useEffect(() => {
-    if (!loading) {
-      if (error) {
-        addErrorMessage('An unexpected error has occurred, please refresh the page');
-      }
-      if (data) {
-        const { pushButton } = data;
-        if (isErrorPayload(pushButton) || isSuccessPayload(pushButton)) {
-          addMessages(pushButton.messages);
-        }
-      }
+  if (error) {
+    addErrorMessage('An unexpected error has occurred, please refresh the page');
+  }
+
+  if (data) {
+    const { pushButton } = data;
+    if (isErrorPayload(pushButton) || isSuccessPayload(pushButton)) {
+      addMessages(pushButton.messages);
     }
-  }, [loading, error, data]);
+  }
 
   const onClick = () => {
     const input: GQLPushButtonInput = {
@@ -150,6 +153,12 @@ export const ButtonPropertySection: PropertySectionComponent<GQLButton> = ({
         widget={widget}
         data-testid={widget.label}
       />
+      {loading ? (
+        <>
+          <CircularProgress size="24px" />
+          <Backdrop className={classes.loading} open={loading}></Backdrop>
+        </>
+      ) : null}
       <Button
         data-testid={widget.buttonLabel}
         variant="contained"

diff --git a/...s/forms/frontend/sirius-components-forms/src/propertysections/CheckboxPropertySection.tsx b/...s/forms/frontend/sirius-components-forms/src/propertysections/CheckboxPropertySection.tsx
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2019, 2024 Obeo.
+ * Copyright (c) 2019, 2025 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
@@ -12,10 +12,11 @@
  *******************************************************************************/
 import { gql, useMutation } from '@apollo/client';
 import { getCSSColor, useMultiToast } from '@eclipse-sirius/sirius-components-core';
+import Backdrop from '@mui/material/Backdrop';
 import Checkbox from '@mui/material/Checkbox';
+import CircularProgress from '@mui/material/CircularProgress';
 import FormControl from '@mui/material/FormControl';
 import FormHelperText from '@mui/material/FormHelperText';
-import { useEffect } from 'react';
 import { makeStyles } from 'tss-react/mui';
 import { PropertySectionComponent, PropertySectionComponentProps } from '../form/Form.types';
 import { GQLCheckbox } from '../form/FormEventFragments.types';
@@ -60,6 +61,10 @@ const useStyle = makeStyles<CheckboxStyleProps>()((theme, { color, gridLayout })
       gridColumn: widgetGridColumn,
       gridRow: widgetGridRow ?? '1/2',
     },
+    loading: {
+      boxShadow: 'none',
+      zIndex: theme.zIndex.drawer + 1,
+    },
   };
 });
 
@@ -118,24 +123,27 @@ export const CheckboxPropertySection: PropertySectionComponent<GQLCheckbox> = ({
 
   const { addErrorMessage, addMessages } = useMultiToast();
 
-  useEffect(() => {
-    if (!loading) {
-      if (error) {
-        addErrorMessage('An unexpected error has occurred, please refresh the page');
-      }
-      if (data) {
-        const { editCheckbox } = data;
-        if (isErrorPayload(editCheckbox) || isSuccessPayload(editCheckbox)) {
-          addMessages(editCheckbox.messages);
-        }
-      }
+  if (error) {
+    addErrorMessage('An unexpected error has occurred, please refresh the page');
+  }
+
+  if (data) {
+    const { editCheckbox } = data;
+    if (isErrorPayload(editCheckbox) || isSuccessPayload(editCheckbox)) {
+      addMessages(editCheckbox.messages);
     }
-  }, [loading, error, data]);
+  }
 
   return (
     <FormControl classes={{ root: classes.propertySection }} error={widget.diagnostics.length > 0}>
       <div className={classes.propertySectionLabel}>
         <PropertySectionLabel editingContextId={editingContextId} formId={formId} widget={widget} />
+        {loading ? (
+          <>
+            <CircularProgress size="24px" />
+            <Backdrop className={classes.loading} open={loading}></Backdrop>
+          </>
+        ) : null}
       </div>
       <div className={classes.propertySectionWidget}>
         <Checkbox

diff --git a/...s/frontend/sirius-components-forms/src/propertysections/DateTimeWidgetPropertySection.tsx b/...s/frontend/sirius-components-forms/src/propertysections/DateTimeWidgetPropertySection.tsx
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2024 Obeo.
+ * Copyright (c) 2024, 2025 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
@@ -12,6 +12,8 @@
  *******************************************************************************/
 import { gql, useMutation } from '@apollo/client';
 import { getCSSColor, useReporting } from '@eclipse-sirius/sirius-components-core';
+import Backdrop from '@mui/material/Backdrop';
+import CircularProgress from '@mui/material/CircularProgress';
 import TextField from '@mui/material/TextField';
 import { FocusEvent, useEffect, useState } from 'react';
 import { makeStyles } from 'tss-react/mui';
@@ -67,6 +69,10 @@ const useStyle = makeStyles<DateTimeStyleProps>()(
         gridColumn: widgetGridColumn,
         gridRow: widgetGridRow,
       },
+      loading: {
+        boxShadow: 'none',
+        zIndex: theme.zIndex.drawer + 1,
+      },
     };
   }
 );
@@ -170,6 +176,12 @@ export const DateTimeWidgetPropertySection: PropertySectionComponent<GQLDateTime
       className={classes.propertySection}>
       <div className={classes.propertySectionLabel}>
         <PropertySectionLabel editingContextId={editingContextId} formId={formId} widget={widget} />
+        {mutationEditDateTimeResult.loading ? (
+          <>
+            <CircularProgress size="24px" />
+            <Backdrop className={classes.loading} open={mutationEditDateTimeResult.loading}></Backdrop>
+          </>
+        ) : null}
       </div>
       <div className={classes.propertySectionWidget}>
         <TextField

diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/ListPropertySection.tsx b/packages/forms/frontend/sirius-components-forms/src/propertysections/ListPropertySection.tsx
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2019, 2024 Obeo.
+ * Copyright (c) 2019, 2025 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
@@ -19,6 +19,8 @@ import {
   useSelection,
 } from '@eclipse-sirius/sirius-components-core';
 import DeleteIcon from '@mui/icons-material/Delete';
+import Backdrop from '@mui/material/Backdrop';
+import CircularProgress from '@mui/material/CircularProgress';
 import FormControl from '@mui/material/FormControl';
 import FormHelperText from '@mui/material/FormHelperText';
 import IconButton from '@mui/material/IconButton';
@@ -28,7 +30,7 @@ import TableCell from '@mui/material/TableCell';
 import TableRow from '@mui/material/TableRow';
 import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/material/styles';
-import { MouseEvent, useEffect } from 'react';
+import { MouseEvent } from 'react';
 import { makeStyles } from 'tss-react/mui';
 import { PropertySectionComponent, PropertySectionComponentProps } from '../form/Form.types';
 import { GQLList, GQLListItem } from '../form/FormEventFragments.types';
@@ -111,6 +113,10 @@ const useListPropertySectionStyles = makeStyles<ListStyleProps>()(
       whiteSpace: 'nowrap',
       flexGrow: 1,
     },
+    loading: {
+      boxShadow: 'none',
+      zIndex: theme.zIndex.drawer + 1,
+    },
   })
 );
 
@@ -176,33 +182,30 @@ export const ListPropertySection: PropertySectionComponent<GQLList> = ({
 
   const { addErrorMessage, addMessages } = useMultiToast();
 
-  useEffect(() => {
-    if (!deleteLoading) {
-      if (deleteError) {
-        addErrorMessage('An unexpected error has occurred, please refresh the page');
-      }
-      if (deleteData) {
-        const { deleteListItem } = deleteData;
-        if (isErrorPayload(deleteListItem) || isSuccessPayload(deleteListItem)) {
-          addMessages(deleteListItem.messages);
-        }
+  if (!deleteLoading) {
+    if (deleteError) {
+      addErrorMessage('An unexpected error has occurred, please refresh the page');
+    }
+    if (deleteData) {
+      const { deleteListItem } = deleteData;
+      if (isErrorPayload(deleteListItem) || isSuccessPayload(deleteListItem)) {
+        addMessages(deleteListItem.messages);
       }
     }
-  }, [deleteLoading, deleteError, deleteData]);
+  }
 
-  useEffect(() => {
-    if (!clickLoading) {
-      if (clickError) {
-        addErrorMessage('An unexpected error has occurred, please refresh the page');
-      }
-      if (clickData) {
-        const { clickListItem } = clickData;
-        if (isErrorPayload(clickListItem) || isSuccessPayload(clickListItem)) {
-          addMessages(clickListItem.messages);
-        }
+  if (!clickLoading) {
+    if (clickError) {
+      addErrorMessage('An unexpected error has occurred, please refresh the page');
+    }
+    if (clickData) {
+      const { clickListItem } = clickData;
+      if (isErrorPayload(clickListItem) || isSuccessPayload(clickListItem)) {
+        addMessages(clickListItem.messages);
       }
     }
-  }, [clickLoading, clickError, clickData]);
+  }
+
   const onSimpleClick = (item: GQLListItem) => {
     const { id, kind } = item;
     setSelection({ entries: [{ id, kind }] });
@@ -269,6 +272,12 @@ export const ListPropertySection: PropertySectionComponent<GQLList> = ({
   return (
     <FormControl error={widget.diagnostics.length > 0} fullWidth>
       <PropertySectionLabel editingContextId={editingContextId} formId={formId} widget={widget} />
+      {clickLoading || deleteLoading ? (
+        <>
+          <CircularProgress size="24px" />
+          <Backdrop className={classes.loading} open={clickLoading || deleteLoading}></Backdrop>
+        </>
+      ) : null}
       <Table size="small" data-testid={`table-${widget.label}`}>
         <TableBody>
           {items.map((item) => (

diff --git a/...orms/frontend/sirius-components-forms/src/propertysections/MultiSelectPropertySection.tsx b/...orms/frontend/sirius-components-forms/src/propertysections/MultiSelectPropertySection.tsx
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2021, 2024 Obeo.
+ * Copyright (c) 2021, 2025 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
@@ -12,14 +12,15 @@
  *******************************************************************************/
 import { gql, useMutation } from '@apollo/client';
 import { IconOverlay, getCSSColor, useMultiToast } from '@eclipse-sirius/sirius-components-core';
+import Backdrop from '@mui/material/Backdrop';
 import Checkbox from '@mui/material/Checkbox';
+import CircularProgress from '@mui/material/CircularProgress';
 import FormControl from '@mui/material/FormControl';
 import FormHelperText from '@mui/material/FormHelperText';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import MenuItem from '@mui/material/MenuItem';
 import Select from '@mui/material/Select';
-import { useEffect } from 'react';
 import { makeStyles } from 'tss-react/mui';
 import { PropertySectionComponent, PropertySectionComponentProps } from '../form/Form.types';
 import { GQLMultiSelect } from '../form/FormEventFragments.types';
@@ -78,6 +79,10 @@ const useStyle = makeStyles<MultiSelectStyleProps>()(
         gridColumn: widgetGridColumn,
         gridRow: widgetGridRow,
       },
+      loading: {
+        boxShadow: 'none',
+        zIndex: theme.zIndex.drawer + 1,
+      },
     };
   }
 );
@@ -144,24 +149,26 @@ export const MultiSelectPropertySection: PropertySectionComponent<GQLMultiSelect
 
   const { addErrorMessage, addMessages } = useMultiToast();
 
-  useEffect(() => {
-    if (!loading) {
-      if (error) {
-        addErrorMessage('An unexpected error has occurred, please refresh the page');
-      }
-      if (data) {
-        const { editMultiSelect } = data;
-        if (isErrorPayload(editMultiSelect) || isSuccessPayload(editMultiSelect)) {
-          addMessages(editMultiSelect.messages);
-        }
-      }
+  if (error) {
+    addErrorMessage('An unexpected error has occurred, please refresh the page');
+  }
+  if (data) {
+    const { editMultiSelect } = data;
+    if (isErrorPayload(editMultiSelect) || isSuccessPayload(editMultiSelect)) {
+      addMessages(editMultiSelect.messages);
     }
-  }, [loading, error, data]);
+  }
 
   return (
     <FormControl error={widget.diagnostics.length > 0} className={classes.propertySection}>
       <div className={classes.propertySectionLabel}>
         <PropertySectionLabel editingContextId={editingContextId} formId={formId} widget={widget} />
+        {loading ? (
+          <>
+            <CircularProgress size="24px" />
+            <Backdrop className={classes.loading} open={loading}></Backdrop>
+          </>
+        ) : null}
       </div>
       <div className={classes.propertySectionWidget}>
         <Select