[1833] Fix Explorer toolbar and selected item background color width

Bug: #1833 Signed-off-by: Axel RICHARD <axel.richard@obeo.fr>
eclipse-sirius · Mar 8, 2023 · 988d252 · 988d252
1 parent dfbd9c4
commit 988d252
Show file tree

Hide file tree

Showing 13 changed files with 68 additions and 49 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -38,6 +38,7 @@
 - https://github.com/eclipse-sirius/sirius-components/issues/1748[#1748] [chart] Underline and strike-through style options are not taken into account for BarCharts.
 - https://github.com/eclipse-sirius/sirius-components/issues/1688[#1688] [form] The title of the Details view will not be wrapped on multiple lines anymore
 - https://github.com/eclipse-sirius/sirius-components/issues/1602[#1602] [diagram] The connector tool does not work with descriptions from the View DSL
+- https://github.com/eclipse-sirius/sirius-components/issues/1833[#1833] [explorer] Fix Explorer toolbar and selected item background color width
 
 === New Features
 

diff --git a/integration-tests/cypress/integration/project/edit/diagram-context-menu_spec.js b/integration-tests/cypress/integration/project/edit/diagram-context-menu_spec.js
@@ -1,7 +1,7 @@
 /*******************************************************************************
- * Copyright (c) 2021, 2022 Obeo.
+ * Copyright (c) 2021, 2023 Obeo.
  * This program and the accompanying materials
- * are made available under the erms of the Eclipse Public License v2.0
+ * 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/
  *
@@ -32,7 +32,7 @@ describe('/projects/:projectId/edit - Diagram Context Menu', () => {
     cy.getByTestId('name').type('diagram');
     cy.getByTestId('create-representation').click();
 
-    cy.getByTestId('explorer').contains('diagram');
+    cy.getByTestId('explorerTree').contains('diagram');
 
     cy.getByTestId('diagram-more').click();
     cy.getByTestId('treeitem-contextmenu').findByTestId('delete').click();

diff --git a/integration-tests/cypress/integration/project/edit/document-context-menu_spec.js b/integration-tests/cypress/integration/project/edit/document-context-menu_spec.js
@@ -1,7 +1,7 @@
 /*******************************************************************************
- * Copyright (c) 2021, 2022 Obeo.
+ * Copyright (c) 2021, 2023 Obeo.
  * This program and the accompanying materials
- * are made available under the erms of the Eclipse Public License v2.0
+ * 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/
  *
@@ -38,7 +38,7 @@ describe('/projects/:projectId/edit - Document Context Menu', () => {
 
     cy.getByTestId('create-object').click();
 
-    cy.getByTestId('explorer').contains('Domain');
+    cy.getByTestId('explorerTree').contains('Domain');
   });
 
   //fails during build
@@ -49,7 +49,7 @@ describe('/projects/:projectId/edit - Document Context Menu', () => {
 
     cy.getByTestId('create-object').click();
 
-    cy.getByTestId('explorer').contains('Domain');
+    cy.getByTestId('explorerTree').contains('Domain');
     cy.getByTestId('selected').contains('Domain');
   });
 
@@ -91,6 +91,6 @@ describe('/projects/:projectId/edit - Document Context Menu', () => {
 
     cy.getByTestId('create-object').click();
 
-    cy.getByTestId('explorer').contains('NewEntity');
+    cy.getByTestId('explorerTree').contains('NewEntity');
   });
 });
diff --git a/integration-tests/cypress/integration/project/edit/explorer-toolbar_spec.js b/integration-tests/cypress/integration/project/edit/explorer-toolbar_spec.js
@@ -1,7 +1,7 @@
 /*******************************************************************************
  * Copyright (c) 2023 Obeo.
  * This program and the accompanying materials
- * are made available under the erms of the Eclipse Public License v2.0
+ * 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/
  *
@@ -86,7 +86,7 @@ describe('/projects/:projectId/edit - Tree toolbar', () => {
     cy.getByTestId('create-document').click();
 
     cy.get('.MuiDialog-container').should('not.exist');
-    cy.getByTestId('explorer').contains('nobel');
+    cy.getByTestId('explorerTree').contains('nobel');
   });
 
   it('can open the upload document modal', () => {
@@ -114,6 +114,6 @@ it.skip('can upload an existing document', () => {
     cy.getByTestId('upload-document').click();
 
     cy.get('.MuiDialog-container').should('not.exist');
-    cy.getByTestId('explorer').contains('robot');
+    cy.getByTestId('explorerTree').contains('robot');
   });
 });
diff --git a/integration-tests/cypress/integration/project/edit/explorer_spec.js b/integration-tests/cypress/integration/project/edit/explorer_spec.js
@@ -1,7 +1,7 @@
 /*******************************************************************************
  * Copyright (c) 2021, 2023 Obeo.
  * This program and the accompanying materials
- * are made available under the erms of the Eclipse Public License v2.0
+ * 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/
  *
@@ -33,17 +33,17 @@ describe('/projects/:projectId/edit - Explorer', () => {
   });
 
   it('contains the documents', () => {
-    cy.getByTestId('explorer').contains('robot');
+    cy.getByTestId('explorerTree').contains('robot');
   });
 
   it('can expand a tree item', () => {
     cy.getByTestId('robot').dblclick();
-    cy.getByTestId('explorer').contains('Robot');
+    cy.getByTestId('explorerTree').contains('Robot');
 
     cy.getByTestId('Robot').dblclick();
-    cy.getByTestId('explorer').contains('Central_Unit');
-    cy.getByTestId('explorer').contains('CaptureSubSystem');
-    cy.getByTestId('explorer').contains('Wifi');
+    cy.getByTestId('explorerTree').contains('Central_Unit');
+    cy.getByTestId('explorerTree').contains('CaptureSubSystem');
+    cy.getByTestId('explorerTree').contains('Wifi');
   });
 
   it('can collapse a tree item', () => {

diff --git a/integration-tests/cypress/integration/project/edit/object-context-menu_spec.js b/integration-tests/cypress/integration/project/edit/object-context-menu_spec.js
@@ -1,7 +1,7 @@
 /*******************************************************************************
- * Copyright (c) 2021, 2022 Obeo.
+ * Copyright (c) 2021, 2023 Obeo.
  * This program and the accompanying materials
- * are made available under the erms of the Eclipse Public License v2.0
+ * 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/
  *
@@ -75,7 +75,7 @@ describe('/projects/:projectId/edit - Object Context Menu', () => {
     cy.get('[data-value="Power Input"]').click();
     cy.getByTestId('create-object').click();
 
-    cy.getByTestId('explorer').contains('PowerInput');
+    cy.getByTestId('explorerTree').contains('PowerInput');
   });
 
   it('can select the created child object', () => {
@@ -90,7 +90,7 @@ describe('/projects/:projectId/edit - Object Context Menu', () => {
     cy.get('[data-value="Power Input"]').click();
     cy.getByTestId('create-object').click();
 
-    cy.getByTestId('explorer').contains('PowerInput');
+    cy.getByTestId('explorerTree').contains('PowerInput');
     cy.getByTestId('selected').contains('PowerInput');
   });
 
@@ -114,7 +114,7 @@ describe('/projects/:projectId/edit - Object Context Menu', () => {
 
     cy.get('.MuiDialog-container').should('not.exist');
 
-    cy.getByTestId('explorer').contains('diagram');
+    cy.getByTestId('explorerTree').contains('diagram');
   });
 
   it('can create a new representation by clicking on the create button', () => {
@@ -128,7 +128,7 @@ describe('/projects/:projectId/edit - Object Context Menu', () => {
 
     cy.get('.MuiDialog-container').should('not.exist');
 
-    cy.getByTestId('explorer').contains('diagram');
+    cy.getByTestId('explorerTree').contains('diagram');
   });
 
   it('can expand the node in which the representation is created and open the representation', () => {
@@ -142,7 +142,7 @@ describe('/projects/:projectId/edit - Object Context Menu', () => {
 
     cy.get('.MuiDialog-container').should('not.exist');
 
-    cy.getByTestId('explorer').contains('Topography');
+    cy.getByTestId('explorerTree').contains('Topography');
     cy.getByTestId('representation-tab-Topography').should('exist');
   });
 

diff --git a/integration-tests/cypress/integration/project/edit/onboarding_spec.js b/integration-tests/cypress/integration/project/edit/onboarding_spec.js
@@ -1,7 +1,7 @@
 /*******************************************************************************
- * Copyright (c) 2021, 2022 Obeo.
+ * Copyright (c) 2021, 2023 Obeo.
  * This program and the accompanying materials
- * are made available under the erms of the Eclipse Public License v2.0
+ * 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/
  *
@@ -23,6 +23,6 @@ describe('/projects/:projectId/edit - Onboarding', () => {
   it('Create a new model', () => {
     const empty_flow_id = '08e5c635-7d98-37e9-847c-df286e3b2f16';
     cy.getByTestId(empty_flow_id).click();
-    cy.getByTestId('explorer').contains('Flow');
+    cy.getByTestId('explorerTree').contains('Flow');
   });
 });
diff --git a/integration-tests/cypress/integration/project/edit/properties_spec.js b/integration-tests/cypress/integration/project/edit/properties_spec.js
@@ -1,7 +1,7 @@
 /*******************************************************************************
- * Copyright (c) 2021, 2022 Obeo.
+ * Copyright (c) 2021, 2023 Obeo.
  * This program and the accompanying materials
- * are made available under the erms of the Eclipse Public License v2.0
+ * 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/
  *
@@ -52,7 +52,7 @@ describe('/projects/:projectId/edit - Details', () => {
 
     cy.getByTestId('Name').clear();
     cy.getByTestId('Name').type('NewName{enter}');
-    cy.getByTestId('explorer').contains('NewName');
+    cy.getByTestId('explorerTree').contains('NewName');
     cy.getByTestId('form').contains('NewName');
   });
 
@@ -63,9 +63,9 @@ describe('/projects/:projectId/edit - Details', () => {
     cy.getByTestId('Name').clear();
     cy.getByTestId('Name').type('NewName');
 
-    cy.getByTestId('explorer').click({ force: true });
+    cy.getByTestId('explorerTree').click({ force: true });
 
-    cy.getByTestId('explorer').contains('NewName');
+    cy.getByTestId('explorerTree').contains('NewName');
     cy.getByTestId('NewName').click();
     cy.getByTestId('form').contains('NewName');
   });

diff --git a/integration-tests/cypress/integration/project/edit/representation-context-menu_spec.js b/integration-tests/cypress/integration/project/edit/representation-context-menu_spec.js
@@ -1,7 +1,7 @@
 /*******************************************************************************
- * Copyright (c) 2021, 2022 Obeo.
+ * Copyright (c) 2021, 2023 Obeo.
  * This program and the accompanying materials
- * are made available under the erms of the Eclipse Public License v2.0
+ * 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/
  *
@@ -58,8 +58,8 @@ describe('/projects/:projectId/edit - Representation Context Menu', () => {
     cy.getByTestId('representation-tab-A02').should('exist');
     cy.getByTestId('representation-tab-B01').should('not.exist');
     */
