Fro/enh/arrange all button

CHANGELOG.adoc

@@ -153,7 +153,7 @@ Trees defined via the view DSL can alternatively provide a tooltip expression vi
 - https://github.com/eclipse-sirius/sirius-web/issues/6287[#6287] [sirius-web] Add a cancel button to the _New Project_ creation page.
 - https://github.com/eclipse-sirius/sirius-web/issues/6267[#6267] [sirius-web] Allow customizing the content of the Views Explorer via delegates.
 - https://github.com/eclipse-sirius/sirius-web/issues/6268[#6268] [sirius-web] Allow customizing the labels of the Views Explorer via delegates.
-
+- https://github.com/eclipse-sirius/sirius-web/issues/6300[#6300] [diagram] Make the arrange-all button remember the last layout configuration
 
 
 == 2026.1.0

integration-tests-playwright/playwright/e2e/diagrams/arrange-all.spec.ts

@@ -44,8 +44,7 @@ test.describe('diagram - arrange all', () => {
 
     await expect(page.getByTestId('FreeForm - Wifi')).not.toBeInViewport();
 
-    await page.getByTestId('arrange-all-menu').click();
-    await page.getByTestId('arrange-all-elk-layered').click();
+    await page.getByTestId('arrange-all-main-button').click();
 
     await expect(page.getByTestId('FreeForm - Wifi')).toBeInViewport();
   });
