[1674] Fix fade/hide tools are available on the diagram background

CHANGELOG.adoc

@@ -10,6 +10,8 @@
 
 === Bug fixes
 
+- https://github.com/eclipse-sirius/sirius-components/issues/1674[#1674] [diagram] The fade and hide tools were available on the background of the diagram
+
 === New Features
 
 - https://github.com/eclipse-sirius/sirius-components/issues/1695[#1695] [view] Add a precondition expression to the node description
@@ -60,6 +62,7 @@ They are now correctly supported
 - https://github.com/eclipse-sirius/sirius-components/issues/1741[#1741] [diagram] Border node placement specified with ELK configuration not taken into account anymore
 - https://github.com/eclipse-sirius/sirius-components/issues/1720[#1720] [diagram] Fix the position where newly created views appear on a diagram after a drop
 
+
 === New Features
 
 - https://github.com/eclipse-sirius/sirius-components/issues/1567[#1567] [project] Add support for project templates.

integration-tests/cypress/integration/project/edit/diagram-contextual-palette_spec.js

@@ -0,0 +1,43 @@
+/*******************************************************************************
+ * Copyright (c) 2023 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
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+describe('/projects/:projectId/edit - Robot Diagram', () => {
+  beforeEach(() => {
+    cy.deleteAllProjects();
+    cy.createProject('Cypress Project').then((res) => {
+      const projectId = res.body.data.createProject.project.id;
+      const robot_flow_id = 'c26b6086-b444-3ee6-b8cd-9a4fde5956a7';
+      cy.createDocument(projectId, robot_flow_id, 'flow').then(() => {
+        cy.visit(`/projects/${projectId}/edit`);
+      });
+    });
+
+    cy.getByTestId('flow').dblclick();
+    cy.getByTestId('Robot').dblclick();
+    cy.getByTestId('Robot-more').click();
+    cy.getByTestId('treeitem-contextmenu').findByTestId('new-representation').click();
+
+    cy.getByTestId('name').clear();
+    cy.getByTestId('name').type('Topography');
+    cy.getByTestId('representationDescription').click();
+    cy.getByTestId('Topography with auto layout').click();
+    cy.getByTestId('create-representation').click();
+    cy.getByTestId('Topography').click();
+  });
+
+  it('test Hide/Fade action is not available on diagram background', () => {
+    cy.getByTestId('Rectangle - CaptureSubSystem').click();
+    cy.getByTestId('visibilitySection').should('exist');
+    cy.getByTestId('Diagram').click();
+    cy.getByTestId('visibilitySection').should('not.exist');
+  });
+});

packages/diagrams/frontend/sirius-components-diagrams/src/palette/ContextualPalette.tsx

@@ -18,6 +18,7 @@ import CloseIcon from '@material-ui/icons/Close';
 import { useMachine } from '@xstate/react';
 import { useEffect } from 'react';
 import { GQLCollapsingState, GQLDeletionPolicy } from '../representation/DiagramRepresentation.types';
+import { Diagram } from '../sprotty/Diagram.types';
 import {
   ContextualPaletteProps,
   ContextualPaletteStyleProps,
@@ -176,6 +177,7 @@ export const ContextualPalette = ({
   const { toolSections, message } = context;
 
   const diagramElementId = diagramElement.id;
+  const isRoot: boolean = diagramElement instanceof Diagram;
 
   const {
     loading: toolSectionsLoading,
@@ -207,10 +209,13 @@ export const ContextualPalette = ({
     toolSection.tools.some((tool) => tool.__typename === 'SingleClickOnTwoDiagramElementsTool')
   );
 
-  let toolSectionsCount = toolSections.length + 2;
+  let toolSectionsCount = toolSections.length + 1;
   if (atLeastOneSingleClickOnTwoDiagramElementsTool) {
     toolSectionsCount = toolSectionsCount + 1;
   }
+  if (!isRoot) {
+    toolSectionsCount = toolSectionsCount + 1;
+  }
 
   const props: ContextualPaletteStyleProps = { toolSectionsCount };
   const classes = useContextualPaletteStyle(props);
@@ -257,9 +262,11 @@ export const ContextualPalette = ({
             </div>
           ) : null}
           {toolSectionElements}
-          <div className={classes.visibilitySection}>
-            <ToolSection toolSection={visibilitySection} onToolClick={invokeVisibilityTool} />
-          </div>
+          {!isRoot ? (
+            <div className={classes.visibilitySection} data-testid="visibilitySection">
+              <ToolSection toolSection={visibilitySection} onToolClick={invokeVisibilityTool} />
+            </div>
+          ) : null}
           <div className={classes.close}>
             <Tool tool={closeTool} thumbnail onClick={() => invokeClose()} />
           </div>