-    cy.getByTestId('explorer').contains('A02');
-    cy.getByTestId('explorer').contains('B01');
+    cy.getByTestId('explorerTree').contains('A02');
+    cy.getByTestId('explorerTree').contains('B01');
   });
 
   it('can rename an opened focused representation', () => {
@@ -76,7 +76,7 @@ describe('/projects/:projectId/edit - Representation Context Menu', () => {
     cy.getByTestId('representation-tab-A02').should('exist');
     cy.getByTestId('representation-tab-B01').should('not.exist');
     */
-    cy.getByTestId('explorer').contains('A02');
-    cy.getByTestId('explorer').contains('B01');
+    cy.getByTestId('explorerTree').contains('A02');
+    cy.getByTestId('explorerTree').contains('B01');
   });
 });
diff --git a/packages/core/frontend/sirius-components-core/src/workbench/Site.tsx b/packages/core/frontend/sirius-components-core/src/workbench/Site.tsx
@@ -77,6 +77,7 @@ const useSiteStyles = makeStyles((theme) => ({
     borderBottomColor: theme.palette.divider,
     borderBottomWidth: '1px',
     borderBottomStyle: 'solid',
+    overflow: 'hidden',
   },
   viewHeaderIcon: {
     margin: theme.spacing(1),
@@ -89,6 +90,8 @@ const useSiteStyles = makeStyles((theme) => ({
   viewContent: {
     flexGrow: 1,
     overflow: 'auto',
+    display: 'flex',
+    flexDirection: 'column',
   },
 }));
 

diff --git a/packages/trees/frontend/sirius-components-trees/src/toolbar/TreeToolBar.tsx b/packages/trees/frontend/sirius-components-trees/src/toolbar/TreeToolBar.tsx
@@ -22,6 +22,7 @@ const useTreeToolbarStyles = makeStyles((theme) => ({
   toolbar: {
     display: 'flex',
     flexDirection: 'row',
+    overflow: 'hidden',
     height: theme.spacing(4),
     paddingLeft: theme.spacing(1),
     paddingRight: theme.spacing(1),

diff --git a/packages/trees/frontend/sirius-components-trees/src/trees/Tree.tsx b/packages/trees/frontend/sirius-components-trees/src/trees/Tree.tsx
@@ -10,11 +10,20 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
+import { makeStyles } from '@material-ui/core/styles';
 import { useEffect, useRef } from 'react';
 import { TreeItem } from '../treeitems/TreeItem';
 import { TreeProps } from './Tree.types';
 
+const useTreeStyle = makeStyles((_) => ({
+  ul: {
+    width: 'inherit',
+    minWidth: 'fit-content',
+  },
+}));
+
 export const Tree = ({ editingContextId, tree, onExpand, selection, setSelection, readOnly }: TreeProps) => {
+  const classes = useTreeStyle();
   const treeElement = useRef(null);
 
   useEffect(() => {
@@ -77,7 +86,7 @@ export const Tree = ({ editingContextId, tree, onExpand, selection, setSelection
 
   return (
     <div ref={treeElement}>
-      <ul data-testid="tree-root-elements">
+      <ul className={classes.ul} data-testid="tree-root-elements">
         {tree.children.map((item) => (
           <li key={item.id}>
             <TreeItem

diff --git a/packages/trees/frontend/sirius-components-trees/src/views/ExplorerView.tsx b/packages/trees/frontend/sirius-components-trees/src/views/ExplorerView.tsx
@@ -57,7 +57,14 @@ const getTreePathQuery = gql`
 
 const useExplorerViewStyles = makeStyles((theme) => ({
   explorerView: {
+    flexGrow: 1,
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  explorerTree: {
     paddingTop: theme.spacing(1),
+    flexGrow: 1,
+    overflow: 'auto',
   },
 }));
 
@@ -156,15 +163,13 @@ export const ExplorerView = ({ editingContextId, selection, setSelection, readOn
     dispatch(synchronizeWithRepresentationEvent);
   };
   return (
-    <>
-      <div className="explorerToolBar">
-        <TreeToolBar
-          editingContextId={editingContextId}
-          onSynchronizedClick={onSynchronizedClick}
-          synchronized={synchronizedWithRepresentation}
-          readOnly={readOnly}></TreeToolBar>
-      </div>
-      <div className={styles.explorerView} data-testid="explorer">
+    <div className={styles.explorerView}>
+      <TreeToolBar
+        editingContextId={editingContextId}
+        onSynchronizedClick={onSynchronizedClick}
+        synchronized={synchronizedWithRepresentation}
+        readOnly={readOnly}></TreeToolBar>
+      <div className={styles.explorerTree} data-testid="explorerTree">
         {tree ? (
           <Tree
             editingContextId={editingContextId}
@@ -196,6 +201,6 @@ export const ExplorerView = ({ editingContextId, selection, setSelection, readOn
         }
         data-testid="error"
       />
-    </>
+    </div>
   );
 };