@@ -75,8 +74,7 @@ test.describe('diagram - arrange all', () => {
     await playwrightExplorer.select('diagram');
     await expect(page.getByTestId('rf__wrapper')).toBeAttached();
 
-    await page.getByTestId('arrange-all-menu').click();
-    await page.getByTestId('arrange-all-elk-layered').click();
+    await page.getByTestId('arrange-all-main-button').click();
 
     const sourceNode = new PlaywrightNode(page, 'source');
     const targetNode = new PlaywrightNode(page, 'target');
@@ -98,8 +96,7 @@ test.describe('diagram - arrange all', () => {
     await playwrightExplorer.select('diagram');
     await expect(page.getByTestId('rf__wrapper')).toBeAttached();
 
-    await page.getByTestId('arrange-all-menu').click();
-    await page.getByTestId('arrange-all-elk-layered').click();
+    await page.getByTestId('arrange-all-main-button').click();
 
     await expect(page.locator('#notistack-snackbar')).not.toBeAttached({ timeout: 2000 }); // no error
   });
@@ -111,7 +108,7 @@ test.describe('diagram - arrange all', () => {
     await playwrightExplorer.select('diagram');
     await expect(page.getByTestId('rf__wrapper')).toBeAttached();
 
-    await page.getByTestId('arrange-all-menu').click();
+    await page.getByTestId('arrange-all-menu-toggle').click();
     await page.getByTestId('arrange-all-elk-rect-packing').click();
 
     await expect(page.locator('#notistack-snackbar')).not.toBeAttached({ timeout: 2000 }); // no error

integration-tests-playwright/playwright/e2e/diagrams/dnd.spec.ts

@@ -298,8 +298,7 @@ test.describe('diagram - drag and drop', () => {
     page,
   }) => {
     await expect(page.getByTestId('rf__wrapper')).toBeAttached();
-    await page.getByTestId('arrange-all-menu').click();
-    await page.getByTestId('arrange-all-elk-layered').click();
+    await page.getByTestId('arrange-all-main-button').click();
 
     const parentNode = new PlaywrightNode(page, 'Description', 'List');
     const parentNodePositionInitial = await parentNode.getReactFlowXYPosition('Description');

integration-tests-playwright/playwright/e2e/diagrams/edge-label.spec.ts

@@ -36,7 +36,7 @@ test.describe('edge-label', () => {
   test('when an edge has a center label, then the label does not stick the edge path', async ({ page }) => {
     await expect(page.getByTestId('rf__wrapper')).toBeAttached();
 
-    await page.getByTestId('arrange-all-menu').click();
+    await page.getByTestId('arrange-all-menu-toggle').click();
     await page.getByTestId('arrange-all-elk-rect-packing').click();
 
     const playwrightEdge = new PlaywrightEdge(page);

integration-tests-playwright/playwright/e2e/diagrams/label.spec.ts

@@ -416,8 +416,7 @@ test.describe('diagram - label', () => {
   });
 
   test('when dragging a center edge label, then no offset apply on the drop position', async ({ page }) => {
-    await page.getByTestId('arrange-all-menu').click();
-    await page.getByTestId('arrange-all-elk-layered').click();
+    await page.getByTestId('arrange-all-main-button').click();
     const rootNode = new PlaywrightNode(page, 'Root', 'List');
     await rootNode.waitForAnimationToFinish();
     await expect(page.getByTestId('rf__wrapper')).toBeAttached();

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/toolbar/ArrangeAllButton.tsx

@@ -20,7 +20,7 @@ import ListItemText from '@mui/material/ListItemText';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import Tooltip from '@mui/material/Tooltip';
-import { LayoutOptions } from 'elkjs/lib/elk-api';
+import { Theme, useTheme } from '@mui/material/styles';
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useArrangeAll } from '../layout/arrange-all/useArrangeAll';
@@ -32,20 +32,23 @@ export const ArrangeAllButton = ({ disabled }: ArrangeAllButtonProps) => {
   const [state, setState] = useState<ArrangeAllButtonState>({
     arrangeAllInProgress: false,
     arrangeAllMenuOpen: false,
+    lastUsedLayout: null,
   });
   const anchorArrangeMenuRef = useRef<HTMLButtonElement | null>(null);
 
   const { arrangeAll } = useArrangeAll();
   const { t } = useTranslation('sirius-components-diagrams', { keyPrefix: 'arrangeAllButton' });
   const { layoutConfigurations } = useLayoutConfigurations();
+  const theme: Theme = useTheme();
 
-  const handleArrangeAll = (layoutOptions: LayoutOptions) => {
+  const handleArrangeAll = (layoutConfiguration: LayoutConfiguration) => {
     setState((prevState) => ({
       ...prevState,
       arrangeAllMenuOpen: false,
       arrangeAllInProgress: true,
+      lastUsedLayout: layoutConfiguration,
     }));
-    arrangeAll(layoutOptions).then(() =>
+    arrangeAll(layoutConfiguration.layoutOptions).then(() =>
       setState((prevState) => ({
         ...prevState,
         arrangeAllInProgress: false,
@@ -58,42 +61,68 @@ export const ArrangeAllButton = ({ disabled }: ArrangeAllButtonProps) => {
       ...prevState,
       arrangeAllMenuOpen: !prevState.arrangeAllMenuOpen,
     }));
+
   const onCloseMenu = () =>
     setState((prevState) => ({
       ...prevState,
       arrangeAllMenuOpen: false,
     }));
 
+  const handleMainButtonClick = () => {
+    if (state.lastUsedLayout) {
+      handleArrangeAll(state.lastUsedLayout);
+    } else if (layoutConfigurations[0]) {
+      handleArrangeAll(layoutConfigurations[0]);
+    }
+  };
+
   useEffect(() => {
     const timeout = setTimeout(() => {
       const urlParams = new URLSearchParams(window.location.search);
       if (urlParams.has('arrangeAll') && urlParams.get('arrangeAll') === 'true' && layoutConfigurations[0]) {
-        handleArrangeAll(layoutConfigurations[0].layoutOptions);
+        handleArrangeAll(layoutConfigurations[0]);
       }
     }, 500);
 
     return () => clearTimeout(timeout);
   }, []);
 
+  const getMainButtonIcon = () => {
+    if (state.arrangeAllInProgress) {
+      return <CircularProgress size={theme.spacing(2)} data-testid="arrange-all-circular-loading" />;
+    }
+    if (state.lastUsedLayout) {
+      return state.lastUsedLayout.icon;
+    }
+    if (layoutConfigurations[0]) {
+      return layoutConfigurations[0].icon;
+    }
+    return <AccountTreeIcon />;
+  };
+
   return (
     <>
       <Tooltip title={t('arrangeMenu')}>
-        <span>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
           <IconButton
             size="small"
             aria-label={t('arrangeMenu')}
-            onClick={handleMenuToggle}
-            data-testid="arrange-all-menu"
+            onClick={handleMainButtonClick}
+            data-testid="arrange-all-main-button"
             ref={anchorArrangeMenuRef}
             disabled={disabled || state.arrangeAllInProgress}>
-            {state.arrangeAllInProgress ? (
-              <CircularProgress size="24px" data-testid="arrange-all-circular-loading" />
-            ) : (
-              <AccountTreeIcon />
-            )}
+            {getMainButtonIcon()}
+          </IconButton>
+          <IconButton
+            size="small"
+            aria-label={t('openMenu')}
+            onClick={handleMenuToggle}
+            data-testid="arrange-all-menu-toggle"
+            disabled={disabled || state.arrangeAllInProgress}
+            style={{ marginLeft: -theme.spacing(1), padding: theme.spacing(0.5) }}>
             <KeyboardArrowDownIcon />
           </IconButton>
-        </span>
+        </div>
       </Tooltip>
       {state.arrangeAllMenuOpen && !state.arrangeAllInProgress ? (
         <Menu
@@ -107,7 +136,7 @@ export const ArrangeAllButton = ({ disabled }: ArrangeAllButtonProps) => {
                 key={layoutConfiguration.id}
                 disabled={disabled}
                 data-testid={`arrange-all-${layoutConfiguration.id}`}
-                onClick={() => handleArrangeAll(layoutConfiguration.layoutOptions)}>
+                onClick={() => handleArrangeAll(layoutConfiguration)}>
                 <ListItemIcon>{layoutConfiguration.icon}</ListItemIcon>
                 <ListItemText primary={layoutConfiguration.label} />
               </MenuItem>

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/toolbar/ArrangeAllButton.types.ts

@@ -10,6 +10,7 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
+import { LayoutConfiguration } from '../layout/arrange-all/useLayoutConfigurations.types';
 
 export interface ArrangeAllButtonProps {
   disabled: boolean;
@@ -18,4 +19,5 @@ export interface ArrangeAllButtonProps {
 export interface ArrangeAllButtonState {
   arrangeAllInProgress: boolean;
   arrangeAllMenuOpen: boolean;
+  lastUsedLayout: LayoutConfiguration | null;
 }

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/toolbar/DiagramToolbar.tsx

@@ -125,7 +125,7 @@ export const DiagramToolbar = memo(({ diagramToolbar }: DiagramToolbarProps) =>
 
   return (
     <>
-      <Panel position="top-left">
+      <Panel position="top-left" data-testid="diagram-toolbar">
         <Paper style={{ display: 'flex', alignItems: 'center', overflow: 'hidden' }}>
           <Box
             ref={collapsibleContentRef}